diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index f0f320e02..37555a6a0 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -10,6 +10,7 @@
 <link
   href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
   rel="stylesheet"
+  crossorigin="anonymous"
 />
 <title>SDS Design System</title>
 <style>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index fbd19881a..af5a2d62c 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -2,4 +2,5 @@
 <link
   href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
   rel="stylesheet"
+  crossorigin="anonymous"
 />
diff --git a/package.json b/package.json
index a896344c9..7d3a447dd 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
-    "@chanzuckerberg/axe-storybook-testing": "^7.1.2",
+    "@chanzuckerberg/axe-storybook-testing": "^7.1.3",
     "@chanzuckerberg/story-utils": "^4.0.0",
     "@emotion/core": "^11.0.0",
     "@emotion/css": "^11.11.0",
@@ -21,18 +21,18 @@
     "@mui/material": "^5.13.3",
     "@rollup/plugin-typescript": "^8.3.1",
     "@rollup/plugin-url": "^6.1.0",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-actions": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storyshots": "^7.4.5",
-    "@storybook/addons": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-webpack5": "^7.4.5",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.1",
-    "@storybook/theming": "^7.4.5",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-storyshots": "^7.5.3",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/test-runner": "^0.15.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
     "@svgr/rollup": "^8.0.1",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/dom": "^9.2.0",
@@ -77,7 +77,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.19.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^5.1.3",
     "jest": "^29.6.2",
     "lerna": "^6.5.1",
@@ -94,9 +94,9 @@
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-ts": "^3.2.0",
-    "storybook": "^7.4.5",
+    "storybook": "^7.5.3",
     "storybook-addon-emotion-theme": "^2.1.1",
-    "storybook-addon-pseudo-states": "^2.1.1",
+    "storybook-addon-pseudo-states": "^2.1.2",
     "style-dictionary": "^3.0.3",
     "stylelint": "^13.11.0",
     "stylelint-config-recommended": "^3.0.0",
@@ -105,6 +105,10 @@
     "typescript": "^5.1.3",
     "url-loader": "^4.1.1"
   },
+  "resolutions": {
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.1"
+  },
   "scripts": {
     "start": "storybook dev -p 6006",
     "build-storybook": "storybook build -o docs-build",
@@ -118,7 +122,7 @@
     "lint": "lerna run lint",
     "build": "lerna run build",
     "ci": "yarn install --immutable",
-    "version:ci":"HUSKY=0 lerna version --yes --conventional-commits",
+    "version:ci": "HUSKY=0 lerna version --yes --conventional-commits",
     "publish:ci": "HUSKY=0 lerna publish from-package --yes"
   },
   "lint-staged": {
@@ -150,5 +154,6 @@
   "workspaces": [
     "packages/*"
   ],
-  "main": "index.js"
+  "main": "index.js",
+  "dependencies": {}
 }
diff --git a/packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx b/packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
new file mode 100644
index 000000000..d85e6354a
--- /dev/null
+++ b/packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
@@ -0,0 +1,122 @@
+// (masoudmanson): The unit tests rely on the content in this file; do not alter it!
+
+import Icon from "../core/Icon";
+
+export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
+  {
+    icon: <Icon sdsIcon="chevronRight" sdsSize="xs" sdsType="static" />,
+    name: "Column One",
+    options: [
+      {
+        name: "Status: can't reproduce",
+      },
+      {
+        name: "Status: confirmed",
+      },
+      {
+        count: 3,
+        name: "Status: duplicate",
+      },
+      {
+        count: 5,
+        name: "Status: needs information",
+      },
+      {
+        details: "This will not be worked on",
+        name: "Status: wont do/fix",
+      },
+      {
+        details: "This is still in progress",
+        name: "Status: work in progress",
+      },
+    ],
+    width: 260,
+  },
+  {
+    icon: <Icon sdsIcon="chevronRight" sdsSize="xs" sdsType="static" />,
+    name: "Column Two",
+    options: [
+      {
+        details: "This will be worked on",
+        name: "Type: bug",
+      },
+      {
+        count: 4,
+        name: "Type: discussion",
+      },
+      {
+        name: "Type: documentation",
+      },
+      {
+        name: "Type: enhancement",
+      },
+      {
+        name: "Type: epic",
+      },
+      {
+        name: "Type: feature request",
+      },
+      {
+        name: "Type: question",
+      },
+    ],
+    width: 260,
+  },
+  {
+    name: "Column Three",
+    options: [
+      {
+        name: "Bacteria",
+        sdsIcon: "bacteria",
+        sdsIconProps: {
+          color: "gray",
+        },
+      },
+      {
+        name: "Puzzle Piece",
+        sdsIcon: "puzzlePiece",
+        sdsIconProps: {
+          color: "gray",
+        },
+      },
+      {
+        count: 10,
+        name: "Copy",
+        sdsIcon: "copy",
+        sdsIconProps: {
+          color: "gray",
+        },
+      },
+      {
+        name: "Light Bulb",
+        sdsIcon: "lightBulb",
+        sdsIconProps: {
+          color: "gray",
+        },
+      },
+      {
+        count: 6,
+        name: "List",
+        sdsIcon: "list",
+        sdsIconProps: {
+          color: "gray",
+        },
+      },
+      {
+        name: "Vertical Tree",
+        sdsIcon: "treeVertical",
+        sdsIconProps: {
+          color: "gray",
+        },
+      },
+      {
+        name: "Link",
+        sdsIcon: "link",
+        sdsIconProps: {
+          color: "gray",
+        },
+      },
+    ],
+    width: 180,
+  },
+];
diff --git a/packages/components/src/core/DropdownMenu/GITHUB_LABELS.tsx b/packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
similarity index 71%
rename from packages/components/src/core/DropdownMenu/GITHUB_LABELS.tsx
rename to packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
index ade053027..c6b6311cc 100644
--- a/packages/components/src/core/DropdownMenu/GITHUB_LABELS.tsx
+++ b/packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
@@ -1,9 +1,8 @@
 // (masoudmanson): The unit tests rely on the content in this file; do not alter it!
 
-import { DefaultDropdownMenuOption } from ".";
-import Tag from "../Tag";
+import Tag from "../core/Tag";
 
-export const GITHUB_LABELS: DefaultDropdownMenuOption[] = [
+export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
   {
     name: "Status: can't reproduce",
     section: "name only",
@@ -33,43 +32,61 @@ export const GITHUB_LABELS: DefaultDropdownMenuOption[] = [
     section: "name with details",
   },
   {
-    details: "This will not be worked on",
-    name: "Type: bug",
+    name: "Bacteria",
     sdsIcon: "bacteria",
     sdsIconProps: {
-      className: "custom-class-name",
+      color: "gray",
     },
     section: "With Icon",
   },
   {
-    count: 4,
-    name: "Type: discussion",
+    name: "Puzzle Piece",
     sdsIcon: "puzzlePiece",
+    sdsIconProps: {
+      color: "gray",
+    },
     section: "With Icon",
   },
   {
-    name: "Type: documentation",
+    count: 10,
+    name: "Copy",
     sdsIcon: "copy",
+    sdsIconProps: {
+      color: "gray",
+    },
     section: "With Icon",
   },
   {
-    name: "Type: enhancement",
+    name: "Light Bulb",
     sdsIcon: "lightBulb",
+    sdsIconProps: {
+      color: "gray",
+    },
     section: "With Icon",
   },
   {
-    name: "Type: epic",
+    count: 6,
+    name: "List",
     sdsIcon: "list",
+    sdsIconProps: {
+      color: "gray",
+    },
     section: "With Icon",
   },
   {
-    name: "Type: feature request",
+    name: "Vertical Tree",
     sdsIcon: "treeVertical",
+    sdsIconProps: {
+      color: "gray",
+    },
     section: "With Icon",
   },
   {
-    name: "Type: question",
-    sdsIcon: "search",
+    name: "Link",
+    sdsIcon: "link",
+    sdsIconProps: {
+      color: "gray",
+    },
     section: "With Icon",
   },
   {
@@ -82,18 +99,21 @@ export const GITHUB_LABELS: DefaultDropdownMenuOption[] = [
             sdsStyle="rounded"
             sdsType="secondary"
             color="error"
+            hover={false}
           />
           <Tag
             label="feature"
             sdsStyle="rounded"
             sdsType="secondary"
             color="warning"
+            hover={false}
           />
           <Tag
             label="refactor"
             sdsStyle="rounded"
             sdsType="secondary"
             color="gray"
+            hover={false}
           />
         </div>
       </div>
diff --git a/packages/components/src/common/utils.ts b/packages/components/src/common/utils.ts
index f84b85202..e976aa0c1 100644
--- a/packages/components/src/common/utils.ts
+++ b/packages/components/src/common/utils.ts
@@ -2,3 +2,5 @@ export const noop = (): void => {};
 
 export const toKebabCase = (str: string) =>
   str.replace(/[\s_]+/g, "-").toLowerCase();
+
+export const EMPTY_OBJECT = {};
diff --git a/packages/components/src/core/Autocomplete/Autocomplete.namespace-test.tsx b/packages/components/src/core/Autocomplete/Autocomplete.namespace-test.tsx
index 8e7291148..b83e69683 100644
--- a/packages/components/src/core/Autocomplete/Autocomplete.namespace-test.tsx
+++ b/packages/components/src/core/Autocomplete/Autocomplete.namespace-test.tsx
@@ -19,12 +19,7 @@ const OPTIONS = [
 ];
 
 const AutocompleteNameSpaceTest = (
-  props: AutocompleteProps<
-    DefaultAutocompleteOption,
-    true,
-    undefined,
-    undefined
-  >
+  props: AutocompleteProps<DefaultAutocompleteOption, true, false, false>
 ) => {
   return (
     <Autocomplete
diff --git a/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
index 3c0a336ce..63fdb2660 100644
--- a/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`<Autocomplete /> Default story renders snapshot 1`] = `
 <div
-  style="margin: 16px 0px 0px 24px; width: 300px;"
+  style="margin: 16px 0px 0px 24px; width: 274px;"
 >
   <div
-    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-t46og2-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-kwza7v-MuiAutocomplete-root"
     label="Search by label"
   >
     <div
@@ -84,8 +84,5 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
       </div>
     </div>
   </div>
-  <div
-    style="margin-top: 10px;"
-  />
 </div>
 `;
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
new file mode 100644
index 000000000..04dfb5c98
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
@@ -0,0 +1,354 @@
+import {
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteFreeSoloValueMapping,
+  AutocompleteInputChangeReason,
+  AutocompleteRenderInputParams,
+  AutocompleteRenderOptionState,
+  AutocompleteValue,
+  AutocompleteProps as MuiAutocompleteProps,
+  Popper,
+  PopperProps,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import React, { ReactNode, SyntheticEvent, useCallback, useState } from "react";
+import { EMPTY_OBJECT, noop } from "src/common/utils";
+import ButtonIcon from "../../../ButtonIcon";
+import { IconProps } from "../../../Icon";
+import { InputSearchProps } from "../../../InputSearch";
+import { StyledInputAdornment } from "../../../InputSearch/style";
+import MenuItem, { IconNameToSmallSizes } from "../../../MenuItem";
+import { SDSTheme } from "../../../styles";
+import {
+  InputBaseWrapper,
+  StyleProps,
+  StyledAutocompleteBase,
+  StyledMenuInputSearch,
+  StyledMenuItemDetails,
+  StyledMenuItemText,
+  StyledPaper,
+} from "./style";
+
+// (thuang): This requires option to have a `name` property.
+// (masoudmanson): Represents a generic autocomplete option with common properties.
+interface AutocompleteOptionGeneral {
+  name: string; // The name of the autocomplete option.
+  section?: string; // An optional section for categorization.
+}
+
+// (masoudmanson): Represents a basic autocomplete option.
+export interface AutocompleteOptionBasic extends AutocompleteOptionGeneral {
+  count?: number; // An optional count associated with the option.
+  details?: string; // An optional string for additional details.
+  sdsIcon?: keyof IconNameToSmallSizes; // An optional icon key.
+  sdsIconProps?: Partial<IconProps<keyof IconNameToSmallSizes>>; // Optional properties for the associated icon.
+}
+
+// (masoudmanson): Represents an autocomplete option that includes a custom React component.
+export interface AutocompleteOptionComponent extends AutocompleteOptionGeneral {
+  component?: ReactNode; // An optional custom React component.
+}
+
+// (masoudmanson): Combines properties from two types while ensuring that overlapping properties are optional.
+type Exclusive<T, U> = T & { [K in Exclude<keyof U, keyof T>]?: undefined };
+
+// (masoudmanson): Represents a default autocomplete option that can be either basic or include a custom component.
+export type DefaultAutocompleteOption =
+  | Exclusive<AutocompleteOptionBasic, AutocompleteOptionComponent> // Represents a basic option with optional custom properties.
+  | Exclusive<AutocompleteOptionComponent, AutocompleteOptionBasic>; // Represents an option with a custom component and optional basic properties.
+
+interface ExtraAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>
+  extends StyleProps {
+  keepSearchOnSelect?: boolean;
+  renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
+  onInputChange?: (
+    event: SyntheticEvent<Element, Event>,
+    value: string,
+    reason: AutocompleteInputChangeReason
+  ) => void;
+  onChange?: (
+    event: React.SyntheticEvent,
+    value: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
+    reason: AutocompleteChangeReason,
+    details?: AutocompleteChangeDetails<T>
+  ) => void;
+  InputBaseProps?: Partial<InputSearchProps>;
+  label?: string;
+}
+
+type CustomAutocompleteProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = Omit<
+  MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
+  "renderInput" | "nonce" | "rev" | "rel" | "autoFocus" | "content"
+>;
+
+export type AutocompleteBaseProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = CustomAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> &
+  ExtraAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>;
+
+const AutocompleteBase = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: AutocompleteBaseProps<T, Multiple, DisableClearable, FreeSolo>
+): JSX.Element => {
+  const {
+    multiple,
+    disableCloseOnSelect = multiple,
+    getOptionLabel = defaultGetOptionLabel,
+    InputBaseProps = EMPTY_OBJECT,
+    isOptionEqualToValue = defaultIsOptionEqualToValue,
+    keepSearchOnSelect = false,
+    label = "Label",
+    loading = false,
+    loadingText = "",
+    noOptionsText = "No options",
+    onInputChange = noop,
+    renderOption = defaultRenderOption,
+    renderTags = defaultRenderTags,
+    search = false,
+    clearOnBlur = false,
+    blurOnSelect = !multiple,
+  } = props;
+  const theme: SDSTheme = useTheme();
+
+  const [inputValue, setInputValue] = useState("");
+
+  return (
+    <StyledAutocompleteBase
+      clearOnBlur={clearOnBlur}
+      disableCloseOnSelect={disableCloseOnSelect}
+      disablePortal
+      renderTags={renderTags}
+      loading={loading}
+      loadingText={loadingText}
+      noOptionsText={noOptionsText}
+      PaperComponent={StyledPaper}
+      PopperComponent={useDefaultPopperComponent()}
+      renderOption={renderOption}
+      getOptionLabel={getOptionLabel}
+      isOptionEqualToValue={isOptionEqualToValue}
+      inputValue={inputValue}
+      renderInput={defaultRenderInput}
+      multiple={multiple}
+      {...props}
+      // (masoudmanson): For multiple options (multiple = true), setting blurOnSelect to false
+      // keeps the dropdown open after selecting an option. This feature enhances user experience
+      // by preventing the dropdown from closing, enabling users to select multiple options
+      // without having to reopen the menu repeatedly.
+      blurOnSelect={multiple ? false : blurOnSelect}
+      // (masoudmanson): Given the necessity of maintaining consistent onBlur functionality,
+      // and clearing the input value on blur, it's crucial to include the onBlur handler
+      // after spreading other props. Furthermore, within the defaultOnBlur function, the
+      // actual onBlur function is invoked for completeness.
+      onBlur={defaultOnBlur}
+      // (masoudmanson): To ensure component-level actions (changing the input field value)
+      // trigger upon input changes, it's crucial to position the onInputChange handler after
+      // spreading the other props. Furthermore, within the defaultOnInputChange function,
+      // the provided onInputChange from props is called at the end to emit the input changes
+      // to the user.
+      onInputChange={defaultOnInputChange}
+    />
+  );
+
+  /**
+   * (masoudmanson): Using a custom Popper or Paper with the Autocomplete
+   * without a useCallback results in scroll jumps while selecting an option!
+   */
+  function useDefaultPopperComponent() {
+    return useCallback((popperProps: PopperProps) => {
+      return (
+        <Popper
+          modifiers={[
+            {
+              enabled: true,
+              name: "offset",
+              options: {
+                offset: [0, theme.app?.spacing.s],
+              },
+            },
+          ]}
+          {...popperProps}
+        />
+      );
+    }, []);
+  }
+
+  function defaultRenderInput(params: AutocompleteRenderInputParams) {
+    return (
+      <InputBaseWrapper search={search}>
+        <StyledMenuInputSearch
+          id="location-search"
+          label={label}
+          placeholder={label}
+          ref={params.InputProps.ref}
+          search={search}
+          // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
+          onKeyDown={(event) => {
+            if (event.key === "Backspace") {
+              event.stopPropagation();
+            }
+          }}
+          InputProps={{
+            /**
+             * (thuang): Works with css caret-color: "transparent" to hide
+             * mobile keyboard
+             */
+            inputMode: search ? "text" : "none",
+            /**
+             * (mmoore): passing only the ref along to InputProps to prevent
+             * default MUI arrow from rendering in search input.
+             * renderInput strips InputProps, so we explicitly pass end adornment here
+             */
+            ...params.InputProps.ref,
+            endAdornment: (
+              <StyledInputAdornment position="end">
+                {/**
+                 * (masoudmanson): Because the Autocomplete component overrides the
+                 * InputSearch's endAdornment, we must also include the clear IconButton here.
+                 */}
+                {inputValue && (
+                  <ButtonIcon
+                    aria-label="clear-button"
+                    className="input-search-clear-icon"
+                    onClick={clearInput}
+                    sdsType="primary"
+                    sdsSize="small"
+                    sdsIconProps={{
+                      sdsType: "iconButton",
+                    }}
+                    sdsIcon="xMark"
+                  />
+                )}
+                <ButtonIcon
+                  aria-label="search-button"
+                  sdsType="secondary"
+                  sdsSize="small"
+                  sdsIconProps={{
+                    sdsType: "interactive",
+                  }}
+                  sdsIcon="search"
+                />
+              </StyledInputAdornment>
+            ),
+            inputProps: params.inputProps,
+          }}
+          {...InputBaseProps}
+        />
+      </InputBaseWrapper>
+    );
+  }
+
+  function defaultOnBlur(event: React.FocusEvent<HTMLInputElement>) {
+    if (clearOnBlur) setInputValue("");
+    props.onBlur?.(event);
+  }
+
+  function defaultOnInputChange(
+    event: SyntheticEvent<Element, Event>,
+    value: string,
+    reason: AutocompleteInputChangeReason
+  ) {
+    if (!multiple) {
+      if (reason === "input") {
+        setInputValue(value);
+      } else {
+        setInputValue("");
+      }
+    } else {
+      if (reason === "clear") {
+        setInputValue("");
+      } else if (
+        reason === "input" ||
+        (reason === "reset" && !keepSearchOnSelect)
+      ) {
+        setInputValue(value);
+      }
+    }
+
+    if (onInputChange) onInputChange(event, value, reason);
+  }
+
+  function clearInput() {
+    setInputValue("");
+    /**
+     * (masoudmanson): Because we are manually firing this event,
+     * we must build a onChange event to transmit the updated value to onChange listeners.
+     */
+    if (onInputChange)
+      onInputChange(
+        { target: { value: "" } } as React.ChangeEvent<HTMLInputElement>,
+        "",
+        "clear"
+      );
+  }
+
+  function defaultGetOptionLabel(
+    option:
+      | DefaultAutocompleteOption
+      | AutocompleteFreeSoloValueMapping<boolean>
+  ): string {
+    if (typeof option === "object" && "name" in option) return option.name;
+    return option.toString();
+  }
+
+  function defaultIsOptionEqualToValue(option: T, val: T): boolean {
+    return option.name === val.name;
+  }
+
+  function defaultRenderTags() {
+    return null;
+  }
+
+  function defaultRenderOption(
+    optionProps: React.HTMLAttributes<HTMLLIElement>,
+    option: T,
+    { selected }: AutocompleteRenderOptionState
+  ) {
+    let MenuItemContent;
+
+    const { component, details, count, sdsIcon, sdsIconProps } = option;
+    const menuItemLabel = getOptionLabel(option);
+
+    if (component) {
+      MenuItemContent = component;
+    } else {
+      MenuItemContent = (
+        <StyledMenuItemText>
+          {menuItemLabel}
+          {details && (
+            <StyledMenuItemDetails className="menuItem-details">
+              {details}
+            </StyledMenuItemDetails>
+          )}
+        </StyledMenuItemText>
+      );
+    }
+
+    return (
+      <MenuItem
+        column={count}
+        disabled={optionProps["aria-disabled"] === true}
+        sdsIcon={sdsIcon}
+        sdsIconProps={sdsIconProps}
+        isMultiSelect={multiple}
+        selected={selected}
+        {...optionProps}
+      >
+        {MenuItemContent}
+      </MenuItem>
+    );
+  }
+};
+
+export default AutocompleteBase;
diff --git a/packages/components/src/core/Autocomplete/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
similarity index 64%
rename from packages/components/src/core/Autocomplete/style.ts
rename to packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
index 07f847693..58422402b 100644
--- a/packages/components/src/core/Autocomplete/style.ts
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
@@ -1,17 +1,17 @@
-import { Autocomplete, Paper } from "@mui/material";
+import { Autocomplete, autocompleteClasses, Paper } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactElement } from "react";
-import InputSearch from "../InputSearch";
+import InputSearch from "../../../InputSearch";
 import {
   CommonThemeProps,
   fontBodyXxs,
-  fontCapsXxxxs,
+  fontCapsXxxs,
   getBorders,
   getColors,
   getCorners,
   getShadows,
   getSpaces,
-} from "../styles";
+} from "../../../styles";
 
 export interface StyleProps extends CommonThemeProps {
   count?: number;
@@ -24,15 +24,17 @@ const doNotForwardProps = [
   "keepSearchOnSelect",
   "search",
   "InputBaseProps",
+  "PopperBaseProps",
+  "onClickAway",
 ];
 
-export const StyledAutocomplete = styled(Autocomplete, {
+export const StyledAutocompleteBase = styled(Autocomplete, {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
-  + .MuiAutocomplete-popper
-    > .MuiAutocomplete-paper
-    .MuiAutocomplete-groupLabel {
-    ${fontCapsXxxxs}
+  + .${autocompleteClasses.popper}
+    > .${autocompleteClasses.paper}
+    .${autocompleteClasses.groupLabel} {
+    ${fontCapsXxxs}
   }
 
   ${(props: StyleProps) => {
@@ -52,58 +54,63 @@ export const StyledAutocomplete = styled(Autocomplete, {
         }
       }
 
-      & + .MuiAutocomplete-popper > .MuiAutocomplete-paper {
-        ${search ? `padding-left: ${spacings?.s}px !important;` : ""}
-
-        .MuiAutocomplete-listbox {
+      & + .${autocompleteClasses.popper} > .${autocompleteClasses.paper} {
+        .${autocompleteClasses.listbox} {
           max-height: 40vh;
-          padding-top: 0;
-          padding-bottom: 0;
-          padding-right: ${spacings?.s}px;
+          padding: 0 ${spacings?.m}px 0 0;
 
-          .MuiAutocomplete-option {
+          .${autocompleteClasses.option} {
             min-height: unset;
-          }
 
-          .MuiAutocomplete-option.Mui-focused {
-            background-color: ${colors?.gray[100]};
-          }
+            &.${autocompleteClasses.focused} {
+              background-color: ${colors?.gray[100]};
+            }
 
-          .MuiAutocomplete-option[aria-selected="true"] {
-            background-color: white;
-          }
+            &[aria-selected="true"] {
+              background-color: white;
+            }
 
-          .MuiAutocomplete-option[aria-disabled="true"] {
-            opacity: 1;
-          }
+            &[aria-disabled="true"] {
+              opacity: 1;
+            }
 
-          .MuiAutocomplete-option[aria-selected="true"].Mui-focused {
-            background-color: ${colors?.gray[100]};
+            &[aria-selected="true"].${autocompleteClasses.focused} {
+              background-color: ${colors?.gray[100]};
+            }
           }
 
-          & > li:last-child .MuiAutocomplete-groupUl {
+          & > li:last-child .${autocompleteClasses.groupUl} {
             border-bottom: none;
             margin-bottom: 0;
+            padding-bottom: 0;
           }
         }
 
-        .MuiAutocomplete-groupLabel {
+        .${autocompleteClasses.groupLabel} {
           top: 0;
           color: ${colors?.gray[500]};
-          padding: ${spacings?.xxs}px 0 ${spacings?.xxs}px 0;
+          padding: ${spacings?.xxs}px ${spacings?.s}px;
         }
 
-        .MuiAutocomplete-groupUl {
-          margin-bottom: ${spacings?.m}px;
+        .${autocompleteClasses.groupUl} {
           position: relative;
-          padding: 0 0 ${spacings?.xs}px 0 0;
+          margin: 0 0 ${spacings?.m}px;
           border-bottom: ${borders?.gray[200]};
+          padding-bottom: ${spacings?.xxs}px;
 
           & li:last-of-type {
             position: relative;
-            margin-bottom: ${spacings?.xxs}px;
           }
         }
+
+        .${autocompleteClasses.noOptions} {
+          padding: ${spacings?.xs}px ${spacings?.s}px;
+          margin-right: ${spacings?.l}px;
+        }
+
+        .${autocompleteClasses.loading} {
+          padding: 0 ${spacings?.m}px 0 0;
+        }
       }
     `;
   }}
@@ -122,9 +129,7 @@ export const InputBaseWrapper = styled("div", {
       return `
         border: 0;
         padding: 0;
-
         white-space: nowrap;
-
         clip-path: inset(100%);
         clip: rect(0 0 0 0);
         overflow: hidden;
@@ -153,7 +158,7 @@ export const StyledPaper = styled(Paper)`
     const shadows = getShadows(props);
 
     return `
-      padding: ${spacings?.s}px 0 0 ${spacings?.s}px;
+      padding: ${spacings?.l}px ${spacings?.xxs}px ${spacings?.l}px ${spacings?.l}px ;
       background-color: white;
       border: ${borders?.gray[100]};
       border-radius: ${corners?.m}px;
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/index.tsx
new file mode 100644
index 000000000..98833d440
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/index.tsx
@@ -0,0 +1,180 @@
+import {
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteValue,
+} from "@mui/base";
+import { useCallback, useEffect, useState } from "react";
+import { AutocompleteMultiColumnOption } from "../..";
+import AutocompleteBase, {
+  AutocompleteBaseProps,
+  DefaultAutocompleteOption,
+} from "../AutocompleteBase";
+import { StyledColumn, StyledColumnIcon, StyledColumnTitle } from "./style";
+
+interface ExtraAutocompleteGroupProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> {
+  autocompleteProps: AutocompleteMultiColumnOption<
+    T,
+    Multiple,
+    DisableClearable,
+    FreeSolo
+  >;
+  onValueChange: (
+    colum: string,
+    event: React.SyntheticEvent,
+    value: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
+    reason: AutocompleteChangeReason,
+    details?: AutocompleteChangeDetails<T>
+  ) => void;
+  value?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
+  popperOpen?: boolean;
+}
+
+type CustomAutocompleteProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = Omit<
+  AutocompleteBaseProps<T, Multiple, DisableClearable, FreeSolo>,
+  | "renderInput"
+  | "options"
+  | "value"
+  | "onChange"
+  | "nonce"
+  | "rev"
+  | "rel"
+  | "autoFocus"
+  | "content"
+>;
+
+export type AutocompleteGroupProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = CustomAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> &
+  ExtraAutocompleteGroupProps<T, Multiple, DisableClearable, FreeSolo>;
+
+const AutocompleteGroup = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: AutocompleteGroupProps<T, Multiple, DisableClearable, FreeSolo>
+) => {
+  const {
+    autocompleteProps,
+    onValueChange,
+    value: propValue,
+    multiple,
+    label,
+    InputBaseProps,
+    popperOpen,
+    inputValue,
+    PaperComponent,
+    ...rest
+  } = props;
+
+  const { name, width, icon, props: propProps } = autocompleteProps;
+
+  const [value, setValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(multiple, propValue));
+  const [pendingValue, setPendingValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(multiple, propValue));
+
+  useEffect(() => {
+    if (propValue !== undefined) {
+      setValue(propValue);
+    }
+  }, [propValue]);
+
+  const handleChange = useCallback(
+    (
+      event: React.SyntheticEvent,
+      newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
+      reason: AutocompleteChangeReason,
+      details?: AutocompleteChangeDetails<T>
+    ) => {
+      propProps?.onChange?.(event, newValue, reason, details);
+      onValueChange(name, event, newValue, reason, details);
+
+      if (multiple) {
+        setPendingValue(newValue);
+      } else {
+        if (
+          newValue &&
+          !Array.isArray(newValue) &&
+          Object.prototype.hasOwnProperty.call(newValue, "name")
+        ) {
+          setValue(newValue);
+        }
+      }
+    },
+    [name, multiple, onValueChange, propProps]
+  );
+
+  return (
+    <StyledColumn
+      width={width}
+      className="SdsAutocompleteMultiColumn-column-root"
+    >
+      {icon && (
+        <StyledColumnIcon className="SdsAutocompleteMultiColumn-column-relation-icon">
+          {icon}
+        </StyledColumnIcon>
+      )}
+      <StyledColumnTitle className="SdsAutocompleteMultiColumn-column-title">
+        {name}
+      </StyledColumnTitle>
+      <AutocompleteBase<T, Multiple, DisableClearable, FreeSolo>
+        label={label}
+        InputBaseProps={InputBaseProps}
+        open={popperOpen}
+        multiple={multiple}
+        inputValue={inputValue}
+        options={autocompleteProps.options as T[]}
+        onChange={handleChange}
+        value={multiple ? pendingValue : value}
+        search={false}
+        PaperComponent={PaperComponent}
+        {...rest}
+        {...autocompleteProps.props}
+        // (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
+        groupBy={undefined}
+      />
+    </StyledColumn>
+  );
+
+  function getInitialValue(
+    isMultiple: boolean | undefined,
+    customValue?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ): AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> {
+    if (customValue !== undefined) {
+      return customValue;
+    }
+
+    return isMultiple
+      ? ([] as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >)
+      : (null as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >);
+  }
+};
+
+export default AutocompleteGroup;
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
new file mode 100644
index 000000000..b40bd0862
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
@@ -0,0 +1,81 @@
+import { styled } from "@mui/material/styles";
+import { ReactElement } from "react";
+import {
+  CommonThemeProps,
+  fontCapsXxxs,
+  getColors,
+  getIconSizes,
+  getSpaces,
+  getTypography,
+} from "../../../styles";
+
+export interface StyleProps extends CommonThemeProps {
+  count?: number;
+  icon?: ReactElement;
+  search?: boolean;
+  title?: string;
+  width?: number;
+}
+
+export const StyledColumn = styled("div")`
+  ${(props: StyleProps) => {
+    const { width = 280 } = props;
+
+    const colors = getColors(props);
+    const spacings = getSpaces(props);
+
+    return `
+      position: relative;
+      width: ${width}px;
+
+      &:not(:last-child) {
+        border-right: solid 1px ${colors?.gray[200]};
+        margin-right: ${spacings?.m}px;
+      }
+
+      // (masoudmanson): This code hides the relation icon of the last column
+      &:last-of-type {
+        .SdsAutocompleteMultiColumn-column-relation-icon {
+          display: none;
+        }
+      }
+    `;
+  }}
+`;
+
+export const StyledColumnTitle = styled("p")`
+  ${fontCapsXxxs}
+  ${(props: StyleProps) => {
+    const spacings = getSpaces(props);
+    const colors = getColors(props);
+    const typography = getTypography(props);
+    return `
+      font-family: ${typography?.fontFamily};
+      color: ${colors?.gray[500]};
+      padding: 0 ${spacings?.s}px ${spacings?.xxs}px;
+      margin: 0;
+    `;
+  }}
+`;
+
+export const StyledColumnIcon = styled("span")`
+  ${(props: StyleProps) => {
+    const spacings = getSpaces(props);
+    const colors = getColors(props);
+    const iconSizes = getIconSizes(props);
+
+    return `
+      background-color: white;
+      position: absolute;
+      right: -${spacings?.xs}px;
+      top: -2px;
+      padding-bottom: 2px;
+
+      svg {
+        color: ${colors?.gray[500]};
+        width: ${iconSizes?.xs.width}px;
+        height: ${iconSizes?.xs.height}px;
+      }
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
new file mode 100644
index 000000000..f9b861263
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
@@ -0,0 +1,326 @@
+import {
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteInputChangeReason,
+  AutocompleteRenderInputParams,
+  AutocompleteValue,
+  ClickAwayListener,
+  ClickAwayListenerProps as MUIClickAwayListenerProps,
+  PopperProps,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import React, { SyntheticEvent, useEffect, useRef, useState } from "react";
+import {
+  AutocompleteMultiColumnOption,
+  AutocompleteMultiColumnValue,
+} from "../..";
+import ButtonIcon from "../../../ButtonIcon";
+import { InputSearchProps } from "../../../InputSearch";
+import { StyledInputAdornment } from "../../../InputSearch/style";
+import { SDSTheme } from "../../../styles";
+import {
+  AutocompleteBaseProps,
+  DefaultAutocompleteOption,
+} from "../AutocompleteBase";
+import AutocompleteGroup from "../AutocompleteGroup";
+import {
+  StyleProps,
+  StyledAutocompleteGroupWrapper,
+  StyledAutocompleteInput,
+  StyledPaper,
+  StyledPopper,
+} from "./style";
+
+interface ExtraAutocompleteMultiColumnProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> extends StyleProps {
+  keepSearchOnSelect?: boolean;
+  renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
+  onInputChange?: (
+    event: SyntheticEvent<Element, Event>,
+    value: string,
+    reason: AutocompleteInputChangeReason
+  ) => void;
+  InputBaseProps?: Partial<InputSearchProps>;
+  PopperBaseProps?: Partial<PopperProps>;
+  label?: string;
+  PopperComponent?: React.JSXElementConstructor<PopperProps>;
+  PopperPlacement?: "bottom-start" | "top-start" | "bottom-end" | "top-end";
+  children?: JSX.Element | null;
+  onClickAway?: (event: MouseEvent | TouchEvent) => void;
+  ClickAwayListenerProps?: Partial<MUIClickAwayListenerProps>;
+  options: AutocompleteMultiColumnOption<
+    T,
+    Multiple,
+    DisableClearable,
+    FreeSolo
+  >[];
+  value?: AutocompleteMultiColumnValue<T, Multiple, DisableClearable, FreeSolo>;
+  onChange?: (
+    event: React.SyntheticEvent,
+    value: AutocompleteMultiColumnValue<
+      T,
+      Multiple,
+      DisableClearable,
+      FreeSolo
+    >,
+    reason: AutocompleteChangeReason,
+    details?: AutocompleteChangeDetails<T>
+  ) => void;
+}
+
+type CustomAutocompleteProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = Omit<
+  AutocompleteBaseProps<T, Multiple, DisableClearable, FreeSolo>,
+  | "renderInput"
+  | "options"
+  | "value"
+  | "onChange"
+  | "nonce"
+  | "rev"
+  | "rel"
+  | "autoFocus"
+  | "content"
+>;
+
+export type AutocompleteMultiColumnProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = CustomAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> &
+  ExtraAutocompleteMultiColumnProps<T, Multiple, DisableClearable, FreeSolo>;
+
+const AutocompleteMultiColumn = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: AutocompleteMultiColumnProps<T, Multiple, DisableClearable, FreeSolo>
+): JSX.Element => {
+  const {
+    InputBaseProps,
+    open = false,
+    PopperPlacement = "bottom-start",
+    PopperBaseProps,
+    search = false,
+    label = "Search",
+    onClickAway = defaultOnClickAway,
+    ClickAwayListenerProps,
+    options,
+    onInputChange,
+    onBlur,
+    multiple,
+    value: parentInitialValue,
+    onChange,
+    PopperComponent = StyledPopper,
+    ...rest
+  } = props;
+  const theme: SDSTheme = useTheme();
+  const [inputValue, setInputValue] = useState("");
+  const [popperOpen, setPopperOpen] = useState<boolean>(open);
+
+  const anchorRef = useRef(null);
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  useEffect(() => {
+    setAnchorEl(anchorRef?.current);
+  }, [anchorRef]);
+
+  const [autocompleteMultiColumnValue, setAutocompleteMultiColumnValue] =
+    useState<
+      AutocompleteMultiColumnValue<T, Multiple, DisableClearable, FreeSolo>
+    >({});
+
+  useEffect(() => {
+    if (parentInitialValue !== undefined) {
+      setAutocompleteMultiColumnValue(parentInitialValue);
+    }
+  }, [options, parentInitialValue]);
+
+  const defaultOnValueChange = (
+    column: string,
+    event: React.SyntheticEvent,
+    val: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
+    reason: AutocompleteChangeReason,
+    details?: AutocompleteChangeDetails<T>
+  ) => {
+    setAutocompleteMultiColumnValue((prev) => {
+      return {
+        ...prev,
+        [column]: val,
+      };
+    });
+
+    onChange?.(
+      event,
+      {
+        ...autocompleteMultiColumnValue,
+        [column]: val,
+      },
+      reason,
+      details
+    );
+  };
+
+  return (
+    <ClickAwayListener onClickAway={onClickAway} {...ClickAwayListenerProps}>
+      <div>
+        <StyledAutocompleteInput
+          id="location-search"
+          label={label}
+          placeholder={label}
+          value={inputValue}
+          onChange={handleInputChange}
+          onClick={handleInputClick}
+          onBlur={handleInputBlur}
+          ref={anchorRef}
+          search={search}
+          onKeyDown={handleInputKeyDown}
+          InputProps={{
+            /**
+             * (mmoore): passing only the ref along to InputProps to prevent
+             * default MUI arrow from rendering in search input.
+             * renderInput strips InputProps, so we explicitly pass end adornment here
+             */
+            ...InputBaseProps?.ref,
+            endAdornment: (
+              <StyledInputAdornment position="end">
+                {/**
+                 * (masoudmanson): Because the Autocomplete component overrides the
+                 * InputSearch's endAdornment, we must also include the clear IconButton here.
+                 */}
+                {inputValue && (
+                  <ButtonIcon
+                    aria-label="clear-button"
+                    className="input-search-clear-icon"
+                    sdsType="primary"
+                    sdsSize="small"
+                    sdsIconProps={{
+                      sdsType: "iconButton",
+                    }}
+                    sdsIcon="xMark"
+                    onClick={clearInput}
+                  />
+                )}
+                <ButtonIcon
+                  aria-label="search-button"
+                  sdsType="secondary"
+                  sdsSize="small"
+                  sdsIconProps={{
+                    sdsType: "interactive",
+                  }}
+                  sdsIcon="search"
+                />
+              </StyledInputAdornment>
+            ),
+            /**
+             * (thuang): Works with css caret-color: "transparent" to hide
+             * mobile keyboard
+             */
+            inputMode: "text",
+          }}
+          {...InputBaseProps}
+        />
+
+        {anchorEl && (
+          <PopperComponent
+            modifiers={[
+              {
+                name: "offset",
+                options: {
+                  offset: [0, theme.app?.spacing.s],
+                },
+              },
+            ]}
+            open={popperOpen}
+            anchorEl={anchorEl}
+            placement={PopperPlacement}
+            disablePortal
+            {...PopperBaseProps}
+          >
+            <StyledAutocompleteGroupWrapper className="SdsAutocompleteMultiColumn-wrapper">
+              {options.map((autocompleteOptions) => (
+                <AutocompleteGroup
+                  autocompleteProps={autocompleteOptions}
+                  key={autocompleteOptions.name}
+                  onValueChange={defaultOnValueChange}
+                  value={
+                    autocompleteMultiColumnValue
+                      ? autocompleteMultiColumnValue[autocompleteOptions.name]
+                      : undefined
+                  }
+                  multiple={multiple}
+                  label={label}
+                  InputBaseProps={InputBaseProps}
+                  popperOpen={popperOpen}
+                  inputValue={inputValue}
+                  PaperComponent={StyledPaper}
+                  {...rest}
+                />
+              ))}
+            </StyledAutocompleteGroupWrapper>
+          </PopperComponent>
+        )}
+      </div>
+    </ClickAwayListener>
+  );
+
+  function clearInput() {
+    setInputValue("");
+    /**
+     * (masoudmanson): Because we are manually firing this event,
+     * we must build a onChange event to transmit the updated value to onChange listeners.
+     */
+    onInputChange?.(
+      { target: { value: "" } } as React.ChangeEvent<HTMLInputElement>,
+      "",
+      "clear"
+    );
+  }
+
+  function handleInputClick(_: React.SyntheticEvent) {
+    if (popperOpen) {
+      setPopperOpen(false);
+    } else {
+      setPopperOpen(true);
+    }
+  }
+
+  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setInputValue(event.target.value);
+    if (onInputChange) {
+      if (event.target.value === "") {
+        onInputChange(event, "", "clear");
+      } else {
+        onInputChange(event, event.target.value, "input");
+      }
+    }
+  }
+
+  function handleInputBlur(event: React.FocusEvent<HTMLInputElement>) {
+    if (props.clearOnBlur) setInputValue("");
+    onBlur?.(event);
+  }
+
+  function defaultOnClickAway() {
+    setPopperOpen(false);
+  }
+
+  function handleInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
+    if (event.key === "Backspace") {
+      event.stopPropagation();
+    }
+  }
+};
+
+export default AutocompleteMultiColumn;
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
new file mode 100644
index 000000000..a260d5b4a
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
@@ -0,0 +1,89 @@
+import { autocompleteClasses, Paper, Popper } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { ReactElement } from "react";
+import InputSearch from "../../../InputSearch";
+import {
+  CommonThemeProps,
+  getBorders,
+  getCorners,
+  getShadows,
+  getSpaces,
+} from "../../../styles";
+
+export interface StyleProps extends CommonThemeProps {
+  count?: number;
+  icon?: ReactElement;
+  search?: boolean;
+  title?: string;
+  width?: number;
+}
+
+const doNotForwardProps = [
+  "anchorEl",
+  "count",
+  "keepSearchOnSelect",
+  "search",
+  "InputBaseProps",
+  "title",
+  "PopperBaseProps",
+  "onClickAway",
+  "ClickAwayListenerProps",
+];
+
+export const StyledPopper = styled(Popper, {
+  shouldForwardProp: (prop: string) =>
+    !doNotForwardProps.includes(prop) || prop === "anchorEl",
+})`
+  ${(props: StyleProps) => {
+    const borders = getBorders(props);
+    const corners = getCorners(props);
+    const shadows = getShadows(props);
+    const spacings = getSpaces(props);
+
+    return `
+      background-color: white;
+      border: ${borders?.gray[100]};
+      border-radius: ${corners?.m}px;
+      box-shadow: ${shadows?.m};
+      padding: ${spacings?.l}px ${spacings?.xxs}px ${spacings?.l}px ${spacings?.l}px;
+      box-sizing: border-box;
+      z-index: 1400;
+
+      .${autocompleteClasses.popper}.${autocompleteClasses.popperDisablePortal} {
+        position: relative !important;
+        transform: none !important;
+      
+        .MuiPaper-root .${autocompleteClasses.listbox} {
+          padding: 0 ${spacings?.m}px 0 0;
+        }
+      }
+    `;
+  }}
+`;
+
+export const StyledPaper = styled(Paper, {
+  shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
+})`
+  box-shadow: none;
+  margin: 0;
+  border-radius: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+`;
+
+export const StyledAutocompleteGroupWrapper = styled("div")`
+  display: flex;
+`;
+
+export const StyledAutocompleteInput = styled(InputSearch, {
+  shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
+})<{ search: boolean }>`
+  ${({ search }) => !search && "height: 0; display: none;"}
+
+  margin: 0;
+  .MuiInputBase-root {
+    width: 100%;
+  }
+  /* (thuang): Works with attribute inputMode: "none" to hide mobile keyboard */
+  caret-color: ${({ search }) => (search ? "auto" : "transparent")};
+`;
diff --git a/packages/components/src/core/Autocomplete/index.stories.tsx b/packages/components/src/core/Autocomplete/index.stories.tsx
index 5813a90ab..9e2f9e53a 100644
--- a/packages/components/src/core/Autocomplete/index.stories.tsx
+++ b/packages/components/src/core/Autocomplete/index.stories.tsx
@@ -1,40 +1,73 @@
+import {
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteValue,
+} from "@mui/base";
 import { Args, Meta } from "@storybook/react";
-import React, { SyntheticEvent, useEffect, useState } from "react";
-import { Value } from "../Dropdown";
-import { GITHUB_LABELS } from "../DropdownMenu/GITHUB_LABELS";
+import { SyntheticEvent, useEffect, useState } from "react";
+import { AUTOCOMPLETE_MULTI_COLUMN_OPTIONS } from "../../common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "../../common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
 import TagFilter from "../TagFilter";
-import RawAutocomplete, { DefaultAutocompleteOption } from "./index";
-
-export type AutocompleteOptionValue<T, Multiple> = Multiple extends
-  | undefined
-  | false
-  ? T | undefined
-  : Array<T> | undefined;
+import AutocompleteBase, {
+  DefaultAutocompleteOption,
+} from "./components/AutocompleteBase";
+import RawAutocompleteMultiColumn from "./components/AutocompleteMultiColumn";
+import RawAutocomplete, {
+  AutocompleteMultiColumnValue,
+  SDSAutocompleteValue,
+} from "./index";
 
 const groupByOptions = [
   undefined,
   (option: DefaultAutocompleteOption) => option.section as string,
 ];
 
-const Autocomplete = <Multiple extends boolean | undefined = false>(
+const WRAPPER_STYLES = {
+  margin: "16px 0 0 24px",
+  width: 274,
+};
+const DIV_MARGIN = "10px 0 0 24px";
+const LABEL = "Search by label";
+
+const dataOptions = [
+  AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+  [AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[0], AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[1]],
+  [
+    AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[0],
+    AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[1],
+    AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[2],
+  ],
+];
+
+const Autocomplete = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined
+>(
   props: Args
 ): JSX.Element => {
   const {
     label,
     multiple,
-    options = GITHUB_LABELS,
+    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
     search,
     value: propValue,
     keepSearchOnSelect,
   } = props;
 
+  type DisableClearable = false;
+  type FreeSolo = false;
+
   const isControlled = propValue !== undefined;
   const [value, setValue] = useState<
-    DefaultAutocompleteOption | DefaultAutocompleteOption[] | null
-  >(getInitialValue());
-  const [pendingValue, setPendingValue] = useState<
-    DefaultAutocompleteOption | DefaultAutocompleteOption[] | null
-  >(getInitialValue());
+    SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(
+    (multiple ? [] : null) as SDSAutocompleteValue<
+      T,
+      Multiple,
+      DisableClearable,
+      FreeSolo
+    >
+  );
 
   const [selection, setSelection] = useState<string[]>([]);
 
@@ -46,26 +79,36 @@ const Autocomplete = <Multiple extends boolean | undefined = false>(
 
   useEffect(() => {
     setSelection([]);
-  }, [multiple]);
+    setValue(
+      (multiple ? [] : null) as SDSAutocompleteValue<
+        T,
+        Multiple,
+        DisableClearable,
+        FreeSolo
+      >
+    );
+  }, [multiple, options]);
 
   return (
-    <div style={{ margin: "16px 0 0 24px", width: 300 }}>
-      <RawAutocomplete
-        id="autocomplete-demo"
-        disableCloseOnSelect={multiple}
-        label={label}
-        multiple={multiple}
-        onChange={handleChange}
-        keepSearchOnSelect={keepSearchOnSelect}
-        options={options}
-        search={search}
-        value={multiple ? pendingValue : value}
-        getOptionDisabled={(option: DefaultAutocompleteOption) => {
-          return option.name === "Type: feature request";
-        }}
-        {...props}
-      />
-      <div style={{ marginTop: 10 }}>
+    <>
+      <div style={WRAPPER_STYLES}>
+        <RawAutocomplete
+          id="autocomplete-demo"
+          disableCloseOnSelect={multiple}
+          label={label}
+          multiple={multiple}
+          onChange={handleChange}
+          keepSearchOnSelect={keepSearchOnSelect}
+          options={options}
+          search={search}
+          value={value}
+          getOptionDisabled={(option: T) => {
+            return option.name === "Type: feature request";
+          }}
+          {...props}
+        />
+      </div>
+      <div style={{ margin: DIV_MARGIN }}>
         {selection.length
           ? selection.map((item) => {
               return (
@@ -73,57 +116,141 @@ const Autocomplete = <Multiple extends boolean | undefined = false>(
                   key={item}
                   label={item}
                   onDelete={() => handleTagDelete(item)}
+                  onClick={() => handleTagDelete(item)}
                 />
               );
             })
           : null}
       </div>
-    </div>
+    </>
   );
 
+  // eslint-disable-next-line sonarjs/cognitive-complexity
   function handleChange(
     _: SyntheticEvent<Element, Event>,
-    newValue: DefaultAutocompleteOption | DefaultAutocompleteOption[] | null
+    newValue: SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
   ) {
-    if (multiple) {
-      const newSelection = Array.isArray(newValue)
-        ? newValue?.map((item) => item.name)
-        : [];
-      setSelection(newSelection);
-      return setPendingValue(newValue);
+    setValue(newValue);
+    const newSelection: string[] = [];
+
+    if (
+      (newValue as T)?.name ||
+      (Array.isArray(newValue) && (newValue as T[])[0].name)
+    ) {
+      if (multiple) {
+        setSelection(
+          Array.isArray(newValue) ? newValue?.map((item) => item.name) : []
+        );
+      } else {
+        if (newValue && !Array.isArray(newValue) && newValue.name) {
+          setSelection([(newValue as T).name]);
+        }
+      }
     } else {
-      if (newValue && !Array.isArray(newValue) && newValue.name) {
-        setValue(newValue);
-        setSelection([newValue.name]);
+      if (multiple) {
+        if (newValue) {
+          Object.values(newValue).forEach((items) => {
+            (items as T[])?.map(({ name }: { name: string }) => {
+              newSelection.push(name);
+            });
+          });
+          setSelection(newSelection);
+        }
+      } else {
+        if (newValue) {
+          Object.values(newValue).forEach((item) => {
+            newSelection.push((item as T).name);
+          });
+        }
+        setSelection(newSelection);
       }
     }
   }
 
-  function handleTagDelete(tag: string) {
-    if (multiple && Array.isArray(pendingValue)) {
-      const index = pendingValue?.findIndex((item) => item.name === tag);
-      const newValue = [...pendingValue];
-      newValue.splice(index, 1);
-      setPendingValue(newValue);
+  // eslint-disable-next-line sonarjs/cognitive-complexity
+  function handleTagDeleteMultiColumn(tag: string) {
+    if (multiple) {
+      if (value) {
+        Object.entries(value).forEach(([key, values]) => {
+          const index = (values as T[])?.findIndex(
+            (item: T) => item.name === tag
+          );
+          if (index > -1) {
+            const newValue = [...(values as T[])];
+            newValue.splice(index, 1);
+            setValue((prev) => {
+              return {
+                ...prev,
+                [key]: newValue as AutocompleteValue<
+                  T,
+                  Multiple,
+                  DisableClearable,
+                  FreeSolo
+                >,
+              };
+            });
 
-      const newSelection = [...selection];
-      const deleteIndex = newSelection.indexOf(tag);
-      newSelection.splice(deleteIndex, 1);
-      setSelection(newSelection);
+            const newSelection = [...selection];
+            const deleteIndex = newSelection.indexOf(tag);
+            newSelection.splice(deleteIndex, 1);
+            setSelection(newSelection);
+          }
+        });
+      }
     } else {
-      setValue(null);
-      setSelection([]);
+      if (value) {
+        Object.entries(value).forEach(([key, val]) => {
+          if ((val as T).name === tag) {
+            const finalValue = { ...value } as AutocompleteMultiColumnValue<
+              T,
+              Multiple,
+              DisableClearable,
+              FreeSolo
+            >;
+            if (finalValue) delete finalValue[key];
+            setValue(finalValue);
+
+            const newSelection = [...selection];
+            const deleteIndex = newSelection.indexOf(tag);
+            newSelection.splice(deleteIndex, 1);
+            setSelection(newSelection);
+          }
+        });
+      }
     }
   }
 
-  function getInitialValue(): Value<DefaultAutocompleteOption, Multiple> {
-    if (isControlled) {
-      return propValue;
-    }
+  function handleTagDelete(tag: string) {
+    if (
+      (value && (value as T).name) ||
+      (Array.isArray(value) && (value as T[])[0].name)
+    ) {
+      if (multiple && Array.isArray(value)) {
+        const index = value?.findIndex((item) => item.name === tag);
+        const newValue = [...value];
+        newValue.splice(index, 1);
+        setValue(
+          newValue as SDSAutocompleteValue<
+            T,
+            Multiple,
+            DisableClearable,
+            FreeSolo
+          >
+        );
 
-    return multiple
-      ? ([] as unknown as Value<DefaultAutocompleteOption, Multiple>)
-      : null;
+        const newSelection = [...selection];
+        const deleteIndex = newSelection.indexOf(tag);
+        newSelection.splice(deleteIndex, 1);
+        setSelection(newSelection);
+      } else {
+        setValue(
+          null as SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+        );
+        setSelection([]);
+      }
+    } else {
+      handleTagDeleteMultiColumn(tag);
+    }
   }
 };
 
@@ -146,10 +273,18 @@ export default {
     multiple: {
       control: { type: "boolean" },
     },
+    options: {
+      control: {
+        labels: ["One Column", "Two Columns", "Three Columns"],
+        type: "select",
+      },
+      mapping: dataOptions,
+      options: Object.keys(dataOptions),
+    },
   },
   component: Autocomplete,
   // (masoudmanson) For the purpose of storybook, the button is removed
-  // from the Autocomplete component which may cause some accessibility
+  // from the RawAutocomplete component which may cause some accessibility
   // violations related to ARIA roles and attributes. However, this
   // should not be a concern as the component is always used with a button
   // in real applications. To avoid false positive test failures, the following
@@ -175,7 +310,7 @@ export const Default = {
   args: {
     groupBy: groupByOptions[1],
     keepSearchOnSelect: true,
-    label: "Search by label",
+    label: LABEL,
     multiple: true,
     search: true,
   },
@@ -186,46 +321,359 @@ export const Default = {
   },
 };
 
-// Test
+// Single Column Autocomplete
 
-const TestDemo = (props: Args): JSX.Element => {
-  const { multiple, options = GITHUB_LABELS, search } = props;
+const AutocompleteSingleColumnDemo = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined
+>(
+  props: Args
+): JSX.Element => {
+  type DisableClearable = false;
+  type FreeSolo = false;
 
+  const {
+    label,
+    multiple,
+    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+    search,
+    value: propValue,
+    keepSearchOnSelect,
+  } = props;
+
+  const isControlled = propValue !== undefined;
   const [value, setValue] = useState<
-    null | DefaultAutocompleteOption | DefaultAutocompleteOption[]
-  >(multiple ? [] : null);
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue());
+  const [pendingValue, setPendingValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue());
 
-  const [pendingValue, setPendingValue] = useState<DefaultAutocompleteOption[]>(
-    []
-  );
+  const [selection, setSelection] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (isControlled) {
+      setValue(propValue);
+    }
+  }, [isControlled, propValue]);
+
+  useEffect(() => {
+    setSelection([]);
+  }, [multiple]);
 
   return (
-    <RawAutocomplete
-      open
-      search={search}
-      label="Search"
-      multiple={multiple}
-      value={multiple ? pendingValue : value}
-      onChange={handleChange}
-      disableCloseOnSelect={multiple}
-      options={options}
-      groupBy={(option: DefaultAutocompleteOption) => option.section as string}
-      {...props}
-    />
+    <>
+      <div style={WRAPPER_STYLES}>
+        <AutocompleteBase
+          id="autocomplete-base-demo"
+          disableCloseOnSelect={multiple}
+          label={label}
+          multiple={multiple}
+          keepSearchOnSelect={keepSearchOnSelect}
+          options={options}
+          search={search}
+          onChange={handleChange}
+          value={multiple ? pendingValue : value}
+          getOptionDisabled={(option: DefaultAutocompleteOption) => {
+            return option.name === "Type: feature request";
+          }}
+          {...props}
+        />
+      </div>
+      <div style={{ margin: DIV_MARGIN }}>
+        {selection.length
+          ? selection.map((item) => {
+              return (
+                <TagFilter
+                  key={item}
+                  label={item}
+                  onDelete={() => handleTagDelete(item)}
+                  onClick={() => handleTagDelete(item)}
+                />
+              );
+            })
+          : null}
+      </div>
+    </>
   );
 
   function handleChange(
-    _: React.ChangeEvent<unknown>,
-    newValue: DefaultAutocompleteOption | DefaultAutocompleteOption[] | null
+    _event: React.SyntheticEvent,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
+    _reason: AutocompleteChangeReason
   ) {
-    if (!multiple) {
-      setValue(newValue as DefaultAutocompleteOption);
+    if (multiple) {
+      const newSelection = Array.isArray(newValue)
+        ? newValue?.map((item) => item.name)
+        : [];
+      setSelection(newSelection);
+      return setPendingValue(newValue);
+    } else {
+      if (newValue && !Array.isArray(newValue) && newValue.name) {
+        setValue(newValue);
+        setSelection([newValue.name]);
+      }
+    }
+  }
+
+  function handleTagDelete(tag: string) {
+    if (multiple && Array.isArray(pendingValue)) {
+      const index = pendingValue?.findIndex((item) => item.name === tag);
+      const newValue = [...pendingValue];
+      newValue.splice(index, 1);
+      setPendingValue(
+        newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+      );
+
+      const newSelection = [...selection];
+      const deleteIndex = newSelection.indexOf(tag);
+      newSelection.splice(deleteIndex, 1);
+      setSelection(newSelection);
+    } else {
+      setValue(
+        null as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >
+      );
+      setSelection([]);
     }
+  }
 
-    return setPendingValue(newValue as DefaultAutocompleteOption[]);
+  function getInitialValue(): AutocompleteValue<
+    T,
+    Multiple,
+    DisableClearable,
+    FreeSolo
+  > {
+    if (isControlled) {
+      return propValue;
+    }
+
+    return multiple
+      ? ([] as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >)
+      : (null as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >);
   }
 };
 
+export const SingleColumn = {
+  args: {
+    groupBy: groupByOptions[1],
+    keepSearchOnSelect: false,
+    label: LABEL,
+    multiple: true,
+    search: true,
+  },
+  parameters: {
+    controls: {
+      exclude: ["search", "options"],
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <AutocompleteSingleColumnDemo {...args} />,
+};
+
+// Multi Column Autocomplete
+
+const AutocompleteMultiColumnDemo = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined
+>(
+  props: Args
+): JSX.Element => {
+  const {
+    multiple,
+    options = AUTOCOMPLETE_MULTI_COLUMN_OPTIONS,
+    search,
+    label,
+  } = props;
+
+  type DisableClearable = false;
+  type FreeSolo = false;
+
+  const [selection, setSelection] = useState<string[]>([]);
+
+  const [theValue, setTheValue] =
+    useState<
+      AutocompleteMultiColumnValue<T, Multiple, DisableClearable, FreeSolo>
+    >();
+
+  useEffect(() => {
+    setSelection([]);
+  }, [multiple]);
+
+  const handleChange = (
+    _event: React.SyntheticEvent,
+    newValue: AutocompleteMultiColumnValue<
+      T,
+      Multiple,
+      DisableClearable,
+      FreeSolo
+    >,
+    _reason: AutocompleteChangeReason,
+    _details?: AutocompleteChangeDetails<T>
+  ) => {
+    setTheValue(newValue);
+    const newSelection: string[] = [];
+
+    if (multiple) {
+      if (newValue) {
+        Object.values(newValue).forEach((items) => {
+          (items as T[])?.map(({ name }: { name: string }) => {
+            newSelection.push(name);
+          });
+        });
+        setSelection(newSelection);
+      }
+    } else {
+      if (newValue) {
+        Object.values(newValue).forEach((item) => {
+          newSelection.push((item as T).name);
+        });
+      }
+      setSelection(newSelection);
+    }
+  };
+
+  return (
+    <>
+      <div style={WRAPPER_STYLES}>
+        <RawAutocompleteMultiColumn<T, Multiple, DisableClearable, FreeSolo>
+          label={label}
+          disableCloseOnSelect={false}
+          multiple={multiple}
+          onChange={handleChange}
+          options={options}
+          search={search}
+          value={theValue}
+          {...props}
+        />
+      </div>
+      <div style={{ margin: DIV_MARGIN }}>
+        {selection.length
+          ? selection.map((item) => {
+              return (
+                <TagFilter
+                  key={item}
+                  label={item}
+                  onDelete={() => handleTagDelete(item)}
+                  onClick={() => handleTagDelete(item)}
+                />
+              );
+            })
+          : null}
+      </div>
+    </>
+  );
+
+  function handleTagDelete(tag: string) {
+    if (multiple) {
+      if (theValue) {
+        Object.entries(theValue).forEach(([key, values]) => {
+          const index = (values as T[])?.findIndex(
+            (item: T) => item.name === tag
+          );
+          if (index > -1) {
+            const newValue = [...(values as T[])];
+            newValue.splice(index, 1);
+            setTheValue((prev) => {
+              return {
+                ...prev,
+                [key]: newValue as AutocompleteValue<
+                  T,
+                  Multiple,
+                  DisableClearable,
+                  FreeSolo
+                >,
+              };
+            });
+
+            const newSelection = [...selection];
+            const deleteIndex = newSelection.indexOf(tag);
+            newSelection.splice(deleteIndex, 1);
+            setSelection(newSelection);
+          }
+        });
+      }
+    } else {
+      if (theValue) {
+        Object.entries(theValue).forEach(([key, value]) => {
+          if ((value as T).name === tag) {
+            const finalValue = { ...theValue };
+            delete finalValue[key];
+            setTheValue(finalValue);
+
+            const newSelection = [...selection];
+            const deleteIndex = newSelection.indexOf(tag);
+            newSelection.splice(deleteIndex, 1);
+            setSelection(newSelection);
+          }
+        });
+      }
+    }
+  }
+};
+
+export const MultiColumn = {
+  args: {
+    groupBy: groupByOptions[1],
+    keepSearchOnSelect: false,
+    label: LABEL,
+    multiple: true,
+    search: true,
+  },
+  parameters: {
+    controls: {
+      exclude: ["search", "options", "groupBy"],
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <AutocompleteMultiColumnDemo {...args} />,
+};
+
+// Test
+
+const TestDemo = (props: Args): JSX.Element => {
+  const {
+    multiple,
+    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+    search,
+  } = props;
+
+  return (
+    <div style={WRAPPER_STYLES}>
+      <RawAutocomplete
+        open
+        search={search}
+        label="Search"
+        multiple={multiple}
+        disableCloseOnSelect={multiple}
+        options={options}
+        groupBy={(option: DefaultAutocompleteOption) =>
+          option.section as string
+        }
+        {...props}
+      />
+    </div>
+  );
+};
+
 export const Test = {
   args: {
     keepSearchOnSelect: false,
@@ -234,11 +682,22 @@ export const Test = {
   },
   parameters: {
     controls: {
-      exclude: ["search"],
+      exclude: [
+        "search",
+        "keepSearchOnSelect",
+        "multiple",
+        "blurOnSelect",
+        "clearOnBlur",
+        "groupBy",
+        "label",
+        "options",
+      ],
     },
     snapshot: {
       skip: true,
     },
   },
-  render: (args: Args) => <TestDemo data-testid="autocomplete" {...args} />,
+  render: (args: Args) => (
+    <TestDemo data-testid="autocomplete-base" {...args} />
+  ),
 };
diff --git a/packages/components/src/core/Autocomplete/index.test.tsx b/packages/components/src/core/Autocomplete/index.test.tsx
index 442ee4289..f747f44c3 100644
--- a/packages/components/src/core/Autocomplete/index.test.tsx
+++ b/packages/components/src/core/Autocomplete/index.test.tsx
@@ -9,9 +9,9 @@ const Test = composeStory(TestStory, Meta);
 describe("<Autocomplete />", () => {
   generateSnapshots(snapshotTestStoryFile);
 
-  it("renders Autocomplete component", () => {
+  it("renders AutocompleteBase component", () => {
     render(<Test {...Test.args} />);
-    const AutocompleteElement = screen.getByTestId("autocomplete");
+    const AutocompleteElement = screen.getByTestId("autocomplete-base");
     expect(AutocompleteElement).not.toBeNull();
   });
 });
diff --git a/packages/components/src/core/Autocomplete/index.tsx b/packages/components/src/core/Autocomplete/index.tsx
index 7fb0b33f1..2afe94fc2 100644
--- a/packages/components/src/core/Autocomplete/index.tsx
+++ b/packages/components/src/core/Autocomplete/index.tsx
@@ -1,309 +1,252 @@
 import {
-  AutocompleteFreeSoloValueMapping,
-  AutocompleteInputChangeReason,
-  AutocompleteRenderInputParams,
-  AutocompleteRenderOptionState,
-  AutocompleteProps as MuiAutocompleteProps,
-  Popper,
-  PopperProps,
-} from "@mui/material";
-import React, { ReactNode, SyntheticEvent, useCallback, useState } from "react";
-import { noop } from "src/common/utils";
-import ButtonIcon from "../ButtonIcon";
-import { IconProps } from "../Icon";
-import { InputSearchProps } from "../InputSearch";
-import { StyledInputAdornment } from "../InputSearch/style";
-import MenuItem, { IconNameToSmallSizes } from "../MenuItem";
-import {
-  InputBaseWrapper,
-  StyleProps,
-  StyledAutocomplete,
-  StyledMenuInputSearch,
-  StyledMenuItemDetails,
-  StyledMenuItemText,
-  StyledPaper,
-} from "./style";
-
-// (thuang): This requires option to have a `name` property.
-interface AutocompleteOptionGeneral {
-  name: string;
-  section?: string;
-}
-export interface AutocompleteOptionBasic extends AutocompleteOptionGeneral {
-  count?: number;
-  details?: string;
-  sdsIcon?: keyof IconNameToSmallSizes;
-  sdsIconProps?: Partial<IconProps<keyof IconNameToSmallSizes>>;
-}
-
-export interface AutocompleteOptionComponent extends AutocompleteOptionGeneral {
-  component?: ReactNode;
-}
-
-type Exclusive<T, U> = T & { [K in Exclude<keyof U, keyof T>]?: undefined };
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteValue,
+} from "@mui/base";
+import { PopperProps } from "@mui/material";
+import React, { ReactElement } from "react";
+import AutocompleteBase, {
+  AutocompleteBaseProps,
+  AutocompleteOptionBasic,
+  AutocompleteOptionComponent,
+  DefaultAutocompleteOption,
+} from "./components/AutocompleteBase";
+import { StyledPaper } from "./components/AutocompleteBase/style";
+import AutocompleteMultiColumn, {
+  AutocompleteMultiColumnProps,
+} from "./components/AutocompleteMultiColumn";
+import { StyledPopper } from "./components/AutocompleteMultiColumn/style";
+
+export type {
+  AutocompleteBaseProps,
+  AutocompleteMultiColumnProps,
+  AutocompleteOptionBasic,
+  AutocompleteOptionComponent,
+  DefaultAutocompleteOption,
+};
 
-export type DefaultAutocompleteOption =
-  | Exclusive<AutocompleteOptionBasic, AutocompleteOptionComponent>
-  | Exclusive<AutocompleteOptionComponent, AutocompleteOptionBasic>;
+export type AutocompleteSingleColumnOption<T> = T;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type RenderFunctionType = (props: any) => JSX.Element;
+export type AutocompleteMultiColumnOption<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = {
+  options: T[];
+  props?: Partial<
+    AutocompleteBaseProps<T, Multiple, DisableClearable, FreeSolo>
+  >;
+  width?: number;
+  name: string;
+  icon?: React.ReactNode;
+};
 
-interface ExtraAutocompleteProps extends StyleProps {
-  keepSearchOnSelect?: boolean;
-  renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
-  onInputChange?: (
-    event: SyntheticEvent<Element, Event>,
-    value: string,
-    reason: AutocompleteInputChangeReason
-  ) => void;
-  InputBaseProps?: Partial<InputSearchProps>;
-  label: string;
-  PaperComponent?: typeof StyledPaper | RenderFunctionType;
-}
+export type SDSAutocompleteOptions<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> =
+  | AutocompleteSingleColumnOption<T>[]
+  | AutocompleteMultiColumnOption<T, Multiple, DisableClearable, FreeSolo>[];
+
+export type AutocompleteMultiColumnValue<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> =
+  | Record<
+      string | number | symbol,
+      AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    >
+  | undefined;
+
+export type AutocompleteSingleColumnValue<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
 
-type CustomAutocompleteProps<
+export type SDSAutocompleteValue<
   T,
-  Multiple extends boolean | undefined = undefined,
-  DisableClearable extends boolean | undefined = undefined,
-  FreeSolo extends boolean | undefined = undefined
-> = Omit<
-  MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
-  "renderInput" | "nonce" | "rev" | "rel" | "autoFocus" | "content"
->;
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> =
+  | AutocompleteSingleColumnValue<T, Multiple, DisableClearable, FreeSolo>
+  | AutocompleteMultiColumnValue<T, Multiple, DisableClearable, FreeSolo>;
+
+export type AutocompleteSingleColumnOnChange<
+  T,
+  Multiple,
+  DisableClearable,
+  FreeSolo
+> = (
+  event: React.SyntheticEvent,
+  value: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
+  reason: AutocompleteChangeReason,
+  details?: AutocompleteChangeDetails<T>
+) => void;
+
+export type AutocompleteMultiColumnOnChange<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = (
+  event: React.SyntheticEvent,
+  value: AutocompleteMultiColumnValue<T, Multiple, DisableClearable, FreeSolo>,
+  reason: AutocompleteChangeReason,
+  details?: AutocompleteChangeDetails<T>
+) => void;
+
+export type SDSAutocompleteOnChange<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> =
+  | AutocompleteSingleColumnOnChange<T, Multiple, DisableClearable, FreeSolo>
+  | AutocompleteMultiColumnOnChange<T, Multiple, DisableClearable, FreeSolo>;
+
+interface ExtraAutocompleteProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> {
+  options: SDSAutocompleteOptions<T, Multiple, DisableClearable, FreeSolo>;
+  PopperBaseProps?: Partial<PopperProps>;
+  value?: SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
+  onClickAway?: (event: MouseEvent | TouchEvent) => void;
+  onChange?: SDSAutocompleteOnChange<T, Multiple, DisableClearable, FreeSolo>;
+  count?: number;
+  icon?: ReactElement;
+  search?: boolean;
+}
 
 export type AutocompleteProps<
   T,
-  Multiple extends boolean | undefined = undefined,
-  DisableClearable extends boolean | undefined = undefined,
-  FreeSolo extends boolean | undefined = undefined
-> = CustomAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> &
-  ExtraAutocompleteProps;
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = Omit<
+  AutocompleteBaseProps<T, Multiple, DisableClearable, FreeSolo>,
+  "options" | "value" | "onChange"
+> &
+  ExtraAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>;
+
+/**
+ * (masoudmanson): The AutocompleteBase manages the rendering of Single-Column Autocompletes.
+ * By default, it uses MUI's Popper component without requiring custom styles.
+ * If there's a need for a custom Popper for the Single-Column Autocomplete,
+ * users have the option to import the Popper component from the @mui/material package
+ * and extend its functionalities as per their requirements.
+ *
+ * The StyledPopper component, designed for Multi-Column Autocomplete,
+ * and the StyledPaper component, intended for Single-Column Autocomplete, are exported
+ * to accommodate external use cases.
+ */
+
+export {
+  StyledPopper as AutocompleteMultiColumnStyledPopper,
+  StyledPaper as AutocompleteSingleColumnStyledPaper,
+};
 
 const Autocomplete = <
   T extends DefaultAutocompleteOption,
-  Multiple extends boolean | undefined = undefined,
-  DisableClearable extends boolean | undefined = undefined,
-  FreeSolo extends boolean | undefined = undefined
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
 >(
   props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>
 ): JSX.Element => {
-  const {
-    multiple = false,
-    disableCloseOnSelect = multiple,
-    getOptionLabel = defaultGetOptionLabel,
-    InputBaseProps = {},
-    isOptionEqualToValue = defaultIsOptionEqualToValue,
-    keepSearchOnSelect = false,
-    label,
-    loading = false,
-    loadingText = "",
-    noOptionsText = "No options",
-    onInputChange = noop,
-    PaperComponent = StyledPaper,
-    renderOption = defaultRenderOption,
-    renderTags = defaultRenderTags,
-    search = false,
-  } = props;
-
-  const [inputValue, setInputValue] = useState("");
-
-  /**
-   * (masoudmanson): Using a custom Popper or Paper with the Autocomplete
-   * without a useCalback results in scroll jumps while selecting an option!
-   */
-  const defaultPopperComponent = useCallback((popperProps: PopperProps) => {
-    return (
-      <Popper
-        modifiers={[
-          {
-            enabled: true,
-            name: "offset",
-            options: {
-              offset: [0, 8],
-            },
-          },
-        ]}
-        {...popperProps}
-      />
-    );
-  }, []);
-
-  return (
-    <StyledAutocomplete
-      clearOnBlur={false}
-      disableCloseOnSelect={disableCloseOnSelect}
-      disablePortal
-      renderTags={renderTags}
-      loading={loading}
-      loadingText={loadingText}
-      noOptionsText={noOptionsText}
-      PaperComponent={PaperComponent}
-      PopperComponent={defaultPopperComponent}
-      renderOption={renderOption}
-      getOptionLabel={getOptionLabel}
-      isOptionEqualToValue={isOptionEqualToValue}
-      inputValue={inputValue}
-      renderInput={(params: AutocompleteRenderInputParams) => (
-        <InputBaseWrapper search={search}>
-          <StyledMenuInputSearch
-            id="location-search"
-            label={label}
-            placeholder={label}
-            ref={params.InputProps.ref}
-            search={search}
-            // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
-            onKeyDown={(event) => {
-              if (event.key === "Backspace") {
-                event.stopPropagation();
-              }
-            }}
-            InputProps={{
-              /**
-               * (thuang): Works with css caret-color: "transparent" to hide
-               * mobile keyboard
-               */
-              inputMode: search ? "text" : "none",
-              /**
-               * (mmoore): passing only the ref along to InputProps to prevent
-               * default MUI arrow from rendering in search input.
-               * renderInput strips InputProps, so we explicitly pass end adornment here
-               */
-              ...params.InputProps.ref,
-              endAdornment: (
-                <StyledInputAdornment position="end">
-                  {/**
-                   * (masoudmansdon): Because the Autocomplete component overrides the
-                   * InputSearch's endAdornment, we must also include the clear IconButton here.
-                   */}
-                  {inputValue && (
-                    <ButtonIcon
-                      aria-label="clear-button"
-                      className="input-search-clear-icon"
-                      onClick={clearInput}
-                      sdsType="primary"
-                      sdsSize="small"
-                      sdsIconProps={{
-                        sdsType: "iconButton",
-                      }}
-                      sdsIcon="xMark"
-                    />
-                  )}
-                  <ButtonIcon
-                    aria-label="search-button"
-                    sdsType="secondary"
-                    sdsSize="small"
-                    sdsIconProps={{
-                      sdsType: "interactive",
-                    }}
-                    sdsIcon="search"
-                  />
-                </StyledInputAdornment>
-              ),
-              inputProps: params.inputProps,
-            }}
-            {...InputBaseProps}
-          />
-        </InputBaseWrapper>
-      )}
-      {...props}
-      onBlur={(event: React.FocusEvent<HTMLInputElement, Element>) => {
-        setInputValue("");
-        props.onBlur?.(event);
-      }}
-      onInputChange={(
-        event: SyntheticEvent<Element, Event>,
-        value: string,
-        reason: AutocompleteInputChangeReason
-      ) => {
-        if (!multiple) {
-          if (reason === "input") {
-            setInputValue(value);
-          } else {
-            setInputValue("");
+  const { options, value, onChange, ...rest } = props;
+
+  // Multi-column options
+  if (options && !!options[0] && "options" in options[0]) {
+    if (options.length > 1) {
+      return (
+        <AutocompleteMultiColumn
+          options={
+            options as AutocompleteMultiColumnOption<
+              T,
+              Multiple,
+              DisableClearable,
+              FreeSolo
+            >[]
           }
-        } else {
-          if (reason === "clear") {
-            setInputValue("");
-          } else if (
-            reason === "input" ||
-            (reason === "reset" && !keepSearchOnSelect)
-          ) {
-            setInputValue(value);
+          value={
+            value as AutocompleteMultiColumnValue<
+              T,
+              Multiple,
+              DisableClearable,
+              FreeSolo
+            >
           }
-        }
-
-        if (onInputChange) onInputChange(event, value, reason);
-      }}
-    />
-  );
-
-  function clearInput() {
-    setInputValue("");
-    /**
-     * (masoudmanson): Because we are manually firing this event,
-     * we must build a onChange event to transmit the updated value to onChange listeners.
-     */
-    if (onInputChange)
-      onInputChange(
-        { target: { value: "" } } as React.ChangeEvent<HTMLInputElement>,
-        "",
-        "clear"
+          onChange={
+            onChange as AutocompleteMultiColumnOnChange<
+              T,
+              Multiple,
+              DisableClearable,
+              FreeSolo
+            >
+          }
+          {...rest}
+          // (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
+          groupBy={undefined}
+          open
+        />
       );
-  }
-
-  function defaultGetOptionLabel(
-    option: T | AutocompleteFreeSoloValueMapping<FreeSolo>
-  ): string {
-    if (typeof option === "object" && "name" in option) return option.name;
-    return option.toString();
-  }
-
-  function defaultIsOptionEqualToValue(option: T, val: T): boolean {
-    return option.name === val.name;
-  }
-
-  function defaultRenderTags() {
-    return null;
-  }
-
-  function defaultRenderOption(
-    optionProps: React.HTMLAttributes<HTMLLIElement>,
-    option: T,
-    { selected }: AutocompleteRenderOptionState
-  ) {
-    let MenuItemContent;
-
-    const { component, details, count, sdsIcon, sdsIconProps } = option;
-    const menuItemLabel = getOptionLabel(option);
-
-    if (component) {
-      MenuItemContent = component;
     } else {
-      MenuItemContent = (
-        <StyledMenuItemText>
-          {menuItemLabel}
-          {details && (
-            <StyledMenuItemDetails className="menuItem-details">
-              {details}
-            </StyledMenuItemDetails>
-          )}
-        </StyledMenuItemText>
+      return (
+        <AutocompleteBase
+          options={options[0].options as AutocompleteSingleColumnOption<T>[]}
+          value={
+            value as AutocompleteSingleColumnValue<
+              T,
+              Multiple,
+              DisableClearable,
+              FreeSolo
+            >
+          }
+          onChange={
+            onChange as AutocompleteSingleColumnOnChange<
+              T,
+              Multiple,
+              DisableClearable,
+              FreeSolo
+            >
+          }
+          {...rest}
+        />
       );
     }
-
+  } else {
     return (
-      <MenuItem
-        column={count}
-        disabled={optionProps["aria-disabled"] === true}
-        sdsIcon={sdsIcon}
-        sdsIconProps={sdsIconProps}
-        isMultiSelect={multiple}
-        selected={selected}
-        {...optionProps}
-      >
-        {MenuItemContent}
-      </MenuItem>
+      <AutocompleteBase
+        options={options as AutocompleteSingleColumnOption<T>[]}
+        onChange={
+          onChange as AutocompleteSingleColumnOnChange<
+            T,
+            Multiple,
+            DisableClearable,
+            FreeSolo
+          >
+        }
+        value={
+          value as AutocompleteSingleColumnValue<
+            T,
+            Multiple,
+            DisableClearable,
+            FreeSolo
+          >
+        }
+        {...rest}
+      />
     );
   }
 };
diff --git a/packages/components/src/core/ComplexFilter/ComplexFilter.namespace-test.tsx b/packages/components/src/core/ComplexFilter/ComplexFilter.namespace-test.tsx
index 434335395..34999af38 100644
--- a/packages/components/src/core/ComplexFilter/ComplexFilter.namespace-test.tsx
+++ b/packages/components/src/core/ComplexFilter/ComplexFilter.namespace-test.tsx
@@ -1,5 +1,8 @@
-import { ComplexFilter, ComplexFilterProps } from "@czi-sds/components";
-import React from "react";
+import {
+  ComplexFilter,
+  ComplexFilterProps,
+  DefaultAutocompleteOption,
+} from "@czi-sds/components";
 import { noop } from "src/common/utils";
 
 const OPTIONS = [
@@ -15,7 +18,14 @@ const OPTIONS = [
   },
 ];
 
-const ComplexFilterNameSpaceTest = (props: ComplexFilterProps<true>) => {
+const ComplexFilterNameSpaceTest = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>
+) => {
   return (
     <ComplexFilter
       label="Click Target"
diff --git a/packages/components/src/core/ComplexFilter/components/Chips/index.tsx b/packages/components/src/core/ComplexFilter/components/Chips/index.tsx
index db86ce159..3de134535 100644
--- a/packages/components/src/core/ComplexFilter/components/Chips/index.tsx
+++ b/packages/components/src/core/ComplexFilter/components/Chips/index.tsx
@@ -1,10 +1,10 @@
-import { DefaultDropdownMenuOption } from "src/core/DropdownMenu";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
 import TagFilter from "src/core/TagFilter";
 
 interface Props {
-  value: DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null;
+  value: DefaultAutocompleteOption | DefaultAutocompleteOption[] | null;
   multiple?: boolean;
-  onDelete: (option: DefaultDropdownMenuOption) => void;
+  onDelete: (option: DefaultAutocompleteOption) => void;
 }
 
 const Chips = ({
@@ -22,7 +22,7 @@ const Chips = ({
 
   return (
     <>
-      {(value as DefaultDropdownMenuOption[]).map((item) => {
+      {(value as DefaultAutocompleteOption[]).map((item) => {
         const { name } = item;
 
         return (
diff --git a/packages/components/src/core/ComplexFilter/index.stories.tsx b/packages/components/src/core/ComplexFilter/index.stories.tsx
index 99cf00744..07d797cff 100644
--- a/packages/components/src/core/ComplexFilter/index.stories.tsx
+++ b/packages/components/src/core/ComplexFilter/index.stories.tsx
@@ -1,18 +1,20 @@
 import { Args, Meta } from "@storybook/react";
 import React from "react";
 import { noop } from "src/common/utils";
-import { DefaultDropdownMenuOption } from "../DropdownMenu";
-import { GITHUB_LABELS } from "../DropdownMenu/GITHUB_LABELS";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "../../common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "../Autocomplete/components/AutocompleteBase";
 import RawComplexFilter from "./index";
 
-const ComplexFilter = (props: Args): JSX.Element => {
+const ComplexFilter = <T extends DefaultAutocompleteOption>(
+  props: Args
+): JSX.Element => {
   return (
     <RawComplexFilter
       label="Click Target"
       onChange={noop}
-      options={GITHUB_LABELS}
+      options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
       DropdownMenuProps={{
-        groupBy: (option: DefaultDropdownMenuOption) =>
+        groupBy: (option: DefaultAutocompleteOption) =>
           option.section as string,
       }}
       {...props}
@@ -140,13 +142,14 @@ const LIVE_PREVIEW_OPTIONS = [
 
 // Test
 
-const TestDemo = (props: Args): JSX.Element => {
+const TestDemo = <T extends DefaultAutocompleteOption>(
+  props: Args
+): JSX.Element => {
   return (
     <RawComplexFilter
-      data-testid="complex-filter"
       label="Click Target"
       onChange={noop}
-      options={GITHUB_LABELS}
+      options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
       {...props}
     />
   );
@@ -158,5 +161,5 @@ export const Test = {
       skip: true,
     },
   },
-  render: (args: Args) => <TestDemo {...args} />,
+  render: (args: Args) => <TestDemo {...args} data-testid="complex-filter" />,
 };
diff --git a/packages/components/src/core/ComplexFilter/index.tsx b/packages/components/src/core/ComplexFilter/index.tsx
index c9585b946..aa8e96afb 100644
--- a/packages/components/src/core/ComplexFilter/index.tsx
+++ b/packages/components/src/core/ComplexFilter/index.tsx
@@ -3,8 +3,8 @@ import {
   AutocompleteValue,
 } from "@mui/material/useAutocomplete";
 import React, { ReactNode, useEffect, useState } from "react";
-import { Value } from "../Dropdown";
-import DropdownMenu, { DefaultDropdownMenuOption } from "../DropdownMenu";
+import { DefaultAutocompleteOption } from "../Autocomplete/components/AutocompleteBase";
+import DropdownMenu from "../DropdownMenu";
 import { StyledPopper } from "../DropdownMenu/style";
 import InputDropdown, {
   InputDropdownProps as InputDropdownPropsType,
@@ -16,15 +16,22 @@ export {
   InputDropdown as ComplexFilterInputDropdown,
   StyledPopper as ComplexFilterPopper,
 };
-export interface ComplexFilterProps<Multiple> {
+export interface ComplexFilterProps<
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> {
   label: ReactNode;
-  options: DefaultDropdownMenuOption[];
+  options: T[];
   multiple?: Multiple;
   search?: boolean;
-  onChange: (options: Value<DefaultDropdownMenuOption, Multiple>) => void;
+  onChange: (
+    options: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) => void;
   DropdownMenuProps?: Partial<typeof DropdownMenu>;
   InputDropdownProps?: Partial<InputDropdownPropsType>;
-  value?: Value<DefaultDropdownMenuOption, Multiple>;
+  value?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
   style?: React.CSSProperties;
   className?: string;
   PopperComponent?: typeof StyledPopper;
@@ -33,7 +40,12 @@ export interface ComplexFilterProps<Multiple> {
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-const ComplexFilter = <Multiple extends boolean | undefined = false>({
+const ComplexFilter = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>({
   options,
   label = "",
   multiple = false,
@@ -44,32 +56,34 @@ const ComplexFilter = <Multiple extends boolean | undefined = false>({
   value: propValue,
   PopperComponent,
   InputDropdownComponent = InputDropdown,
-  isTriggerChangeOnOptionClick = false,
   ...rest
-}: ComplexFilterProps<Multiple>): JSX.Element => {
+}: ComplexFilterProps<
+  T,
+  Multiple,
+  DisableClearable,
+  FreeSolo
+>): JSX.Element => {
   const isControlled = propValue !== undefined;
 
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const [value, setValue] = useState<
-    Value<DefaultDropdownMenuOption, Multiple>
-  >(getInitialValue());
-
-  const [pendingValue, setPendingValue] = useState<DefaultDropdownMenuOption[]>(
-    getInitialValue() as DefaultDropdownMenuOption[]
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(
+    (multiple ? [] : null) as AutocompleteValue<
+      T,
+      Multiple,
+      DisableClearable,
+      FreeSolo
+    >
   );
 
-  useEffect(() => {
-    onChange(value);
-    setPendingValue(value as DefaultDropdownMenuOption[]);
-  }, [value]);
-
   useEffect(() => {
     if (isControlled) {
       setValue(propValue);
     }
-  }, [propValue]);
+  }, [isControlled, propValue]);
 
   // * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
   // * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
@@ -85,7 +99,16 @@ const ComplexFilter = <Multiple extends boolean | undefined = false>({
         />
 
         <StyledChipsWrapper>
-          <Chips value={value} multiple={multiple} onDelete={handleDelete} />
+          <Chips
+            value={
+              value as
+                | DefaultAutocompleteOption
+                | DefaultAutocompleteOption[]
+                | null
+            }
+            multiple={multiple}
+            onDelete={handleDelete}
+          />
         </StyledChipsWrapper>
       </Wrapper>
 
@@ -95,14 +118,7 @@ const ComplexFilter = <Multiple extends boolean | undefined = false>({
         onClose={handleMenuSelectClose}
         search={search}
         multiple={multiple as Multiple}
-        value={
-          (multiple ? pendingValue : value) as AutocompleteValue<
-            DefaultDropdownMenuOption,
-            Multiple,
-            undefined,
-            undefined
-          >
-        }
+        value={value}
         onChange={handleChange}
         disableCloseOnSelect={multiple}
         options={options}
@@ -110,16 +126,13 @@ const ComplexFilter = <Multiple extends boolean | undefined = false>({
         PopperBaseProps={{ sx: { minWidth: 250 } }}
         onClickAway={handleClose}
         {...DropdownMenuProps}
+        {...rest}
       />
     </>
   );
 
   function handleClick(event: React.MouseEvent<HTMLElement>) {
     if (open) {
-      if (multiple) {
-        setValue(pendingValue as Value<DefaultDropdownMenuOption, Multiple>);
-      }
-
       setOpen(false);
 
       if (anchorEl) {
@@ -128,10 +141,6 @@ const ComplexFilter = <Multiple extends boolean | undefined = false>({
 
       setAnchorEl(null);
     } else {
-      if (multiple) {
-        setPendingValue(value as DefaultDropdownMenuOption[]);
-      }
-
       setAnchorEl(event.currentTarget);
       setOpen(true);
     }
@@ -140,10 +149,6 @@ const ComplexFilter = <Multiple extends boolean | undefined = false>({
   function handleClose() {
     if (open) {
       setOpen(false);
-
-      if (multiple) {
-        setValue(pendingValue as Value<DefaultDropdownMenuOption, Multiple>);
-      }
     }
   }
 
@@ -159,43 +164,28 @@ const ComplexFilter = <Multiple extends boolean | undefined = false>({
   }
 
   function handleChange(
-    _: React.ChangeEvent<unknown>,
-    newValue: DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
+    event: React.ChangeEvent<unknown>,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
   ) {
-    if (multiple) {
-      if (isTriggerChangeOnOptionClick) {
-        setPendingValue(newValue as DefaultDropdownMenuOption[]);
-        return setValue(newValue as Value<DefaultDropdownMenuOption, Multiple>);
-      }
-
-      return setPendingValue(newValue as DefaultDropdownMenuOption[]);
+    setValue(newValue);
+    onChange?.(newValue);
+    if (!multiple) {
+      setOpen(false);
     }
-
-    setValue(newValue as Value<DefaultDropdownMenuOption, Multiple>);
-    setOpen(false);
   }
 
-  function handleDelete(option: DefaultDropdownMenuOption) {
+  function handleDelete(option: DefaultAutocompleteOption) {
     if (!multiple) {
-      return setValue(null);
+      return setValue(
+        null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+      );
     }
 
-    const newValue =
-      (value as DefaultDropdownMenuOption[])?.filter(
-        (item) => item !== option
-      ) || null;
-
-    setValue(newValue as Value<DefaultDropdownMenuOption, Multiple>);
-  }
-
-  function getInitialValue(): Value<DefaultDropdownMenuOption, Multiple> {
-    if (isControlled) {
-      return propValue;
-    }
+    const newValue = (value as T[])?.filter((item) => item !== option) || null;
 
-    return multiple
-      ? ([] as unknown as Value<DefaultDropdownMenuOption, Multiple>)
-      : null;
+    setValue(
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    );
   }
 };
 
diff --git a/packages/components/src/core/Dropdown/Dropdown.namespace-test.tsx b/packages/components/src/core/Dropdown/Dropdown.namespace-test.tsx
index 119c2394c..34202ed48 100644
--- a/packages/components/src/core/Dropdown/Dropdown.namespace-test.tsx
+++ b/packages/components/src/core/Dropdown/Dropdown.namespace-test.tsx
@@ -1,5 +1,9 @@
-import { Dropdown, DropdownPopper, DropdownProps } from "@czi-sds/components";
-import React from "react";
+import {
+  DefaultAutocompleteOption,
+  Dropdown,
+  DropdownPopper,
+  DropdownProps,
+} from "@czi-sds/components";
 import { noop } from "src/common/utils";
 
 const OPTIONS = [
@@ -15,7 +19,14 @@ const OPTIONS = [
   },
 ];
 
-const DropdownNameSpaceTest = (props: DropdownProps<true>) => {
+const DropdownNameSpaceTest = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: DropdownProps<T, Multiple, DisableClearable, FreeSolo>
+) => {
   return (
     <Dropdown
       DropdownMenuProps={{ loading: true, loadingText: "Loading ..." }}
diff --git a/packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap
index fcc698dd5..031114a98 100644
--- a/packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap
@@ -3,6 +3,50 @@
 exports[`<Dropdown /> Default story renders snapshot 1`] = `
 <button
   class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1k5fys6-MuiButtonBase-root-MuiButton-root"
+  data-testid="dropdown"
+  label="Click Target"
+  tabindex="0"
+  type="button"
+>
+  <span
+    class="css-ae1gg6"
+  >
+    <span
+      class="styled-label css-1ubkbz8"
+    >
+      Click Target
+    </span>
+    <span
+      class="css-1qt6g1x"
+    >
+      <div
+        class="css-1ft6wgl"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+          data-file-name="IconChevronDownSmall"
+          data-testid="IconChevronDownSmall"
+          fillcontrast="white"
+          focusable="false"
+          viewBox="0 0 14 14"
+        />
+      </div>
+    </span>
+  </span>
+  <div
+    class="css-z8cnb2"
+  />
+  <span
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+  />
+</button>
+`;
+
+exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
+<button
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1k5fys6-MuiButtonBase-root-MuiButton-root"
+  data-testid="dropdown"
   label="Click Target"
   tabindex="0"
   type="button"
diff --git a/packages/components/src/core/Dropdown/index.stories.tsx b/packages/components/src/core/Dropdown/index.stories.tsx
index 346bba59c..605fbd097 100644
--- a/packages/components/src/core/Dropdown/index.stories.tsx
+++ b/packages/components/src/core/Dropdown/index.stories.tsx
@@ -1,31 +1,14 @@
-import { Dialog, Paper, styled } from "@mui/material";
+import { AutocompleteValue, Dialog, Paper, styled } from "@mui/material";
 import { Args, Meta } from "@storybook/react";
 import { useState } from "react";
 import { noop } from "src/common/utils";
+import { AUTOCOMPLETE_MULTI_COLUMN_OPTIONS } from "../../common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "../../common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "../Autocomplete/components/AutocompleteBase";
 import Button from "../Button";
-import { DefaultDropdownMenuOption } from "../DropdownMenu";
-import { GITHUB_LABELS } from "../DropdownMenu/GITHUB_LABELS";
 import LoadingIndicator from "../LoadingIndicator";
 import RawDropdown from "./index";
 
-const Dropdown = (props: Args): JSX.Element => {
-  return (
-    <RawDropdown
-      label="Click Target"
-      onChange={noop}
-      options={GITHUB_LABELS}
-      DropdownMenuProps={{
-        PopperBaseProps: {
-          sx: { width: "300px" },
-        },
-        groupBy: (option: DefaultDropdownMenuOption) =>
-          option.section as string,
-      }}
-      {...props}
-    />
-  );
-};
-
 const onChangeOptions = [
   noop,
   (value: never) => {
@@ -33,7 +16,6 @@ const onChangeOptions = [
     console.log(value);
   },
 ];
-
 const onCloseOptions = [
   noop,
   () => {
@@ -41,11 +23,62 @@ const onCloseOptions = [
     console.log("Closed!");
   },
 ];
-
 const buttonPositionOptions = ["left", "right"];
-
+const dataOptions = [
+  AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+  [AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[0], AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[1]],
+  [
+    AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[0],
+    AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[1],
+    AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[2],
+  ],
+];
 const LABEL = "Click Target";
 
+const Dropdown = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: Args
+): JSX.Element => {
+  const { multiple, options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } = props;
+  const [value, setValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(
+    (multiple ? [] : null) as AutocompleteValue<
+      T,
+      Multiple,
+      DisableClearable,
+      FreeSolo
+    >
+  );
+
+  return (
+    <RawDropdown<T, Multiple, DisableClearable, FreeSolo>
+      label="Click Target"
+      onChange={handleChange}
+      value={value}
+      options={options}
+      search={false}
+      multiple={multiple}
+      DropdownMenuProps={{
+        groupBy: (option: T) => option.section as string,
+        width: 300,
+      }}
+      {...props}
+    />
+  );
+
+  function handleChange(
+    _event: React.SyntheticEvent,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    setValue(newValue);
+  }
+};
+
 export default {
   argTypes: {
     DropdownMenuProps: { control: { type: "object" } },
@@ -94,6 +127,14 @@ export default {
       mapping: onCloseOptions,
       options: Object.keys(onCloseOptions),
     },
+    options: {
+      control: {
+        labels: ["One Column", "Two Columns", "Three Columns"],
+        type: "select",
+      },
+      mapping: dataOptions,
+      options: Object.keys(dataOptions),
+    },
     search: {
       control: {
         type: "boolean",
@@ -105,6 +146,8 @@ export default {
   title: "Dropdowns/Dropdown",
 } as Meta;
 
+// Default
+
 export const Default = {
   args: {
     buttonPosition: "left",
@@ -114,12 +157,30 @@ export const Default = {
     isTriggerChangeOnOptionClick: false,
     label: LABEL,
     multiple: true,
-    onChange: noop,
-    onClose: noop,
+    options: dataOptions[0],
+    search: true,
+  },
+};
+
+// Multi Column
+
+export const MultiColumnWithButtons = {
+  args: {
+    buttonPosition: "left",
+    buttons: true,
+    closeOnBlur: true,
+    disabled: false,
+    isTriggerChangeOnOptionClick: false,
+    label: LABEL,
+    multiple: true,
+    options: dataOptions[2],
     search: true,
   },
+  render: (args: Args) => <Dropdown {...args} />,
 };
 
+// Loading Indicator
+
 export const LoadingResultsIndicator = {
   args: {
     DropdownMenuProps: {
@@ -127,10 +188,24 @@ export const LoadingResultsIndicator = {
       loadingText: <LoadingIndicator sdsStyle="minimal" />,
     },
     label: LABEL,
-    onChange: noop,
     options: [],
   },
   parameters: {
+    controls: {
+      exclude: [
+        "buttonPosition",
+        "label",
+        "onChange",
+        "DropdownMenuProps",
+        "buttons",
+        "closeOnBlur",
+        "disabled",
+        "multiple",
+        "onClose",
+        "options",
+        "search",
+      ],
+    },
     snapshot: {
       skip: true,
     },
@@ -149,44 +224,60 @@ export const InsideModal = {
     axe: {
       disabledRules: ["aria-dialog-name"],
     },
+    controls: {
+      exclude: [
+        "buttonPosition",
+        "label",
+        "onChange",
+        "DropdownMenuProps",
+        "buttons",
+        "closeOnBlur",
+        "disabled",
+        "multiple",
+        "onClose",
+        "options",
+        "search",
+      ],
+    },
     snapshot: {
       skip: true,
     },
   },
-  render: function InsideModalComponent(props: Args): JSX.Element {
-    const [value, setValue] = useState<
-      DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
-    >([GITHUB_LABELS[0], GITHUB_LABELS[1]]);
-
-    const FullWidthDropdown = styled(RawDropdown)`
-      width: 100%;
-    `;
-
+  render: function InsideModalComponent<
+    T extends DefaultAutocompleteOption,
+    Multiple extends boolean | undefined,
+    DisableClearable extends boolean | undefined,
+    FreeSolo extends boolean | undefined
+  >(props: Args): JSX.Element {
     return (
       <Dialog open disableEnforceFocus PaperComponent={StyledPaper}>
-        <FullWidthDropdown
+        <Dropdown<T, Multiple, DisableClearable, FreeSolo>
           label="Dropdown"
-          options={GITHUB_LABELS}
-          onChange={handleChange}
-          value={value}
+          options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
           multiple
           InputDropdownProps={{ sdsStyle: "square" }}
           {...props}
         />
       </Dialog>
     );
-
-    function handleChange(
-      newValue: DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
-    ) {
-      setValue(newValue);
-    }
   },
 };
 
 // Controlled Dropdown
-const ControlledDropdownDemo = (props: Args): JSX.Element => {
-  const [value, setValue] = useState<DefaultDropdownMenuOption[] | null>([]);
+
+const ControlledDropdownDemo = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: Args
+): JSX.Element => {
+  const [value, setValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(
+    [] as unknown as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  );
 
   const StyledButton = styled(Button)`
     &:focus {
@@ -202,31 +293,34 @@ const ControlledDropdownDemo = (props: Args): JSX.Element => {
         Click here to select the first three options
       </StyledButton>
       <br />
-      <RawDropdown
+      <RawDropdown<T, Multiple, DisableClearable, FreeSolo>
         label="Click Target"
-        options={GITHUB_LABELS}
         {...props}
+        options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
         value={value}
         onChange={handleChange}
         data-testid="dropdown"
         DropdownMenuProps={{
-          PopperBaseProps: {
-            sx: { width: "300px" },
-          },
-          groupBy: (option: DefaultDropdownMenuOption) =>
+          groupBy: (option: DefaultAutocompleteOption) =>
             option.section as string,
           title: "Github Labels",
+          width: 300,
         }}
-        multiple
+        multiple={true as Multiple}
       />
     </>
   );
 
   function handleClick() {
-    setValue([...GITHUB_LABELS.slice(0, 3)] as DefaultDropdownMenuOption[]);
+    setValue([
+      ...AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.slice(0, 3),
+    ] as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
   }
 
-  function handleChange(newValue: DefaultDropdownMenuOption[] | null) {
+  function handleChange(
+    event: React.SyntheticEvent,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
     setValue(newValue);
   }
 };
@@ -236,6 +330,21 @@ export const ControlledDropdown = {
     label: LABEL,
   },
   parameters: {
+    controls: {
+      exclude: [
+        "buttonPosition",
+        "label",
+        "onChange",
+        "DropdownMenuProps",
+        "buttons",
+        "closeOnBlur",
+        "disabled",
+        "multiple",
+        "onClose",
+        "options",
+        "search",
+      ],
+    },
     snapshot: {
       skip: true,
     },
@@ -245,19 +354,23 @@ export const ControlledDropdown = {
 
 // Test
 
-const TestDemo = (props: Args): JSX.Element => {
+const TestDemo = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: Args
+): JSX.Element => {
   return (
-    <RawDropdown
+    <RawDropdown<T, Multiple, DisableClearable, FreeSolo>
       label="Click Target"
       onChange={noop}
-      options={GITHUB_LABELS}
+      options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
       DropdownMenuProps={{
-        PopperBaseProps: {
-          sx: { width: "300px" },
-        },
+        width: 300,
       }}
       {...props}
-      data-testid="dropdown"
     />
   );
 };
@@ -266,9 +379,23 @@ export const Test = {
   args: {
     buttonPosition: "left",
     label: LABEL,
-    onChange: noop,
   },
   parameters: {
+    controls: {
+      exclude: [
+        "buttonPosition",
+        "label",
+        "onChange",
+        "DropdownMenuProps",
+        "buttons",
+        "closeOnBlur",
+        "disabled",
+        "multiple",
+        "onClose",
+        "options",
+        "search",
+      ],
+    },
     snapshot: {
       skip: true,
     },
diff --git a/packages/components/src/core/Dropdown/index.tsx b/packages/components/src/core/Dropdown/index.tsx
index da68e7430..9c7387c62 100644
--- a/packages/components/src/core/Dropdown/index.tsx
+++ b/packages/components/src/core/Dropdown/index.tsx
@@ -1,17 +1,25 @@
+import { AutocompleteProps } from "@mui/material";
 import {
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
   AutocompleteCloseReason,
   AutocompleteValue,
 } from "@mui/material/useAutocomplete";
 import React, { ReactNode, useEffect, useState } from "react";
+import { EMPTY_OBJECT } from "src/common/utils";
+import {
+  AutocompleteMultiColumnOption,
+  AutocompleteSingleColumnOption,
+  DefaultAutocompleteOption,
+} from "../Autocomplete";
 import DropdownMenu, {
-  DefaultDropdownMenuOption,
   DropdownMenuProps as SdsDropdownMenuProps,
 } from "../DropdownMenu";
 import { StyledPaper, StyledPopper } from "../DropdownMenu/style";
 import InputDropdown, {
   InputDropdownProps as InputDropdownPropsType,
 } from "../InputDropdown";
-import { StyledButton } from "./style";
+import { StyledButton, StyledButtonsWrapper } from "./style";
 
 export {
   InputDropdown as DropdownInputDropdown,
@@ -19,78 +27,83 @@ export {
   StyledPopper as DropdownPopper,
 };
 
-// (thuang): Value's type is based on generic type placeholder (T) and Multiple
-// type. If Multiple is true, Value's type is T[] | null.
-// Otherwise, Value's type is T | null.
-// Conditional Type
-// https://www.typescriptlang.org/docs/handbook/2/conditional-types.html
-export type Value<T, Multiple> = Multiple extends undefined | false
-  ? T | null
-  : Array<T> | null;
-
-export type MUIValue<Multiple> = AutocompleteValue<
-  DefaultDropdownMenuOption,
-  Multiple,
-  undefined,
-  undefined
->;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type RenderFunctionType = (props: any) => JSX.Element;
-
-export interface DropdownProps<Multiple extends boolean | undefined> {
+export interface ExtraDropdownProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> {
   buttonPosition?: "left" | "right";
   buttons?: boolean;
   closeOnBlur?: boolean;
   disabled?: boolean;
   label: ReactNode;
-  options: DefaultDropdownMenuOption[];
-  onChange: (options: Value<DefaultDropdownMenuOption, Multiple>) => void;
-  onClose?: () => void;
-  multiple?: Multiple;
+  options:
+    | AutocompleteSingleColumnOption<T>[]
+    | AutocompleteMultiColumnOption<T, Multiple, DisableClearable, FreeSolo>[];
   search?: boolean;
   DropdownMenuProps?: Partial<
-    SdsDropdownMenuProps<
-      DefaultDropdownMenuOption,
-      Multiple,
-      undefined,
-      undefined
-    >
+    SdsDropdownMenuProps<T, Multiple, DisableClearable, FreeSolo>
   >;
   InputDropdownProps?: Partial<InputDropdownPropsType>;
-  value?: Value<DefaultDropdownMenuOption, Multiple>;
+  value?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
   style?: React.CSSProperties;
   className?: string;
-  PopperComponent?: typeof StyledPopper | RenderFunctionType;
   InputDropdownComponent?: typeof InputDropdown;
   isTriggerChangeOnOptionClick?: boolean;
 }
 
+type CustomAutocompleteProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = Omit<
+  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
+  "renderInput" | "nonce" | "rev" | "rel" | "autoFocus" | "content"
+>;
+
+export type DropdownProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+> = CustomAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> &
+  ExtraDropdownProps<T, Multiple, DisableClearable, FreeSolo>;
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
-const Dropdown = <Multiple extends boolean | undefined = false>({
-  options,
-  label = "",
-  multiple = false,
-  search = false,
-  buttonPosition = "right",
-  buttons = false,
-  // By default, most dropdowns will close when the user clicks outside the dropdown.
-  // The exception is the multiple select variant with Apply/Cancel buttons,
-  // which by default will not close on blur. If closeOnBlur is enabled, clicking out
-  // is equivalent to clicking the Cancel button, closing the dropdown and losing
-  // unapplied changes.
-  closeOnBlur = !buttons,
-  onChange,
-  onClose,
-  DropdownMenuProps = {},
-  InputDropdownProps = { sdsStyle: "minimal" },
-  value: propValue,
-  PopperComponent,
-  InputDropdownComponent = InputDropdown,
-  isTriggerChangeOnOptionClick = false,
-  disabled = false,
-  ...rest
-}: DropdownProps<Multiple>): JSX.Element => {
+const Dropdown = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: DropdownProps<T, Multiple, DisableClearable, FreeSolo>
+): JSX.Element => {
+  const {
+    options,
+    label = "",
+    multiple = false,
+    search = false,
+    buttonPosition = "right",
+    buttons = false,
+    // By default, most dropdowns will close when the user clicks outside the dropdown.
+    // The exception is the multiple select variant with Apply/Cancel buttons,
+    // which by default will not close on blur. If closeOnBlur is enabled, clicking out
+    // is equivalent to clicking the Cancel button, closing the dropdown and losing
+    // unapplied changes.
+    closeOnBlur = !buttons,
+    onClose,
+    onChange,
+    DropdownMenuProps = {},
+    InputDropdownProps = { sdsStyle: "minimal" },
+    InputDropdownComponent = InputDropdown,
+    isTriggerChangeOnOptionClick = false,
+    disabled = false,
+    value: propValue,
+    ...rest
+  } = props;
+
   if (buttons && !multiple) {
     // eslint-disable-next-line no-console
     console.warn(
@@ -98,16 +111,21 @@ const Dropdown = <Multiple extends boolean | undefined = false>({
     );
   }
 
-  const isControlled = propValue !== undefined;
+  const isMultiColumn = "options" in (options?.[0] || EMPTY_OBJECT);
 
+  const isControlled = propValue !== undefined;
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [open, setOpen] = useState(false);
 
-  const [value, setValue] =
-    useState<Value<DefaultDropdownMenuOption, Multiple>>(getInitialValue);
-
+  const [value, setValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue());
   const [pendingValue, setPendingValue] = useState<
-    Value<DefaultDropdownMenuOption, true>
-  >([]);
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue());
+
+  const shouldShowButtons =
+    buttons && !isTriggerChangeOnOptionClick && multiple;
 
   useEffect(() => {
     if (isControlled) {
@@ -115,11 +133,6 @@ const Dropdown = <Multiple extends boolean | undefined = false>({
     }
   }, [isControlled, propValue]);
 
-  const [open, setOpen] = useState(false);
-
-  const shouldShowButtons =
-    buttons && !isTriggerChangeOnOptionClick && multiple;
-
   return (
     <>
       <InputDropdownComponent
@@ -128,25 +141,25 @@ const Dropdown = <Multiple extends boolean | undefined = false>({
         onClick={handleClick}
         sdsStage={open ? "userInput" : "default"}
         {...InputDropdownProps}
-        {...rest}
+        data-testid="dropdown"
       />
-      <DropdownMenu
+      <DropdownMenu<T, Multiple, DisableClearable, FreeSolo>
         anchorEl={anchorEl}
         open={open}
         search={search}
         onClose={handleClose}
         multiple={multiple as Multiple}
-        value={(multiple ? pendingValue : value) as MUIValue<Multiple>}
-        onChange={handleChange}
         disableCloseOnSelect={multiple}
-        PopperComponent={PopperComponent}
-        PopperBaseProps={{ sx: { minWidth: 250 } }}
         options={options}
         onClickAway={handleClickAway}
+        width={250}
+        onChange={handleChange}
+        value={isMultiColumn ? value : multiple ? pendingValue : value}
         {...DropdownMenuProps}
+        {...rest}
       >
         {shouldShowButtons ? (
-          <div>
+          <StyledButtonsWrapper buttonPosition={buttonPosition}>
             {buttonPosition === "left" ? (
               <div>
                 <StyledButton
@@ -182,12 +195,49 @@ const Dropdown = <Multiple extends boolean | undefined = false>({
                 </StyledButton>
               </div>
             )}
-          </div>
+          </StyledButtonsWrapper>
         ) : null}
       </DropdownMenu>
     </>
   );
 
+  function getInitialValue(): AutocompleteValue<
+    T,
+    Multiple,
+    DisableClearable,
+    FreeSolo
+  > {
+    return multiple
+      ? ([] as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >)
+      : (null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
+  }
+
+  function handleChange(
+    event: React.SyntheticEvent,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
+    reason: AutocompleteChangeReason,
+    details?: AutocompleteChangeDetails<T>
+  ) {
+    if (multiple) {
+      if (isTriggerChangeOnOptionClick) {
+        setPendingValue(newValue);
+
+        return setValueAndCallOnChange(event, newValue, reason, details);
+      }
+
+      return setPendingValue(newValue);
+    }
+
+    setValueAndCallOnChange(event, newValue, reason, details);
+
+    if (!isMultiColumn) setOpen(false);
+  }
+
   function handleClickAway() {
     if (open) {
       // (masoudmanson): We want to keep the dropdown menu open in two scenarios:
@@ -199,29 +249,27 @@ const Dropdown = <Multiple extends boolean | undefined = false>({
       }
 
       if (multiple) {
-        setValueAndCallOnChange(
-          pendingValue as Value<DefaultDropdownMenuOption, Multiple>
-        );
+        setValue(pendingValue);
       }
     }
   }
 
   function handleClick(event: React.MouseEvent<HTMLElement>) {
     if (open) {
-      if (multiple) {
-        setValueAndCallOnChange(
-          pendingValue as Value<DefaultDropdownMenuOption, Multiple>
-        );
-      }
+      if (!shouldShowButtons) {
+        if (multiple) {
+          setValue(pendingValue);
+        }
 
-      setOpen(false);
+        setOpen(false);
 
-      if (anchorEl) {
-        anchorEl.focus();
+        if (anchorEl) {
+          anchorEl.focus();
+        }
       }
     } else {
       if (multiple) {
-        setPendingValue(value as MUIValue<true>);
+        setPendingValue(value);
       }
 
       setAnchorEl(event.currentTarget);
@@ -230,7 +278,7 @@ const Dropdown = <Multiple extends boolean | undefined = false>({
   }
 
   function handleClose(
-    _: React.ChangeEvent<unknown>,
+    event: React.SyntheticEvent,
     reason: AutocompleteCloseReason
   ) {
     // (thuang): We don't want to close the menu when the input is clicked
@@ -245,78 +293,44 @@ const Dropdown = <Multiple extends boolean | undefined = false>({
     }
 
     if (multiple) {
-      setValueAndCallOnChange(
-        pendingValue as Value<DefaultDropdownMenuOption, Multiple>
-      );
+      setValue(pendingValue);
     }
 
     if (anchorEl) {
       anchorEl.focus();
     }
 
-    if (closeOnBlur) onClose?.();
+    if (closeOnBlur) onClose?.(event, reason);
 
     if (shouldShowButtons) {
-      onClose?.();
+      onClose?.(event, reason);
       setOpen(false);
     }
   }
 
-  function handleChange(
-    _: React.ChangeEvent<unknown>,
-    newValue: DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
-  ) {
-    if (multiple) {
-      if (isTriggerChangeOnOptionClick) {
-        setPendingValue(newValue as Value<DefaultDropdownMenuOption, true>);
-
-        return setValueAndCallOnChange(
-          newValue as Value<DefaultDropdownMenuOption, Multiple>
-        );
-      }
-
-      return setPendingValue(
-        newValue as Value<DefaultDropdownMenuOption, true>
-      );
-    }
-
-    setValueAndCallOnChange(
-      newValue as Value<DefaultDropdownMenuOption, Multiple>
-    );
-    setOpen(false);
-  }
-
   function handleCancel() {
     if (multiple) {
       // (masoudmanson): To undo the latest actions made on the selections,
       // we set the value of the selection to the pendingValue. This allows us to
       // cancel any recent changes and restore the previous selection state.
-      setPendingValue(value as Value<DefaultDropdownMenuOption, true>);
+      setPendingValue(value);
     }
 
     if (anchorEl) {
       anchorEl.focus();
     }
 
-    onClose?.();
     setOpen(false);
   }
 
-  function getInitialValue(): Value<DefaultDropdownMenuOption, Multiple> {
-    if (isControlled) {
-      return propValue;
-    }
-
-    return multiple
-      ? ([] as unknown as Value<DefaultDropdownMenuOption, Multiple>)
-      : null;
-  }
-
   function setValueAndCallOnChange(
-    newValue: Value<DefaultDropdownMenuOption, Multiple>
+    event: React.SyntheticEvent,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
+    reason: AutocompleteChangeReason,
+    details?: AutocompleteChangeDetails<T>
   ) {
     setValue(newValue);
-    onChange(newValue);
+    onChange?.(event, newValue, reason, details);
   }
 };
 
diff --git a/packages/components/src/core/Dropdown/style.ts b/packages/components/src/core/Dropdown/style.ts
index cbef354eb..e4b6cb7ba 100644
--- a/packages/components/src/core/Dropdown/style.ts
+++ b/packages/components/src/core/Dropdown/style.ts
@@ -1,28 +1,35 @@
 import { styled } from "@mui/material/styles";
 import Button from "../Button";
-import { getSpaces } from "../styles";
+import { CommonThemeProps, getSpaces } from "../styles";
 
-export const Wrapper = styled("div")`
-  width: 150px;
+interface StyleProps extends CommonThemeProps {
+  buttonPosition: "left" | "right";
+}
+
+const doNotForwardProps = ["buttonPosition"];
+
+export const StyledButtonsWrapper = styled("div", {
+  shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
+})`
+  ${(props: StyleProps) => {
+    const { buttonPosition } = props;
+
+    return `
+      display: flex;
+      justify-content: ${buttonPosition === "left" ? "start" : "end"};
+    `;
+  }}
 `;
 
-export const StyledButton = styled(Button)`
+export const StyledButton = styled(Button, {
+  shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
+})`
   ${(props) => {
     const spacings = getSpaces(props);
 
     return `
       margin-top: ${spacings?.l}px;
-      margin-bottom: ${spacings?.s}px;
-
-      &:first-of-type {
-        margin-left: ${spacings?.s}px;
-        margin-right: ${spacings?.m}px;
-      }
-
-      &:last-child {
-        margin-left: 0;
-        margin-right: ${spacings?.s}px;
-      }
+      margin-right: ${spacings?.m}px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/DropdownMenu/DropdownMenu.namespace-test.tsx b/packages/components/src/core/DropdownMenu/DropdownMenu.namespace-test.tsx
index 65d4e55a5..1e4198b92 100644
--- a/packages/components/src/core/DropdownMenu/DropdownMenu.namespace-test.tsx
+++ b/packages/components/src/core/DropdownMenu/DropdownMenu.namespace-test.tsx
@@ -1,9 +1,8 @@
 import {
-  DefaultDropdownMenuOption,
+  DefaultAutocompleteOption,
   DropdownMenu,
   DropdownMenuProps,
 } from "@czi-sds/components";
-import React from "react";
 import { noop } from "src/common/utils";
 
 const OPTIONS = [
@@ -21,7 +20,7 @@ const OPTIONS = [
 
 const DropdownMenuNameSpaceTest = (
   props: DropdownMenuProps<
-    DefaultDropdownMenuOption,
+    DefaultAutocompleteOption,
     true,
     undefined,
     undefined
diff --git a/packages/components/src/core/DropdownMenu/__snapshots__/index.test.tsx.snap b/packages/components/src/core/DropdownMenu/__snapshots__/index.test.tsx.snap
index f624037af..52929d9dc 100644
--- a/packages/components/src/core/DropdownMenu/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/DropdownMenu/__snapshots__/index.test.tsx.snap
@@ -5,3 +5,9 @@ exports[`<DropdownMenu /> Default story renders snapshot 1`] = `
   style="margin: 16px 0px 0px 24px;"
 />
 `;
+
+exports[`<DropdownMenu /> MultiColumn story renders snapshot 1`] = `
+<div
+  style="margin: 16px 0px 0px 24px;"
+/>
+`;
diff --git a/packages/components/src/core/DropdownMenu/index.stories.tsx b/packages/components/src/core/DropdownMenu/index.stories.tsx
index f9c9781d3..76df7d055 100644
--- a/packages/components/src/core/DropdownMenu/index.stories.tsx
+++ b/packages/components/src/core/DropdownMenu/index.stories.tsx
@@ -1,77 +1,72 @@
-import { styled } from "@mui/material";
+import { AutocompleteValue, styled } from "@mui/material";
 import { Args, Meta } from "@storybook/react";
-import React, { SyntheticEvent, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { AUTOCOMPLETE_MULTI_COLUMN_OPTIONS } from "../../common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "../../common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "../Autocomplete/components/AutocompleteBase";
 import ButtonIcon from "../ButtonIcon";
-import { Value } from "../Dropdown";
 import InputDropdown from "../InputDropdown";
 import Tag from "../Tag";
-import { GITHUB_LABELS } from "./GITHUB_LABELS";
-import RawDropdownMenu, { DefaultDropdownMenuOption } from "./index";
-
-export type DropdownOptionValue<T, Multiple> = Multiple extends
-  | undefined
-  | false
-  ? T | undefined
-  : Array<T> | undefined;
+import RawDropdownMenu from "./index";
 
+const LABEL = "Github Labels";
 const POPPER_POSITION = "bottom-start";
 const POPPER_WIDTH = 160;
 const groupByOptions = [
   undefined,
-  (option: DefaultDropdownMenuOption) => option.section as string,
+  (option: DefaultAutocompleteOption) => option.section as string,
+];
+
+const dataOptions = [
+  AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+  [AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[0], AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[1]],
+  [
+    AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[0],
+    AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[1],
+    AUTOCOMPLETE_MULTI_COLUMN_OPTIONS[2],
+  ],
 ];
 
-const DropdownMenu = <Multiple extends boolean | undefined = false>(
+const DropdownMenu = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
   props: Args
 ): JSX.Element => {
   const {
+    label,
     multiple,
-    options = GITHUB_LABELS,
+    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
     search,
     title,
-    value: propValue,
   } = props;
-
-  const isControlled = propValue !== undefined;
-  const [value, setValue] = useState<
-    DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
-  >(getInitialValue());
-  const [pendingValue, setPendingValue] = useState<
-    DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
-  >(getInitialValue());
   const anchorRef = useRef(null);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
   useEffect(() => {
-    setAnchorEl(anchorRef.current);
-  }, []);
-
-  useEffect(() => {
-    if (isControlled) {
-      setValue(propValue);
-    }
-  }, [propValue, isControlled]);
+    setTimeout(() => {
+      setAnchorEl(anchorRef.current);
+    }, 1);
+  }, [anchorRef]);
 
   return (
     <div style={{ margin: "16px 0 0 24px" }} ref={anchorRef}>
       {anchorEl ? (
-        <RawDropdownMenu
+        <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+          label={label}
           anchorEl={anchorEl}
           disableCloseOnSelect={false}
           multiple={multiple}
-          onChange={handleChange}
-          onClickAway={handleClickAway}
-          open
           options={options}
           PopperBaseProps={{
             disablePortal: false,
             placement: POPPER_POSITION,
-            sx: { width: 300 },
           }}
           search={search}
           title={title}
-          value={multiple ? pendingValue : value}
-          getOptionDisabled={(option: DefaultDropdownMenuOption) => {
+          getOptionDisabled={(option: T) => {
             return option.name === "Type: feature request";
           }}
           {...props}
@@ -79,33 +74,6 @@ const DropdownMenu = <Multiple extends boolean | undefined = false>(
       ) : null}
     </div>
   );
-
-  function handleClickAway() {
-    if (multiple) {
-      setValue(pendingValue);
-    }
-  }
-
-  function handleChange(
-    _: SyntheticEvent<Element, Event>,
-    newValue: DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
-  ) {
-    if (multiple) {
-      return setPendingValue(newValue);
-    }
-
-    setValue(newValue);
-  }
-
-  function getInitialValue(): Value<DefaultDropdownMenuOption, Multiple> {
-    if (isControlled) {
-      return propValue;
-    }
-
-    return multiple
-      ? ([] as unknown as Value<DefaultDropdownMenuOption, Multiple>)
-      : null;
-  }
 };
 
 export default {
@@ -131,12 +99,28 @@ export default {
     multiple: {
       control: { type: "boolean" },
     },
+    open: {
+      control: {
+        type: "boolean",
+      },
+    },
+    options: {
+      control: {
+        labels: ["One Column", "Two Columns", "Three Columns"],
+        type: "select",
+      },
+      mapping: dataOptions,
+      options: Object.keys(dataOptions),
+    },
     search: {
       control: { type: "boolean" },
     },
     title: {
       control: { type: "text" },
     },
+    width: {
+      control: { type: "number" },
+    },
   },
   component: DropdownMenu,
   // (masoudmanson) For the purpose of storybook, the button is removed
@@ -167,9 +151,27 @@ export const Default = {
     groupBy: groupByOptions[1],
     keepSearchOnSelect: true,
     multiple: true,
+    open: true,
+    options: dataOptions[0],
+    search: true,
+    title: LABEL,
+    width: 300,
+  },
+};
+
+// Multi Column
+
+export const MultiColumn = {
+  args: {
+    groupBy: groupByOptions[1],
+    keepSearchOnSelect: true,
+    multiple: true,
+    open: true,
+    options: dataOptions[2],
     search: true,
-    title: "Github Labels",
+    title: LABEL,
   },
+  render: (args: Args) => <DropdownMenu {...args} />,
 };
 
 // Live Preview
@@ -233,7 +235,12 @@ const LIVE_PREVIEW_LABELS = [
   },
 ];
 
-const LivePreviewDemo = (): JSX.Element => {
+const LivePreviewDemo = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(): JSX.Element => {
   const options = LIVE_PREVIEW_LABELS;
 
   const [anchorEl1, setAnchorEl1] = useState<HTMLElement | null>(null);
@@ -246,17 +253,19 @@ const LivePreviewDemo = (): JSX.Element => {
   const [open3, setOpen3] = useState(false);
   const [open4, setOpen4] = useState(false);
 
-  const [value1, setValue1] =
-    useState<Value<DefaultDropdownMenuOption, false>>(null);
-  const [value2, setValue2] =
-    useState<Value<DefaultDropdownMenuOption, false>>(null);
+  const [value1, setValue1] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(false));
+  const [value2, setValue2] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(false));
 
   const [pendingValue3, setPendingValue3] = useState<
-    DropdownOptionValue<DefaultDropdownMenuOption, true>
-  >([]);
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(true));
   const [pendingValue4, setPendingValue4] = useState<
-    DropdownOptionValue<DefaultDropdownMenuOption, true>
-  >([]);
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(true));
 
   return (
     <div style={storyRow as React.CSSProperties}>
@@ -272,20 +281,21 @@ const LivePreviewDemo = (): JSX.Element => {
         />
 
         {anchorEl1 ? (
-          <RawDropdownMenu
+          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+            label="Search"
             anchorEl={anchorEl1}
             open={!!open1}
             onChange={handleChange1}
             disableCloseOnSelect={false}
-            options={options.slice(0, 3) as DefaultDropdownMenuOption[]}
+            options={options.slice(0, 3) as T[]}
             PopperBaseProps={{
               placement: POPPER_POSITION,
-              sx: { width: POPPER_WIDTH },
             }}
             search={false}
-            multiple={false}
+            multiple={false as Multiple}
             value={value1}
             onClickAway={handleClickAway1}
+            width={POPPER_WIDTH}
           />
         ) : null}
       </div>
@@ -302,21 +312,22 @@ const LivePreviewDemo = (): JSX.Element => {
         />
 
         {anchorEl2 ? (
-          <RawDropdownMenu
+          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+            label="Search"
             anchorEl={anchorEl2}
             open={!!open2}
             search={false}
-            multiple={false}
+            multiple={false as Multiple}
             onChange={handleChange2}
             disableCloseOnSelect={false}
-            options={options.slice(0, 3) as DefaultDropdownMenuOption[]}
+            options={options.slice(0, 3) as T[]}
             PopperBaseProps={{
               placement: POPPER_POSITION,
-              sx: { width: POPPER_WIDTH },
             }}
             value={value2}
             title="Title Lorem Ipsum"
             onClickAway={handleClickAway2}
+            width={POPPER_WIDTH}
           />
         ) : null}
       </div>
@@ -333,20 +344,21 @@ const LivePreviewDemo = (): JSX.Element => {
         />
 
         {anchorEl3 ? (
-          <RawDropdownMenu
+          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+            label="Search"
             anchorEl={anchorEl3}
             open={!!open3}
             search
-            multiple
+            multiple={true as Multiple}
             onChange={handleChange3}
             disableCloseOnSelect
-            options={options as DefaultDropdownMenuOption[]}
+            options={options as T[]}
             PopperBaseProps={{
               placement: POPPER_POSITION,
-              sx: { width: POPPER_WIDTH },
             }}
             value={pendingValue3}
             onClickAway={handleClickAway3}
+            width={POPPER_WIDTH}
           />
         ) : null}
       </div>
@@ -363,29 +375,43 @@ const LivePreviewDemo = (): JSX.Element => {
         />
 
         {anchorEl4 ? (
-          <RawDropdownMenu
+          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+            label="Search"
             anchorEl={anchorEl4}
             open={!!open4}
             search={false}
-            multiple
+            multiple={true as Multiple}
             groupBy={(option) => option.section as string}
             onChange={handleChange4}
             disableCloseOnSelect
-            options={options as DefaultDropdownMenuOption[]}
+            options={options as T[]}
             PopperBaseProps={{
               placement: POPPER_POSITION,
-              sx: { width: POPPER_WIDTH },
             }}
             value={pendingValue4}
             onClickAway={handleClickAway4}
+            width={POPPER_WIDTH}
           />
         ) : null}
       </div>
     </div>
   );
 
+  function getInitialValue(
+    multiple: boolean
+  ): AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> {
+    return multiple
+      ? ([] as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >)
+      : (null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
+  }
+
   function handleClickAway1() {
-    return open1 && setOpen1(false);
+    setOpen1(false);
   }
 
   function handleClick1(event: React.MouseEvent<HTMLElement>) {
@@ -405,14 +431,16 @@ const LivePreviewDemo = (): JSX.Element => {
 
   function handleChange1(
     _: React.SyntheticEvent<Element, Event>,
-    newValue: Value<DefaultDropdownMenuOption, false>
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
   ) {
     setOpen1(false);
-    setValue1(newValue as Value<DefaultDropdownMenuOption, false>);
+    setValue1(
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    );
   }
 
   function handleClickAway2() {
-    return open2 && setOpen2(false);
+    setOpen2(false);
   }
 
   function handleClick2(event: React.MouseEvent<HTMLElement>) {
@@ -432,14 +460,16 @@ const LivePreviewDemo = (): JSX.Element => {
 
   function handleChange2(
     _: React.SyntheticEvent<Element, Event>,
-    newValue: Value<DefaultDropdownMenuOption, false>
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
   ) {
     setOpen2(false);
-    setValue2(newValue as Value<DefaultDropdownMenuOption, false>);
+    setValue2(
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    );
   }
 
   function handleClickAway3() {
-    return open3 && setOpen3(false);
+    setOpen3(false);
   }
 
   function handleClick3(event: React.MouseEvent<HTMLElement>) {
@@ -459,15 +489,15 @@ const LivePreviewDemo = (): JSX.Element => {
 
   function handleChange3(
     _: React.SyntheticEvent<Element, Event>,
-    newValue: DropdownOptionValue<DefaultDropdownMenuOption, true>
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
   ) {
     return setPendingValue3(
-      newValue as DropdownOptionValue<DefaultDropdownMenuOption, true>
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
     );
   }
 
   function handleClickAway4() {
-    return open4 && setOpen4(false);
+    setOpen4(false);
   }
 
   function handleClick4(event: React.MouseEvent<HTMLElement>) {
@@ -487,10 +517,10 @@ const LivePreviewDemo = (): JSX.Element => {
 
   function handleChange4(
     _: React.SyntheticEvent<Element, Event>,
-    newValue: DropdownOptionValue<DefaultDropdownMenuOption, true>
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
   ) {
     return setPendingValue4(
-      newValue as DropdownOptionValue<DefaultDropdownMenuOption, true>
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
     );
   }
 };
@@ -502,6 +532,20 @@ export const LivePreview = {
     search: false,
   },
   parameters: {
+    controls: {
+      exclude: [
+        "keepSearchOnSelect",
+        "ClickAwayListenerProps",
+        "search",
+        "multiple",
+        "label",
+        "groupBy",
+        "open",
+        "options",
+        "title",
+        "width",
+      ],
+    },
     snapshot: {
       skip: true,
     },
@@ -642,11 +686,13 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
                       option.section as string)
                   }
                   options={
-                    SCREENSHOT_TEST_OPTIONS as DefaultDropdownMenuOption[]
+                    SCREENSHOT_TEST_OPTIONS as DefaultAutocompleteOption[]
                   }
                   title={title}
                   search={search}
                   key={String(groupBy)}
+                  open
+                  width={250}
                 />
               </>
             </div>
@@ -664,13 +710,16 @@ export const ScreenshotTest = {
     },
     controls: {
       exclude: [
-        "groupBy",
         "keepSearchOnSelect",
-        "multiple",
-        "search",
-        "title",
         "ClickAwayListenerProps",
+        "search",
+        "multiple",
         "label",
+        "groupBy",
+        "open",
+        "options",
+        "title",
+        "width",
       ],
     },
     snapshot: {
@@ -682,19 +731,30 @@ export const ScreenshotTest = {
 
 // Test
 
-const TestDemo = (props: Args): JSX.Element => {
-  const { multiple, options = GITHUB_LABELS, search } = props;
+const TestDemo = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
+>(
+  props: Args
+): JSX.Element => {
+  const {
+    multiple,
+    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+    search,
+  } = props;
 
   const anchorRef = useRef(null);
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const [value, setValue] = useState<
-    null | DefaultDropdownMenuOption | DefaultDropdownMenuOption[]
-  >(multiple ? [] : null);
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(false));
 
-  const [pendingValue, setPendingValue] = useState<DefaultDropdownMenuOption[]>(
-    []
-  );
+  const [pendingValue, setPendingValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(true));
 
   useEffect(() => {
     setAnchorEl(anchorRef.current);
@@ -703,7 +763,8 @@ const TestDemo = (props: Args): JSX.Element => {
   return (
     <div style={{ margin: "16px 0 0 24px" }} ref={anchorRef}>
       {anchorEl ? (
-        <RawDropdownMenu
+        <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+          label="Search"
           anchorEl={anchorEl}
           open
           search={search}
@@ -713,9 +774,8 @@ const TestDemo = (props: Args): JSX.Element => {
           disableCloseOnSelect={multiple}
           options={options}
           onClickAway={handleClickAway}
-          groupBy={(option: DefaultDropdownMenuOption) =>
-            option.section as string
-          }
+          groupBy={(option: T) => option.section as string}
+          width={300}
           {...props}
         />
       ) : null}
@@ -728,13 +788,31 @@ const TestDemo = (props: Args): JSX.Element => {
 
   function handleChange(
     _: React.ChangeEvent<unknown>,
-    newValue: DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
   ) {
     if (!multiple) {
-      setValue(newValue as DefaultDropdownMenuOption);
+      setValue(
+        newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+      );
     }
 
-    return setPendingValue(newValue as DefaultDropdownMenuOption[]);
+    return setPendingValue(
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    );
+  }
+
+  // eslint-disable-next-line sonarjs/no-identical-functions
+  function getInitialValue(
+    isMultiple: boolean
+  ): AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> {
+    return isMultiple
+      ? ([] as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >)
+      : (null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
   }
 };
 
@@ -743,9 +821,23 @@ export const Test = {
     keepSearchOnSelect: false,
     multiple: true,
     search: true,
-    title: "Github Labels",
+    title: LABEL,
   },
   parameters: {
+    controls: {
+      exclude: [
+        "keepSearchOnSelect",
+        "ClickAwayListenerProps",
+        "search",
+        "multiple",
+        "label",
+        "groupBy",
+        "open",
+        "options",
+        "title",
+        "width",
+      ],
+    },
     snapshot: {
       skip: true,
     },
diff --git a/packages/components/src/core/DropdownMenu/index.tsx b/packages/components/src/core/DropdownMenu/index.tsx
index c139e6540..ad609c651 100644
--- a/packages/components/src/core/DropdownMenu/index.tsx
+++ b/packages/components/src/core/DropdownMenu/index.tsx
@@ -1,27 +1,37 @@
 import {
   AutocompleteInputChangeReason,
-  AutocompleteProps,
   AutocompleteRenderInputParams,
   ClickAwayListener,
   ClickAwayListenerProps as MUIClickAwayListenerProps,
   PaperProps,
   PopperProps,
 } from "@mui/material";
-import React, { SyntheticEvent, useCallback } from "react";
-import Autocomplete, { DefaultAutocompleteOption } from "../Autocomplete";
+import { useTheme } from "@mui/material/styles";
+import React, { SyntheticEvent, useMemo } from "react";
+import { EMPTY_OBJECT, noop } from "src/common/utils";
+import Autocomplete, { AutocompleteProps } from "../Autocomplete";
+import { DefaultAutocompleteOption } from "../Autocomplete/components/AutocompleteBase";
 import { InputSearchProps } from "../InputSearch";
+import { SDSTheme } from "../styles";
 import {
   StyleProps,
-  StyledAutocompletePopper,
+  StyledDropdownMenuAutocompleteWrapper,
   StyledHeaderTitle,
   StyledPaper,
   StyledPopper,
 } from "./style";
 
+/**
+ * (masoudmanson): We've replaced DefaultDropdownMenuOption with DefaultAutocompleteOption
+ * as the preferred choice. However, for backward compatibility, we've exported this line to
+ * prevent potential TypeScript type issues for product teams using previous versions.
+ */
+
 export type DefaultDropdownMenuOption = DefaultAutocompleteOption;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type RenderFunctionType = (props: any) => JSX.Element;
+// (masoudmanson): Represents the minimum width defined by design specifications
+// for the dropdownMenu's popper component
+export const MINIMUM_DROPDOWN_MENU_POPPER_WIDTH = 160;
 
 interface ExtraDropdownMenuProps extends StyleProps {
   keepSearchOnSelect?: boolean;
@@ -36,19 +46,20 @@ interface ExtraDropdownMenuProps extends StyleProps {
   title?: string;
   label?: string;
   anchorEl: HTMLElement | null;
-  PopperComponent?: typeof StyledPopper | RenderFunctionType;
+  PopperComponent?: React.JSXElementConstructor<PopperProps>;
+  PaperComponent?: React.JSXElementConstructor<PaperProps>;
   PopperPlacement?: "bottom-start" | "top-start" | "bottom-end" | "top-end";
-  PaperComponent?: typeof StyledPaper | RenderFunctionType;
   children?: JSX.Element | null;
-  onClickAway: (event: MouseEvent | TouchEvent) => void;
+  onClickAway?: (event: MouseEvent | TouchEvent) => void;
   ClickAwayListenerProps?: Partial<MUIClickAwayListenerProps>;
+  width?: number;
 }
 
 type CustomAutocompleteProps<
   T,
-  Multiple extends boolean | undefined = undefined,
-  DisableClearable extends boolean | undefined = undefined,
-  FreeSolo extends boolean | undefined = undefined
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
 > = Omit<
   AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
   "renderInput" | "nonce" | "rev" | "rel" | "autoFocus" | "content"
@@ -56,46 +67,68 @@ type CustomAutocompleteProps<
 
 export type DropdownMenuProps<
   T,
-  Multiple extends boolean | undefined = undefined,
-  DisableClearable extends boolean | undefined = undefined,
-  FreeSolo extends boolean | undefined = undefined
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
 > = CustomAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> &
   ExtraDropdownMenuProps;
 
+const DEFAULT_POPPER_BASE_PROPS: Partial<PopperProps> = {
+  disablePortal: true,
+};
+
 const DropdownMenu = <
-  T extends DefaultDropdownMenuOption,
-  Multiple extends boolean | undefined = undefined,
-  DisableClearable extends boolean | undefined = undefined,
-  FreeSolo extends boolean | undefined = undefined
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined
 >(
   props: DropdownMenuProps<T, Multiple, DisableClearable, FreeSolo>
 ): JSX.Element => {
+  const theme: SDSTheme = useTheme();
+
   const {
     anchorEl,
     id,
-    InputBaseProps = {
-      autoFocus: true,
-      sx: {
-        padding: "8px",
-      },
-    },
+    InputBaseProps,
     open = false,
-    PaperComponent = StyledPaper,
     PopperComponent = StyledPopper,
+    PaperComponent = StyledPaper,
     PopperPlacement = "bottom-start",
     PopperBaseProps = {},
     search = false,
     title,
     label = "Search",
     children,
-    onClickAway,
+    options,
+    onClickAway = noop,
     ClickAwayListenerProps,
+    width = MINIMUM_DROPDOWN_MENU_POPPER_WIDTH,
     ...rest
   } = props;
 
-  const defaultPopperComponent = useCallback((popperProps: PopperProps) => {
-    return <StyledAutocompletePopper {...popperProps} />;
-  }, []);
+  const isMultiColumn = "options" in (options?.[0] || EMPTY_OBJECT);
+
+  // (masoudmanson): The DropdownMenu's Popper component should have a minimum
+  // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
+  // a single column dropdown.However, for larger multi-column autocompletes,
+  // the width should be set to 'auto' to accommodate the expanded layout.
+  const dropdownMenuPopperSx = useMemo(() => {
+    return {
+      ...PopperBaseProps?.sx,
+      width:
+        isMultiColumn || width < MINIMUM_DROPDOWN_MENU_POPPER_WIDTH
+          ? "auto"
+          : width,
+    };
+  }, [PopperBaseProps?.sx, isMultiColumn, width]);
+
+  const DefaultInputBaseProps = useMemo(() => {
+    return {
+      ...InputBaseProps,
+      onClick: noop,
+    };
+  }, [InputBaseProps]);
 
   return (
     <PopperComponent
@@ -104,42 +137,46 @@ const DropdownMenu = <
         {
           name: "offset",
           options: {
-            offset: [0, 8],
+            offset: [0, theme.app?.spacing.s],
           },
         },
       ]}
       open={open}
       anchorEl={anchorEl}
-      {...PopperBaseProps}
       placement={PopperPlacement}
+      {...PopperBaseProps}
+      // (masoudmanson): To override the width of the Popper,
+      // the sx prop's value must be set after spreading the PopperBaseProps.
+      sx={dropdownMenuPopperSx}
     >
-      <ClickAwayListener onClickAway={onClickAway} {...ClickAwayListenerProps}>
-        <div>
-          {title && (
-            <StyledHeaderTitle search={search}>{title}</StyledHeaderTitle>
-          )}
+      <PaperComponent>
+        <ClickAwayListener
+          onClickAway={onClickAway}
+          {...ClickAwayListenerProps}
+        >
+          <StyledDropdownMenuAutocompleteWrapper>
+            {title && (
+              <StyledHeaderTitle search={search}>{title}</StyledHeaderTitle>
+            )}
 
-          <Autocomplete
-            label={label}
-            search={search}
-            InputBaseProps={InputBaseProps}
-            PaperComponent={useCallback(
-              (paperComponentProps: PaperProps) => (
-                <PaperComponent
-                  search={search}
-                  title={title}
-                  {...paperComponentProps}
-                />
-              ),
-              [PaperComponent, search, title]
+            {anchorEl && (
+              <Autocomplete
+                label={label}
+                search={search}
+                title={title}
+                open={open}
+                options={options}
+                PopperBaseProps={DEFAULT_POPPER_BASE_PROPS}
+                disablePortal
+                onClickAway={noop}
+                {...rest}
+                InputBaseProps={DefaultInputBaseProps}
+              />
             )}
-            open={open}
-            {...rest}
-            PopperComponent={defaultPopperComponent}
-          />
-          {children}
-        </div>
-      </ClickAwayListener>
+            {children}
+          </StyledDropdownMenuAutocompleteWrapper>
+        </ClickAwayListener>
+      </PaperComponent>
     </PopperComponent>
   );
 };
diff --git a/packages/components/src/core/DropdownMenu/style.ts b/packages/components/src/core/DropdownMenu/style.ts
index 53976a029..47dbb5460 100644
--- a/packages/components/src/core/DropdownMenu/style.ts
+++ b/packages/components/src/core/DropdownMenu/style.ts
@@ -1,4 +1,4 @@
-import { Paper, Popper } from "@mui/material";
+import { autocompleteClasses, Paper, Popper } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactElement } from "react";
 import {
@@ -16,6 +16,7 @@ export interface StyleProps extends CommonThemeProps {
   icon?: ReactElement;
   search?: boolean;
   title?: string;
+  isMultiColumn?: boolean;
 }
 
 const doNotForwardProps = [
@@ -28,19 +29,10 @@ const doNotForwardProps = [
   "PopperBaseProps",
   "onClickAway",
   "ClickAwayListenerProps",
+  "forceOpen",
+  "isMultiColumn",
 ];
 
-// export const StyledAutocomplete = styled(Autocomplete, {
-//   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
-// })`
-//   ${(props: StyleProps) => {
-//     const spacings = getSpaces(props);
-
-//     return `
-//     `;
-//   }}
-// ` as typeof Autocomplete;
-
 export const StyledHeaderTitle = styled("div", {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })<{ search: boolean }>`
@@ -54,39 +46,45 @@ export const StyledHeaderTitle = styled("div", {
 
     return `
       font-family: ${typography?.fontFamily};
-      color: black;
-      padding-top: ${spacings?.xxs}px;
-      padding-right: ${spacings?.s}px;
-      padding-left: ${spacings?.s}px;
-      ${search ? `padding-bottom: 0px;` : `padding-bottom: ${spacings?.xs}px;`}
+      padding-right: ${spacings?.m}px;
+      margin-bottom: ${search ? spacings?.s : spacings?.m}px;
     `;
   }}
 `;
 
-export const StyledPopper = styled(Popper, {
-  shouldForwardProp: (prop: string) =>
-    !doNotForwardProps.includes(prop) || prop === "anchorEl",
-})`
-  .MuiAutocomplete-popperDisablePortal {
-    position: relative;
+export const StyledDropdownMenuAutocompleteWrapper = styled("div")`
+  & .${autocompleteClasses.popper}, & .MuiPopper-root {
+    position: relative !important;
+    transform: none !important;
     width: 100% !important;
     box-shadow: none;
     padding: 0;
     border: none;
+
+    .${autocompleteClasses.paper}, .MuiPaper-root {
+      box-shadow: none !important;
+      border: none !important;
+      border-radius: 0;
+      margin: 0;
+      padding: 0;
+    }
   }
+`;
 
+export const StyledPopper = styled(Popper, {
+  shouldForwardProp: (prop: string) =>
+    !doNotForwardProps.includes(prop) || prop === "anchorEl",
+})`
   ${(props) => {
     const borders = getBorders(props);
     const corners = getCorners(props);
     const shadows = getShadows(props);
-    const spacings = getSpaces(props);
 
     return `
       background-color: white;
       border: ${borders?.gray[100]};
       border-radius: ${corners?.m}px;
       box-shadow: ${shadows?.m};
-      padding: ${spacings?.xs}px;
       box-sizing: border-box;
       z-index: 1400;
     `;
@@ -97,25 +95,19 @@ export const StyledPaper = styled(Paper, {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
   ${(props: StyleProps) => {
-    const { title } = props;
     const spacings = getSpaces(props);
 
     return `
-      box-shadow: none;
-      margin: 0;
+      box-shadow: none !important;
+      border: none !important;
       border-radius: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      ${title ? `padding-left: ${spacings?.s}px !important;` : ``}
+      margin: 0;
+      padding: ${spacings?.l}px ${spacings?.xxs}px ${spacings?.l}px ${spacings?.l}px;
+
+      .MuiFormControl-root.MuiTextField-root {
+        margin-bottom: ${spacings?.m}px;
+        margin-right: ${spacings?.m}px;
+      }
     `;
   }}
 `;
-
-export const StyledAutocompletePopper = styled(Popper)`
-  position: relative !important;
-  transform: none !important;
-  width: 100% !important;
-  box-shadow: none;
-  padding: 0;
-  border: none;
-`;
diff --git a/packages/components/src/core/InputDropdown/index.stories.tsx b/packages/components/src/core/InputDropdown/index.stories.tsx
index ee96eacea..96ee2300c 100644
--- a/packages/components/src/core/InputDropdown/index.stories.tsx
+++ b/packages/components/src/core/InputDropdown/index.stories.tsx
@@ -1,10 +1,12 @@
+import { AutocompleteValue } from "@mui/base";
 import { styled } from "@mui/material/styles";
 import { Args, Meta } from "@storybook/react";
 import React, { useEffect, useState } from "react";
 import { noop } from "src/common/utils";
+import { DefaultAutocompleteOption } from "../Autocomplete/components/AutocompleteBase";
 import Callout from "../Callout";
 import CalloutTitle from "../Callout/components/CalloutTitle";
-import DropdownMenu, { DefaultDropdownMenuOption } from "../DropdownMenu";
+import DropdownMenu from "../DropdownMenu";
 import RawInputDropdown, { InputDropdownProps } from "./index";
 
 const StyledInputDropdown = styled(RawInputDropdown)`
@@ -16,7 +18,15 @@ const StyledInputDropdown = styled(RawInputDropdown)`
   }}
 `;
 
-const InputDropdown = (props: Args): JSX.Element => {
+type DisableClearable = false;
+type FreeSolo = false;
+
+const InputDropdown = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined
+>(
+  props: Args
+): JSX.Element => {
   const {
     disabled,
     label,
@@ -38,11 +48,8 @@ const InputDropdown = (props: Args): JSX.Element => {
   const [storybookLabel, setStorybookLabel] = useState("Label");
 
   const [value, setValue] = useState<
-    DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
-  >(getInitialValue());
-  const [pendingValue, setPendingValue] = useState<
-    DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
-  >(getInitialValue());
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
 
   const isControlled = propValue !== undefined;
 
@@ -87,7 +94,7 @@ const InputDropdown = (props: Args): JSX.Element => {
 
   const handleChange = (
     _: React.SyntheticEvent<Element, Event>,
-    newValue: DefaultDropdownMenuOption | DefaultDropdownMenuOption[] | null
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
   ) => {
     if (!multiple) {
       setOpen(false);
@@ -104,8 +111,8 @@ const InputDropdown = (props: Args): JSX.Element => {
         setInputDropdownValue(undefined);
       }
     } else {
-      setPendingValue(newValue);
-      setCounter((newValue as DefaultDropdownMenuOption[])?.length.toString());
+      setValue(newValue);
+      setCounter((newValue as T[])?.length.toString());
     }
   };
 
@@ -118,19 +125,8 @@ const InputDropdown = (props: Args): JSX.Element => {
         setSdsStage("default");
       }
     }
-    if (multiple) {
-      setValue(pendingValue);
-    }
   };
 
-  function getInitialValue() {
-    if (isControlled) {
-      return propValue;
-    }
-
-    return multiple ? ([] as unknown) : null;
-  }
-
   const options = [
     {
       details: "Details",
@@ -180,9 +176,10 @@ const InputDropdown = (props: Args): JSX.Element => {
         search={false}
         multiple={multiple}
         disableCloseOnSelect={multiple}
-        options={options}
-        value={multiple ? pendingValue : value}
+        options={options as T[]}
+        value={value}
         onClickAway={handleClickAway}
+        width={300}
       />
     </div>
   );
diff --git a/packages/components/src/core/InputSearch/index.tsx b/packages/components/src/core/InputSearch/index.tsx
index 2a66f7cf6..8ebdee5ed 100644
--- a/packages/components/src/core/InputSearch/index.tsx
+++ b/packages/components/src/core/InputSearch/index.tsx
@@ -136,7 +136,7 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
            * (masoudmanson): This prevents the browser's default auto completion
            * menu from being displayed for the InputSearch.
            */
-          autoComplete="off"
+          autoComplete="one-time-code"
           {...rest}
         />
       </>
diff --git a/packages/components/src/core/InputText/style.ts b/packages/components/src/core/InputText/style.ts
index 49e03504a..7081b566a 100644
--- a/packages/components/src/core/InputText/style.ts
+++ b/packages/components/src/core/InputText/style.ts
@@ -108,8 +108,6 @@ const disabledStyled = (props: InputTextExtraProps): SerializedStyles => {
 
 const textArea = (props: InputTextExtraProps): SerializedStyles => {
   const spacings = getSpaces(props);
-  console.log(outlinedInputClasses.multiline);
-  console.log(outlinedInputClasses.inputMultiline);
 
   return css`
     .${outlinedInputClasses.multiline} {
diff --git a/packages/components/src/core/MenuSelect/index.stories.tsx b/packages/components/src/core/MenuSelect/index.stories.tsx
index ea9e94e97..126631951 100644
--- a/packages/components/src/core/MenuSelect/index.stories.tsx
+++ b/packages/components/src/core/MenuSelect/index.stories.tsx
@@ -7,7 +7,7 @@ import {
 } from "@mui/material/useAutocomplete";
 import { Args, Meta } from "@storybook/react";
 import React, { SyntheticEvent, useState } from "react";
-import { GITHUB_LABELS } from "../DropdownMenu/GITHUB_LABELS";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "../../common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
 import TagFilter from "../TagFilter";
 import { getColors, getCorners, getShadows } from "../styles";
 import RawMenuSelect, { DefaultMenuSelectOption } from "./index";
@@ -81,7 +81,11 @@ const StyledButton = styled(ButtonBase)`
 // eslint-disable-next-line sonarjs/cognitive-complexity -- Demo code
 const MenuSelect = (props: Args): JSX.Element => {
   // eslint-disable-next-line react/prop-types -- Demo code
-  const { multiple, options = GITHUB_LABELS, search } = props;
+  const {
+    multiple,
+    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+    search,
+  } = props;
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
diff --git a/packages/components/src/core/TableRow/style.ts b/packages/components/src/core/TableRow/style.ts
index 9427a5770..bf83d2fae 100644
--- a/packages/components/src/core/TableRow/style.ts
+++ b/packages/components/src/core/TableRow/style.ts
@@ -4,7 +4,7 @@ import { CommonThemeProps, fontHeaderS, getColors } from "../styles";
 
 export interface RowExtraProps
   extends CommonThemeProps,
-    Omit<React.HTMLProps<HTMLTableRowElement>, "as"> {
+    Omit<React.HTMLProps<HTMLTableRowElement>, "as" | "rev"> {
   rowHeight?: number;
   useDivider?: boolean;
   selected?: boolean;
diff --git a/yarn.lock b/yarn.lock
index 7c9cbf920..ba59fddde 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -31,6 +31,14 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.4.tgz#03ae5af150be94392cb5c7ccd97db5a19a5da6aa"
+  integrity sha512-r1IONyb6Ia+jYR2vvIDhdWdlTGhqbBoFqLTQidzZ4kepUFH15ejXvFHxCVbtl7BOXIudsIubf4E81xeA3h3IXA==
+  dependencies:
+    "@babel/highlight" "^7.23.4"
+    chalk "^2.4.2"
+
 "@babel/code-frame@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.5.tgz#234d98e1551960604f1246e6475891a570ad5658"
@@ -95,6 +103,27 @@
     json5 "^2.2.2"
     semver "^6.3.0"
 
+"@babel/core@^7.22.0":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.3.tgz#5ec09c8803b91f51cc887dedc2654a35852849c9"
+  integrity sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.3"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helpers" "^7.23.2"
+    "@babel/parser" "^7.23.3"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.3"
+    "@babel/types" "^7.23.3"
+    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.22.5", "@babel/core@^7.22.9":
   version "7.22.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.9.tgz#bd96492c68822198f33e8a256061da3cf391f58f"
@@ -146,6 +175,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.3", "@babel/generator@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.4.tgz#4a41377d8566ec18f807f42962a7f3551de83d1c"
+  integrity sha512-esuS49Cga3HcThFNebGhlgsrVLkvhqvYDTzgjfFFlHJcIfLe5jFmRRfCQ1KuBfc4Jrtn3ndLgKWAKjBE+IraYQ==
+  dependencies:
+    "@babel/types" "^7.23.4"
+    "@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"
@@ -197,6 +236,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.22.15":
+  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-compilation-targets@^7.22.5", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.22.9":
   version "7.22.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.9.tgz#f9d0a7aaaa7cd32a3f31c9316a69f5a9bcacb892"
@@ -287,6 +337,11 @@
   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-environment-visitor@^7.22.20":
+  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-environment-visitor@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
@@ -315,6 +370,14 @@
     "@babel/template" "^7.22.5"
     "@babel/types" "^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"
@@ -350,6 +413,13 @@
   dependencies:
     "@babel/types" "^7.21.4"
 
+"@babel/helper-module-imports@^7.22.15":
+  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-imports@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c"
@@ -396,6 +466,17 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     "@babel/helper-validator-identifier" "^7.22.5"
 
+"@babel/helper-module-transforms@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
+  integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
+  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"
@@ -529,11 +610,21 @@
   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-string-parser@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
+  integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
+
 "@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-identifier@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
@@ -544,6 +635,11 @@
   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-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-validator-option@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac"
@@ -595,6 +691,15 @@
     "@babel/traverse" "^7.22.6"
     "@babel/types" "^7.22.5"
 
+"@babel/helpers@^7.23.2":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.4.tgz#7d2cfb969aa43222032193accd7329851facf3c1"
+  integrity sha512-HfcMizYz10cr3h29VqyfGL6ZWIjTwWfvYBMsBVGwpcbhNGe3wQ1ZXZRPzZoAHhd9OqHadHqjQ89iVKINXnbzuw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.4"
+    "@babel/types" "^7.23.4"
+
 "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@@ -613,6 +718,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
+  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
+  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.4", "@babel/parser@^7.7.0", "@babel/parser@~7.21.2":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
@@ -623,6 +737,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.4.tgz#a770e98fd785c231af9d93f6459d36770993fb32"
   integrity sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==
 
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.3", "@babel/parser@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.4.tgz#409fbe690c333bb70187e2de4021e1e47a026661"
+  integrity sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==
+
 "@babel/parser@^7.22.5", "@babel/parser@^7.22.7":
   version "7.22.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.7.tgz#df8cf085ce92ddbdbf668a7f186ce848c9036cae"
@@ -2037,6 +2156,15 @@
     "@babel/parser" "^7.21.9"
     "@babel/types" "^7.21.5"
 
+"@babel/template@^7.22.15":
+  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/template@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -2094,6 +2222,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.23.3", "@babel/traverse@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.4.tgz#c2790f7edf106d059a0098770fe70801417f3f85"
+  integrity sha512-IYM8wSUwunWTB6tFC2dkKZhxbIjHoWemdK+3f8/wq8aKhbUscxD5MX72ubd90fxvFknaLPeGw5ycU84V1obHJg==
+  dependencies:
+    "@babel/code-frame" "^7.23.4"
+    "@babel/generator" "^7.23.4"
+    "@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.4"
+    "@babel/types" "^7.23.4"
+    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.21.4", "@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":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.4.tgz#2d5d6bb7908699b3b416409ffd3b5daa25b030d4"
@@ -2112,6 +2256,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.22.15", "@babel/types@^7.23.0", "@babel/types@^7.23.3", "@babel/types@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.4.tgz#7206a1810fc512a7f7f7d4dace4cb4c1c9dbfb8e"
+  integrity sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.5.tgz#cd93eeaab025880a3a47ec881f4b096a5b786fbe"
@@ -2131,21 +2284,22 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@chanzuckerberg/axe-storybook-testing@^7.1.2":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@chanzuckerberg/axe-storybook-testing/-/axe-storybook-testing-7.1.2.tgz#2c5bd8cc9c9ef15c770348bdd001403f44f195bb"
-  integrity sha512-eHJyyBv4xnDd5CmURRBXpNpM1DrxVPlVArM1U5VJDvUsRAlcGZmJnW3yKYY3wDsLB4y2jQ+6gigKDl4WMyffDw==
+"@chanzuckerberg/axe-storybook-testing@^7.1.3":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@chanzuckerberg/axe-storybook-testing/-/axe-storybook-testing-7.1.3.tgz#da239a4a9eab3f3db111b2d694203a1a3770abfa"
+  integrity sha512-hZRdY7bnoCopGc+e35mVPZcWZJ5RSHetPouO4e3QY/FvLk8BMRoiijAFD7iTIydTwISyad8qKDmDfaslNMB+Iw==
   dependencies:
+    "@playwright/browser-chromium" "^1.39.0"
     http-server "^14.1.1"
     indent-string "^4.0.0"
     lodash "^4.17.21"
     mocha "^10.2.0"
     p-timeout "^4.1.0"
-    playwright "^1.36.2"
+    playwright "^1.39.0"
     portfinder "^1.0.32"
     ts-dedent "^2.2.0"
     yargs "^17.7.2"
-    zod "^3.21.4"
+    zod "^3.22.4"
 
 "@chanzuckerberg/story-utils@^4.0.0":
   version "4.0.0"
@@ -2707,18 +2861,6 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
 
-"@jest/console@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.1.3.tgz#2030606ec03a18c31803b8a36382762e447655df"
-  integrity sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==
-  dependencies:
-    "@jest/types" "^28.1.3"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    jest-message-util "^28.1.3"
-    jest-util "^28.1.3"
-    slash "^3.0.0"
-
 "@jest/console@^29.5.0":
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.5.0.tgz#593a6c5c0d3f75689835f1b3b4688c4f8544cb57"
@@ -2743,40 +2885,17 @@
     jest-util "^29.6.2"
     slash "^3.0.0"
 
-"@jest/core@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-28.1.3.tgz#0ebf2bd39840f1233cd5f2d1e6fc8b71bd5a1ac7"
-  integrity sha512-CIKBrlaKOzA7YG19BEqCw3SLIsEwjZkeJzf5bdooVnW4bH5cktqe3JX+G2YV1aK5vP8N9na1IGWFzYaTp6k6NA==
+"@jest/console@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.7.0.tgz#cd4822dbdb84529265c5a2bdb529a3c9cc950ffc"
+  integrity sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==
   dependencies:
-    "@jest/console" "^28.1.3"
-    "@jest/reporters" "^28.1.3"
-    "@jest/test-result" "^28.1.3"
-    "@jest/transform" "^28.1.3"
-    "@jest/types" "^28.1.3"
+    "@jest/types" "^29.6.3"
     "@types/node" "*"
-    ansi-escapes "^4.2.1"
     chalk "^4.0.0"
-    ci-info "^3.2.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.9"
-    jest-changed-files "^28.1.3"
-    jest-config "^28.1.3"
-    jest-haste-map "^28.1.3"
-    jest-message-util "^28.1.3"
-    jest-regex-util "^28.0.2"
-    jest-resolve "^28.1.3"
-    jest-resolve-dependencies "^28.1.3"
-    jest-runner "^28.1.3"
-    jest-runtime "^28.1.3"
-    jest-snapshot "^28.1.3"
-    jest-util "^28.1.3"
-    jest-validate "^28.1.3"
-    jest-watcher "^28.1.3"
-    micromatch "^4.0.4"
-    pretty-format "^28.1.3"
-    rimraf "^3.0.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
     slash "^3.0.0"
-    strip-ansi "^6.0.0"
 
 "@jest/core@^29.6.2":
   version "29.6.2"
@@ -2812,6 +2931,40 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
+"@jest/core@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.7.0.tgz#b6cccc239f30ff36609658c5a5e2291757ce448f"
+  integrity sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==
+  dependencies:
+    "@jest/console" "^29.7.0"
+    "@jest/reporters" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^29.7.0"
+    jest-config "^29.7.0"
+    jest-haste-map "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-regex-util "^29.6.3"
+    jest-resolve "^29.7.0"
+    jest-resolve-dependencies "^29.7.0"
+    jest-runner "^29.7.0"
+    jest-runtime "^29.7.0"
+    jest-snapshot "^29.7.0"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    jest-watcher "^29.7.0"
+    micromatch "^4.0.4"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
 "@jest/create-cache-key-function@^27.4.2":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-27.5.1.tgz#7448fae15602ea95c828f5eceed35c202a820b31"
@@ -2819,16 +2972,6 @@
   dependencies:
     "@jest/types" "^27.5.1"
 
-"@jest/environment@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-28.1.3.tgz#abed43a6b040a4c24fdcb69eab1f97589b2d663e"
-  integrity sha512-1bf40cMFTEkKyEf585R9Iz1WayDjHoHqvts0XFYEqyKM3cFWDpeMoqKKTAF9LSYQModPUlh8FKptoM2YcMWAXA==
-  dependencies:
-    "@jest/fake-timers" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    "@types/node" "*"
-    jest-mock "^28.1.3"
-
 "@jest/environment@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.6.2.tgz#794c0f769d85e7553439d107d3f43186dc6874a9"
@@ -2839,12 +2982,15 @@
     "@types/node" "*"
     jest-mock "^29.6.2"
 
-"@jest/expect-utils@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-28.1.3.tgz#58561ce5db7cd253a7edddbc051fb39dda50f525"
-  integrity sha512-wvbi9LUrHJLn3NlDW6wF2hvIMtd4JUl2QNVrjq+IBSHirgfrR3o9RnVtxzdEGO2n9JyIWwHnLfby5KzqBGg2YA==
+"@jest/environment@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.7.0.tgz#24d61f54ff1f786f3cd4073b4b94416383baf2a7"
+  integrity sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==
   dependencies:
-    jest-get-type "^28.0.2"
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    jest-mock "^29.7.0"
 
 "@jest/expect-utils@^29.5.0":
   version "29.5.0"
@@ -2860,13 +3006,12 @@
   dependencies:
     jest-get-type "^29.4.3"
 
-"@jest/expect@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-28.1.3.tgz#9ac57e1d4491baca550f6bdbd232487177ad6a72"
-  integrity sha512-lzc8CpUbSoE4dqT0U+g1qODQjBRHPpCPXissXD4mS9+sWQdmmpeJ9zSH1rS1HEkrsMN0fb7nKrJ9giAR1d3wBw==
+"@jest/expect-utils@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.7.0.tgz#023efe5d26a8a70f21677d0a1afc0f0a44e3a1c6"
+  integrity sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==
   dependencies:
-    expect "^28.1.3"
-    jest-snapshot "^28.1.3"
+    jest-get-type "^29.6.3"
 
 "@jest/expect@^29.6.2":
   version "29.6.2"
@@ -2876,17 +3021,13 @@
     expect "^29.6.2"
     jest-snapshot "^29.6.2"
 
-"@jest/fake-timers@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-28.1.3.tgz#230255b3ad0a3d4978f1d06f70685baea91c640e"
-  integrity sha512-D/wOkL2POHv52h+ok5Oj/1gOG9HSywdoPtFsRCUmlCILXNn5eIWmcnd3DIiWlJnpGvQtmajqBP95Ei0EimxfLw==
+"@jest/expect@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.7.0.tgz#76a3edb0cb753b70dfbfe23283510d3d45432bf2"
+  integrity sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==
   dependencies:
-    "@jest/types" "^28.1.3"
-    "@sinonjs/fake-timers" "^9.1.2"
-    "@types/node" "*"
-    jest-message-util "^28.1.3"
-    jest-mock "^28.1.3"
-    jest-util "^28.1.3"
+    expect "^29.7.0"
+    jest-snapshot "^29.7.0"
 
 "@jest/fake-timers@^29.6.2":
   version "29.6.2"
@@ -2900,14 +3041,17 @@
     jest-mock "^29.6.2"
     jest-util "^29.6.2"
 
-"@jest/globals@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-28.1.3.tgz#a601d78ddc5fdef542728309894895b4a42dc333"
-  integrity sha512-XFU4P4phyryCXu1pbcqMO0GSQcYe1IsalYCDzRNyhetyeyxMcIxa11qPNDpVNLeretItNqEmYYQn1UYz/5x1NA==
+"@jest/fake-timers@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.7.0.tgz#fd91bf1fffb16d7d0d24a426ab1a47a49881a565"
+  integrity sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==
   dependencies:
-    "@jest/environment" "^28.1.3"
-    "@jest/expect" "^28.1.3"
-    "@jest/types" "^28.1.3"
+    "@jest/types" "^29.6.3"
+    "@sinonjs/fake-timers" "^10.0.2"
+    "@types/node" "*"
+    jest-message-util "^29.7.0"
+    jest-mock "^29.7.0"
+    jest-util "^29.7.0"
 
 "@jest/globals@^29.6.2":
   version "29.6.2"
@@ -2919,17 +3063,27 @@
     "@jest/types" "^29.6.1"
     jest-mock "^29.6.2"
 
-"@jest/reporters@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-28.1.3.tgz#9adf6d265edafc5fc4a434cfb31e2df5a67a369a"
-  integrity sha512-JuAy7wkxQZVNU/V6g9xKzCGC5LVXx9FDcABKsSXp5MiKPEE2144a/vXTEDoyzjUpZKfVwp08Wqg5A4WfTMAzjg==
+"@jest/globals@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.7.0.tgz#8d9290f9ec47ff772607fa864ca1d5a2efae1d4d"
+  integrity sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/expect" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    jest-mock "^29.7.0"
+
+"@jest/reporters@^29.6.2":
+  version "29.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.6.2.tgz#524afe1d76da33d31309c2c4a2c8062d0c48780a"
+  integrity sha512-sWtijrvIav8LgfJZlrGCdN0nP2EWbakglJY49J1Y5QihcQLfy7ovyxxjJBRXMNltgt4uPtEcFmIMbVshEDfFWw==
   dependencies:
     "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^28.1.3"
-    "@jest/test-result" "^28.1.3"
-    "@jest/transform" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    "@jridgewell/trace-mapping" "^0.3.13"
+    "@jest/console" "^29.6.2"
+    "@jest/test-result" "^29.6.2"
+    "@jest/transform" "^29.6.2"
+    "@jest/types" "^29.6.1"
+    "@jridgewell/trace-mapping" "^0.3.18"
     "@types/node" "*"
     chalk "^4.0.0"
     collect-v8-coverage "^1.0.0"
@@ -2941,25 +3095,24 @@
     istanbul-lib-report "^3.0.0"
     istanbul-lib-source-maps "^4.0.0"
     istanbul-reports "^3.1.3"
-    jest-message-util "^28.1.3"
-    jest-util "^28.1.3"
-    jest-worker "^28.1.3"
+    jest-message-util "^29.6.2"
+    jest-util "^29.6.2"
+    jest-worker "^29.6.2"
     slash "^3.0.0"
     string-length "^4.0.1"
     strip-ansi "^6.0.0"
-    terminal-link "^2.0.0"
     v8-to-istanbul "^9.0.1"
 
-"@jest/reporters@^29.6.2":
-  version "29.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.6.2.tgz#524afe1d76da33d31309c2c4a2c8062d0c48780a"
-  integrity sha512-sWtijrvIav8LgfJZlrGCdN0nP2EWbakglJY49J1Y5QihcQLfy7ovyxxjJBRXMNltgt4uPtEcFmIMbVshEDfFWw==
+"@jest/reporters@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.7.0.tgz#04b262ecb3b8faa83b0b3d321623972393e8f4c7"
+  integrity sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==
   dependencies:
     "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^29.6.2"
-    "@jest/test-result" "^29.6.2"
-    "@jest/transform" "^29.6.2"
-    "@jest/types" "^29.6.1"
+    "@jest/console" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
     "@jridgewell/trace-mapping" "^0.3.18"
     "@types/node" "*"
     chalk "^4.0.0"
@@ -2968,25 +3121,18 @@
     glob "^7.1.3"
     graceful-fs "^4.2.9"
     istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-instrument "^6.0.0"
     istanbul-lib-report "^3.0.0"
     istanbul-lib-source-maps "^4.0.0"
     istanbul-reports "^3.1.3"
-    jest-message-util "^29.6.2"
-    jest-util "^29.6.2"
-    jest-worker "^29.6.2"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+    jest-worker "^29.7.0"
     slash "^3.0.0"
     string-length "^4.0.1"
     strip-ansi "^6.0.0"
     v8-to-istanbul "^9.0.1"
 
-"@jest/schemas@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.1.3.tgz#ad8b86a66f11f33619e3d7e1dcddd7f2d40ff905"
-  integrity sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==
-  dependencies:
-    "@sinclair/typebox" "^0.24.1"
-
 "@jest/schemas@^29.4.3":
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.4.3.tgz#39cf1b8469afc40b6f5a2baaa146e332c4151788"
@@ -3001,14 +3147,12 @@
   dependencies:
     "@sinclair/typebox" "^0.27.8"
 
-"@jest/source-map@^28.1.2":
-  version "28.1.2"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-28.1.2.tgz#7fe832b172b497d6663cdff6c13b0a920e139e24"
-  integrity sha512-cV8Lx3BeStJb8ipPHnqVw/IM2VCMWO3crWZzYodSIkxXnRcXJipCdx1JCK0K5MsJJouZQTH73mzf4vgxRaH9ww==
+"@jest/schemas@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
+  integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.13"
-    callsites "^3.0.0"
-    graceful-fs "^4.2.9"
+    "@sinclair/typebox" "^0.27.8"
 
 "@jest/source-map@^29.6.0":
   version "29.6.0"
@@ -3019,15 +3163,14 @@
     callsites "^3.0.0"
     graceful-fs "^4.2.9"
 
-"@jest/test-result@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.1.3.tgz#5eae945fd9f4b8fcfce74d239e6f725b6bf076c5"
-  integrity sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==
+"@jest/source-map@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.6.3.tgz#d90ba772095cf37a34a5eb9413f1b562a08554c4"
+  integrity sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==
   dependencies:
-    "@jest/console" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    collect-v8-coverage "^1.0.0"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
 
 "@jest/test-result@^29.5.0":
   version "29.5.0"
@@ -3049,15 +3192,15 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
-"@jest/test-sequencer@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-28.1.3.tgz#9d0c283d906ac599c74bde464bc0d7e6a82886c3"
-  integrity sha512-NIMPEqqa59MWnDi1kvXXpYbqsfQmSJsIbnd85mdVGkiDfQ9WQQTXOLsvISUfonmnBT+w85WEgneCigEEdHDFxw==
+"@jest/test-result@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.7.0.tgz#8db9a80aa1a097bb2262572686734baed9b1657c"
+  integrity sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==
   dependencies:
-    "@jest/test-result" "^28.1.3"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.3"
-    slash "^3.0.0"
+    "@jest/console" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
 
 "@jest/test-sequencer@^29.6.2":
   version "29.6.2"
@@ -3069,26 +3212,15 @@
     jest-haste-map "^29.6.2"
     slash "^3.0.0"
 
-"@jest/transform@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-28.1.3.tgz#59d8098e50ab07950e0f2fc0fc7ec462371281b0"
-  integrity sha512-u5dT5di+oFI6hfcLOHGTAfmUxFRrjK+vnaP0kkVow9Md/M7V/MxqQMOz/VV25UZO8pzeA9PjfTpOu6BDuwSPQA==
+"@jest/test-sequencer@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.7.0.tgz#6cef977ce1d39834a3aea887a1726628a6f072ce"
+  integrity sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==
   dependencies:
-    "@babel/core" "^7.11.6"
-    "@jest/types" "^28.1.3"
-    "@jridgewell/trace-mapping" "^0.3.13"
-    babel-plugin-istanbul "^6.1.1"
-    chalk "^4.0.0"
-    convert-source-map "^1.4.0"
-    fast-json-stable-stringify "^2.0.0"
+    "@jest/test-result" "^29.7.0"
     graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.3"
-    jest-regex-util "^28.0.2"
-    jest-util "^28.1.3"
-    micromatch "^4.0.4"
-    pirates "^4.0.4"
+    jest-haste-map "^29.7.0"
     slash "^3.0.0"
-    write-file-atomic "^4.0.1"
 
 "@jest/transform@^29.3.1", "@jest/transform@^29.5.0":
   version "29.5.0"
@@ -3132,6 +3264,27 @@
     slash "^3.0.0"
     write-file-atomic "^4.0.2"
 
+"@jest/transform@^29.7.0":
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.7.0.tgz#df2dd9c346c7d7768b8a06639994640c642e284c"
+  integrity sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^29.6.3"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^2.0.0"
+    fast-json-stable-stringify "^2.1.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    jest-regex-util "^29.6.3"
+    jest-util "^29.7.0"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.2"
+
 "@jest/types@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80"
@@ -3143,18 +3296,6 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
-"@jest/types@^28.1.3":
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.3.tgz#b05de80996ff12512bc5ceb1d208285a7d11748b"
-  integrity sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==
-  dependencies:
-    "@jest/schemas" "^28.1.3"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^3.0.0"
-    "@types/node" "*"
-    "@types/yargs" "^17.0.8"
-    chalk "^4.0.0"
-
 "@jest/types@^29.5.0":
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.5.0.tgz#f59ef9b031ced83047c67032700d8c807d6e1593"
@@ -3179,6 +3320,18 @@
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
+"@jest/types@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.3.tgz#1131f8cf634e7e84c5e77bab12f052af585fba59"
+  integrity sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
@@ -3227,7 +3380,7 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.12", "@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==
@@ -3910,6 +4063,13 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@playwright/browser-chromium@^1.39.0":
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/@playwright/browser-chromium/-/browser-chromium-1.40.0.tgz#459266c181d621d589aed125e4f86dd3cab80a22"
+  integrity sha512-+MxALUvUcUx8NEKSv2fXfkXrnBe9qcKPAqXjQsLu52gYhIxbF/C63fedLbZsWJU5hnmxIVWVDHMszq2cVl55mw==
+  dependencies:
+    playwright-core "1.40.0"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.5":
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"
@@ -4277,11 +4437,6 @@
   resolved "https://registry.yarnpkg.com/@sigstore/protobuf-specs/-/protobuf-specs-0.1.0.tgz#957cb64ea2f5ce527cc9cf02a096baeb0d2b99b4"
   integrity sha512-a31EnjuIDSX8IXBUib3cYLDRlPMU36AWX4xS8ysLaNu4ZzUesDiPt83pgrW2X1YLMe5L2HbDyaKK5BrL4cNKaQ==
 
-"@sinclair/typebox@^0.24.1":
-  version "0.24.51"
-  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
-  integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==
-
 "@sinclair/typebox@^0.25.16":
   version "0.25.24"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
@@ -4297,13 +4452,6 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
   integrity sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==
 
-"@sinonjs/commons@^1.7.0":
-  version "1.8.6"
-  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.6.tgz#80c516a4dc264c2a69115e7578d62581ff455ed9"
-  integrity sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==
-  dependencies:
-    type-detect "4.0.8"
-
 "@sinonjs/commons@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-3.0.0.tgz#beb434fe875d965265e04722ccfc21df7f755d72"
@@ -4318,13 +4466,6 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
-"@sinonjs/fake-timers@^9.1.2":
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-9.1.2.tgz#4eaab737fab77332ab132d396a3c0d364bd0ea8c"
-  integrity sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==
-  dependencies:
-    "@sinonjs/commons" "^1.7.0"
-
 "@snyk/dep-graph@^2.3.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@snyk/dep-graph/-/dep-graph-2.6.0.tgz#fde01bb7837798fb2a4f8168424a1ecf5de09177"
@@ -4371,38 +4512,38 @@
     lodash.union "^4.6.0"
     lodash.values "^4.3.0"
 
-"@storybook/addon-a11y@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-7.4.5.tgz#112fc0269bea3a12a84fbbde30e2d741ece37998"
-  integrity sha512-7W8fjCdmwX4zlDM4jpzVKNgelWSqbYr3cH834pqOFAkyiyNVIsNRPQBgSwkkljgz0uAsz8nFCRFK3Oo1btl6Yg==
-  dependencies:
-    "@storybook/addon-highlight" "7.4.5"
-    "@storybook/channels" "7.4.5"
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+"@storybook/addon-a11y@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-7.5.3.tgz#6971092942bb4c5217d3fbb12a30acaea5e1eddd"
+  integrity sha512-Fs6BA4P0xBfsevo8H5E2IhMLLR3Q+FBRWHWAxGzhlkpNeH7ZZd87L5GrrLUmhzbCQvlHdWCVujWkwb21KX7Vsw==
+  dependencies:
+    "@storybook/addon-highlight" "7.5.3"
+    "@storybook/channels" "7.5.3"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/theming" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/theming" "7.5.3"
+    "@storybook/types" "7.5.3"
     axe-core "^4.2.0"
     lodash "^4.17.21"
     react-resize-detector "^7.1.2"
 
-"@storybook/addon-actions@7.4.5", "@storybook/addon-actions@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.4.5.tgz#3a3dbe4866ccb796797bf5c0838e493bb0989222"
-  integrity sha512-FkjJWmPN/+duLSkRwfa2bwlwjKfY6yCXYn7CRzn3rb64B8f50NB79zAgVLHjkJh9l6T3DIlWtol6vqPHj1aRpw==
+"@storybook/addon-actions@7.5.3", "@storybook/addon-actions@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.5.3.tgz#e0d0d819488d1d19918b23469b3ea6610fee5f07"
+  integrity sha512-v3yL6Eq/jCiXfA24JjRdbEQUuorms6tmrywaKcd1tAy4Ftgof0KHB4tTcTyiajrI5bh6PVJoRBkE8IDqmNAHkA==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/theming" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/theming" "7.5.3"
+    "@storybook/types" "7.5.3"
     dequal "^2.0.2"
     lodash "^4.17.21"
     polished "^4.2.2"
@@ -4412,170 +4553,170 @@
     ts-dedent "^2.0.0"
     uuid "^9.0.0"
 
-"@storybook/addon-backgrounds@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-7.4.5.tgz#5516fdc0cef142f008ca694bac10d5ba5b3ee948"
-  integrity sha512-fTq9E1WrYH/9hwDemFVLVcaI2iSSuwWnvY/8tqGrY9xhQF5dIpeHf+z8+HWXpau7e6Z0/WiYR+1vwAcIKt95LQ==
+"@storybook/addon-backgrounds@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-7.5.3.tgz#a6aa9df791220cff6290e7f93e04c546063f5407"
+  integrity sha512-UCOVd4UNIL5FRiwi9nyiWFocn/7ewwS6bIWnq66AaHg/sv92YwsPmgQJn0DMBGDOvUAWpiHdVsZNOTX6nvw4gA==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/theming" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/theming" "7.5.3"
+    "@storybook/types" "7.5.3"
     memoizerific "^1.11.3"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-controls@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-7.4.5.tgz#a3dec3826bc89b5bf71202951f1c3d5ee9438943"
-  integrity sha512-Mxs56jt44HIbZ4gJa0AII1U8GqEGFsvcM5Iob0ETNpxCW5Kj5iHly/4Ws0RFWPH/krrQKaLpWXaUxKmbtEzhJA==
-  dependencies:
-    "@storybook/blocks" "7.4.5"
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-common" "7.4.5"
-    "@storybook/core-events" "7.4.5"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/theming" "7.4.5"
-    "@storybook/types" "7.4.5"
+"@storybook/addon-controls@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-7.5.3.tgz#03ce5a31603b360fe906cefb3fe4945ef7188e62"
+  integrity sha512-KEuU4X5Xr6cJI9xrzOUVGEmUf1iHPfK7cj0GACKv0GElsdIsQryv+OZ7gRnvmNax/e2hm2t9cJcFxB24/p6rVg==
+  dependencies:
+    "@storybook/blocks" "7.5.3"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/core-events" "7.5.3"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/theming" "7.5.3"
+    "@storybook/types" "7.5.3"
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-7.4.5.tgz#f412d77a9a36c719bd690deac76316dc6cb5867d"
-  integrity sha512-KjFVeq8oL7ZC1gsk8iY3Nn0RrHHUpczmOTCd8FeVNmKD4vq+dkPb/8bJLy+jArmIZ8vRhknpTh6kp1BqB7qHGQ==
+"@storybook/addon-docs@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-7.5.3.tgz#36c28c9a54b28e3b4b1450e821d65e07be6da45b"
+  integrity sha512-JVQ6iCXKESij/SbE4Wq47dkSSgBRulvA8SUf8NWL5m9qpiHrg0lPSERHfoTLiB5uC/JwF0OKIlhxoWl+zCmtYg==
   dependencies:
     "@jest/transform" "^29.3.1"
     "@mdx-js/react" "^2.1.5"
-    "@storybook/blocks" "7.4.5"
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/csf-plugin" "7.4.5"
-    "@storybook/csf-tools" "7.4.5"
+    "@storybook/blocks" "7.5.3"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/csf-plugin" "7.5.3"
+    "@storybook/csf-tools" "7.5.3"
     "@storybook/global" "^5.0.0"
     "@storybook/mdx2-csf" "^1.0.0"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/postinstall" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/react-dom-shim" "7.4.5"
-    "@storybook/theming" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/postinstall" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/react-dom-shim" "7.5.3"
+    "@storybook/theming" "7.5.3"
+    "@storybook/types" "7.5.3"
     fs-extra "^11.1.0"
     remark-external-links "^8.0.0"
     remark-slug "^6.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-essentials@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-7.4.5.tgz#b580713a015dfe6317c211d16ba10a6db7026f6f"
-  integrity sha512-H7zZWJXZP0UU2kXfo9zlQfjIKHuuqYBK7PZ2/SL5y08mTrbtt1BfqYScz3xRvHocaFcsBWCXdy8jJULT4KFUpw==
-  dependencies:
-    "@storybook/addon-actions" "7.4.5"
-    "@storybook/addon-backgrounds" "7.4.5"
-    "@storybook/addon-controls" "7.4.5"
-    "@storybook/addon-docs" "7.4.5"
-    "@storybook/addon-highlight" "7.4.5"
-    "@storybook/addon-measure" "7.4.5"
-    "@storybook/addon-outline" "7.4.5"
-    "@storybook/addon-toolbars" "7.4.5"
-    "@storybook/addon-viewport" "7.4.5"
-    "@storybook/core-common" "7.4.5"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
+"@storybook/addon-essentials@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-7.5.3.tgz#e6e3ea266181b42e15b4c57fc303adc238c102a4"
+  integrity sha512-PYj6swEI4nEzIbOTyHJB8u3K8ABYKoaW8XB5emMwsnrzB/TN7auHVhze2bQ/+ax5wyPKZpArPjxbWlSHtSws+A==
+  dependencies:
+    "@storybook/addon-actions" "7.5.3"
+    "@storybook/addon-backgrounds" "7.5.3"
+    "@storybook/addon-controls" "7.5.3"
+    "@storybook/addon-docs" "7.5.3"
+    "@storybook/addon-highlight" "7.5.3"
+    "@storybook/addon-measure" "7.5.3"
+    "@storybook/addon-outline" "7.5.3"
+    "@storybook/addon-toolbars" "7.5.3"
+    "@storybook/addon-viewport" "7.5.3"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-highlight@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-7.4.5.tgz#1fd45ff07da4c8a3d5c2595310cf67e49c2545cd"
-  integrity sha512-6Ru411+Iis4m2weKb8kB1eEssLvCHwFqAf4fjcOC//O5Vaf5+beHYZJUm/rzD0k/oUHfLCBwDBSBY5TLRegkdA==
+"@storybook/addon-highlight@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-7.5.3.tgz#ff1041aa1e9d76100ce6fb0b11e0d30078f858f7"
+  integrity sha512-jb+aNRhj+tFK7EqqTlNCjGkTrkWqWHGdD1ubgnj29v8XhRuCR9YboPS+306KYwBEkuF4kNCHZofLiEBPf6nCJg==
   dependencies:
-    "@storybook/core-events" "7.4.5"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/preview-api" "7.4.5"
+    "@storybook/preview-api" "7.5.3"
 
-"@storybook/addon-interactions@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-7.4.5.tgz#9a8963ceb20d3867b3d8fe6fda70b13da2bc8a1d"
-  integrity sha512-KDdV/THxj38VsuOevrUefev0rZPhzqUXCgrw1Jc2PsJGidHf9d9nnB7wbA9ZFYsxTz90M/Vk5sm7i1QkMmsquA==
+"@storybook/addon-interactions@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-7.5.3.tgz#5aef96b3fa24aaafb88c0fc501f6a7e8cfa2a342"
+  integrity sha512-gD3cU8sYSM/mdbA9ooYIb4c689JkDsJbZ17vfYJ5RjNkSmqKehybdpZOfkj27sVIyFtmscSi75t+pzK4Pv4rZw==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-common" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/instrumenter" "7.4.5"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/theming" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/instrumenter" "7.5.3"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/theming" "7.5.3"
+    "@storybook/types" "7.5.3"
     jest-mock "^27.0.6"
     polished "^4.2.2"
     ts-dedent "^2.2.0"
 
-"@storybook/addon-links@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.4.5.tgz#8f1a02c3839964ec73f4140431f49d98d743c3bd"
-  integrity sha512-eKczq3U5KfPLaxMUzzVQQrGVtzDshUmrSEEuWKf9ZbK3mh5yVuagIBb88edgUX58vZ3TJMvqQzq1+BtUoPHQ6Q==
+"@storybook/addon-links@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.5.3.tgz#4ed55c932db0b25197a16c30723307f6d20d7141"
+  integrity sha512-NcigW0HX8AllZ/KJ4u1KMiK30QvjqtC+zApI6Yc3tTaa6+BldbLv06fEgHgMY0yC8R+Ly9mUN7S1HiU7LQ7Qxg==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/csf" "^0.1.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/router" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/router" "7.5.3"
+    "@storybook/types" "7.5.3"
     prop-types "^15.7.2"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-7.4.5.tgz#957c30ccab2ca47064f84cd8f40a016446f76de9"
-  integrity sha512-FQGZniTH67nC1YPR4ep0p+isgxwLaNAmIAyCZWXPRTkZssIrnXVwNgi0A2QkHdxZvxj8yXGFTOVXLWEPT9YvFQ==
+"@storybook/addon-measure@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-7.5.3.tgz#9cfc34d88807afba6bc36990aef26be8ca8f8567"
+  integrity sha512-fun9BqUTGXgcMpcbX9wUowGDkjCL8oKasZbjp/MvGM3vPTM6HQdwzHTLJGPBnmJ1xK92NhwFRs0BrQX6uF1yrg==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/types" "7.5.3"
     tiny-invariant "^1.3.1"
 
-"@storybook/addon-outline@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-7.4.5.tgz#0f7a83921c7ab3e17f560364989b6ffa42bc715e"
-  integrity sha512-eOH9BZzpehUz5FXD98OLnWgzmBFMvEB2kFfw5JiO7IRx7Fan80fx/WDQuMSNDOgLBCTTvsZ4TBMMXZHpw91WAw==
+"@storybook/addon-outline@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-7.5.3.tgz#8b42758349ab07b5d39bf7e1b9cb2f83e173824a"
+  integrity sha512-c9vCi1SCGrtWr8qaOu/1GNWlrlrpl2lg4F9r+xtYf/KopenI3jSMz0YeTfmepZGAl+6Yc2Ywhm60jgpQ6SKciA==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/types" "7.5.3"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-storyshots@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-storyshots/-/addon-storyshots-7.4.5.tgz#6f85f3ebcfd773d021bfef8338d622f27c5e1e78"
-  integrity sha512-bCBL2bC1Wr7k1Wbp7mRcApkLKeUOaGWv91MK3/fBbU4H1BGysGxn4LdtcEaZXPgYJO5AlgytQQ4//Blek3f/sQ==
+"@storybook/addon-storyshots@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-storyshots/-/addon-storyshots-7.5.3.tgz#e41382bc63bddaf0a9d21d18bfaf49199761c51f"
+  integrity sha512-PcULWlwZSdNonH8QKGWsCWc1Ve8PB+h4LDb3FcdMCsAyltAqf5HK0AiWbQex0nGQyf//+LGcMAW+fOR3ShZHKQ==
   dependencies:
     "@jest/transform" "^29.3.1"
     "@storybook/babel-plugin-require-context-hook" "1.0.1"
-    "@storybook/client-api" "7.4.5"
-    "@storybook/core-common" "7.4.5"
-    "@storybook/core-webpack" "7.4.5"
+    "@storybook/client-api" "7.5.3"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/core-webpack" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/types" "7.5.3"
     "@types/jest-specific-snapshot" "^0.5.6"
     glob "^10.0.0"
     jest-specific-snapshot "^8.0.0"
@@ -4585,62 +4726,62 @@
     read-pkg-up "^7.0.1"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-toolbars@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-7.4.5.tgz#366cd01ca0a306453de57090733831ff111d705b"
-  integrity sha512-PZlwUTIdQ18de3zNb+627VSF4UrCGIXDdikyO9O5j2Cd0xfr5uhS6tgQ+3AT0DfUj0UIkKxilwcAt+agpNyicA==
-  dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/theming" "7.4.5"
-
-"@storybook/addon-viewport@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-7.4.5.tgz#5bb8549c63031ce8378e8524d1ae2c50ec656d6a"
-  integrity sha512-SBLnUMIztVrqJ0fRCsVg9KZ29APLIxqAvTsYHF3twy5KB2naeCFuX3K9LxSH7vbROI6zHEfnPduz/Ykyvu9yUg==
-  dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+"@storybook/addon-toolbars@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-7.5.3.tgz#754e818935f08f05d4e06aefafe40a1080c4d575"
+  integrity sha512-KdLr4sGMJzhtjNTNE2ocfu58yOHHUyZ/cI3BTp7a0gq9YbUpHmC3XTNr26/yOYYrdjkiMD26XusJUjXe+/V2xw==
+  dependencies:
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/theming" "7.5.3"
+
+"@storybook/addon-viewport@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-7.5.3.tgz#05fb97114d0186977e25a5a448dea5fba66042ce"
+  integrity sha512-gT2XX0NNBrzSs1nrxadl6LnvcwgN7z2R0LzTK8/hxvx4D0EnXrV3feXLzjewr8ZYjzfEeSpO+W+bQTVNm3fNsg==
+  dependencies:
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/theming" "7.4.5"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/theming" "7.5.3"
     memoizerific "^1.11.3"
     prop-types "^15.7.2"
 
-"@storybook/addons@7.4.5", "@storybook/addons@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-7.4.5.tgz#d1ac1fc3b5e4681e16b727149593efd53c4b1168"
-  integrity sha512-jmdQf39XhwVi8d0J99qpk51fOAwNhYlCtVctvFWPX4qC1cq1d1pxLmTb5OBV2VHQ11BKwlKLzA7coiOgAQmNRg==
+"@storybook/addons@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-7.5.3.tgz#1a96c290a171ea97b255d9892e86f0e7c3517cd2"
+  integrity sha512-1JDndMZ/Pju4YJ4aXegeF0O6BVT19c+Gu7WOlsD0aHbmAsPK5qH9QvcpR04nby6VrVZYtBOEJhGsWtAytzLVZw==
   dependencies:
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/types" "7.5.3"
 
 "@storybook/babel-plugin-require-context-hook@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@storybook/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.1.tgz#0a4ec9816f6c7296ebc97dd8de3d2b7ae76f2e26"
   integrity sha512-WM4vjgSVi8epvGiYfru7BtC3f0tGwNs7QK3Uc4xQn4t5hHQvISnCqbNrHdDYmNW56Do+bBztE8SwP6NGUvd7ww==
 
-"@storybook/blocks@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.4.5.tgz#bf95768eeb7642bb90c248e1e0617899c8b11b12"
-  integrity sha512-FhAIkCT2HrzJcKsC3mL5+uG3GrbS23mYAT1h3iyPjCliZzxfCCI9UCMUXqYx4Z/FmAGJgpsQQXiBFZuoTHO9aQ==
+"@storybook/blocks@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.5.3.tgz#be754f60a91e95b8c72cbeadf9c5c7e7ab78920f"
+  integrity sha512-Z8yF820v78clQWkwG5OA5qugbQn7rtutq9XCsd03NDB+IEfDaTFQAZG8gs62ZX2ZaXAJsqJSr/mL9oURzXto2A==
   dependencies:
-    "@storybook/channels" "7.4.5"
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/channels" "7.5.3"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/components" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/csf" "^0.1.0"
-    "@storybook/docs-tools" "7.4.5"
+    "@storybook/docs-tools" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/theming" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/manager-api" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/theming" "7.5.3"
+    "@storybook/types" "7.5.3"
     "@types/lodash" "^4.14.167"
     color-convert "^2.0.1"
     dequal "^2.0.2"
@@ -4654,15 +4795,15 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-manager@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-7.4.5.tgz#260925662ebfaba10a27536ded3405d14a00c66c"
-  integrity sha512-Jhql8iZgK9cxDmG9NSTejsj5FptHni2TBa5Sea2Uz1NIBQ0OpzNdUfYVX6TN/PEq3QrWXTrAEKPqsL2qGjOrxw==
+"@storybook/builder-manager@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-7.5.3.tgz#dc667fd6d450988bc33c246686822a87c1b95558"
+  integrity sha512-uf4Vyj8ofHaq94m065SMvFKak1XrrxgI83VZAxc2QjiPcbRwcVOZd+wcKFdZydqqA6FlBDdJrU+k9INA4Qkfcw==
   dependencies:
     "@fal-works/esbuild-plugin-global-externals" "^2.1.2"
-    "@storybook/core-common" "7.4.5"
-    "@storybook/manager" "7.4.5"
-    "@storybook/node-logger" "7.4.5"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/manager" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
     "@types/ejs" "^3.1.1"
     "@types/find-cache-dir" "^3.2.1"
     "@yarnpkg/esbuild-plugin-pnp" "^3.0.0-rc.10"
@@ -4676,30 +4817,22 @@
     process "^0.11.10"
     util "^0.12.4"
 
-"@storybook/builder-webpack5@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-7.4.5.tgz#60ef4a19ea518dfb370e94231f57d61a3b8ad00a"
-  integrity sha512-XSZLZ2kNlZaOJ3i2uZ9vI25cJkmQhmTVHPER+FPKM/yliqsQj7p2P9zYz/Mn0LepUheK1Y+aWWiead1r2DnNMg==
-  dependencies:
-    "@babel/core" "^7.22.9"
-    "@storybook/addons" "7.4.5"
-    "@storybook/channels" "7.4.5"
-    "@storybook/client-api" "7.4.5"
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/components" "7.4.5"
-    "@storybook/core-common" "7.4.5"
-    "@storybook/core-events" "7.4.5"
-    "@storybook/core-webpack" "7.4.5"
-    "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.4.5"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/preview" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/router" "7.4.5"
-    "@storybook/store" "7.4.5"
-    "@storybook/theming" "7.4.5"
-    "@swc/core" "^1.3.49"
-    "@types/node" "^16.0.0"
+"@storybook/builder-webpack5@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-7.5.3.tgz#7f392cae845c9c3c7de6e04045c531f8f70048e1"
+  integrity sha512-a2kHXFT61AV1+OPNTqXCsYk7Wk4XSqjAOQkSxWc1HK+kyMT+lahO4U06slji6XAVuXc/KY+naNUoaOfpB1hKVw==
+  dependencies:
+    "@babel/core" "^7.22.0"
+    "@storybook/channels" "7.5.3"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/core-events" "7.5.3"
+    "@storybook/core-webpack" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/preview" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@swc/core" "^1.3.82"
+    "@types/node" "^18.0.0"
     "@types/semver" "^7.3.4"
     babel-loader "^9.0.0"
     babel-plugin-named-exports-order "^0.0.2"
@@ -4748,35 +4881,35 @@
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.0.5.tgz#b7dbc11e658a5e6a694bd7df2a0514c3b27ba318"
   integrity sha512-WiSPXgOK63jAlDDmbTs1sVXoYe3r/4VjpfwhEcxSPU544YQVARF1ePtiGjlp8HVFhZh1Q7afbVGJ9w96++u98A==
 
-"@storybook/channels@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.4.5.tgz#b90a33ce50bce9c68eef2b3e5b10a38f7c50d6bf"
-  integrity sha512-zWPZn4CxPFXsrrSRQ9JD8GmTeWeFYgr3sTBpe23hnhYookCXVNJ6AcaXogrT9b2ALfbB6MiFDbZIHHTgIgbWpg==
+"@storybook/channels@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.5.3.tgz#cbd178b0778f3484b970d0fd0edd294db6969e0f"
+  integrity sha512-dhWuV2o2lmxH0RKuzND8jxYzvSQTSmpE13P0IT/k8+I1up/rSNYOBQJT6SalakcNWXFAMXguo/8E7ApmnKKcEw==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
     qs "^6.10.0"
     telejson "^7.2.0"
     tiny-invariant "^1.3.1"
 
-"@storybook/cli@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.4.5.tgz#2d21e56f6172ba0a0e162c7d37ded4b07e726d66"
-  integrity sha512-PlTkcHdKCugg3pD1zkBP/oFazcZsr7F3wdEmTvygfH0Cx/sQWg5wXBZCYKmf0ONRK4RKL3LVM8DRpeYiQVEFWg==
+"@storybook/cli@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.5.3.tgz#127ae3bcad169bf8c3eb3e1e6c9d587ad5f57e81"
+  integrity sha512-XysHSnknZTAcTbQ0bQsbfv5J8ifHpOBsmXjk1HCA05E9WGGrn9JrQRCfpDUQJ6O6UWq0bpMqzP8gFLWXFE7hug==
   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.4.5"
-    "@storybook/core-common" "7.4.5"
-    "@storybook/core-events" "7.4.5"
-    "@storybook/core-server" "7.4.5"
-    "@storybook/csf-tools" "7.4.5"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/telemetry" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/codemod" "7.5.3"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/core-events" "7.5.3"
+    "@storybook/core-server" "7.5.3"
+    "@storybook/csf-tools" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/telemetry" "7.5.3"
+    "@storybook/types" "7.5.3"
     "@types/semver" "^7.3.4"
     "@yarnpkg/fslib" "2.10.3"
     "@yarnpkg/libzip" "2.3.0"
@@ -4807,13 +4940,13 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-api@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-7.4.5.tgz#27b7e156fa9d38cc7b73bc9ff1d40914423d0c24"
-  integrity sha512-8gUglsmlGNA0U9Ec/GJDOrqRfSIjm7uJJrq7TrmvfkLTLR1diYpoIljoXyNHU+Nhk/ebUiQkzflqzYKNzbkcYw==
+"@storybook/client-api@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-7.5.3.tgz#f7925ddb6afdd016429b50aa7cb7c1e9421ad2a9"
+  integrity sha512-5fzH+S6mx3fTIzLgRiubL2/oN+2cg2sGyDqcXj39vovRzzRjJlG8IHj9wD7TRYR0AiUTGrnGklQmrX/NpuTrBQ==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
 
 "@storybook/client-logger@7.0.5":
   version "7.0.5"
@@ -4822,25 +4955,25 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
-"@storybook/client-logger@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.4.5.tgz#f3c594427da0c4a0a291c430191edfa315d84bd6"
-  integrity sha512-Bn6eTAjhPDUfLpvuxhKkpDpOtkadfkSmkBNBZRu3r0Dzk2J1nNyKV5K6D8dOU4PFVof4z/gXYj5bktT29jKsmw==
+"@storybook/client-logger@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.5.3.tgz#5a33a8a1785dbe6beff60654bc8947724c0cd62e"
+  integrity sha512-vUFYALypjix5FoJ5M/XUP6KmyTnQJNW1poHdW7WXUVSg+lBM6E5eAtjTm0hdxNNDH8KSrdy24nCLra5h0X0BWg==
   dependencies:
     "@storybook/global" "^5.0.0"
 
-"@storybook/codemod@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.4.5.tgz#39cc21a587e1282ad5931e73690c26f48c677140"
-  integrity sha512-gyI2xliSv4vvnfNQN+0e3tRmT7beiq8q8iGjcBtpOhA2xrStyCR7PjbOfLXtRx2I/b50MDZMRTcckzeM3BLoWQ==
+"@storybook/codemod@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.5.3.tgz#8a294b8d12f304a2a9db902848977147394d451c"
+  integrity sha512-gzycFdqnF4drUjfzMTrLNHqi2jkw1lDeACUzQdug5uWxynZKAvMTHAgU0q9wvoYRR9Xhq8PhfKtXtYCCj2Er4Q==
   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.4.5"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/csf-tools" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/types" "7.5.3"
     "@types/cross-spawn" "^6.0.2"
     cross-spawn "^7.0.3"
     globby "^11.0.2"
@@ -4849,45 +4982,45 @@
     prettier "^2.8.0"
     recast "^0.23.1"
 
-"@storybook/components@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.4.5.tgz#d2afe9315c1b18ed6f60ce9fd0050834448bceb0"
-  integrity sha512-boskkfvMBB8CFYY9+1ofFNyKrdWXTY/ghzt7oK80dz6f2Eseo/WXK3OsCdCq5vWbLRCdbgJ8zXG8pAFi4yBsxA==
+"@storybook/components@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.5.3.tgz#3fa282252e02973ead9f537f5ae3b5aeee5be4c4"
+  integrity sha512-M3+cjvEsDGLUx8RvK5wyF6/13LNlUnKbMgiDE8Sxk/v/WPpyhOAIh/B8VmrU1psahS61Jd4MTkFmLf1cWau1vw==
   dependencies:
     "@radix-ui/react-select" "^1.2.2"
     "@radix-ui/react-toolbar" "^1.0.4"
-    "@storybook/client-logger" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
     "@storybook/csf" "^0.1.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/theming" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/theming" "7.5.3"
+    "@storybook/types" "7.5.3"
     memoizerific "^1.11.3"
     use-resize-observer "^9.1.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-client@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.4.5.tgz#58143b8d387d757b81104d877c497f32f4c71621"
-  integrity sha512-d/qiCUZeOKY0HX/YmomxlccxJ2NKC3ttRrAsAXzJGypClKabv20X+qbeO/E7Kp5UQxIEJx1wuwJPcnlCvjgPDA==
+"@storybook/core-client@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.5.3.tgz#81e2d5343401f9caab9eaed28b649073937d5190"
+  integrity sha512-sIviDytbhos02TVXxU8XLymzty7IAtLs5e16hv49JSdBp47iBajRaNBmBj/l+sgTH+3M+R6gP8yGFMsZSCnU2g==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
 
-"@storybook/core-common@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-7.4.5.tgz#a46d57030ef0491690cb5a3f53a715798af22a58"
-  integrity sha512-c4pBuILMD4YhSpJ+QpKtsUZpK+/rfolwOvzXfJwlN5EpYzMz6FjVR/LyX0cCT2YLI3X5YWRoCdvMxy5Aeryb8g==
+"@storybook/core-common@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-7.5.3.tgz#baaf4cb8e2e29ebd74626ee8cd5971f337ac4e23"
+  integrity sha512-WGMwjtVUxUzFwQz7Mgs0gLuNebIGNV55dCdZgurx2/y6QOkJ2v8D0b3iL+xKMV4B5Nwoc2DsM418Y+Hy3UQd+w==
   dependencies:
-    "@storybook/core-events" "7.4.5"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/core-events" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/types" "7.5.3"
     "@types/find-cache-dir" "^3.2.1"
-    "@types/node" "^16.0.0"
+    "@types/node" "^18.0.0"
     "@types/node-fetch" "^2.6.4"
     "@types/pretty-hrtime" "^1.0.0"
     chalk "^4.1.0"
     esbuild "^0.18.0"
-    esbuild-register "^3.4.0"
+    esbuild-register "^3.5.0"
     file-system-cache "2.3.0"
     find-cache-dir "^3.0.0"
     find-up "^5.0.0"
@@ -4932,35 +5065,35 @@
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.0.5.tgz#d92490df43f3bc28bf05b3d9a69ae153aca94ecd"
   integrity sha512-bYQFZlJR3n5gFk5GVIemuL3m6aYPF6DVnzj6n9UcMZDlHcOZ2B2WbTmAUrGy0bmtj/Fd6ZJKDpBhh3cRRsYkbA==
 
-"@storybook/core-events@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.4.5.tgz#993b3afba83a0de55e02b55daf9e9c6830a11392"
-  integrity sha512-Jzy/adSC95saYCZlgXE5j7jmiMLAXYpnBFBxEtBdXwSWEBb0zt21n1nyWBEAv9s/k2gqDXlPHKHeL5Mn6y40zA==
+"@storybook/core-events@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.5.3.tgz#210089576844569a914cc0cd1e07119bac6eb0e4"
+  integrity sha512-DFOpyQ22JD5C1oeOFzL8wlqSWZzrqgDfDbUGP8xdO4wJu+FVTxnnWN6ZYLdTPB1u27DOhd7TzjQMfLDHLu7kbQ==
   dependencies:
     ts-dedent "^2.0.0"
 
-"@storybook/core-server@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.4.5.tgz#df6bba0178b2470789103463450461d39de54279"
-  integrity sha512-cW+Qx9Ls823577bd/s9Kv4M1MdKS8mkk6/+nYbwtAwH3hkdlb077rlk/ue0X4O9NZmCrtaJ84KNrBkeDUdFyLQ==
+"@storybook/core-server@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.5.3.tgz#23ea0757d6ffc0e9acc269b58efd7f75f5d781f6"
+  integrity sha512-Gmq1w7ulN/VIeTDboNcb6GNM+S8T0SqhJUqeoHzn0vLGnzxeuYRJ0V3ZJhGZiJfSmCNqYAjC8QUBf6uU1gLipw==
   dependencies:
     "@aw-web-design/x-default-browser" "1.4.126"
     "@discoveryjs/json-ext" "^0.5.3"
-    "@storybook/builder-manager" "7.4.5"
-    "@storybook/channels" "7.4.5"
-    "@storybook/core-common" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/builder-manager" "7.5.3"
+    "@storybook/channels" "7.5.3"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/csf" "^0.1.0"
-    "@storybook/csf-tools" "7.4.5"
+    "@storybook/csf-tools" "7.5.3"
     "@storybook/docs-mdx" "^0.1.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager" "7.4.5"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/telemetry" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/manager" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/telemetry" "7.5.3"
+    "@storybook/types" "7.5.3"
     "@types/detect-port" "^1.3.0"
-    "@types/node" "^16.0.0"
+    "@types/node" "^18.0.0"
     "@types/pretty-hrtime" "^1.0.0"
     "@types/semver" "^7.3.4"
     better-opn "^3.0.2"
@@ -4978,7 +5111,6 @@
     prompts "^2.4.0"
     read-pkg-up "^7.0.1"
     semver "^7.3.7"
-    serve-favicon "^2.5.0"
     telejson "^7.2.0"
     tiny-invariant "^1.3.1"
     ts-dedent "^2.0.0"
@@ -4987,36 +5119,36 @@
     watchpack "^2.2.0"
     ws "^8.2.3"
 
-"@storybook/core-webpack@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/core-webpack/-/core-webpack-7.4.5.tgz#054cd37b764449c52df010e52fe6457dd479f3c8"
-  integrity sha512-W4F5/BE6Q/1hbdseSRlhi4BGIKWp0CuU9UwCL2uF4zqcDOd9QdbntUq9wAw4DpRsonQjpbnzJABlNeh7MPxPMw==
+"@storybook/core-webpack@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/core-webpack/-/core-webpack-7.5.3.tgz#40da9419c71d6e0134a4309cf0ed6f034baf5bdd"
+  integrity sha512-dhC94VeLwyPtZ2gvEND6J4alMaiFDsK8lJCYPNAahUr56f3nRDyVibE7prd94sAlfrdind1g5slP9VMP8cX+uQ==
   dependencies:
-    "@storybook/core-common" "7.4.5"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/types" "7.4.5"
-    "@types/node" "^16.0.0"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/types" "7.5.3"
+    "@types/node" "^18.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/csf-plugin@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-7.4.5.tgz#19d1b1b853b5c688b70e4ead8207d26dc4a6a046"
-  integrity sha512-8p3AnwIm3xXtQhiF7OQ0rBiP/Pn5OCMHRiT4FytRnNimGaw7gxRZ2xzM608QZHQ4A8rHfmgoM2FTwgxdC15ulA==
+"@storybook/csf-plugin@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-7.5.3.tgz#803197a2042323323528014878e9f9f0cc50c193"
+  integrity sha512-yQ3S/IOT08Y7XTnlc3SPkrJKZ6Xld6liAlHn+ddjge4oZa0hUqwYLb+piXUhFMfL6Ij65cj4hu3vMbw89azIhg==
   dependencies:
-    "@storybook/csf-tools" "7.4.5"
+    "@storybook/csf-tools" "7.5.3"
     unplugin "^1.3.1"
 
-"@storybook/csf-tools@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-7.4.5.tgz#b2c92bb4471b6a80e0b7c1247f91e83625cbe406"
-  integrity sha512-xbm5HGYvlwF0Efivx37v9rO7Exel1/Tdb/Yv/vXn4D/hQeljNVLNz4Bomfy4EQ207rRsrGDSOHEhLUbHDimnxg==
+"@storybook/csf-tools@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-7.5.3.tgz#1b2a393b3402a4c2fdfb2eb4eb90c63463c106ae"
+  integrity sha512-676C3ISn7FQJKjb3DBWXhjGN2OQEv4s71dx+5D0TlmswDCOOGS8dYFjP8wVx51+mAIE8CROAw7vLHLtVKU7SwQ==
   dependencies:
     "@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.4.5"
+    "@storybook/types" "7.5.3"
     fs-extra "^11.1.0"
     recast "^0.23.1"
     ts-dedent "^2.0.0"
@@ -5077,14 +5209,14 @@
   resolved "https://registry.yarnpkg.com/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz#33ba0e39d1461caf048b57db354b2cc410705316"
   integrity sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==
 
-"@storybook/docs-tools@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-7.4.5.tgz#967d0bf512da17d731ab5bea3d279e15120f81d4"
-  integrity sha512-ctK+yGb2nvWISSvCCzj3ZhDaAb7I2BLjbxuBGTyNPvl4V9UQ9LBYzdJwR50q+DfscxdwSHMSOE/0OnzmJdaSJA==
+"@storybook/docs-tools@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-7.5.3.tgz#1d1aec4a7546d70a2273ad99814a1dbecb8e80f7"
+  integrity sha512-f20EUQlwamcSPrOFn42fj9gpkZIDNCZkC3N19yGzLYiE4UMyaYQgRl18oLvqd3M6aBm6UW6SCoIIgeaOViBSqg==
   dependencies:
-    "@storybook/core-common" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/types" "7.5.3"
     "@types/doctrine" "^0.0.3"
     doctrine "^3.0.0"
     lodash "^4.17.21"
@@ -5094,30 +5226,30 @@
   resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
   integrity sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==
 
-"@storybook/instrumenter@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-7.4.5.tgz#75f3dccadaf57692a3ef90cf3887d7c903a6ca12"
-  integrity sha512-VLFOcmG75QhWa7MtmfEybIJEz5oT2Ry8xAy/pIVhQwyBaeW0kRT0MHWkixRTtWQmJs/78FmHE3FlgMnqpa5JoA==
+"@storybook/instrumenter@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-7.5.3.tgz#de875ba10db3b5a06a1acbc27a8b1f8fb1d875ff"
+  integrity sha512-p6b+/6ohTCKxWn00bXT8KBqVjXUOxeILnJtLlG83USLQCpI+XVkpmK57HYuydqEwy/1XjG+4S4ntPk9VVz3u7w==
   dependencies:
-    "@storybook/channels" "7.4.5"
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/channels" "7.5.3"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/preview-api" "7.4.5"
+    "@storybook/preview-api" "7.5.3"
 
-"@storybook/manager-api@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.4.5.tgz#23acaf71f46ddae9dbde8f8ec2811000ea38280e"
-  integrity sha512-8Hdh5Tutet8xRy2fAknczfvpshz09eVnLd8m34vcFceUOYvEnvDbWerufhlEzovsF4v7U32uqbDHKdKTamWEQQ==
+"@storybook/manager-api@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.5.3.tgz#6e9e791a8996631dc77f3a0cecc34ce4f4869647"
+  integrity sha512-d8mVLr/5BEG4bAS2ZeqYTy/aX4jPEpZHdcLaWoB4mAM+PAL9wcWsirUyApKtDVYLITJf/hd8bb2Dm2ok6E45gA==
   dependencies:
-    "@storybook/channels" "7.4.5"
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/channels" "7.5.3"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/csf" "^0.1.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/router" "7.4.5"
-    "@storybook/theming" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/router" "7.5.3"
+    "@storybook/theming" "7.5.3"
+    "@storybook/types" "7.5.3"
     dequal "^2.0.2"
     lodash "^4.17.21"
     memoizerific "^1.11.3"
@@ -5126,10 +5258,10 @@
     telejson "^7.2.0"
     ts-dedent "^2.0.0"
 
-"@storybook/manager@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.4.5.tgz#efd7c44eac0dc309ee96ab8c4eed54ffabde76d8"
-  integrity sha512-yoqVktWzzC0f8cXsxErOEUfT+VFfWV/W7soytIPQuJFqNaq+BqR5A7WCeoY7BIv3mdpRjo4GKwerCsgoHYeHhg==
+"@storybook/manager@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.5.3.tgz#e185fc056546c19d255cdc26b6f2698e04d3f8ab"
+  integrity sha512-3ZZrHYcXWAQXpDQZBvKyScGgQaAaBc63i+KC2mXqzTdXuJhVDUiylvqLRprBnrEprgePQLFrxGC2JSHUwH7dqg==
 
 "@storybook/mdx2-csf@^1.0.0":
   version "1.0.0"
@@ -5146,30 +5278,30 @@
     npmlog "^5.0.1"
     pretty-hrtime "^1.0.3"
 
-"@storybook/node-logger@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-7.4.5.tgz#910581defe4063395c50b1d43f6bb8ea6a945e4d"
-  integrity sha512-fJSykphbryuEYj1qihbaTH5oOzD4NkptRxyf2uyBrpgkr5tCTq9d7GHheqaBuIdi513dsjlcIR7z5iHxW7ZD+Q==
+"@storybook/node-logger@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-7.5.3.tgz#23133787f5b3427cef7301e10c6caf9132969fc1"
+  integrity sha512-7ZZDw/q3hakBj1FngsBjaHNIBguYAWojp7R1fFTvwkeunCi21EUzZjRBcqp10kB6BP3/NLX32bIQknsCWD76rQ==
 
-"@storybook/postinstall@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-7.4.5.tgz#3258ae9831436df295aa04d4260ed4e54051da4b"
-  integrity sha512-MWRjnKkUpEe2VkHNNpv3zkuMvxM2Zu9DMxFENQaEmhqUHkIFh5klfFwzhSBRexVLzIh7DA1p7mntIpY5A6lh+Q==
+"@storybook/postinstall@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-7.5.3.tgz#66b9add9e315646dde2289d77c87118c3c8596a6"
+  integrity sha512-r+H3xGMu2A9yOSsygc3bDFhku8wpOZF3SqO19B7eAML12viHwUtYfyGL74svw4TMcKukyQ+KPn5QsSG+4bjZMg==
 
-"@storybook/preset-react-webpack@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/preset-react-webpack/-/preset-react-webpack-7.4.5.tgz#de252608f28c1baa9cb4f7107ad26346eba809db"
-  integrity sha512-8mYHag0sGOHCjPHdEuLPM8U/FTCBIp5LaTxmpkJcNs/LprzSDI6OFWqbe+q8X7qkAL2Iz1YyqrYb4NgweqpZiA==
+"@storybook/preset-react-webpack@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/preset-react-webpack/-/preset-react-webpack-7.5.3.tgz#43139d09b719dfe5624a841bfe8e57ed064fa697"
+  integrity sha512-/3Zsh97KpMLsx3lkkQ9LAlEVWwBGbAJTwE+ueVxVnAJgwiDCVe95IN7sVpKuwN/PVStnMRwDADUvZPfmw4m3Sg==
   dependencies:
     "@babel/preset-flow" "^7.22.5"
     "@babel/preset-react" "^7.22.5"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.5.5"
-    "@storybook/core-webpack" "7.4.5"
-    "@storybook/docs-tools" "7.4.5"
-    "@storybook/node-logger" "7.4.5"
-    "@storybook/react" "7.4.5"
+    "@storybook/core-webpack" "7.5.3"
+    "@storybook/docs-tools" "7.5.3"
+    "@storybook/node-logger" "7.5.3"
+    "@storybook/react" "7.5.3"
     "@storybook/react-docgen-typescript-plugin" "1.0.6--canary.9.0c3f3b7.0"
-    "@types/node" "^16.0.0"
+    "@types/node" "^18.0.0"
     "@types/semver" "^7.3.4"
     babel-plugin-add-react-displayname "^0.0.5"
     babel-plugin-react-docgen "^4.2.1"
@@ -5178,17 +5310,17 @@
     semver "^7.3.7"
     webpack "5"
 
-"@storybook/preview-api@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.4.5.tgz#50359bb94522165bbd31777aae3585cfe8dab7e2"
-  integrity sha512-6xXQZPyilkGVddfZBI7tMbMMgOyIoZTYgTnwSPTMsXxO0f0TvtNDmGdwhn0I1nREHKfiQGpcQe6gwddEMnGtSg==
+"@storybook/preview-api@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.5.3.tgz#eaf70f9b6888d0dac42ce39a296afd6acacf6156"
+  integrity sha512-LNmEf7oBRnZ1wG3bQ+P+TO29+NN5pSDJiAA6FabZBrtIVm+psc2lxBCDQvFYyAFzQSlt60toGKNW8+RfFNdR5Q==
   dependencies:
-    "@storybook/channels" "7.4.5"
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/core-events" "7.4.5"
+    "@storybook/channels" "7.5.3"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/core-events" "7.5.3"
     "@storybook/csf" "^0.1.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/types" "7.4.5"
+    "@storybook/types" "7.5.3"
     "@types/qs" "^6.9.5"
     dequal "^2.0.2"
     lodash "^4.17.21"
@@ -5219,10 +5351,10 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/preview@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.4.5.tgz#e27de3f80bdd7ab0ee72421ca61b96bc4259b299"
-  integrity sha512-hCVFoPJP0d7vFCJKaWEsDMa6LcRFcEikQ8Cy6Vo+trS8xXwvwE+vIBqyuPozl4O/MYD9iOlzjgZFNwaUUgX0Jg==
+"@storybook/preview@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.5.3.tgz#9abe434ea9fb280a7d2141b72be2958f7eb9cc5b"
+  integrity sha512-Hf90NlLaSrdMZXPOHDCMPjTywVrQKK0e5CtzqWx/ZQz91JDINxJD+sGj2wZU+wuBtQcTtlsXc9OewlJ+9ETwIw==
 
 "@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0":
   version "1.0.6--canary.9.0c3f3b7.0"
@@ -5237,36 +5369,36 @@
     react-docgen-typescript "^2.2.2"
     tslib "^2.0.0"
 
-"@storybook/react-dom-shim@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-7.4.5.tgz#77c27c169aaacbeb0a601a53f81421abcfbe8d1c"
-  integrity sha512-/hGe8yuiWbT7L3ZsllmJPgxT9MEQE3k23FhliyKx6IGHsWoYaEsPYPZ9tygqtKY8RpqqMUKWz8+kbO79zUxaoQ==
-
-"@storybook/react-webpack5@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/react-webpack5/-/react-webpack5-7.4.5.tgz#fa5c2e4204144deb2eaa3f0b894ffd22c2c8f8d9"
-  integrity sha512-2IgGuj/s6mZZoK22i7IfSSpkE00m1t/o9+C7Vxw+m79N/cyMbfmxuNJJATV9NZMrBd65UKACTitolM+ZneqB5Q==
-  dependencies:
-    "@storybook/builder-webpack5" "7.4.5"
-    "@storybook/preset-react-webpack" "7.4.5"
-    "@storybook/react" "7.4.5"
-    "@types/node" "^16.0.0"
-
-"@storybook/react@7.4.5", "@storybook/react@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-7.4.5.tgz#b6675b3b42fe1fbb2f68973f8a792a4efe2ebb0f"
-  integrity sha512-Tiylrs3uFO8QSvH1w3ueSxlAgh2fteH0edRVKaX01M/h47+QqEiZqq/dYkVDvLHngF+CCCwE3OY8nNe6L14Xkw==
-  dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/core-client" "7.4.5"
-    "@storybook/docs-tools" "7.4.5"
+"@storybook/react-dom-shim@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-7.5.3.tgz#54fc7bda589be5f630738fd08d2a37d5bb7815fa"
+  integrity sha512-9aNcKdhoP36jMrcXgfzE9jVg/SpqPpWnUJM70upYoZXytG2wQSPtawLHHyC6kycvTzwncyfF3rwUnOFBB8zmig==
+
+"@storybook/react-webpack5@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/react-webpack5/-/react-webpack5-7.5.3.tgz#dfef70b203a803c77ee777eb79b6ee986d6c7009"
+  integrity sha512-+sjYMrvmpvztdDkRE1/EkcNNxTTdDdBoXUGrGyE0ig6qEwSewRld0H8ng1jlNQ8treocy7036TXJF+qHZEz/FQ==
+  dependencies:
+    "@storybook/builder-webpack5" "7.5.3"
+    "@storybook/preset-react-webpack" "7.5.3"
+    "@storybook/react" "7.5.3"
+    "@types/node" "^18.0.0"
+
+"@storybook/react@7.5.3", "@storybook/react@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-7.5.3.tgz#fe01ff2057826bdf55b0852deea7e76859757c01"
+  integrity sha512-dZILdM36xMFDjdmmy421G5X+sOIncB2qF3IPTooniG1i1Z6v/dVNo57ovdID9lDTNa+AWr2fLB9hANiISMqmjQ==
+  dependencies:
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/core-client" "7.5.3"
+    "@storybook/docs-tools" "7.5.3"
     "@storybook/global" "^5.0.0"
-    "@storybook/preview-api" "7.4.5"
-    "@storybook/react-dom-shim" "7.4.5"
-    "@storybook/types" "7.4.5"
+    "@storybook/preview-api" "7.5.3"
+    "@storybook/react-dom-shim" "7.5.3"
+    "@storybook/types" "7.5.3"
     "@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"
@@ -5279,41 +5411,33 @@
     type-fest "~2.19"
     util-deprecate "^1.0.2"
 
-"@storybook/router@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.4.5.tgz#837c82cdecd8ce5e081770b50a2a70169105f8fd"
-  integrity sha512-IM4IhiPiXsx3FAUeUOAB47uiuUS8Yd37VQcNlXLBO28GgHoTSYOrjS+VTGLIV5cAGKr8+H5pFB+q35BnlFUpkQ==
+"@storybook/router@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.5.3.tgz#e024ad96bc4bbf7250239921a251e828729e4747"
+  integrity sha512-/iNYCFore7R5n6eFHbBYoB0P2/sybTVpA+uXTNUd3UEt7Ro6CEslTaFTEiH2RVQwOkceBp/NpyWon74xZuXhMg==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
-"@storybook/store@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-7.4.5.tgz#52944a2fa3c4fb12d2a0094be1bbe516072a28f4"
-  integrity sha512-uK9y9aT/PI4xjhw0gG3geTk5/JPiSNfdxy57N+HRn04ofin3dnBSYM5gxuQxVeHR2EVpvVhoM5nQsImyIQuPUg==
-  dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/preview-api" "7.4.5"
-
-"@storybook/telemetry@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-7.4.5.tgz#e9ce51ce70e763848077bd671057293cc2946f03"
-  integrity sha512-JbhQXZF5sqS2c7Cf+vAtuKTdTSBDco+liUP2UGQFjqdacTRLVzxyj+YY2UH4aAQn7wpmnQ67iHnqFp0+fdYmAA==
+"@storybook/telemetry@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-7.5.3.tgz#67d77c5cb33360c6f483a7cc89897fea160ca446"
+  integrity sha512-X6alII3o0jCb5xALuw+qcWmvyrbhlkmPeNZ6ZQXknOfB4DkwponFdWN5y6W7yGvr01xa5QBepJRV79isl97d8g==
   dependencies:
-    "@storybook/client-logger" "7.4.5"
-    "@storybook/core-common" "7.4.5"
-    "@storybook/csf-tools" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
+    "@storybook/core-common" "7.5.3"
+    "@storybook/csf-tools" "7.5.3"
     chalk "^4.1.0"
     detect-package-manager "^2.0.1"
     fetch-retry "^5.0.2"
     fs-extra "^11.1.0"
     read-pkg-up "^7.0.1"
 
-"@storybook/test-runner@^0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@storybook/test-runner/-/test-runner-0.13.0.tgz#e22ecfa4842deb7c5248185d77ab7d78b77beab9"
-  integrity sha512-QIbfgia/iBy7PeUIwCYtPcyeZCHd21ebaPoMNIsRfwUW+VC12J4iG8cGDfOE7MGbMVz1Uu0elAEBB8NGP/YBtQ==
+"@storybook/test-runner@^0.15.1":
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/@storybook/test-runner/-/test-runner-0.15.1.tgz#50473081cc855f837a2c1cbb3ee16ca72fcc692d"
+  integrity sha512-VHm9E6DM4ibs132EVJnavhX8Y15WARRHaZcLMkdb1R9Wmh1X6pdojl77AERQzIOCzhfBg291G3MZzCcE9enh8A==
   dependencies:
     "@babel/core" "^7.22.5"
     "@babel/generator" "^7.22.5"
@@ -5329,12 +5453,12 @@
     commander "^9.0.0"
     expect-playwright "^0.8.0"
     glob "^10.2.2"
-    jest "^28.0.0"
-    jest-circus "^28.0.0"
-    jest-environment-node "^28.0.0"
-    jest-junit "^14.0.0"
-    jest-playwright-preset "^2.0.0"
-    jest-runner "^28.0.0"
+    jest "^29.6.4"
+    jest-circus "^29.6.4"
+    jest-environment-node "^29.6.4"
+    jest-junit "^16.0.0"
+    jest-playwright-preset "^3.0.1"
+    jest-runner "^29.6.4"
     jest-serializer-html "^7.1.0"
     jest-watch-typeahead "^2.0.0"
     node-fetch "^2"
@@ -5343,22 +5467,22 @@
     tempy "^1.0.1"
     ts-dedent "^2.0.0"
 
-"@storybook/testing-library@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/testing-library/-/testing-library-0.2.1.tgz#5128fa857cb798b71cba3d2b0af637f0f414acd5"
-  integrity sha512-AdbfLCm1C2nEFrhA3ScdicfW6Fjcorehr6RlGwECMiWwaXisnP971Wd4psqtWxlAqQo4tYBZ0f6rJ3J78JLtsg==
+"@storybook/testing-library@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@storybook/testing-library/-/testing-library-0.2.2.tgz#c8e089cc8d7354f6066fdb580fae3eedf568aa7c"
+  integrity sha512-L8sXFJUHmrlyU2BsWWZGuAjv39Jl1uAqUHdxmN42JY15M4+XCMjGlArdCCjDe1wpTSW6USYISA9axjZojgtvnw==
   dependencies:
     "@testing-library/dom" "^9.0.0"
-    "@testing-library/user-event" "~14.4.0"
+    "@testing-library/user-event" "^14.4.0"
     ts-dedent "^2.2.0"
 
-"@storybook/theming@7.4.5", "@storybook/theming@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.4.5.tgz#6a48defac9e59f5f0e973cc36dec7300887276f0"
-  integrity sha512-QSIJDIMzOegzlhubIBaYIovf4mlf+AVL0SmQOskPS8GZ6s9t77yUUI6gZTEjO+S4eB3djXRsfTTijQ8+z4XmRA==
+"@storybook/theming@7.5.3", "@storybook/theming@^7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.5.3.tgz#bbcf547c8b3ec1e59e641c58155a44781d5f310d"
+  integrity sha512-Cjmthe1MAk0z4RKCZ7m72gAD8YD0zTAH97z5ryM1Qv84QXjiCQ143fGOmYz1xEQdNFpOThPcwW6FEccLHTkVcg==
   dependencies:
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@storybook/client-logger" "7.4.5"
+    "@storybook/client-logger" "7.5.3"
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
@@ -5382,12 +5506,12 @@
     "@types/express" "^4.7.0"
     file-system-cache "^2.0.0"
 
-"@storybook/types@7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.4.5.tgz#800685e3d5ba481070e420fe842abfdd0db6e8da"
-  integrity sha512-DTWFNjfRTpncjufDoUs0QnNkgHG2qThGKWL1D6sO18cYI02zWPyHWD8/cbqlvtT7XIGe3s1iUEfCTdU5GcwWBA==
+"@storybook/types@7.5.3":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.5.3.tgz#be956805dafc09fa9a7a3dd4e0e5097ef08e4fd4"
+  integrity sha512-iu5W0Kdd6nysN5CPkY4GRl+0BpxRTdSfBIJak7mb6xCIHSB5t1tw4BOuqMQ5EgpikRY3MWJ4gY647QkWBX3MNQ==
   dependencies:
-    "@storybook/channels" "7.4.5"
+    "@storybook/channels" "7.5.3"
     "@types/babel__core" "^7.0.0"
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
@@ -5533,52 +5657,102 @@
   resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.74.tgz#5ec6f504fb8cd74fd5133080f6cc670327a867cd"
   integrity sha512-2rMV4QxM583jXcREfo0MhV3Oj5pgRSfSh/kVrB1twL2rQxOrbzkAPT/8flmygdVoL4f2F7o1EY5lKlYxEBiIKQ==
 
+"@swc/core-darwin-arm64@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.96.tgz#7c1c4245ce3f160a5b36a48ed071e3061a839e1d"
+  integrity sha512-8hzgXYVd85hfPh6mJ9yrG26rhgzCmcLO0h1TIl8U31hwmTbfZLzRitFQ/kqMJNbIBCwmNH1RU2QcJnL3d7f69A==
+
 "@swc/core-darwin-x64@1.3.74":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.74.tgz#5da7bdc4ad0fb3b4375d9c1039672ae8f61efaeb"
   integrity sha512-KKEGE1wXneYXe15fWDRM8/oekd/Q4yAuccA0vWY/7i6nOSPqWYcSDR0nRtR030ltDxWt0rk/eCTmNkrOWrKs3A==
 
+"@swc/core-darwin-x64@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.96.tgz#4720ff897ca3f22fe77d0be688968161480c80f0"
+  integrity sha512-mFp9GFfuPg+43vlAdQZl0WZpZSE8sEzqL7sr/7Reul5McUHP0BaLsEzwjvD035ESfkY8GBZdLpMinblIbFNljQ==
+
 "@swc/core-linux-arm-gnueabihf@1.3.74":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.74.tgz#52d818692aaaf9138e1175956271cae8107c1096"
   integrity sha512-HehH5DR6r/5fIVu7tu8ZqgrHkhSCQNewf1ztFQJgcmaQWn+H4AJERBjwkjosqh4TvUJucZv8vyRTvrFeBXaCSA==
 
+"@swc/core-linux-arm-gnueabihf@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.96.tgz#2c238ae00b13918ac058b132a31dc57dbcf94e39"
+  integrity sha512-8UEKkYJP4c8YzYIY/LlbSo8z5Obj4hqcv/fUTHiEePiGsOddgGf7AWjh56u7IoN/0uEmEro59nc1ChFXqXSGyg==
+
 "@swc/core-linux-arm64-gnu@1.3.74":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.74.tgz#b230ba8623edb3c4b9ceffaf9aced8bf7a9fc829"
   integrity sha512-+xkbCRz/wczgdknoV4NwYxbRI2dD7x/qkIFcVM2buzLCq8oWLweuV8+aL4pRqu0qDh7ZSb1jcaVTUIsySCJznA==
 
+"@swc/core-linux-arm64-gnu@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.96.tgz#be2e84506b9761b561fb9a341e587f8594a8e55d"
+  integrity sha512-c/IiJ0s1y3Ymm2BTpyC/xr6gOvoqAVETrivVXHq68xgNms95luSpbYQ28rqaZC8bQC8M5zdXpSc0T8DJu8RJGw==
+
 "@swc/core-linux-arm64-musl@1.3.74":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.74.tgz#05ff0f3046aba1dd9d2d8793c10cd4a21a46fd7f"
   integrity sha512-maKFZSCD3tQznzPV7T3V+TtiWZFEFM8YrnSS5fQNNb+K9J65sL+170uTb3M7H4cFkG+9Sm5k5yCrCIutlvV48g==
 
+"@swc/core-linux-arm64-musl@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.96.tgz#22c9ce17bd923ae358760e668ca33c90210c2ae5"
+  integrity sha512-i5/UTUwmJLri7zhtF6SAo/4QDQJDH2fhYJaBIUhrICmIkRO/ltURmpejqxsM/ye9Jqv5zG7VszMC0v/GYn/7BQ==
+
 "@swc/core-linux-x64-gnu@1.3.74":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.74.tgz#a98d9a984d47404aa2de478dd3cd33dbd195bba2"
   integrity sha512-LEXpcShF6DLTWJSiBhMSYZkLQ27UvaQ24fCFhoIV/R3dhYaUpHmIyLPPBNC82T03lB3ONUFVwrRw6fxDJ/f00A==
 
+"@swc/core-linux-x64-gnu@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.96.tgz#c17c072e338341c0ac3507a31ab2a36d16d79c98"
+  integrity sha512-USdaZu8lTIkm4Yf9cogct/j5eqtdZqTgcTib4I+NloUW0E/hySou3eSyp3V2UAA1qyuC72ld1otXuyKBna0YKQ==
+
 "@swc/core-linux-x64-musl@1.3.74":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.74.tgz#95e04431eba994b4fae23c578ad1ba73fb72c21d"
   integrity sha512-sxsFctbFMZEFmDE7CmYljG0dMumH8XBTwwtGr8s6z0fYAzXBGNq2AFPcmEh2np9rPWkt7pE1m0ByESD+dMkbxQ==
 
+"@swc/core-linux-x64-musl@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.96.tgz#eb74594a48b4e9cabdce7f5525b3b946f8d6dd16"
+  integrity sha512-QYErutd+G2SNaCinUVobfL7jWWjGTI0QEoQ6hqTp7PxCJS/dmKmj3C5ZkvxRYcq7XcZt7ovrYCTwPTHzt6lZBg==
+
 "@swc/core-win32-arm64-msvc@1.3.74":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.74.tgz#62cb708094a8902a307fba6eea08682dbccd472d"
   integrity sha512-F7hY9/BjFCozA4YPFYFH5FGCyWwa44vIXHqG66F5cDwXDGFn8ZtBsYIsiPfUYcx0AeAo1ojnVWKPxokZhYNYqA==
 
+"@swc/core-win32-arm64-msvc@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.96.tgz#6f7c0d20d80534b0676dc6761904288c16e93857"
+  integrity sha512-hjGvvAduA3Un2cZ9iNP4xvTXOO4jL3G9iakhFsgVhpkU73SGmK7+LN8ZVBEu4oq2SUcHO6caWvnZ881cxGuSpg==
+
 "@swc/core-win32-ia32-msvc@1.3.74":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.74.tgz#fe5a2d8bbddb609e554e0d8d678093973096330c"
   integrity sha512-qBAsiD1AlIdqED6wy3UNRHyAys9pWMUidX0LJ6mj24r/vfrzzTBAUrLJe5m7bzE+F1Rgi001avYJeEW1DLEJ+Q==
 
+"@swc/core-win32-ia32-msvc@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.96.tgz#47bb24ef2e4c81407a6786649246983cc69e7854"
+  integrity sha512-Far2hVFiwr+7VPCM2GxSmbh3ikTpM3pDombE+d69hkedvYHYZxtTF+2LTKl/sXtpbUnsoq7yV/32c9R/xaaWfw==
+
 "@swc/core-win32-x64-msvc@1.3.74":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.74.tgz#4fd459c7264d4c97d1b2965ed6aa86b1725ce38b"
   integrity sha512-S3YAvvLprTnPRwQuy9Dkwubb5SRLpVK3JJsqYDbGfgj8PGQyKHZcVJ5X3nfFsoWLy3j9B/3Os2nawprRSzeC5A==
 
-"@swc/core@^1.3.18", "@swc/core@^1.3.49":
+"@swc/core-win32-x64-msvc@1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.96.tgz#c796e3df7afe2875d227c74add16a7d09c77d8bd"
+  integrity sha512-4VbSAniIu0ikLf5mBX81FsljnfqjoVGleEkCQv4+zRlyZtO3FHoDPkeLVoy6WRlj7tyrRcfUJ4mDdPkbfTO14g==
+
+"@swc/core@^1.3.18":
   version "1.3.74"
   resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.3.74.tgz#b1d1a3c46ca32b7f10d970c8a209d2913c9de251"
   integrity sha512-P+MIExOTdWlfq8Heb1/NhBAke6UTckd4cRDuJoFcFMGBRvgoCMNWhnfP3FRRXPLI7GGg27dRZS+xHiqYyQmSrA==
@@ -5594,6 +5768,30 @@
     "@swc/core-win32-ia32-msvc" "1.3.74"
     "@swc/core-win32-x64-msvc" "1.3.74"
 
+"@swc/core@^1.3.82":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.3.96.tgz#f04d58b227ceed2fee6617ce2cdddf21d0803f96"
+  integrity sha512-zwE3TLgoZwJfQygdv2SdCK9mRLYluwDOM53I+dT6Z5ZvrgVENmY3txvWDvduzkV+/8IuvrRbVezMpxcojadRdQ==
+  dependencies:
+    "@swc/counter" "^0.1.1"
+    "@swc/types" "^0.1.5"
+  optionalDependencies:
+    "@swc/core-darwin-arm64" "1.3.96"
+    "@swc/core-darwin-x64" "1.3.96"
+    "@swc/core-linux-arm-gnueabihf" "1.3.96"
+    "@swc/core-linux-arm64-gnu" "1.3.96"
+    "@swc/core-linux-arm64-musl" "1.3.96"
+    "@swc/core-linux-x64-gnu" "1.3.96"
+    "@swc/core-linux-x64-musl" "1.3.96"
+    "@swc/core-win32-arm64-msvc" "1.3.96"
+    "@swc/core-win32-ia32-msvc" "1.3.96"
+    "@swc/core-win32-x64-msvc" "1.3.96"
+
+"@swc/counter@^0.1.1":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.2.tgz#bf06d0770e47c6f1102270b744e17b934586985e"
+  integrity sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==
+
 "@swc/jest@^0.2.23":
   version "0.2.27"
   resolved "https://registry.yarnpkg.com/@swc/jest/-/jest-0.2.27.tgz#f6cbd0b6f95cf689c3344c63fc379fa680cdbf52"
@@ -5602,6 +5800,11 @@
     "@jest/create-cache-key-function" "^27.4.2"
     jsonc-parser "^3.2.0"
 
+"@swc/types@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
+  integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
+
 "@szmarczak/http-timer@^4.0.5":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807"
@@ -5660,7 +5863,12 @@
     "@testing-library/dom" "^8.0.0"
     "@types/react-dom" "<18.0.0"
 
-"@testing-library/user-event@^14.4.3", "@testing-library/user-event@~14.4.0":
+"@testing-library/user-event@^14.4.0":
+  version "14.5.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f"
+  integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==
+
+"@testing-library/user-event@^14.4.3":
   version "14.4.3"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
   integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
@@ -6103,6 +6311,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
   integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
 
+"@types/node@^18.0.0":
+  version "18.18.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.10.tgz#4971bffdf3a43977c4c8166aa714b2c0b05b3256"
+  integrity sha512-luANqZxPmjTll8bduz4ACs/lNTCLuWssCyjqTY9yLdsv1xnViQp3ISKwsEWOIecO13JWUqjVdig/Vjjc09o8uA==
+  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"
@@ -6155,12 +6370,12 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@<18.0.0", "@types/react-dom@^17.0.1":
-  version "17.0.19"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.19.tgz#36feef3aa35d045cacd5ed60fe0eef5272f19492"
-  integrity sha512-PiYG40pnQRdPHnlf7tZnp0aQ6q9tspYr72vD61saO6zFCybLfMqwUCN0va1/P+86DXn18ZWeW30Bk7xlC5eEAQ==
+"@types/react-dom@17.0.1", "@types/react-dom@<18.0.0", "@types/react-dom@^17.0.1":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.1.tgz#d92d77d020bfb083e07cc8e0ac9f933599a4d56a"
+  integrity sha512-yIVyopxQb8IDZ7SOHeTovurFq+fXiPICa+GV3gp0Xedsl+MwQlMLKmvrnEjFbQxjliH5YVAEWFh975eVNmKj7Q==
   dependencies:
-    "@types/react" "^17"
+    "@types/react" "*"
 
 "@types/react-is@^18.2.0":
   version "18.2.0"
@@ -6176,31 +6391,12 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
-  version "18.2.7"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.7.tgz#dfb4518042a3117a045b8c222316f83414a783b3"
-  integrity sha512-ojrXpSH2XFCmHm7Jy3q44nXDyN54+EYKP2lBhJ2bqfyPj6cIUW/FZW/Csdia34NQgq7KYcAlHi5184m4X88+yw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@>=16":
-  version "18.0.35"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.35.tgz#192061cb1044fe01f2d3a94272cd35dd50502741"
-  integrity sha512-6Laome31HpetaIUGFWl1VQ3mdSImwxtFZ39rh059a1MNnKGqBpC88J6NJ8n/Is3Qx7CefDGLgf/KhN/sYCf7ag==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^17", "@types/react@^17.0.2":
-  version "17.0.56"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.56.tgz#16f54a0b0a4820065b8296f1dd6da80791fcf964"
-  integrity sha512-Z13f9Qz7Hg8f2g2NsBjiJSVWmON2b3K8RIqFK8mMKCIgvD0CD0ZChTukz87H3lI28X3ukXoNFGzo3ZW1ICTtPA==
+"@types/react@*", "@types/react@17.0.2", "@types/react@>=16", "@types/react@^17.0.2":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
+  integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/responselike@^1.0.0":
@@ -6225,11 +6421,6 @@
   dependencies:
     sass "*"
 
-"@types/scheduler@*":
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
-  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
-
 "@types/semver@^7.1.0", "@types/semver@^7.3.12", "@types/semver@^7.3.13", "@types/semver@^7.3.4":
   version "7.3.13"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
@@ -7250,28 +7441,28 @@ babel-eslint@^10.1.0:
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
-babel-jest@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-28.1.3.tgz#c1187258197c099072156a0a121c11ee1e3917d5"
-  integrity sha512-epUaPOEWMk3cWX0M/sPvCHHCe9fMFAa/9hXEgKP8nFfNl/jlGkE9ucq9NqkZGXLDduCJYS0UvSlPUwC0S+rH6Q==
+babel-jest@^29.6.2:
+  version "29.6.2"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.6.2.tgz#cada0a59e07f5acaeb11cbae7e3ba92aec9c1126"
+  integrity sha512-BYCzImLos6J3BH/+HvUCHG1dTf2MzmAB4jaVxHV+29RZLjR29XuYTmsf2sdDwkrb+FczkGo3kOhE7ga6sI0P4A==
   dependencies:
-    "@jest/transform" "^28.1.3"
+    "@jest/transform" "^29.6.2"
     "@types/babel__core" "^7.1.14"
     babel-plugin-istanbul "^6.1.1"
-    babel-preset-jest "^28.1.3"
+    babel-preset-jest "^29.5.0"
     chalk "^4.0.0"
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-jest@^29.6.2:
-  version "29.6.2"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.6.2.tgz#cada0a59e07f5acaeb11cbae7e3ba92aec9c1126"
-  integrity sha512-BYCzImLos6J3BH/+HvUCHG1dTf2MzmAB4jaVxHV+29RZLjR29XuYTmsf2sdDwkrb+FczkGo3kOhE7ga6sI0P4A==
+babel-jest@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.7.0.tgz#f4369919225b684c56085998ac63dbd05be020d5"
+  integrity sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==
   dependencies:
-    "@jest/transform" "^29.6.2"
+    "@jest/transform" "^29.7.0"
     "@types/babel__core" "^7.1.14"
     babel-plugin-istanbul "^6.1.1"
-    babel-preset-jest "^29.5.0"
+    babel-preset-jest "^29.6.3"
     chalk "^4.0.0"
     graceful-fs "^4.2.9"
     slash "^3.0.0"
@@ -7310,20 +7501,20 @@ babel-plugin-istanbul@^6.1.1:
     istanbul-lib-instrument "^5.0.4"
     test-exclude "^6.0.0"
 
-babel-plugin-jest-hoist@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-28.1.3.tgz#1952c4d0ea50f2d6d794353762278d1d8cca3fbe"
-  integrity sha512-Ys3tUKAmfnkRUpPdpa98eYrAR0nV+sSFUZZEGuQ2EbFd1y4SOLtD5QDNHAq+bb9a+bbXvYQC4b+ID/THIMcU6Q==
+babel-plugin-jest-hoist@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz#a97db437936f441ec196990c9738d4b88538618a"
+  integrity sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==
   dependencies:
     "@babel/template" "^7.3.3"
     "@babel/types" "^7.3.3"
     "@types/babel__core" "^7.1.14"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-jest-hoist@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz#a97db437936f441ec196990c9738d4b88538618a"
-  integrity sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==
+babel-plugin-jest-hoist@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz#aadbe943464182a8922c3c927c3067ff40d24626"
+  integrity sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==
   dependencies:
     "@babel/template" "^7.3.3"
     "@babel/types" "^7.3.3"
@@ -7419,14 +7610,6 @@ babel-preset-current-node-syntax@^1.0.0:
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-top-level-await" "^7.8.3"
 
-babel-preset-jest@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-28.1.3.tgz#5dfc20b99abed5db994406c2b9ab94c73aaa419d"
-  integrity sha512-L+fupJvlWAHbQfn74coNX3zf60LXMJsezNvvx8eIh7iOR1luJ1poxYgQk1F8PYtNq/6QODDHCqsSnTFSWC491A==
-  dependencies:
-    babel-plugin-jest-hoist "^28.1.3"
-    babel-preset-current-node-syntax "^1.0.0"
-
 babel-preset-jest@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz#57bc8cc88097af7ff6a5ab59d1cd29d52a5916e2"
@@ -7435,6 +7618,14 @@ babel-preset-jest@^29.5.0:
     babel-plugin-jest-hoist "^29.5.0"
     babel-preset-current-node-syntax "^1.0.0"
 
+babel-preset-jest@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz#fa05fa510e7d493896d7b0dd2033601c840f171c"
+  integrity sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==
+  dependencies:
+    babel-plugin-jest-hoist "^29.6.3"
+    babel-preset-current-node-syntax "^1.0.0"
+
 babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
@@ -7832,15 +8023,10 @@ can-bind-to-host@^1.1.1:
   resolved "https://registry.yarnpkg.com/can-bind-to-host/-/can-bind-to-host-1.1.2.tgz#45919a1fb426eb1b709ddd4853cd5eda0549e606"
   integrity sha512-CqsgmaqiyFRNtP17Ihqa/uHbZxRirntNVNl/kJz31DLKuNRfzvzionkLoUSkElQ6Cz+cpXKA3mhHq4tjbieujA==
 
-caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001450, caniuse-lite@^1.0.30001464:
-  version "1.0.30001474"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001474.tgz#13b6fe301a831fe666cce8ca4ef89352334133d5"
-  integrity sha512-iaIZ8gVrWfemh5DG3T9/YqarVZoYf0r188IjaGwx68j4Pf0SGY6CQkmJUIE+NZHkkecQGohzXmBGEwWDr9aM3Q==
-
-caniuse-lite@^1.0.30001517:
-  version "1.0.30001519"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
-  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
+caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001450, caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001517:
+  version "1.0.30001559"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz"
+  integrity sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -8474,7 +8660,7 @@ conventional-recommended-bump@6.1.0:
     meow "^8.0.0"
     q "^1.5.1"
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
@@ -8580,6 +8766,19 @@ cosmiconfig@^8.1.3:
     parse-json "^5.0.0"
     path-type "^4.0.0"
 
+create-jest@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/create-jest/-/create-jest-29.7.0.tgz#a355c5b3cb1e1af02ba177fe7afd7feee49a5320"
+  integrity sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-config "^29.7.0"
+    jest-util "^29.7.0"
+    prompts "^2.0.1"
+
 create-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
@@ -9045,16 +9244,16 @@ diff-sequences@^27.5.1:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
   integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
 
-diff-sequences@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-28.1.1.tgz#9989dc731266dc2903457a70e996f3a041913ac6"
-  integrity sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==
-
 diff-sequences@^29.4.3:
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.4.3.tgz#9314bc1fabe09267ffeca9cbafc457d8499a13f2"
   integrity sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==
 
+diff-sequences@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
+  integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
+
 diff@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
@@ -9290,11 +9489,6 @@ electron-to-chromium@^1.4.477:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.482.tgz#77c5ed37b93d4dda860e27538e0e2a01d6a19e02"
   integrity sha512-h+UqpfmEr1Qkk0zp7ej/jid7CXoq4m4QzW6wNTb0ELJ/BZCpA4wgUylBIMGCe621tnr4l5VmoHjdoSx2lbnNJA==
 
-emittery@^0.10.2:
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
-  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
-
 emittery@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
@@ -9516,6 +9710,13 @@ esbuild-register@^3.4.0:
   dependencies:
     debug "^4.3.4"
 
+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.16"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.16.tgz#5efec24a8ff29e0c157359f27e1b5532a728b720"
@@ -9777,10 +9978,10 @@ eslint-plugin-sonarjs@^0.19.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-sonarjs/-/eslint-plugin-sonarjs-0.19.0.tgz#6654bc1c6d24c2183891b8bfe1175004dbba1e3c"
   integrity sha512-6+s5oNk5TFtVlbRxqZN7FIGmjdPCYQKaTzFPmqieCmsU1kBYDzndTeQav0xtQNwZJWu5awWfTGe8Srq9xFOGnw==
 
-eslint-plugin-storybook@^0.6.14:
-  version "0.6.14"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.14.tgz#dfc2b58700e45eb4a13c172dda2973c2e033cd71"
-  integrity sha512-IeYigPur/MvESNDo43Z+Z5UvlcEVnt0dDZmnw1odi9X2Th1R3bpGyOZsHXb9bp1pFecOpRUuoMG5xdID2TwwOg==
+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"
@@ -10028,17 +10229,6 @@ expect-playwright@^0.8.0:
   resolved "https://registry.yarnpkg.com/expect-playwright/-/expect-playwright-0.8.0.tgz#6d4ebe0bdbdd3c1693d880d97153b96a129ae4e8"
   integrity sha512-+kn8561vHAY+dt+0gMqqj1oY+g5xWrsuGMk4QGxotT2WS545nVqqjs37z6hrYfIuucwqthzwJfCJUEYqixyljg==
 
-expect@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-28.1.3.tgz#90a7c1a124f1824133dd4533cce2d2bdcb6603ec"
-  integrity sha512-eEh0xn8HlsuOBxFgIss+2mX85VAS4Qy3OSkjV7rlBWljtA4oWH37glVGyOZSZvErDT/yBywZdPGwCXuTvSG85g==
-  dependencies:
-    "@jest/expect-utils" "^28.1.3"
-    jest-get-type "^28.0.2"
-    jest-matcher-utils "^28.1.3"
-    jest-message-util "^28.1.3"
-    jest-util "^28.1.3"
-
 expect@^29.0.0, expect@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/expect/-/expect-29.5.0.tgz#68c0509156cb2a0adb8865d413b137eeaae682f7"
@@ -10062,6 +10252,17 @@ expect@^29.6.2:
     jest-message-util "^29.6.2"
     jest-util "^29.6.2"
 
+expect@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-29.7.0.tgz#578874590dcb3214514084c08115d8aee61e11bc"
+  integrity sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==
+  dependencies:
+    "@jest/expect-utils" "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+
 express@^4.17.3:
   version "4.18.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
@@ -10554,7 +10755,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@2.3.2, fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -12007,7 +12208,18 @@ istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
     "@babel/parser" "^7.14.7"
     "@istanbuljs/schema" "^0.1.2"
     istanbul-lib-coverage "^3.2.0"
-    semver "^6.3.0"
+    semver "^6.3.0"
+
+istanbul-lib-instrument@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.1.tgz#71e87707e8041428732518c6fb5211761753fbdf"
+  integrity sha512-EAMEJBsYuyyztxMxW3g7ugGPkrZsV57v0Hmv3mm1uQsmB+QnZuepg731CRaIgeUVSdmsTngOkSnauNF8p7FIhA==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^7.5.4"
 
 istanbul-lib-processinfo@^2.0.2:
   version "2.0.3"
@@ -12074,14 +12286,6 @@ jest-canvas-mock@^2.5.2:
     cssfontparser "^1.2.1"
     moo-color "^1.0.2"
 
-jest-changed-files@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-28.1.3.tgz#d9aeee6792be3686c47cb988a8eaf82ff4238831"
-  integrity sha512-esaOfUWJXk2nfZt9SPyC8gA1kNfdKLkQWyzsMlqq8msYSlNKfmZxfRgZn4Cd4MGVUF+7v6dBs0d5TOAKa7iIiA==
-  dependencies:
-    execa "^5.0.0"
-    p-limit "^3.1.0"
-
 jest-changed-files@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.5.0.tgz#e88786dca8bf2aa899ec4af7644e16d9dcf9b23e"
@@ -12090,30 +12294,14 @@ jest-changed-files@^29.5.0:
     execa "^5.0.0"
     p-limit "^3.1.0"
 
-jest-circus@^28.0.0, jest-circus@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-28.1.3.tgz#d14bd11cf8ee1a03d69902dc47b6bd4634ee00e4"
-  integrity sha512-cZ+eS5zc79MBwt+IhQhiEp0OeBddpc1n8MBo1nMB8A7oPMKEO+Sre+wHaLJexQUj9Ya/8NOBY0RESUgYjB6fow==
+jest-changed-files@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.7.0.tgz#1c06d07e77c78e1585d020424dedc10d6e17ac3a"
+  integrity sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==
   dependencies:
-    "@jest/environment" "^28.1.3"
-    "@jest/expect" "^28.1.3"
-    "@jest/test-result" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    dedent "^0.7.0"
-    is-generator-fn "^2.0.0"
-    jest-each "^28.1.3"
-    jest-matcher-utils "^28.1.3"
-    jest-message-util "^28.1.3"
-    jest-runtime "^28.1.3"
-    jest-snapshot "^28.1.3"
-    jest-util "^28.1.3"
+    execa "^5.0.0"
+    jest-util "^29.7.0"
     p-limit "^3.1.0"
-    pretty-format "^28.1.3"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
 
 jest-circus@^29.6.2:
   version "29.6.2"
@@ -12141,23 +12329,31 @@ jest-circus@^29.6.2:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
-jest-cli@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-28.1.3.tgz#558b33c577d06de55087b8448d373b9f654e46b2"
-  integrity sha512-roY3kvrv57Azn1yPgdTebPAXvdR2xfezaKKYzVxZ6It/5NCxzJym6tUI5P1zkdWhfUYkxEI9uZWcQdaFLo8mJQ==
+jest-circus@^29.6.4, jest-circus@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.7.0.tgz#b6817a45fcc835d8b16d5962d0c026473ee3668a"
+  integrity sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==
   dependencies:
-    "@jest/core" "^28.1.3"
-    "@jest/test-result" "^28.1.3"
-    "@jest/types" "^28.1.3"
+    "@jest/environment" "^29.7.0"
+    "@jest/expect" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
     chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.9"
-    import-local "^3.0.2"
-    jest-config "^28.1.3"
-    jest-util "^28.1.3"
-    jest-validate "^28.1.3"
-    prompts "^2.0.1"
-    yargs "^17.3.1"
+    co "^4.6.0"
+    dedent "^1.0.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^29.7.0"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-runtime "^29.7.0"
+    jest-snapshot "^29.7.0"
+    jest-util "^29.7.0"
+    p-limit "^3.1.0"
+    pretty-format "^29.7.0"
+    pure-rand "^6.0.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
 
 jest-cli@^29.6.2:
   version "29.6.2"
@@ -12177,33 +12373,22 @@ jest-cli@^29.6.2:
     prompts "^2.0.1"
     yargs "^17.3.1"
 
-jest-config@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-28.1.3.tgz#e315e1f73df3cac31447eed8b8740a477392ec60"
-  integrity sha512-MG3INjByJ0J4AsNBm7T3hsuxKQqFIiRo/AUqb1q9LRKI5UU6Aar9JHbr9Ivn1TVwfUD9KirRoM/T6u8XlcQPHQ==
+jest-cli@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.7.0.tgz#5592c940798e0cae677eec169264f2d839a37995"
+  integrity sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==
   dependencies:
-    "@babel/core" "^7.11.6"
-    "@jest/test-sequencer" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    babel-jest "^28.1.3"
+    "@jest/core" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/types" "^29.6.3"
     chalk "^4.0.0"
-    ci-info "^3.2.0"
-    deepmerge "^4.2.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.9"
-    jest-circus "^28.1.3"
-    jest-environment-node "^28.1.3"
-    jest-get-type "^28.0.2"
-    jest-regex-util "^28.0.2"
-    jest-resolve "^28.1.3"
-    jest-runner "^28.1.3"
-    jest-util "^28.1.3"
-    jest-validate "^28.1.3"
-    micromatch "^4.0.4"
-    parse-json "^5.2.0"
-    pretty-format "^28.1.3"
-    slash "^3.0.0"
-    strip-json-comments "^3.1.1"
+    create-jest "^29.7.0"
+    exit "^0.1.2"
+    import-local "^3.0.2"
+    jest-config "^29.7.0"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    yargs "^17.3.1"
 
 jest-config@^29.6.2:
   version "29.6.2"
@@ -12233,6 +12418,34 @@ jest-config@^29.6.2:
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
+jest-config@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.7.0.tgz#bcbda8806dbcc01b1e316a46bb74085a84b0245f"
+  integrity sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    babel-jest "^29.7.0"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^29.7.0"
+    jest-environment-node "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-regex-util "^29.6.3"
+    jest-resolve "^29.7.0"
+    jest-runner "^29.7.0"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
 jest-diff@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
@@ -12243,16 +12456,6 @@ jest-diff@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
-jest-diff@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-28.1.3.tgz#948a192d86f4e7a64c5264ad4da4877133d8792f"
-  integrity sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^28.1.1"
-    jest-get-type "^28.0.2"
-    pretty-format "^28.1.3"
-
 jest-diff@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.5.0.tgz#e0d83a58eb5451dcc1fa61b1c3ee4e8f5a290d63"
@@ -12273,12 +12476,15 @@ jest-diff@^29.6.2:
     jest-get-type "^29.4.3"
     pretty-format "^29.6.2"
 
-jest-docblock@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-28.1.1.tgz#6f515c3bf841516d82ecd57a62eed9204c2f42a8"
-  integrity sha512-3wayBVNiOYx0cwAbl9rwm5kKFP8yHH3d/fkEaL02NPTkDojPtheGB7HZSFY4wzX+DxyrvhXz0KSCVksmCknCuA==
+jest-diff@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a"
+  integrity sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==
   dependencies:
-    detect-newline "^3.0.0"
+    chalk "^4.0.0"
+    diff-sequences "^29.6.3"
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
 
 jest-docblock@^29.4.3:
   version "29.4.3"
@@ -12287,16 +12493,12 @@ jest-docblock@^29.4.3:
   dependencies:
     detect-newline "^3.0.0"
 
-jest-each@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-28.1.3.tgz#bdd1516edbe2b1f3569cfdad9acd543040028f81"
-  integrity sha512-arT1z4sg2yABU5uogObVPvSlSMQlDA48owx07BDPAiasW0yYpYHYOo4HHLz9q0BVzDVU4hILFjzJw0So9aCL/g==
+jest-docblock@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-29.7.0.tgz#8fddb6adc3cdc955c93e2a87f61cfd350d5d119a"
+  integrity sha512-q617Auw3A612guyaFgsbFeYpNP5t2aoUNLwBUbc/0kD1R4t9ixDbyFTHd1nok4epoVFpr7PmeWHrhvuV3XaJ4g==
   dependencies:
-    "@jest/types" "^28.1.3"
-    chalk "^4.0.0"
-    jest-get-type "^28.0.2"
-    jest-util "^28.1.3"
-    pretty-format "^28.1.3"
+    detect-newline "^3.0.0"
 
 jest-each@^29.6.2:
   version "29.6.2"
@@ -12309,6 +12511,17 @@ jest-each@^29.6.2:
     jest-util "^29.6.2"
     pretty-format "^29.6.2"
 
+jest-each@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.7.0.tgz#162a9b3f2328bdd991beaabffbb74745e56577d1"
+  integrity sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    chalk "^4.0.0"
+    jest-get-type "^29.6.3"
+    jest-util "^29.7.0"
+    pretty-format "^29.7.0"
+
 jest-environment-jsdom@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-29.6.2.tgz#4fc68836a7774a771819a2f980cb47af3b1629da"
@@ -12323,18 +12536,6 @@ jest-environment-jsdom@^29.6.2:
     jest-util "^29.6.2"
     jsdom "^20.0.0"
 
-jest-environment-node@^28.0.0, jest-environment-node@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-28.1.3.tgz#7e74fe40eb645b9d56c0c4b70ca4357faa349be5"
-  integrity sha512-ugP6XOhEpjAEhGYvp5Xj989ns5cB1K6ZdjBYuS30umT4CQEETaxSiPcZ/E1kFktX4GkrcM4qu07IIlDYX1gp+A==
-  dependencies:
-    "@jest/environment" "^28.1.3"
-    "@jest/fake-timers" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    "@types/node" "*"
-    jest-mock "^28.1.3"
-    jest-util "^28.1.3"
-
 jest-environment-node@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.6.2.tgz#a9ea2cabff39b08eca14ccb32c8ceb924c8bb1ad"
@@ -12347,39 +12548,32 @@ jest-environment-node@^29.6.2:
     jest-mock "^29.6.2"
     jest-util "^29.6.2"
 
+jest-environment-node@^29.6.4, jest-environment-node@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.7.0.tgz#0b93e111dda8ec120bc8300e6d1fb9576e164376"
+  integrity sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    jest-mock "^29.7.0"
+    jest-util "^29.7.0"
+
 jest-get-type@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
   integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
 
-jest-get-type@^28.0.2:
-  version "28.0.2"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-28.0.2.tgz#34622e628e4fdcd793d46db8a242227901fcf203"
-  integrity sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==
-
 jest-get-type@^29.4.3:
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.4.3.tgz#1ab7a5207c995161100b5187159ca82dd48b3dd5"
   integrity sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg==
 
-jest-haste-map@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-28.1.3.tgz#abd5451129a38d9841049644f34b034308944e2b"
-  integrity sha512-3S+RQWDXccXDKSWnkHa/dPwt+2qwA8CJzR61w3FoYCvoo3Pn8tvGcysmMF0Bj0EX5RYvAI2EIvC57OmotfdtKA==
-  dependencies:
-    "@jest/types" "^28.1.3"
-    "@types/graceful-fs" "^4.1.3"
-    "@types/node" "*"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.9"
-    jest-regex-util "^28.0.2"
-    jest-util "^28.1.3"
-    jest-worker "^28.1.3"
-    micromatch "^4.0.4"
-    walker "^1.0.8"
-  optionalDependencies:
-    fsevents "^2.3.2"
+jest-get-type@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
+  integrity sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==
 
 jest-haste-map@^29.5.0:
   version "29.5.0"
@@ -12419,24 +12613,35 @@ jest-haste-map@^29.6.2:
   optionalDependencies:
     fsevents "^2.3.2"
 
-jest-junit@^14.0.0:
-  version "14.0.1"
-  resolved "https://registry.yarnpkg.com/jest-junit/-/jest-junit-14.0.1.tgz#5b357d6f5d333459585d628a24cd48b5bbc92ba2"
-  integrity sha512-h7/wwzPbllgpQhhVcRzRC76/cc89GlazThoV1fDxcALkf26IIlRsu/AcTG64f4nR2WPE3Cbd+i/sVf+NCUHrWQ==
+jest-haste-map@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.7.0.tgz#3c2396524482f5a0506376e6c858c3bbcc17b104"
+  integrity sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^29.6.3"
+    jest-util "^29.7.0"
+    jest-worker "^29.7.0"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-junit@^16.0.0:
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/jest-junit/-/jest-junit-16.0.0.tgz#d838e8c561cf9fdd7eb54f63020777eee4136785"
+  integrity sha512-A94mmw6NfJab4Fg/BlvVOUXzXgF0XIH6EmTgJ5NDPp4xoKq0Kr7sErb+4Xs9nZvu58pJojz5RFGpqnZYJTrRfQ==
   dependencies:
     mkdirp "^1.0.4"
     strip-ansi "^6.0.1"
     uuid "^8.3.2"
     xml "^1.0.1"
 
-jest-leak-detector@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-28.1.3.tgz#a6685d9b074be99e3adee816ce84fd30795e654d"
-  integrity sha512-WFVJhnQsiKtDEo5lG2mM0v40QWnBM+zMdHHyJs8AWZ7J0QZJS59MsyKeJHWhpBZBH32S48FOVvGyOFT1h0DlqA==
-  dependencies:
-    jest-get-type "^28.0.2"
-    pretty-format "^28.1.3"
-
 jest-leak-detector@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.6.2.tgz#e2b307fee78cab091c37858a98c7e1d73cdf5b38"
@@ -12445,6 +12650,14 @@ jest-leak-detector@^29.6.2:
     jest-get-type "^29.4.3"
     pretty-format "^29.6.2"
 
+jest-leak-detector@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz#5b7ec0dadfdfec0ca383dc9aa016d36b5ea4c728"
+  integrity sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==
+  dependencies:
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
+
 jest-matcher-utils@^27.0.0:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
@@ -12455,16 +12668,6 @@ jest-matcher-utils@^27.0.0:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
-jest-matcher-utils@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-28.1.3.tgz#5a77f1c129dd5ba3b4d7fc20728806c78893146e"
-  integrity sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^28.1.3"
-    jest-get-type "^28.0.2"
-    pretty-format "^28.1.3"
-
 jest-matcher-utils@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.5.0.tgz#d957af7f8c0692c5453666705621ad4abc2c59c5"
@@ -12485,20 +12688,15 @@ jest-matcher-utils@^29.6.2:
     jest-get-type "^29.4.3"
     pretty-format "^29.6.2"
 
-jest-message-util@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.1.3.tgz#232def7f2e333f1eecc90649b5b94b0055e7c43d"
-  integrity sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==
+jest-matcher-utils@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12"
+  integrity sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==
   dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@jest/types" "^28.1.3"
-    "@types/stack-utils" "^2.0.0"
     chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    micromatch "^4.0.4"
-    pretty-format "^28.1.3"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
+    jest-diff "^29.7.0"
+    jest-get-type "^29.6.3"
+    pretty-format "^29.7.0"
 
 jest-message-util@^29.5.0:
   version "29.5.0"
@@ -12530,6 +12728,21 @@ jest-message-util@^29.6.2:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
+jest-message-util@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.7.0.tgz#8bc392e204e95dfe7564abbe72a404e28e51f7f3"
+  integrity sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.6.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.7.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
 jest-mock@^27.0.6:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.5.1.tgz#19948336d49ef4d9c52021d34ac7b5f36ff967d6"
@@ -12538,14 +12751,6 @@ jest-mock@^27.0.6:
     "@jest/types" "^27.5.1"
     "@types/node" "*"
 
-jest-mock@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-28.1.3.tgz#d4e9b1fc838bea595c77ab73672ebf513ab249da"
-  integrity sha512-o3J2jr6dMMWYVH4Lh/NKmDXdosrsJgi4AviS8oXLujcjpCMBb1FMsblDnOXKZKfSiHLxYub1eS0IHuRXsio9eA==
-  dependencies:
-    "@jest/types" "^28.1.3"
-    "@types/node" "*"
-
 jest-mock@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.6.2.tgz#ef9c9b4d38c34a2ad61010a021866dad41ce5e00"
@@ -12555,10 +12760,19 @@ jest-mock@^29.6.2:
     "@types/node" "*"
     jest-util "^29.6.2"
 
-jest-playwright-preset@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/jest-playwright-preset/-/jest-playwright-preset-2.0.0.tgz#624edcbdd31d5242a3420f9eda01781c4d657f70"
-  integrity sha512-pV5ruTJJMen3lwshUL4dlSqLlP8z4q9MXqWJkmy+sB6HYfzXoqBHzhl+5hslznhnSVTe4Dwu+reiiwcUJpYUbw==
+jest-mock@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.7.0.tgz#4e836cf60e99c6fcfabe9f99d017f3fdd50a6347"
+  integrity sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    jest-util "^29.7.0"
+
+jest-playwright-preset@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jest-playwright-preset/-/jest-playwright-preset-3.0.1.tgz#91c5c2bf4c87ba879d8d9a7ef914ff4904b05c3d"
+  integrity sha512-tHqv+JUmheNMZpmH7XyT5CAMHr3ExTUIY9baMPzcJiLYPvCaPTwig9YvuGGnXV2n+Epmch0Ld4429g6py0nq0w==
   dependencies:
     expect-playwright "^0.8.0"
     jest-process-manager "^0.3.1"
@@ -12588,23 +12802,15 @@ jest-process-manager@^0.3.1:
     tree-kill "^1.2.2"
     wait-on "^5.3.0"
 
-jest-regex-util@^28.0.2:
-  version "28.0.2"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-28.0.2.tgz#afdc377a3b25fb6e80825adcf76c854e5bf47ead"
-  integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==
-
 jest-regex-util@^29.0.0, jest-regex-util@^29.4.3:
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.4.3.tgz#a42616141e0cae052cfa32c169945d00c0aa0bb8"
   integrity sha512-O4FglZaMmWXbGHSQInfXewIsd1LMn9p3ZXB/6r4FOkyhX2/iP/soMG98jGvk/A3HAN78+5VWcBGO0BJAPRh4kg==
 
-jest-resolve-dependencies@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-28.1.3.tgz#8c65d7583460df7275c6ea2791901fa975c1fe66"
-  integrity sha512-qa0QO2Q0XzQoNPouMbCc7Bvtsem8eQgVPNkwn9LnS+R2n8DaVDPL/U1gngC0LTl1RYXJU0uJa2BMC2DbTfFrHA==
-  dependencies:
-    jest-regex-util "^28.0.2"
-    jest-snapshot "^28.1.3"
+jest-regex-util@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.6.3.tgz#4a556d9c776af68e1c5f48194f4d0327d24e8a52"
+  integrity sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==
 
 jest-resolve-dependencies@^29.6.2:
   version "29.6.2"
@@ -12614,20 +12820,13 @@ jest-resolve-dependencies@^29.6.2:
     jest-regex-util "^29.4.3"
     jest-snapshot "^29.6.2"
 
-jest-resolve@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-28.1.3.tgz#cfb36100341ddbb061ec781426b3c31eb51aa0a8"
-  integrity sha512-Z1W3tTjE6QaNI90qo/BJpfnvpxtaFTFw5CDgwpyE/Kz8U/06N1Hjf4ia9quUhCh39qIGWF1ZuxFiBiJQwSEYKQ==
+jest-resolve-dependencies@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.7.0.tgz#1b04f2c095f37fc776ff40803dc92921b1e88428"
+  integrity sha512-un0zD/6qxJ+S0et7WxeI3H5XSe9lTBBR7bOHCHXkKR6luG5mwDDlIzVQ0V5cZCuoTgEdcdwzTghYkTWfubi+nA==
   dependencies:
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.3"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^28.1.3"
-    jest-validate "^28.1.3"
-    resolve "^1.20.0"
-    resolve.exports "^1.1.0"
-    slash "^3.0.0"
+    jest-regex-util "^29.6.3"
+    jest-snapshot "^29.7.0"
 
 jest-resolve@^29.6.2:
   version "29.6.2"
@@ -12644,32 +12843,20 @@ jest-resolve@^29.6.2:
     resolve.exports "^2.0.0"
     slash "^3.0.0"
 
-jest-runner@^28.0.0, jest-runner@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-28.1.3.tgz#5eee25febd730b4713a2cdfd76bdd5557840f9a1"
-  integrity sha512-GkMw4D/0USd62OVO0oEgjn23TM+YJa2U2Wu5zz9xsQB1MxWKDOlrnykPxnMsN0tnJllfLPinHTka61u0QhaxBA==
+jest-resolve@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.7.0.tgz#64d6a8992dd26f635ab0c01e5eef4399c6bcbc30"
+  integrity sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==
   dependencies:
-    "@jest/console" "^28.1.3"
-    "@jest/environment" "^28.1.3"
-    "@jest/test-result" "^28.1.3"
-    "@jest/transform" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    "@types/node" "*"
     chalk "^4.0.0"
-    emittery "^0.10.2"
     graceful-fs "^4.2.9"
-    jest-docblock "^28.1.1"
-    jest-environment-node "^28.1.3"
-    jest-haste-map "^28.1.3"
-    jest-leak-detector "^28.1.3"
-    jest-message-util "^28.1.3"
-    jest-resolve "^28.1.3"
-    jest-runtime "^28.1.3"
-    jest-util "^28.1.3"
-    jest-watcher "^28.1.3"
-    jest-worker "^28.1.3"
-    p-limit "^3.1.0"
-    source-map-support "0.5.13"
+    jest-haste-map "^29.7.0"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^29.7.0"
+    jest-validate "^29.7.0"
+    resolve "^1.20.0"
+    resolve.exports "^2.0.0"
+    slash "^3.0.0"
 
 jest-runner@^29.6.2:
   version "29.6.2"
@@ -12698,33 +12885,32 @@ jest-runner@^29.6.2:
     p-limit "^3.1.0"
     source-map-support "0.5.13"
 
-jest-runtime@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-28.1.3.tgz#a57643458235aa53e8ec7821949e728960d0605f"
-  integrity sha512-NU+881ScBQQLc1JHG5eJGU7Ui3kLKrmwCPPtYsJtBykixrM2OhVQlpMmFWJjMyDfdkGgBMNjXCGB/ebzsgNGQw==
-  dependencies:
-    "@jest/environment" "^28.1.3"
-    "@jest/fake-timers" "^28.1.3"
-    "@jest/globals" "^28.1.3"
-    "@jest/source-map" "^28.1.2"
-    "@jest/test-result" "^28.1.3"
-    "@jest/transform" "^28.1.3"
-    "@jest/types" "^28.1.3"
+jest-runner@^29.6.4, jest-runner@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.7.0.tgz#809af072d408a53dcfd2e849a4c976d3132f718e"
+  integrity sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==
+  dependencies:
+    "@jest/console" "^29.7.0"
+    "@jest/environment" "^29.7.0"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
     chalk "^4.0.0"
-    cjs-module-lexer "^1.0.0"
-    collect-v8-coverage "^1.0.0"
-    execa "^5.0.0"
-    glob "^7.1.3"
+    emittery "^0.13.1"
     graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.3"
-    jest-message-util "^28.1.3"
-    jest-mock "^28.1.3"
-    jest-regex-util "^28.0.2"
-    jest-resolve "^28.1.3"
-    jest-snapshot "^28.1.3"
-    jest-util "^28.1.3"
-    slash "^3.0.0"
-    strip-bom "^4.0.0"
+    jest-docblock "^29.7.0"
+    jest-environment-node "^29.7.0"
+    jest-haste-map "^29.7.0"
+    jest-leak-detector "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-resolve "^29.7.0"
+    jest-runtime "^29.7.0"
+    jest-util "^29.7.0"
+    jest-watcher "^29.7.0"
+    jest-worker "^29.7.0"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
 
 jest-runtime@^29.6.2:
   version "29.6.2"
@@ -12754,6 +12940,34 @@ jest-runtime@^29.6.2:
     slash "^3.0.0"
     strip-bom "^4.0.0"
 
+jest-runtime@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.7.0.tgz#efecb3141cf7d3767a3a0cc8f7c9990587d3d817"
+  integrity sha512-gUnLjgwdGqW7B4LvOIkbKs9WGbn+QLqRQQ9juC6HndeDiezIwhDP+mhMwHWCEcfQ5RUXa6OPnFF8BJh5xegwwQ==
+  dependencies:
+    "@jest/environment" "^29.7.0"
+    "@jest/fake-timers" "^29.7.0"
+    "@jest/globals" "^29.7.0"
+    "@jest/source-map" "^29.6.3"
+    "@jest/test-result" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-mock "^29.7.0"
+    jest-regex-util "^29.6.3"
+    jest-resolve "^29.7.0"
+    jest-snapshot "^29.7.0"
+    jest-util "^29.7.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
 jest-serializer-html@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/jest-serializer-html/-/jest-serializer-html-7.1.0.tgz#0cfea8a03b9b82bc420fd2cb969bd76713a87c08"
@@ -12761,35 +12975,6 @@ jest-serializer-html@^7.1.0:
   dependencies:
     diffable-html "^4.1.0"
 
-jest-snapshot@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-28.1.3.tgz#17467b3ab8ddb81e2f605db05583d69388fc0668"
-  integrity sha512-4lzMgtiNlc3DU/8lZfmqxN3AYD6GGLbl+72rdBpXvcV+whX7mDrREzkPdp2RnmfIiWBg1YbuFSkXduF2JcafJg==
-  dependencies:
-    "@babel/core" "^7.11.6"
-    "@babel/generator" "^7.7.2"
-    "@babel/plugin-syntax-typescript" "^7.7.2"
-    "@babel/traverse" "^7.7.2"
-    "@babel/types" "^7.3.3"
-    "@jest/expect-utils" "^28.1.3"
-    "@jest/transform" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    "@types/babel__traverse" "^7.0.6"
-    "@types/prettier" "^2.1.5"
-    babel-preset-current-node-syntax "^1.0.0"
-    chalk "^4.0.0"
-    expect "^28.1.3"
-    graceful-fs "^4.2.9"
-    jest-diff "^28.1.3"
-    jest-get-type "^28.0.2"
-    jest-haste-map "^28.1.3"
-    jest-matcher-utils "^28.1.3"
-    jest-message-util "^28.1.3"
-    jest-util "^28.1.3"
-    natural-compare "^1.4.0"
-    pretty-format "^28.1.3"
-    semver "^7.3.5"
-
 jest-snapshot@^29.0.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.5.0.tgz#c9c1ce0331e5b63cd444e2f95a55a73b84b1e8ce"
@@ -12845,6 +13030,32 @@ jest-snapshot@^29.6.2:
     pretty-format "^29.6.2"
     semver "^7.5.3"
 
+jest-snapshot@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.7.0.tgz#c2c574c3f51865da1bb329036778a69bf88a6be5"
+  integrity sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-jsx" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^29.7.0"
+    "@jest/transform" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^29.7.0"
+    graceful-fs "^4.2.9"
+    jest-diff "^29.7.0"
+    jest-get-type "^29.6.3"
+    jest-matcher-utils "^29.7.0"
+    jest-message-util "^29.7.0"
+    jest-util "^29.7.0"
+    natural-compare "^1.4.0"
+    pretty-format "^29.7.0"
+    semver "^7.5.3"
+
 jest-specific-snapshot@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/jest-specific-snapshot/-/jest-specific-snapshot-8.0.0.tgz#c80af21dcd95b6c46b73f71618f887ef3825a44c"
@@ -12852,18 +13063,6 @@ jest-specific-snapshot@^8.0.0:
   dependencies:
     jest-snapshot "^29.0.0"
 
-jest-util@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.3.tgz#f4f932aa0074f0679943220ff9cbba7e497028b0"
-  integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==
-  dependencies:
-    "@jest/types" "^28.1.3"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    graceful-fs "^4.2.9"
-    picomatch "^2.2.3"
-
 jest-util@^29.0.0, jest-util@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.6.2.tgz#8a052df8fff2eebe446769fd88814521a517664d"
@@ -12888,17 +13087,17 @@ jest-util@^29.5.0:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
-jest-validate@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-28.1.3.tgz#e322267fd5e7c64cea4629612c357bbda96229df"
-  integrity sha512-SZbOGBWEsaTxBGCOpsRWlXlvNkvTkY0XxRfh7zYmvd8uL5Qzyg0CHAXiXKROflh801quA6+/DsT4ODDthOC/OA==
+jest-util@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.7.0.tgz#23c2b62bfb22be82b44de98055802ff3710fc0bc"
+  integrity sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==
   dependencies:
-    "@jest/types" "^28.1.3"
-    camelcase "^6.2.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
     chalk "^4.0.0"
-    jest-get-type "^28.0.2"
-    leven "^3.1.0"
-    pretty-format "^28.1.3"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
 
 jest-validate@^29.6.2:
   version "29.6.2"
@@ -12912,6 +13111,18 @@ jest-validate@^29.6.2:
     leven "^3.1.0"
     pretty-format "^29.6.2"
 
+jest-validate@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.7.0.tgz#7bf705511c64da591d46b15fce41400d52147d9c"
+  integrity sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==
+  dependencies:
+    "@jest/types" "^29.6.3"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.6.3"
+    leven "^3.1.0"
+    pretty-format "^29.7.0"
+
 jest-watch-typeahead@^2.0.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-2.2.2.tgz#5516d3cd006485caa5cfc9bd1de40f1f8b136abf"
@@ -12925,20 +13136,6 @@ jest-watch-typeahead@^2.0.0:
     string-length "^5.0.1"
     strip-ansi "^7.0.1"
 
-jest-watcher@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.1.3.tgz#c6023a59ba2255e3b4c57179fc94164b3e73abd4"
-  integrity sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==
-  dependencies:
-    "@jest/test-result" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    emittery "^0.10.2"
-    jest-util "^28.1.3"
-    string-length "^4.0.1"
-
 jest-watcher@^29.0.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.5.0.tgz#cf7f0f949828ba65ddbbb45c743a382a4d911363"
@@ -12967,6 +13164,20 @@ jest-watcher@^29.6.2:
     jest-util "^29.6.2"
     string-length "^4.0.1"
 
+jest-watcher@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.7.0.tgz#7810d30d619c3a62093223ce6bb359ca1b28a2f2"
+  integrity sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==
+  dependencies:
+    "@jest/test-result" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    jest-util "^29.7.0"
+    string-length "^4.0.1"
+
 jest-worker@^27.4.5:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
@@ -12976,15 +13187,6 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest-worker@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-28.1.3.tgz#7e3c4ce3fa23d1bb6accb169e7f396f98ed4bb98"
-  integrity sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
 jest-worker@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.5.0.tgz#bdaefb06811bd3384d93f009755014d8acb4615d"
@@ -13005,15 +13207,15 @@ jest-worker@^29.6.2:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest@^28.0.0:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-28.1.3.tgz#e9c6a7eecdebe3548ca2b18894a50f45b36dfc6b"
-  integrity sha512-N4GT5on8UkZgH0O5LUavMRV1EDEhNTL0KEfRmDIeZHSV7p2XgLoY9t9VDUgL6o+yfdgYHVxuz81G8oB9VG5uyA==
+jest-worker@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.7.0.tgz#acad073acbbaeb7262bd5389e1bcf43e10058d4a"
+  integrity sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==
   dependencies:
-    "@jest/core" "^28.1.3"
-    "@jest/types" "^28.1.3"
-    import-local "^3.0.2"
-    jest-cli "^28.1.3"
+    "@types/node" "*"
+    jest-util "^29.7.0"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
 
 jest@^29.6.2:
   version "29.6.2"
@@ -13025,6 +13227,16 @@ jest@^29.6.2:
     import-local "^3.0.2"
     jest-cli "^29.6.2"
 
+jest@^29.6.4:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-29.7.0.tgz#994676fc24177f088f1c5e3737f5697204ff2613"
+  integrity sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==
+  dependencies:
+    "@jest/core" "^29.7.0"
+    "@jest/types" "^29.6.3"
+    import-local "^3.0.2"
+    jest-cli "^29.7.0"
+
 joi@^17.3.0:
   version "17.9.1"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.9.1.tgz#74899b9fa3646904afa984a11df648eca66c9018"
@@ -14271,11 +14483,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"
@@ -15271,7 +15478,7 @@ parse5@^7.0.0, parse5@^7.1.1:
   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==
@@ -15445,10 +15652,10 @@ playwright-core@1.32.2, playwright-core@>=1.2.0:
   resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.32.2.tgz#608810c3c4486fb86a224732ac0d3560a96ded8b"
   integrity sha512-zD7aonO+07kOTthsrCR3YCVnDcqSHIJpdFUtZEMOb6//1Rc7/6mZDRdw+nlzcQiQltOOsiqI3rrSyn/SlyjnJQ==
 
-playwright-core@1.36.2:
-  version "1.36.2"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.36.2.tgz#32382f2d96764c24c65a86ea336cf79721c2e50e"
-  integrity sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==
+playwright-core@1.40.0:
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.0.tgz#82f61e5504cb3097803b6f8bbd98190dd34bdf14"
+  integrity sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==
 
 playwright@^1.14.0:
   version "1.32.2"
@@ -15457,12 +15664,14 @@ playwright@^1.14.0:
   dependencies:
     playwright-core "1.32.2"
 
-playwright@^1.36.2:
-  version "1.36.2"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.36.2.tgz#4f25272209a31ad1138d7b9868e0325159f003e3"
-  integrity sha512-4Fmlq3KWsl85Bl4InJw1NC21aeQV0iSZuFvTDcy1F8zVmXmgQRe89GxF8zMSRt/KIS+2tUolak7EXVl9aC+JdA==
+playwright@^1.39.0:
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.40.0.tgz#2a1824b9fe5c4fe52ed53db9ea68003543a99df0"
+  integrity sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==
   dependencies:
-    playwright-core "1.36.2"
+    playwright-core "1.40.0"
+  optionalDependencies:
+    fsevents "2.3.2"
 
 please-upgrade-node@^3.2.0:
   version "3.2.0"
@@ -15676,16 +15885,6 @@ pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.5.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^28.1.3:
-  version "28.1.3"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.3.tgz#c9fba8cedf99ce50963a11b27d982a9ae90970d5"
-  integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
-  dependencies:
-    "@jest/schemas" "^28.1.3"
-    ansi-regex "^5.0.1"
-    ansi-styles "^5.0.0"
-    react-is "^18.0.0"
-
 pretty-format@^29.0.0, pretty-format@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.5.0.tgz#283134e74f70e2e3e7229336de0e4fce94ccde5a"
@@ -15704,6 +15903,15 @@ pretty-format@^29.6.2:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+pretty-format@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
+  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
 pretty-format@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
@@ -16503,11 +16711,6 @@ resolve-global@^1.0.0:
   dependencies:
     global-dirs "^0.1.1"
 
-resolve.exports@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999"
-  integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
-
 resolve.exports@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
@@ -16688,11 +16891,6 @@ rxjs@^7.5.1, rxjs@^7.5.5:
   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"
@@ -16839,7 +17037,7 @@ semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.5.3:
+semver@^7.5.3, semver@^7.5.4:
   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==
@@ -16888,17 +17086,6 @@ serialize-javascript@^6.0.1:
   dependencies:
     randombytes "^2.1.0"
 
-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-static@1.15.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
@@ -17249,17 +17436,17 @@ storybook-addon-emotion-theme@^2.1.1:
     immutable "^3.8.2"
     recompose "^0.27.1"
 
-storybook-addon-pseudo-states@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/storybook-addon-pseudo-states/-/storybook-addon-pseudo-states-2.1.1.tgz#9f9c37c234d9860937791c01488efc37bbda2127"
-  integrity sha512-f6x4ZDTNlG888KVFEvGpaxqUReCfTweHIOm01LF7vC0/T5c7NHxqdjZ1/1C+nTNjmYqxKwud6/IgG9ZVv1gRsA==
+storybook-addon-pseudo-states@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/storybook-addon-pseudo-states/-/storybook-addon-pseudo-states-2.1.2.tgz#9a04b8b97abecba69a47eca37966e297d15f924f"
+  integrity sha512-AHv6q1JiQEUnMyZE3729iV6cNmBW7bueeytc4Lga4+8W1En8YNea5VjqAdrDNJhXVU0QEEIGtxkD3EoC9aVWLw==
 
-storybook@^7.4.5:
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.4.5.tgz#3456d2de3b28661b0a853c0ecbbdf2f6d695ac4f"
-  integrity sha512-J7fidphTJ6SJHlR8f/USQE30K6ipbynLVLsTOz0bNYW/0Ua2t9u6dAYGbbq6bLikl3zxzQbdm9lXMUzmaYAdIA==
+storybook@^7.5.3:
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.5.3.tgz#0003b072736b8b15c3b7205e9775d0c5ec898b4d"
+  integrity sha512-lkn9hcedNmSNCzbDIrky2LpZJqlpS7Fy1KpGBZmLY34g5Mb0+KnXaUqzY0dxsd7aFm8Oa7Du/emceMYNNL4DMA==
   dependencies:
-    "@storybook/cli" "7.4.5"
+    "@storybook/cli" "7.5.3"
 
 stream-buffers@^3.0.2:
   version "3.0.2"
@@ -17569,21 +17756,13 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.0.0, supports-color@^7.1.0:
+supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
-supports-hyperlinks@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624"
-  integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==
-  dependencies:
-    has-flag "^4.0.0"
-    supports-color "^7.0.0"
-
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -17745,14 +17924,6 @@ tempy@^1.0.1:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-terminal-link@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
-  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    supports-hyperlinks "^2.0.0"
-
 terser-webpack-plugin@^5.3.1, terser-webpack-plugin@^5.3.7:
   version "5.3.7"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz#ef760632d24991760f339fe9290deb936ad1ffc7"
@@ -18153,6 +18324,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+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"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -18817,7 +18993,7 @@ write-file-atomic@^3.0.0, write-file-atomic@^3.0.3:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-write-file-atomic@^4.0.1, write-file-atomic@^4.0.2:
+write-file-atomic@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd"
   integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==
@@ -19018,10 +19194,10 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zod@^3.21.4:
-  version "3.21.4"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
-  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
+zod@^3.22.4:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
+  integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
 
 zrender@5.4.4:
   version "5.4.4"