diff --git a/packages/.omletrc.json b/.omletrc.json
similarity index 100%
rename from packages/.omletrc.json
rename to .omletrc.json
diff --git a/.prettierrc.js b/.prettierrc.js
index 869157986..0f53d681d 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -5,4 +5,5 @@ module.exports = {
   endOfLine: "lf",
   tabWidth: 2,
   trailingComma: "es5",
+  printWidth: 80,
 };
diff --git a/.storybook/components/SidebarItem/SidebarItem.tsx b/.storybook/components/SidebarItem/SidebarItem.tsx
new file mode 100644
index 000000000..19c707c61
--- /dev/null
+++ b/.storybook/components/SidebarItem/SidebarItem.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { StyledSidebarItem } from "./style";
+import StatusTag from "../StatusTag/StatusTag";
+
+export type StatusType = "beta" | "deprecated" | "wip";
+
+interface SidebarItemProps {
+  children: React.ReactNode;
+  status: StatusType;
+}
+
+const SidebarItem = ({ children, status }: SidebarItemProps) => {
+  return (
+    <StyledSidebarItem>
+      <div>{children}</div>
+      <StatusTag type={status}>{status}</StatusTag>
+    </StyledSidebarItem>
+  );
+};
+
+export default SidebarItem;
diff --git a/.storybook/components/SidebarItem/style.ts b/.storybook/components/SidebarItem/style.ts
new file mode 100644
index 000000000..a58697e58
--- /dev/null
+++ b/.storybook/components/SidebarItem/style.ts
@@ -0,0 +1,8 @@
+import { styled } from "@mui/material";
+
+export const StyledSidebarItem = styled("div")`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
diff --git a/.storybook/components/StatusTag/StatusTag.tsx b/.storybook/components/StatusTag/StatusTag.tsx
new file mode 100644
index 000000000..44fa6a093
--- /dev/null
+++ b/.storybook/components/StatusTag/StatusTag.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from "react";
+import { StyledLabel } from "./style";
+import { StatusType } from "../SidebarItem/SidebarItem";
+
+interface StatusTagProps {
+  children: React.ReactNode;
+  type: StatusType;
+}
+
+const TypeToLabel: Record<StatusType, string> = {
+  beta: "Beta",
+  deprecated: "Deprecated",
+  wip: "Work in Progress",
+};
+
+const StatusTag: FC<StatusTagProps> = ({ type }) => {
+  const label = TypeToLabel[type];
+
+  return <StyledLabel type={type}>{label}</StyledLabel>;
+};
+
+export default StatusTag;
diff --git a/.storybook/components/StatusTag/style.ts b/.storybook/components/StatusTag/style.ts
new file mode 100644
index 000000000..caf4013bb
--- /dev/null
+++ b/.storybook/components/StatusTag/style.ts
@@ -0,0 +1,36 @@
+import { styled } from "@mui/material";
+import { StatusType } from "../SidebarItem/SidebarItem";
+
+interface StyledLabelProps {
+  type: StatusType;
+}
+
+const TypeToColor: Record<StatusType, string> = {
+  beta: "#703CBE",
+  deprecated: "#C61128",
+  wip: "#D8921F",
+};
+
+const TypeToBorderColor: Record<StatusType, string> = {
+  beta: "#7A41CE",
+  deprecated: "#DC132C",
+  wip: "#F5A623",
+};
+
+export const StyledLabel = styled("label")`
+  ${(props: StyledLabelProps) => {
+    const { type } = props;
+    const color = TypeToColor[type];
+    const borderColor = TypeToBorderColor[type];
+
+    return `
+            margin: 0 16px 0 8px;
+            padding: 1px 4px;
+            font-size: 10px;
+            font-weight: 600;
+            color: ${color};
+            border: solid 1px ${borderColor};
+            border-radius: 2px;
+        `;
+  }}
+`;
diff --git a/.storybook/main.js b/.storybook/main.js
index 26c51641b..88527bfe3 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -35,6 +35,7 @@ module.exports = {
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/react"),
     getAbsolutePath("storybook-addon-pseudo-states"),
+    getAbsolutePath("@geometricpanda/storybook-addon-badges"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-webpack5"),
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index 37555a6a0..d548c754d 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -1,27 +1,30 @@
-<meta property="og:description" content="SDS design system by CZI" />
-<meta property="og:title" content="Vibe Design System" />
+<meta property="og:description" content="Science Design System by CZI" />
+<meta property="og:title" content="Science Design System" />
 <link
   rel="icon"
   type="image/png"
   href="https://user-images.githubusercontent.com/927990/204130290-897628ee-e89a-4911-89df-0956c9edf940.png"
   sizes="48x48"
 />
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <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"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
-  crossorigin="anonymous"
 />
 <title>SDS Design System</title>
 <style>
   body {
-    font-family: "Open Sans", sans-serif !important;
+    font-family: "Inter", sans-serif !important;
     font-size: 14px;
   }
 
   #storybook-explorer-menu svg {
     color: #555;
-    margin-top: 4px;
   }
 
   #storybook-explorer-menu button:focus,
@@ -62,17 +65,14 @@
     background-color: transparent !important;
   }
 
-  #storybook-explorer-menu button.sidebar-item {
-    font-size: 14px;
-    padding: 5px 3px 5px 2px;
-  }
-
+  #storybook-explorer-menu button.sidebar-item,
   #storybook-explorer-menu a.sidebar-item {
     font-size: 14px;
-    padding: 5px 3px 5px 34px;
+    padding-top: 5px;
+    padding-bottom: 5px;
   }
 
-  #storybook-explorer-menu .sidebar-item > span {
+  #storybook-explorer-menu .sidebar-item > div > span {
     display: inline-block;
     position: relative;
     border-style: solid;
@@ -90,11 +90,13 @@
     margin-right: 6px;
   }
 
-  #storybook-explorer-menu .sidebar-item > span {
-    margin-top: 7px;
+  #storybook-explorer-menu .sidebar-item[data-selected="true"] {
+    background-color: #eaeaea;
+    color: black;
+    font-weight: 600;
   }
 
-  #storybook-explorer-menu .sidebar-item[aria-expanded="true"] > span,
+  #storybook-explorer-menu .sidebar-item[aria-expanded="true"] > div > span,
   #storybook-explorer-menu
     .sidebar-subheading[aria-expanded="true"]
     > button
@@ -105,7 +107,7 @@
 <script>
   //workaround to increase the left panel width just enough to show even the longer story names
   //based on https://github.com/storybookjs/storybook/issues/9682#issuecomment-983356523
-  const DEFAULT_MINIMUM_LEFT_PANEL_WIDTH = 260; // original default is 230
+  const DEFAULT_MINIMUM_LEFT_PANEL_WIDTH = 280; // original default is 230
   let storybookConfig = JSON.parse(localStorage.getItem("storybook-layout"));
 
   // we only resize the left panel if it is set to a value lower than DEFAULT_MINIMUM_LEFT_PANEL_WIDTH
@@ -132,7 +134,7 @@
     ).firstChild;
     bookmarkHollowIcon.setAttribute(
       "d",
-      "M 13.762 6.202 C 13.87 6.452 13.927 6.724 13.927 7.001 C 13.927 7.275 13.87 7.548 13.762 7.799 C 13.656 8.049 13.498 8.272 13.303 8.451 L 8.873 12.502 C 8.711 12.65 8.504 12.731 8.29 12.731 L 0.968 12.731 C 0.731 12.731 0.503 12.631 0.336 12.452 C 0.168 12.273 0.073 12.03 0.073 11.775 L 0.073 2.224 C 0.073 1.971 0.168 1.727 0.336 1.548 C 0.503 1.369 0.731 1.269 0.968 1.269 L 8.29 1.269 C 8.504 1.269 8.711 1.35 8.873 1.499 L 13.303 5.55 C 13.498 5.729 13.656 5.952 13.762 6.202 Z M 11.862 7.553 C 11.929 7.492 11.988 7.412 12.029 7.315 C 12.071 7.219 12.093 7.11 12.093 7.001 C 12.093 6.889 12.071 6.782 12.029 6.684 C 11.988 6.589 11.929 6.508 11.862 6.447 L 7.885 2.809 L 1.594 2.809 L 1.594 11.191 L 7.885 11.191 L 11.862 7.553 Z"
+      "M 13.762 6.202 C 13.87 6.452 13.927 6.724 13.927 7.001 C 13.927 7.275 13.87 7.548 13.762 7.799 C 13.656 8.049 13.498 8.272 13.303 8.451 L 8.873 12.502 C 8.711 12.65 8.504 12.731 8.29 12.731 L 0.968 12.731 C 0.731 12.731 0.503 12.631 0.336 12.452 C 0.168 12.273 0.073 12.03 0.073 11.775 L 0.073 2.224 C 0.073 1.971 0.168 1.727 0.336 1.548 C 0.503 1.369 0.731 1.269 0.968 1.269 L 8.29 1.269 C 8.504 1.269 8.711 1.35 8.873 1.499 L 13.303 5.55 C 13.498 5.729 13.656 5.952 13.762 6.202 Z M 12.508 7.538 C 12.575 7.477 12.634 7.397 12.675 7.3 C 12.717 7.204 12.739 7.095 12.739 6.986 C 12.739 6.874 12.717 6.767 12.675 6.669 C 12.634 6.574 12.575 6.493 12.508 6.432 L 8.161 2.346 L 1.085 2.34 L 1.106 11.659 L 8.28 11.628 L 12.508 7.538 Z"
     );
     bookmarkHollowIcon.setAttribute("fill-rule", "evenodd");
   });
diff --git a/.storybook/manager.js b/.storybook/manager.js
index 0e272484e..bda060b46 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,8 +1,25 @@
 // .storybook/manager.js
-
+import React from "react";
 import { addons } from "@storybook/addons";
 import sdsTheme from "./sds-theme";
+import SidebarItem from "./components/SidebarItem/SidebarItem";
 
 addons.setConfig({
   theme: sdsTheme,
+  sidebar: {
+    renderLabel: ({ name }) => {
+      const statusRegex = /\[([^)]+)]/gi;
+      const [statusMatch, statusType] = statusRegex.exec(name) || [];
+
+      if (statusMatch) {
+        return (
+          <SidebarItem status={statusType}>
+            {name.replace(statusMatch, "").trim()}
+          </SidebarItem>
+        );
+      }
+
+      return name;
+    },
+  },
 });
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index af5a2d62c..8327994b4 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,6 +1,10 @@
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <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"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
-  crossorigin="anonymous"
 />
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 10b92e954..61eb78a53 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,6 @@
 import { defaultTheme } from "../packages/components/src/core/styles";
 import { ThemeProvider } from "@mui/material/styles";
+import { BADGE } from "../packages/components/src/common/storybook/storybookBadges";
 
 export const decorators = [
   (Story) => (
@@ -18,5 +19,60 @@ const preview = {
   globalTypes: {
     pseudo: {},
   },
+  parameters: {
+    badgesConfig: {
+      [BADGE.BETA]: {
+        styles: {
+          backgroundColor: "#F4F0F9",
+          borderColor: "#7A41CE",
+          borderRadius: 2,
+          color: "#703CBE",
+        },
+        title: "Beta",
+      },
+      [BADGE.DEPRECATED]: {
+        styles: {
+          backgroundColor: "#FEF2F2",
+          borderColor: "#DC132C",
+          borderRadius: 2,
+          color: "#C61128",
+        },
+        title: "Deprecated",
+      },
+      [BADGE.NEEDS_REVISION]: {
+        styles: {
+          backgroundColor: "#F8F8F8",
+          borderColor: "#999999",
+          borderRadius: 2,
+          color: "#767676",
+        },
+        title: "Needs Revision",
+      },
+      [BADGE.STABLE]: {
+        styles: {
+          backgroundColor: "#ECF5F0",
+          borderColor: "#3CB371",
+          borderRadius: 2,
+          color: "#349A61",
+        },
+        title: "Stable",
+      },
+      [BADGE.WIP]: {
+        styles: {
+          backgroundColor: "#FCF6EC",
+          borderColor: "#F5A623",
+          borderRadius: 2,
+          color: "#D8921F",
+        },
+        title: "Work in progress",
+      },
+    },
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: ["Bases", "Components", "Data Viz", "Deprecated"],
+      },
+    },
+  },
 };
 export default preview;
diff --git a/.storybook/sds-theme.js b/.storybook/sds-theme.js
index b77d00f1b..9bd1f5c25 100644
--- a/.storybook/sds-theme.js
+++ b/.storybook/sds-theme.js
@@ -15,7 +15,7 @@ export default create({
   appBorderRadius: 0,
 
   // Typography
-  fontBase: '"Open Sans", sans-serif',
+  fontBase: '"Inter", sans-serif',
   fontCode: "monospace",
 
   // Text colors
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
new file mode 100644
index 000000000..2a539e51e
Binary files /dev/null and b/.yarn/install-state.gz differ
diff --git a/README.md b/README.md
index 15fe574f8..57d89ceea 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ The Science Design System (SDS) brings consistency and universal standards to CZ
 
 ## Design System Documentation
 
-`@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spacings`, `typography`, etc., so you can leverage the theme properly in your application.
+`@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spaces`, `typography`, etc., so you can leverage the theme properly in your application.
 
 ![Science Design System Zeroheight Homepage Snapshot](https://user-images.githubusercontent.com/6309723/155802483-366008aa-7380-4a01-b356-ae0ab02f4f3b.png)
 
@@ -93,24 +93,24 @@ export const Title - styled(Typography)`
 
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { getColors, getCorners } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way
   // to access the custom theme object
-      ${(props) => {
-        // getColors() is a selector that picks out colors from the theme object
-        const colors = getColors(props);
-        // getSpaces() is a selector that picks out spacings from the theme object
-        const spacings = getSpaces(props);
+  ${(props) => {
+    // getColors() is a selector that picks out colors from the theme object
+    const colors = getColors(props);
+    // getSpaces() is a selector that picks out spaces from the theme object
+    const spaces = getSpaces(props);
 
-        return `
+    return `
           background-color: ${colors?.gray[500]};
-          padding-bottom: ${spacings?.m}px;
-          margin-bottom: ${spacings?.xxl}px;
+          padding-bottom: ${spaces?.m}px;
+          margin-bottom: ${spaces?.xxl}px;
         `;
-      }}
+  }}
 `;
 ```
 
@@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
 
 ```html
 // installs the sds font from google fonts
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
 <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"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
 />
 ```
diff --git a/jest.common.config.js b/jest.common.config.js
index ed4020b59..28134fa94 100644
--- a/jest.common.config.js
+++ b/jest.common.config.js
@@ -3,6 +3,20 @@ module.exports = {
   preset: "ts-jest",
   setupFilesAfterEnv: ["./jest.setup.ts"],
   testEnvironment: "jsdom",
+  /**
+   * A list of paths to directories that Jest should use to search for files in.
+   * The first two paths are the default paths that Jest uses to search for files.
+   * The third path specifies the namespace-test files that we want to exclude from the test run.
+   * The fourth path specifies the storybook files that we want to exclude from the test run.
+   *
+   * https://jestjs.io/docs/configuration#testmatch-arraystring
+   */
+  testMatch: [
+    "**/__tests__/**/*.[jt]s?(x)",
+    "**/?(*.)+(spec|test).[jt]s?(x)",
+    "!**/__tests__/**/*.namespace-test.[jt]s?(x)",
+    "!**/__storybook__/**/*",
+  ],
   transform: {
     "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "../../fileTransformer.js",
diff --git a/package.json b/package.json
index 2acd3b8f9..23c0e6598 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@geometricpanda/storybook-addon-badges": "^2.0.2",
     "@mui/base": "^5.0.0-beta.30",
     "@mui/icons-material": "^5.15.3",
     "@mui/lab": "^5.0.0-alpha.159",
@@ -26,22 +27,22 @@
     "@reduxjs/toolkit": "^2.1.0",
     "@rollup/plugin-typescript": "^11.1.5",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^7.6.16",
-    "@storybook/addon-actions": "^7.6.16",
-    "@storybook/addon-essentials": "^7.6.16",
-    "@storybook/addon-interactions": "^7.6.16",
-    "@storybook/addon-links": "^7.6.16",
-    "@storybook/addon-storyshots": "^7.6.16",
-    "@storybook/addons": "^7.6.16",
-    "@storybook/components": "^7.6.16",
-    "@storybook/core-events": "^7.6.16",
-    "@storybook/manager-api": "^7.6.16",
-    "@storybook/preview-api": "^7.6.16",
-    "@storybook/react": "^7.6.16",
-    "@storybook/react-webpack5": "^7.6.16",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-storyshots": "^7.6.17",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/components": "^7.6.17",
+    "@storybook/core-events": "^7.6.17",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/preview-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.16",
+    "@storybook/theming": "^7.6.17",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^9.3.3",
@@ -113,7 +114,7 @@
     "sass": "^1.70.0",
     "sass-loader": "^14.1.0",
     "simplex-noise": "^4.0.1",
-    "storybook": "^7.6.16",
+    "storybook": "^7.6.17",
     "storybook-addon-emotion-theme": "^2.1.1",
     "storybook-addon-pseudo-states": "^2.1.2",
     "style-dictionary": "^3.9.2",
diff --git a/packages/components/README.md b/packages/components/README.md
index 15fe574f8..57d89ceea 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -4,7 +4,7 @@ The Science Design System (SDS) brings consistency and universal standards to CZ
 
 ## Design System Documentation
 
-`@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spacings`, `typography`, etc., so you can leverage the theme properly in your application.
+`@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spaces`, `typography`, etc., so you can leverage the theme properly in your application.
 
 ![Science Design System Zeroheight Homepage Snapshot](https://user-images.githubusercontent.com/6309723/155802483-366008aa-7380-4a01-b356-ae0ab02f4f3b.png)
 
@@ -93,24 +93,24 @@ export const Title - styled(Typography)`
 
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { getColors, getCorners } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way
   // to access the custom theme object
-      ${(props) => {
-        // getColors() is a selector that picks out colors from the theme object
-        const colors = getColors(props);
-        // getSpaces() is a selector that picks out spacings from the theme object
-        const spacings = getSpaces(props);
+  ${(props) => {
+    // getColors() is a selector that picks out colors from the theme object
+    const colors = getColors(props);
+    // getSpaces() is a selector that picks out spaces from the theme object
+    const spaces = getSpaces(props);
 
-        return `
+    return `
           background-color: ${colors?.gray[500]};
-          padding-bottom: ${spacings?.m}px;
-          margin-bottom: ${spacings?.xxl}px;
+          padding-bottom: ${spaces?.m}px;
+          margin-bottom: ${spaces?.xxl}px;
         `;
-      }}
+  }}
 `;
 ```
 
@@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
 
 ```html
 // installs the sds font from google fonts
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
 <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"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
 />
 ```
diff --git a/packages/components/docs/eng-how-to.md b/packages/components/docs/eng-how-to.md
index 000c20e7f..0b77ae811 100644
--- a/packages/components/docs/eng-how-to.md
+++ b/packages/components/docs/eng-how-to.md
@@ -78,24 +78,24 @@ export const Title - styled(Typography)`
 
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { getColors, getCorners } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way
   // to access the custom theme object
-      ${(props) => {
-        //  getColors() is a selector that picks out colors from the theme object
-        const colors = getColors(props);
-        // getSpaces() is a selector that picks out spacings from the theme object
-        const spacings = getSpaces(props);
+  ${(props) => {
+    //  getColors() is a selector that picks out colors from the theme object
+    const colors = getColors(props);
+    // getSpaces() is a selector that picks out spaces from the theme object
+    const spaces = getSpaces(props);
 
-        return `
+    return `
           background-color: ${colors?.gray[500]};
-          padding-bottom: ${spacings?.m}px;
-          margin-bottom: ${spacings?.xxl}px;
+          padding-bottom: ${spaces?.m}px;
+          margin-bottom: ${spaces?.xxl}px;
         `;
-      }}
+  }}
 `;
 ```
 
@@ -125,9 +125,14 @@ To use the default theme in your React application, complete the following:
 
 ```html
 // installs the sds font from google fonts
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
 <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"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
 />
 ```
diff --git a/packages/components/src/common/customSvgIcon.tsx b/packages/components/src/common/customSvgIcon.tsx
deleted file mode 100644
index 9ca94d667..000000000
--- a/packages/components/src/common/customSvgIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { SvgIcon, SvgIconProps } from "@mui/material";
-
-/**
- * CustomSvgIcon is a component that extends the SvgIcon component from the Material-UI library.
- * It allows easy usage of custom SVG icons with in the storybook demos.
- */
-function CustomSvgIcon(props: SvgIconProps) {
-  return (
-    <SvgIcon color="primary" viewBox="2 2 20 20" {...props}>
-      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-    </SvgIcon>
-  );
-}
-
-export default CustomSvgIcon;
diff --git a/packages/components/src/common/helpers/scrollStop.ts b/packages/components/src/common/helpers/scrollStop.ts
index 3024162ed..492fea308 100644
--- a/packages/components/src/common/helpers/scrollStop.ts
+++ b/packages/components/src/common/helpers/scrollStop.ts
@@ -54,7 +54,7 @@ const useScrollStopListener = (callback: () => void, timeout = 50) => {
       }
     }, timeout);
     return () => destroyListener();
-  }, []);
+  }, [timeout]);
 };
 
 export default useScrollStopListener;
diff --git a/packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx b/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
similarity index 77%
rename from packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
rename to packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
index bf0511f2a..a5d89f76e 100644
--- a/packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
+++ b/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
@@ -1,12 +1,12 @@
 // (masoudmanson): The unit tests rely on the content in this file; do not alter it!
 
-import Icon from "../core/Icon";
+import Icon from "../../core/Icon";
 import CustomSdsIcon from "./customSdsIcon";
 import CustomSvgIcon from "./customSvgIcon";
 
 export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
   {
-    icon: <Icon sdsIcon="chevronRight" sdsSize="xs" sdsType="static" />,
+    icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" sdsType="static" />,
     name: "Column One",
     options: [
       {
@@ -35,7 +35,7 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
     width: 260,
   },
   {
-    icon: <Icon sdsIcon="chevronRight" sdsSize="xs" sdsType="static" />,
+    icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" sdsType="static" />,
     name: "Column Two",
     options: [
       {
@@ -68,57 +68,65 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
     name: "Column Three",
     options: [
       {
-        icon: <CustomSdsIcon sdsSize="s" color="gray" />,
+        icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
         name: "Custom SDS Icon",
         section: "With Icon",
       },
       {
-        icon: <CustomSvgIcon sx={{ color: "#999", height: 14, width: 14 }} />,
+        icon: (
+          <CustomSvgIcon sx={{ color: "#767676", height: 16, width: 16 }} />
+        ),
         name: "Custom SVG Icon",
         section: "With Icon",
       },
       {
-        icon: "puzzlePiece",
+        icon: "PuzzlePiece",
         name: "Puzzle Piece",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
         count: 10,
-        icon: "copy",
+        icon: "Copy",
         name: "Copy",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
-        icon: "lightBulb",
+        icon: "LightBulb",
         name: "Light Bulb",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
         count: 6,
-        icon: "list",
+        icon: "List",
         name: "List",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
-        icon: "treeVertical",
+        icon: "TreeVertical",
         name: "Vertical Tree",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
-        icon: "link",
+        icon: "Link",
         name: "Link",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
     ],
diff --git a/packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx b/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
similarity index 81%
rename from packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
rename to packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
index 284df1324..fb9aab65e 100644
--- a/packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
+++ b/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
@@ -1,6 +1,6 @@
 // (masoudmanson): The unit tests rely on the content in this file; do not alter it!
 
-import Tag from "../core/Tag";
+import Tag from "../../core/Tag";
 import CustomSdsIcon from "./customSdsIcon";
 import CustomSvgIcon from "./customSvgIcon";
 
@@ -34,63 +34,68 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     section: "name with details",
   },
   {
-    icon: <CustomSdsIcon sdsSize="s" color="gray" />,
+    icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
     name: "Custom SDS Icon",
     section: "With Icon",
   },
   {
-    icon: <CustomSvgIcon sx={{ color: "#999", height: 14, width: 14 }} />,
+    icon: <CustomSvgIcon sx={{ color: "#767676", height: 16, width: 16 }} />,
     name: "Custom SVG Icon",
     section: "With Icon",
   },
   {
-    icon: "puzzlePiece",
+    icon: "PuzzlePiece",
     name: "Puzzle Piece",
     sdsIconProps: {
       color: "gray",
-      sdsSize: "xl",
+      shade: 500,
     },
     section: "With Icon",
   },
   {
     count: 10,
-    icon: "copy",
+    icon: "Copy",
     name: "Copy",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
   {
-    icon: "lightBulb",
+    icon: "LightBulb",
     name: "Light Bulb",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
   {
     count: 6,
-    icon: "list",
+    icon: "List",
     name: "List",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
   {
-    icon: "treeVertical",
+    icon: "TreeVertical",
     name: "Vertical Tree",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
   {
-    icon: "link",
+    icon: "Link",
     name: "Link",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
@@ -103,21 +108,21 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
             label="bug"
             sdsStyle="rounded"
             sdsType="secondary"
-            color="error"
+            color="negative"
             hover={false}
           />
           <Tag
             label="feature"
             sdsStyle="rounded"
             sdsType="secondary"
-            color="warning"
+            color="notice"
             hover={false}
           />
           <Tag
             label="refactor"
             sdsStyle="rounded"
             sdsType="secondary"
-            color="gray"
+            color="neutral"
             hover={false}
           />
         </div>
diff --git a/packages/components/src/common/customSdsIcon.tsx b/packages/components/src/common/storybook/customSdsIcon.tsx
similarity index 56%
rename from packages/components/src/common/customSdsIcon.tsx
rename to packages/components/src/common/storybook/customSdsIcon.tsx
index 5d2f4077c..426184503 100644
--- a/packages/components/src/common/customSdsIcon.tsx
+++ b/packages/components/src/common/storybook/customSdsIcon.tsx
@@ -1,4 +1,4 @@
-import Icon, { IconProps } from "../core/Icon";
+import Icon, { IconProps } from "../../core/Icon";
 
 /**
  * CustomSdsIcon is an Icon component built on top of the core SDS Icon.
@@ -6,16 +6,18 @@ import Icon, { IconProps } from "../core/Icon";
  * allowing easy customization.
  */
 function CustomSdsIcon(props: {
-  sdsIcon?: IconProps<"bacteria">["sdsIcon"];
-  sdsSize?: IconProps<"bacteria">["sdsSize"];
-  sdsType?: IconProps<"bacteria">["sdsType"];
-  color?: IconProps<"bacteria">["color"];
+  sdsIcon?: IconProps<"Bacteria">["sdsIcon"];
+  sdsSize?: IconProps<"Bacteria">["sdsSize"];
+  sdsType?: IconProps<"Bacteria">["sdsType"];
+  color?: IconProps<"Bacteria">["color"];
+  shade?: IconProps<"Bacteria">["shade"];
 }) {
   const {
-    sdsIcon = "bacteria",
+    sdsIcon = "Bacteria",
     sdsSize = "l",
     sdsType = "static",
-    color = "primary",
+    color = "blue",
+    shade = 400,
     ...rest
   } = props;
   return (
@@ -24,6 +26,7 @@ function CustomSdsIcon(props: {
       sdsSize={sdsSize}
       sdsType={sdsType}
       color={color}
+      shade={shade}
       {...rest}
     />
   );
diff --git a/packages/components/src/common/storybook/customSvgIcon.tsx b/packages/components/src/common/storybook/customSvgIcon.tsx
new file mode 100644
index 000000000..ca309ebaa
--- /dev/null
+++ b/packages/components/src/common/storybook/customSvgIcon.tsx
@@ -0,0 +1,17 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+/**
+ * CustomSvgIcon is a component that extends the SvgIcon component from the Material-UI library.
+ * It allows easy usage of custom SVG icons with in the storybook demos.
+ */
+function CustomSvgIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon color="primary" viewBox="2 2 20 20" {...props}>
+      <path d="M7 19c-1.1 0-2 .9-2 2h14c0-1.1-.9-2-2-2h-4v-2h3c1.1 0 2-.9 2-2h-8c-1.66 0-3-1.34-3-3 0-1.09.59-2.04 1.46-2.56C8.17 9.03 8 8.54 8 8c0-.21.04-.42.09-.62C6.28 8.13 5 9.92 5 12c0 2.76 2.24 5 5 5v2z"></path>
+      <path d="M10.56 5.51C11.91 5.54 13 6.64 13 8c0 .75-.33 1.41-.85 1.87l.59 1.62.94-.34.34.94 1.88-.68-.34-.94.94-.34-2.74-7.53-.94.34-.34-.94-1.88.68.34.94-.94.35z"></path>
+      <circle cx="10.5" cy="8" r="1.5"></circle>
+    </SvgIcon>
+  );
+}
+
+export default CustomSvgIcon;
diff --git a/packages/components/src/common/storybook/loremIpsum.ts b/packages/components/src/common/storybook/loremIpsum.ts
new file mode 100644
index 000000000..cb2d5dd4e
--- /dev/null
+++ b/packages/components/src/common/storybook/loremIpsum.ts
@@ -0,0 +1,19 @@
+// Extra Short Lorem Ipsum = 1 sentence
+
+export const EXTRA_SHORT_LOREM_IPSUM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`;
+
+// Short Lorem Ipsum = 2 sentences
+
+export const SHORT_LOREM_IPSUM = `${EXTRA_SHORT_LOREM_IPSUM} Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper.`;
+
+// Medium Lorem Ipsum = 5 sentences
+
+export const MEDIUM_LOREM_IPSUM = `${SHORT_LOREM_IPSUM} Urna duis convallis convallis tellus id interdum velit laoreet id. Donec ultrices tincidunt arcu non sodales. Aliquam eleifend mi in nulla posuere.`;
+
+// Long Lorem Ipsum = 1 paragraph
+
+export const LONG_LOREM_IPSUM = `${MEDIUM_LOREM_IPSUM} Quisque id diam vel quam elementum pulvinar. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Id consectetur purus ut faucibus. Molestie at elementum eu facilisis sed odio morbi quis commodo. Et leo duis ut diam. Nulla facilisi cras fermentum odio. Magnis dis parturient montes nascetur ridiculus mus mauris. Maecenas volutpat blandit aliquam etiam erat. Arcu dui vivamus arcu felis bibendum ut tristique. Id porta nibh venenatis cras sed felis eget. Mi ipsum faucibus vitae aliquet nec ullamcorper.`;
+
+// Extra Long Lorem Ipsum = 3 paragraphs
+
+export const EXTRA_LONG_LOREM_IPSUM = `${LONG_LOREM_IPSUM} ${LONG_LOREM_IPSUM}`;
diff --git a/packages/components/src/common/storybook/storybookBadges.ts b/packages/components/src/common/storybook/storybookBadges.ts
new file mode 100644
index 000000000..b0f11a31a
--- /dev/null
+++ b/packages/components/src/common/storybook/storybookBadges.ts
@@ -0,0 +1,9 @@
+import { BADGE as addonBadge } from "@geometricpanda/storybook-addon-badges";
+
+export const BADGE = {
+  BETA: addonBadge.BETA,
+  DEPRECATED: addonBadge.DEPRECATED,
+  NEEDS_REVISION: addonBadge.NEEDS_REVISION,
+  STABLE: addonBadge.STABLE,
+  WIP: "wip",
+};
diff --git a/packages/components/src/common/storybookConstants.ts b/packages/components/src/common/storybook/storybookConstants.ts
similarity index 100%
rename from packages/components/src/common/storybookConstants.ts
rename to packages/components/src/common/storybook/storybookConstants.ts
diff --git a/packages/components/src/common/styles-dictionary/config.js b/packages/components/src/common/styles-dictionary/config.js
index cd3d2cf26..95cbd0658 100644
--- a/packages/components/src/common/styles-dictionary/config.js
+++ b/packages/components/src/common/styles-dictionary/config.js
@@ -23,15 +23,6 @@ module.exports = {
           format: "tailwind",
           options: {
             prefix: "sds",
-            remapNames: {
-              cornerL: "L",
-              cornerM: "M",
-              cornerNone: "none",
-              cornerS: "S",
-              shadowL: "L",
-              shadowM: "M",
-              shadowS: "S",
-            },
           },
         },
       ],
@@ -54,5 +45,5 @@ module.exports = {
       transformGroup: "scss",
     },
   },
-  source: ["src/common/styles-dictionary/*.json"],
+  source: ["src/common/styles-dictionary/design-tokens/*.json"],
 };
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
index 44d5e310c..d4226e663 100644
--- a/packages/components/src/common/styles-dictionary/css/variables.css
+++ b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -1,111 +1,248 @@
 :root {
-  --sds-font-letter-spacing-default: 0.3px;
-  --sds-font-letter-spacing-caps: 1px;
+  --sds-border-negative-default: 1px solid #dc132c;
+  --sds-border-base-divider: 1px solid #eaeaea;
+  --sds-border-base-table: 1px solid #cccccc;
+  --sds-border-base-disabled: 1px solid #cccccc;
+  --sds-border-base-default: 1px solid #999999;
+  --sds-border-base-black: 2px dashed #000000;
+  --sds-border-base-hover: 2px dashed #000000;
+  --sds-border-base-dashed: 2px dashed #999999;
+  --sds-border-link-dashed: 1px dashed;
+  --sds-border-link-solid: 1px solid;
+  --sds-border-accent-disabled: 1px solid #a6c9ff;
+  --sds-border-accent-default: 1px solid #0b68f8;
+  --sds-border-accent-hover: 1px solid #0142a4;
+  --sds-border-accent-dashed: 2px dashed #0b68f8;
+  --sds-border-info-default: 1px solid #0b68f8;
+  --sds-border-beta-default: 1px solid #7a41ce;
+  --sds-border-positive-default: 1px solid #3cb371;
+  --sds-border-notice-default: 1px solid #f5a623;
+  --sds-border-none: none;
+  --sds-color-primitive-common-black: #000000;
+  --sds-color-primitive-common-white: #ffffff;
+  --sds-color-primitive-blue-100: #f5f9ff;
+  --sds-color-primitive-blue-200: #e9f1ff;
+  --sds-color-primitive-blue-300: #a6c9ff;
+  --sds-color-primitive-blue-400: #0b68f8;
+  --sds-color-primitive-blue-500: #0142a4;
+  --sds-color-primitive-blue-600: #002660;
+  --sds-color-primitive-gray-100: #f8f8f8;
+  --sds-color-primitive-gray-200: #eaeaea;
+  --sds-color-primitive-gray-300: #cccccc;
+  --sds-color-primitive-gray-400: #999999;
+  --sds-color-primitive-gray-500: #767676;
+  --sds-color-primitive-gray-600: #545454;
+  --sds-color-primitive-green-100: #ecf5f0;
+  --sds-color-primitive-green-200: #e6f7ed;
+  --sds-color-primitive-green-400: #3cb371;
+  --sds-color-primitive-green-500: #349a61;
+  --sds-color-primitive-green-600: #1c7f48;
+  --sds-color-primitive-purple-100: #f4f0f9;
+  --sds-color-primitive-purple-200: #f0ebf6;
+  --sds-color-primitive-purple-400: #7a41ce;
+  --sds-color-primitive-purple-500: #703cbe;
+  --sds-color-primitive-purple-600: #693bac;
+  --sds-color-primitive-red-100: #fef2f2;
+  --sds-color-primitive-red-200: #f8e8e8;
+  --sds-color-primitive-red-400: #dc132c;
+  --sds-color-primitive-red-500: #c61128;
+  --sds-color-primitive-red-600: #b70016;
+  --sds-color-primitive-yellow-100: #fcf6ec;
+  --sds-color-primitive-yellow-200: #fff3e1;
+  --sds-color-primitive-yellow-400: #f5a623;
+  --sds-color-primitive-yellow-500: #d8921f;
+  --sds-color-primitive-yellow-600: #946314;
+  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
+  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
+  --sds-color-semantic-text-base-primary: #000000;
+  --sds-color-semantic-text-base-secondary: #767676;
+  --sds-color-semantic-text-base-disabled: #cccccc;
+  --sds-color-semantic-text-base-on-fill: #ffffff;
+  --sds-color-semantic-text-base-on-fill-disabled: #999999;
+  --sds-color-semantic-text-base-accent: #002660;
+  --sds-color-semantic-text-action-default: #0b68f8;
+  --sds-color-semantic-text-action-hover: #0142a4;
+  --sds-color-semantic-text-action-pressed: #002660;
+  --sds-color-semantic-text-beta: #693bac;
+  --sds-color-semantic-text-info: #002660;
+  --sds-color-semantic-text-negative: #b70016;
+  --sds-color-semantic-text-notice: #946314;
+  --sds-color-semantic-text-positive: #1c7f48;
+  --sds-color-semantic-component-base-fill: #ffffff;
+  --sds-color-semantic-component-base-fill-hover: #f8f8f8;
+  --sds-color-semantic-component-base-fill-pressed: #f8f8f8;
+  --sds-color-semantic-component-base-fill-open: #f8f8f8;
+  --sds-color-semantic-component-base-fill-selected: #000000;
+  --sds-color-semantic-component-base-fill-disabled: #cccccc;
+  --sds-color-semantic-component-base-on-fill-disabled: #999999;
+  --sds-color-semantic-component-base-surface: #ffffff;
+  --sds-color-semantic-component-base-surface-primary: #ffffff;
+  --sds-color-semantic-component-base-surface-secondary: #f8f8f8;
+  --sds-color-semantic-component-base-surface-tertiary: #eaeaea;
+  --sds-color-semantic-component-base-divider: #eaeaea;
+  --sds-color-semantic-component-base-border: #999999;
+  --sds-color-semantic-component-base-border-hover: #000000;
+  --sds-color-semantic-component-base-border-disabled: #cccccc;
+  --sds-color-semantic-component-base-icon: #767676;
+  --sds-color-semantic-component-base-icon-hover: #000000;
+  --sds-color-semantic-component-base-icon-pressed: #000000;
+  --sds-color-semantic-component-base-icon-disabled: #cccccc;
+  --sds-color-semantic-component-accent-fill: #0b68f8;
+  --sds-color-semantic-component-accent-fill-hover: #0142a4;
+  --sds-color-semantic-component-accent-fill-pressed: #002660;
+  --sds-color-semantic-component-accent-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-accent-fill-disabled: #a6c9ff;
+  --sds-color-semantic-component-accent-surface: #e9f1ff;
+  --sds-color-semantic-component-accent-border: #0b68f8;
+  --sds-color-semantic-component-accent-border-hover: #0142a4;
+  --sds-color-semantic-component-accent-border-open: #0b68f8;
+  --sds-color-semantic-component-accent-border-focus: #0b68f8;
+  --sds-color-semantic-component-accent-border-selected: #0b68f8;
+  --sds-color-semantic-component-accent-border-disabled: #a6c9ff;
+  --sds-color-semantic-component-accent-icon: #0b68f8;
+  --sds-color-semantic-component-beta-fill: #7a41ce;
+  --sds-color-semantic-component-beta-fill-hover: #703cbe;
+  --sds-color-semantic-component-beta-fill-pressed: #693bac;
+  --sds-color-semantic-component-beta-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-beta-surface: #f0ebf6;
+  --sds-color-semantic-component-beta-border: #7a41ce;
+  --sds-color-semantic-component-beta-icon: #7a41ce;
+  --sds-color-semantic-component-info-fill: #0b68f8;
+  --sds-color-semantic-component-info-fill-hover: #0142a4;
+  --sds-color-semantic-component-info-fill-pressed: #002660;
+  --sds-color-semantic-component-info-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-info-surface: #e9f1ff;
+  --sds-color-semantic-component-info-border: #0b68f8;
+  --sds-color-semantic-component-info-icon: #0b68f8;
+  --sds-color-semantic-component-negative-fill: #dc132c;
+  --sds-color-semantic-component-negative-fill-hover: #c61128;
+  --sds-color-semantic-component-negative-fill-pressed: #b70016;
+  --sds-color-semantic-component-negative-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-negative-surface: #f8e8e8;
+  --sds-color-semantic-component-negative-border: #dc132c;
+  --sds-color-semantic-component-negative-icon: #dc132c;
+  --sds-color-semantic-component-neutral-fill: #999999;
+  --sds-color-semantic-component-neutral-fill-hover: #767676;
+  --sds-color-semantic-component-neutral-fill-pressed: #545454;
+  --sds-color-semantic-component-neutral-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-neutral-surface: #eaeaea;
+  --sds-color-semantic-component-neutral-border: #999999;
+  --sds-color-semantic-component-neutral-icon: #999999;
+  --sds-color-semantic-component-notice-fill: #f5a623;
+  --sds-color-semantic-component-notice-fill-hover: #d8921f;
+  --sds-color-semantic-component-notice-fill-pressed: #946314;
+  --sds-color-semantic-component-notice-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-notice-surface: #fff3e1;
+  --sds-color-semantic-component-notice-border: #f5a623;
+  --sds-color-semantic-component-notice-icon: #f5a623;
+  --sds-color-semantic-component-positive-fill: #3cb371;
+  --sds-color-semantic-component-positive-fill-hover: #349a61;
+  --sds-color-semantic-component-positive-fill-pressed: #1c7f48;
+  --sds-color-semantic-component-positive-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-positive-surface: #e6f7ed;
+  --sds-color-semantic-component-positive-border: #3cb371;
+  --sds-color-semantic-component-positive-icon: #3cb371;
+  --sds-corner-l: 20px;
+  --sds-corner-m: 4px;
+  --sds-corner-s: 2px;
+  --sds-corner-none: 0px;
+  --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+  --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+  --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  --sds-drop-shadow-none: none;
   --sds-font-color: black;
-  --sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxs-600-text-transform:  uppercase;
-  --sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-color-overlay-100: rgba(0, 0, 0, 0.08);
-  --sds-color-overlay-200: rgba(0, 0, 0, 0.03);
-  --sds-color-beta-100: #f4f0f9;
-  --sds-color-beta-200: #f0ebf6;
-  --sds-color-beta-400: #7a41ce;
-  --sds-color-beta-600: #693bac;
-  --sds-color-error-100: #fef2f2;
-  --sds-color-error-200: #f8e8e8;
-  --sds-color-error-400: #dc132c;
-  --sds-color-error-600: #b70016;
-  --sds-color-gray-100: #f8f8f8;
-  --sds-color-gray-200: #eaeaea;
-  --sds-color-gray-300: #cccccc;
-  --sds-color-gray-400: #999999;
-  --sds-color-gray-500: #767676;
-  --sds-color-gray-600: #545454;
-  --sds-color-gray-black: #000000;
-  --sds-color-gray-white: #ffffff;
-  --sds-color-info-100: #eff2fc;
-  --sds-color-info-200: #ebeffc;
-  --sds-color-info-400: #3867fa;
-  --sds-color-info-600: #223f9c;
-  --sds-color-primary-100: #f8f9fe;
-  --sds-color-primary-200: #eff2fc;
-  --sds-color-primary-300: #a9bdfc;
-  --sds-color-primary-400: #3867fa;
-  --sds-color-primary-500: #2b52cd;
-  --sds-color-primary-600: #223f9c;
-  --sds-color-secondary-400: #9bc74e;
-  --sds-color-success-100: #ecf5f0;
-  --sds-color-success-200: #e6f7ed;
-  --sds-color-success-400: #3cb371;
-  --sds-color-success-600: #1c7f48;
-  --sds-color-warning-100: #fcf6ec;
-  --sds-color-warning-200: #fff3e1;
-  --sds-color-warning-400: #f5a623;
-  --sds-color-warning-600: #946314;
-  --sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-  --sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-  --sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
-  --sds-borders-error-400: 1px solid #dc132c;
-  --sds-borders-gray-100: 1px solid #f8f8f8;
-  --sds-borders-gray-200: 1px solid #eaeaea;
-  --sds-borders-gray-300: 1px solid #cccccc;
-  --sds-borders-gray-400: 1px solid #999999;
-  --sds-borders-gray-500: 1px solid #767676;
-  --sds-borders-gray-dashed: 2px dashed #999999;
-  --sds-borders-link-dashed: 1px dashed;
-  --sds-borders-link-solid: 1px solid;
-  --sds-borders-primary-300: 1px solid #a9bdfc;
-  --sds-borders-primary-400: 1px solid #3867fa;
-  --sds-borders-primary-500: 1px solid #2b52cd;
-  --sds-borders-primary-600: 1px solid #223f9c;
-  --sds-borders-primary-dashed: 2px dashed #3867fa;
-  --sds-borders-success-400: 1px solid #3cb371;
-  --sds-borders-warning-400: 1px solid #f5a623;
-  --sds-spaces-default: 10px;
-  --sds-spaces-xxxs: 2px;
-  --sds-spaces-xxs: 4px;
-  --sds-spaces-xs: 6px;
-  --sds-spaces-s: 8px;
-  --sds-spaces-m: 10px;
-  --sds-spaces-l: 14px;
-  --sds-spaces-xl: 22px;
-  --sds-spaces-xxl: 38px;
-  --sds-icon-sizes-input-height: 16px;
-  --sds-icon-sizes-input-width: 16px;
-  --sds-icon-sizes-xs-height: 10px;
-  --sds-icon-sizes-xs-width: 10px;
-  --sds-icon-sizes-s-height: 14px;
-  --sds-icon-sizes-s-width: 14px;
-  --sds-icon-sizes-l-height: 22px;
-  --sds-icon-sizes-l-width: 22px;
-  --sds-icon-sizes-xl-height: 32px;
-  --sds-icon-sizes-xl-width: 32px;
-  --sds-corners-corner-l: 20px;
-  --sds-corners-corner-m: 4px;
-  --sds-corners-corner-s: 2px;
-  --sds-corners-corner-none: 0px;
+  --sds-font-font-family-body: "Inter", sans-serif;
+  --sds-font-font-family-caps: "Inter", sans-serif;
+  --sds-font-font-family-code: "IBM Plex Mono", monospace;
+  --sds-font-font-family-header: "Inter", sans-serif;
+  --sds-font-font-family-tabular: "Inter", sans-serif;
+  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
+  --sds-font-body-xxxs-400-letter-spacing: 0.1px;
+  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-body-xxxs-600-letter-spacing: 0.1px;
+  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
+  --sds-font-body-xxs-400-letter-spacing: 0.1px;
+  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-body-xxs-600-letter-spacing: 0.1px;
+  --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
+  --sds-font-body-xs-400-letter-spacing: 0.08px;
+  --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
+  --sds-font-body-xs-600-letter-spacing: 0.08px;
+  --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
+  --sds-font-body-s-400-letter-spacing: 0.08px;
+  --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
+  --sds-font-body-s-600-letter-spacing: 0.08px;
+  --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
+  --sds-font-body-m-400-letter-spacing: 0px;
+  --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
+  --sds-font-body-m-600-letter-spacing: 0px;
+  --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
+  --sds-font-body-l-400-letter-spacing: 0px;
+  --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
+  --sds-font-body-l-600-letter-spacing: 0px;
+  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
+  --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
+  --sds-font-caps-xxxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
+  --sds-font-caps-xxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-caps-xxs-600-letter-spacing: 0.5px;
+  --sds-font-caps-xxs-600-text-transform: uppercase;
+  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-header-xxxs-600-letter-spacing: 0.1px;
+  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-header-xxs-600-letter-spacing: 0.1px;
+  --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
+  --sds-font-header-xs-600-letter-spacing: 0.08px;
+  --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
+  --sds-font-header-s-600-letter-spacing: 0.08px;
+  --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
+  --sds-font-header-m-600-letter-spacing: 0px;
+  --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
+  --sds-font-header-l-600-letter-spacing: 0px;
+  --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
+  --sds-font-header-xl-600-letter-spacing: 0px;
+  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
+  --sds-font-header-xxl-600-letter-spacing: 0px;
+  --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
+  --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-xs-400-letter-spacing: 0px;
+  --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
+  --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-xs-600-letter-spacing: 0px;
+  --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
+  --sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-s-400-letter-spacing: 0px;
+  --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
+  --sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-s-600-letter-spacing: 0px;
+  --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
+  --sds-font-code-xs-400-letter-spacing: 0px;
+  --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
+  --sds-font-code-xs-600-letter-spacing: 0px;
+  --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
+  --sds-font-code-s-400-letter-spacing: 0px;
+  --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
+  --sds-font-code-s-600-letter-spacing: 0px;
+  --sds-icon-size-input-height: 16px;
+  --sds-icon-size-input-width: 16px;
+  --sds-icon-size-xs-height: 12px;
+  --sds-icon-size-xs-width: 12px;
+  --sds-icon-size-s-height: 16px;
+  --sds-icon-size-s-width: 16px;
+  --sds-icon-size-l-height: 24px;
+  --sds-icon-size-l-width: 24px;
+  --sds-icon-size-xl-height: 32px;
+  --sds-icon-size-xl-width: 32px;
+  --sds-space-default: 12px;
+  --sds-space-xxxs: 2px;
+  --sds-space-xxs: 4px;
+  --sds-space-xs: 6px;
+  --sds-space-s: 8px;
+  --sds-space-m: 12px;
+  --sds-space-l: 16px;
+  --sds-space-xl: 24px;
+  --sds-space-xxl: 40px;
 }
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/borders.json b/packages/components/src/common/styles-dictionary/design-tokens/borders.json
new file mode 100644
index 000000000..4464e4cae
--- /dev/null
+++ b/packages/components/src/common/styles-dictionary/design-tokens/borders.json
@@ -0,0 +1,43 @@
+{
+  "sds": {
+    "border": {
+      "negative": {
+        "default": { "value": "1px solid {sds.color.primitive.red.400.value}" }
+      },
+      "base": {
+        "divider": { "value": "1px solid {sds.color.primitive.gray.200.value}" },
+        "table": { "value": "1px solid {sds.color.primitive.gray.300.value}" },
+        "disabled": { "value": "1px solid {sds.color.primitive.gray.300.value}" },
+        "default": { "value": "1px solid {sds.color.primitive.gray.400.value}" },
+        "black": { "value": "2px dashed {sds.color.primitive.common.black.value}" },
+        "hover": { "value": "2px dashed {sds.color.primitive.common.black.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.gray.400.value}" }
+      },
+      "link": {
+        "dashed": { "value": "1px dashed" },
+        "solid": { "value": "1px solid" }
+      },
+      "accent": {
+        "disabled": { "value": "1px solid {sds.color.primitive.blue.300.value}" },
+        "default": { "value": "1px solid {sds.color.primitive.blue.400.value}" },
+        "hover": { "value": "1px solid {sds.color.primitive.blue.500.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.blue.400.value}" }
+      },
+      "info": {
+        "default": { "value": "1px solid {sds.color.primitive.blue.400.value}" }
+      },
+      "beta": {
+        "default": { "value": "1px solid {sds.color.primitive.purple.400.value}" }
+      },
+      "positive": {
+        "default": { "value": "1px solid {sds.color.primitive.green.400.value}" }
+      },
+      "notice": {
+        "default": { "value": "1px solid {sds.color.primitive.yellow.400.value}" }
+      },
+      "none": {
+        "value": "none"
+      }
+    }
+  }
+}
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/color.json b/packages/components/src/common/styles-dictionary/design-tokens/color.json
new file mode 100644
index 000000000..93f2f5f91
--- /dev/null
+++ b/packages/components/src/common/styles-dictionary/design-tokens/color.json
@@ -0,0 +1,224 @@
+{
+  "sds": {
+    "color": {
+      "primitive": {
+        "common": {
+          "black": { "value": "#000000" },
+          "white": { "value": "#FFFFFF" }
+        },
+        "blue": {
+          "100": { "value": "#F5F9FF" },
+          "200": { "value": "#E9F1FF" },
+          "300": { "value": "#A6C9FF" },
+          "400": { "value": "#0B68F8" },
+          "500": { "value": "#0142A4" },
+          "600": { "value": "#002660" }
+        },
+        "gray": {
+          "100": { "value": "#F8F8F8" },
+          "200": { "value": "#EAEAEA" },
+          "300": { "value": "#CCCCCC" },
+          "400": { "value": "#999999" },
+          "500": { "value": "#767676" },
+          "600": { "value": "#545454" }
+        },
+        "green": {
+          "100": { "value": "#ECF5F0" },
+          "200": { "value": "#E6F7ED" },
+          "400": { "value": "#3CB371" },
+          "500": { "value": "#349A61" },
+          "600": { "value": "#1C7F48" }
+        },
+        "purple": {
+          "100": { "value": "#F4F0F9" },
+          "200": { "value": "#F0EBF6" },
+          "400": { "value": "#7A41CE" },
+          "500": { "value": "#703CBE" },
+          "600": { "value": "#693BAC" }
+        },
+        "red": {
+          "100": { "value": "#FEF2F2" },
+          "200": { "value": "#F8E8E8" },
+          "400": { "value": "#DC132C" },
+          "500": { "value": "#C61128" },
+          "600": { "value": "#B70016" }
+        },
+        "yellow": {
+          "100": { "value": "#FCF6EC" },
+          "200": { "value": "#FFF3E1" },
+          "400": { "value": "#F5A623" },
+          "500": { "value": "#D8921F" },
+          "600": { "value": "#946314" }
+        },
+        "overlay": {
+          "100": { "value": "rgba(0, 0, 0, 0.08)" },
+          "200": { "value": "rgba(0, 0, 0, 0.03)" }
+        }
+      },
+      "semantic": {
+        "text": {
+          "base": {
+            "primary": { "value": "{sds.color.primitive.common.black.value}" },
+            "secondary": { "value": "{sds.color.primitive.gray.500.value}" },
+            "disabled": { "value": "{sds.color.primitive.gray.300.value}" },
+            "on-fill": { "value": "{sds.color.primitive.common.white.value}" },
+            "on-fill-disabled": {
+              "value": "{sds.color.primitive.gray.400.value}"
+            },
+            "accent": { "value": "{sds.color.primitive.blue.600.value}" }
+          },
+          "action": {
+            "default": { "value": "{sds.color.primitive.blue.400.value}" },
+            "hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "pressed": { "value": "{sds.color.primitive.blue.600.value}" }
+          },
+          "beta": { "value": "{sds.color.primitive.purple.600.value}" },
+          "info": { "value": "{sds.color.primitive.blue.600.value}" },
+          "negative": { "value": "{sds.color.primitive.red.600.value}" },
+          "notice": { "value": "{sds.color.primitive.yellow.600.value}" },
+          "positive": { "value": "{sds.color.primitive.green.600.value}" }
+        },
+        "component": {
+          "base": {
+            "fill": { "value": "{sds.color.primitive.common.white.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-open": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-selected": {
+              "value": "{sds.color.primitive.common.black.value}"
+            },
+            "fill-disabled": {
+              "value": "{sds.color.primitive.gray.300.value}"
+            },
+            "on-fill-disabled": {
+              "value": "{sds.color.primitive.gray.400.value}"
+            },
+            "surface": {
+              "value": "{sds.color.primitive.common.white.value}"
+            },
+            "surface-primary": {
+              "value": "{sds.color.primitive.common.white.value}"
+            },
+            "surface-secondary": {
+              "value": "{sds.color.primitive.gray.100.value}"
+            },
+            "surface-tertiary": {
+              "value": "{sds.color.primitive.gray.200.value}"
+            },
+            "divider": { "value": "{sds.color.primitive.gray.200.value}" },
+            "border": { "value": "{sds.color.primitive.gray.400.value}" },
+            "border-hover": {
+              "value": "{sds.color.primitive.common.black.value}"
+            },
+            "border-disabled": {
+              "value": "{sds.color.primitive.gray.300.value}"
+            },
+            "icon": { "value": "{sds.color.primitive.gray.500.value}" },
+            "icon-hover": { "value": "{sds.color.primitive.common.black.value}" },
+            "icon-pressed": {
+              "value": "{sds.color.primitive.common.black.value}"
+            },
+            "icon-disabled": { "value": "{sds.color.primitive.gray.300.value}" }
+          },
+          "accent": {
+            "fill": { "value": "{sds.color.primitive.blue.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.common.white.value}"
+            },
+            "fill-disabled": {
+              "value": "{sds.color.primitive.blue.300.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.blue.200.value}" },
+            "border": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "border-open": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-focus": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-selected": {
+              "value": "{sds.color.primitive.blue.400.value}"
+            },
+            "border-disabled": {
+              "value": "{sds.color.primitive.blue.300.value}"
+            },
+            "icon": { "value": "{sds.color.primitive.blue.400.value}" }
+          },
+          "beta": {
+            "fill": { "value": "{sds.color.primitive.purple.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.purple.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.purple.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.common.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.purple.200.value}" },
+            "border": { "value": "{sds.color.primitive.purple.400.value}" },
+            "icon": { "value": "{sds.color.primitive.purple.400.value}" }
+          },
+          "info": {
+            "fill": { "value": "{sds.color.primitive.blue.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.common.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.blue.200.value}" },
+            "border": { "value": "{sds.color.primitive.blue.400.value}" },
+            "icon": { "value": "{sds.color.primitive.blue.400.value}" }
+          },
+          "negative": {
+            "fill": { "value": "{sds.color.primitive.red.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.red.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.red.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.common.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.red.200.value}" },
+            "border": { "value": "{sds.color.primitive.red.400.value}" },
+            "icon": { "value": "{sds.color.primitive.red.400.value}" }
+          },
+          "neutral": {
+            "fill": { "value": "{sds.color.primitive.gray.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.gray.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.gray.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.common.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.gray.200.value}" },
+            "border": { "value": "{sds.color.primitive.gray.400.value}" },
+            "icon": { "value": "{sds.color.primitive.gray.400.value}" }
+          },
+          "notice": {
+            "fill": { "value": "{sds.color.primitive.yellow.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.yellow.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.yellow.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.common.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.yellow.200.value}" },
+            "border": { "value": "{sds.color.primitive.yellow.400.value}" },
+            "icon": { "value": "{sds.color.primitive.yellow.400.value}" }
+          },
+          "positive": {
+            "fill": { "value": "{sds.color.primitive.green.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.green.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.green.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.common.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.green.200.value}" },
+            "border": { "value": "{sds.color.primitive.green.400.value}" },
+            "icon": { "value": "{sds.color.primitive.green.400.value}" }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/corners.json b/packages/components/src/common/styles-dictionary/design-tokens/corners.json
new file mode 100644
index 000000000..1d47c4646
--- /dev/null
+++ b/packages/components/src/common/styles-dictionary/design-tokens/corners.json
@@ -0,0 +1,10 @@
+{
+  "sds": {
+    "corner": {
+      "l": { "value": "20px" },
+      "m": { "value": "4px" },
+      "s": { "value": "2px" },
+      "none": { "value": "0px" }
+    }
+  }
+}
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json b/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json
new file mode 100644
index 000000000..bb8a0a984
--- /dev/null
+++ b/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json
@@ -0,0 +1,18 @@
+{
+  "sds": {
+    "drop-shadow": {
+      "l": {
+        "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)"
+      },
+      "m": {
+        "value": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)"
+      },
+      "s": {
+        "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
+      },
+      "none": {
+        "value": "none"
+      }
+    }
+  }
+}
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/font.json b/packages/components/src/common/styles-dictionary/design-tokens/font.json
new file mode 100644
index 000000000..cf5d0db65
--- /dev/null
+++ b/packages/components/src/common/styles-dictionary/design-tokens/font.json
@@ -0,0 +1,271 @@
+{
+  "sds": {
+    "font": {
+      "color": {
+        "value": "black"
+      },
+      "font-family": {
+        "body": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "caps": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "code": {
+          "value": "\"IBM Plex Mono\", monospace"
+        },
+        "header": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "tabular": {
+          "value": "\"Inter\", sans-serif"
+        }
+      },
+      "body": {
+        "xxxs": {
+          "400": {
+            "font": {
+              "value": "400 11px/16px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 11px/16px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
+          }
+        },
+        "xxs": {
+          "400": {
+            "font": {
+              "value": "400 12px/18px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 12px/18px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
+          }
+        },
+        "xs": {
+          "400": {
+            "font": {
+              "value": "400 13px/20px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 13px/20px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
+          }
+        },
+        "s": {
+          "400": {
+            "font": {
+              "value": "400 14px/24px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 14px/24px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
+          }
+        },
+        "m": {
+          "400": {
+            "font": {
+              "value": "400 16px/26px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 16px/26px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "l": {
+          "400": {
+            "font": {
+              "value": "400 18px/28px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 18px/28px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      },
+      "caps": {
+        "xxxxs": {
+          "600": {
+            "font": {
+              "value": "600 10px/14px {sds.font.font-family.caps.value}"
+            },
+            "letter-spacing": { "value": "0.5px" },
+            "text-transform": { "value": " uppercase" }
+          }
+        },
+        "xxxs": {
+          "600": {
+            "font": {
+              "value": "600 11px/16px {sds.font.font-family.caps.value}"
+            },
+            "letter-spacing": { "value": "0.5px" },
+            "text-transform": { "value": " uppercase" }
+          }
+        },
+        "xxs": {
+          "600": {
+            "font": {
+              "value": "600 12px/18px {sds.font.font-family.caps.value}"
+            },
+            "letter-spacing": { "value": "0.5px" },
+            "text-transform": { "value": " uppercase" }
+          }
+        }
+      },
+      "header": {
+        "xxxs": {
+          "600": {
+            "font": {
+              "value": "600 11px/16px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
+          }
+        },
+        "xxs": {
+          "600": {
+            "font": {
+              "value": "600 12px/18px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
+          }
+        },
+        "xs": {
+          "600": {
+            "font": {
+              "value": "600 13px/18px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
+          }
+        },
+        "s": {
+          "600": {
+            "font": {
+              "value": "600 14px/20px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
+          }
+        },
+        "m": {
+          "600": {
+            "font": {
+              "value": "600 16px/22px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "l": {
+          "600": {
+            "font": {
+              "value": "600 18px/24px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "xl": {
+          "600": {
+            "font": {
+              "value": "600 22px/30px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "xxl": {
+          "600": {
+            "font": {
+              "value": "600 26px/34px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      },
+      "tabular": {
+        "xs": {
+          "400": {
+            "font": {
+              "value": "400 13px/20px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 13px/20px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "s": {
+          "400": {
+            "font": {
+              "value": "400 14px/24px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 14px/24px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      },
+      "code": {
+        "xs": {
+          "400": {
+            "font": {
+              "value": "400 13px/20px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 13px/20px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "s": {
+          "400": {
+            "font": {
+              "value": "400 14px/24px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 14px/24px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/icon-sizes.json b/packages/components/src/common/styles-dictionary/design-tokens/icon-sizes.json
new file mode 100644
index 000000000..3fe544842
--- /dev/null
+++ b/packages/components/src/common/styles-dictionary/design-tokens/icon-sizes.json
@@ -0,0 +1,30 @@
+{
+  "sds": {
+    "iconSize": {
+      "input": {
+        "height": {
+          "value": "16px"
+        },
+        "width": {
+          "value": "16px"
+        }
+      },
+      "xs": {
+        "height": { "value": "12px" },
+        "width": { "value": "12px" }
+      },
+      "s": {
+        "height": { "value": "16px" },
+        "width": { "value": "16px" }
+      },
+      "l": {
+        "height": { "value": "24px" },
+        "width": { "value": "24px" }
+      },
+      "xl": {
+        "height": { "value": "32px" },
+        "width": { "value": "32px" }
+      }
+    }
+  }
+}
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/spaces.json b/packages/components/src/common/styles-dictionary/design-tokens/spaces.json
new file mode 100644
index 000000000..72b95bae3
--- /dev/null
+++ b/packages/components/src/common/styles-dictionary/design-tokens/spaces.json
@@ -0,0 +1,15 @@
+{
+  "sds": {
+    "space": {
+      "default": { "value": "12px" },
+      "xxxs": { "value": "2px" },
+      "xxs": { "value": "4px" },
+      "xs": { "value": "6px" },
+      "s": { "value": "8px" },
+      "m": { "value": "12px" },
+      "l": { "value": "16px" },
+      "xl": { "value": "24px" },
+      "xxl": { "value": "40px" }
+    }
+  }
+}
diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
index 1b5bc3527..d2a666edc 100644
--- a/packages/components/src/common/styles-dictionary/json/tailwind.json
+++ b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -1,13 +1,10 @@
 {
   "fontFamily": {
-    "sds-regular": [
-      "Open Sans",
-      "OpenSans-Regular"
-    ],
-    "sds-semibold": [
-      "Open Sans",
-      "OpenSans-SemiBold"
-    ]
+    "sds-body": "\"Inter\", sans-serif",
+    "sds-caps": "\"Inter\", sans-serif",
+    "sds-code": "\"IBM Plex Mono\", monospace",
+    "sds-header": "\"Inter\", sans-serif",
+    "sds-tabular": "\"Inter\", sans-serif"
   },
   "fontSize": {
     "sds-body-xxxs": "11px",
@@ -26,7 +23,57 @@
     "sds-header-m": "16px",
     "sds-header-l": "18px",
     "sds-header-xl": "22px",
-    "sds-header-xxl": "26px"
+    "sds-header-xxl": "26px",
+    "sds-tabular-xs": "13px",
+    "sds-tabular-s": "14px",
+    "sds-code-xs": "13px",
+    "sds-code-s": "14px"
+  },
+  "fontVariantNumeric": {
+    "sds-body-xxxs": "normal",
+    "sds-body-xxs": "normal",
+    "sds-body-xs": "normal",
+    "sds-body-s": "normal",
+    "sds-body-m": "normal",
+    "sds-body-l": "normal",
+    "sds-caps-xxxxs": "normal",
+    "sds-caps-xxxs": "normal",
+    "sds-caps-xxs": "normal",
+    "sds-header-xxxs": "normal",
+    "sds-header-xxs": "normal",
+    "sds-header-xs": "normal",
+    "sds-header-s": "normal",
+    "sds-header-m": "normal",
+    "sds-header-l": "normal",
+    "sds-header-xl": "normal",
+    "sds-header-xxl": "normal",
+    "sds-tabular-xs": "tabular-nums",
+    "sds-tabular-s": "tabular-nums",
+    "sds-code-xs": "normal",
+    "sds-code-s": "normal"
+  },
+  "letterSpacing": {
+    "sds-body-xxxs": "0.1px",
+    "sds-body-xxs": "0.1px",
+    "sds-body-xs": "0.08px",
+    "sds-body-s": "0.08px",
+    "sds-body-m": "0px",
+    "sds-body-l": "0px",
+    "sds-caps-xxxxs": "0.5px",
+    "sds-caps-xxxs": "0.5px",
+    "sds-caps-xxs": "0.5px",
+    "sds-header-xxxs": "0.1px",
+    "sds-header-xxs": "0.1px",
+    "sds-header-xs": "0.08px",
+    "sds-header-s": "0.08px",
+    "sds-header-m": "0px",
+    "sds-header-l": "0px",
+    "sds-header-xl": "0px",
+    "sds-header-xxl": "0px",
+    "sds-tabular-xs": "0px",
+    "sds-tabular-s": "0px",
+    "sds-code-xs": "0px",
+    "sds-code-s": "0px"
   },
   "lineHeight": {
     "sds-body-xxxs": "11px",
@@ -45,20 +92,47 @@
     "sds-header-m": "16px",
     "sds-header-l": "18px",
     "sds-header-xl": "22px",
-    "sds-header-xxl": "26px"
+    "sds-header-xxl": "26px",
+    "sds-tabular-xs": "13px",
+    "sds-tabular-s": "14px",
+    "sds-code-xs": "13px",
+    "sds-code-s": "14px"
+  },
+  "textTransform": {
+    "sds-body-xxxs": "none",
+    "sds-body-xxs": "none",
+    "sds-body-xs": "none",
+    "sds-body-s": "none",
+    "sds-body-m": "none",
+    "sds-body-l": "none",
+    "sds-caps-xxxxs": " uppercase",
+    "sds-caps-xxxs": " uppercase",
+    "sds-caps-xxs": " uppercase",
+    "sds-header-xxxs": "none",
+    "sds-header-xxs": "none",
+    "sds-header-xs": "none",
+    "sds-header-s": "none",
+    "sds-header-m": "none",
+    "sds-header-l": "none",
+    "sds-header-xl": "none",
+    "sds-header-xxl": "none",
+    "sds-tabular-xs": "none",
+    "sds-tabular-s": "none",
+    "sds-code-xs": "none",
+    "sds-code-s": "none"
   },
   "height": {
     "sds-icon-input": "16px",
-    "sds-icon-xs": "10px",
-    "sds-icon-s": "14px",
-    "sds-icon-l": "22px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
+    "sds-icon-l": "24px",
     "sds-icon-xl": "32px"
   },
   "width": {
     "sds-icon-input": "16px",
-    "sds-icon-xs": "10px",
-    "sds-icon-s": "14px",
-    "sds-icon-l": "22px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
+    "sds-icon-l": "24px",
     "sds-icon-xl": "32px"
   },
   "borderRadius": {
@@ -69,79 +143,145 @@
   },
   "boxShadow": {
     "sds-l": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)",
-    "sds-m": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)",
-    "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
+    "sds-m": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)",
+    "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)",
+    "sds-none": "none"
   },
   "colors": {
-    "sds-overlay": {
-      "100": "rgba(0, 0, 0, 0.08)",
-      "200": "rgba(0, 0, 0, 0.03)"
-    },
-    "sds-beta": {
-      "100": "#f4f0f9",
-      "200": "#f0ebf6",
-      "400": "#7a41ce",
-      "600": "#693bac"
-    },
-    "sds-error": {
-      "100": "#fef2f2",
-      "200": "#f8e8e8",
-      "400": "#dc132c",
-      "600": "#b70016"
-    },
-    "sds-gray": {
-      "100": "#f8f8f8",
-      "200": "#eaeaea",
-      "300": "#cccccc",
-      "400": "#999999",
-      "500": "#767676",
-      "600": "#545454",
-      "black": "#000000",
-      "white": "#ffffff"
-    },
-    "sds-info": {
-      "100": "#eff2fc",
-      "200": "#ebeffc",
-      "400": "#3867fa",
-      "600": "#223f9c"
-    },
-    "sds-primary": {
-      "100": "#f8f9fe",
-      "200": "#eff2fc",
-      "300": "#a9bdfc",
-      "400": "#3867fa",
-      "500": "#2b52cd",
-      "600": "#223f9c"
-    },
-    "sds-secondary": {
-      "400": "#9bc74e"
-    },
-    "sds-success": {
-      "100": "#ecf5f0",
-      "200": "#e6f7ed",
-      "400": "#3cb371",
-      "600": "#1c7f48"
-    },
-    "sds-warning": {
-      "100": "#fcf6ec",
-      "200": "#fff3e1",
-      "400": "#f5a623",
-      "600": "#946314"
-    }
-  },
-  "letterSpacing": {
-    "sds-default": "0.3px",
-    "sds-caps": "1px"
+    "sds-color-primitive-common-black": "#000000",
+    "sds-color-primitive-common-white": "#FFFFFF",
+    "sds-color-primitive-blue-100": "#F5F9FF",
+    "sds-color-primitive-blue-200": "#E9F1FF",
+    "sds-color-primitive-blue-300": "#A6C9FF",
+    "sds-color-primitive-blue-400": "#0B68F8",
+    "sds-color-primitive-blue-500": "#0142A4",
+    "sds-color-primitive-blue-600": "#002660",
+    "sds-color-primitive-gray-100": "#F8F8F8",
+    "sds-color-primitive-gray-200": "#EAEAEA",
+    "sds-color-primitive-gray-300": "#CCCCCC",
+    "sds-color-primitive-gray-400": "#999999",
+    "sds-color-primitive-gray-500": "#767676",
+    "sds-color-primitive-gray-600": "#545454",
+    "sds-color-primitive-green-100": "#ECF5F0",
+    "sds-color-primitive-green-200": "#E6F7ED",
+    "sds-color-primitive-green-400": "#3CB371",
+    "sds-color-primitive-green-500": "#349A61",
+    "sds-color-primitive-green-600": "#1C7F48",
+    "sds-color-primitive-purple-100": "#F4F0F9",
+    "sds-color-primitive-purple-200": "#F0EBF6",
+    "sds-color-primitive-purple-400": "#7A41CE",
+    "sds-color-primitive-purple-500": "#703CBE",
+    "sds-color-primitive-purple-600": "#693BAC",
+    "sds-color-primitive-red-100": "#FEF2F2",
+    "sds-color-primitive-red-200": "#F8E8E8",
+    "sds-color-primitive-red-400": "#DC132C",
+    "sds-color-primitive-red-500": "#C61128",
+    "sds-color-primitive-red-600": "#B70016",
+    "sds-color-primitive-yellow-100": "#FCF6EC",
+    "sds-color-primitive-yellow-200": "#FFF3E1",
+    "sds-color-primitive-yellow-400": "#F5A623",
+    "sds-color-primitive-yellow-500": "#D8921F",
+    "sds-color-primitive-yellow-600": "#946314",
+    "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)",
+    "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)",
+    "sds-color-semantic-text-base-primary": "#000000",
+    "sds-color-semantic-text-base-secondary": "#767676",
+    "sds-color-semantic-text-base-disabled": "#CCCCCC",
+    "sds-color-semantic-text-base-on-fill": "#FFFFFF",
+    "sds-color-semantic-text-base-on-fill-disabled": "#999999",
+    "sds-color-semantic-text-base-accent": "#002660",
+    "sds-color-semantic-text-action-default": "#0B68F8",
+    "sds-color-semantic-text-action-hover": "#0142A4",
+    "sds-color-semantic-text-action-pressed": "#002660",
+    "sds-color-semantic-text-beta": "#693BAC",
+    "sds-color-semantic-text-info": "#002660",
+    "sds-color-semantic-text-negative": "#B70016",
+    "sds-color-semantic-text-notice": "#946314",
+    "sds-color-semantic-text-positive": "#1C7F48",
+    "sds-color-semantic-component-base-fill": "#FFFFFF",
+    "sds-color-semantic-component-base-fill-hover": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-pressed": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-open": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-selected": "#000000",
+    "sds-color-semantic-component-base-fill-disabled": "#CCCCCC",
+    "sds-color-semantic-component-base-on-fill-disabled": "#999999",
+    "sds-color-semantic-component-base-surface": "#FFFFFF",
+    "sds-color-semantic-component-base-surface-primary": "#FFFFFF",
+    "sds-color-semantic-component-base-surface-secondary": "#F8F8F8",
+    "sds-color-semantic-component-base-surface-tertiary": "#EAEAEA",
+    "sds-color-semantic-component-base-divider": "#EAEAEA",
+    "sds-color-semantic-component-base-border": "#999999",
+    "sds-color-semantic-component-base-border-hover": "#000000",
+    "sds-color-semantic-component-base-border-disabled": "#CCCCCC",
+    "sds-color-semantic-component-base-icon": "#767676",
+    "sds-color-semantic-component-base-icon-hover": "#000000",
+    "sds-color-semantic-component-base-icon-pressed": "#000000",
+    "sds-color-semantic-component-base-icon-disabled": "#CCCCCC",
+    "sds-color-semantic-component-accent-fill": "#0B68F8",
+    "sds-color-semantic-component-accent-fill-hover": "#0142A4",
+    "sds-color-semantic-component-accent-fill-pressed": "#002660",
+    "sds-color-semantic-component-accent-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-accent-fill-disabled": "#A6C9FF",
+    "sds-color-semantic-component-accent-surface": "#E9F1FF",
+    "sds-color-semantic-component-accent-border": "#0B68F8",
+    "sds-color-semantic-component-accent-border-hover": "#0142A4",
+    "sds-color-semantic-component-accent-border-open": "#0B68F8",
+    "sds-color-semantic-component-accent-border-focus": "#0B68F8",
+    "sds-color-semantic-component-accent-border-selected": "#0B68F8",
+    "sds-color-semantic-component-accent-border-disabled": "#A6C9FF",
+    "sds-color-semantic-component-accent-icon": "#0B68F8",
+    "sds-color-semantic-component-beta-fill": "#7A41CE",
+    "sds-color-semantic-component-beta-fill-hover": "#703CBE",
+    "sds-color-semantic-component-beta-fill-pressed": "#693BAC",
+    "sds-color-semantic-component-beta-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-beta-surface": "#F0EBF6",
+    "sds-color-semantic-component-beta-border": "#7A41CE",
+    "sds-color-semantic-component-beta-icon": "#7A41CE",
+    "sds-color-semantic-component-info-fill": "#0B68F8",
+    "sds-color-semantic-component-info-fill-hover": "#0142A4",
+    "sds-color-semantic-component-info-fill-pressed": "#002660",
+    "sds-color-semantic-component-info-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-info-surface": "#E9F1FF",
+    "sds-color-semantic-component-info-border": "#0B68F8",
+    "sds-color-semantic-component-info-icon": "#0B68F8",
+    "sds-color-semantic-component-negative-fill": "#DC132C",
+    "sds-color-semantic-component-negative-fill-hover": "#C61128",
+    "sds-color-semantic-component-negative-fill-pressed": "#B70016",
+    "sds-color-semantic-component-negative-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-negative-surface": "#F8E8E8",
+    "sds-color-semantic-component-negative-border": "#DC132C",
+    "sds-color-semantic-component-negative-icon": "#DC132C",
+    "sds-color-semantic-component-neutral-fill": "#999999",
+    "sds-color-semantic-component-neutral-fill-hover": "#767676",
+    "sds-color-semantic-component-neutral-fill-pressed": "#545454",
+    "sds-color-semantic-component-neutral-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-neutral-surface": "#EAEAEA",
+    "sds-color-semantic-component-neutral-border": "#999999",
+    "sds-color-semantic-component-neutral-icon": "#999999",
+    "sds-color-semantic-component-notice-fill": "#F5A623",
+    "sds-color-semantic-component-notice-fill-hover": "#D8921F",
+    "sds-color-semantic-component-notice-fill-pressed": "#946314",
+    "sds-color-semantic-component-notice-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-notice-surface": "#FFF3E1",
+    "sds-color-semantic-component-notice-border": "#F5A623",
+    "sds-color-semantic-component-notice-icon": "#F5A623",
+    "sds-color-semantic-component-positive-fill": "#3CB371",
+    "sds-color-semantic-component-positive-fill-hover": "#349A61",
+    "sds-color-semantic-component-positive-fill-pressed": "#1C7F48",
+    "sds-color-semantic-component-positive-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-positive-surface": "#E6F7ED",
+    "sds-color-semantic-component-positive-border": "#3CB371",
+    "sds-color-semantic-component-positive-icon": "#3CB371"
   },
   "spacing": {
-    "sds-default": "10px",
+    "sds-default": "12px",
     "sds-xxxs": "2px",
     "sds-xxs": "4px",
     "sds-xs": "6px",
     "sds-s": "8px",
-    "sds-m": "10px",
-    "sds-l": "14px",
-    "sds-xl": "22px",
-    "sds-xxl": "38px"
+    "sds-m": "12px",
+    "sds-l": "16px",
+    "sds-xl": "24px",
+    "sds-xxl": "40px"
   }
 }
\ No newline at end of file
diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
index 2d8308510..c2192e202 100644
--- a/packages/components/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -1,109 +1,245 @@
-$sds-font-letter-spacing-default: 0.3px;
-$sds-font-letter-spacing-caps: 1px;
+$sds-border-negative-default: 1px solid #DC132C;
+$sds-border-base-divider: 1px solid #EAEAEA;
+$sds-border-base-table: 1px solid #CCCCCC;
+$sds-border-base-disabled: 1px solid #CCCCCC;
+$sds-border-base-default: 1px solid #999999;
+$sds-border-base-black: 2px dashed #000000;
+$sds-border-base-hover: 2px dashed #000000;
+$sds-border-base-dashed: 2px dashed #999999;
+$sds-border-link-dashed: 1px dashed;
+$sds-border-link-solid: 1px solid;
+$sds-border-accent-disabled: 1px solid #A6C9FF;
+$sds-border-accent-default: 1px solid #0B68F8;
+$sds-border-accent-hover: 1px solid #0142A4;
+$sds-border-accent-dashed: 2px dashed #0B68F8;
+$sds-border-info-default: 1px solid #0B68F8;
+$sds-border-beta-default: 1px solid #7A41CE;
+$sds-border-positive-default: 1px solid #3CB371;
+$sds-border-notice-default: 1px solid #F5A623;
+$sds-border-none: none;
+$sds-color-primitive-common-black: #000000;
+$sds-color-primitive-common-white: #FFFFFF;
+$sds-color-primitive-blue-100: #F5F9FF;
+$sds-color-primitive-blue-200: #E9F1FF;
+$sds-color-primitive-blue-300: #A6C9FF;
+$sds-color-primitive-blue-400: #0B68F8;
+$sds-color-primitive-blue-500: #0142A4;
+$sds-color-primitive-blue-600: #002660;
+$sds-color-primitive-gray-100: #F8F8F8;
+$sds-color-primitive-gray-200: #EAEAEA;
+$sds-color-primitive-gray-300: #CCCCCC;
+$sds-color-primitive-gray-400: #999999;
+$sds-color-primitive-gray-500: #767676;
+$sds-color-primitive-gray-600: #545454;
+$sds-color-primitive-green-100: #ECF5F0;
+$sds-color-primitive-green-200: #E6F7ED;
+$sds-color-primitive-green-400: #3CB371;
+$sds-color-primitive-green-500: #349A61;
+$sds-color-primitive-green-600: #1C7F48;
+$sds-color-primitive-purple-100: #F4F0F9;
+$sds-color-primitive-purple-200: #F0EBF6;
+$sds-color-primitive-purple-400: #7A41CE;
+$sds-color-primitive-purple-500: #703CBE;
+$sds-color-primitive-purple-600: #693BAC;
+$sds-color-primitive-red-100: #FEF2F2;
+$sds-color-primitive-red-200: #F8E8E8;
+$sds-color-primitive-red-400: #DC132C;
+$sds-color-primitive-red-500: #C61128;
+$sds-color-primitive-red-600: #B70016;
+$sds-color-primitive-yellow-100: #FCF6EC;
+$sds-color-primitive-yellow-200: #FFF3E1;
+$sds-color-primitive-yellow-400: #F5A623;
+$sds-color-primitive-yellow-500: #D8921F;
+$sds-color-primitive-yellow-600: #946314;
+$sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
+$sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
+$sds-color-semantic-text-base-primary: #000000;
+$sds-color-semantic-text-base-secondary: #767676;
+$sds-color-semantic-text-base-disabled: #CCCCCC;
+$sds-color-semantic-text-base-on-fill: #FFFFFF;
+$sds-color-semantic-text-base-on-fill-disabled: #999999;
+$sds-color-semantic-text-base-accent: #002660;
+$sds-color-semantic-text-action-default: #0B68F8;
+$sds-color-semantic-text-action-hover: #0142A4;
+$sds-color-semantic-text-action-pressed: #002660;
+$sds-color-semantic-text-beta: #693BAC;
+$sds-color-semantic-text-info: #002660;
+$sds-color-semantic-text-negative: #B70016;
+$sds-color-semantic-text-notice: #946314;
+$sds-color-semantic-text-positive: #1C7F48;
+$sds-color-semantic-component-base-fill: #FFFFFF;
+$sds-color-semantic-component-base-fill-hover: #F8F8F8;
+$sds-color-semantic-component-base-fill-pressed: #F8F8F8;
+$sds-color-semantic-component-base-fill-open: #F8F8F8;
+$sds-color-semantic-component-base-fill-selected: #000000;
+$sds-color-semantic-component-base-fill-disabled: #CCCCCC;
+$sds-color-semantic-component-base-on-fill-disabled: #999999;
+$sds-color-semantic-component-base-surface: #FFFFFF;
+$sds-color-semantic-component-base-surface-primary: #FFFFFF;
+$sds-color-semantic-component-base-surface-secondary: #F8F8F8;
+$sds-color-semantic-component-base-surface-tertiary: #EAEAEA;
+$sds-color-semantic-component-base-divider: #EAEAEA;
+$sds-color-semantic-component-base-border: #999999;
+$sds-color-semantic-component-base-border-hover: #000000;
+$sds-color-semantic-component-base-border-disabled: #CCCCCC;
+$sds-color-semantic-component-base-icon: #767676;
+$sds-color-semantic-component-base-icon-hover: #000000;
+$sds-color-semantic-component-base-icon-pressed: #000000;
+$sds-color-semantic-component-base-icon-disabled: #CCCCCC;
+$sds-color-semantic-component-accent-fill: #0B68F8;
+$sds-color-semantic-component-accent-fill-hover: #0142A4;
+$sds-color-semantic-component-accent-fill-pressed: #002660;
+$sds-color-semantic-component-accent-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-accent-fill-disabled: #A6C9FF;
+$sds-color-semantic-component-accent-surface: #E9F1FF;
+$sds-color-semantic-component-accent-border: #0B68F8;
+$sds-color-semantic-component-accent-border-hover: #0142A4;
+$sds-color-semantic-component-accent-border-open: #0B68F8;
+$sds-color-semantic-component-accent-border-focus: #0B68F8;
+$sds-color-semantic-component-accent-border-selected: #0B68F8;
+$sds-color-semantic-component-accent-border-disabled: #A6C9FF;
+$sds-color-semantic-component-accent-icon: #0B68F8;
+$sds-color-semantic-component-beta-fill: #7A41CE;
+$sds-color-semantic-component-beta-fill-hover: #703CBE;
+$sds-color-semantic-component-beta-fill-pressed: #693BAC;
+$sds-color-semantic-component-beta-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-beta-surface: #F0EBF6;
+$sds-color-semantic-component-beta-border: #7A41CE;
+$sds-color-semantic-component-beta-icon: #7A41CE;
+$sds-color-semantic-component-info-fill: #0B68F8;
+$sds-color-semantic-component-info-fill-hover: #0142A4;
+$sds-color-semantic-component-info-fill-pressed: #002660;
+$sds-color-semantic-component-info-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-info-surface: #E9F1FF;
+$sds-color-semantic-component-info-border: #0B68F8;
+$sds-color-semantic-component-info-icon: #0B68F8;
+$sds-color-semantic-component-negative-fill: #DC132C;
+$sds-color-semantic-component-negative-fill-hover: #C61128;
+$sds-color-semantic-component-negative-fill-pressed: #B70016;
+$sds-color-semantic-component-negative-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-negative-surface: #F8E8E8;
+$sds-color-semantic-component-negative-border: #DC132C;
+$sds-color-semantic-component-negative-icon: #DC132C;
+$sds-color-semantic-component-neutral-fill: #999999;
+$sds-color-semantic-component-neutral-fill-hover: #767676;
+$sds-color-semantic-component-neutral-fill-pressed: #545454;
+$sds-color-semantic-component-neutral-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-neutral-surface: #EAEAEA;
+$sds-color-semantic-component-neutral-border: #999999;
+$sds-color-semantic-component-neutral-icon: #999999;
+$sds-color-semantic-component-notice-fill: #F5A623;
+$sds-color-semantic-component-notice-fill-hover: #D8921F;
+$sds-color-semantic-component-notice-fill-pressed: #946314;
+$sds-color-semantic-component-notice-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-notice-surface: #FFF3E1;
+$sds-color-semantic-component-notice-border: #F5A623;
+$sds-color-semantic-component-notice-icon: #F5A623;
+$sds-color-semantic-component-positive-fill: #3CB371;
+$sds-color-semantic-component-positive-fill-hover: #349A61;
+$sds-color-semantic-component-positive-fill-pressed: #1C7F48;
+$sds-color-semantic-component-positive-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-positive-surface: #E6F7ED;
+$sds-color-semantic-component-positive-border: #3CB371;
+$sds-color-semantic-component-positive-icon: #3CB371;
+$sds-corner-l: 20px;
+$sds-corner-m: 4px;
+$sds-corner-s: 2px;
+$sds-corner-none: 0px;
+$sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
+$sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
+$sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+$sds-drop-shadow-none: none;
 $sds-font-color: black;
-$sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-font-family-body: "Inter", sans-serif;
+$sds-font-font-family-caps: "Inter", sans-serif;
+$sds-font-font-family-code: "IBM Plex Mono", monospace;
+$sds-font-font-family-header: "Inter", sans-serif;
+$sds-font-font-family-tabular: "Inter", sans-serif;
+$sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
+$sds-font-body-xxxs-400-letter-spacing: 0.1px;
+$sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-body-xxxs-600-letter-spacing: 0.1px;
+$sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
+$sds-font-body-xxs-400-letter-spacing: 0.1px;
+$sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-body-xxs-600-letter-spacing: 0.1px;
+$sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
+$sds-font-body-xs-400-letter-spacing: 0.08px;
+$sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
+$sds-font-body-xs-600-letter-spacing: 0.08px;
+$sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
+$sds-font-body-s-400-letter-spacing: 0.08px;
+$sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
+$sds-font-body-s-600-letter-spacing: 0.08px;
+$sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
+$sds-font-body-m-400-letter-spacing: 0px;
+$sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
+$sds-font-body-m-600-letter-spacing: 0px;
+$sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
+$sds-font-body-l-400-letter-spacing: 0px;
+$sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
+$sds-font-body-l-600-letter-spacing: 0px;
+$sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
+$sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-caps-xxxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-caps-xxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxs-600-text-transform:  uppercase;
-$sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
-$sds-color-overlay-100: rgba(0, 0, 0, 0.08);
-$sds-color-overlay-200: rgba(0, 0, 0, 0.03);
-$sds-color-beta-100: #f4f0f9;
-$sds-color-beta-200: #f0ebf6;
-$sds-color-beta-400: #7a41ce;
-$sds-color-beta-600: #693bac;
-$sds-color-error-100: #fef2f2;
-$sds-color-error-200: #f8e8e8;
-$sds-color-error-400: #dc132c;
-$sds-color-error-600: #b70016;
-$sds-color-gray-100: #f8f8f8;
-$sds-color-gray-200: #eaeaea;
-$sds-color-gray-300: #cccccc;
-$sds-color-gray-400: #999999;
-$sds-color-gray-500: #767676;
-$sds-color-gray-600: #545454;
-$sds-color-gray-black: #000000;
-$sds-color-gray-white: #ffffff;
-$sds-color-info-100: #eff2fc;
-$sds-color-info-200: #ebeffc;
-$sds-color-info-400: #3867fa;
-$sds-color-info-600: #223f9c;
-$sds-color-primary-100: #f8f9fe;
-$sds-color-primary-200: #eff2fc;
-$sds-color-primary-300: #a9bdfc;
-$sds-color-primary-400: #3867fa;
-$sds-color-primary-500: #2b52cd;
-$sds-color-primary-600: #223f9c;
-$sds-color-secondary-400: #9bc74e;
-$sds-color-success-100: #ecf5f0;
-$sds-color-success-200: #e6f7ed;
-$sds-color-success-400: #3cb371;
-$sds-color-success-600: #1c7f48;
-$sds-color-warning-100: #fcf6ec;
-$sds-color-warning-200: #fff3e1;
-$sds-color-warning-400: #f5a623;
-$sds-color-warning-600: #946314;
-$sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-$sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-$sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
-$sds-borders-error-400: 1px solid #dc132c;
-$sds-borders-gray-100: 1px solid #f8f8f8;
-$sds-borders-gray-200: 1px solid #eaeaea;
-$sds-borders-gray-300: 1px solid #cccccc;
-$sds-borders-gray-400: 1px solid #999999;
-$sds-borders-gray-500: 1px solid #767676;
-$sds-borders-gray-dashed: 2px dashed #999999;
-$sds-borders-link-dashed: 1px dashed;
-$sds-borders-link-solid: 1px solid;
-$sds-borders-primary-300: 1px solid #a9bdfc;
-$sds-borders-primary-400: 1px solid #3867fa;
-$sds-borders-primary-500: 1px solid #2b52cd;
-$sds-borders-primary-600: 1px solid #223f9c;
-$sds-borders-primary-dashed: 2px dashed #3867fa;
-$sds-borders-success-400: 1px solid #3cb371;
-$sds-borders-warning-400: 1px solid #f5a623;
-$sds-spaces-default: 10px;
-$sds-spaces-xxxs: 2px;
-$sds-spaces-xxs: 4px;
-$sds-spaces-xs: 6px;
-$sds-spaces-s: 8px;
-$sds-spaces-m: 10px;
-$sds-spaces-l: 14px;
-$sds-spaces-xl: 22px;
-$sds-spaces-xxl: 38px;
-$sds-icon-sizes-input-height: 16px;
-$sds-icon-sizes-input-width: 16px;
-$sds-icon-sizes-xs-height: 10px;
-$sds-icon-sizes-xs-width: 10px;
-$sds-icon-sizes-s-height: 14px;
-$sds-icon-sizes-s-width: 14px;
-$sds-icon-sizes-l-height: 22px;
-$sds-icon-sizes-l-width: 22px;
-$sds-icon-sizes-xl-height: 32px;
-$sds-icon-sizes-xl-width: 32px;
-$sds-corners-corner-l: 20px;
-$sds-corners-corner-m: 4px;
-$sds-corners-corner-s: 2px;
-$sds-corners-corner-none: 0px;
+$sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-header-xxxs-600-letter-spacing: 0.1px;
+$sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-header-xxs-600-letter-spacing: 0.1px;
+$sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
+$sds-font-header-xs-600-letter-spacing: 0.08px;
+$sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
+$sds-font-header-s-600-letter-spacing: 0.08px;
+$sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
+$sds-font-header-m-600-letter-spacing: 0px;
+$sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
+$sds-font-header-l-600-letter-spacing: 0px;
+$sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
+$sds-font-header-xl-600-letter-spacing: 0px;
+$sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
+$sds-font-header-xxl-600-letter-spacing: 0px;
+$sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
+$sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
+$sds-font-tabular-xs-400-letter-spacing: 0px;
+$sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
+$sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
+$sds-font-tabular-xs-600-letter-spacing: 0px;
+$sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
+$sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
+$sds-font-tabular-s-400-letter-spacing: 0px;
+$sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
+$sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
+$sds-font-tabular-s-600-letter-spacing: 0px;
+$sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
+$sds-font-code-xs-400-letter-spacing: 0px;
+$sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
+$sds-font-code-xs-600-letter-spacing: 0px;
+$sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
+$sds-font-code-s-400-letter-spacing: 0px;
+$sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
+$sds-font-code-s-600-letter-spacing: 0px;
+$sds-icon-size-input-height: 16px;
+$sds-icon-size-input-width: 16px;
+$sds-icon-size-xs-height: 12px;
+$sds-icon-size-xs-width: 12px;
+$sds-icon-size-s-height: 16px;
+$sds-icon-size-s-width: 16px;
+$sds-icon-size-l-height: 24px;
+$sds-icon-size-l-width: 24px;
+$sds-icon-size-xl-height: 32px;
+$sds-icon-size-xl-width: 32px;
+$sds-space-default: 12px;
+$sds-space-xxxs: 2px;
+$sds-space-xxs: 4px;
+$sds-space-xs: 6px;
+$sds-space-s: 8px;
+$sds-space-m: 12px;
+$sds-space-l: 16px;
+$sds-space-xl: 24px;
+$sds-space-xxl: 40px;
diff --git a/packages/components/src/common/styles-dictionary/style-dictionary.json b/packages/components/src/common/styles-dictionary/style-dictionary.json
deleted file mode 100644
index 84c82b6d8..000000000
--- a/packages/components/src/common/styles-dictionary/style-dictionary.json
+++ /dev/null
@@ -1,308 +0,0 @@
-{
-  "sds": {
-    "font": {
-      "letter-spacing": {
-        "default": { "value": "0.3px" },
-        "caps": { "value": "1px" }
-      },
-      "color": {
-        "value": "black"
-      },
-      "font-family": { "value": "'Open Sans', 'OpenSans-Regular'" },
-      "body": {
-        "xxxs": {
-          "400": {
-            "font": {
-              "value": "400 11px/16px {sds.font.font-family.value}"
-            }
-          },
-          "600": {
-            "font": {
-              "value": "600 11px/16px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "xxs": {
-          "400": {
-            "font": {
-              "value": "400 12px/18px {sds.font.font-family.value}"
-            }
-          },
-          "600": {
-            "font": {
-              "value": "600 12px/18px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "xs": {
-          "400": {
-            "font": {
-              "value": "400 13px/20px {sds.font.font-family.value}"
-            }
-          },
-          "600": {
-            "font": {
-              "value": "600 13px/20px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "s": {
-          "400": {
-            "font": {
-              "value": "400 14px/24px {sds.font.font-family.value}"
-            }
-          },
-          "600": {
-            "font": {
-              "value": "600 14px/24px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "m": {
-          "400": {
-            "font": {
-              "value": "400 16px/26px {sds.font.font-family.value}"
-            }
-          },
-          "600": {
-            "font": {
-              "value": "600 16px/26px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "l": {
-          "400": {
-            "font": {
-              "value": "400 18px/28px {sds.font.font-family.value}"
-            }
-          },
-          "600": {
-            "font": {
-              "value": "600 18px/28px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        }
-      },
-      "caps": {
-        "xxxxs": {
-          "600": {
-            "font": {
-              "value": "600 10px/14px 'Open Sans', 'OpenSans-SemiBold'"
-            },
-            "text-transform": { "value": " uppercase" }
-          }
-        },
-        "xxxs": {
-          "600": {
-            "font": {
-              "value": "600 11px/16px 'Open Sans', 'OpenSans-SemiBold'"
-            },
-            "text-transform": { "value": " uppercase" }
-          }
-        },
-        "xxs": {
-          "600": {
-            "font": {
-              "value": "600 12px/18px 'Open Sans', 'OpenSans-SemiBold'"
-            },
-            "text-transform": { "value": " uppercase" }
-          }
-        }
-      },
-      "header": {
-        "xxxs": {
-          "600": {
-            "font": {
-              "value": "600 11px/16px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "xxs": {
-          "600": {
-            "font": {
-              "value": "600 12px/18px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "xs": {
-          "600": {
-            "font": {
-              "value": "600 13px/18px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "s": {
-          "600": {
-            "font": {
-              "value": "600 14px/20px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "m": {
-          "600": {
-            "font": {
-              "value": "600 16px/22px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "l": {
-          "600": {
-            "font": {
-              "value": "600 18px/24px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-
-        "xl": {
-          "600": {
-            "font": {
-              "value": "600 22px/30px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        },
-        "xxl": {
-          "600": {
-            "font": {
-              "value": "600 26px/34px 'Open Sans', 'OpenSans-SemiBold'"
-            }
-          }
-        }
-      }
-    },
-    "color": {
-      "overlay": {
-        "100": { "value": "rgba(0, 0, 0, 0.08)" },
-        "200": { "value": "rgba(0, 0, 0, 0.03)" }
-      },
-      "beta": {
-        "100": { "value": "#f4f0f9" },
-        "200": { "value": "#f0ebf6" },
-        "400": { "value": "#7a41ce" },
-        "600": { "value": "#693bac" }
-      },
-      "error": {
-        "100": { "value": "#fef2f2" },
-        "200": { "value": "#f8e8e8" },
-        "400": { "value": "#dc132c" },
-        "600": { "value": "#b70016" }
-      },
-      "gray": {
-        "100": { "value": "#f8f8f8" },
-        "200": { "value": "#eaeaea" },
-        "300": { "value": "#cccccc" },
-        "400": { "value": "#999999" },
-        "500": { "value": "#767676" },
-        "600": { "value": "#545454" },
-        "Black": { "value": "#000000" },
-        "White": { "value": "#ffffff" }
-      },
-      "info": {
-        "100": { "value": "#eff2fc" },
-        "200": { "value": "#ebeffc" },
-        "400": { "value": "#3867fa" },
-        "600": { "value": "#223f9c" }
-      },
-      "primary": {
-        "100": { "value": "#f8f9fe" },
-        "200": { "value": "#eff2fc" },
-        "300": { "value": "#a9bdfc" },
-        "400": { "value": "#3867fa" },
-        "500": { "value": "#2b52cd" },
-        "600": { "value": "#223f9c" }
-      },
-      "secondary": { "400": { "value": "#9bc74e" } },
-      "success": {
-        "100": { "value": "#ecf5f0" },
-        "200": { "value": "#e6f7ed" },
-        "400": { "value": "#3cb371" },
-        "600": { "value": "#1c7f48" }
-      },
-      "warning": {
-        "100": { "value": "#fcf6ec" },
-        "200": { "value": "#fff3e1" },
-        "400": { "value": "#f5a623" },
-        "600": { "value": "#946314" }
-      }
-    },
-    "drop-shadows": {
-      "shadowL": { "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)" },
-      "shadowM": {
-        "value": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)"
-      },
-      "shadowS": { "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)" }
-    },
-    "borders": {
-      "error": {
-        "400": { "value": "1px solid {sds.color.error.400.value}" }
-      },
-      "gray": {
-        "100": { "value": "1px solid {sds.color.gray.100.value}" },
-        "200": { "value": "1px solid {sds.color.gray.200.value}" },
-        "300": { "value": "1px solid {sds.color.gray.300.value}" },
-        "400": { "value": "1px solid {sds.color.gray.400.value}" },
-        "500": { "value": "1px solid {sds.color.gray.500.value}" },
-        "dashed": { "value": "2px dashed {sds.color.gray.400.value}" }
-      },
-      "link": {
-        "dashed": { "value": "1px dashed" },
-        "solid": { "value": "1px solid" }
-      },
-      "primary": {
-        "300": { "value": "1px solid {sds.color.primary.300.value}" },
-        "400": { "value": "1px solid {sds.color.primary.400.value}" },
-        "500": { "value": "1px solid {sds.color.primary.500.value}" },
-        "600": { "value": "1px solid {sds.color.primary.600.value}" },
-        "dashed": { "value": "2px dashed {sds.color.primary.400.value}" }
-      },
-      "success": {
-        "400": { "value": "1px solid {sds.color.success.400.value}" }
-      },
-      "warning": {
-        "400": { "value": "1px solid {sds.color.warning.400.value}" }
-      }
-    },
-    "spaces": {
-      "default": { "value": "10px" },
-      "xxxs": { "value": "2px" },
-      "xxs": { "value": "4px" },
-      "xs": { "value": "6px" },
-      "s": { "value": "8px" },
-      "m": { "value": "10px" },
-      "l": { "value": "14px" },
-      "xl": { "value": "22px" },
-      "xxl": { "value": "38px" }
-    },
-    "iconSizes": {
-      "input": {
-        "height": {
-          "value": "16px"
-        },
-        "width": {
-          "value": "16px"
-        }
-      },
-      "xs": {
-        "height": { "value": "10px" },
-        "width": { "value": "10px" }
-      },
-      "s": {
-        "height": { "value": "14px" },
-        "width": { "value": "14px" }
-      },
-      "l": {
-        "height": { "value": "22px" },
-        "width": { "value": "22px" }
-      },
-      "xl": {
-        "height": { "value": "32px" },
-        "width": { "value": "32px" }
-      }
-    },
-    "corners": {
-      "cornerL": { "value": "20px" },
-      "cornerM": { "value": "4px" },
-      "cornerS": { "value": "2px" },
-      "cornerNone": { "value": "0px" }
-    }
-  }
-}
diff --git a/packages/components/src/common/styles-dictionary/tailwindFormat.js b/packages/components/src/common/styles-dictionary/tailwindFormat.js
index 05942d320..4ecfb69da 100644
--- a/packages/components/src/common/styles-dictionary/tailwindFormat.js
+++ b/packages/components/src/common/styles-dictionary/tailwindFormat.js
@@ -17,6 +17,14 @@ StyleDictionary.registerFormat({
       return result.toLowerCase().replace(" ", "-");
     }
 
+    function convertToKebabCase(inputString) {
+      return inputString
+        .replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+        .replace(/\d+/g, (match) => `-${match}`)
+        .replace(/^-/, "")
+        .replace(/-+/g, "-");
+    }
+
     function transformDictionary(tokens, keys) {
       const result = {};
 
@@ -32,16 +40,18 @@ StyleDictionary.registerFormat({
     function transformColor(tokens) {
       const colors = {};
 
-      for (const [name, colorTokens] of Object.entries(tokens)) {
-        const color = {};
-
-        for (const [colorName, token] of Object.entries(colorTokens)) {
-          color[colorName.toLowerCase().replace(" ", "-")] = token.value;
+      function getColor(theToken) {
+        for (const [, iToken] of Object.entries(theToken)) {
+          if ("value" in iToken && "name" in iToken) {
+            colors[convertToKebabCase(iToken.name)] = iToken.value;
+          } else {
+            getColor(iToken);
+          }
         }
-
-        colors[getName(name)] = color;
       }
 
+      getColor(tokens);
+
       return colors;
     }
 
@@ -58,41 +68,57 @@ StyleDictionary.registerFormat({
     }
 
     function transformFonts(tokens, keys) {
-      const fontFamily = {};
       const fontSize = {};
       const lineHeight = {};
-      const boldNameMap = {
-        400: "regular",
-        600: "semibold",
-      };
+      const letterSpacing = {};
+      const fontVariantNumeric = {};
+      const textTransform = {};
 
       for (const key of keys) {
         for (const [size, fonts] of Object.entries(tokens[key])) {
-          for (const [boldSize, { font }] of Object.entries(fonts)) {
-            const parsed = cssFont.parse(font.value);
-            fontFamily[getName(boldNameMap[boldSize])] = parsed.family;
+          for (const [, fontValue] of Object.entries(fonts)) {
+            const parsed = cssFont.parse(fontValue.font.value);
             fontSize[getName([key, size])] = parsed.size;
             lineHeight[getName([key, size])] = parsed.size;
+
+            letterSpacing[getName([key, size])] =
+              fontValue["letter-spacing"].value;
+            textTransform[getName([key, size])] = fontValue["text-transform"]
+              ? fontValue["text-transform"].value
+              : "none";
+            fontVariantNumeric[getName([key, size])] = fontValue[
+              "font-variant-numeric"
+            ]
+              ? fontValue["font-variant-numeric"].value
+              : "normal";
           }
         }
       }
 
       return {
-        fontFamily,
         fontSize,
+        fontVariantNumeric,
+        letterSpacing,
         lineHeight,
+        textTransform,
       };
     }
 
     const { sds } = dictionary.tokens;
     const tailwindConfig = {
-      ...transformFonts(sds.font, ["body", "caps", "header"]),
-      ...transformIconSizes(sds.iconSizes),
-      borderRadius: transformDictionary(sds.corners),
-      boxShadow: transformDictionary(sds["drop-shadows"]),
+      fontFamily: transformDictionary(sds.font["font-family"]),
+      ...transformFonts(sds.font, [
+        "body",
+        "caps",
+        "header",
+        "tabular",
+        "code",
+      ]),
+      ...transformIconSizes(sds.iconSize),
+      borderRadius: transformDictionary(sds.corner),
+      boxShadow: transformDictionary(sds["drop-shadow"]),
       colors: transformColor(sds.color),
-      letterSpacing: transformDictionary(sds.font["letter-spacing"]),
-      spacing: transformDictionary(sds.spaces),
+      spacing: transformDictionary(sds.space),
     };
 
     return JSON.stringify(tailwindConfig, null, 2);
diff --git a/packages/components/src/common/svgs/IconBacteriaLarge.svg b/packages/components/src/common/svgs/IconBacteriaLarge.svg
index 86017943f..077bc098f 100644
--- a/packages/components/src/common/svgs/IconBacteriaLarge.svg
+++ b/packages/components/src/common/svgs/IconBacteriaLarge.svg
@@ -1,8 +1,5 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1883 13.4734C11.1883 14.4635 10.3857 15.2662 9.39555 15.2662C8.40543 15.2662 7.60278 14.4635 7.60278 13.4734C7.60278 12.4833 8.40543 11.6806 9.39555 11.6806C10.3857 11.6806 11.1883 12.4833 11.1883 13.4734ZM9.39555 14.1662C9.77816 14.1662 10.0883 13.856 10.0883 13.4734C10.0883 13.0908 9.77816 12.7806 9.39555 12.7806C9.01295 12.7806 8.70278 13.0908 8.70278 13.4734C8.70278 13.856 9.01295 14.1662 9.39555 14.1662Z" />
-    <path d="M13.0605 7.3316C13.5786 7.3316 13.9986 6.91161 13.9986 6.39351C13.9986 5.87542 13.5786 5.45542 13.0605 5.45542C12.5424 5.45542 12.1224 5.87542 12.1224 6.39351C12.1224 6.91161 12.5424 7.3316 13.0605 7.3316Z" />
-    <path d="M11.7197 11.1284C11.5174 10.8036 11.6167 10.3764 11.9414 10.1741L12.8882 9.58425C13.2129 9.38194 13.6402 9.48119 13.8425 9.80594C14.0448 10.1307 13.9456 10.5579 13.6208 10.7603L12.674 11.3501C12.3493 11.5524 11.922 11.4531 11.7197 11.1284Z" />
-    <path d="M9.31182 8.53432C9.37484 8.9117 9.73185 9.16655 10.1092 9.10353C10.4866 9.04051 10.7415 8.68349 10.6784 8.30611L10.4501 6.9389C10.3871 6.56152 10.0301 6.30668 9.65272 6.3697C9.27534 6.43271 9.0205 6.78973 9.08352 7.16711L9.31182 8.53432Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.9317 2.23249C13.1173 1.93163 12.2757 1.84776 11.4704 1.95166L10.9439 0.80818C10.7839 0.460647 10.3724 0.308645 10.0249 0.468674C9.67735 0.628703 9.52535 1.04016 9.68537 1.3877L10.1138 2.31816C9.9366 2.39287 9.76355 2.47734 9.59556 2.57116L9.01366 1.87867C8.76752 1.58575 8.33052 1.54783 8.0376 1.79397C7.74468 2.04012 7.70676 2.47711 7.9529 2.77003L8.4849 3.40314C8.29821 3.58671 8.12443 3.78548 7.96565 3.99849L7.14259 3.72912C6.77896 3.61012 6.38771 3.80842 6.2687 4.17205C6.1497 4.53568 6.34801 4.92694 6.71164 5.04594L7.28466 5.23347C7.27538 5.25749 7.26627 5.28161 7.25732 5.30585L5.25774 10.7186L4.87739 10.399C4.58445 10.1529 4.14746 10.1908 3.90133 10.4838C3.65521 10.7767 3.69316 11.2137 3.98609 11.4598L4.85583 12.1906C4.80542 12.5854 4.8015 12.9796 4.84086 13.3664L3.90718 13.5246C3.52995 13.5885 3.27595 13.9461 3.33986 14.3234C3.40377 14.7006 3.76139 14.9546 4.13862 14.8907L5.16486 14.7168C5.5749 15.7768 6.32919 16.6991 7.3455 17.3049C7.26671 17.4655 7.17708 17.6324 7.08042 17.8114L7.06671 17.8368C6.90882 18.1292 6.72741 18.4651 6.60231 18.7992C6.4729 19.1448 6.37292 19.5647 6.45765 20.0089C6.54697 20.4771 6.82067 20.8692 7.24261 21.1835C7.69287 21.519 8.16711 21.6337 8.63965 21.5759C9.07383 21.5227 9.45757 21.3284 9.7576 21.1572C9.89748 21.0774 10.0141 21.0064 10.1219 20.9408C10.2839 20.8423 10.4262 20.7557 10.5978 20.6692C10.8516 20.5412 11.0487 20.483 11.2242 20.483C11.7009 20.483 11.9055 20.6425 11.9934 20.7346C12.0456 20.7892 12.0768 20.8424 12.0937 20.8774C12.1009 20.8922 12.105 20.9028 12.1066 20.9074C12.2077 21.2707 12.5801 21.49 12.9487 21.3991C13.324 21.3064 13.5532 20.9271 13.4606 20.5518L12.7865 20.7181C13.4606 20.5518 13.4607 20.5522 13.4606 20.5518L13.4601 20.5499L13.4596 20.548L13.4586 20.5439L13.4561 20.5346L13.4496 20.5115C13.4446 20.4943 13.438 20.4734 13.4296 20.4492C13.4128 20.4011 13.3886 20.3394 13.3545 20.2688C13.2867 20.1283 13.1773 19.9473 13.0061 19.7679C12.647 19.3917 12.0732 19.083 11.2242 19.083C10.7369 19.083 10.3123 19.2453 9.96754 19.4191C9.75656 19.5254 9.51902 19.6688 9.31922 19.7894C9.22286 19.8476 9.13527 19.9004 9.06368 19.9413C8.79363 20.0954 8.61262 20.1687 8.46949 20.1862C8.36471 20.1991 8.24909 20.1876 8.07907 20.0609C7.88073 19.9131 7.84429 19.8065 7.83286 19.7466C7.81684 19.6626 7.82551 19.5249 7.91339 19.2902C8.00195 19.0537 8.13953 18.7966 8.31237 18.4765L8.31927 18.4637C8.41976 18.2776 8.53105 18.0714 8.63477 17.8545C9.96176 18.2208 11.3309 18.0345 12.4754 17.4187L13.1831 18.2627C13.429 18.5558 13.866 18.5942 14.1591 18.3483C14.4523 18.1025 14.4906 17.6655 14.2448 17.3723L13.5999 16.6034C13.966 16.2544 14.2847 15.8483 14.5407 15.3919L15.6671 15.4879C16.0483 15.5204 16.3837 15.2377 16.4162 14.8565C16.4487 14.4752 16.166 14.1399 15.7847 14.1074L15.1053 14.0494L17.005 8.90685C17.0285 8.84338 17.0506 8.77974 17.0714 8.71597L17.6756 8.93916C18.0345 9.07174 18.4329 8.88828 18.5655 8.52938C18.6981 8.17048 18.5146 7.77205 18.1557 7.63946L17.3235 7.33201C17.3377 7.00597 17.3208 6.68203 17.2747 6.36411L18.0806 6.24121C18.4589 6.18353 18.7187 5.83015 18.661 5.45192C18.6034 5.07368 18.25 4.81382 17.8718 4.8715L16.8902 5.02118C16.7498 4.70088 16.5774 4.39478 16.3752 4.10807L17.0588 3.52985C17.3509 3.28275 17.3874 2.84564 17.1403 2.55352C16.8932 2.2614 16.4561 2.2249 16.164 2.47199L15.4315 3.09154C14.9949 2.73263 14.4918 2.4394 13.9317 2.23249ZM13.5721 14.1595L15.6918 8.42171C16.4182 6.45524 15.413 4.2722 13.4465 3.54574C11.4801 2.81929 9.29703 3.82452 8.57057 5.79099L6.45091 11.5288C5.72446 13.4953 6.72969 15.6783 8.69615 16.4048C10.6626 17.1312 12.8457 16.126 13.5721 14.1595Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M12.205 14.698a1.956 1.956 0 1 1-3.911 0 1.956 1.956 0 0 1 3.911 0Zm-1.955.756a.756.756 0 1 0 0-1.512.756.756 0 0 0 0 1.512Z"/>
+  <path d="M14.248 7.998a1.023 1.023 0 1 0 0-2.047 1.023 1.023 0 0 0 0 2.047Zm-1.463 4.142a.756.756 0 0 1 .242-1.041l1.033-.643a.756.756 0 0 1 .799 1.282l-1.033.644a.756.756 0 0 1-1.04-.242Zm-2.627-2.83a.756.756 0 1 0 1.491-.249L11.4 7.57a.756.756 0 0 0-1.49.249l.248 1.491Z"/>
+  <path fill-rule="evenodd" d="M15.198 2.435a5.643 5.643 0 0 0-2.685-.306L11.94.882a.756.756 0 1 0-1.373.632l.467 1.015a5.708 5.708 0 0 0-.565.276l-.635-.756a.756.756 0 0 0-1.157.973l.58.69c-.203.2-.393.418-.566.65l-.898-.294a.756.756 0 0 0-.47 1.437l.625.204a5.81 5.81 0 0 0-.03.08l-2.181 5.904-.415-.349a.756.756 0 0 0-.973 1.158l.95.797c-.056.43-.06.86-.017 1.283l-1.019.172a.756.756 0 0 0 .253 1.49l1.12-.19a5.662 5.662 0 0 0 2.378 2.824c-.086.175-.184.357-.289.553l-.015.027c-.172.32-.37.686-.507 1.05-.14.377-.25.835-.157 1.32.097.51.396.938.856 1.281.491.366 1.009.491 1.524.428.474-.058.892-.27 1.22-.456.152-.087.28-.165.397-.236.177-.108.332-.202.52-.297.276-.14.491-.203.683-.203.52 0 .743.174.839.274a.62.62 0 0 1 .123.19.764.764 0 0 0 1.477-.389l-.735.181.735-.18v-.005l-.002-.005-.003-.01-.007-.025a1.686 1.686 0 0 0-.104-.265 2.144 2.144 0 0 0-.38-.546c-.391-.41-1.017-.747-1.943-.747-.532 0-.995.177-1.371.366-.23.116-.49.273-.708.404-.105.064-.2.121-.278.166-.295.168-.492.248-.649.267-.114.014-.24.002-.426-.136-.216-.162-.256-.278-.268-.343-.018-.092-.008-.242.088-.498.096-.258.246-.539.435-.888l.008-.014c.11-.203.23-.428.344-.664 1.447.4 2.941.196 4.19-.476l.772.92a.756.756 0 0 0 1.158-.97l-.704-.84c.4-.38.747-.823 1.027-1.32l1.228.104a.756.756 0 0 0 .129-1.506l-.742-.063 2.073-5.61c.026-.07.05-.14.072-.209l.66.244a.756.756 0 0 0 .523-1.418l-.908-.335a5.644 5.644 0 0 0-.053-1.056l.88-.134a.756.756 0 1 0-.229-1.495l-1.07.164a5.698 5.698 0 0 0-.562-.996l.745-.631a.756.756 0 0 0-.976-1.154l-.799.676a5.66 5.66 0 0 0-1.636-.938Zm-.392 13.012 2.312-6.26a4.14 4.14 0 1 0-7.768-2.87l-2.313 6.26a4.14 4.14 0 0 0 7.769 2.87Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconBacteriaSmall.svg b/packages/components/src/common/svgs/IconBacteriaSmall.svg
index b4a018a3b..852866a60 100644
--- a/packages/components/src/common/svgs/IconBacteriaSmall.svg
+++ b/packages/components/src/common/svgs/IconBacteriaSmall.svg
@@ -1,12 +1,6 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1265_422)">
-<path d="M6.79565 6.35679C7.51238 6.35679 8.09341 5.77518 8.09341 5.05772C8.09341 4.34026 7.51238 3.75864 6.79565 3.75864C6.07892 3.75864 5.49789 4.34026 5.49789 5.05772C5.49789 5.77518 6.07892 6.35679 6.79565 6.35679Z" />
-<path d="M5.28604 10.1078C5.99974 10.1078 6.57831 9.52861 6.57831 8.81419C6.57831 8.09976 5.99974 7.52061 5.28604 7.52061C4.57234 7.52061 3.99377 8.09976 3.99377 8.81419C3.99377 9.52861 4.57234 10.1078 5.28604 10.1078Z" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.14066 3.78484L0.333928 2.07441C-0.0943055 1.66901 -0.11316 0.992875 0.291815 0.564232C0.696789 0.13559 1.37224 0.116754 1.80047 0.522161L3.20866 1.85529C4.46152 0.464407 6.48107 -0.0990109 8.34435 0.590023C9.482 1.01072 10.3607 1.8241 10.8836 2.81994L12.5291 2.14882C13.0753 1.92604 13.6984 2.18837 13.9208 2.73474C14.1432 3.2811 13.8807 3.90461 13.3345 4.12738L11.4252 4.90608C11.4387 5.48338 11.3456 6.07282 11.1336 6.64735L9.75583 10.3806L11.4221 11.9211C11.8551 12.3214 11.882 12.9973 11.4821 13.4307C11.0822 13.8641 10.407 13.8909 9.97401 13.4906L8.59011 12.2112C7.32908 13.4354 5.43093 13.901 3.67204 13.2505C1.23024 12.3476 -0.0185391 9.63561 0.882817 7.19322L2.14066 3.78484ZM9.55786 6.06465L8.14965 9.88046C7.56953 11.4524 5.82525 12.2556 4.25369 11.6744C2.68213 11.0933 1.87841 9.34785 2.45853 7.77591L3.86674 3.9601C4.44686 2.38816 6.19114 1.58496 7.7627 2.16612C9.33426 2.74728 10.138 4.49271 9.55786 6.06465Z" />
-</g>
-<defs>
-<clipPath id="clip0_1265_422">
-<rect width="14" height="14" fill="white" />
-</clipPath>
-</defs>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7.766 7.265a1.484 1.484 0 1 0-.001-2.968 1.484 1.484 0 0 0 .001 2.968Zm-1.725 4.287a1.478 1.478 0 1 0-.001-2.955 1.478 1.478 0 0 0 .001 2.955Z" />
+  <path fill-rule="evenodd"
+    d="M2.446 4.326.382 2.37A1.222 1.222 0 0 1 .334.645 1.219 1.219 0 0 1 2.058.597L3.667 2.12a5.385 5.385 0 0 1 8.771 1.103l1.881-.767a1.22 1.22 0 1 1 .92 2.261l-2.182.89a5.377 5.377 0 0 1-.333 1.99l-1.575 4.267 1.905 1.76c.495.458.525 1.23.068 1.725a1.219 1.219 0 0 1-1.723.069l-1.582-1.462a5.384 5.384 0 0 1-5.62 1.188A5.392 5.392 0 0 1 1.009 8.22l1.437-3.895Zm8.477 2.605-1.61 4.361a3.465 3.465 0 0 1-4.452 2.05A3.47 3.47 0 0 1 2.81 8.887l1.61-4.361a3.465 3.465 0 0 1 4.452-2.05 3.47 3.47 0 0 1 2.051 4.455Z" />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconBarChartHorizontal3Small.svg b/packages/components/src/common/svgs/IconBarChartHorizontal3Small.svg
index 066dddd31..f8c073762 100644
--- a/packages/components/src/common/svgs/IconBarChartHorizontal3Small.svg
+++ b/packages/components/src/common/svgs/IconBarChartHorizontal3Small.svg
@@ -1,5 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <defs></defs>
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M1 2.13001C1 1.57772 1.44772 1.13 2 1.13H8.39986C8.95214 1.13 9.3999 1.57772 9.3999 2.13001V2.88001C9.3999 3.4323 8.95214 3.88 8.39986 3.88H2C1.44772 3.88 1 3.4323 1 2.88001V2.13001ZM1 6.63014C1 6.07786 1.44772 5.63014 2 5.63014H12C12.5523 5.63014 13 6.07786 13 6.63014V7.38014C13 7.93242 12.5523 8.38015 12 8.38015H2C1.44772 8.38015 1 7.93242 1 7.38014V6.63014ZM1 11.1303C1 10.578 1.44772 10.1303 2 10.1303H4.79971C5.352 10.1303 5.79971 10.578 5.79971 11.1303V11.8803C5.79971 12.4326 5.352 12.8803 4.79971 12.8803H2C1.44772 12.8803 1 12.4326 1 11.8803V11.1303Z"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M1.143 2.434c0-.63.512-1.143 1.143-1.143H9.6c.631 0 1.143.512 1.143 1.143v.857c0 .632-.512 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143v-.857Zm0 5.143c0-.63.512-1.143 1.143-1.143h11.428c.631 0 1.143.512 1.143 1.143v.857c0 .632-.511 1.143-1.143 1.143H2.286a1.143 1.143 0 0 1-1.143-1.143v-.857Zm0 5.143c0-.63.512-1.143 1.143-1.143h3.2c.63 0 1.142.512 1.142 1.143v.857c0 .632-.511 1.143-1.143 1.143h-3.2a1.143 1.143 0 0 1-1.142-1.143v-.857Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconBarChartVertical3Small.svg b/packages/components/src/common/svgs/IconBarChartVertical3Small.svg
index 4ced5cb22..48f055080 100644
--- a/packages/components/src/common/svgs/IconBarChartVertical3Small.svg
+++ b/packages/components/src/common/svgs/IconBarChartVertical3Small.svg
@@ -1,5 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M1.13,12 L1.13,5.60014401 C1.13,5.04785926 1.57771525,4.60014401 2.13,4.60014401 L2.88,4.60014401 C3.43228475,4.60014401 3.88,5.04785926 3.88,5.60014401 L3.88,12 C3.88,12.5522847 3.43228475,13 2.88,13 L2.13,13 C1.57771525,13 1.13,12.5522847 1.13,12 Z M5.63013501,12 L5.63013501,2 C5.63013501,1.44771525 6.07785026,1 6.63013501,1 L7.38013501,1 C7.93241976,1 8.38013501,1.44771525 8.38013501,2 L8.38013501,12 C8.38013501,12.5522847 7.93241976,13 7.38013501,13 L6.63013501,13 C6.07785026,13 5.63013501,12.5522847 5.63013501,12 Z M10.13027,12 L10.13027,9.20028801 C10.13027,8.64800326 10.5779853,8.20028801 11.13027,8.20028801 L11.88027,8.20028801 C12.4325548,8.20028801 12.88027,8.64800326 12.88027,9.20028801 L12.88027,12 C12.88027,12.5522847 12.4325548,13 11.88027,13 L11.13027,13 C10.5779853,13 10.13027,12.5522847 10.13027,12 Z"
-        id="Fill-1"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M1.291 13.714V6.4c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v7.314c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143Zm5.143 0V2.286c0-.631.512-1.143 1.143-1.143h.857c.632 0 1.143.512 1.143 1.143v11.428c0 .631-.511 1.143-1.143 1.143h-.857a1.143 1.143 0 0 1-1.143-1.143Zm5.143 0v-3.2c0-.63.512-1.142 1.143-1.142h.857c.632 0 1.143.511 1.143 1.143v3.2c0 .63-.511 1.142-1.143 1.142h-.857a1.143 1.143 0 0 1-1.143-1.143Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconBarChartVertical4Small.svg b/packages/components/src/common/svgs/IconBarChartVertical4Small.svg
index 99804cbf8..7ddb42114 100644
--- a/packages/components/src/common/svgs/IconBarChartVertical4Small.svg
+++ b/packages/components/src/common/svgs/IconBarChartVertical4Small.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1"
-    xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M5.61056645,2.70718954 C6.08749862,2.70718954 6.47412854,3.09381946 6.47412854,3.57075163 L6.47412854,12.2864379 C6.47412854,12.7633701 6.08749862,13.15 5.61056645,13.15 C5.13363428,13.15 4.74700436,12.7633701 4.74700436,12.2864379 L4.74700436,3.57075163 C4.74700436,3.09381946 5.13363428,2.70718954 5.61056645,2.70718954 Z M2.86356209,4.9375817 C3.34049427,4.9375817 3.72712418,5.32421162 3.72712418,5.80114379 L3.72712418,12.275 C3.72712418,12.7519322 3.34049427,13.1385621 2.86356209,13.1385621 C2.38662992,13.1385621 2,12.7519322 2,12.275 L2,5.80114379 C2,5.32421162 2.38662992,4.9375817 2.86356209,4.9375817 Z M8.35757081,0.9 C8.83450298,0.9 9.2211329,1.28662992 9.2211329,1.76356209 L9.2211329,12.275 C9.2211329,12.7519322 8.83450298,13.1385621 8.35757081,13.1385621 C7.88063863,13.1385621 7.49400871,12.7519322 7.49400871,12.275 L7.49400871,1.76356209 C7.49400871,1.28662992 7.88063863,0.9 8.35757081,0.9 Z M11.1045752,5.12058824 C11.5815073,5.12058824 11.9681373,5.50721815 11.9681373,5.98415033 L11.9681373,12.275 C11.9681373,12.7519322 11.5815073,13.1385621 11.1045752,13.1385621 C10.627643,13.1385621 10.2410131,12.7519322 10.2410131,12.275 L10.2410131,5.98415033 C10.2410131,5.50721815 10.627643,5.12058824 11.1045752,5.12058824 Z"
-        id="Combined-Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M6.412 3.094c.545 0 .987.442.987.987v9.96a.987.987 0 1 1-1.974 0v-9.96c0-.545.442-.987.987-.987Zm-3.14 2.549c.546 0 .988.442.988.987v7.399a.987.987 0 0 1-1.974 0v-7.4c0-.544.442-.986.987-.986Zm6.28-4.614c.545 0 .986.441.986.986V14.03a.987.987 0 1 1-1.973 0V2.015c0-.545.441-.986.987-.986Zm3.139 4.823c.545 0 .987.442.987.987v7.19a.987.987 0 0 1-1.974 0v-7.19c0-.545.442-.987.987-.987Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconBookLarge.svg b/packages/components/src/common/svgs/IconBookLarge.svg
old mode 100755
new mode 100644
index 4331084d9..fcb298618
--- a/packages/components/src/common/svgs/IconBookLarge.svg
+++ b/packages/components/src/common/svgs/IconBookLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M17.322 1.41998H5.3775C4.63822 1.41998 3.92929 1.71359 3.40644 2.23642C2.88378 2.75908 2.59 3.4682 2.59 4.20749V17.7991V17.8549V17.9107C2.59466 17.9482 2.60205 17.9855 2.61236 18.0221C2.66816 18.7182 2.98335 19.368 3.4953 19.843C4.00745 20.3179 4.67905 20.5833 5.37747 20.5866H17.3219C17.8763 20.5866 18.4081 20.3663 18.8003 19.9743C19.1923 19.5823 19.4126 19.0505 19.4126 18.496V3.51064C19.4126 2.95607 19.1923 2.42431 18.8003 2.03231C18.4081 1.64032 17.8763 1.41998 17.322 1.41998ZM18.0189 3.51061V15.1236H7.55176V2.81374H17.322C17.5067 2.81374 17.684 2.88704 17.8147 3.0179C17.9453 3.14857 18.0189 3.3257 18.0189 3.51061ZM5.3775 2.81374H6.15801V15.1236H5.3775C4.88673 15.1263 4.40551 15.2601 3.98375 15.5109V4.20755C3.98375 3.83792 4.13055 3.48345 4.39207 3.22192C4.6534 2.96059 5.00786 2.81374 5.3775 2.81374ZM17.322 19.1928H5.3775C5.01215 19.2096 4.65574 19.076 4.39112 18.8234C4.12668 18.5706 3.97716 18.2206 3.97716 17.8549C3.97716 17.4889 4.12668 17.1391 4.39112 16.8864C4.65576 16.6336 5.01219 16.5002 5.3775 16.5169H18.0189V18.4962C18.0189 18.8812 17.7068 19.1928 17.322 19.1928ZM9.98784 5.70677C9.98784 5.32178 10.2997 5.00989 10.6847 5.00989H14.8854C15.2704 5.00989 15.5823 5.32178 15.5823 5.70677C15.5823 6.09157 15.2704 6.40365 14.8854 6.40365H10.6847C10.2997 6.40365 9.98784 6.09157 9.98784 5.70677Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18.897 1.55H5.867a3.04 3.04 0 0 0-3.042 3.04v14.948a.822.822 0 0 0 .025.122 3.042 3.042 0 0 0 3.016 2.798h13.03a2.281 2.281 0 0 0 2.281-2.28V3.83a2.28 2.28 0 0 0-2.28-2.28Zm.76 2.28v12.668H8.238V3.07h10.659a.76.76 0 0 1 .76.76Zm-13.79-.76h.85v13.428h-.85a3.007 3.007 0 0 0-1.521.423V4.591a1.52 1.52 0 0 1 1.52-1.521Zm13.03 17.868H5.867a1.462 1.462 0 1 1 0-2.92h13.79v2.16c0 .42-.34.76-.76.76ZM10.896 6.226c0-.42.34-.76.76-.76h4.583a.76.76 0 1 1 0 1.52h-4.583a.76.76 0 0 1-.76-.76Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconCheckCircleLarge.svg b/packages/components/src/common/svgs/IconCheckCircleLarge.svg
index 3f86377b4..0717265ec 100644
--- a/packages/components/src/common/svgs/IconCheckCircleLarge.svg
+++ b/packages/components/src/common/svgs/IconCheckCircleLarge.svg
@@ -1,5 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.9196 7.98204C16.1858 7.61228 16.1019 7.0967 15.7321 6.83047C15.3623 6.56424 14.8468 6.64817 14.5805 7.01794L9.77858 13.6873L6.86327 10.4481C6.55847 10.1094 6.03683 10.082 5.69816 10.3868C5.35949 10.6916 5.33203 11.2132 5.63684 11.5519L9.29908 15.621C9.61909 15.9766 10.1857 15.9458 10.4652 15.5576L15.9196 7.98204Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 11C20.5 16.2467 16.2467 20.5 11 20.5C5.75329 20.5 1.5 16.2467 1.5 11C1.5 5.75329 5.75329 1.5 11 1.5C16.2467 1.5 20.5 5.75329 20.5 11ZM19.05 11C19.05 15.4459 15.4459 19.05 11 19.05C6.55411 19.05 2.95 15.4459 2.95 11C2.95 6.55411 6.55411 2.95 11 2.95C15.4459 2.95 19.05 6.55411 19.05 11Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.367 8.708a.9.9 0 1 0-1.461-1.052l-5.239 7.276-3.18-3.534a.9.9 0 1 0-1.338 1.204l3.995 4.44a.818.818 0 0 0 1.273-.07l5.95-8.264Z"/>
+  <path fill-rule="evenodd" d="M22.364 12c0 5.724-4.64 10.364-10.364 10.364-5.724 0-10.364-4.64-10.364-10.364C1.636 6.276 6.276 1.636 12 1.636c5.724 0 10.364 4.64 10.364 10.364Zm-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconCheckCircleSmall.svg b/packages/components/src/common/svgs/IconCheckCircleSmall.svg
index 81ee0baaa..5e8ccd89e 100644
--- a/packages/components/src/common/svgs/IconCheckCircleSmall.svg
+++ b/packages/components/src/common/svgs/IconCheckCircleSmall.svg
@@ -1,4 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6 7C12.6 10.0928 10.0928 12.6 7 12.6C3.90721 12.6 1.4 10.0928 1.4 7C1.4 3.90721 3.90721 1.4 7 1.4C10.0928 1.4 12.6 3.90721 12.6 7ZM14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM10.3384 5.17364C10.5724 4.84869 10.4986 4.39561 10.1737 4.16165C9.84871 3.9277 9.39563 4.00145 9.16167 4.3264L6.08722 8.59646L4.28892 6.59835C4.02106 6.30073 3.56265 6.2766 3.26503 6.54446C2.96741 6.81232 2.94328 7.27073 3.21114 7.56835L5.79788 10.4425C6.01121 10.6795 6.38895 10.659 6.57529 10.4002L10.3384 5.17364Z"></path>
-</svg>
-    
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M14.4 8A6.4 6.4 0 1 1 1.6 8a6.4 6.4 0 0 1 12.8 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-4.185-2.087a.829.829 0 1 0-1.345-.969l-3.513 4.88-2.055-2.283A.829.829 0 0 0 3.67 8.65l2.956 3.284a.572.572 0 0 0 .889-.048l4.3-5.973Z" />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconCheckSmall.svg b/packages/components/src/common/svgs/IconCheckSmall.svg
index 4c4e030dd..0580a3cf7 100644
--- a/packages/components/src/common/svgs/IconCheckSmall.svg
+++ b/packages/components/src/common/svgs/IconCheckSmall.svg
@@ -1,5 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M12.4154429,1.0113547 C12.224591,1.04867271 12.054896,1.16786509 11.9309769,1.3452957 L5.65000409,9.86217534 L2.4023085,6.19252769 C2.19541129,5.90548483 1.85267898,5.79330619 1.54131608,5.93356117 C1.2475177,6.06590412 1.04548431,6.39609589 1.00673898,6.78221593 C0.968554748,7.16274423 1.09435894,7.54262775 1.34042528,7.76666883 L5.16580803,12.0919798 C5.49517985,12.4615483 5.99866618,12.4297851 6.297284,12.0258112 L13.1217559,2.7694764 C13.3554654,2.46182239 13.4157028,1.9948864 13.274886,1.60334491 C13.1268172,1.19163933 12.7825202,0.94262347 12.4154429,1.0113547 Z"
-        id="Combined-Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M14.19 1.156a.892.892 0 0 0-.555.381l-7.178 9.734-3.711-4.194c-.237-.328-.629-.456-.984-.296-.336.151-.567.529-.611.97-.044.435.1.87.38 1.125l4.373 4.943c.376.423.952.386 1.293-.075l7.8-10.579c.266-.351.335-.885.174-1.333-.169-.47-.562-.755-.982-.676Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconCheckboxChecked.svg b/packages/components/src/common/svgs/IconCheckboxChecked.svg
index 1275eddef..4f51a9049 100644
--- a/packages/components/src/common/svgs/IconCheckboxChecked.svg
+++ b/packages/components/src/common/svgs/IconCheckboxChecked.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<rect width="16" height="16" rx="2" fill="#000" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8682 3.72234C11.7318 3.749 11.6106 3.83414 11.5221 3.96087L7.03571 10.0444L4.71593 7.42318C4.56814 7.21815 4.32334 7.13802 4.10093 7.23821C3.89108 7.33274 3.74677 7.56859 3.71909 7.84439C3.69182 8.11619 3.78168 8.38754 3.95744 8.54757L6.68986 11.6371C6.92512 11.9011 7.28476 11.8784 7.49805 11.5898L12.3727 4.97815C12.5396 4.75839 12.5826 4.42487 12.4821 4.14519C12.3763 3.85112 12.1304 3.67325 11.8682 3.72234Z" fill="#c00"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"/>
+  <path fill="#fff" fill-rule="evenodd" d="M11.744 3.962a.557.557 0 0 0-.346.239L6.91 10.284 4.59 7.663c-.147-.205-.392-.285-.614-.185-.21.095-.355.33-.382.606-.027.272.062.543.238.703l2.733 3.09c.235.264.594.241.808-.047l4.874-6.612c.167-.22.21-.553.11-.833-.106-.294-.352-.472-.614-.423Z"/>
 </svg>
diff --git a/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg b/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg
index b49d37b05..9461387e0 100644
--- a/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg
+++ b/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<rect width="16" height="16" rx="2" fill="#000"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 8C13 8.55228 12.5523 9 12 9L4 9C3.44771 9 3 8.55228 3 8C3 7.44772 3.44771 7 4 7L12 7C12.5523 7 13 7.44772 13 8Z" fill="#c00"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"/>
+  <path fill="#fff" d="M12.286 8.004a.625.625 0 0 0-.625-.625H4.339a.625.625 0 0 0 0 1.25h7.322c.345 0 .625-.28.625-.625Z"/>
 </svg>
diff --git a/packages/components/src/common/svgs/IconCheckboxUnchecked.svg b/packages/components/src/common/svgs/IconCheckboxUnchecked.svg
index 8d3aac63f..8a45de52f 100644
--- a/packages/components/src/common/svgs/IconCheckboxUnchecked.svg
+++ b/packages/components/src/common/svgs/IconCheckboxUnchecked.svg
@@ -1,4 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z" fill="#c00"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 1H2C1.44772 1 1 1.44772 1 2V14C1 14.5523 1.44772 15 2 15H14C14.5523 15 15 14.5523 15 14V2C15 1.44772 14.5523 1 14 1ZM2 0C0.895431 0 0 0.895431 0 2V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V2C16 0.895431 15.1046 0 14 0H2Z" fill="#000"/>
-</svg>
+  <path
+    d="M 0 2 C 0.022 1.484 0.251 0.92 0.586 0.586 C 0.92 0.251 1.484 0.022 2 0 L 14 0 C 14.516 0.022 15.08 0.251 15.414 0.586 C 15.749 0.92 15.978 1.484 16 2 L 16 14 C 15.978 14.516 15.749 15.08 15.414 15.414 C 15.08 15.749 14.516 15.978 14 16 L 2 16 C 1.484 15.978 0.92 15.749 0.586 15.414 C 0.251 15.08 0.022 14.516 0 14 Z M 1 14 C 0.978 14.312 1.084 14.499 1.293 14.707 C 1.501 14.916 1.688 15.022 2 15 L 14 15 C 14.312 15.022 14.499 14.916 14.707 14.707 C 14.916 14.499 15.022 14.312 15 14 L 15 2 C 15.022 1.688 14.916 1.501 14.707 1.293 C 14.499 1.084 14.312 0.978 14 1 L 2 1 C 1.688 0.978 1.501 1.084 1.293 1.293 C 1.084 1.501 0.978 1.688 1 2 Z"
+  ></path>
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconChevronDown2Small.svg b/packages/components/src/common/svgs/IconChevronDown2Small.svg
index f36f0b269..076f28775 100644
--- a/packages/components/src/common/svgs/IconChevronDown2Small.svg
+++ b/packages/components/src/common/svgs/IconChevronDown2Small.svg
@@ -1,8 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M7.32996 13.5892C7.13392 13.7868 6.81427 13.7862 6.61889 13.588L1.10852 7.99689C0.914678 7.80021 0.916981 7.48363 1.11366 7.2898L1.75467 6.65805C1.95134 6.46421 2.26792 6.46651 2.46175 6.66319L6.62337 10.8858C6.81875 11.084 7.1384 11.0846 7.33444 10.887L11.5283 6.65978C11.7228 6.46375 12.0394 6.46249 12.2354 6.65698L12.8743 7.29086C13.0704 7.48535 13.0716 7.80192 12.8771 7.99796L7.32996 13.5892Z"
-    />
-    <path
-        d="M7.32996 7.35481C7.13392 7.5524 6.81427 7.55187 6.61889 7.35363L1.10851 1.76251C0.914678 1.56583 0.91698 1.24926 1.11366 1.05542L1.75467 0.423673C1.95134 0.229836 2.26792 0.232139 2.46175 0.428816L6.62337 4.65142C6.81875 4.84966 7.1384 4.85019 7.33444 4.6526L11.5283 0.425406C11.7228 0.229372 12.0394 0.22812 12.2354 0.422608L12.8743 1.05648C13.0704 1.25097 13.0716 1.56755 12.8771 1.76358L7.32996 7.35481Z"
-    />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.377 15.53a.571.571 0 0 1-.813 0L1.267 9.14a.571.571 0 0 1 .006-.809l.732-.722a.571.571 0 0 1 .808.006l4.757 4.826a.571.571 0 0 0 .812.001l4.793-4.83a.572.572 0 0 1 .808-.004l.73.724a.571.571 0 0 1 .004.809l-6.34 6.39Z"/>
+  <path d="M8.377 8.405a.571.571 0 0 1-.813 0l-6.297-6.39a.571.571 0 0 1 .006-.809l.732-.722a.571.571 0 0 1 .808.006L7.57 5.316a.571.571 0 0 0 .812.001l4.793-4.83a.572.572 0 0 1 .808-.004l.73.724a.571.571 0 0 1 .004.809l-6.34 6.39Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconChevronDownLarge.svg b/packages/components/src/common/svgs/IconChevronDownLarge.svg
index 60b497b3e..a8167f484 100644
--- a/packages/components/src/common/svgs/IconChevronDownLarge.svg
+++ b/packages/components/src/common/svgs/IconChevronDownLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.562 16.106C11.269 16.4033 10.7895 16.4041 10.4954 16.1077L1.97206 7.51666C1.68033 7.22261 1.68221 6.74774 1.97626 6.45601L2.54418 5.89256C2.83822 5.60083 3.31309 5.60271 3.60483 5.89676L10.49 12.8366C10.7841 13.133 11.2635 13.1322 11.5566 12.8349L18.3901 5.90122C18.6809 5.60621 19.1557 5.60275 19.4507 5.89351L20.0205 6.45507C20.3155 6.74582 20.319 7.22068 20.0282 7.5157L11.562 16.106Z"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M12.613 17.57a.818.818 0 0 1-1.163.002L2.15 8.2a.818.818 0 0 1 .005-1.157l.62-.615a.818.818 0 0 1 1.157.005l7.51 7.57a.818.818 0 0 0 1.164-.001l7.455-7.564a.818.818 0 0 1 1.157-.009l.622.613a.818.818 0 0 1 .008 1.157l-9.236 9.371Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconChevronDownSmall.svg b/packages/components/src/common/svgs/IconChevronDownSmall.svg
index 8e9a49c51..f924fbcdc 100644
--- a/packages/components/src/common/svgs/IconChevronDownSmall.svg
+++ b/packages/components/src/common/svgs/IconChevronDownSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.37381 10.4611C7.17843 10.6593 6.85878 10.6599 6.66274 10.4623L1.11557 4.87104C0.921083 4.675 0.922335 4.35842 1.11837 4.16394L1.75728 3.53006C1.95331 3.33557 2.26989 3.33682 2.46438 3.53286L6.65826 7.76005C6.8543 7.95764 7.17395 7.95711 7.36933 7.75887L11.5309 3.53627C11.7248 3.33959 12.0414 3.33729 12.238 3.53112L12.879 4.16287C13.0757 4.35671 13.078 4.67328 12.8842 4.86996L7.37381 10.4611Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8.497 12.605a.663.663 0 0 1-.944.001l-7.36-7.42a.663.663 0 0 1 .003-.937l.848-.842a.663.663 0 0 1 .938.004l5.565 5.61c.26.262.685.261.944-.002l5.522-5.603a.663.663 0 0 1 .939-.007l.85.838a.663.663 0 0 1 .007.938l-7.312 7.42Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconChevronLeft2Small.svg b/packages/components/src/common/svgs/IconChevronLeft2Small.svg
index 0b3f9134d..df3087edc 100644
--- a/packages/components/src/common/svgs/IconChevronLeft2Small.svg
+++ b/packages/components/src/common/svgs/IconChevronLeft2Small.svg
@@ -1,6 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M0.41152 7.34384C0.213929 7.14781 0.214458 6.82815 0.412699 6.63278L6.00382 1.1224C6.2005 0.928563 6.51707 0.930866 6.71091 1.12754L7.34266 1.76855C7.5365 1.96523 7.53419 2.2818 7.33752 2.47564L3.11492 6.63726C2.91667 6.83264 2.91614 7.15229 3.11373 7.34832L7.34093 11.5422C7.53696 11.7367 7.53821 12.0533 7.34372 12.2493L6.70985 12.8882C6.51536 13.0842 6.19878 13.0855 6.00275 12.891L0.41152 7.34384Z"></path>
-    <path
-        d="M6.6459 7.34384C6.4483 7.14781 6.44883 6.82815 6.64707 6.63278L12.2382 1.1224C12.4349 0.928563 12.7514 0.930866 12.9453 1.12754L13.577 1.76855C13.7709 1.96523 13.7686 2.2818 13.5719 2.47564L9.34929 6.63726C9.15105 6.83264 9.15052 7.15229 9.34811 7.34832L13.5753 11.5422C13.7713 11.7367 13.7726 12.0533 13.5781 12.2493L12.9442 12.8882C12.7497 13.0842 12.4332 13.0855 12.2371 12.891L6.6459 7.34384Z"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M.47 8.393a.571.571 0 0 1 .002-.813l6.39-6.297a.571.571 0 0 1 .808.006l.722.732a.571.571 0 0 1-.006.808L3.56 7.585a.571.571 0 0 0-.001.813l4.83 4.793a.571.571 0 0 1 .004.808l-.725.73a.571.571 0 0 1-.808.004L.47 8.393Z"/>
+  <path d="M7.595 8.393a.571.571 0 0 1 .002-.813l6.39-6.297a.571.571 0 0 1 .808.006l.722.732a.571.571 0 0 1-.006.808l-4.826 4.756a.571.571 0 0 0-.002.813l4.832 4.793a.571.571 0 0 1 .003.808l-.725.73a.571.571 0 0 1-.808.004l-6.39-6.34Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconChevronLeftLarge.svg b/packages/components/src/common/svgs/IconChevronLeftLarge.svg
index 76301dc34..50316e627 100644
--- a/packages/components/src/common/svgs/IconChevronLeftLarge.svg
+++ b/packages/components/src/common/svgs/IconChevronLeftLarge.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M 5.611 11.316 C 5.313 11.023 5.312 10.544 5.609 10.249 L 14.191 1.717 C 14.484 1.425 14.959 1.426 15.251 1.72 L 15.816 2.287 C 16.107 2.581 16.106 3.056 15.812 3.348 L 8.88 10.24 C 8.583 10.535 8.584 11.014 8.882 11.307 L 15.823 18.133 C 16.118 18.424 16.122 18.899 15.832 19.194 L 15.27 19.764 C 14.98 20.06 14.505 20.064 14.209 19.773 L 5.611 11.316 Z"></path>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M6.123 12.356a.823.823 0 0 1-.003-1.166l9.33-9.31a.812.812 0 0 1 1.152.004l.613.62a.823.823 0 0 1-.004 1.16l-7.537 7.521a.823.823 0 0 0 .003 1.165l7.538 7.47c.32.317.324.836.009 1.158l-.61.622a.812.812 0 0 1-1.153.009l-9.338-9.253Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconChevronLeftSmall.svg b/packages/components/src/common/svgs/IconChevronLeftSmall.svg
index 3481be729..e1f148aa5 100644
--- a/packages/components/src/common/svgs/IconChevronLeftSmall.svg
+++ b/packages/components/src/common/svgs/IconChevronLeftSmall.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.53584 7.37329C3.3376 7.17791 3.33707 6.85826 3.53466 6.66223L9.12589 1.11505C9.32192 0.920564 9.6385 0.921816 9.83299 1.11785L10.4669 1.75676C10.6614 1.95279 10.6601 2.26937 10.4641 2.46386L6.23687 6.65774C6.03928 6.85378 6.03981 7.17343 6.23805 7.36881L10.4607 11.5304C10.6573 11.7243 10.6596 12.0408 10.4658 12.2375L9.83405 12.8785C9.64021 13.0752 9.32364 13.0775 9.12696 12.8837L3.53584 7.37329Z"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M3.403 8.497a.663.663 0 0 1-.002-.944l7.42-7.36a.663.663 0 0 1 .938.003l.841.848c.258.26.256.68-.004.938L6.987 7.547a.663.663 0 0 0 .002.944l5.603 5.522a.663.663 0 0 1 .007.939l-.839.85a.664.664 0 0 1-.938.007l-7.42-7.312Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconChevronRight2Small.svg b/packages/components/src/common/svgs/IconChevronRight2Small.svg
index c0cbd4440..b9e91d1e8 100644
--- a/packages/components/src/common/svgs/IconChevronRight2Small.svg
+++ b/packages/components/src/common/svgs/IconChevronRight2Small.svg
@@ -1,6 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M7.35509 7.33603C7.55268 7.13999 7.55215 6.82034 7.35391 6.62496L1.76279 1.11459C1.56611 0.920751 1.24953 0.923053 1.0557 1.11973L0.423947 1.76074C0.23011 1.95742 0.232413 2.27399 0.42909 2.46783L4.65169 6.62945C4.84993 6.82482 4.85046 7.14448 4.65287 7.34051L0.42568 11.5344C0.229647 11.7289 0.228395 12.0455 0.422883 12.2415L1.05676 12.8804C1.25125 13.0764 1.56783 13.0777 1.76386 12.8832L7.35509 7.33603Z" />
-    <path
-        d="M13.5883 6.62496C13.7865 6.82034 13.7871 7.13999 13.5895 7.33603L7.99823 12.8832C7.8022 13.0777 7.48562 13.0764 7.29113 12.8804L6.65726 12.2415C6.46277 12.0455 6.46402 11.7289 6.66006 11.5344L10.8872 7.34051C11.0848 7.14448 11.0843 6.82482 10.8861 6.62945L6.66347 2.46783C6.46679 2.27399 6.46449 1.95742 6.65832 1.76074L7.29007 1.11973C7.48391 0.923053 7.80048 0.920751 7.99716 1.11459L13.5883 6.62496Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.406 8.384a.571.571 0 0 0-.002-.813l-6.39-6.297a.571.571 0 0 0-.807.006l-.722.732a.571.571 0 0 0 .005.808l4.826 4.757a.571.571 0 0 1 .002.812L.486 13.182a.571.571 0 0 0-.003.808l.725.73a.572.572 0 0 0 .808.004l6.39-6.34Z"/>
+  <path d="M15.53 7.571a.571.571 0 0 1 0 .813l-6.39 6.34a.572.572 0 0 1-.807-.004l-.725-.73a.571.571 0 0 1 .003-.808l4.832-4.793a.571.571 0 0 0-.002-.812L7.615 2.82a.571.571 0 0 1-.005-.808l.722-.732a.571.571 0 0 1 .808-.006l6.39 6.297Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconChevronRightLarge.svg b/packages/components/src/common/svgs/IconChevronRightLarge.svg
index 5ea612bec..44967f4d4 100644
--- a/packages/components/src/common/svgs/IconChevronRightLarge.svg
+++ b/packages/components/src/common/svgs/IconChevronRightLarge.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M 16.389 10.686 C 16.687 10.98 16.688 11.459 16.391 11.754 L 7.805 20.282 C 7.512 20.574 7.036 20.572 6.745 20.278 L 6.181 19.71 C 5.889 19.417 5.89 18.941 6.184 18.65 L 13.12 11.761 C 13.417 11.466 13.416 10.987 13.118 10.694 L 6.181 3.864 C 5.885 3.574 5.882 3.099 6.172 2.804 L 6.733 2.234 C 7.024 1.938 7.499 1.935 7.793 2.226 L 16.389 10.686 Z"></path>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M17.886 11.667a.818.818 0 0 1 0 1.163l-9.388 9.283a.818.818 0 0 1-1.157-.007l-.613-.62a.818.818 0 0 1 .006-1.157l7.584-7.499a.818.818 0 0 0 0-1.163L6.766 4.199a.818.818 0 0 1-.006-1.157l.613-.62a.818.818 0 0 1 1.157-.007l9.356 9.252Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconChevronRightSmall.svg b/packages/components/src/common/svgs/IconChevronRightSmall.svg
index 9ef9e5c70..c99f79c8a 100644
--- a/packages/components/src/common/svgs/IconChevronRightSmall.svg
+++ b/packages/components/src/common/svgs/IconChevronRightSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4629 6.62426C10.6612 6.81964 10.6617 7.13929 10.4641 7.33533L4.87287 12.8825C4.67683 13.077 4.36025 13.0757 4.16577 12.8797L3.53189 12.2408C3.3374 12.0448 3.33866 11.7282 3.53469 11.5337L7.76188 7.33981C7.95947 7.14377 7.95894 6.82412 7.7607 6.62874L3.5381 2.46713C3.34142 2.27329 3.33912 1.95671 3.53296 1.76004L4.16471 1.11903C4.35854 0.922352 4.67512 0.920049 4.87179 1.11389L10.4629 6.62426Z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M12.595 7.503c.263.26.263.683.001.944l-7.42 7.36a.663.663 0 0 1-.937-.003l-.842-.848a.663.663 0 0 1 .004-.938l5.61-5.565a.663.663 0 0 0-.002-.944L3.406 1.987a.663.663 0 0 1-.007-.939l.838-.85A.663.663 0 0 1 5.175.19l7.42 7.312Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconChevronUp2Small.svg b/packages/components/src/common/svgs/IconChevronUp2Small.svg
index 1552b1021..0a854cb78 100644
--- a/packages/components/src/common/svgs/IconChevronUp2Small.svg
+++ b/packages/components/src/common/svgs/IconChevronUp2Small.svg
@@ -1,8 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M7.34412 6.65197C7.14808 6.45438 6.82843 6.45491 6.63305 6.65315L1.12268 12.2443C0.928838 12.4409 0.931141 12.7575 1.12782 12.9514L1.76883 13.5831C1.9655 13.7769 2.28208 13.7746 2.47591 13.578L6.63753 9.35536C6.83291 9.15712 7.15256 9.15659 7.3486 9.35418L11.5425 13.5814C11.737 13.7774 12.0535 13.7787 12.2496 13.5842L12.8885 12.9503C13.0845 12.7558 13.0858 12.4392 12.8913 12.2432L7.34412 6.65197Z"
-    />
-    <path
-        d="M6.63305 0.418772C6.82843 0.220531 7.14808 0.220002 7.34411 0.417594L12.8913 6.00882C13.0858 6.20485 13.0845 6.52143 12.8885 6.71592L12.2496 7.3498C12.0535 7.54429 11.737 7.54303 11.5425 7.347L7.3486 3.11981C7.15256 2.92222 6.83291 2.92275 6.63753 3.12099L2.47591 7.34359C2.28208 7.54027 1.9655 7.54257 1.76883 7.34873L1.12782 6.71698C0.931141 6.52315 0.928838 6.20657 1.12267 6.00989L6.63305 0.418772Z"
-    />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.393 7.602a.571.571 0 0 0-.812.002l-6.298 6.39a.571.571 0 0 0 .006.808l.733.722a.571.571 0 0 0 .808-.006l4.756-4.826a.571.571 0 0 1 .812-.002l4.793 4.832a.571.571 0 0 0 .808.003l.73-.725a.571.571 0 0 0 .004-.808l-6.34-6.39Z"/>
+  <path d="M7.58.479a.571.571 0 0 1 .813-.002l6.34 6.39a.571.571 0 0 1-.003.808L14 8.4a.571.571 0 0 1-.809-.003L8.398 3.565a.571.571 0 0 0-.812.002L2.83 8.393a.571.571 0 0 1-.808.006l-.733-.722a.571.571 0 0 1-.006-.809L7.581.478Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconChevronUpLarge.svg b/packages/components/src/common/svgs/IconChevronUpLarge.svg
index 14c389cc6..2d654df65 100644
--- a/packages/components/src/common/svgs/IconChevronUpLarge.svg
+++ b/packages/components/src/common/svgs/IconChevronUpLarge.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.432 5.89355C10.7251 5.59619 11.2046 5.5954 11.4986 5.89179L20.022 14.4829C20.3137 14.7769 20.3119 15.2518 20.0178 15.5435L19.4499 16.1069C19.1558 16.3987 18.681 16.3968 18.3892 16.1028L11.504 9.16289C11.21 8.8665 10.7305 8.8673 10.4375 9.16466L3.60396 16.0983C3.3132 16.3933 2.83834 16.3968 2.54333 16.106L1.97354 15.5444C1.67853 15.2537 1.67507 14.7788 1.96583 14.4838L10.432 5.89355Z"></path>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M11.38 6.43a.818.818 0 0 1 1.164-.003l9.298 9.372a.818.818 0 0 1-.004 1.157l-.62.615a.818.818 0 0 1-1.157-.004L12.55 9.996a.818.818 0 0 0-1.164.002l-7.454 7.564a.818.818 0 0 1-1.157.008l-.622-.612a.818.818 0 0 1-.008-1.157l9.235-9.372Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconChevronUpSmall.svg b/packages/components/src/common/svgs/IconChevronUpSmall.svg
index c50bc91b7..1e0598e01 100644
--- a/packages/components/src/common/svgs/IconChevronUpSmall.svg
+++ b/packages/components/src/common/svgs/IconChevronUpSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.62423 3.53904C6.81961 3.3408 7.13926 3.34027 7.3353 3.53786L12.8825 9.12909C13.077 9.32513 13.0757 9.6417 12.8797 9.83619L12.2408 10.4701C12.0447 10.6646 11.7282 10.6633 11.5337 10.4673L7.33978 6.24008C7.14374 6.04249 6.82409 6.04302 6.62871 6.24126L2.4671 10.4639C2.27326 10.6605 1.95668 10.6628 1.76001 10.469L1.119 9.83725C0.922321 9.64342 0.920018 9.32684 1.11386 9.13017L6.62423 3.53904Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M7.503 3.403a.663.663 0 0 1 .944-.002l7.36 7.42c.259.26.257.68-.003.938l-.848.841a.663.663 0 0 1-.938-.004l-5.565-5.61a.663.663 0 0 0-.944.003l-5.522 5.603a.664.664 0 0 1-.939.007l-.85-.839a.664.664 0 0 1-.007-.938l7.312-7.42Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconCirclesOverlap2Large.svg b/packages/components/src/common/svgs/IconCirclesOverlap2Large.svg
new file mode 100644
index 000000000..3a673d6cb
--- /dev/null
+++ b/packages/components/src/common/svgs/IconCirclesOverlap2Large.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M7.875 19.875A7.838 7.838 0 0 0 12 18.709 7.875 7.875 0 1 0 12 5.29a7.875 7.875 0 1 0-4.125 14.585Zm0-1.582c.993 0 1.933-.23 2.768-.64A7.852 7.852 0 0 1 8.25 12a7.85 7.85 0 0 1 2.393-5.653 6.293 6.293 0 1 0-2.768 11.947Zm8.25-12.586c-.993 0-1.932.23-2.768.64A7.852 7.852 0 0 1 15.75 12a7.852 7.852 0 0 1-2.393 5.653 6.293 6.293 0 1 0 2.768-11.947Zm-3.722 1.922-1.298.575c-.257.34-.48.706-.666 1.095L12.9 8.21a6.343 6.343 0 0 0-.496-.58ZM13.69 9.59l-3.81 1.686-.005-.013a6.358 6.358 0 0 0-.042.833l4.098-1.814a6.251 6.251 0 0 0-.24-.692Zm.478 2.317-4.098 1.814c.068.239.15.472.243.698l3.813-1.688a6.356 6.356 0 0 0 .042-.824Zm-.614 2.807-2.447 1.084c.155.205.323.4.502.585l1.265-.56a6.28 6.28 0 0 0 .68-1.109Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconCirclesOverlap2Small.svg b/packages/components/src/common/svgs/IconCirclesOverlap2Small.svg
new file mode 100644
index 000000000..f8a4772e8
--- /dev/null
+++ b/packages/components/src/common/svgs/IconCirclesOverlap2Small.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 12.473a5.25 5.25 0 1 1 0-8.946 5.25 5.25 0 1 1 0 8.946Zm-1.256-1.08a3.707 3.707 0 1 1 0-6.787A5.23 5.23 0 0 0 5.5 8a5.23 5.23 0 0 0 1.244 3.394Zm2.512-6.787a3.707 3.707 0 1 1 0 6.787A5.23 5.23 0 0 0 10.5 8a5.23 5.23 0 0 0-1.244-3.394ZM8 5.514c.595.658.957 1.53.957 2.486 0 .957-.362 1.828-.957 2.486A3.694 3.694 0 0 1 7.043 8c0-.957.362-1.828.957-2.486Z"/>
+  <path d="M8.957 8c0-.957-.362-1.828-.957-2.486A3.694 3.694 0 0 0 7.043 8c0 .957.362 1.828.957 2.486.595-.658.957-1.53.957-2.486Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconCirclesOverlapLarge.svg b/packages/components/src/common/svgs/IconCirclesOverlapLarge.svg
deleted file mode 100755
index a2e177a04..000000000
--- a/packages/components/src/common/svgs/IconCirclesOverlapLarge.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.21875 18.2187C8.60518 18.2187 9.90032 17.8279 11 17.1504C12.0997 17.8279 13.3948 18.2187 14.7812 18.2187C18.7681 18.2187 22 14.9868 22 11C22 7.01319 18.7681 3.78125 14.7812 3.78125C13.3948 3.78125 12.0997 4.1721 11 4.84962C9.90032 4.1721 8.60518 3.78125 7.21875 3.78125C3.23194 3.78125 0 7.01319 0 11C0 14.9868 3.23194 18.2187 7.21875 18.2187ZM7.21875 16.7687C8.12911 16.7687 8.99023 16.5579 9.7559 16.1823C8.40317 14.8703 7.5625 13.0333 7.5625 11C7.5625 8.96668 8.40317 7.1297 9.7559 5.81769C8.99023 5.44212 8.12911 5.23125 7.21875 5.23125C4.03276 5.23125 1.45 7.81401 1.45 11C1.45 14.186 4.03276 16.7687 7.21875 16.7687ZM14.7812 5.23125C13.8709 5.23125 13.0098 5.44213 12.2441 5.81769C13.5968 7.1297 14.4375 8.96668 14.4375 11C14.4375 13.0333 13.5968 14.8703 12.2441 16.1823C13.0098 16.5579 13.8709 16.7687 14.7812 16.7687C17.9672 16.7687 20.55 14.186 20.55 11C20.55 7.81401 17.9672 5.23125 14.7812 5.23125ZM11.3694 6.99367L10.1799 7.52013C9.94396 7.83159 9.73895 8.16773 9.56939 8.52401L11.8245 7.52593C11.6836 7.33935 11.5315 7.1616 11.3694 6.99367ZM12.5493 8.79079L9.05704 10.3364L9.05166 10.3243C9.0258 10.5459 9.0125 10.7714 9.0125 11C9.0125 11.0293 9.01272 11.0586 9.01316 11.0879L12.7699 9.42521C12.7085 9.20827 12.6347 8.99653 12.5493 8.79079ZM12.9869 10.9149L9.23077 12.5772C9.29286 12.7962 9.36756 13.0098 9.45403 13.2173L12.9489 11.6706C12.9744 11.4506 12.9875 11.2268 12.9875 11C12.9875 10.9716 12.9873 10.9432 12.9869 10.9149ZM12.4248 13.4882L10.181 14.4813C10.3235 14.6694 10.4774 14.8485 10.6415 15.0176L11.8016 14.5042C12.0426 14.1895 12.2519 13.8492 12.4248 13.4882Z" />
-</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconCirclesOverlapSmall.svg b/packages/components/src/common/svgs/IconCirclesOverlapSmall.svg
deleted file mode 100755
index d4cee7977..000000000
--- a/packages/components/src/common/svgs/IconCirclesOverlapSmall.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M7 10.9139C6.3002 11.345 5.47602 11.5937 4.59375 11.5937C2.05669 11.5937 0 9.53706 0 7C0 4.46294 2.05669 2.40625 4.59375 2.40625C5.47602 2.40625 6.3002 2.65497 7 3.08612C7.6998 2.65497 8.52398 2.40625 9.40625 2.40625C11.9433 2.40625 14 4.46294 14 7C14 9.53706 11.9433 11.5937 9.40625 11.5937C8.52398 11.5937 7.6998 11.345 7 10.9139ZM5.90117 9.96948C5.50123 10.1458 5.05892 10.2437 4.59375 10.2437C2.80228 10.2437 1.35 8.79147 1.35 7C1.35 5.20853 2.80228 3.75625 4.59375 3.75625C5.05892 3.75625 5.50123 3.85417 5.90117 4.03051C5.22209 4.83128 4.8125 5.86781 4.8125 7C4.8125 8.13219 5.22209 9.16872 5.90117 9.96948ZM8.09883 4.03051C8.49877 3.85417 8.94107 3.75625 9.40625 3.75625C11.1977 3.75625 12.65 5.20853 12.65 7C12.65 8.79147 11.1977 10.2437 9.40625 10.2437C8.94107 10.2437 8.49877 10.1458 8.09883 9.96948C8.77791 9.16871 9.1875 8.13219 9.1875 7C9.1875 5.86781 8.77791 4.83128 8.09883 4.03051ZM7 4.82468C7.52049 5.40007 7.8375 6.16301 7.8375 7C7.8375 7.83698 7.52049 8.59993 7 9.17532C6.47951 8.59993 6.1625 7.83698 6.1625 7C6.1625 6.16301 6.47951 5.40007 7 4.82468Z" />
-    <path
-        d="M7.8375 7C7.8375 6.16301 7.52049 5.40007 7 4.82468C6.47951 5.40007 6.1625 6.16301 6.1625 7C6.1625 7.83698 6.47951 8.59993 7 9.17532C7.52049 8.59993 7.8375 7.83698 7.8375 7Z" />
-</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconCodeLarge.svg b/packages/components/src/common/svgs/IconCodeLarge.svg
index 9c6194210..dca698f4f 100644
--- a/packages/components/src/common/svgs/IconCodeLarge.svg
+++ b/packages/components/src/common/svgs/IconCodeLarge.svg
@@ -1,8 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M12.1759 3.33213C12.2397 3.09383 12.4847 2.95241 12.723 3.01626L13.5083 3.22668C13.7466 3.29053 13.888 3.53547 13.8241 3.77377L9.83268 18.67C9.76883 18.9083 9.52389 19.0498 9.28559 18.9859L8.5003 18.7755C8.262 18.7116 8.12058 18.4667 8.18444 18.2284L12.1759 3.33213Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M0.133141 11.3284C-0.0439668 11.1538 -0.0444406 10.8682 0.132087 10.6931L5.12727 5.73728C5.30241 5.56352 5.58524 5.56464 5.75899 5.73978L6.32529 6.31058C6.49905 6.48571 6.49793 6.76854 6.32279 6.9423L2.54624 10.6891C2.36971 10.8642 2.37018 11.1498 2.54729 11.3244L6.31975 15.0423C6.49546 15.2155 6.49752 15.4983 6.32434 15.6741L5.75994 16.2467C5.58677 16.4224 5.30394 16.4245 5.12823 16.2513L0.133141 11.3284Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M21.8669 10.6592C22.044 10.8337 22.0444 11.1193 21.8679 11.2945L16.8727 16.2503C16.6976 16.424 16.4148 16.4229 16.241 16.2478L15.6747 15.677C15.501 15.5018 15.5021 15.219 15.6772 15.0453L19.4538 11.2985C19.6303 11.1233 19.6298 10.8377 19.4527 10.6632L15.6803 6.94522C15.5045 6.77204 15.5025 6.48922 15.6757 6.31351L16.2401 5.74083C16.4132 5.56512 16.6961 5.56306 16.8718 5.73624L21.8669 10.6592Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.283 3.635a.487.487 0 0 1 .597-.345l.856.23c.26.07.414.337.345.597l-4.354 16.25a.487.487 0 0 1-.597.345l-.857-.23a.487.487 0 0 1-.345-.596l4.355-16.25Z"/>
+  <path fill-rule="evenodd" d="M.145 12.358a.487.487 0 0 1 0-.693L5.592 6.26c.191-.19.5-.188.69.003l.617.622c.19.191.189.5-.002.69l-4.12 4.087a.487.487 0 0 0 0 .693l4.116 4.056a.487.487 0 0 1 .005.689l-.615.625a.487.487 0 0 1-.69.005L.144 12.36Zm23.71-.73a.486.486 0 0 1 0 .693l-5.448 5.407a.487.487 0 0 1-.69-.003l-.617-.623a.487.487 0 0 1 .002-.689l4.12-4.087a.487.487 0 0 0 0-.693l-4.116-4.056a.487.487 0 0 1-.005-.69l.615-.624a.487.487 0 0 1 .69-.005l5.449 5.37Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconCompassLarge.svg b/packages/components/src/common/svgs/IconCompassLarge.svg
old mode 100755
new mode 100644
index 02f72aa49..2a628a64f
--- a/packages/components/src/common/svgs/IconCompassLarge.svg
+++ b/packages/components/src/common/svgs/IconCompassLarge.svg
@@ -1,3 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4032 2.70972C12.4027 2.34785 12.1278 2.05032 11.7754 2.01413L11.7039 2.01044H10.3054C9.94349 2.01091 9.64597 2.28584 9.60978 2.63826L9.6092 2.71456C10.0645 2.64672 10.5305 2.61157 11.0047 2.61157C11.4799 2.61157 11.9469 2.64688 12.4032 2.71502V2.70972ZM8.20752 2.70972C8.20752 2.70972 8.19999 2.91357 8.20066 3.03743C4.38487 4.22991 1.61563 7.79187 1.61563 12.0006C1.61563 17.186 5.81925 21.3897 11.0047 21.3897C16.1901 21.3897 20.3937 17.186 20.3937 12.0006C20.3937 7.78828 17.6198 4.22383 13.7989 3.03438V2.60181C13.7416 1.4939 12.8258 0.613102 11.7039 0.611877H10.3054L10.1975 0.61472C9.08954 0.672012 8.20875 1.58783 8.20752 2.70972ZM3.15246 11.2125C3.52221 7.48369 6.48758 4.51826 10.2164 4.14841C10.2084 4.19553 10.2042 4.24402 10.2042 4.29352V5.125C10.2042 5.58421 10.5626 5.95648 11.0047 5.95648C11.4468 5.95648 11.8052 5.58421 11.8052 5.125V4.29352C11.8052 4.24402 11.801 4.19553 11.793 4.14841C15.5218 4.51826 18.4872 7.48369 18.8569 11.2125C18.8093 11.2044 18.7602 11.2001 18.7101 11.2001H17.877C17.4169 11.2001 17.0439 11.5585 17.0439 12.0006C17.0439 12.4427 17.4169 12.8011 17.877 12.8011H18.7101C18.7602 12.8011 18.8093 12.7968 18.8569 12.7887C18.4872 16.5175 15.5218 19.483 11.793 19.8528C11.801 19.8057 11.8052 19.7572 11.8052 19.7077V18.8762C11.8052 18.417 11.4468 18.0448 11.0047 18.0448C10.5626 18.0448 10.2042 18.417 10.2042 18.8762V19.7077C10.2042 19.7572 10.2084 19.8057 10.2164 19.8528C6.48757 19.483 3.52219 16.5175 3.15246 12.7887C3.20009 12.7968 3.24913 12.8011 3.2992 12.8011H4.1323C4.59242 12.8011 4.96541 12.4427 4.96541 12.0006C4.96541 11.5585 4.59242 11.2001 4.1323 11.2001H3.2992C3.24913 11.2001 3.2001 11.2044 3.15246 11.2125ZM14.5985 7.78578C14.776 7.67327 15.0078 7.69892 15.1564 7.8475C15.2884 7.97958 15.3234 8.17738 15.2505 8.34436L15.2181 8.40534L12.677 13.4516C12.6459 13.5164 12.5989 13.5718 12.5409 13.6129L12.4794 13.6492L7.39725 16.1902C7.33606 16.2216 7.26847 16.2385 7.19971 16.2396C7.07973 16.2391 6.96494 16.1906 6.88095 16.1049C6.76181 15.9859 6.72065 15.812 6.76928 15.6548L6.79565 15.5886L9.33675 10.5244C9.36788 10.4596 9.41485 10.4043 9.47282 10.3631L9.53429 10.3269L14.5985 7.78578ZM13.4495 9.5544L10.8585 10.8517L12.1523 12.1454L13.4495 9.5544Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M15.926 8.494a.49.49 0 0 1 .71.609l-.034.066-2.773 5.505a.46.46 0 0 1-.148.176l-.067.04-5.544 2.772a.491.491 0 0 1-.216.054.49.49 0 0 1-.348-.147.49.49 0 0 1-.121-.491l.028-.072 2.772-5.525a.46.46 0 0 1 .149-.176l.067-.04 5.525-2.771Zm-1.254 1.929-2.826 1.415 1.411 1.412 1.415-2.827Z"/>
+  <path fill-rule="evenodd" d="M8.954 2.956s-.009.222-.008.358c-4.163 1.3-7.184 5.186-7.184 9.778 0 5.656 4.586 10.242 10.243 10.242s10.243-4.586 10.243-10.242c0-4.596-3.027-8.484-7.195-9.782v-.472a2.291 2.291 0 0 0-2.285-2.17h-1.526l-.118.003a2.291 2.291 0 0 0-2.17 2.285Zm4.577 0c0-.395-.3-.72-.685-.759l-.078-.004h-1.526c-.395 0-.72.3-.759.685v.083a10.324 10.324 0 0 1 3.048 0v-.005ZM3.439 12.232a8.611 8.611 0 0 1 7.706-7.706.938.938 0 0 0-.013.158v.907c0 .5.39.907.873.907.482 0 .873-.406.873-.907v-.907a.948.948 0 0 0-.013-.158 8.611 8.611 0 0 1 7.706 7.706.949.949 0 0 0-.16-.014h-.909c-.502 0-.909.391-.909.874 0 .482.407.873.91.873h.908a.948.948 0 0 0 .16-.014 8.611 8.611 0 0 1-7.706 7.707.948.948 0 0 0 .013-.159v-.907c0-.5-.39-.907-.873-.907-.482 0-.873.406-.873.907v.907a.93.93 0 0 0 .013.159A8.611 8.611 0 0 1 3.44 13.95a.948.948 0 0 0 .16.014h.909c.502 0 .909-.391.909-.873 0-.483-.407-.874-.91-.874H3.6a.948.948 0 0 0-.16.014Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconCopyLarge.svg b/packages/components/src/common/svgs/IconCopyLarge.svg
index 4f9806788..23438c195 100644
--- a/packages/components/src/common/svgs/IconCopyLarge.svg
+++ b/packages/components/src/common/svgs/IconCopyLarge.svg
@@ -1,9 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M5.52585 16.8827H12.0923C12.537 16.8827 12.8864 16.6115 12.8864 16.2658C12.8864 15.92 12.537 15.6488 12.0923 15.6488H5.52585C5.08116 15.6488 4.73177 15.92 4.73177 16.2658C4.73177 16.6115 5.08116 16.8827 5.52585 16.8827Z" />
-    <path
-        d="M12.0923 14.2867H5.52585C5.08849 14.2867 4.73177 14.0069 4.73177 13.6612C4.73177 13.3203 5.08116 13.0528 5.52585 13.0528H12.0923C12.5297 13.0528 12.8864 13.3338 12.8864 13.6783C12.8864 14.0191 12.537 14.2867 12.0923 14.2867Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M20.2468 5.19931C20.2468 4.99774 20.1637 4.79983 20.0183 4.65567L16.0528 0.657161C15.9074 0.513005 15.7095 0.429932 15.5092 0.429932H7.73083C6.85246 0.429932 6.10968 1.17393 6.10968 2.05475V4.81938H3.35116C2.4569 4.81938 1.73001 5.54749 1.73001 6.44419V19.9399C1.73001 20.8366 2.4569 21.566 3.35116 21.566H14.2667C15.1622 21.566 15.8903 20.8366 15.8903 19.9399V17.1765H18.6464C19.526 17.1765 20.27 16.4313 20.27 15.5517L20.2468 5.19931ZM3.29496 6.4222C3.29496 6.39288 3.32062 6.36601 3.35116 6.36601H10.3574V9.56677C10.3574 9.99313 10.7031 10.3401 11.1295 10.3401H14.3229V19.9192C14.3229 19.9485 14.2973 19.9754 14.2667 19.9754H3.35116C3.32062 19.9754 3.29496 19.9485 3.29496 19.9192V6.4222ZM15.6607 9.02313L11.6951 5.02462C11.5498 4.88046 11.3519 4.79739 11.1515 4.79739H7.67464V2.05475C7.67464 2.02421 7.70029 1.99855 7.73083 1.99855H14.7371V5.19931C14.7371 5.62568 15.0828 5.97263 15.5092 5.97263H18.7026V15.5517C18.7026 15.581 18.677 15.6079 18.6464 15.6079H15.8903V9.56677C15.8903 9.36642 15.806 9.16728 15.6607 9.02313ZM11.9236 8.77147V7.45451L13.2381 8.77147H11.9236ZM16.2813 4.40401V3.08705L17.5958 4.40401H16.2813Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.028 18.418h7.164c.485 0 .866-.296.866-.674 0-.377-.381-.673-.866-.673H6.028c-.485 0-.866.296-.866.673 0 .378.381.674.866.674Zm7.164-2.833H6.028c-.477 0-.866-.305-.866-.682 0-.372.381-.664.866-.664h7.164c.477 0 .866.307.866.683 0 .372-.381.663-.866.663Z"/>
+  <path fill-rule="evenodd" d="M22.087 5.672c0-.22-.09-.436-.249-.593L17.512.717a.85.85 0 0 0-.593-.248H8.434c-.959 0-1.769.812-1.769 1.773v3.015h-3.01c-.975 0-1.768.795-1.768 1.773v14.723c0 .978.793 1.773 1.769 1.773h11.908c.977 0 1.77-.795 1.77-1.773v-3.015h3.008c.96 0 1.77-.813 1.77-1.773l-.025-11.293ZM3.594 7.006c0-.032.028-.061.062-.061h7.643v3.492c0 .465.377.843.842.843h3.484v10.45a.063.063 0 0 1-.061.061H3.656a.063.063 0 0 1-.062-.061V7.006Zm13.49 2.837-4.326-4.362a.85.85 0 0 0-.593-.247H8.372V2.242c0-.034.028-.062.062-.062h7.643v3.492c0 .465.377.844.842.844h3.484v10.45a.063.063 0 0 1-.061.06h-3.007v-6.59a.845.845 0 0 0-.25-.593Zm-4.076-.274V8.132l1.434 1.437h-1.434Zm4.753-4.765V3.368l1.434 1.436h-1.434Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconCopySmall.svg b/packages/components/src/common/svgs/IconCopySmall.svg
index c58d34ed0..a9cd5e708 100644
--- a/packages/components/src/common/svgs/IconCopySmall.svg
+++ b/packages/components/src/common/svgs/IconCopySmall.svg
@@ -1,5 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M9.8702 0.75C9.99947 0.75 10.1269 0.781417 10.2575 0.851589L10.3561 0.9116L10.4524 0.992982L12.6476 3.20646C12.7718 3.32956 12.8532 3.48902 12.8809 3.65894L12.8913 3.78795L12.9042 9.52561C12.9042 10.1286 12.4721 10.6538 11.8755 10.7905L11.7453 10.8137L11.6087 10.8217L9.6197 10.8209L9.61977 11.9574C9.61977 12.5216 9.25682 13.0086 8.72845 13.1859L8.59303 13.2236L8.46171 13.2464L8.32434 13.2542H2.39406C1.78363 13.2542 1.2644 12.8274 1.13045 12.2262L1.10775 12.0948L1.09998 11.9574V4.47857C1.09998 3.86746 1.52534 3.34731 2.12563 3.21301L2.25685 3.19025L2.39406 3.18246L4.38377 3.18225L4.38437 2.04611C4.38437 1.48922 4.75195 0.999014 5.27739 0.819471L5.41191 0.781198L5.54209 0.75799L5.67846 0.75H9.8702ZM6.15092 4.58135H2.50053V11.8537H8.21912L8.21796 6.61288L7.05664 6.61345C6.66772 6.61345 6.3298 6.37101 6.19884 5.99227L6.16307 5.86112L6.15132 5.72545L6.15092 4.58135ZM9.42744 2.1505H5.78567L5.78567 3.37588H6.74942C6.89136 3.37588 7.03131 3.40972 7.1747 3.48531L7.28299 3.54996L7.38874 3.63762L9.35257 5.61574C9.45388 5.71429 9.52998 5.83515 9.57825 5.98862L9.60919 6.10999L9.62089 6.24294L9.62081 9.42289H11.4899L11.4934 4.18172L10.3328 4.18269C9.94434 4.18269 9.60679 3.94028 9.47598 3.5616L9.44024 3.43047L9.4285 3.29482L9.42744 2.1505Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M11.28.857a.92.92 0 0 1 .443.116l.113.069.11.093 2.508 2.53a.94.94 0 0 1 .267.517l.012.147.015 6.557a1.5 1.5 0 0 1-1.176 1.446l-.149.026-.156.01-2.273-.001v1.299a1.48 1.48 0 0 1-1.019 1.404l-.154.043-.15.026-.157.009H2.736a1.482 1.482 0 0 1-1.444-1.175l-.026-.15-.009-.157V5.118c0-.698.486-1.293 1.172-1.446l.15-.026.157-.009H5.01V2.338c0-.636.42-1.196 1.021-1.401l.154-.044.149-.027.156-.009h4.79ZM7.03 5.236H2.858v8.311h6.535l-.001-5.99-1.327.001a1.03 1.03 0 0 1-.98-.71l-.041-.15-.014-.155V5.236Zm3.744-2.778H6.612v1.4h1.102c.162 0 .322.039.486.125l.123.074.121.1 2.245 2.261a1 1 0 0 1 .258.426l.035.139.013.152v3.634h2.136l.004-5.99-1.326.001a1.03 1.03 0 0 1-.98-.71l-.04-.15-.014-.154V2.458Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconCubeLarge.svg b/packages/components/src/common/svgs/IconCubeLarge.svg
index 8f098637a..a8c2ed402 100644
--- a/packages/components/src/common/svgs/IconCubeLarge.svg
+++ b/packages/components/src/common/svgs/IconCubeLarge.svg
@@ -1,8 +1,5 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M10.6358 0.344382C10.8623 0.218539 11.1377 0.218539 11.3642 0.344382L20.3642 5.34438C20.6023 5.47666 20.75 5.72762 20.75 6C20.75 6.27238 20.6023 6.52334 20.3642 6.65562L11.3642 11.6556C11.1377 11.7815 10.8623 11.7815 10.6358 11.6556L1.63577 6.65562C1.39767 6.52334 1.25 6.27238 1.25 6C1.25 5.72762 1.39767 5.47666 1.63577 5.34438L10.6358 0.344382ZM3.54434 6L11 10.142L18.4557 6L11 1.85797L3.54434 6Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M20.3803 5.3536C20.6094 5.48836 20.75 5.73426 20.75 6V16C20.75 16.2724 20.6023 16.5233 20.3642 16.6556L11.3642 21.6556C11.1319 21.7847 10.8487 21.7812 10.6197 21.6464C10.3906 21.5116 10.25 21.2657 10.25 21V11C10.25 10.7276 10.3977 10.4767 10.6358 10.3444L19.6358 5.34438C19.8681 5.21533 20.1513 5.21883 20.3803 5.3536ZM11.75 11.4413V19.7254L19.25 15.5587V7.27464L11.75 11.4413Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M1.61965 5.3536C1.39062 5.48836 1.25 5.73426 1.25 6V16C1.25 16.2724 1.39767 16.5233 1.63577 16.6556L10.6358 21.6556C10.8681 21.7847 11.1513 21.7812 11.3803 21.6464C11.6094 21.5116 11.75 21.2657 11.75 21V11C11.75 10.7276 11.6023 10.4767 11.3642 10.3444L2.36423 5.34438C2.13193 5.21533 1.84869 5.21883 1.61965 5.3536ZM10.25 11.4413V19.7254L2.75 15.5587V7.27464L10.25 11.4413Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M11.603.376a.818.818 0 0 1 .794 0l9.818 5.454a.818.818 0 0 1 0 1.43l-9.818 5.455a.818.818 0 0 1-.794 0L1.784 7.261a.818.818 0 0 1 0-1.43L11.603.375Zm-7.736 6.17L12 11.063l8.134-4.519L12 2.027 3.867 6.545Z"/>
+  <path fill-rule="evenodd" d="M22.233 5.84c.25.147.403.416.403.705v10.91a.818.818 0 0 1-.42.715l-9.819 5.454a.818.818 0 0 1-1.215-.715V12c0-.297.16-.57.42-.715l9.819-5.455a.818.818 0 0 1 .812.01Zm-9.415 6.641v9.038L21 16.973V7.936l-8.182 4.545Z"/>
+  <path fill-rule="evenodd" d="M1.767 5.84a.818.818 0 0 0-.403.705v10.91c0 .297.16.57.42.715l9.819 5.454a.818.818 0 0 0 1.215-.715V12a.818.818 0 0 0-.42-.715L2.578 5.83a.818.818 0 0 0-.812.01Zm9.415 6.641v9.038L3 16.973V7.936l8.182 4.545Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconCubeSmall.svg b/packages/components/src/common/svgs/IconCubeSmall.svg
new file mode 100644
index 000000000..b3f77dae0
--- /dev/null
+++ b/packages/components/src/common/svgs/IconCubeSmall.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M8.36129 0.27822C8.13419 0.152052 7.85805 0.152052 7.63095 0.27822L1.27343 3.81017C1.26978 3.81219 1.26614 3.81424 1.26252 3.81633C1.19411 3.85567 1.13337 3.90489 1.08169 3.9616C1.04659 4.00012 1.01567 4.0421 0.989363 4.08681C0.940463 4.16991 0.907529 4.26241 0.893366 4.35953C0.888167 4.39519 0.885498 4.43147 0.885498 4.46813V11.5333C0.885498 11.8064 1.03355 12.058 1.27226 12.1906L7.63095 15.7233C7.85764 15.8492 8.13383 15.8496 8.36129 15.7233L14.72 12.1906C14.9587 12.058 15.1067 11.8064 15.1067 11.5333V4.46813C15.1067 4.22919 14.9934 4.00668 14.8051 3.86594C14.7831 3.8495 14.7601 3.83417 14.7361 3.82006C14.7312 3.81716 14.7262 3.81432 14.7213 3.81153L8.36129 0.27822ZM2.38938 11.0909V5.74607L7.24418 8.44318V13.788L2.38938 11.0909ZM8.74806 13.788V8.44318L13.6029 5.74607V11.0909L8.74806 13.788ZM12.8065 4.46813L7.99612 7.14055L3.18577 4.46813L7.99612 1.79572L12.8065 4.46813Z"
+  />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconDNALarge.svg b/packages/components/src/common/svgs/IconDNALarge.svg
new file mode 100644
index 000000000..a39157236
--- /dev/null
+++ b/packages/components/src/common/svgs/IconDNALarge.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.925 1.639a.746.746 0 0 1 .8.687c.172 2.302.008 3.88-.252 4.966-.245 1.02-.57 1.583-.727 1.855a8.14 8.14 0 0 0-.035.061c-.185.327-.695.971-1.428 1.634-.428.386-.95.795-1.551 1.16.602.366 1.123.774 1.55 1.161.734.662 1.244 1.307 1.43 1.634l.034.06c.157.272.482.836.727 1.856.26 1.086.424 2.663.251 4.965h.002a.746.746 0 0 1-.801.688l-.035-.002a.746.746 0 0 1-.688-.797h-.001c.069-.917.08-1.698.055-2.363h-5.717a.764.764 0 0 1 0-1.527h5.57a8.571 8.571 0 0 0-.122-.608 5.195 5.195 0 0 0-.443-1.23h-3.146a.764.764 0 0 1 0-1.528h1.877l-.016-.014c-.59-.534-1.361-1.092-2.26-1.473-.897.38-1.668.938-2.258 1.472-.66.597-1.046 1.116-1.124 1.253-.01.02-.022.04-.035.062-.135.233-.376.649-.57 1.457-.216.901-.377 2.317-.213 4.499a.747.747 0 0 1-.688.795l-.034.003a.746.746 0 0 1-.802-.686c-.173-2.303-.008-3.88.252-4.967.245-1.02.57-1.583.727-1.855l.035-.06c.185-.328.695-.972 1.428-1.634a10.34 10.34 0 0 1 1.55-1.16 10.34 10.34 0 0 1-1.55-1.16c-.733-.663-1.243-1.307-1.428-1.634l-.035-.061c-.157-.272-.482-.835-.727-1.855-.26-1.087-.424-2.664-.251-4.967a.746.746 0 0 1 .8-.686l.035.002a.746.746 0 0 1 .687.796c-.068.901-.08 1.672-.055 2.33h5.718a.764.764 0 0 1 0 1.527H7.885c.039.238.082.451.127.642.137.57.297.944.426 1.197h3.164a.764.764 0 0 1 0 1.527H9.688l.053.048c.59.533 1.36 1.09 2.258 1.472.899-.381 1.67-.939 2.26-1.473.66-.596 1.046-1.116 1.124-1.253l.035-.061c.135-.234.376-.65.57-1.458.215-.901.377-2.316.213-4.499h.001a.746.746 0 0 1 .688-.796l.035-.002Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconDnaLarge.svg b/packages/components/src/common/svgs/IconDnaLarge.svg
deleted file mode 100644
index 63ef20a9b..000000000
--- a/packages/components/src/common/svgs/IconDnaLarge.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.5146 1.50199C15.8913 1.47341 16.2199 1.75562 16.2485 2.13233L16.2471 2.13243C16.4059 4.2427 16.2553 5.68864 16.0167 6.68441C15.7926 7.61948 15.4946 8.13568 15.3508 8.38485C15.3391 8.40519 15.3282 8.42396 15.3187 8.44082C15.1488 8.74048 14.6814 9.33114 14.0093 9.93822C13.6169 10.2927 13.1392 10.667 12.5875 11.0022C13.1392 11.3374 13.6169 11.7117 14.0093 12.0662C14.6814 12.6733 15.1488 13.2639 15.3187 13.5636C15.3282 13.5804 15.3389 13.599 15.3507 13.6193C15.4945 13.8685 15.7926 14.3849 16.0167 15.32C16.2553 16.3158 16.4059 17.7617 16.2471 19.872L16.2485 19.8721C16.2199 20.2488 15.8913 20.531 15.5146 20.5024L15.4828 20.5C15.1075 20.4715 14.8259 20.1452 14.8522 19.7702L14.8509 19.7701C14.9142 18.9295 14.9247 18.213 14.9009 17.6035H9.66061C9.27401 17.6035 8.96061 17.2901 8.96061 16.9035C8.96061 16.5169 9.27401 16.2035 9.66061 16.2035H14.7666C14.7328 15.9975 14.695 15.8123 14.6552 15.6463C14.5245 15.101 14.3707 14.7509 14.2491 14.5186H11.3649C10.988 14.5186 10.6807 14.2207 10.6655 13.8476C10.6651 13.8378 10.6649 13.828 10.6649 13.8181C10.6649 13.4315 10.9783 13.1181 11.3649 13.1181H13.0852L13.0709 13.1051C12.5292 12.6158 11.8228 12.1045 10.9994 11.7551C10.1765 12.1045 9.47054 12.6156 8.92913 13.1046C8.32375 13.6514 7.9705 14.1278 7.89922 14.2536C7.88937 14.2709 7.87855 14.2896 7.86688 14.3098C7.7428 14.5241 7.52236 14.9048 7.34479 15.6458C7.14679 16.472 6.99842 17.7693 7.14913 19.7696C7.17513 20.144 6.89358 20.4699 6.51872 20.4989L6.48693 20.5014C6.11026 20.5305 5.78131 20.2487 5.75219 19.8721C5.5934 17.7615 5.74469 16.3154 5.98333 15.3195C6.20742 14.3844 6.50537 13.8682 6.64919 13.6191C6.66097 13.5986 6.67173 13.58 6.68132 13.5631C6.85121 13.2634 7.31863 12.6728 7.9907 12.0657C8.38292 11.7114 8.86034 11.3373 9.41167 11.0022C8.86034 10.6671 8.38292 10.293 7.9907 9.9387C7.31863 9.33163 6.85121 8.74097 6.68132 8.44131C6.67173 8.42439 6.66097 8.40576 6.64919 8.38534C6.50537 8.13617 6.20742 7.61996 5.98333 6.68489C5.74469 5.68904 5.59409 4.24295 5.75288 2.13238C5.782 1.75571 6.11026 1.47391 6.48693 1.50303L6.51872 1.50548C6.89358 1.53446 7.17442 1.86038 7.14843 2.23477C7.08618 3.06104 7.07566 3.76741 7.09788 4.37012H12.3395C12.7261 4.37012 13.0395 4.68352 13.0395 5.07012C13.0395 5.45672 12.7261 5.77012 12.3395 5.77012H7.22836C7.26339 5.98875 7.30298 6.18419 7.34479 6.35863C7.46989 6.88069 7.61626 7.22389 7.73522 7.45606H10.6353C11.0219 7.45606 11.3353 7.76946 11.3353 8.15606C11.3353 8.54266 11.0219 8.85606 10.6353 8.85606H8.88109C8.89693 8.87058 8.91294 8.88516 8.92913 8.89979C9.47054 9.38883 10.1765 9.89992 10.9994 10.2493C11.8228 9.8999 12.5292 9.38857 13.0709 8.8993C13.6762 8.35247 14.0295 7.87611 14.1008 7.75037C14.1106 7.73297 14.1215 7.71426 14.1332 7.69408C14.2572 7.47978 14.4776 7.09913 14.6552 6.35815C14.8532 5.53195 15.0016 4.23465 14.8509 2.23433L14.8522 2.23423C14.8259 1.85921 15.1075 1.53289 15.4828 1.50441L15.5146 1.50199Z" />
-</svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconDocumentSmall.svg b/packages/components/src/common/svgs/IconDocumentSmall.svg
old mode 100755
new mode 100644
index 0e61333c0..79fadf4a2
--- a/packages/components/src/common/svgs/IconDocumentSmall.svg
+++ b/packages/components/src/common/svgs/IconDocumentSmall.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 5.5V12.5C12.5 13.0523 12.0523 13.5 11.5 13.5H2.5C1.94771 13.5 1.5 13.0523 1.5 12.5V1.5C1.5 0.947715 1.94772 0.5 2.5 0.5H7.5L12.5 5.5ZM8.5 6.225H11.05V12.05H2.95V1.95H6.775V4.5C6.775 5.45269 7.54731 6.225 8.5 6.225Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M14.286 6.286v8c0 .63-.512 1.143-1.143 1.143H2.857a1.143 1.143 0 0 1-1.143-1.143V1.714c0-.63.512-1.143 1.143-1.143h5.714l5.715 5.715Zm-4.572.828h2.915v6.657H3.37V2.23h4.372v2.914c0 1.089.883 1.971 1.971 1.971Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconDotsHorizontal3Large.svg b/packages/components/src/common/svgs/IconDotsHorizontal3Large.svg
index 806704496..db4483122 100644
--- a/packages/components/src/common/svgs/IconDotsHorizontal3Large.svg
+++ b/packages/components/src/common/svgs/IconDotsHorizontal3Large.svg
@@ -1,9 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M9.23214 10.9679C9.23214 9.99149 10.0236 9.2 11 9.2C11.9764 9.2 12.7679 9.99149 12.7679 10.9679C12.7679 11.9442 11.9764 12.7357 11 12.7357C10.0236 12.7357 9.23214 11.9442 9.23214 10.9679Z" />
-  <path
-    d="M2.75 10.9679C2.75 9.9915 3.5415 9.20001 4.51786 9.20001C5.49422 9.20001 6.28571 9.9915 6.28571 10.9679C6.28571 11.9442 5.49422 12.7357 4.51786 12.7357C3.5415 12.7357 2.75 11.9442 2.75 10.9679Z" />
-  <path
-    d="M17.4821 9.2C16.5058 9.2 15.7143 9.99149 15.7143 10.9679C15.7143 11.9442 16.5058 12.7357 17.4821 12.7357C18.4585 12.7357 19.25 11.9442 19.25 10.9679C19.25 9.99149 18.4585 9.2 17.4821 9.2Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.071 11.965a1.929 1.929 0 1 1 3.858 0 1.929 1.929 0 0 1-3.858 0Zm-7.071 0a1.929 1.929 0 1 1 3.857 0 1.929 1.929 0 0 1-3.857 0Zm16.071-1.929a1.928 1.928 0 1 0 0 3.857 1.928 1.928 0 0 0 0-3.857Z"/>
 </svg>
-  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconDotsHorizontal3Small.svg b/packages/components/src/common/svgs/IconDotsHorizontal3Small.svg
index b5ed8196e..50378a6e0 100644
--- a/packages/components/src/common/svgs/IconDotsHorizontal3Small.svg
+++ b/packages/components/src/common/svgs/IconDotsHorizontal3Small.svg
@@ -1,8 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M3.5 7.05C3.5 8.0165 2.7165 8.8 1.75 8.8C0.783502 8.8 0 8.0165 0 7.05C0 6.0835 0.783502 5.3 1.75 5.3C2.7165 5.3 3.5 6.0835 3.5 7.05Z" />
-    <path
-        d="M8.75 7.05C8.75 8.0165 7.9665 8.8 7 8.8C6.0335 8.8 5.25 8.0165 5.25 7.05C5.25 6.0835 6.0335 5.3 7 5.3C7.9665 5.3 8.75 6.0835 8.75 7.05Z" />
-    <path
-        d="M12.25 8.8C13.2165 8.8 14 8.0165 14 7.05C14 6.0835 13.2165 5.3 12.25 5.3C11.2835 5.3 10.5 6.0835 10.5 7.05C10.5 8.0165 11.2835 8.8 12.25 8.8Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.508 8a1.746 1.746 0 1 1-3.492 0 1.746 1.746 0 0 1 3.492 0Zm5.238 0a1.746 1.746 0 1 1-3.492 0 1.746 1.746 0 0 1 3.492 0Zm3.492 1.746a1.746 1.746 0 1 0 0-3.492 1.746 1.746 0 0 0 0 3.492Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconDownloadLarge.svg b/packages/components/src/common/svgs/IconDownloadLarge.svg
index ec1fbe1cd..e93b0dd61 100644
--- a/packages/components/src/common/svgs/IconDownloadLarge.svg
+++ b/packages/components/src/common/svgs/IconDownloadLarge.svg
@@ -1,5 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M9.77778 3.4375C7.08139 3.4375 4.82087 5.38817 4.27778 7.98031C1.87223 8.29015 0 10.3642 0 12.8965C0 15.6416 2.19313 17.875 4.88889 17.875H5.62222C5.88669 17.8787 6.13268 17.7372 6.26601 17.5046C6.39933 17.272 6.39933 16.9843 6.26601 16.7517C6.13268 16.5191 5.88669 16.3776 5.62222 16.3814H4.88889C2.98029 16.3814 1.46667 14.8401 1.46667 12.8965C1.46667 10.953 2.98029 9.41161 4.88889 9.41161C5.26849 9.41327 5.5866 9.1197 5.62222 8.73485C5.83169 6.60115 7.61642 4.93103 9.77778 4.93103C10.9566 4.93103 11.9037 5.38526 12.6729 6.19119C12.8766 6.40543 13.1859 6.47576 13.4597 6.3701C13.7736 6.24875 14.2586 6.17563 14.6667 6.17563C16.3017 6.17563 17.6619 7.40528 17.8521 8.99933C17.8838 9.27862 18.0668 9.51612 18.3257 9.61386C19.6269 10.1003 20.5333 11.3731 20.5333 12.8965C20.5333 14.8401 19.0197 16.3814 17.1111 16.3814H16.3778C16.1133 16.3776 15.8673 16.5191 15.734 16.7517C15.6007 16.9843 15.6007 17.272 15.734 17.5046C15.8673 17.7372 16.1133 17.8787 16.3778 17.875H17.1111C19.8069 17.875 22 15.6416 22 12.8965C22 10.9234 20.8695 9.22733 19.2194 8.4237C18.7725 6.27663 16.8923 4.68211 14.6667 4.68211C14.2443 4.68211 13.8084 4.75019 13.3833 4.86102C12.4147 3.9904 11.1864 3.4375 9.77778 3.4375ZM10.9924 7.90248C10.7965 7.90458 10.6096 7.9863 10.4733 8.1295C10.337 8.27269 10.2626 8.46546 10.2667 8.66484V12.6476L9.83889 12.1497C9.67715 11.9558 9.42957 11.8591 9.18194 11.893C8.91129 11.9301 8.68329 12.1172 8.59022 12.3787C8.49715 12.6401 8.55444 12.9326 8.73889 13.1376L10.45 15.129C10.5892 15.2897 10.7895 15.3818 11 15.3818C11.2105 15.3818 11.4108 15.2897 11.55 15.129L13.2611 13.1376C13.4385 12.9381 13.4968 12.6568 13.4136 12.4014C13.3305 12.1459 13.1188 11.9557 12.8594 11.9036C12.6001 11.8515 12.3333 11.9455 12.1611 12.1497L11.7333 12.6476V8.66484C11.7375 8.46276 11.661 8.2676 11.5213 8.12394C11.3817 7.98028 11.1908 7.90039 10.9924 7.90248ZM8.05903 14.8723C7.86319 14.8744 7.6763 14.9561 7.53999 15.0993C7.40367 15.2425 7.32926 15.4352 7.33333 15.6346V17.1282C7.33337 17.5406 7.66167 17.8749 8.06667 17.8749H13.9333C14.3383 17.8749 14.6666 17.5406 14.6667 17.1282V15.6346C14.6704 15.3653 14.5315 15.1148 14.303 14.9791C14.0746 14.8433 13.7921 14.8433 13.5636 14.9791C13.3352 15.1148 13.1963 15.3653 13.2 15.6346V16.3814H8.8V15.6346C8.80413 15.4325 8.72764 15.2374 8.588 15.0937C8.44837 14.9501 8.25751 14.8702 8.05903 14.8723Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M10.667 3.75c-2.942 0-5.408 2.128-6 4.956C2.042 9.044 0 11.306 0 14.069 0 17.064 2.393 19.5 5.333 19.5h.8a.798.798 0 0 0 .703-.404.828.828 0 0 0 0-.821.797.797 0 0 0-.703-.404h-.8c-2.082 0-3.733-1.682-3.733-3.802s1.651-3.802 3.733-3.802a.806.806 0 0 0 .8-.738c.229-2.328 2.176-4.15 4.534-4.15 1.286 0 2.319.496 3.158 1.375a.79.79 0 0 0 .858.195c.343-.132.872-.212 1.317-.212a3.503 3.503 0 0 1 3.475 3.08.812.812 0 0 0 .517.67c1.42.531 2.408 1.92 2.408 3.582 0 2.12-1.651 3.802-3.733 3.802h-.8a.797.797 0 0 0-.703.404.827.827 0 0 0 0 .821.797.797 0 0 0 .703.404h.8c2.94 0 5.333-2.436 5.333-5.431a5.408 5.408 0 0 0-3.033-4.88c-.488-2.342-2.54-4.081-4.967-4.081-.46 0-.936.074-1.4.195-1.057-.95-2.397-1.553-3.933-1.553Zm1.325 4.87a.793.793 0 0 0-.567.249.823.823 0 0 0-.225.584v4.344l-.467-.543a.793.793 0 0 0-1.362.25.826.826 0 0 0 .162.828l1.867 2.172a.794.794 0 0 0 1.2 0l1.867-2.172a.826.826 0 0 0 .166-.803.805.805 0 0 0-.604-.543.792.792 0 0 0-.762.268l-.467.543V9.453a.822.822 0 0 0-.231-.59.793.793 0 0 0-.577-.242Zm-3.2 7.604a.793.793 0 0 0-.567.248.823.823 0 0 0-.225.584v1.63c0 .45.358.814.8.814h6.4c.442 0 .8-.365.8-.815v-1.629a.818.818 0 0 0-.397-.715.788.788 0 0 0-.806 0 .818.818 0 0 0-.397.715v.815H9.6v-.815a.823.823 0 0 0-.231-.59.793.793 0 0 0-.577-.242Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconDownloadSmall.svg b/packages/components/src/common/svgs/IconDownloadSmall.svg
index b7f856655..0ef7a3e33 100644
--- a/packages/components/src/common/svgs/IconDownloadSmall.svg
+++ b/packages/components/src/common/svgs/IconDownloadSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M7.00991123,0.8 C7.24373772,0.79758799 7.46878563,0.891801182 7.63380879,1.06157895 C7.79954967,1.23209512 7.89054024,1.46425334 7.88562756,1.70486695 L7.88558588,7.04166095 L8.85950035,5.90823195 C9.06428247,5.66543715 9.3787237,5.55460975 9.68415802,5.61596595 C9.99020465,5.67744516 10.2407844,5.90249 10.3395033,6.20577295 C10.3903643,6.36202766 10.3967887,6.52640402 10.3624416,6.68145095 C10.3299229,6.82824444 10.260858,6.96667501 10.1583573,7.08193395 L7.66722698,9.98103495 C7.50312052,10.1704762 7.26684949,10.27907 7.01891922,10.27907 C6.77098895,10.27907 6.53471791,10.1704761 6.37008788,9.98042795 L3.88172257,7.08449795 C3.65962287,6.83749333 3.59140331,6.48923033 3.70220314,6.17797795 C3.81264164,5.86774061 4.08233616,5.64639282 4.40161829,5.60265595 C4.69332392,5.56263188 4.98519468,5.67668004 5.17643675,5.90598595 L6.15225255,7.04166095 L6.15225255,1.70894895 C6.14736427,1.46746133 6.23588556,1.23814381 6.39769856,1.06816395 C6.53196495,0.927121013 6.70740331,0.836671672 6.89567314,0.809010953 L7.00991123,0.8 Z M11.7963204,8.90636934 C11.3254754,8.96105724 10.96,9.36121243 10.96,9.84672897 L10.959,11.118 L3.042,11.118 L3.04345794,9.84676237 C3.04345794,9.323865 2.61959295,8.9 2.09672897,8.9 C1.573865,8.9 1.15,9.323865 1.15,9.84672897 L1.15,12 L1.15018855,12.0589072 C1.15,12.5879091 1.573865,13.0117741 2.09672897,13.0117741 L11.903271,13.0117741 C12.3887876,13.0117741 12.7889428,12.6462987 12.8436307,12.1754537 L12.8515345,12.0195191 L12.8534579,9.84672897 C12.8534579,9.323865 12.4295929,8.9 11.906729,8.9 L11.7963204,8.90636934 Z"
-        id="Combined-Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8.011.914a.98.98 0 0 1 .713.3c.19.194.294.46.288.734v6.1l1.113-1.296a.98.98 0 0 1 .943-.334c.35.07.636.328.749.674a1.035 1.035 0 0 1-.207 1.002l-2.847 3.313a.98.98 0 0 1-.741.34.981.981 0 0 1-.742-.34l-2.844-3.31a1.032 1.032 0 0 1-.205-1.036.98.98 0 0 1 1.685-.31L7.03 8.047V1.953a1.028 1.028 0 0 1 .28-.732.983.983 0 0 1 .57-.296l.13-.01Zm5.47 9.265c-.538.062-.955.52-.955 1.074l-.001 1.453H3.477l.001-1.453a1.082 1.082 0 1 0-2.164 0v2.529c0 .604.485 1.089 1.082 1.089h11.208c.555 0 1.012-.418 1.074-.956l.01-.178.002-2.484c0-.597-.485-1.082-1.082-1.082l-.127.008Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconEditLarge.svg b/packages/components/src/common/svgs/IconEditLarge.svg
index 4d37f3321..eda31ac79 100644
--- a/packages/components/src/common/svgs/IconEditLarge.svg
+++ b/packages/components/src/common/svgs/IconEditLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.61645 11.4425C6.4967 11.5623 6.4217 11.7192 6.40345 11.8875L6.04224 15.1409C6.01904 15.3507 6.08631 15.5603 6.22708 15.7175C6.36774 15.8747 6.56882 15.9646 6.77985 15.9646C6.80713 15.9646 6.83446 15.9631 6.86156 15.9602L10.1151 15.5989C10.2833 15.5806 10.4402 15.5056 10.5599 15.3859L18.8876 7.05422C19.2176 6.72303 19.4029 6.2745 19.4029 5.80682C19.4029 5.38518 19.2522 4.97901 18.9806 4.66042L18.9841 4.65604L17.4405 3.1124C17.1092 2.78255 16.6607 2.59721 16.1932 2.59721C15.7257 2.59721 15.2769 2.78276 14.9456 3.11264L6.61645 11.4425ZM17.8373 6.00528L17.8347 6.00788L16.3462 7.49642L14.5037 5.65398L15.9949 4.16341C16.1045 4.05419 16.2819 4.05423 16.3916 4.16342L17.8369 5.60933C17.9461 5.71865 17.9463 5.89566 17.8373 6.00528ZM13.4545 6.70293L15.297 8.5454L9.69275 14.1502L7.61985 14.3801L7.84979 12.3077L13.4545 6.70293ZM3.15974 3.74832C2.79962 4.10858 2.59726 4.59703 2.59726 5.10652V17.4821C2.59726 17.9916 2.79962 18.48 3.15974 18.8403C3.52 19.2004 4.00849 19.4028 4.51798 19.4028H16.8936C17.403 19.4028 17.8915 19.2005 18.2517 18.8403C18.6119 18.4801 18.8143 17.9916 18.8143 17.4821V12.1783C18.8143 11.9815 18.7361 11.7927 18.5969 11.6535C18.4578 11.5144 18.269 11.4362 18.0722 11.4362C17.8754 11.4362 17.6866 11.5144 17.5474 11.6535C17.4083 11.7927 17.3301 11.9815 17.3301 12.1783V17.4821C17.3301 17.5979 17.2841 17.709 17.2023 17.7908C17.1204 17.8726 17.0093 17.9186 16.8936 17.9186H4.51798C4.40221 17.9186 4.29111 17.8726 4.20928 17.7908C4.12745 17.709 4.08144 17.5979 4.08144 17.4821V5.10652C4.08144 4.99075 4.12745 4.87965 4.20928 4.79782C4.29111 4.71599 4.40221 4.66998 4.51798 4.66998H9.8218C10.087 4.66998 10.332 4.52853 10.4645 4.29892C10.597 4.06934 10.597 3.78644 10.4645 3.55686C10.332 3.32726 10.087 3.1858 9.8218 3.1858H4.51798C4.00849 3.1858 3.52001 3.38821 3.15974 3.74832Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M7.218 12.483a.81.81 0 0 0-.232.485l-.394 3.55a.81.81 0 0 0 .893.893l3.55-.394a.81.81 0 0 0 .485-.232l9.085-9.09a1.928 1.928 0 0 0 .101-2.61l.004-.006-1.684-1.684a1.929 1.929 0 0 0-2.722 0l-9.086 9.088Zm12.24-5.932-.002.003-1.624 1.624-2.01-2.01 1.627-1.626c.12-.12.313-.12.433 0l1.576 1.577c.12.12.12.313 0 .432Zm-4.78.761 2.01 2.01-6.114 6.115-2.261.25.25-2.26 6.115-6.115ZM3.447 4.09a2.096 2.096 0 0 0-.614 1.482v13.5a2.096 2.096 0 0 0 2.096 2.096h13.5a2.096 2.096 0 0 0 2.096-2.096v-5.786a.81.81 0 0 0-1.62 0v5.786a.476.476 0 0 1-.476.477H4.93a.476.476 0 0 1-.477-.477v-13.5a.476.476 0 0 1 .477-.476h5.786a.81.81 0 1 0 0-1.62H4.929c-.556 0-1.089.221-1.482.614Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconEditSmall.svg b/packages/components/src/common/svgs/IconEditSmall.svg
index a53e4c633..3e78051d4 100644
--- a/packages/components/src/common/svgs/IconEditSmall.svg
+++ b/packages/components/src/common/svgs/IconEditSmall.svg
@@ -1,7 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M8.237,3.858 L10.6,6.304 L3.59612034,13.308054 L1.03989985,13.7489033 C0.903837281,13.7723688 0.774514206,13.6810909 0.751048673,13.5450283 C0.746193799,13.5168778 0.746199477,13.4881034 0.751065461,13.4599548 L1.1935929,10.9000364 L8.237,3.858 Z M11.5512158,1.05983554 L11.6217479,1.10655272 L11.7059989,1.18136916 L13.3496609,2.82671743 C13.5508146,3.02787106 13.5508146,3.3540901 13.3495057,3.55550632 L11.709,5.195 L9.346,2.749 L10.9451978,1.15088795 C11.1081546,0.987931236 11.3559481,0.955983945 11.5512158,1.05983554 Z"
-        id="Shape"></path>
-
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="m9.414 4.41 2.7 2.795-8.004 8.004-2.922.504a.286.286 0 0 1-.33-.33l.506-2.926 8.05-8.048Zm3.786-3.2.081.054.096.085 1.879 1.88a.59.59 0 0 1 0 .833l-1.875 1.874-2.7-2.795 1.827-1.827a.59.59 0 0 1 .692-.104Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconEnvelopeSmall.svg b/packages/components/src/common/svgs/IconEnvelopeSmall.svg
index e6f2368a7..09c68cf7f 100644
--- a/packages/components/src/common/svgs/IconEnvelopeSmall.svg
+++ b/packages/components/src/common/svgs/IconEnvelopeSmall.svg
@@ -1,8 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M0 3.04675V11.55C0 11.9366 0.313401 12.25 0.7 12.25H13.3C13.6866 12.25 14 11.9366 14 11.55V3.04675L8.5245 8.82644C7.6962 9.70076 6.3038 9.70076 5.4755 8.82645L0 3.04675Z"
-    />
-    <path
-        d="M7.50817 7.8636L13.3 1.75H0.7L6.49183 7.8636C6.76793 8.15504 7.23207 8.15504 7.50817 7.8636Z"
-    />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 3.482V13.2a.8.8 0 0 0 .8.8h14.4a.8.8 0 0 0 .8-.8V3.482l-6.258 6.605a2.4 2.4 0 0 1-3.484 0L0 3.482Z"/>
+  <path d="M8.58 8.987 15.2 2H.8l6.62 6.987a.8.8 0 0 0 1.16 0Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconExclamationMarkCircleLarge.svg b/packages/components/src/common/svgs/IconExclamationMarkCircleLarge.svg
index 64eef45d0..cb269d3e1 100644
--- a/packages/components/src/common/svgs/IconExclamationMarkCircleLarge.svg
+++ b/packages/components/src/common/svgs/IconExclamationMarkCircleLarge.svg
@@ -1,6 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0009 13.3196C10.3929 13.3196 9.75871 12.9296 9.71308 12.0587L9.45612 6.05896C9.45591 6.05138 9.45569 6.04339 9.45569 6.0358C9.45569 5.18346 10.1487 4.48999 11.0009 4.48999C11.8531 4.48999 12.5461 5.18346 12.5461 6.0358C12.5461 6.03955 12.546 6.04324 12.5459 6.04693C12.5459 6.05074 12.5458 6.05454 12.5456 6.05839L12.2889 12.0535C12.25 12.8766 11.5963 13.3196 11.0009 13.3196ZM11.4148 6.35013C11.4102 6.12709 11.2269 5.94689 11.0025 5.94689C10.7781 5.94689 10.5949 6.1269 10.5902 6.34994L10.8181 11.6584C10.8272 11.8326 10.8823 11.8628 11.0025 11.8628C11.055 11.8628 11.1783 11.8428 11.1871 11.6562L11.4148 6.35013Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.75081 14.5006C10.0805 14.1707 10.5361 13.9819 11.001 13.9819C11.4641 13.9819 11.9188 14.1707 12.2479 14.5006C12.5772 14.8266 12.7668 15.2817 12.7668 15.7479C12.7668 16.2158 12.5772 16.6722 12.2462 16.9996C11.9247 17.3249 11.4693 17.5137 11.001 17.5137C10.5342 17.5137 10.0786 17.3253 9.75081 16.9973C9.42298 16.6694 9.23499 16.2141 9.23499 15.7477C9.23499 15.2832 9.42319 14.8285 9.75081 14.5006ZM10.5314 16.2247C10.7764 16.4715 11.2256 16.4715 11.4656 16.2266C11.5924 16.1001 11.6631 15.9288 11.6631 15.7522C11.6631 15.5773 11.5926 15.4066 11.4694 15.2837C11.3436 15.1572 11.1736 15.0856 11.0009 15.0856C10.8265 15.0856 10.6555 15.1572 10.5314 15.282C10.4107 15.4037 10.3387 15.5793 10.3387 15.7522C10.3387 15.9292 10.4088 16.1013 10.5314 16.2247Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 11C20.5 16.2467 16.2467 20.5 11 20.5C5.75329 20.5 1.5 16.2467 1.5 11C1.5 5.75329 5.75329 1.5 11 1.5C16.2467 1.5 20.5 5.75329 20.5 11ZM19.05 11C19.05 15.4459 15.4459 19.05 11 19.05C6.55411 19.05 2.95 15.4459 2.95 11C2.95 6.55411 6.55411 2.95 11 2.95C15.4459 2.95 19.05 6.55411 19.05 11Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M12 14.53c-.662 0-1.354-.425-1.404-1.375l-.28-6.545v-.025c0-.93.755-1.687 1.685-1.687s1.686.757 1.686 1.687v.024l-.28 6.54A1.41 1.41 0 0 1 12 14.531Zm.453-7.603a.45.45 0 0 0-.9 0l.249 5.791c.01.19.07.223.2.223.058 0 .192-.022.202-.225l.248-5.789Zm-1.816 8.892c.36-.36.857-.566 1.364-.566a1.935 1.935 0 0 1 1.927 1.927c0 .51-.208 1.008-.569 1.365a1.92 1.92 0 0 1-1.358.56 1.94 1.94 0 0 1-1.364-.563 1.94 1.94 0 0 1-.563-1.363c0-.506.206-1.002.563-1.36Zm.852 1.88c.267.27.757.27 1.019.003A.727.727 0 0 0 12 16.457a.727.727 0 0 0-.512 1.243Z"/>
+  <path fill-rule="evenodd" d="M22.364 12c0 5.724-4.64 10.364-10.364 10.364-5.724 0-10.364-4.64-10.364-10.364C1.636 6.276 6.276 1.636 12 1.636c5.724 0 10.364 4.64 10.364 10.364Zm-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconExclamationMarkCircleSmall.svg b/packages/components/src/common/svgs/IconExclamationMarkCircleSmall.svg
index 9069d2471..3d32c6513 100644
--- a/packages/components/src/common/svgs/IconExclamationMarkCircleSmall.svg
+++ b/packages/components/src/common/svgs/IconExclamationMarkCircleSmall.svg
@@ -1,4 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 12.6C10.0928 12.6 12.6 10.0928 12.6 7C12.6 3.90721 10.0928 1.4 7 1.4C3.90721 1.4 1.4 3.90721 1.4 7C1.4 10.0928 3.90721 12.6 7 12.6ZM7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM6.19997 4.14998C6.19997 3.70815 6.55814 3.34998 6.99997 3.34998C7.4418 3.34998 7.79997 3.70815 7.79997 4.14998V7.04998C7.79997 7.4918 7.4418 7.84998 6.99997 7.84998C6.55814 7.84998 6.19997 7.4918 6.19997 7.04998V4.14998ZM6.99998 10.65C7.49703 10.65 7.89998 10.247 7.89998 9.74998C7.89998 9.25292 7.49703 8.84998 6.99998 8.84998C6.50292 8.84998 6.09998 9.25292 6.09998 9.74998C6.09998 10.247 6.50292 10.65 6.99998 10.65Z" />
-</svg>
-    
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M8 14.4A6.4 6.4 0 1 0 8 1.6a6.4 6.4 0 0 0 0 12.8ZM8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM7.086 4.743a.914.914 0 1 1 1.828 0v3.314a.914.914 0 0 1-1.828 0V4.743ZM8 12.17a1.029 1.029 0 1 0 0-2.057 1.029 1.029 0 0 0 0 2.057Z" />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconExclamationMarkSpeechBubbleLarge.svg b/packages/components/src/common/svgs/IconExclamationMarkSpeechBubbleLarge.svg
new file mode 100644
index 000000000..c79623ea6
--- /dev/null
+++ b/packages/components/src/common/svgs/IconExclamationMarkSpeechBubbleLarge.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.931 9.436a1.036 1.036 0 0 0 2.073 0V2.782a1.036 1.036 0 0 0-2.073 0v6.654Z"/>
+  <path d="m10.68 18.4-3.477 3.166V18.4H4.027V5.545h3.5a.807.807 0 0 0 .808-.809.807.807 0 0 0-.808-.809h-3.96c-.632 0-1.145.513-1.145 1.146v13.772c0 .633.513 1.146 1.145 1.146h2.03v2.623c0 .997 1.187 1.518 1.921.843l3.774-3.466 9.136.002c.633 0 1.146-.513 1.146-1.146l-.002-13.774c0-.633-.513-1.146-1.146-1.146h-3.723a.809.809 0 0 0 0 1.618h3.263v12.854H10.68Z"/>
+  <path d="m12.922 15.012-.005.005c-.226.231-.574.365-.95.365-.377 0-.73-.136-.966-.373a1.399 1.399 0 0 1-.397-.978c0-.356.151-.724.397-.971.257-.258.61-.405.966-.405.348 0 .7.145.964.41l.002.002a1.374 1.374 0 0 1-.011 1.945Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconExclamationmarkSpeechBubbleLarge.svg b/packages/components/src/common/svgs/IconExclamationmarkSpeechBubbleLarge.svg
deleted file mode 100755
index 4a23c364f..000000000
--- a/packages/components/src/common/svgs/IconExclamationmarkSpeechBubbleLarge.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10.02 8.65001C10.02 9.17468 10.4453 9.60001 10.97 9.60001C11.4946 9.60001 11.92 9.17468 11.92 8.65001V2.55001C11.92 2.02534 11.4946 1.60001 10.97 1.60001C10.4453 1.60001 10.02 2.02534 10.02 2.55001L10.02 8.65001Z" />
-    <path d="M9.78926 16.866L6.60299 19.769V16.866H3.69173V5.08267H6.89997C7.3094 5.08267 7.63997 4.75077 7.63997 4.34134C7.63997 3.93191 7.3094 3.60001 6.89997 3.60001H3.26997C2.69007 3.60001 2.21997 4.07011 2.21997 4.65001V17.2749C2.21997 17.8548 2.69007 18.3249 3.26997 18.3249H5.13123V20.7293C5.13123 21.6434 6.21833 22.121 6.89154 21.5026L10.3509 18.3249L18.7257 18.3264C19.3058 18.3266 19.776 17.8563 19.7759 17.2762L19.7741 4.65001C19.7741 4.07011 19.304 3.60001 18.7241 3.60001H15.3113C14.9019 3.60001 14.57 3.93191 14.57 4.34134C14.57 4.75077 14.9019 5.08267 15.3113 5.08267H18.3023V16.866H9.78926Z" />
-    <path d="M11.8447 13.7613L11.8407 13.7653C11.6328 13.9775 11.3146 14.1005 10.9692 14.1C10.6242 14.0995 10.3002 13.9757 10.0841 13.7579C9.85513 13.5274 9.71991 13.1999 9.71991 12.8615C9.71991 12.5355 9.85891 12.1984 10.084 11.9713C10.3193 11.7349 10.6438 11.6 10.9699 11.6C11.2891 11.6 11.6119 11.7333 11.8536 11.9762L11.855 11.9776C12.0857 12.2077 12.2199 12.5313 12.2199 12.8615C12.2199 13.195 12.086 13.5205 11.8447 13.7613Z" />
-</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconEyeClosedSmall.svg b/packages/components/src/common/svgs/IconEyeClosedSmall.svg
old mode 100755
new mode 100644
index 7e9b63a04..70aafaf56
--- a/packages/components/src/common/svgs/IconEyeClosedSmall.svg
+++ b/packages/components/src/common/svgs/IconEyeClosedSmall.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.205 11.805C0.93163 12.0784 0.93163 12.5216 1.205 12.795C1.47836 13.0683 1.92158 13.0683 2.19495 12.795L3.96306 11.0269C4.87464 11.5545 5.90367 11.9229 7 11.9229C10.7796 11.9229 13.7592 7.54441 13.8842 7.35836C14.0386 7.12841 14.0386 6.79448 13.8842 6.56453C13.8127 6.45815 12.808 4.9812 11.2542 3.73575L12.7966 2.1933C13.07 1.91993 13.07 1.47671 12.7966 1.20335C12.5233 0.92998 12.08 0.92998 11.8067 1.20335L10.0856 2.92441C9.16205 2.38166 8.11589 2 7 2C3.22044 2 0.240785 6.37847 0.115799 6.56453C-0.0385997 6.79448 -0.0385997 7.12841 0.115799 7.35836C0.187917 7.46571 1.21046 8.96888 2.78869 10.2213L1.205 11.805ZM5.34814 9.64178C5.82832 9.93834 6.39418 10.1095 7 10.1095C8.73861 10.1095 10.148 8.70005 10.148 6.96144C10.148 6.35562 9.9769 5.78976 9.68034 5.30958L8.56453 6.42539C8.62212 6.5935 8.65337 6.77382 8.65337 6.96145C8.65337 7.87457 7.91314 8.6148 7.00003 8.6148C6.8124 8.6148 6.63207 8.58354 6.46397 8.52596L5.34814 9.64178ZM5.45603 7.55399L4.34944 8.66058C4.03459 8.17044 3.85197 7.58727 3.85197 6.96144C3.85197 5.22283 5.26139 3.81341 7 3.81341C7.62583 3.81341 8.209 3.99603 8.69914 4.31088L7.59257 5.41745C7.40862 5.34682 7.20884 5.3081 7.00003 5.3081C6.08691 5.3081 5.34668 6.04833 5.34668 6.96145C5.34668 7.17027 5.38539 7.37004 5.45603 7.55399Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M1.377 13.492a.8.8 0 1 0 1.132 1.13l2.02-2.02c1.042.603 2.218 1.024 3.471 1.024 4.32 0 7.725-5.004 7.868-5.216a.844.844 0 0 0 0-.908 16.067 16.067 0 0 0-3.006-3.233l1.763-1.762a.8.8 0 0 0-1.132-1.132l-1.967 1.967C10.471 2.722 9.276 2.286 8 2.286 3.68 2.286.275 7.29.132 7.502a.844.844 0 0 0 0 .908 16.05 16.05 0 0 0 3.055 3.271l-1.81 1.81Zm4.735-2.473a3.598 3.598 0 0 0 4.951-4.951L9.788 7.343a1.89 1.89 0 0 1-2.4 2.4L6.111 11.02Zm.123-2.386L4.971 9.898a3.598 3.598 0 0 1 4.971-4.971L8.677 6.19a1.89 1.89 0 0 0-2.442 2.442Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconEyeOpenSmall.svg b/packages/components/src/common/svgs/IconEyeOpenSmall.svg
index 8254ebac5..180be66f8 100644
--- a/packages/components/src/common/svgs/IconEyeOpenSmall.svg
+++ b/packages/components/src/common/svgs/IconEyeOpenSmall.svg
@@ -1,9 +1,4 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M7,2.03855567 C10.7795613,2.03855567 13.7592154,6.41703029 13.8842009,6.60308445 C14.0385997,6.83303565 14.0385997,7.16696435 13.8842009,7.39691555 C13.7592154,7.58296971 10.7795613,11.9614443 7,11.9614443 C3.22043872,11.9614443 0.240784596,7.58296971 0.115799104,7.39691555 C-0.0385997013,7.16696435 -0.0385997013,6.83303565 0.115799104,6.60308445 C0.240784596,6.41703029 3.22043872,2.03855567 7,2.03855567 Z M7,3.85196888 C5.26139042,3.85196888 3.85196888,5.26139042 3.85196888,7 C3.85196888,8.73860958 5.26139042,10.1480311 7,10.1480311 C8.73860958,10.1480311 10.1480311,8.73860958 10.1480311,7 C10.1480311,5.26139042 8.73860958,3.85196888 7,3.85196888 Z"
-        id="Combined-Shape" fill-rule="nonzero"></path>
-    <path
-        d="M7,5.346654 C7.91311778,5.346654 8.653346,6.08688222 8.653346,7 C8.653346,7.91311778 7.91311778,8.653346 7,8.653346 C6.08688222,8.653346 5.346654,7.91311778 5.346654,7 C5.346654,6.08688222 6.08688222,5.346654 7,5.346654 Z"
-        id="Path" fill-rule="nonzero"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.89 8a1.89 1.89 0 1 0-3.78 0 1.89 1.89 0 0 0 3.78 0Z"/>
+  <path fill-rule="evenodd" d="M15.868 7.546C15.725 7.334 12.319 2.33 8 2.33 3.68 2.33.275 7.334.132 7.546a.844.844 0 0 0 0 .908C.275 8.666 3.68 13.67 8 13.67s7.725-5.004 7.868-5.216a.844.844 0 0 0 0-.908ZM4.402 8a3.598 3.598 0 1 1 7.196 0 3.598 3.598 0 0 1-7.196 0Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconFilterSmall.svg b/packages/components/src/common/svgs/IconFilterSmall.svg
old mode 100755
new mode 100644
index 57e452adf..02e557684
--- a/packages/components/src/common/svgs/IconFilterSmall.svg
+++ b/packages/components/src/common/svgs/IconFilterSmall.svg
@@ -1,5 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1 3C1 2.44772 1.44772 2 2 2H12C12.5523 2 13 2.44772 13 3C13 3.55228 12.5523 4 12 4H2C1.44772 4 1 3.55228 1 3Z" />
-    <path d="M3 7C3 6.44772 3.44772 6 4 6H10C10.5523 6 11 6.44772 11 7C11 7.55228 10.5523 8 10 8H4C3.44772 8 3 7.55228 3 7Z" />
-    <path d="M6 10C5.44772 10 5 10.4477 5 11C5 11.5523 5.44772 12 6 12H8C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10H6Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1.143 3.429c0-.632.512-1.143 1.143-1.143h11.428a1.143 1.143 0 1 1 0 2.285H2.286A1.143 1.143 0 0 1 1.143 3.43ZM3.429 8c0-.631.511-1.143 1.142-1.143h6.858a1.143 1.143 0 1 1 0 2.286H4.57A1.143 1.143 0 0 1 3.43 8Zm3.428 3.429a1.143 1.143 0 1 0 0 2.285h2.286a1.143 1.143 0 0 0 0-2.285H6.857Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconFlagCheckSmall.svg b/packages/components/src/common/svgs/IconFlagCheckSmall.svg
index 59e8442b7..abe6609a0 100644
--- a/packages/components/src/common/svgs/IconFlagCheckSmall.svg
+++ b/packages/components/src/common/svgs/IconFlagCheckSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <defs></defs>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.780954 2H9.08255C9.26897 2.00001 9.44925 2.07116 9.5908 2.20062L13.4546 5.73459C13.6256 5.89106 13.763 6.08516 13.8571 6.30359C13.9513 6.52201 14 6.75959 14 7.00001C14 7.24043 13.9513 7.478 13.8571 7.69643C13.763 7.91485 13.6256 8.10896 13.4546 8.26543L9.5908 11.7994C9.44925 11.9288 9.26897 12 9.08255 12H0.780954C0.573832 12 0.375194 11.9122 0.228736 11.7559C0.082279 11.5996 0 11.3877 0 11.1667V2.83333C0 2.61232 0.082279 2.40036 0.228736 2.24408C0.375194 2.0878 0.573832 2 0.780954 2ZM7.42635 5.02579C7.67717 4.7144 8.14191 4.6583 8.46439 4.90049C8.76 5.1225 8.83344 5.51809 8.65044 5.82233L8.59415 5.90284L5.71746 9.47424C5.44646 9.8107 4.94061 9.83978 4.62943 9.55867L4.55594 9.48193L2.91212 7.49781C2.65691 7.18977 2.70863 6.74028 3.02765 6.49384C3.32008 6.26795 3.73559 6.29109 3.99939 6.53379L4.06737 6.6054L5.12452 7.88216L7.42635 5.02579Z"></path>
-  </svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M.893 2.286h9.487a.86.86 0 0 1 .58.229l4.417 4.039c.195.179.352.4.46.65a2.013 2.013 0 0 1 0 1.592c-.108.25-.265.471-.46.65l-4.416 4.039a.86.86 0 0 1-.58.23H.892a.865.865 0 0 1-.632-.28.986.986 0 0 1-.261-.673V3.238c0-.252.094-.495.261-.673a.865.865 0 0 1 .632-.28Zm7.594 3.458A.866.866 0 0 1 9.674 5.6a.798.798 0 0 1 .212 1.053l-.064.092-3.288 4.082a.866.866 0 0 1-1.243.096l-.084-.088L3.328 8.57a.797.797 0 0 1 .132-1.147.868.868 0 0 1 1.11.045l.078.082 1.209 1.46 2.63-3.265Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconFlagOutlineSmall.svg b/packages/components/src/common/svgs/IconFlagOutlineSmall.svg
index 7b5d7211e..c6ed1bde7 100644
--- a/packages/components/src/common/svgs/IconFlagOutlineSmall.svg
+++ b/packages/components/src/common/svgs/IconFlagOutlineSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <defs></defs>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4546 5.73459L9.5908 2.20062C9.44925 2.07116 9.26897 2.00001 9.08255 2H0.780954C0.573832 2 0.375194 2.0878 0.228736 2.24408C0.082279 2.40036 0 2.61232 0 2.83333V11.1667C0 11.3877 0.082279 11.5996 0.228736 11.7559C0.375194 11.9122 0.573832 12 0.780954 12H9.08255C9.26897 12 9.44925 11.9288 9.5908 11.7994L13.4546 8.26542C13.6256 8.10896 13.763 7.91485 13.8571 7.69643C13.9513 7.478 14 7.24043 14 7.00001C14 6.75959 13.9513 6.52201 13.8571 6.30359C13.763 6.08516 13.6256 5.89106 13.4546 5.73459ZM12.7797 7.52753C12.8435 7.4691 12.8992 7.39254 12.9388 7.30061C12.9784 7.20857 13 7.10582 13 7.00001C13 6.8942 12.9784 6.79144 12.9388 6.69941C12.8992 6.60748 12.8435 6.53092 12.7797 6.47249L8.98311 3H1V11H8.98311L12.7797 7.52753Z"></path>
-  </svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M15.377 6.554 10.96 2.515a.86.86 0 0 0-.58-.23H.892a.867.867 0 0 0-.632.28.986.986 0 0 0-.26.673v9.524c0 .252.094.495.261.673a.865.865 0 0 0 .632.28h9.487a.86.86 0 0 0 .58-.23l4.417-4.039c.195-.179.352-.4.46-.65a2.013 2.013 0 0 0 0-1.592 1.898 1.898 0 0 0-.46-.65Zm-.772 2.049a.756.756 0 0 0 .182-.26.87.87 0 0 0 0-.687.756.756 0 0 0-.182-.259L10.266 3.43H1.143v9.142h9.123l4.34-3.968Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconFlagQuestionMarkSmall.svg b/packages/components/src/common/svgs/IconFlagQuestionMarkSmall.svg
new file mode 100644
index 000000000..5409d68c8
--- /dev/null
+++ b/packages/components/src/common/svgs/IconFlagQuestionMarkSmall.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        d="M10.38 2.286H.893c-.237 0-.464.1-.632.279A.986.986 0 0 0 0 3.238v9.524c0 .252.094.495.261.673a.865.865 0 0 0 .632.28h9.487a.86.86 0 0 0 .58-.23l4.417-4.039c.195-.179.352-.4.46-.65a2.013 2.013 0 0 0 0-1.592 1.898 1.898 0 0 0-.46-.65L10.96 2.515a.86.86 0 0 0-.58-.23ZM9.278 6.184c-.054-.975-1.012-2.078-2.366-2.118-1.355-.04-2.266 1.013-2.423 1.904 0 0-.014.076-.02.15a.884.884 0 0 0 .02.267c.019.056.198.487.7.487.271 0 .448-.075.52-.219.052-.092.094-.241.125-.35l.014-.05.002-.004c.031-.11.083-.289.298-.496.184-.177.384-.283.633-.31l.087-.007.084-.002c.684 0 .823.49.823.83 0 .316-.335.642-.639.937a7.979 7.979 0 0 0-.184.183l-.05.051c-.316.323-.635.649-.794 1.038-.168.41-.028.67.052.75l.022.023c.086.09.247.258.58.258.365 0 .578-.1.71-.23.058-.059.11-.158.18-.294.089-.17.208-.398.408-.676a9.28 9.28 0 0 1 .358-.451c.37-.448.805-.974.85-1.382l.009-.1.003-.105-.002-.084ZM6.8 10.086a.844.844 0 0 1 .84.84.842.842 0 0 1-1.435.594.845.845 0 0 1 0-1.188.846.846 0 0 1 .595-.246Z" />
+</svg>
+  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconFlagQuestionmarkSmall.svg b/packages/components/src/common/svgs/IconFlagQuestionmarkSmall.svg
deleted file mode 100644
index cbfd9d37f..000000000
--- a/packages/components/src/common/svgs/IconFlagQuestionmarkSmall.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <defs></defs>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08255 2H0.780954C0.573832 2 0.375194 2.0878 0.228736 2.24408C0.082279 2.40036 0 2.61232 0 2.83333V11.1667C0 11.3877 0.082279 11.5996 0.228736 11.7559C0.375194 11.9122 0.573832 12 0.780954 12H9.08255C9.26897 12 9.44925 11.9288 9.5908 11.7994L13.4546 8.26543C13.6256 8.10896 13.763 7.91485 13.8571 7.69643C13.9513 7.478 14 7.24043 14 7.00001C14 6.75959 13.9513 6.52201 13.8571 6.30359C13.763 6.08516 13.6256 5.89106 13.4546 5.73459L9.5908 2.20062C9.44925 2.07116 9.26897 2.00001 9.08255 2ZM8.118 5.41125C8.07058 4.55785 7.23298 3.5925 6.04787 3.5575C4.86276 3.5225 4.06534 4.44405 3.92765 5.22409C3.92765 5.22409 3.91585 5.29028 3.90977 5.35529C3.9037 5.42031 3.91144 5.53987 3.92793 5.58883C3.94442 5.63778 4.1009 6.0144 4.54041 6.0144C4.7775 6.0144 4.93274 5.9491 4.99477 5.82335C5.04121 5.74271 5.07804 5.61212 5.10508 5.51624L5.11727 5.47335L5.11831 5.46975C5.14612 5.37356 5.19145 5.21674 5.37946 5.03584C5.54051 4.8809 5.7158 4.7882 5.93341 4.76435L6.00922 4.75819L6.08287 4.75624C6.68115 4.75624 6.80275 5.18501 6.80275 5.48251C6.80275 5.75941 6.50993 6.04434 6.24439 6.30273C6.18833 6.35728 6.13349 6.41065 6.08287 6.46251L6.03862 6.50779C5.76235 6.79027 5.48397 7.07491 5.34446 7.41585C5.1975 7.77501 5.32 8.00251 5.39 8.07251C5.39592 8.07843 5.40232 8.0851 5.40929 8.09234C5.48475 8.17084 5.62573 8.31752 5.91733 8.31752C6.23585 8.31752 6.4225 8.23002 6.53755 8.11586C6.58864 8.06516 6.63378 7.97848 6.69576 7.85947C6.77337 7.71045 6.87737 7.51075 7.0525 7.26751C7.13674 7.15051 7.24765 7.01627 7.36598 6.87307C7.6901 6.4808 8.06987 6.02118 8.10977 5.66364L8.11722 5.57566L8.12 5.48445L8.118 5.41125ZM5.95004 8.825C6.14278 8.825 6.33203 8.90359 6.469 9.04091C6.60606 9.17658 6.685 9.366 6.685 9.56004C6.685 9.75478 6.60606 9.94473 6.4683 10.081C6.33447 10.2164 6.14496 10.295 5.95004 10.295C5.75574 10.295 5.56614 10.2166 5.42969 10.08C5.29324 9.9436 5.215 9.75408 5.215 9.55996C5.215 9.36661 5.29333 9.17736 5.42969 9.04091C5.56693 8.90359 5.75652 8.825 5.95004 8.825Z"></path>
-  </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconFlagXMarkSmall.svg b/packages/components/src/common/svgs/IconFlagXMarkSmall.svg
new file mode 100644
index 000000000..49a6f5ac0
--- /dev/null
+++ b/packages/components/src/common/svgs/IconFlagXMarkSmall.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M.893 2.286h9.487a.86.86 0 0 1 .58.229l4.417 4.039c.195.179.352.4.46.65a2.013 2.013 0 0 1 0 1.592c-.108.25-.265.471-.46.65l-4.416 4.039a.86.86 0 0 1-.58.23H.892a.865.865 0 0 1-.632-.28.986.986 0 0 1-.261-.673V3.238c0-.252.094-.495.261-.673a.865.865 0 0 1 .632-.28Zm3.74 3.063a.705.705 0 1 0-.998.998l1.796 1.796-1.796 1.796a.705.705 0 1 0 .998.997L6.429 9.14l1.795 1.796a.705.705 0 1 0 .998-.997L7.426 8.143l1.796-1.796a.705.705 0 1 0-.998-.998L6.43 7.145 4.633 5.35Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconFlagXmarkSmall.svg b/packages/components/src/common/svgs/IconFlagXmarkSmall.svg
deleted file mode 100644
index c5e07eebe..000000000
--- a/packages/components/src/common/svgs/IconFlagXmarkSmall.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <defs></defs>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.780954 2H9.08255C9.26897 2.00001 9.44925 2.07116 9.5908 2.20062L13.4546 5.73459C13.6256 5.89106 13.763 6.08516 13.8571 6.30359C13.9513 6.52201 14 6.75959 14 7.00001C14 7.24043 13.9513 7.478 13.8571 7.69643C13.763 7.91485 13.6256 8.10896 13.4546 8.26542L9.5908 11.7994C9.44925 11.9288 9.26897 12 9.08255 12H0.780954C0.573832 12 0.375194 11.9122 0.228736 11.7559C0.082279 11.5996 0 11.3877 0 11.1667V2.83333C0 2.61232 0.082279 2.40036 0.228736 2.24408C0.375194 2.0878 0.573832 2 0.780954 2ZM4.05372 4.68079C3.81267 4.43974 3.42185 4.43973 3.18079 4.68079C2.93973 4.92185 2.93974 5.31268 3.18079 5.55373L4.75207 7.125L3.18079 8.69628C2.93974 8.93733 2.93973 9.32815 3.18079 9.5692C3.42185 9.81026 3.81267 9.81026 4.05372 9.56921L5.625 7.99793L7.19628 9.5692C7.43733 9.81026 7.82815 9.81026 8.06921 9.56921C8.31027 9.32815 8.31026 8.93733 8.06921 8.69628L6.49793 7.125L8.06921 5.55373C8.31026 5.31268 8.31027 4.92185 8.06921 4.68079C7.82815 4.43973 7.43733 4.43974 7.19628 4.68079L5.625 6.25207L4.05372 4.68079Z"></path>
-  </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconFlaskLarge.svg b/packages/components/src/common/svgs/IconFlaskLarge.svg
index f0588d598..b7ca63c33 100644
--- a/packages/components/src/common/svgs/IconFlaskLarge.svg
+++ b/packages/components/src/common/svgs/IconFlaskLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.71175 19.9375C5.34935 19.9317 4.99472 19.8284 4.68309 19.6378C3.78752 19.0501 3.51367 17.8323 4.06724 16.8991L5.16358 15.0454C5.19486 14.9015 5.27383 14.7734 5.38691 14.683L8.32402 9.71425V5.6375C7.54332 5.45561 6.9946 4.7333 7.01112 3.90923V3.81864C7.01112 2.84875 7.77466 2.0625 8.71654 2.0625H13.2613C14.2032 2.0625 14.9667 2.84875 14.9667 3.81864V3.90923C14.9832 4.7333 14.4345 5.45561 13.6538 5.6375V9.71425L16.5909 14.683C16.704 14.7734 16.783 14.9015 16.8142 15.0454L17.9106 16.8991C18.4642 17.8323 18.1903 19.0501 17.2947 19.6378C16.9831 19.8284 16.6285 19.9317 16.2661 19.9375H5.71175ZM16.2661 18.4113C16.3839 18.4132 16.4975 18.3663 16.5815 18.2811C16.6655 18.196 16.7127 18.0797 16.7127 17.9584C16.7118 17.868 16.6834 17.7803 16.6315 17.7075L15.6367 16.0489H6.34113L5.34631 17.7075C5.29444 17.7803 5.26604 17.868 5.2651 17.9584C5.26508 18.0797 5.31236 18.196 5.39632 18.2811C5.48029 18.3663 5.59392 18.4132 5.71175 18.4113H16.2661ZM13.1087 3.60261H8.86916C8.75329 3.60261 8.65936 3.69933 8.65936 3.81864V3.90923C8.65936 4.02855 8.75329 4.12527 8.86916 4.12527H9.22784C9.63744 4.12905 9.96859 4.47005 9.97226 4.89184V9.93726C9.97457 10.0755 9.93688 10.2114 9.86398 10.3275L7.39384 14.474H14.584L12.1138 10.3275C12.0409 10.2114 12.0033 10.0755 12.0056 9.93726V4.89184C12.0092 4.47005 12.3404 4.12905 12.75 4.12527H13.1087C13.2245 4.12527 13.3185 4.02855 13.3185 3.90923V3.81864C13.3185 3.69933 13.2245 3.60261 13.1087 3.60261Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M6.231 21.75a2.218 2.218 0 0 1-1.122-.327c-.977-.641-1.276-1.97-.672-2.988l1.196-2.022a.694.694 0 0 1 .244-.395l3.204-5.42V6.15c-.852-.198-1.45-.986-1.433-1.885v-.1c0-1.057.833-1.915 1.861-1.915h4.958c1.027 0 1.86.858 1.86 1.916v.099c.018.899-.58 1.687-1.432 1.885v4.447l3.204 5.42c.123.1.21.24.244.396l1.196 2.022c.604 1.018.305 2.347-.672 2.988-.34.208-.727.32-1.122.327H6.23Zm11.514-1.665a.473.473 0 0 0 .344-.142.502.502 0 0 0 .143-.352.48.48 0 0 0-.088-.274l-1.086-1.81H6.918l-1.086 1.81a.48.48 0 0 0-.088.274c0 .132.051.26.143.352a.473.473 0 0 0 .344.142h11.514ZM14.3 3.93H9.675a.232.232 0 0 0-.228.236v.099c0 .13.102.235.228.235h.392a.832.832 0 0 1 .812.837v5.504a.784.784 0 0 1-.118.425L8.066 15.79h7.844l-2.695-4.524a.777.777 0 0 1-.118-.425V5.337a.832.832 0 0 1 .812-.837h.391a.232.232 0 0 0 .23-.235v-.1a.232.232 0 0 0-.23-.235Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconFlaskPrivateLarge.svg b/packages/components/src/common/svgs/IconFlaskPrivateLarge.svg
index 8dd03663b..b362d66c3 100644
--- a/packages/components/src/common/svgs/IconFlaskPrivateLarge.svg
+++ b/packages/components/src/common/svgs/IconFlaskPrivateLarge.svg
@@ -1,5 +1,8 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.8674 17.2524C11.8674 17.1827 11.8674 17.113 11.8674 17.0363H4.72293C4.60251 17.0382 4.48638 16.9913 4.40057 16.9061C4.31476 16.821 4.26644 16.7047 4.26646 16.5834C4.26742 16.493 4.29645 16.4053 4.34945 16.3325L5.36615 14.6739H12.5521C13.1283 13.6454 14.0361 12.8462 15.125 12.409L12.6836 8.36016V4.28341C13.4892 4.10001 14.0523 3.36606 14.0253 2.53423V2.44364C14.0253 1.47375 13.245 0.6875 12.2824 0.6875H7.79376C6.83118 0.6875 6.05086 1.47375 6.05086 2.44364V2.53423C6.03398 3.3583 6.59475 4.08061 7.39261 4.2625V8.33925L4.39095 13.308C4.27538 13.3984 4.19468 13.5265 4.16271 13.6704L3.04228 15.5241C2.47654 16.4573 2.7564 17.6751 3.67166 18.2628C3.99014 18.4534 4.35257 18.5567 4.72293 18.5625H12.0403C11.927 18.1351 11.8689 17.6948 11.8674 17.2524ZM8.81045 8.98735C8.88646 8.86897 8.92726 8.73113 8.92802 8.59013V3.54471C8.92423 3.12022 8.58162 2.77813 8.16032 2.77814H7.79376C7.73751 2.77817 7.68366 2.75519 7.64454 2.71447C7.60542 2.67374 7.58439 2.61875 7.58627 2.56211V2.44364C7.58621 2.327 7.67805 2.23137 7.79376 2.22761H12.2824C12.4008 2.22761 12.4968 2.32433 12.4968 2.44364V2.53423C12.4968 2.65355 12.4008 2.75027 12.2824 2.75027H11.9159C11.4972 2.75405 11.1588 3.09505 11.1551 3.51684V8.56226C11.1527 8.70052 11.1912 8.83637 11.2657 8.95251L13.7902 13.099H6.28601L8.81045 8.98735Z" fill="#CCCCCC" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.8438 11.6875C19.6915 11.6875 22 13.996 22 16.8438C22 19.6915 19.6915 22 16.8438 22C13.996 22 11.6875 19.6915 11.6875 16.8438C11.6875 13.996 13.996 11.6875 16.8438 11.6875ZM16.8541 13.6346C15.8987 13.6346 15.1083 14.3777 15.0494 15.3312V15.9363C14.7179 15.9362 14.4481 16.2029 14.4444 16.5344V18.9406C14.4444 19.2748 14.7152 19.5456 15.0494 19.5456H18.6519C18.8117 19.5456 18.9649 19.4817 19.0773 19.368C19.1896 19.2544 19.2518 19.1004 19.25 18.9406L19.2569 16.5344C19.2569 16.204 18.9891 15.9363 18.6587 15.9363V15.3312C18.5999 14.3777 17.8094 13.6346 16.8541 13.6346ZM16.8438 16.9194C17.0906 16.9194 17.2906 17.1194 17.2906 17.3663C17.2882 17.5238 17.2016 17.6681 17.0637 17.7444V18.3631C17.045 18.468 16.9537 18.5444 16.8472 18.5444C16.7406 18.5444 16.6494 18.468 16.6306 18.3631V17.7444C16.4906 17.6703 16.4032 17.5247 16.4037 17.3663C16.4037 17.1221 16.5996 16.9231 16.8438 16.9194ZM16.8438 14.1281C17.1628 14.1281 17.4689 14.2549 17.6945 14.4805C17.9201 14.7061 18.0469 15.0122 18.0469 15.3312V15.9363H15.6406V15.3312C15.6444 14.6683 16.1808 14.1319 16.8438 14.1281Z" />
-</svg>
-    
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M12.9463 18.8208C12.9463 18.7447 12.9463 18.6687 12.9463 18.5851H5.15229C5.02092 18.5871 4.89423 18.536 4.80062 18.4431C4.70701 18.3502 4.6543 18.2233 4.65432 18.0909C4.65537 17.9924 4.68703 17.8967 4.74486 17.8173L5.85398 16.0079H13.6933C14.3218 14.8859 15.3121 14.0141 16.5 13.5371L13.8366 9.12018V4.67281C14.7155 4.47274 15.3297 3.67207 15.3003 2.76462V2.66579C15.3003 1.60773 14.4491 0.75 13.399 0.75H8.50228C7.45219 0.75 6.60093 1.60773 6.60093 2.66579V2.76462C6.58252 3.6636 7.19428 4.45158 8.06467 4.65V9.09737L4.79013 14.5178C4.66406 14.6164 4.57602 14.7562 4.54114 14.9132L3.31885 16.9354C2.70168 17.9534 3.00699 19.282 4.00545 19.9231C4.35288 20.131 4.74825 20.2437 5.15229 20.25H13.1349C13.0113 19.7837 12.9479 19.3034 12.9463 18.8208ZM9.6114 9.80439C9.69432 9.67524 9.73883 9.52487 9.73966 9.37105V3.86696C9.73552 3.40388 9.36177 3.03068 8.90216 3.0307H8.50228C8.44092 3.03074 8.38217 3.00567 8.3395 2.96124C8.29682 2.91681 8.27388 2.85682 8.27593 2.79503V2.66579C8.27586 2.53854 8.37606 2.43422 8.50228 2.43012H13.399C13.5282 2.43012 13.6329 2.53563 13.6329 2.66579V2.76462C13.6329 2.89478 13.5282 3.00029 13.399 3.00029H12.9991C12.5424 3.00442 12.1733 3.37642 12.1692 3.83655V9.34064C12.1666 9.49148 12.2086 9.63968 12.2899 9.76637L15.0438 14.2898H6.85746L9.6114 9.80439Z"
+        fill="#CCCCCC" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M18.375 12.75C21.4816 12.75 24 15.2684 24 18.375C24 21.4816 21.4816 24 18.375 24C15.2684 24 12.75 21.4816 12.75 18.375C12.75 15.2684 15.2684 12.75 18.375 12.75ZM18.3862 14.8741C17.3441 14.8741 16.4817 15.6848 16.4175 16.725V17.385C16.0559 17.385 15.7616 17.6759 15.7575 18.0375V20.6625C15.7575 21.027 16.053 21.3225 16.4175 21.3225H20.3475C20.5219 21.3225 20.689 21.2527 20.8116 21.1287C20.9341 21.0047 21.002 20.8368 21 20.6625L21.0075 18.0375C21.0075 17.6771 20.7154 17.385 20.355 17.385V16.725C20.2908 15.6848 19.4284 14.8741 18.3862 14.8741ZM18.375 18.4575C18.6442 18.4575 18.8625 18.6758 18.8625 18.945C18.8598 19.1169 18.7654 19.2742 18.615 19.3575V20.0325C18.5945 20.1469 18.495 20.2302 18.3787 20.2302C18.2625 20.2302 18.163 20.1469 18.1425 20.0325V19.3575C17.9898 19.2767 17.8944 19.1178 17.895 18.945C17.895 18.6787 18.1087 18.4616 18.375 18.4575ZM18.375 15.4125C18.7231 15.4125 19.0569 15.5508 19.3031 15.7969C19.5492 16.0431 19.6875 16.3769 19.6875 16.725V17.385H17.0625V16.725C17.0666 16.0018 17.6518 15.4166 18.375 15.4125Z"
+    />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconFlaskPublicLarge.svg b/packages/components/src/common/svgs/IconFlaskPublicLarge.svg
index 635dfbfb6..1f5b0e064 100644
--- a/packages/components/src/common/svgs/IconFlaskPublicLarge.svg
+++ b/packages/components/src/common/svgs/IconFlaskPublicLarge.svg
@@ -1,5 +1,8 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.8674 17.2524C11.8674 17.1827 11.8674 17.113 11.8674 17.0363H4.72293C4.60251 17.0382 4.48638 16.9913 4.40057 16.9061C4.31476 16.821 4.26644 16.7047 4.26646 16.5834C4.26742 16.493 4.29645 16.4053 4.34945 16.3325L5.36615 14.6739H12.5521C13.1283 13.6454 14.0361 12.8462 15.125 12.409L12.6836 8.36016V4.28341C13.4892 4.10001 14.0523 3.36606 14.0253 2.53423V2.44364C14.0253 1.47375 13.245 0.6875 12.2824 0.6875H7.79376C6.83118 0.6875 6.05086 1.47375 6.05086 2.44364V2.53423C6.03398 3.3583 6.59475 4.08061 7.39261 4.2625V8.33925L4.39095 13.308C4.27538 13.3984 4.19468 13.5265 4.16271 13.6704L3.04228 15.5241C2.47654 16.4573 2.7564 17.6751 3.67166 18.2628C3.99014 18.4534 4.35257 18.5567 4.72293 18.5625H12.0403C11.927 18.1351 11.8689 17.6948 11.8674 17.2524ZM8.81045 8.98735C8.88646 8.86897 8.92726 8.73113 8.92802 8.59013V3.54471C8.92423 3.12022 8.58162 2.77813 8.16032 2.77814H7.79376C7.73751 2.77817 7.68366 2.75519 7.64454 2.71447C7.60542 2.67374 7.58439 2.61875 7.58627 2.56211V2.44364C7.58621 2.327 7.67805 2.23137 7.79376 2.22761H12.2824C12.4008 2.22761 12.4968 2.32433 12.4968 2.44364V2.53423C12.4968 2.65355 12.4008 2.75027 12.2824 2.75027H11.9159C11.4972 2.75405 11.1588 3.09505 11.1551 3.51684V8.56226C11.1527 8.70052 11.1912 8.83637 11.2657 8.95251L13.7902 13.099H6.28601L8.81045 8.98735Z" fill="#CCCCCC" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2601 11.7044C15.1056 11.5299 13.0709 12.7178 12.1637 14.6797C11.2565 16.6417 11.6694 18.9612 13.1978 20.4897C14.7263 22.0181 17.0458 22.431 19.0078 21.5238C20.9697 20.6166 22.1576 18.5819 21.9831 16.4274C21.779 13.9083 19.7792 11.9085 17.2601 11.7044ZM17.8513 12.4538C18.0513 12.5006 18.2486 12.558 18.4425 12.6257C18.549 12.6989 18.6678 12.7525 18.7932 12.7838C19.3479 13.0426 19.8421 13.415 20.2437 13.8769C20.2707 13.9077 20.2875 13.9461 20.2919 13.9869C20.3157 14.0816 20.3157 14.1808 20.2919 14.2756C20.2685 14.3301 20.2545 14.3883 20.2506 14.4475C20.2629 14.556 20.3432 14.6446 20.45 14.6675C20.5367 14.6789 20.6245 14.6789 20.7112 14.6675C20.7796 14.6693 20.8397 14.713 20.8625 14.7775C20.9014 14.8936 20.9545 15.0044 21.0206 15.1075C21.2194 15.5905 21.3311 16.1049 21.3506 16.6268C21.3533 16.6974 21.3286 16.7664 21.2818 16.8193C21.1902 16.9205 21.1095 17.0311 21.0412 17.1493C20.9018 17.4956 20.7243 17.8254 20.5119 18.1324C20.3842 18.245 20.2853 18.3864 20.2231 18.5449C20.1994 18.6604 20.1856 18.7777 20.1819 18.8955C20.1819 18.9436 20.0925 18.9436 20.0444 18.8955C19.8707 18.6333 19.745 18.3423 19.6731 18.0362C19.6319 17.8162 19.5838 17.5962 19.5219 17.3487C19.4617 17.1276 19.319 16.9381 19.1231 16.8193C18.9018 16.7449 18.6691 16.71 18.4357 16.7162C18.1802 16.7474 17.9251 16.6556 17.7482 16.4687C17.6806 16.3819 17.6421 16.2761 17.6382 16.1662C17.532 15.5852 17.8087 15.0013 18.3257 14.7156C18.3875 14.6675 18.4563 14.6469 18.5182 14.6056C18.653 14.4938 18.714 14.316 18.6763 14.145C18.674 14.1249 18.662 14.1072 18.6441 14.0976C18.6263 14.088 18.605 14.0877 18.5869 14.0969C18.4582 14.137 18.3338 14.1899 18.2157 14.255C18.1469 14.255 18.0782 14.255 18.1057 14.1862C18.1014 13.9544 18.1291 13.723 18.1882 13.4988C18.2735 13.2775 18.2735 13.0325 18.1882 12.8113C18.1567 12.7638 18.1069 12.7314 18.0507 12.7219H17.4388C17.5448 12.6569 17.6399 12.5757 17.7207 12.4813C17.7587 12.4549 17.8058 12.445 17.8513 12.4538ZM15.6307 12.5157C15.6513 12.5043 15.676 12.5031 15.6976 12.5126C15.7192 12.522 15.7351 12.5409 15.7407 12.5638C15.8095 12.6738 15.8507 12.7838 15.9195 12.9144C16.0557 13.1793 16.0707 13.4901 15.9607 13.7669C15.8095 14.0762 15.4589 14.2069 15.1701 14.365C14.5785 14.674 14.0729 15.1253 13.6989 15.6781C13.6989 15.6781 13.6576 15.7468 13.637 15.7468C13.6164 15.7582 13.5917 15.7593 13.5701 15.7499C13.5486 15.7405 13.5326 15.7216 13.527 15.6987C13.457 15.6621 13.396 15.6104 13.3483 15.5475C13.3483 15.5475 13.2658 15.5475 13.2658 15.6162C13.1769 15.9228 13.3107 16.2503 13.5889 16.4068C13.639 16.4265 13.6854 16.4544 13.7264 16.4893C13.8089 16.5993 13.7264 16.7574 13.7264 16.8881C13.7264 17.0187 13.967 17.1699 14.1664 17.1493C14.347 17.1139 14.5225 17.0561 14.6889 16.9774C15.0867 16.8345 15.5289 16.8907 15.8782 17.1287C16.0501 17.2387 16.2082 17.4174 16.3801 17.5274C16.5323 17.6423 16.7187 17.7028 16.9094 17.6993C16.9497 17.7002 16.9885 17.7148 17.0194 17.7405C17.0705 17.931 17.0298 18.1344 16.9094 18.2905C16.7611 18.4562 16.6002 18.6102 16.4282 18.7511C16.0501 19.1705 15.9676 19.8099 15.6582 20.2705C15.5869 20.3564 15.5268 20.4512 15.4795 20.5523C15.4355 20.7017 15.4215 20.8582 15.4382 21.013C15.4382 21.013 15.4382 21.0817 15.397 21.0611C15.3199 21.0414 15.2459 21.0114 15.177 20.9717C15.13 20.9532 15.0961 20.9115 15.0876 20.8617C14.9754 20.2236 14.7594 19.6082 14.4483 19.0399C14.3389 18.8062 14.1736 18.6031 13.967 18.4486C13.8983 18.4005 13.8364 18.3593 13.8158 18.2905C13.7951 18.2218 13.8158 18.1805 13.8158 18.1393C13.8848 17.5332 13.6221 16.9368 13.1283 16.5787C13.0385 16.5331 12.9625 16.4642 12.9083 16.3793C12.8602 16.2968 12.8602 16.1593 12.8189 16.0768C12.7304 15.9719 12.626 15.8814 12.5095 15.8087C12.4683 15.8087 12.4683 15.7468 12.4683 15.6987C12.8747 14.147 14.0817 12.9322 15.6307 12.5157Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        fill="#CCCCCC"
+        d="M12.946 18.82v-.235H5.152a.489.489 0 0 1-.407-.768l1.109-1.81h7.84a5.62 5.62 0 0 1 2.806-2.47L13.837 9.12V4.673c.879-.2 1.493-1 1.463-1.908v-.1A1.909 1.909 0 0 0 13.4.75H8.502c-1.05 0-1.901.858-1.901 1.916v.099A1.89 1.89 0 0 0 8.065 4.65v4.447l-3.275 5.42a.692.692 0 0 0-.249.396L3.32 16.935a2.2 2.2 0 0 0 .686 2.988c.348.208.743.32 1.147.327h7.983a5.651 5.651 0 0 1-.189-1.43ZM9.611 9.805a.81.81 0 0 0 .129-.433V3.867a.84.84 0 0 0-.838-.836h-.4a.225.225 0 0 1-.226-.236v-.13c0-.126.1-.23.226-.235H13.4c.13 0 .234.106.234.236v.099c0 .13-.105.235-.234.235H13a.84.84 0 0 0-.83.837V9.34c-.002.15.04.299.12.425l2.755 4.524H6.857l2.754-4.486Z" />
+    <path fill-rule="evenodd"
+        d="M18.83 12.768a5.625 5.625 0 1 0-.91 11.214 5.625 5.625 0 0 0 .91-11.213Zm.644.818c.218.051.434.114.645.187.116.08.246.139.383.173a4.77 4.77 0 0 1 1.582 1.192c.03.034.048.076.053.12a.646.646 0 0 1 0 .315.567.567 0 0 0-.045.188.277.277 0 0 0 .217.24c.095.012.19.012.285 0a.18.18 0 0 1 .165.12c.043.127.1.247.173.36a4.83 4.83 0 0 1 .36 1.657.3.3 0 0 1-.075.21c-.1.11-.188.231-.263.36a5.484 5.484 0 0 1-.577 1.073 1.17 1.17 0 0 0-.315.45 2.246 2.246 0 0 0-.045.382c0 .053-.098.053-.15 0a2.895 2.895 0 0 1-.405-.937c-.045-.24-.098-.48-.165-.75a.975.975 0 0 0-.435-.578 2.176 2.176 0 0 0-.75-.112.885.885 0 0 1-.75-.27.57.57 0 0 1-.12-.33 1.5 1.5 0 0 1 .75-1.583c.067-.052.142-.075.21-.12a.51.51 0 0 0 .172-.502.068.068 0 0 0-.097-.053c-.14.044-.277.102-.405.173-.075 0-.15 0-.12-.075a2.746 2.746 0 0 1 .09-.75 1.042 1.042 0 0 0 0-.75.225.225 0 0 0-.15-.098h-.668c.116-.07.22-.159.308-.262a.188.188 0 0 1 .142-.03Zm-2.422.067a.083.083 0 0 1 .12.053c.075.12.12.24.195.382.148.29.165.629.045.93-.165.338-.548.48-.863.653a4.395 4.395 0 0 0-1.605 1.432s-.045.075-.067.075a.083.083 0 0 1-.12-.052.584.584 0 0 1-.195-.165s-.09 0-.09.075a.75.75 0 0 0 .352.862.534.534 0 0 1 .15.09c.09.12 0 .293 0 .435 0 .143.263.308.48.285a2.42 2.42 0 0 0 .57-.187 1.44 1.44 0 0 1 1.298.165c.187.12.36.315.547.435a.93.93 0 0 0 .578.187.195.195 0 0 1 .12.045.69.69 0 0 1-.12.6 4.796 4.796 0 0 1-.525.503c-.413.457-.503 1.155-.84 1.657a1.437 1.437 0 0 0-.195.308 1.29 1.29 0 0 0-.045.502s0 .075-.045.053a.95.95 0 0 1-.24-.098.158.158 0 0 1-.098-.12 6.47 6.47 0 0 0-.697-1.987 1.71 1.71 0 0 0-.525-.645c-.075-.053-.143-.098-.165-.173-.023-.075 0-.12 0-.165a1.845 1.845 0 0 0-.75-1.702.614.614 0 0 1-.24-.218c-.053-.09-.053-.24-.098-.33a1.438 1.438 0 0 0-.337-.292c-.045 0-.045-.068-.045-.12a4.875 4.875 0 0 1 3.45-3.473Z" />
 </svg>
-    
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconGearSmall.svg b/packages/components/src/common/svgs/IconGearSmall.svg
old mode 100755
new mode 100644
index 98b6cc8f5..70e52cfed
--- a/packages/components/src/common/svgs/IconGearSmall.svg
+++ b/packages/components/src/common/svgs/IconGearSmall.svg
@@ -1,3 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2917 5.6H11.674C11.5778 5.27625 11.4379 4.97875 11.2804 4.69L12.4697 3.5C12.7408 3.22875 12.7408 2.7825 12.4697 2.51125L11.4816 1.5225C11.2105 1.25125 10.7645 1.25125 10.4934 1.5225L9.30418 2.7125C9.01562 2.56375 8.7183 2.42375 8.39475 2.3275V0.7C8.39475 0.315 8.07995 0 7.69519 0H6.29606C5.91131 0 5.5965 0.315 5.5965 0.7V2.3275C5.25547 2.4325 4.94066 2.5725 4.6346 2.73875L3.49781 1.60125C3.23548 1.33875 2.807 1.33875 2.54466 1.60125L1.60025 2.555C1.33791 2.8175 1.33791 3.24625 1.60025 3.50875L2.73704 4.64625C2.56215 4.94375 2.42224 5.25875 2.3173 5.6H0.699563C0.314803 5.6 0 5.915 0 6.3V7.7C0 8.085 0.314803 8.4 0.699563 8.4H2.3173C2.41349 8.72375 2.5534 9.02125 2.71081 9.31L1.52155 10.5C1.25047 10.7712 1.25047 11.2175 1.52155 11.4888L2.50968 12.4775C2.78076 12.7487 3.22673 12.7487 3.49781 12.4775L4.68707 11.2875C4.97564 11.445 5.27295 11.5763 5.5965 11.6725V13.3C5.5965 13.685 5.91131 14 6.29606 14H7.69519C8.07995 14 8.39475 13.685 8.39475 13.3V11.6725C8.73579 11.5675 9.05059 11.4275 9.35665 11.2612L10.4934 12.3988C10.7558 12.6613 11.1843 12.6613 11.4466 12.3988L12.3997 11.445C12.6621 11.1825 12.6621 10.7537 12.3997 10.4913L11.263 9.35375C11.4291 9.0475 11.5778 8.7325 11.6827 8.39125H13.3004C13.6852 8.39125 14 8.07625 14 7.69125V6.29125C13.9913 5.915 13.6765 5.6 13.2917 5.6ZM6.99563 9.625C5.54403 9.625 4.37227 8.4525 4.37227 7C4.37227 5.5475 5.54403 4.375 6.99563 4.375C8.44722 4.375 9.61899 5.5475 9.61899 7C9.61899 8.4525 8.44722 9.625 6.99563 9.625Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M15.19 6.4h-1.848c-.11-.37-.27-.71-.45-1.04L14.252 4a.805.805 0 0 0 0-1.13l-1.13-1.13a.802.802 0 0 0-1.13 0L10.633 3.1c-.33-.17-.67-.33-1.039-.44V.8c0-.44-.36-.8-.8-.8H7.195c-.44 0-.799.36-.799.8v1.86c-.39.12-.75.28-1.1.47l-1.299-1.3c-.3-.3-.789-.3-1.089 0l-1.08 1.09a.774.774 0 0 0 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.8c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.848c.11.37.27.71.45 1.04L1.738 12a.805.805 0 0 0 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.359-1.36c.33.18.67.33 1.039.44v1.86c0 .44.36.8.8.8h1.598c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.298 1.3c.3.3.79.3 1.09 0l1.09-1.09a.774.774 0 0 0 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1H15.2c.44 0 .8-.36.8-.8v-1.6a.816.816 0 0 0-.81-.79ZM7.995 11a2.995 2.995 0 0 1-2.998-3c0-1.66 1.339-3 2.998-3a2.995 2.995 0 0 1 2.998 3c0 1.66-1.339 3-2.998 3Z" />
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconGlobeBasicLarge.svg b/packages/components/src/common/svgs/IconGlobeBasicLarge.svg
old mode 100755
new mode 100644
index a852f644c..192103e50
--- a/packages/components/src/common/svgs/IconGlobeBasicLarge.svg
+++ b/packages/components/src/common/svgs/IconGlobeBasicLarge.svg
@@ -1,4 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C17.0751 0 22 4.92487 22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0ZM10.25 12.21V20.6535C9.43827 20.3614 8.57663 19.5866 7.81961 18.1988C6.98694 16.6722 6.39906 14.5857 6.24815 12.21H10.25ZM11.46 12.21V20.7381C12.3533 20.5386 13.3325 19.7533 14.1804 18.1988C15.0131 16.6722 15.6009 14.5857 15.7518 12.21H11.46ZM15.79 11L11.46 11V1.26188C12.3533 1.46136 13.3325 2.24671 14.1804 3.80124C15.1518 5.5821 15.79 8.12499 15.79 11ZM16.9641 12.21C16.7634 15.5726 15.736 18.4796 14.2625 20.2332C17.6999 19.0186 20.2563 15.9389 20.716 12.21H16.9641ZM20.79 11C20.79 6.73708 18.0654 3.11053 14.2626 1.76679C15.9102 3.72761 17 7.13047 17 11H20.79ZM10.25 11L6.21 11C6.21 8.12499 6.84823 5.5821 7.81961 3.80124C8.57663 2.41337 9.43827 1.63859 10.25 1.34647V11ZM5 11C5 7.13047 6.08983 3.72761 7.73745 1.76679C3.93463 3.11053 1.21 6.73708 1.21 11H5ZM1.28404 12.21C1.74367 15.9389 4.30011 19.0186 7.73745 20.2332C6.26395 18.4796 5.23657 15.5726 5.03589 12.21H1.28404Z" />
-
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm-.818 13.32v9.211c-.886-.319-1.826-1.164-2.652-2.678-.908-1.665-1.55-3.941-1.714-6.533h4.366Zm1.32 0v9.303c.974-.217 2.042-1.074 2.967-2.77.909-1.665 1.55-3.941 1.715-6.533h-4.682ZM17.225 12h-4.723V1.377c.974.217 2.042 1.074 2.967 2.77C16.53 6.09 17.227 8.864 17.227 12Zm1.281 1.32c-.219 3.668-1.34 6.84-2.947 8.753a10.691 10.691 0 0 0 7.04-8.753h-4.093ZM22.68 12c0-4.65-2.972-8.607-7.12-10.073C17.356 4.067 18.545 7.78 18.545 12h4.134Zm-11.498 0H6.775c0-3.136.696-5.91 1.755-7.853.826-1.514 1.766-2.36 2.652-2.678V12Zm-5.727 0c0-4.221 1.188-7.934 2.986-10.073C4.292 3.393 1.32 7.35 1.32 12h4.135ZM1.4 13.32a10.692 10.692 0 0 0 7.04 8.753c-1.608-1.913-2.728-5.085-2.947-8.753H1.4Z" />
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconGlobeSmall.svg b/packages/components/src/common/svgs/IconGlobeSmall.svg
index 9e2fdadb0..1a238cb80 100644
--- a/packages/components/src/common/svgs/IconGlobeSmall.svg
+++ b/packages/components/src/common/svgs/IconGlobeSmall.svg
@@ -1,6 +1,4 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M7.55416667,0.175 C3.35416667,-0.175 -0.175,3.35416667 0.175,7.55416667 C0.4375,10.8791667 3.12083333,13.5625 6.44583333,13.825 C10.675,14.175 14.175,10.6458333 13.825,6.44583333 C13.5625,3.12083333 10.8791667,0.4375 7.55416667,0.175 Z M8.34166667,1.16666667 C8.60416667,1.225 8.86666667,1.3125 9.12916667,1.4 C9.275,1.4875 9.42083333,1.575 9.59583333,1.60416667 C10.325,1.95416667 10.9958333,2.45 11.5208333,3.0625 C11.55,3.09166667 11.5791667,3.15 11.5791667,3.20833333 C11.6083333,3.325 11.5791667,3.47083333 11.55,3.5875 C11.5208333,3.675 11.4916667,3.73333333 11.4916667,3.82083333 C11.4916667,3.96666667 11.6375,4.08333333 11.7541667,4.1125 C11.8416667,4.14166667 11.9875,4.14166667 12.1041667,4.14166667 C12.1916667,4.14166667 12.2791667,4.2 12.3083333,4.2875 C12.3666667,4.43333333 12.4541667,4.66666667 12.5125,4.725 C12.775,5.36666667 12.9208333,6.0375 12.95,6.7375 C12.95,6.825 12.9208333,6.94166667 12.8625,7 C12.7458333,7.11666667 12.6291667,7.29166667 12.5416667,7.4375 C12.3375,7.84583333 12.1625,8.3125 11.8708333,8.6625 C11.725,8.8375 11.55,8.98333333 11.4916667,9.21666667 C11.4333333,9.3625 11.4625,9.5375 11.4333333,9.68333333 C11.4333333,9.74166667 11.3166667,9.74166667 11.2583333,9.7125 C11.025,9.3625 10.85,8.98333333 10.7625,8.575 C10.7041667,8.28333333 10.6458333,7.99166667 10.5583333,7.7 C10.4708333,7.40833333 10.2958333,7.14583333 10.0333333,7 C9.74166667,6.85416667 9.42083333,6.88333333 9.1,6.85416667 C8.77916667,6.85416667 8.42916667,6.79583333 8.225,6.53333333 C8.1375,6.41666667 8.07916667,6.27083333 8.07916667,6.125 C7.93333333,5.36666667 8.34166667,4.55 9.0125,4.2 C9.1,4.14166667 9.1875,4.1125 9.275,4.05416667 C9.45,3.90833333 9.5375,3.675 9.47916667,3.44166667 C9.47916667,3.38333333 9.39166667,3.35416667 9.3625,3.38333333 C9.1875,3.44166667 9.0125,3.5 8.86666667,3.5875 C8.77916667,3.61666667 8.69166667,3.55833333 8.72083333,3.5 C8.72083333,3.2375 8.75,2.91666667 8.8375,2.625 C8.925,2.30416667 9.0125,1.95416667 8.86666667,1.69166667 C8.8375,1.63333333 8.75,1.575 8.69166667,1.575 C8.42916667,1.575 8.16666667,1.575 7.875,1.575 C7.84583333,1.575 7.84583333,1.54583333 7.84583333,1.54583333 C7.99166667,1.45833333 8.10833333,1.34166667 8.225,1.225 C8.25416667,1.19583333 8.3125,1.16666667 8.34166667,1.16666667 Z M5.39583333,1.25416667 C5.45416667,1.225 5.5125,1.25416667 5.54166667,1.3125 C5.62916667,1.45833333 5.6875,1.60416667 5.775,1.77916667 C5.92083333,2.15833333 6.00833333,2.56666667 5.83333333,2.91666667 C5.62916667,3.325 5.1625,3.5 4.78333333,3.70416667 C3.99583333,4.1125 3.325,4.725 2.82916667,5.45416667 C2.8,5.48333333 2.77083333,5.54166667 2.74166667,5.54166667 C2.68333333,5.57083333 2.625,5.54166667 2.59583333,5.48333333 C2.50833333,5.425 2.42083333,5.36666667 2.3625,5.27916667 C2.33333333,5.25 2.24583333,5.30833333 2.24583333,5.36666667 C2.12916667,5.775 2.33333333,6.2125 2.68333333,6.41666667 C2.74166667,6.44583333 2.8,6.475 2.85833333,6.53333333 C2.975,6.67916667 2.85833333,6.88333333 2.8875,7.05833333 C2.91666667,7.29166667 3.20833333,7.4375 3.47083333,7.40833333 C3.73333333,7.37916667 3.9375,7.2625 4.17083333,7.175 C4.69583333,7 5.30833333,7.05833333 5.74583333,7.37916667 C5.97916667,7.525 6.18333333,7.75833333 6.41666667,7.90416667 C6.62083333,8.05 6.88333333,8.16666667 7.11666667,8.1375 C7.175,8.1375 7.23333333,8.16666667 7.2625,8.19583333 C7.35,8.42916667 7.2625,8.72083333 7.11666667,8.925 C6.94166667,9.15833333 6.67916667,9.33333333 6.475,9.5375 C5.97916667,10.0916667 5.8625,10.9375 5.45416667,11.55 C5.36666667,11.6666667 5.27916667,11.7833333 5.22083333,11.9291667 C5.13333333,12.1333333 5.1625,12.3375 5.1625,12.5416667 C5.1625,12.5708333 5.13333333,12.6291667 5.10416667,12.6 C5.01666667,12.5708333 4.9,12.5416667 4.8125,12.4833333 C4.75416667,12.4541667 4.69583333,12.3958333 4.69583333,12.3375 C4.55,11.4916667 4.25833333,10.675 3.85,9.91666667 C3.675,9.625 3.5,9.30416667 3.20833333,9.12916667 C3.12083333,9.07083333 3.03333333,9.0125 3.00416667,8.925 C2.975,8.86666667 3.00416667,8.77916667 3.00416667,8.72083333 C3.12083333,7.93333333 2.74166667,7.11666667 2.1,6.65 C1.98333333,6.5625 1.86666667,6.50416667 1.80833333,6.3875 C1.75,6.27083333 1.75,6.09583333 1.69166667,5.97916667 C1.63333333,5.8625 1.4,5.71666667 1.28333333,5.62916667 C1.225,5.6 1.225,5.54166667 1.225,5.48333333 C1.72083333,3.47083333 3.35416667,1.80833333 5.39583333,1.25416667 Z"
-        id="Shape"></path>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M8.633.2C3.833-.2-.2 3.833.2 8.633c.3 3.8 3.367 6.867 7.167 7.167 4.833.4 8.833-3.633 8.433-8.433C15.5 3.567 12.433.5 8.633.2Zm.9 1.133c.3.067.6.167.9.267.167.1.334.2.534.233.833.4 1.6.967 2.2 1.667.033.033.066.1.066.167.034.133 0 .3-.033.433-.033.1-.067.167-.067.267 0 .166.167.3.3.333.1.033.267.033.4.033.1 0 .2.067.234.167.066.167.166.433.233.5.3.733.467 1.5.5 2.3 0 .1-.033.233-.1.3a2.76 2.76 0 0 0-.367.5c-.233.467-.433 1-.766 1.4-.167.2-.367.367-.434.633-.066.167-.033.367-.066.534 0 .066-.134.066-.2.033a3.77 3.77 0 0 1-.567-1.3c-.067-.333-.133-.667-.233-1-.1-.333-.3-.633-.6-.8-.334-.167-.7-.133-1.067-.167-.367 0-.767-.066-1-.366A.796.796 0 0 1 9.233 7c-.166-.867.3-1.8 1.067-2.2.1-.067.2-.1.3-.167a.69.69 0 0 0 .233-.7c0-.066-.1-.1-.133-.066-.2.066-.4.133-.567.233-.1.033-.2-.033-.166-.1 0-.3.033-.667.133-1 .1-.367.2-.767.033-1.067-.033-.066-.133-.133-.2-.133H9c-.033 0-.033-.033-.033-.033.166-.1.3-.234.433-.367a.253.253 0 0 1 .133-.067Zm-3.366.1c.066-.033.133 0 .166.067.1.167.167.333.267.533.167.434.267.9.067 1.3-.234.467-.767.667-1.2.9a6.139 6.139 0 0 0-2.234 2c-.033.034-.066.1-.1.1-.066.034-.133 0-.166-.066a.898.898 0 0 1-.267-.234c-.033-.033-.133.034-.133.1-.134.467.1.967.5 1.2.066.034.133.067.2.134.133.166 0 .4.033.6.033.266.367.433.667.4.3-.034.533-.167.8-.267.6-.2 1.3-.133 1.8.233.266.167.5.434.766.6.234.167.534.3.8.267.067 0 .134.033.167.067.1.266 0 .6-.167.833-.2.267-.5.467-.733.7-.567.633-.7 1.6-1.167 2.3-.1.133-.2.267-.266.433-.1.234-.067.467-.067.7 0 .034-.033.1-.067.067-.1-.033-.233-.067-.333-.133-.067-.034-.133-.1-.133-.167-.167-.967-.5-1.9-.967-2.767-.2-.333-.4-.7-.733-.9-.1-.066-.2-.133-.234-.233-.033-.067 0-.167 0-.233.134-.9-.3-1.834-1.033-2.367-.133-.1-.267-.167-.333-.3C2 7.167 2 6.967 1.933 6.833c-.066-.133-.333-.3-.466-.4-.067-.033-.067-.1-.067-.166.567-2.3 2.433-4.2 4.767-4.834Z" />
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconGridDots3Large.svg b/packages/components/src/common/svgs/IconGridDots3Large.svg
new file mode 100644
index 000000000..0d6d53ebe
--- /dev/null
+++ b/packages/components/src/common/svgs/IconGridDots3Large.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M2.318 12.818c0-.452.366-.818.818-.818H4.5c.452 0 .818.366.818.818v1.364A.818.818 0 0 1 4.5 15H3.136a.818.818 0 0 1-.818-.818v-1.364Zm6.546 6.546c0-.452.366-.819.818-.819h1.363a.82.82 0 0 1 .819.819v1.363a.818.818 0 0 1-.819.819H9.682a.818.818 0 0 1-.818-.819v-1.363Zm-5.728-.819a.818.818 0 0 0-.818.819v1.363c0 .452.366.819.818.819H4.5a.818.818 0 0 0 .818-.819v-1.363a.818.818 0 0 0-.818-.819H3.136ZM2.59 3.273c0-.452.367-.818.819-.818h17.455c.451 0 .818.366.818.818v17.454a.818.818 0 0 1-.818.819h-5.819a.818.818 0 0 1-.818-.819v-5h-5a.818.818 0 0 1-.818-.818v-5h-5a.818.818 0 0 1-.818-.818V3.273ZM20.047 14.09h-4.182V9.909h4.181v4.182Zm-4.182 1.636v4.182h4.181v-4.182h-4.181ZM4.227 4.091H8.41v4.182H4.227V4.09Zm5.818 0v4.182h4.182V4.09h-4.182Zm5.819 4.182V4.09h4.181v4.182h-4.181Zm-5.819 1.636v4.182h4.182V9.909h-4.182Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconGridLarge.svg b/packages/components/src/common/svgs/IconGridLarge.svg
index c7247a811..3a1251c4f 100644
--- a/packages/components/src/common/svgs/IconGridLarge.svg
+++ b/packages/components/src/common/svgs/IconGridLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.61681 2.06331C2.30049 2.09523 2.06082 2.35286 2.06251 2.65912V19.3417C2.06251 19.6707 2.33955 19.9375 2.68127 19.9375H20.0063C20.348 19.9375 20.625 19.6707 20.625 19.3417V2.65912C20.625 2.33007 20.348 2.06334 20.0063 2.06331H2.68127C2.6598 2.06223 2.63828 2.06223 2.61681 2.06331ZM3.30002 3.25492H6.60001V6.43256H3.30002V3.25492ZM7.83751 3.25492H10.725V6.43256H7.83751V3.25492ZM11.9625 3.25492H14.85V6.43256H11.9625V3.25492ZM16.0875 3.25492H19.3875V6.43256H16.0875V3.25492ZM3.30002 7.62417H6.60001V10.4046H3.30002V7.62417ZM7.83751 7.62417H10.725V10.4046H7.83751V7.62417ZM11.9625 7.62417H14.85V10.4046H11.9625V7.62417ZM16.0875 7.62417H19.3875V10.4046H16.0875V7.62417ZM3.30002 11.5962H6.60001V14.3766H3.30002V11.5962ZM7.83751 11.5962H10.725V14.3766H7.83751V11.5962ZM11.9625 11.5962H14.85V14.3766H11.9625V11.5962ZM16.0875 11.5962H19.3875V14.3766H16.0875V11.5962ZM3.30002 15.5683H6.60001V18.7459H3.30002V15.5683ZM7.83751 15.5683H10.725V18.7459H7.83751V15.5683ZM11.9625 15.5683H14.85V18.7459H11.9625V15.5683ZM16.0875 15.5683H19.3875V18.7459H16.0875V15.5683Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M2.855 2.25a.66.66 0 0 0-.605.65v18.2c0 .359.302.65.675.65h18.9a.663.663 0 0 0 .675-.65V2.9a.663.663 0 0 0-.675-.65h-18.9a.705.705 0 0 0-.07 0Zm.745 1.3h3.6v3.467H3.6V3.551Zm4.95 0h3.15v3.467H8.55V3.551Zm4.5 0h3.15v3.467h-3.15V3.551Zm4.5 0h3.6v3.467h-3.6V3.551ZM3.6 8.318h3.6v3.034H3.6V8.317Zm4.95 0h3.15v3.034H8.55V8.317Zm4.5 0h3.15v3.034h-3.15V8.317Zm4.5 0h3.6v3.034h-3.6V8.317ZM3.6 12.65h3.6v3.034H3.6V12.65Zm4.95 0h3.15v3.034H8.55V12.65Zm4.5 0h3.15v3.034h-3.15V12.65Zm4.5 0h3.6v3.034h-3.6V12.65ZM3.6 16.984h3.6v3.466H3.6v-3.466Zm4.95 0h3.15v3.466H8.55v-3.466Zm4.5 0h3.15v3.466h-3.15v-3.466Zm4.5 0h3.6v3.466h-3.6v-3.466Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconGridPrivateLarge.svg b/packages/components/src/common/svgs/IconGridPrivateLarge.svg
index 1a4c45672..3d136cdb6 100644
--- a/packages/components/src/common/svgs/IconGridPrivateLarge.svg
+++ b/packages/components/src/common/svgs/IconGridPrivateLarge.svg
@@ -1,5 +1,8 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7806 17.3984H9.8633V14.4539H12.3969C12.7393 13.8376 13.1501 13.3583 13.698 12.9475V10.6193H16.6424V11.7834C16.7109 11.7834 16.7794 11.7834 16.9163 11.7834C17.2587 11.7834 17.6011 11.8518 17.875 11.8518V1.99128C17.875 1.6489 17.6011 1.375 17.2587 1.375H1.30378H1.23531C0.892928 1.375 0.6875 1.6489 0.6875 1.99128V17.9462C0.6875 18.2886 0.961404 18.5625 1.30378 18.5625H11.9861C11.8491 18.2201 11.7806 17.8093 11.7806 17.3984ZM13.698 2.60757H16.6424V5.55204H13.698V2.60757ZM13.698 6.85309H16.6424V9.3867H13.698V6.85309ZM9.8633 2.60757H12.3969V5.55204H9.8633V2.60757ZM9.8633 6.85309H12.3969V9.3867H9.8633V6.85309ZM9.8633 10.6193H12.3969V13.1529H9.8633V10.6193ZM4.79607 17.3984H1.85159V14.4539H4.79607V17.3984ZM4.79607 13.1529H1.85159V10.6193H4.79607V13.1529ZM4.79607 9.3867H1.85159V6.85309H4.79607V9.3867ZM4.79607 5.55204H1.85159V2.60757H4.79607V5.55204ZM8.63073 17.3984H6.09711V14.4539H8.63073V17.3984ZM8.63073 13.1529H6.09711V10.6193H8.63073V13.1529ZM8.63073 9.3867H6.09711V6.85309H8.63073V9.3867ZM8.63073 5.55204H6.09711V2.60757H8.63073V5.55204Z" fill="#CCCCCC" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.8438 11.6875C19.7312 11.6875 22 14.025 22 16.8438C22 19.6625 19.6625 22 16.8438 22C14.025 22 11.6875 19.6625 11.6875 16.8438C11.6875 14.025 14.025 11.6875 16.8438 11.6875ZM16.8438 13.475C15.8813 13.475 15.0562 14.3 15.0562 15.2625V15.8813C14.7125 15.8813 14.4375 16.1562 14.4375 16.5V18.9062C14.4375 19.25 14.7125 19.525 15.0562 19.525H18.6313C18.975 19.525 19.25 19.25 19.25 18.9062V16.5C19.25 16.1562 18.975 15.8813 18.6313 15.8813V15.2625C18.6313 14.3 17.8062 13.475 16.8438 13.475ZM16.8438 16.9125C17.1188 16.9125 17.325 17.1188 17.2563 17.325C17.2563 17.5313 17.1875 17.6687 17.05 17.7375V18.3563C17.05 18.4938 16.9813 18.5625 16.8438 18.5625C16.7062 18.5625 16.6375 18.4938 16.6375 18.3563V17.7375C16.5 17.6 16.4312 17.4625 16.4312 17.325C16.4312 17.1188 16.5687 16.9125 16.8438 16.9125ZM16.8438 14.0938C17.5312 14.0938 18.0813 14.6437 18.0125 15.3312V15.95H15.6063V15.3312C15.6063 14.6437 16.1562 14.0938 16.8438 14.0938Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        fill="#CCCCCC"
+        d="M12.852 18.98H10.76v-3.212h2.764a5.032 5.032 0 0 1 1.42-1.644v-2.54h3.211v1.27h.3c.373 0 .746.075 1.045.075V2.172a.67.67 0 0 0-.672-.672H1.348c-.374 0-.598.299-.598.672v17.406a.67.67 0 0 0 .672.672h11.654a3.49 3.49 0 0 1-.224-1.27Zm2.091-16.135h3.212v3.212h-3.212V2.845Zm0 4.631h3.212v2.764h-3.212V7.476ZM10.76 2.845h2.764v3.212H10.76V2.845Zm0 4.631h2.764v2.764H10.76V7.476Zm0 4.109h2.764v2.764H10.76v-2.764ZM5.232 18.98H2.02v-3.212h3.212v3.212Zm0-4.631H2.02v-2.764h3.212v2.764Zm0-4.109H2.02V7.476h3.212v2.764Zm0-4.183H2.02V2.845h3.212v3.212ZM9.415 18.98H6.651v-3.212h2.764v3.212Zm0-4.631H6.651v-2.764h2.764v2.764Zm0-4.109H6.651V7.476h2.764v2.764Zm0-4.183H6.651V2.845h2.764v3.212Z" />
+    <path fill-rule="evenodd"
+        d="M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625Zm0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95Zm0 3.75c.3 0 .525.225.45.45 0 .225-.075.375-.225.45v.675c0 .15-.075.225-.225.225-.15 0-.225-.075-.225-.225v-.675c-.15-.15-.225-.3-.225-.45 0-.225.15-.45.45-.45Zm0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35Z" />
 </svg>
-    
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconGridPublicLarge.svg b/packages/components/src/common/svgs/IconGridPublicLarge.svg
index 2005b9e30..41a8c4be4 100644
--- a/packages/components/src/common/svgs/IconGridPublicLarge.svg
+++ b/packages/components/src/common/svgs/IconGridPublicLarge.svg
@@ -1,5 +1,7 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7806 17.3984H9.8633V14.4539H12.3969C12.7393 13.8376 13.1501 13.3583 13.698 12.9475V10.6193H16.6424V11.7834C16.7109 11.7834 16.7794 11.7834 16.9163 11.7834C17.2587 11.7834 17.6011 11.8518 17.875 11.8518V1.99128C17.875 1.6489 17.6011 1.375 17.2587 1.375H1.30378H1.23531C0.892928 1.375 0.6875 1.6489 0.6875 1.99128V17.9462C0.6875 18.2886 0.961404 18.5625 1.30378 18.5625H11.9861C11.8491 18.2201 11.7806 17.8093 11.7806 17.3984ZM13.698 2.60757H16.6424V5.55204H13.698V2.60757ZM13.698 6.85309H16.6424V9.3867H13.698V6.85309ZM9.8633 2.60757H12.3969V5.55204H9.8633V2.60757ZM9.8633 6.85309H12.3969V9.3867H9.8633V6.85309ZM9.8633 10.6193H12.3969V13.1529H9.8633V10.6193ZM4.79607 17.3984H1.85159V14.4539H4.79607V17.3984ZM4.79607 13.1529H1.85159V10.6193H4.79607V13.1529ZM4.79607 9.3867H1.85159V6.85309H4.79607V9.3867ZM4.79607 5.55204H1.85159V2.60757H4.79607V5.55204ZM8.63073 17.3984H6.09711V14.4539H8.63073V17.3984ZM8.63073 13.1529H6.09711V10.6193H8.63073V13.1529ZM8.63073 9.3867H6.09711V6.85309H8.63073V9.3867ZM8.63073 5.55204H6.09711V2.60757H8.63073V5.55204Z" fill="#CCCCCC" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2547 11.7069C14.1041 11.4329 11.4329 14.1041 11.7069 17.2547C11.9123 19.7204 13.8986 21.7752 16.4328 21.9806C19.5834 22.2546 22.2546 19.5834 21.9806 16.4328C21.7752 13.8986 19.7889 11.8439 17.2547 11.7069ZM17.8711 12.3918C18.0766 12.4603 18.2821 12.5288 18.4876 12.5973C18.6245 12.6658 18.693 12.7342 18.83 12.7342C19.3779 13.0082 19.8574 13.3507 20.2683 13.8301C20.2683 13.8301 20.3368 13.8986 20.3368 13.9671C20.3368 14.0356 20.3368 14.1726 20.3368 14.2411C20.3368 14.3096 20.2683 14.378 20.2683 14.4465C20.2683 14.5835 20.4053 14.652 20.4738 14.652C20.5423 14.652 20.6793 14.652 20.7478 14.652C20.8163 14.652 20.8848 14.7205 20.8848 14.789C20.9533 14.926 21.0217 15.063 21.0217 15.1315C21.2272 15.6109 21.2957 16.0903 21.3642 16.6383C21.3642 16.7068 21.3642 16.7753 21.2957 16.8438C21.2272 16.9122 21.0902 17.0492 21.0217 17.1862C20.8848 17.4602 20.7478 17.8711 20.5423 18.0766C20.4053 18.2136 20.2683 18.3506 20.2683 18.4876C20.1998 18.6245 20.2683 18.7615 20.1998 18.83C20.1998 18.8985 20.1314 18.8985 20.0629 18.83C19.8574 18.556 19.7889 18.2821 19.7204 18.0081C19.6519 17.8026 19.6519 17.5972 19.5834 17.3232C19.5149 17.1177 19.3779 16.9122 19.1725 16.7753C18.967 16.6383 18.693 16.7068 18.4876 16.6383C18.2136 16.6383 18.0081 16.5698 17.8026 16.3643C17.7341 16.2958 17.6657 16.1588 17.6657 16.0903C17.5287 15.5424 17.8711 14.926 18.3506 14.652C18.4191 14.5835 18.4876 14.5835 18.556 14.515C18.693 14.378 18.7615 14.2411 18.693 14.0356C18.693 13.9671 18.6245 13.9671 18.6245 13.9671C18.4876 14.0356 18.3506 14.0356 18.2821 14.1041C18.2136 14.1041 18.1451 14.1041 18.1451 14.0356C18.1451 13.8301 18.1451 13.6246 18.2136 13.3507C18.2821 13.0767 18.3506 12.8712 18.2136 12.6658C18.2136 12.5973 18.1451 12.5973 18.0766 12.5973C17.8711 12.5973 17.6657 12.5973 17.4602 12.5973C17.5972 12.5288 17.6657 12.4603 17.7341 12.3233C17.8026 12.4603 17.8711 12.3918 17.8711 12.3918ZM15.6794 12.4603C15.7479 12.4603 15.7479 12.4603 15.8164 12.5288C15.8849 12.6658 15.9534 12.7342 16.0218 12.8712C16.1588 13.1452 16.2273 13.4877 16.0903 13.6931C15.9534 13.9671 15.6109 14.1041 15.3369 14.3096C14.7205 14.5835 14.2411 15.063 13.8986 15.6109L13.8301 15.6794C13.7616 15.6794 13.7616 15.6794 13.6931 15.6109C13.6246 15.5424 13.5561 15.5424 13.4877 15.4739C13.4877 15.4739 13.4192 15.4739 13.4192 15.5424C13.3507 15.8164 13.4877 16.1588 13.7616 16.2958C13.8301 16.2958 13.8301 16.3643 13.8986 16.3643C13.9671 16.5013 13.8986 16.6383 13.8986 16.7753C13.8986 16.9807 14.1726 17.0492 14.3096 17.0492C14.515 17.0492 14.652 16.9122 14.8575 16.8438C15.2684 16.7068 15.6794 16.7753 16.0218 16.9807C16.2273 17.1177 16.3643 17.2547 16.5013 17.3917C16.6383 17.5287 16.8438 17.5972 17.0492 17.5972C17.1177 17.5972 17.1177 17.5972 17.1862 17.6657C17.2547 17.8711 17.1862 18.0766 17.0492 18.2136C16.9122 18.4191 16.7068 18.4876 16.5698 18.693C16.2273 19.104 16.0903 19.7204 15.8164 20.1998C15.7479 20.2683 15.6794 20.4053 15.6109 20.4738C15.5424 20.6108 15.5424 20.7478 15.5424 20.9533C15.5424 20.9533 15.5424 21.0217 15.4739 21.0217C15.4054 21.0217 15.3369 20.9533 15.2684 20.9533C15.1999 20.9533 15.1999 20.8848 15.1999 20.8163C15.063 20.1998 14.8575 19.5834 14.5835 18.967C14.4465 18.7615 14.3096 18.4876 14.1041 18.3506C14.0356 18.2821 13.9671 18.2821 13.9671 18.2136C13.9671 18.1451 13.9671 18.0766 13.9671 18.0766C14.0356 17.4602 13.7616 16.8438 13.2822 16.5013C13.2137 16.4328 13.0767 16.3643 13.0767 16.2958C13.0767 16.2273 13.0082 16.0903 13.0082 16.0218C12.9397 15.9534 12.8027 15.8164 12.7342 15.7479C12.6658 15.7479 12.6658 15.6794 12.6658 15.6109C12.9397 14.1726 14.1041 12.8712 15.6794 12.4603Z" />
-</svg>
-    
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    fill="#CCCCCC"
+    d="M12.852 18.98H10.76v-3.212h2.764a5.032 5.032 0 0 1 1.42-1.644v-2.54h3.211v1.27h.3c.373 0 .746.075 1.045.075V2.172a.67.67 0 0 0-.672-.672H1.348c-.374 0-.598.299-.598.672v17.406a.67.67 0 0 0 .672.672h11.654a3.49 3.49 0 0 1-.224-1.27Zm2.091-16.135h3.212v3.212h-3.212V2.845Zm0 4.631h3.212v2.764h-3.212V7.476ZM10.76 2.845h2.764v3.212H10.76V2.845Zm0 4.631h2.764v2.764H10.76V7.476Zm0 4.109h2.764v2.764H10.76v-2.764ZM5.232 18.98H2.02v-3.212h3.212v3.212Zm0-4.631H2.02v-2.764h3.212v2.764Zm0-4.109H2.02V7.476h3.212v2.764Zm0-4.183H2.02V2.845h3.212v3.212ZM9.415 18.98H6.651v-3.212h2.764v3.212Zm0-4.631H6.651v-2.764h2.764v2.764Zm0-4.109H6.651V7.476h2.764v2.764Zm0-4.183H6.651V2.845h2.764v3.212Z" />
+  <path fill-rule="evenodd"
+    d="M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052-.224-2.765-2.391-5.006-5.156-5.156Zm.673.747.672.224c.15.075.224.15.374.15.598.299 1.12.672 1.569 1.195 0 0 .075.075.075.15v.299c0 .074-.075.15-.075.224 0 .15.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .075 0 .15-.074.224a1.63 1.63 0 0 0-.3.374c-.149.299-.298.747-.522.97-.15.15-.3.3-.3.45-.074.149 0 .298-.074.373 0 .074-.075.074-.15 0-.223-.299-.298-.598-.373-.897-.075-.224-.075-.448-.15-.747a1.162 1.162 0 0 0-.448-.598c-.224-.15-.523-.074-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.299-.149-.598.225-1.27.748-1.569.075-.075.15-.075.224-.15.15-.149.224-.298.15-.522 0-.075-.075-.075-.075-.075-.15.075-.3.075-.374.15-.075 0-.15 0-.15-.075 0-.225 0-.449.075-.748s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.584.584 0 0 0 .3-.298c.074.149.149.074.149.074Zm-2.391.075c.075 0 .075 0 .15.075.074.15.149.224.223.373.15.3.224.673.075.897-.15.299-.523.448-.822.672-.672.3-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.751.751 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.3.447.3.225 0 .374-.15.598-.225a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.448.15.15.374.224.598.224.075 0 .075 0 .15.075a.581.581 0 0 1-.15.597c-.15.224-.373.3-.523.523-.373.449-.523 1.121-.822 1.644-.075.075-.15.224-.224.3-.075.149-.075.298-.075.522 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075-.075 0-.075-.075-.075-.15a10.657 10.657 0 0 0-.673-2.017c-.15-.224-.299-.523-.523-.672-.074-.075-.15-.075-.15-.15v-.15a1.875 1.875 0 0 0-.746-1.718c-.075-.074-.225-.149-.225-.224 0-.075-.074-.224-.074-.299l-.3-.299c-.074 0-.074-.074-.074-.149.3-1.569 1.57-2.989 3.288-3.437Z" />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconGridThreeDotsLarge.svg b/packages/components/src/common/svgs/IconGridThreeDotsLarge.svg
deleted file mode 100644
index 89dd9e7f2..000000000
--- a/packages/components/src/common/svgs/IconGridThreeDotsLarge.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M2.25 11.75C2.25 11.3358 2.58579 11 3 11H4.25C4.66421 11 5 11.3358 5 11.75V13C5 13.4142 4.66421 13.75 4.25 13.75H3C2.58579 13.75 2.25 13.4142 2.25 13V11.75ZM8.25 17.75C8.25 17.3358 8.58579 17 9 17H10.25C10.6642 17 11 17.3358 11 17.75V19C11 19.4142 10.6642 19.75 10.25 19.75H9C8.58579 19.75 8.25 19.4142 8.25 19V17.75ZM3 17C2.58579 17 2.25 17.3358 2.25 17.75V19C2.25 19.4142 2.58579 19.75 3 19.75H4.25C4.66421 19.75 5 19.4142 5 19V17.75C5 17.3358 4.66421 17 4.25 17H3Z"></path>
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M2.5 3C2.5 2.58579 2.83579 2.25 3.25 2.25H8.58325H8.58333H13.9166H13.9167H19.2501C19.6643 2.25 20.0001 2.58579 20.0001 3V8.33333V13.6667V13.6667V19C20.0001 19.4142 19.6643 19.75 19.2501 19.75H13.9167C13.5025 19.75 13.1667 19.4142 13.1667 19V14.4167H8.58325C8.16904 14.4167 7.83325 14.0809 7.83325 13.6667V9.08333H3.25C2.83579 9.08333 2.5 8.74755 2.5 8.33333V3ZM18.5001 12.9167H14.6667V9.08334H18.5001V12.9167ZM14.6667 14.4167V18.25H18.5001V14.4167H14.6667ZM4 3.75H7.83325V7.58333H4V3.75ZM9.33333 3.75V7.58333H13.1666V3.75H9.33333ZM14.6667 7.58333V3.75H18.5001V7.58333H14.6667ZM9.33325 9.08334V12.9167H13.1666V9.08334H9.33325Z"></path>
-</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconHouseSmall.svg b/packages/components/src/common/svgs/IconHouseSmall.svg
old mode 100755
new mode 100644
index 5ec0cb7f6..159d4127c
--- a/packages/components/src/common/svgs/IconHouseSmall.svg
+++ b/packages/components/src/common/svgs/IconHouseSmall.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6.68595 1.30595C6.86069 1.13571 7.13926 1.13571 7.314 1.30595L13.1355 6.97769C13.4247 7.25943 13.2252 7.75 12.8214 7.75H11.5V12.55C11.5 12.7985 11.2985 13 11.05 13H9.2C8.95147 13 8.75 12.7985 8.75 12.55V9.95C8.75 9.70148 8.54852 9.5 8.3 9.5H5.7C5.45147 9.5 5.25 9.70148 5.25 9.95V12.55C5.25 12.7985 5.04852 13 4.8 13H2.94998C2.70145 13 2.49998 12.7985 2.49998 12.55V7.75H1.1785C0.774764 7.75 0.575297 7.25943 0.864479 6.97769L6.68595 1.30595Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.641 1.493a.514.514 0 0 1 .718 0l6.653 6.481a.514.514 0 0 1-.359.883h-1.51v5.486c0 .284-.23.514-.514.514h-2.115a.514.514 0 0 1-.514-.514V11.37a.514.514 0 0 0-.514-.514H6.514A.514.514 0 0 0 6 11.37v2.972c0 .284-.23.514-.514.514H3.37a.514.514 0 0 1-.514-.514V8.857h-1.51a.514.514 0 0 1-.359-.883L7.64 1.493Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconInfoCircleLarge.svg b/packages/components/src/common/svgs/IconInfoCircleLarge.svg
index ea4d1b90a..fc0d1158d 100644
--- a/packages/components/src/common/svgs/IconInfoCircleLarge.svg
+++ b/packages/components/src/common/svgs/IconInfoCircleLarge.svg
@@ -1,6 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.251 7.50309C11.9213 7.83302 11.4658 8.02185 11.0008 8.02185C10.5377 8.02185 10.083 7.83302 9.75395 7.50309C9.42465 7.17714 9.23499 6.72203 9.23499 6.25582C9.23499 5.78793 9.42465 5.33156 9.75563 5.00414C10.0772 4.67882 10.5325 4.48999 11.0008 4.48999C11.4677 4.48999 11.9232 4.6784 12.251 5.00644C12.5789 5.33428 12.7668 5.7896 12.7668 6.25603C12.7668 6.72056 12.5786 7.17526 12.251 7.50309ZM11.4704 5.77903C11.2255 5.5322 10.7762 5.5322 10.5363 5.77709C10.4094 5.90361 10.3387 6.07496 10.3387 6.25154C10.3387 6.42638 10.4093 6.59715 10.5324 6.71998C10.6583 6.8465 10.8283 6.91811 11.0009 6.91811C11.1754 6.91811 11.3463 6.8465 11.4704 6.72173C11.5911 6.60006 11.6632 6.42444 11.6632 6.25154C11.6632 6.07457 11.593 5.90244 11.4704 5.77903Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.001 8.68408C11.609 8.68408 12.5001 9.07411 12.5457 9.94506L12.5457 15.9448C12.5459 15.9523 12.5461 15.9603 12.5461 15.9679C12.5461 16.8203 11.8531 17.5137 11.001 17.5137C10.1488 17.5137 9.45576 16.8203 9.45576 15.9679C9.45576 15.9604 9.45597 15.953 9.45618 15.9455L9.45577 9.95025C9.4947 9.12713 10.4055 8.68408 11.001 8.68408ZM10.587 15.6536C10.5916 15.8766 10.7749 16.0568 10.9993 16.0568C11.2237 16.0568 11.407 15.8768 11.4116 15.6538L11.4116 10.5524C11.4026 10.3782 11.2271 10.141 10.9993 10.141C10.7715 10.141 10.5959 10.368 10.587 10.5545V15.6536Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 11C20.5 16.2467 16.2467 20.5 11 20.5C5.75329 20.5 1.5 16.2467 1.5 11C1.5 5.75329 5.75329 1.5 11 1.5C16.2467 1.5 20.5 5.75329 20.5 11ZM19.05 11C19.05 15.4459 15.4459 19.05 11 19.05C6.55411 19.05 2.95 15.4459 2.95 11C2.95 6.55411 6.55411 2.95 11 2.95C15.4459 2.95 19.05 6.55411 19.05 11Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M13.365 8.185c-.36.36-.857.566-1.364.566a1.935 1.935 0 0 1-1.926-1.926A1.923 1.923 0 0 1 12 4.899c.51 0 1.006.205 1.364.563.357.357.563.854.563 1.363 0 .507-.206 1.003-.563 1.36Zm-.852-1.88c-.267-.27-.757-.27-1.019-.003a.726.726 0 0 0 .507 1.245.728.728 0 0 0 .512-1.243Zm-.512 3.169c.663 0 1.635.425 1.685 1.375v6.571a1.687 1.687 0 0 1-3.371-.001v-6.564c.043-.898 1.036-1.381 1.686-1.381Zm-.452 7.603a.45.45 0 0 0 .9 0v-5.565c-.01-.19-.201-.45-.45-.45-.248 0-.44.248-.45.452v5.563Z"/>
+  <path fill-rule="evenodd" d="M22.364 12c0 5.724-4.64 10.364-10.364 10.364-5.724 0-10.364-4.64-10.364-10.364C1.636 6.276 6.276 1.636 12 1.636c5.724 0 10.364 4.64 10.364 10.364Zm-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconInfoCircleSmall.svg b/packages/components/src/common/svgs/IconInfoCircleSmall.svg
index adf17b4c2..c19f92f8d 100644
--- a/packages/components/src/common/svgs/IconInfoCircleSmall.svg
+++ b/packages/components/src/common/svgs/IconInfoCircleSmall.svg
@@ -1,4 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6 7C12.6 10.0928 10.0928 12.6 7 12.6C3.90721 12.6 1.4 10.0928 1.4 7C1.4 3.90721 3.90721 1.4 7 1.4C10.0928 1.4 12.6 3.90721 12.6 7ZM14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM6.09998 4.24998C6.09998 3.75292 6.50292 3.34998 6.99998 3.34998C7.49703 3.34998 7.89998 3.75292 7.89998 4.24998C7.89998 4.74703 7.49703 5.14998 6.99998 5.14998C6.50292 5.14998 6.09998 4.74703 6.09998 4.24998ZM7.79988 9.84998C7.79988 10.2918 7.44171 10.65 6.99988 10.65C6.55805 10.65 6.19988 10.2918 6.19988 9.84998V6.94998C6.19988 6.50815 6.55805 6.14998 6.99988 6.14998C7.44171 6.14998 7.79988 6.50815 7.79988 6.94998L7.79988 9.84998Z" />
-</svg>
-    
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M14.4 8A6.4 6.4 0 1 1 1.6 8a6.4 6.4 0 0 1 12.8 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM6.971 4.857a1.029 1.029 0 1 1 2.058 0 1.029 1.029 0 0 1-2.058 0Zm1.943 6.4a.914.914 0 1 1-1.828 0V7.943a.914.914 0 1 1 1.828 0v3.314Z" />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconInfoSpeechBubbleLarge.svg b/packages/components/src/common/svgs/IconInfoSpeechBubbleLarge.svg
index cc2003107..36ae2b110 100644
--- a/packages/components/src/common/svgs/IconInfoSpeechBubbleLarge.svg
+++ b/packages/components/src/common/svgs/IconInfoSpeechBubbleLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0114 4.40281C21.5156 8.12497 21.4859 13.9208 17.9837 17.6064L17.8143 17.7803C16.0177 19.5902 13.5753 20.6134 11.0238 20.625C9.45245 20.6238 7.90522 20.2391 6.51666 19.5044C5.34837 20.2912 3.92766 20.6129 2.53393 20.4062C2.08774 20.3277 1.74544 19.9669 1.69092 19.5176C1.62874 19.0877 1.85883 18.6686 2.25514 18.4898C2.82703 18.1777 3.29012 17.6989 3.58272 17.1172C0.271344 13.117 0.736238 7.21328 4.63301 3.77947C8.52979 0.345665 14.4515 0.621575 18.0114 4.40281ZM5.4612 4.89192C2.13008 7.92749 1.83533 13.0649 4.79745 16.4608L5.25546 16.8056L5.02977 17.2896C4.71912 17.9908 4.2672 18.6206 3.7022 19.1397C4.57149 19.0564 5.39969 18.73 6.09183 18.1981L6.54985 17.8533L6.92821 18.2047C10.1118 20.0253 14.1047 19.5401 16.7575 17.0344L16.9182 16.8785C20.1076 13.6946 20.168 8.54918 17.0542 5.29148C13.9404 2.03379 8.79232 1.85636 5.4612 4.89192ZM9.71397 9.52218L9.85551 9.5314H11.7008C12.5231 9.52403 13.1967 10.1821 13.2076 11.0035V11.0234C13.2025 11.3096 13.1804 11.5952 13.1413 11.8788L13.0882 12.2169C12.9819 12.9198 12.8757 13.6559 12.7629 14.319C13.0749 14.3699 13.3566 14.5354 13.5528 14.7831C13.811 15.1054 13.9043 15.5295 13.805 15.9303V15.9833C13.7402 16.2416 13.6177 16.482 13.4466 16.6862C12.9416 17.357 12.1619 17.7659 11.3225 17.8002H11.2826C10.9577 17.8087 10.6327 17.782 10.3135 17.7206C9.21772 17.3965 8.50357 16.3444 8.60759 15.2075C8.65405 14.75 8.70715 14.2991 8.78017 13.8813C8.85319 13.311 8.93948 12.7408 9.02577 12.1639C8.51327 11.8955 8.22006 11.3387 8.28897 10.7648C8.33928 10.1398 8.81093 9.63031 9.43068 9.5314C9.57195 9.51757 9.71424 9.51757 9.85551 9.5314L9.71397 9.52218ZM9.78249 10.6587C9.70758 10.6489 9.63171 10.6489 9.5568 10.6587C9.49694 10.6604 9.44022 10.6858 9.39913 10.7294C9.35805 10.7729 9.33597 10.8309 9.33775 10.8907C9.3151 11.0186 9.38395 11.1452 9.5037 11.1958C9.60816 11.2255 9.71465 11.2477 9.82232 11.2621C10.0746 11.2952 10.1542 11.408 10.1542 11.713V11.8456C10.0414 12.5883 9.93516 13.3243 9.83559 14.0603C9.76921 14.4781 9.70947 14.9157 9.66965 15.3335C9.6311 15.9139 9.9756 16.4516 10.5193 16.6597C10.7517 16.6982 10.9874 16.7138 11.2229 16.7061C11.751 16.6916 12.242 16.4316 12.5505 16.0032C12.6177 15.9198 12.6653 15.8223 12.6899 15.7181C12.7231 15.5722 12.6501 15.4661 12.5438 15.4661H12.4708C12.3713 15.5125 12.285 15.5788 12.192 15.6319C12.0753 15.6855 11.9528 15.7255 11.827 15.7512H11.7938C11.6743 15.7512 11.5747 15.665 11.5349 15.4993C11.5142 15.3652 11.5142 15.2288 11.5349 15.0948C11.5614 14.8096 11.6079 14.5378 11.6477 14.2526C11.7871 13.4171 11.9132 12.5618 12.0394 11.7262C12.0697 11.5064 12.0875 11.285 12.0925 11.0632C12.0792 10.7913 11.9398 10.6587 11.7141 10.6587H9.78249ZM11.442 4.51839C12.578 4.58161 13.4667 5.52028 13.4667 6.65688C13.4667 7.79348 12.578 8.73215 11.442 8.79536C10.6487 8.83951 9.89606 8.44184 9.48612 7.762C9.07619 7.08216 9.07619 6.2316 9.48612 5.55176C9.89606 4.87192 10.6487 4.47425 11.442 4.51839ZM11.442 5.64566C11.0283 5.63486 10.6495 5.8758 10.4843 6.25475C10.3191 6.6337 10.4005 7.07488 10.6902 7.37005C10.9798 7.66521 11.4197 7.75534 11.8023 7.59789C12.1849 7.44044 12.4336 7.06688 12.431 6.65356C12.4347 6.10313 11.9929 5.65294 11.442 5.64566Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M19.649 4.803a10.481 10.481 0 0 1-.03 14.404l-.185.19a10.505 10.505 0 0 1-7.408 3.103 10.53 10.53 0 0 1-4.917-1.223 6.16 6.16 0 0 1-4.345.984 1.122 1.122 0 0 1-.92-.969 1.063 1.063 0 0 1 .616-1.121 3.495 3.495 0 0 0 1.448-1.498 10.481 10.481 0 0 1 1.146-14.55C9.305.377 15.765.678 19.65 4.803Zm-13.691.534a9.036 9.036 0 0 0-.724 12.62l.5.376-.247.528a6.09 6.09 0 0 1-1.448 2.019 5.07 5.07 0 0 0 2.607-1.028l.5-.376.412.384a9.066 9.066 0 0 0 10.723-1.277l.175-.17a9.036 9.036 0 0 0 .149-12.64 9.058 9.058 0 0 0-12.647-.436Zm4.64 5.05.153.01h2.014a1.628 1.628 0 0 1 1.643 1.607v.021c-.005.313-.03.624-.072.934l-.058.369c-.116.766-.232 1.57-.355 2.293.34.055.648.236.862.506.282.352.383.814.275 1.252v.057a1.91 1.91 0 0 1-.391.767 3.056 3.056 0 0 1-2.317 1.215h-.044c-.354.01-.709-.02-1.057-.086a2.611 2.611 0 0 1-1.86-2.742c.05-.5.108-.991.187-1.447.08-.622.174-1.244.268-1.873a1.517 1.517 0 0 1-.803-1.527 1.484 1.484 0 0 1 1.245-1.345c.154-.015.31-.015.463 0l-.154-.01Zm.074 1.24a.957.957 0 0 0-.246 0 .246.246 0 0 0-.24.254.305.305 0 0 0 .182.333c.114.032.23.056.347.072.275.036.362.16.362.492v.144c-.123.81-.239 1.614-.347 2.417a22.82 22.82 0 0 0-.181 1.388c-.042.634.334 1.22.927 1.447.253.042.51.06.767.05a1.847 1.847 0 0 0 1.448-.766.782.782 0 0 0 .152-.311c.037-.16-.043-.275-.159-.275h-.08c-.108.05-.202.123-.304.181a1.84 1.84 0 0 1-.398.13h-.036c-.13 0-.239-.094-.282-.275a1.445 1.445 0 0 1 0-.441c.029-.311.08-.608.123-.919.152-.911.29-1.844.427-2.756.033-.24.052-.481.058-.723-.015-.297-.167-.441-.413-.441h-2.107Zm1.81-6.698a2.338 2.338 0 1 1-2.133 3.539 2.334 2.334 0 0 1 2.133-3.539Zm0 1.23a1.108 1.108 0 0 0-.82 1.881 1.109 1.109 0 0 0 1.9-.782 1.093 1.093 0 0 0-1.08-1.1Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconLifeRingSmall.svg b/packages/components/src/common/svgs/IconLifeRingSmall.svg
old mode 100755
new mode 100644
index 9ae0e41b4..746614eee
--- a/packages/components/src/common/svgs/IconLifeRingSmall.svg
+++ b/packages/components/src/common/svgs/IconLifeRingSmall.svg
@@ -1,3 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM9.76339 11.8142C8.94969 12.2823 8.00611 12.55 7 12.55C5.99391 12.55 5.05034 12.2823 4.23665 11.8142L5.81117 10.2397C6.18179 10.3757 6.58222 10.45 7 10.45C7.41779 10.45 7.81824 10.3757 8.18886 10.2397L9.76339 11.8142ZM11.8141 9.76366C12.2822 8.94989 12.55 8.00622 12.55 7C12.55 5.99391 12.2823 5.05034 11.8142 4.23665L10.2397 5.81118C10.3757 6.18179 10.45 6.58222 10.45 7C10.45 7.41791 10.3757 7.81847 10.2396 8.18918L11.8141 9.76366ZM9.76369 2.18597L8.18922 3.76044C7.8185 3.62431 7.41793 3.55 7 3.55C6.58209 3.55 6.18153 3.62431 5.81082 3.76043L4.23634 2.18595C5.05011 1.71777 5.99378 1.45 7 1.45C8.00623 1.45 8.94992 1.71778 9.76369 2.18597ZM2.18579 4.23661C1.71771 5.05032 1.45 5.99389 1.45 7C1.45 8.00623 1.71778 8.94992 2.18597 9.76369L3.76044 8.18922C3.62431 7.8185 3.55 7.41793 3.55 7C3.55 6.58221 3.62426 6.18176 3.76031 5.81114L2.18579 4.23661ZM7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.158-2.498c-.93.535-2.008.84-3.158.84a6.314 6.314 0 0 1-3.158-.84l1.8-1.8c.423.156.88.24 1.358.24.477 0 .935-.084 1.359-.24l1.8 1.8Zm2.344-2.344c.535-.93.84-2.008.84-3.158s-.305-2.228-.84-3.158l-1.8 1.8c.156.423.24.88.24 1.358 0 .478-.084.935-.24 1.36l1.8 1.799Zm-2.344-8.66-1.799 1.8A3.935 3.935 0 0 0 8 4.058c-.478 0-.935.084-1.36.24l-1.798-1.8A6.314 6.314 0 0 1 8 1.658c1.15 0 2.229.305 3.159.84Zm-8.66 2.344A6.314 6.314 0 0 0 1.658 8c0 1.15.305 2.229.84 3.159l1.8-1.8A3.935 3.935 0 0 1 4.058 8c0-.477.084-.935.24-1.359l-1.8-1.8ZM8 10.286a2.286 2.286 0 1 0 0-4.572 2.286 2.286 0 0 0 0 4.572Z" />
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconLightBulbLarge.svg b/packages/components/src/common/svgs/IconLightBulbLarge.svg
old mode 100755
new mode 100644
index 2a41676b1..ff75da994
--- a/packages/components/src/common/svgs/IconLightBulbLarge.svg
+++ b/packages/components/src/common/svgs/IconLightBulbLarge.svg
@@ -1,4 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2709 2.01105C14.334 2.14301 16.8327 4.56223 16.9932 7.54517C17.0622 8.91752 16.6023 10.288 15.7079 11.3693C15.0222 12.1941 14.5559 12.9918 14.2604 13.8243L14.2526 13.8466V16.7173C14.2526 17.074 14.032 17.3618 13.7291 17.4831C13.6558 18.0829 13.1102 19.9528 12.5437 19.9528C12.4763 19.9951 9.53677 19.9951 9.45021 19.9528C8.83403 19.9528 8.33829 18.094 8.26477 17.503C7.95889 17.3763 7.74102 17.0739 7.74102 16.7385V13.8466L7.73363 13.8252C7.43814 12.9929 6.97189 12.1941 6.28457 11.3467C5.43686 10.3102 5.00008 9.07256 5.00008 7.76957C5.00008 6.17739 5.66732 4.69761 6.85699 3.59695C8.0492 2.49386 9.62931 1.94524 11.2709 2.01105ZM14.3555 10.3102C14.9958 9.5351 15.3267 8.58241 15.3069 7.56723C15.2021 5.48973 13.4275 3.75278 11.2269 3.65287C10.0234 3.59297 8.9041 4.01149 8.05409 4.7889C7.20351 5.58783 6.73117 6.64049 6.73117 7.76954C6.73117 8.70304 7.04001 9.5753 7.63931 10.3112C8.27015 11.0804 8.74473 11.8514 9.09863 12.6244H12.8938C13.2487 11.8328 13.7251 11.0786 14.3555 10.3102ZM12.5437 15.8962V14.288H9.45021V15.8962H12.5437ZM10.2625 18.4154C10.3053 18.4891 11.6591 18.4762 11.7369 18.4154C11.8384 18.2422 11.9466 17.7576 11.9895 17.5385H10.0059C10.0486 17.752 10.1616 18.2418 10.2625 18.4154Z" />
-    <path d="M11.9076 5.93286C11.9076 5.4315 11.5013 5.20477 10.9999 5.20477C9.58878 5.20477 8.4419 6.35166 8.4419 7.76276C8.4419 8.26412 8.73119 8.67043 9.23255 8.67043C9.69214 8.67043 10.0718 8.32902 10.1319 7.88594L10.1402 7.76276C10.1402 7.39092 10.533 6.90182 10.8904 6.84861L10.9999 6.84054C11.5013 6.84054 11.9076 6.43423 11.9076 5.93286Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M12.296 2.194c3.341.144 6.067 2.783 6.242 6.037a6.09 6.09 0 0 1-1.402 4.172c-.748.9-1.257 1.77-1.58 2.678l-.008.024v3.132c0 .39-.24.703-.57.835-.08.655-.676 2.695-1.294 2.695-.073.046-3.28.046-3.375 0-.672 0-1.213-2.028-1.293-2.673a.919.919 0 0 1-.571-.834v-3.155l-.008-.023c-.323-.908-.831-1.78-1.581-2.704a6.097 6.097 0 0 1-1.401-3.902c0-1.737.728-3.351 2.025-4.552 1.3-1.203 3.025-1.802 4.816-1.73Zm3.365 9.053a4.508 4.508 0 0 0 1.037-2.992c-.114-2.266-2.05-4.161-4.45-4.27a4.736 4.736 0 0 0-3.462 1.24c-.928.87-1.443 2.02-1.443 3.25 0 1.02.337 1.97.99 2.774.689.839 1.207 1.68 1.593 2.523h4.14c.387-.863.907-1.686 1.595-2.524Zm-1.977 6.094v-1.754H10.31v1.754h3.375Zm-2.489 2.748c.047.081 1.524.067 1.609 0 .11-.188.229-.717.275-.956h-2.164c.047.233.17.767.28.957Z"/>
+  <path d="M12.99 6.472c0-.547-.443-.794-.99-.794a2.793 2.793 0 0 0-2.79 2.79c0 .547.315.99.862.99a.99.99 0 0 0 .981-.855l.01-.135c0-.405.428-.939.817-.997l.12-.009a.99.99 0 0 0 .99-.99Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconLightBulbSmall.svg b/packages/components/src/common/svgs/IconLightBulbSmall.svg
index 010684b2f..a5ee1162e 100644
--- a/packages/components/src/common/svgs/IconLightBulbSmall.svg
+++ b/packages/components/src/common/svgs/IconLightBulbSmall.svg
@@ -1,6 +1,4 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M7.00097028,-1.42108547e-14 C9.68003034,-1.42108547e-14 11.8519406,2.17191022 11.8519406,4.85097028 C11.8519406,6.04127256 11.4207184,7.1643906 10.6515251,8.04257665 L10.6515251,8.04257665 L10.5033626,8.21976554 C10.0048935,8.84247722 9.47271126,9.76743637 9.27374963,10.4374536 L9.27374963,10.4374536 L9.272,10.438 L9.27106256,12.4585962 C9.27080342,12.5399643 9.25264469,12.6200514 9.21824977,12.6931527 L9.17850439,12.763714 L8.52013122,13.7532882 C8.41784827,13.9074037 8.24510245,14 8.05997086,14 L8.05997086,14 L5.94170105,14 C5.75686993,14 5.58419393,13.9074411 5.48161765,13.753404 L5.48161765,13.753404 L4.82329153,12.7639 C4.76280126,12.6733374 4.73060873,12.5671288 4.73060874,12.4582576 L4.73060874,12.4582576 L4.72988908,10.4612438 C4.50338136,9.69027093 3.8852793,8.65240189 3.3506742,8.04229667 L3.3506742,8.04229667 L3.19102125,7.85051501 C2.52190662,7.00374926 2.15,5.95638374 2.15,4.85097028 C2.15,2.19734568 4.26885996,-1.42108547e-14 7.00097028,-1.42108547e-14 Z M7.00097028,1.53511718 C5.18159455,1.53511718 3.68141121,2.99168961 3.68645989,4.85061362 C3.68880637,5.65858472 3.97625097,6.42703842 4.5051992,7.03041023 L4.5051992,7.03041023 L4.73184341,7.29986639 C5.46098056,8.20344151 5.92884144,9.15630838 6.20019103,10.0208408 L6.134,9.824 L7.86651891,9.82538064 C8.14649963,9.01177023 8.598211,8.13257527 9.27145429,7.29849108 L9.49700769,7.03041286 C10.0256927,6.42712659 10.3168234,5.65317637 10.3168234,4.85097028 C10.3168234,3.02269604 8.82924451,1.53511718 7.00097028,1.53511718 Z M7.24834344,2.9228631 C7.67473712,2.9228631 8.02028808,3.26841407 8.02028808,3.69480774 C8.02028808,4.12120141 7.67473712,4.46675238 7.24834344,4.46675238 L7.24834344,4.46675238 L7.15524077,4.47362199 C6.85128953,4.51886945 6.61675238,4.78210496 6.61675238,5.09834344 L6.61675238,5.09834344 L6.60970659,5.20310445 C6.55859914,5.57992929 6.23566861,5.87028808 5.84480774,5.87028808 C5.41841407,5.87028808 5.0728631,5.52473712 5.0728631,5.09834344 C5.0728631,3.89825071 6.04825071,2.9228631 7.24834344,2.9228631 Z"
-        id="Combined-Shape"></path>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M8.001 0a5.544 5.544 0 0 1 4.172 9.192l-.17.202c-.569.712-1.177 1.769-1.404 2.534l-.002.001-.002 2.31a.635.635 0 0 1-.06.268l-.045.08-.753 1.131a.63.63 0 0 1-.526.282h-2.42a.632.632 0 0 1-.526-.282l-.753-1.13a.628.628 0 0 1-.106-.35v-2.282c-.26-.881-.966-2.068-1.577-2.765l-.182-.219a5.51 5.51 0 0 1-1.19-3.428A5.524 5.524 0 0 1 8.001 0Zm0 1.754a3.773 3.773 0 0 0-3.788 3.79c.003.923.331 1.801.936 2.49l.259.309a9.524 9.524 0 0 1 1.678 3.11l-.076-.226 1.98.002c.32-.93.837-1.935 1.606-2.888l.258-.306a3.78 3.78 0 0 0 .937-2.491c0-2.09-1.7-3.79-3.79-3.79Zm.283 1.586a.882.882 0 1 1 0 1.765l-.107.008a.724.724 0 0 0-.615.714l-.008.12a.882.882 0 0 1-1.756-.12A2.488 2.488 0 0 1 8.284 3.34Z" />
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconLinesDashed3Solid1Small.svg b/packages/components/src/common/svgs/IconLinesDashed3Solid1Small.svg
index 759ab5697..b2cbea3ab 100644
--- a/packages/components/src/common/svgs/IconLinesDashed3Solid1Small.svg
+++ b/packages/components/src/common/svgs/IconLinesDashed3Solid1Small.svg
@@ -1,16 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M7.20148 9.11612C7.67842 9.11612 8.06505 8.72949 8.06505 8.25255C8.06505 7.77562 7.67842 7.38899 7.20148 7.38899H3.72763C3.2507 7.38899 2.86407 7.77562 2.86407 8.25255C2.86407 8.72949 3.2507 9.11612 3.72763 9.11612H7.20148Z" />
-    <path
-        d="M10.8041 9.11612C11.281 9.11612 11.6676 8.72949 11.6676 8.25255C11.6676 7.77562 11.281 7.38899 10.8041 7.38899H9.3302C8.85327 7.38899 8.46664 7.77562 8.46664 8.25255C8.46664 8.72949 8.85327 9.11612 9.3302 9.11612H10.8041Z" />
-    <path
-        d="M3.60048 6.6281C4.07741 6.6281 4.46404 6.24147 4.46404 5.76454C4.46404 5.2876 4.07741 4.90097 3.60048 4.90097H2.12662C1.64969 4.90097 1.26306 5.2876 1.26306 5.76454C1.26306 6.24147 1.64969 6.6281 2.12662 6.6281H3.60048Z" />
-    <path
-        d="M9.20357 6.62211C9.6805 6.62211 10.0671 6.23548 10.0671 5.75854C10.0671 5.28161 9.6805 4.89498 9.20357 4.89498H5.72971C5.25278 4.89498 4.86615 5.28161 4.86615 5.75854C4.86615 6.23548 5.25278 6.62211 5.72971 6.62211H9.20357Z" />
-    <path
-        d="M5.07308 4.14008C5.55001 4.14008 5.93664 3.75345 5.93664 3.27652C5.93664 2.79959 5.55001 2.41296 5.07308 2.41296H3.59923C3.12229 2.41296 2.73566 2.79959 2.73566 3.27652C2.73566 3.75345 3.12229 4.14008 3.59923 4.14008H5.07308Z" />
-    <path
-        d="M10.6721 4.14008C11.149 4.14008 11.5356 3.75345 11.5356 3.27652C11.5356 2.79959 11.149 2.41296 10.6721 2.41296H7.19823C6.72129 2.41296 6.33466 2.79959 6.33466 3.27652C6.33466 3.75345 6.72129 4.14008 7.19823 4.14008H10.6721Z" />
-    <path
-        d="M12.3586 11.6161C12.8356 11.6161 13.2222 11.2295 13.2222 10.7526C13.2222 10.2756 12.8356 9.88899 12.3586 9.88899H1.8472C1.37027 9.88899 0.983643 10.2756 0.983643 10.7526C0.983643 11.2295 1.37027 11.6161 1.8472 11.6161H12.3586Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.23 10.418a.987.987 0 1 0 0-1.973H4.26a.987.987 0 1 0 0 1.973h3.97Zm4.118 0a.987.987 0 1 0 0-1.973h-1.685a.987.987 0 1 0 0 1.973h1.684ZM4.115 7.575a.987.987 0 0 0 0-1.974H2.43a.987.987 0 1 0 0 1.974h1.685Zm6.403-.007a.987.987 0 0 0 0-1.974h-3.97a.987.987 0 0 0 0 1.974h3.97Zm-4.72-2.836a.987.987 0 0 0 0-1.974H4.113a.987.987 0 0 0 0 1.974h1.685Zm6.399 0a.987.987 0 0 0 0-1.974h-3.97a.987.987 0 1 0 0 1.974h3.97Zm1.927 8.544a.987.987 0 0 0 0-1.974H2.111a.987.987 0 0 0 0 1.974h12.013Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconLinesHorizontal3Large.svg b/packages/components/src/common/svgs/IconLinesHorizontal3Large.svg
new file mode 100644
index 000000000..c07eb70fd
--- /dev/null
+++ b/packages/components/src/common/svgs/IconLinesHorizontal3Large.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M23.006 12.206c0 .802-.65 1.452-1.451 1.452H2.172a1.452 1.452 0 0 1 0-2.904h19.383c.801 0 1.451.65 1.451 1.452Zm0-6.983a1.45 1.45 0 0 1-1.451 1.451H2.172a1.452 1.452 0 0 1 0-2.903h19.383c.801 0 1.451.65 1.451 1.452Zm0 13.966c0 .802-.65 1.452-1.451 1.452H2.172a1.452 1.452 0 0 1 0-2.903h19.383c.801 0 1.451.65 1.451 1.451Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconLinesHorizontal3Small.svg b/packages/components/src/common/svgs/IconLinesHorizontal3Small.svg
new file mode 100644
index 000000000..9e6e82ea0
--- /dev/null
+++ b/packages/components/src/common/svgs/IconLinesHorizontal3Small.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M15.337 8.137a.968.968 0 0 1-.967.968H1.448a.968.968 0 1 1 0-1.935H14.37c.534 0 .967.433.967.967Zm0-4.655a.968.968 0 0 1-.967.968H1.448a.968.968 0 1 1 0-1.936H14.37c.534 0 .967.434.967.968Zm0 9.31a.968.968 0 0 1-.967.968H1.448a.968.968 0 1 1 0-1.935H14.37c.534 0 .967.433.967.968Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconLinesHorizontalLarge.svg b/packages/components/src/common/svgs/IconLinesHorizontalLarge.svg
deleted file mode 100755
index 4589e342b..000000000
--- a/packages/components/src/common/svgs/IconLinesHorizontalLarge.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.0888 11.1888C21.0888 11.9236 20.4931 12.5194 19.7583 12.5194L1.99084 12.5194C1.25599 12.5194 0.660265 11.9236 0.660265 11.1888C0.660265 10.4539 1.25599 9.85822 1.99084 9.85822H19.7583C20.4931 9.85822 21.0888 10.4539 21.0888 11.1888ZM21.0888 4.78764C21.0888 5.5225 20.4931 6.11822 19.7583 6.11822L1.99084 6.11822C1.25599 6.11822 0.660265 5.5225 0.660265 4.78764C0.660265 4.05279 1.25599 3.45707 1.99084 3.45707L19.7583 3.45707C20.4931 3.45707 21.0888 4.05279 21.0888 4.78764ZM21.0888 17.5899C21.0888 18.3248 20.4931 18.9205 19.7583 18.9205H1.99084C1.25599 18.9205 0.660265 18.3248 0.660265 17.5899C0.660265 16.8551 1.25599 16.2594 1.99084 16.2594H19.7583C20.4931 16.2594 21.0888 16.8551 21.0888 17.5899Z" />
-</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconLinesHorizontalSmall.svg b/packages/components/src/common/svgs/IconLinesHorizontalSmall.svg
deleted file mode 100644
index c4384ec39..000000000
--- a/packages/components/src/common/svgs/IconLinesHorizontalSmall.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M6.92018692,0.620186916 C7.38782241,0.620186916 7.76691589,0.999280389 7.76691589,1.46691589 L7.76691589,12.7734579 C7.76691589,13.2410934 7.38782241,13.6201869 6.92018692,13.6201869 C6.45255142,13.6201869 6.07345794,13.2410934 6.07345794,12.7734579 L6.07345794,1.46691589 C6.07345794,0.999280389 6.45255142,0.620186916 6.92018692,0.620186916 Z M2.84672897,0.620186916 C3.31436447,0.620186916 3.69345794,0.999280389 3.69345794,1.46691589 L3.69345794,12.7734579 C3.69345794,13.2410934 3.31436447,13.6201869 2.84672897,13.6201869 C2.37909347,13.6201869 2,13.2410934 2,12.7734579 L2,1.46691589 C2,0.999280389 2.37909347,0.620186916 2.84672897,0.620186916 Z M10.9936449,0.620186916 C11.4612804,0.620186916 11.8403738,0.999280389 11.8403738,1.46691589 L11.8403738,12.7734579 C11.8403738,13.2410934 11.4612804,13.6201869 10.9936449,13.6201869 C10.5260094,13.6201869 10.1469159,13.2410934 10.1469159,12.7734579 L10.1469159,1.46691589 C10.1469159,0.999280389 10.5260094,0.620186916 10.9936449,0.620186916 Z"
-        id="Combined-Shape"
-        transform="translate(6.920187, 7.120187) rotate(90.000000) translate(-6.920187, -7.120187) "></path>
-</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconLinkSmall.svg b/packages/components/src/common/svgs/IconLinkSmall.svg
index 105c6824d..9cd67a42d 100644
--- a/packages/components/src/common/svgs/IconLinkSmall.svg
+++ b/packages/components/src/common/svgs/IconLinkSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M8.58600862,5.41405876 C9.92797963,6.75742235 9.9095617,8.91117498 8.59409454,10.2339419 C8.59162384,10.2366372 8.58870393,10.2395571 8.58600862,10.2422525 L7.07663657,11.7516245 C5.7453794,13.0828817 3.57949789,13.082702 2.24844287,11.7516245 C0.917185709,10.420592 0.917185709,8.25446337 2.24844287,6.92343081 L3.08187679,6.08999689 C3.30289199,5.8689817 3.68351429,6.01587595 3.69492442,6.32821713 C3.70947908,6.72626909 3.7808598,7.1261853 3.91257048,7.51237791 C3.95717782,7.64314523 3.92530581,7.78779338 3.82760092,7.88549827 L3.53365521,8.17944399 C2.9041662,8.80893299 2.88442308,9.83391341 3.50771288,10.4695567 C4.13715696,11.1114666 5.17175064,11.1152849 5.80602382,10.4810118 L7.31539587,8.97186431 C7.94859092,8.33866926 7.94594053,7.31521618 7.31539587,6.68467151 C7.2322681,6.60170097 7.14853389,6.53723821 7.08312777,6.49220412 C6.9893041,6.42777542 6.93145021,6.32279398 6.92709194,6.20906209 C6.91819742,5.97171783 7.00229101,5.72714116 7.18983947,5.5395927 L7.66273113,5.06667858 C7.78673772,4.94267199 7.98127152,4.9274435 8.12506616,5.02779877 C8.28974238,5.14278721 8.44398433,5.27203869 8.58600862,5.41405876 Z M11.7515347,2.24837549 C10.4204796,0.917298014 8.25459813,0.917118327 6.92334097,2.24837549 L5.41396892,3.75774754 C5.41127361,3.76044285 5.40835369,3.76336277 5.405883,3.76605807 C4.0904383,5.08882502 4.07199791,7.24257765 5.41396892,8.58594124 C5.55598482,8.72795489 5.71021942,8.85719899 5.87488892,8.97217876 C6.01868356,9.07253404 6.21323982,9.05728309 6.33722395,8.93329896 L6.8101156,8.46038484 C6.99766407,8.27283638 7.08175765,8.02825971 7.07286314,7.79091545 C7.06850486,7.67718356 7.01065098,7.57220212 6.91682731,7.50777342 C6.85142119,7.46273933 6.76768698,7.39827657 6.68455921,7.31530602 C6.05401454,6.68476136 6.05136416,5.66130828 6.68455921,5.02811323 L8.19393126,3.51896578 C8.82820444,2.88469261 9.86277566,2.88851096 10.4922422,3.53042084 C11.115532,4.16606413 11.0958113,5.19104455 10.4662999,5.82053355 L10.1723542,6.11447927 C10.0746493,6.21218416 10.0427773,6.35683231 10.0873846,6.48759963 C10.2190953,6.87379224 10.290476,7.27370845 10.3050307,7.67176041 C10.3164632,7.98410159 10.6970631,8.13099584 10.9180783,7.90998064 L11.7515122,7.07654673 C13.0827918,5.74553663 13.0827918,3.57940805 11.7515347,2.24837549 L11.7515347,2.24837549 Z"
-        id="Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M9.813 6.188a3.9 3.9 0 0 1 0 5.517L8.088 13.43a3.906 3.906 0 0 1-5.518 0 3.906 3.906 0 0 1 0-5.518l.952-.952a.41.41 0 0 1 .7.272c.017.455.099.912.25 1.354a.413.413 0 0 1-.098.426l-.336.336c-.719.72-.742 1.89-.03 2.617a1.85 1.85 0 0 0 2.627.013l1.725-1.724a1.848 1.848 0 0 0-.265-2.834.412.412 0 0 1-.178-.324c-.01-.271.086-.55.3-.765l.54-.54a.412.412 0 0 1 .529-.045c.188.131.364.28.527.441ZM13.43 2.57a3.906 3.906 0 0 0-5.518 0L6.187 4.295a3.9 3.9 0 0 0 .527 5.96.412.412 0 0 0 .529-.045l.54-.541c.214-.214.31-.494.3-.765a.412.412 0 0 0-.178-.324 1.848 1.848 0 0 1-.265-2.834l1.724-1.724a1.85 1.85 0 0 1 2.627.013c.713.726.69 1.898-.03 2.617l-.335.336a.413.413 0 0 0-.098.426c.151.442.232.899.25 1.354a.41.41 0 0 0 .7.272l.952-.953a3.906 3.906 0 0 0 0-5.517Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconListSmall.svg b/packages/components/src/common/svgs/IconListSmall.svg
index b082f3fb9..85355f566 100644
--- a/packages/components/src/common/svgs/IconListSmall.svg
+++ b/packages/components/src/common/svgs/IconListSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M1.925,9.825 C2.64297017,9.825 3.225,10.4070298 3.225,11.125 C3.225,11.8429702 2.64297017,12.425 1.925,12.425 C1.20702983,12.425 0.625,11.8429702 0.625,11.125 C0.625,10.4070298 1.20702983,9.825 1.925,9.825 Z M12.6363636,10.2 C12.8660135,10.2 13.0647086,10.3473858 13.1431695,10.5703743 L13.166782,10.6573987 L13.175,10.75 L13.175,11.5 C13.175,11.7285411 13.0372582,11.929229 12.8237205,12.0129727 L12.7277443,12.0414433 L12.6363636,12.05 L5.36363636,12.05 C5.13398653,12.05 4.93529145,11.9026142 4.85683049,11.6796257 L4.83321799,11.5926013 L4.825,11.5 L4.825,10.75 C4.825,10.5214589 4.96274176,10.320771 5.17627952,10.2370273 L5.27225567,10.2085567 L5.36363636,10.2 L12.6363636,10.2 Z M1.925,5.825 C2.64297017,5.825 3.225,6.40702983 3.225,7.125 C3.225,7.84297017 2.64297017,8.425 1.925,8.425 C1.20702983,8.425 0.625,7.84297017 0.625,7.125 C0.625,6.40702983 1.20702983,5.825 1.925,5.825 Z M12.6363636,6.2 C12.8660135,6.2 13.0647086,6.34738578 13.1431695,6.57037429 L13.166782,6.65739866 L13.175,6.75 L13.175,7.5 C13.175,7.72854114 13.0372582,7.92922896 12.8237205,8.01297269 L12.7277443,8.04144328 L12.6363636,8.05 L5.36363636,8.05 C5.13398653,8.05 4.93529145,7.90261422 4.85683049,7.67962571 L4.83321799,7.59260134 L4.825,7.5 L4.825,6.75 C4.825,6.52145886 4.96274176,6.32077104 5.17627952,6.23702731 L5.27225567,6.20855672 L5.36363636,6.2 L12.6363636,6.2 Z M1.925,1.825 C2.64297017,1.825 3.225,2.40702983 3.225,3.125 C3.225,3.84297017 2.64297017,4.425 1.925,4.425 C1.20702983,4.425 0.625,3.84297017 0.625,3.125 C0.625,2.40702983 1.20702983,1.825 1.925,1.825 Z M12.6363636,2.2 C12.8660135,2.2 13.0647086,2.34738578 13.1431695,2.57037429 L13.166782,2.65739866 L13.175,2.75 L13.175,3.5 C13.175,3.72854114 13.0372582,3.92922896 12.8237205,4.01297269 L12.7277443,4.04144328 L12.6363636,4.05 L5.36363636,4.05 C5.13398653,4.05 4.93529145,3.90261422 4.85683049,3.67962571 L4.83321799,3.59260134 L4.825,3.5 L4.825,2.75 C4.825,2.52145886 4.96274176,2.32077104 5.17627952,2.23702731 L5.27225567,2.20855672 L5.36363636,2.2 L12.6363636,2.2 Z"
-        id="Combined-Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M2.2 11.229a1.486 1.486 0 1 1 0 2.971 1.486 1.486 0 0 1 0-2.971Zm12.242.428c.262 0 .49.169.579.423l.027.1.01.106v.857c0 .261-.158.49-.402.586l-.11.033-.104.01H6.13a.615.615 0 0 1-.58-.424l-.026-.1-.01-.105v-.857c0-.261.158-.49.402-.586l.11-.033.104-.01h8.312Zm-12.242-5a1.486 1.486 0 1 1 0 2.972 1.486 1.486 0 0 1 0-2.972Zm12.242.429c.262 0 .49.168.579.423l.027.1.01.105v.857a.627.627 0 0 1-.402.587l-.11.032-.104.01H6.13a.615.615 0 0 1-.58-.423l-.026-.1-.01-.106v-.857c0-.26.158-.49.402-.586l.11-.032.104-.01h8.312Zm-12.242-5a1.486 1.486 0 1 1 0 2.971 1.486 1.486 0 0 1 0-2.971Zm12.242.428c.262 0 .49.169.579.424l.027.099.01.106V4c0 .261-.158.49-.402.586l-.11.033-.104.01H6.13a.615.615 0 0 1-.58-.424l-.026-.1L5.514 4v-.857c0-.261.158-.49.402-.586l.11-.033.104-.01h8.312Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconLoadingLarge.svg b/packages/components/src/common/svgs/IconLoadingLarge.svg
index b0159b813..a4bb41b2e 100644
--- a/packages/components/src/common/svgs/IconLoadingLarge.svg
+++ b/packages/components/src/common/svgs/IconLoadingLarge.svg
@@ -1,39 +1,38 @@
-<svg width="22" height="22" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg">
-	<defs></defs>
-	<path style="opacity: 0.01;" d="M 12.812 17.935 C 12.812 18.399 12.435 18.77 11.971 18.77 C 11.507 18.77 11.132 18.399 11.132 17.935 C 11.132 17.472 11.507 17.094 11.971 17.094 C 12.435 17.094 12.812 17.472 12.812 17.935 Z">
-		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite" />
-		<animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0" />
-	</path>
-	<path style="opacity: 0.01;" d="M 9.44 17.29 C 9.44 17.889 8.956 18.369 8.36 18.369 C 7.762 18.369 7.276 17.889 7.276 17.29 C 7.276 16.692 7.762 16.204 8.36 16.204 C 8.956 16.204 9.44 16.692 9.44 17.29 Z">
-		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite" />
-		<animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.1" />
-	</path>
-	<path style="opacity: 0.01;" d="M 6.56 14.858 C 6.56 15.517 6.027 16.048 5.374 16.048 C 4.715 16.048 4.185 15.517 4.185 14.858 C 4.185 14.201 4.715 13.668 5.374 13.668 C 6.027 13.668 6.56 14.201 6.56 14.858 Z">
-		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite" />
-		<animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.2" />
-	</path>
-	<path style="opacity: 0.01;" d="M 5.559 10.854 C 5.559 11.589 4.964 12.183 4.231 12.183 C 3.495 12.183 2.901 11.589 2.901 10.854 C 2.901 10.12 3.495 9.526 4.231 9.526 C 4.964 9.526 5.559 10.12 5.559 10.854 Z">
-		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite" />
-		<animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.3" />
-	</path>
-	<path style="opacity: 0.01;" d="M 7.529 6.408 C 7.529 7.219 6.869 7.873 6.057 7.873 C 5.248 7.873 4.592 7.219 4.592 6.408 C 4.592 5.598 5.248 4.936 6.057 4.936 C 6.869 4.936 7.529 5.598 7.529 6.408 Z">
-		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite" />
-		<animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.4" />
-	</path>
-	<path style="opacity: 0.01;" d="M 12.19 4.375 C 12.19 5.227 11.505 5.912 10.653 5.912 C 9.802 5.912 9.118 5.227 9.118 4.375 C 9.118 3.527 9.802 2.84 10.653 2.84 C 11.505 2.84 12.19 3.527 12.19 4.375 Z">
-		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite" />
-		<animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.5" />
-	</path>
-	<path style="opacity: 0.01;" d="M 17.357 6.308 C 17.357 7.191 16.641 7.914 15.749 7.914 C 14.865 7.914 14.142 7.191 14.142 6.308 C 14.142 5.415 14.865 4.7 15.749 4.7 C 16.641 4.7 17.357 5.415 17.357 6.308 Z">
-		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite" />
-		<animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.6" />
-	</path>
-	<path style="opacity: 0.01;" d="M 19.467 11.05 C 19.467 11.975 18.713 12.729 17.788 12.729 C 16.861 12.729 16.112 11.975 16.112 11.05 C 16.112 10.123 16.861 9.374 17.788 9.374 C 18.713 9.374 19.467 10.123 19.467 11.05 Z">
-		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite" />
-		<animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.7" />
-	</path>
-	<path style="opacity: 0.01;" d="M 17.371 15.878 C 17.371 16.879 16.558 17.693 15.551 17.693 C 14.55 17.693 13.736 16.879 13.736 15.878 C 13.736 14.874 14.55 14.062 15.551 14.062 C 16.558 14.062 17.371 14.874 17.371 15.878 Z">
-		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite" />
-		<animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.8" />
-	</path>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path style="opacity: 0.01;" d="M 13.867 20.178 C 13.867 20.71 13.436 21.136 12.904 21.136 C 12.372 21.136 11.94 20.71 11.94 20.178 C 11.94 19.647 12.372 19.213 12.904 19.213 C 13.436 19.213 13.867 19.647 13.867 20.178 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 10 19.438 C 10 20.125 9.446 20.675 8.762 20.675 C 8.075 20.675 7.518 20.125 7.518 19.438 C 7.518 18.752 8.075 18.193 8.762 18.193 C 9.446 18.193 10 18.752 10 19.438 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.1"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 6.697 16.648 C 6.697 17.404 6.086 18.013 5.336 18.013 C 4.582 18.013 3.974 17.404 3.974 16.648 C 3.974 15.895 4.582 15.284 5.336 15.284 C 6.086 15.284 6.697 15.895 6.697 16.648 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.2"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 5.548 12.057 C 5.548 12.899 4.867 13.581 4.025 13.581 C 3.181 13.581 2.5 12.899 2.5 12.057 C 2.5 11.214 3.181 10.534 4.025 10.534 C 4.867 10.534 5.548 11.214 5.548 12.057 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.3"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 7.808 6.957 C 7.808 7.887 7.052 8.638 6.121 8.638 C 5.192 8.638 4.439 7.887 4.439 6.957 C 4.439 6.03 5.192 5.27 6.121 5.27 C 7.052 5.27 7.808 6.03 7.808 6.957 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.4"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 13.154 4.626 C 13.154 5.603 12.368 6.388 11.391 6.388 C 10.415 6.388 9.63 5.603 9.63 4.626 C 9.63 3.652 10.415 2.865 11.391 2.865 C 12.368 2.865 13.154 3.652 13.154 4.626 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.5"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 19.08 6.842 C 19.08 7.856 18.258 8.684 17.236 8.684 C 16.222 8.684 15.393 7.856 15.393 6.842 C 15.393 5.818 16.222 4.998 17.236 4.998 C 18.258 4.998 19.08 5.818 19.08 6.842 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.6"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 21.5 12.282 C 21.5 13.342 20.637 14.207 19.575 14.207 C 18.511 14.207 17.654 13.342 17.654 12.282 C 17.654 11.218 18.511 10.359 19.575 10.359 C 20.637 10.359 21.5 11.218 21.5 12.282 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.7"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 19.098 17.819 C 19.098 18.966 18.163 19.901 17.009 19.901 C 15.86 19.901 14.927 18.966 14.927 17.819 C 14.927 16.667 15.86 15.735 17.009 15.735 C 18.163 15.735 19.098 16.667 19.098 17.819 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.8"></animate>
+  </path>
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconLoadingSmall.svg b/packages/components/src/common/svgs/IconLoadingSmall.svg
index 6e5cd69ad..839a215e5 100644
--- a/packages/components/src/common/svgs/IconLoadingSmall.svg
+++ b/packages/components/src/common/svgs/IconLoadingSmall.svg
@@ -1,38 +1,38 @@
-<svg width="14" height="14" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <path style="opacity: 0.01;" d="M 7.973 11.26 C 7.973 11.537 7.747 11.759 7.47 11.759 C 7.193 11.759 6.969 11.537 6.969 11.26 C 6.969 10.983 7.193 10.757 7.47 10.757 C 7.747 10.757 7.973 10.983 7.973 11.26 Z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="2s" repeatCount="indefinite" />
-        <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0" />
-    </path>
-    <path style="opacity: 0.01;" d="M 5.958 10.874 C 5.958 11.232 5.669 11.519 5.313 11.519 C 4.956 11.519 4.665 11.232 4.665 10.874 C 4.665 10.517 4.956 10.226 5.313 10.226 C 5.669 10.226 5.958 10.517 5.958 10.874 Z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="2s" repeatCount="indefinite" />
-        <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.1" />
-    </path>
-    <path style="opacity: 0.01;" d="M 4.237 9.421 C 4.237 9.815 3.919 10.132 3.529 10.132 C 3.135 10.132 2.818 9.815 2.818 9.421 C 2.818 9.029 3.135 8.711 3.529 8.711 C 3.919 8.711 4.237 9.029 4.237 9.421 Z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="2s" repeatCount="indefinite" />
-        <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.2" />
-    </path>
-    <path style="opacity: 0.01;" d="M 3.639 7.029 C 3.639 7.468 3.284 7.823 2.846 7.823 C 2.406 7.823 2.051 7.468 2.051 7.029 C 2.051 6.591 2.406 6.236 2.846 6.236 C 3.284 6.236 3.639 6.591 3.639 7.029 Z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="2s" repeatCount="indefinite" />
-        <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.3" />
-    </path>
-    <path style="opacity: 0.01;" d="M 4.816 4.373 C 4.816 4.858 4.422 5.248 3.937 5.248 C 3.454 5.248 3.062 4.858 3.062 4.373 C 3.062 3.889 3.454 3.494 3.937 3.494 C 4.422 3.494 4.816 3.889 4.816 4.373 Z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="2s" repeatCount="indefinite" />
-        <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.4" />
-    </path>
-    <path style="opacity: 0.01;" d="M 7.601 3.158 C 7.601 3.667 7.192 4.077 6.683 4.077 C 6.174 4.077 5.766 3.667 5.766 3.158 C 5.766 2.652 6.174 2.241 6.683 2.241 C 7.192 2.241 7.601 2.652 7.601 3.158 Z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="2s" repeatCount="indefinite" />
-        <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.5" />
-    </path>
-    <path style="opacity: 0.01;" d="M 10.688 4.313 C 10.688 4.841 10.26 5.273 9.727 5.273 C 9.199 5.273 8.767 4.841 8.767 4.313 C 8.767 3.78 9.199 3.353 9.727 3.353 C 10.26 3.353 10.688 3.78 10.688 4.313 Z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="2s" repeatCount="indefinite" />
-        <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.6" />
-    </path>
-    <path style="opacity: 0.01;" d="M 11.949 7.146 C 11.949 7.699 11.498 8.15 10.946 8.15 C 10.392 8.15 9.944 7.699 9.944 7.146 C 9.944 6.593 10.392 6.145 10.946 6.145 C 11.498 6.145 11.949 6.593 11.949 7.146 Z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="2s" repeatCount="indefinite" />
-        <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.7" />
-    </path>
-    <path style="opacity: 0.01;" d="M 10.696 10.031 C 10.696 10.629 10.211 11.115 9.609 11.115 C 9.011 11.115 8.525 10.629 8.525 10.031 C 8.525 9.431 9.011 8.946 9.609 8.946 C 10.211 8.946 10.696 9.431 10.696 10.031 Z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="2s" repeatCount="indefinite" />
-        <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.8" />
-    </path>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path style="opacity: 0.01;" d="M 9.18 13.165 C 9.18 13.501 8.906 13.77 8.57 13.77 C 8.234 13.77 7.962 13.501 7.962 13.165 C 7.962 12.83 8.234 12.556 8.57 12.556 C 8.906 12.556 9.18 12.83 9.18 13.165 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 6.737 12.697 C 6.737 13.131 6.386 13.479 5.955 13.479 C 5.522 13.479 5.169 13.131 5.169 12.697 C 5.169 12.265 5.522 11.912 5.955 11.912 C 6.386 11.912 6.737 12.265 6.737 12.697 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.1"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 4.65 10.936 C 4.65 11.413 4.265 11.798 3.792 11.798 C 3.314 11.798 2.93 11.413 2.93 10.936 C 2.93 10.461 3.314 10.075 3.792 10.075 C 4.265 10.075 4.65 10.461 4.65 10.936 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.2"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 3.925 8.036 C 3.925 8.568 3.495 8.998 2.964 8.998 C 2.43 8.998 2 8.568 2 8.036 C 2 7.505 2.43 7.074 2.964 7.074 C 3.495 7.074 3.925 7.505 3.925 8.036 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.3"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 5.352 4.816 C 5.352 5.404 4.875 5.877 4.287 5.877 C 3.701 5.877 3.226 5.404 3.226 4.816 C 3.226 4.229 3.701 3.75 4.287 3.75 C 4.875 3.75 5.352 4.229 5.352 4.816 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.4"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 8.729 3.343 C 8.729 3.96 8.233 4.457 7.616 4.457 C 6.999 4.457 6.504 3.96 6.504 3.343 C 6.504 2.729 6.999 2.231 7.616 2.231 C 8.233 2.231 8.729 2.729 8.729 3.343 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.5"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 12.471 4.743 C 12.471 5.383 11.952 5.907 11.306 5.907 C 10.666 5.907 10.142 5.383 10.142 4.743 C 10.142 4.097 10.666 3.579 11.306 3.579 C 11.952 3.579 12.471 4.097 12.471 4.743 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.6"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 14 8.178 C 14 8.848 13.453 9.395 12.784 9.395 C 12.112 9.395 11.569 8.848 11.569 8.178 C 11.569 7.507 12.112 6.964 12.784 6.964 C 13.453 6.964 14 7.507 14 8.178 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.7"></animate>
+  </path>
+  <path style="opacity: 0.01;" d="M 12.481 11.675 C 12.481 12.4 11.893 12.99 11.163 12.99 C 10.438 12.99 9.849 12.4 9.849 11.675 C 9.849 10.948 10.438 10.36 11.163 10.36 C 11.893 10.36 12.481 10.948 12.481 11.675 Z">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="2s" repeatCount="indefinite"></animateTransform>
+    <animate attributeName="opacity" dur="1.8s" values="1;1;1;1;0;0;0;0;0;" repeatCount="indefinite" begin="0.8"></animate>
+  </path>
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconLockCircleSmall.svg b/packages/components/src/common/svgs/IconLockCircleSmall.svg
index 8baf1b562..5484d3947 100644
--- a/packages/components/src/common/svgs/IconLockCircleSmall.svg
+++ b/packages/components/src/common/svgs/IconLockCircleSmall.svg
@@ -1,8 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M7 3.26667C6.06667 3.26667 5.32 4.01333 5.32 4.94667V5.78667H8.58667V4.94667C8.68 4.01333 7.93333 3.26667 7 3.26667Z" />
-    <path
-        d="M7 7.09333C6.62667 7.09333 6.44 7.37333 6.44 7.65333C6.44 7.84 6.53333 8.02667 6.72 8.21333V9.05333C6.72 9.24 6.81333 9.33333 7 9.33333C7.18667 9.33333 7.28 9.24 7.28 9.05333V8.21333C7.46667 8.12 7.56 7.93333 7.56 7.65333C7.65333 7.37333 7.37333 7.09333 7 7.09333Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M7 0C3.17333 0 0 3.17333 0 7C0 10.8267 3.17333 14 7 14C10.8267 14 14 10.8267 14 7C14 3.17333 10.92 0 7 0ZM10.2667 9.8C10.2667 10.2667 9.89333 10.64 9.42667 10.64H4.57333C4.10667 10.64 3.73333 10.2667 3.73333 9.8V6.53333C3.73333 6.06667 4.10667 5.69333 4.57333 5.69333V4.85333C4.57333 3.54667 5.69333 2.42667 7 2.42667C8.30667 2.42667 9.42667 3.54667 9.42667 4.85333V5.69333C9.89333 5.69333 10.2667 6.06667 10.2667 6.53333V9.8Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 3.733c-1.067 0-1.92.854-1.92 1.92v.96h3.733v-.96C9.92 4.587 9.067 3.733 8 3.733Zm0 4.374c-.427 0-.64.32-.64.64 0 .213.107.426.32.64v.96c0 .213.107.32.32.32.213 0 .32-.107.32-.32v-.96c.213-.107.32-.32.32-.64.107-.32-.213-.64-.64-.64Z"/>
+  <path fill-rule="evenodd" d="M8 0C3.627 0 0 3.627 0 8s3.627 8 8 8 8-3.627 8-8-3.52-8-8-8Zm3.733 11.2c0 .533-.426.96-.96.96H5.227a.956.956 0 0 1-.96-.96V7.467c0-.534.426-.96.96-.96v-.96c0-1.494 1.28-2.774 2.773-2.774s2.773 1.28 2.773 2.774v.96c.534 0 .96.426.96.96V11.2Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconLockLarge.svg b/packages/components/src/common/svgs/IconLockLarge.svg
old mode 100755
new mode 100644
index 7c03d6a82..189049d8c
--- a/packages/components/src/common/svgs/IconLockLarge.svg
+++ b/packages/components/src/common/svgs/IconLockLarge.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.322 7.727V6.09014C14.322 4.25548 12.8347 2.76819 11 2.76819C9.16536 2.76819 7.67807 4.25548 7.67807 6.09014V7.727H6.08931V6.09014C6.08931 3.37803 8.28791 1.17943 11 1.17943C13.7121 1.17943 15.9107 3.37803 15.9107 6.09014V7.727H14.322ZM16.3279 9.31576H5.67201C5.27317 9.31576 4.94984 9.63909 4.94984 10.0379V18.5113C4.94984 18.9102 5.27317 19.2335 5.67201 19.2335H16.3279C16.7268 19.2335 17.0501 18.9102 17.0501 18.5113V10.0379C17.0501 9.63908 16.7268 9.31576 16.3279 9.31576ZM5.67201 7.727C4.39572 7.727 3.36108 8.76164 3.36108 10.0379V18.5113C3.36108 19.7876 4.39572 20.8222 5.67201 20.8222H16.3279C17.6042 20.8222 18.6389 19.7876 18.6389 18.5113V10.0379C18.6389 8.76164 17.6042 7.727 16.3279 7.727H5.67201ZM11.8 14.1801C12.1965 13.9011 12.48 13.4411 12.48 12.9705C12.48 12.2172 11.7534 11.49 11.0001 11.49C10.2467 11.49 9.51999 12.2172 9.51999 12.9705C9.51999 13.4411 9.80353 13.901 10.2 14.18V16.3808C10.2 16.7574 10.6232 17.06 10.9999 17.06C11.3766 17.06 11.8 16.7574 11.8 16.3808V14.1801Z"/>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M15.624 8.43V6.643a3.624 3.624 0 0 0-7.248 0v1.785H6.643V6.644a5.357 5.357 0 1 1 10.714 0v1.785h-1.733Zm2.188 1.733H6.188a.788.788 0 0 0-.788.787v9.244c0 .435.353.788.788.788h11.624a.788.788 0 0 0 .788-.788v-9.243a.788.788 0 0 0-.788-.788ZM6.188 8.429a2.521 2.521 0 0 0-2.521 2.521v9.244a2.521 2.521 0 0 0 2.52 2.521h11.625a2.521 2.521 0 0 0 2.521-2.52V10.95a2.521 2.521 0 0 0-2.52-2.52H6.187Zm6.685 7.04c.432-.304.742-.806.742-1.32 0-.821-.793-1.614-1.615-1.614s-1.615.793-1.615 1.615c0 .513.31 1.015.742 1.32v2.4c0 .41.462.74.873.74.41 0 .873-.33.873-.74v-2.4Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconLockSmall.svg b/packages/components/src/common/svgs/IconLockSmall.svg
index dda9ca693..06f3e44c0 100644
--- a/packages/components/src/common/svgs/IconLockSmall.svg
+++ b/packages/components/src/common/svgs/IconLockSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M6.848,1 C8.8178062,1 10.4397223,2.56035961 10.5391684,4.50649905 L10.544,4.696 L10.544,5.62912 L10.5677892,5.63319627 C11.1232844,5.74066707 11.5633329,6.18071556 11.6708037,6.73621082 L11.6896021,6.86635255 L11.696,7 L11.696,11.608 C11.696,12.3290808 11.1416124,12.9258849 10.4376475,12.9936021 L10.304,13 L3.392,13 C2.67091921,13 2.07411506,12.4456124 2.0063979,11.7416475 L2,11.608 L2,7 C2,6.36905431 2.42445303,5.83325792 3.00216779,5.66380214 L3.12821082,5.63319627 L3.152,5.62912 L3.152,4.696 C3.152,2.78973593 4.61331494,1.20927949 6.47140671,1.01916878 L6.65849905,1.00483162 L6.848,1 Z M6.848,7.34798438 C6.10897866,7.34798438 5.494,7.91037612 5.494,8.61512721 L5.50247685,8.75527999 L5.52701259,8.89006529 C5.57927609,9.10960597 5.68775785,9.30303502 5.84293671,9.46129105 L5.933,9.544 L5.93447068,10.3372475 C5.93447059,10.8278108 6.3456764,11.2079844 6.848,11.2079844 L6.96227996,11.2008952 L7.0751084,11.1793575 C7.47834776,11.0786046 7.76152941,10.7432196 7.76152941,10.337032 L7.761,9.538 L7.84983317,9.45556953 C8.07688092,9.2203484 8.202,8.92719524 8.202,8.61512721 C8.202,7.91037612 7.58702134,7.34798438 6.848,7.34798438 Z M6.848,2.632 C5.76268102,2.632 4.865201,3.48229224 4.7892109,4.54922576 L4.784,4.696 L4.784,5.608 L8.912,5.608 L8.912,4.696 C8.912,3.61068102 8.06170776,2.713201 6.99477424,2.6372109 L6.848,2.632 Z"
-        id="Combined-Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M7.826 1.143a4.237 4.237 0 0 1 4.219 4.007l.005.217v1.066l.027.005a1.599 1.599 0 0 1 1.261 1.26l.022.15.007.152v5.266c0 .824-.634 1.506-1.438 1.584l-.153.007h-7.9a1.595 1.595 0 0 1-1.583-1.438l-.007-.153V8c0-.721.485-1.333 1.145-1.527l.144-.035.027-.005V5.367a4.238 4.238 0 0 1 3.794-4.202l.214-.017.216-.005Zm0 7.255c-.844 0-1.547.642-1.547 1.448l.01.16.028.154c.06.251.183.472.36.653l.104.094.001.907c0 .56.47.995 1.044.995l.13-.008.13-.025c.46-.115.784-.498.784-.962V10.9l.101-.095a1.37 1.37 0 0 0 .403-.96c0-.806-.703-1.448-1.548-1.448Zm0-5.39c-1.24 0-2.266.972-2.353 2.191l-.006.168v1.042h4.718V5.367c0-1.24-.972-2.266-2.19-2.353l-.169-.006Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconMinusSmall.svg b/packages/components/src/common/svgs/IconMinusSmall.svg
index f03a23396..13d19d780 100644
--- a/packages/components/src/common/svgs/IconMinusSmall.svg
+++ b/packages/components/src/common/svgs/IconMinusSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M13 7.005C13 6.52176 12.6082 6.13 12.125 6.13H1.875C1.39175 6.13 1 6.52176 1 7.005C1 7.48825 1.39175 7.88 1.875 7.88H12.125C12.6082 7.88 13 7.48825 13 7.005Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.857 8.006a1 1 0 0 0-1-1H2.143a1 1 0 1 0 0 2h11.714a1 1 0 0 0 1-1Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconOpenSmall.svg b/packages/components/src/common/svgs/IconOpenSmall.svg
index b52b134bd..94183ee8f 100644
--- a/packages/components/src/common/svgs/IconOpenSmall.svg
+++ b/packages/components/src/common/svgs/IconOpenSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M9.03552 1.92306C9.03552 1.41371 9.44816 1 9.95858 1H12.4969C13.0074 1 13.42 1.41371 13.42 1.92306V4.46142C13.42 4.97077 13.0074 5.38449 12.4969 5.38449C11.9865 5.38449 11.5739 4.97077 11.5739 4.46142V4.04024L7.20201 8.10018C7.02403 8.26525 6.79762 8.34676 6.57367 8.34676C6.32769 8.34676 6.07948 8.24822 5.89729 8.05216C5.55011 7.6782 5.57246 7.09423 5.94492 6.74758L10.1462 2.84612H9.95858C9.44816 2.84612 9.03552 2.43241 9.03552 1.92306ZM2.05272 2.23923C2.40645 1.95892 2.83744 1.8457 3.18918 1.8457H6.10778C6.6182 1.8457 7.03084 2.25941 7.03084 2.76876C7.03084 3.27811 6.6182 3.69182 6.10778 3.69182H3.26612V11.1539H10.7282V7.88916C10.7282 7.37981 11.1408 6.9661 11.6512 6.9661C12.1617 6.9661 12.5743 7.37981 12.5743 7.88916V11.2308C12.5743 11.8509 12.3133 12.3119 11.9416 12.6065C11.5879 12.8868 11.1569 13 10.8051 13H3.18918C2.56908 13 2.10814 12.739 1.81353 12.3673C1.53322 12.0135 1.42 11.5826 1.42 11.2308V3.61488C1.42 2.99477 1.68096 2.53383 2.05272 2.23923Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M9.968 1.977c0-.58.47-1.051 1.052-1.051h3.014c.582 0 1.052.471 1.052 1.051v3.014a1.051 1.051 0 1 1-2.103 0V4.39L7.717 9.28a1.051 1.051 0 0 1-1.433-1.54l5.072-4.71h-.336a1.051 1.051 0 0 1-1.052-1.052Zm-8.308.41a2.174 2.174 0 0 1 1.322-.457h3.466a1.051 1.051 0 1 1 0 2.103h-3.42v8.95h8.95V9.062a1.051 1.051 0 1 1 2.104 0v3.967c0 .723-.304 1.258-.735 1.6a2.175 2.175 0 0 1-1.322.457H2.982c-.723 0-1.257-.304-1.599-.735a2.174 2.174 0 0 1-.457-1.322V3.986c0-.722.303-1.257.734-1.598Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconPeopleLarge.svg b/packages/components/src/common/svgs/IconPeopleLarge.svg
index f57158e25..e3d4d619f 100644
--- a/packages/components/src/common/svgs/IconPeopleLarge.svg
+++ b/packages/components/src/common/svgs/IconPeopleLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4437 11.2977C10.6129 11.1043 10.8791 11.0076 11.1209 11.0559C12.4172 11.279 13.5024 12.0183 14.1907 13.0386C14.63 13.3869 15.262 13.6246 15.8603 13.6717C16.0015 13.692 16.0496 13.7022 16.1978 13.7022C16.3462 13.6954 16.3187 13.6971 16.5295 13.6717C17.2947 13.6115 18.12 13.2421 18.5187 12.724C18.7118 12.4823 19.0022 12.3856 19.2923 12.4581C20.8637 12.8691 22 14.3922 22 16.0845V17.535C22 18.7438 21.033 19.7109 19.8242 19.7109H2.17582C0.967033 19.7109 0 18.7438 0 17.535V15.6735C0 13.401 1.61954 11.4669 3.86813 11.0801C4.13407 11.0317 4.37582 11.1284 4.54505 11.3218C5.27033 12.1922 6.35824 12.6999 7.49451 12.6999C8.63053 12.6999 9.71844 12.1922 10.4437 11.2977ZM19.2923 14.0295C18.5015 14.7543 17.3123 15.1745 16.1949 15.1378C15.7771 15.1515 15.3509 15.0979 14.9385 14.9915C14.9689 15.2071 14.989 15.4257 14.989 15.6493V17.535C14.989 17.7903 14.9438 18.0335 14.8643 18.2603H19.8242C20.2352 18.2603 20.5494 17.946 20.5494 17.535V16.0845C20.5494 15.2141 20.0176 14.3922 19.2923 14.0295ZM3.74725 12.579C2.39316 12.9658 1.45055 14.2229 1.45055 15.6493V17.535C1.45055 17.946 1.76484 18.2603 2.17582 18.2603H12.8132C13.2239 18.2603 13.5385 17.946 13.5385 17.535V15.6735C13.5385 14.2471 12.5956 12.99 11.2418 12.6032C10.2503 13.5944 8.92064 14.1504 7.49451 14.1504C6.06813 14.1504 4.73846 13.5944 3.74725 12.579ZM16.1978 6.09989C17.9382 6.09989 19.3407 7.50208 19.3407 9.24274V9.41197C19.3407 11.1526 17.9382 12.5548 16.1978 12.5548C14.4571 12.5548 13.0549 11.1285 13.0549 9.41197V9.24274C13.0549 7.50208 14.4571 6.09989 16.1978 6.09989ZM16.1978 7.52626C15.2549 7.52626 14.5055 8.27571 14.5055 9.21857V9.3878C14.5055 10.3307 15.2549 11.0801 16.1978 11.0801C17.1404 11.0801 17.8901 10.3307 17.8901 9.3878V9.21857C17.8901 8.27571 17.1404 7.52626 16.1978 7.52626ZM7.49451 2.0625C9.88767 2.0625 11.8462 4.02074 11.8462 6.41415C11.8462 8.80756 9.88767 10.7658 7.49451 10.7658C5.1011 10.7658 3.14286 8.80756 3.14286 6.41415C3.14286 4.02074 5.1011 2.0625 7.49451 2.0625ZM7.49451 3.51305C5.89866 3.51305 4.59341 4.81854 4.59341 6.41415C4.59341 8.00975 5.89866 9.31525 7.49451 9.31525C9.09011 9.31525 10.3956 8.00975 10.3956 6.41415C10.3956 4.81854 9.09011 3.51305 7.49451 3.51305Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M11.393 12.325a.797.797 0 0 1 .739-.264 5.062 5.062 0 0 1 3.349 2.163c.479.38 1.168.64 1.821.69.154.023.207.034.368.034.162-.008.132-.006.362-.033.835-.066 1.735-.469 2.17-1.034a.807.807 0 0 1 .844-.29C22.76 14.039 24 15.7 24 17.547v1.582a2.364 2.364 0 0 1-2.374 2.374H2.374A2.364 2.364 0 0 1 0 19.129V17.1a5.07 5.07 0 0 1 4.22-5.012.775.775 0 0 1 .738.264 4.201 4.201 0 0 0 3.218 1.503c1.24 0 2.426-.553 3.217-1.53Zm9.653 2.98c-.863.79-2.16 1.249-3.379 1.209a4.878 4.878 0 0 1-1.37-.16c.033.236.055.474.055.718v2.057c0 .279-.05.544-.136.791h5.41a.777.777 0 0 0 .792-.79v-1.583c0-.95-.58-1.847-1.372-2.242ZM4.088 13.723a3.481 3.481 0 0 0-2.506 3.349v2.057c0 .448.343.791.792.791h11.604a.777.777 0 0 0 .791-.79v-2.032a3.481 3.481 0 0 0-2.505-3.35 5.744 5.744 0 0 1-4.088 1.689 5.661 5.661 0 0 1-4.088-1.714ZM17.67 6.654a3.422 3.422 0 0 1 3.429 3.429v.185a3.422 3.422 0 0 1-3.429 3.428 3.439 3.439 0 0 1-3.428-3.428v-.185a3.422 3.422 0 0 1 3.428-3.429Zm0 1.556a1.835 1.835 0 0 0-1.846 1.847v.184c0 1.029.818 1.846 1.846 1.846a1.835 1.835 0 0 0 1.846-1.846v-.184A1.835 1.835 0 0 0 17.67 8.21ZM8.176 2.25a4.761 4.761 0 0 1 4.747 4.747 4.761 4.761 0 0 1-4.747 4.748 4.761 4.761 0 0 1-4.747-4.748A4.761 4.761 0 0 1 8.176 2.25Zm0 1.582A3.174 3.174 0 0 0 5.01 6.997a3.174 3.174 0 0 0 3.165 3.165 3.174 3.174 0 0 0 3.165-3.165 3.174 3.174 0 0 0-3.165-3.165Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconPeopleSmall.svg b/packages/components/src/common/svgs/IconPeopleSmall.svg
index cd4692bad..3f87cf464 100644
--- a/packages/components/src/common/svgs/IconPeopleSmall.svg
+++ b/packages/components/src/common/svgs/IconPeopleSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M6.99906266,7.71524216 L7.07692306,7.72307692 C7.0856845,7.72458509 7.09443079,7.72613031 7.10316178,7.72771241 L7.12561766,7.73619296 L7.12561766,7.73619296 L7.04230767,7.72 C8.47323075,7.96615382 9.50384613,9.2153846 9.50384613,10.6615385 L9.50384613,11.8461538 C9.50384613,12.55933 8.97488103,13.140265 8.28476501,13.2211444 L8.15384613,13.2307692 L1.38461539,13.2307692 C0.660633483,13.2307692 0.0729305295,12.6856534 0.00629413329,11.9802095 L0,11.8461538 L0,10.6615385 C0,9.2153846 1.03061538,7.98461536 2.46153846,7.73846154 L2.54472934,7.73062678 C2.68076923,7.72991453 2.8025641,7.78974359 2.89230769,7.89230769 C2.9145749,7.91902834 2.93737925,7.94521184 2.96069829,7.97084783 L2.89230769,7.89230769 C2.94783654,7.95894231 3.00670579,8.02223652 3.06856714,8.08202956 C3.09598884,8.10854188 3.12425205,8.13458865 3.15308272,8.1599207 C3.17427553,8.1785478 3.19607485,8.19703389 3.21817653,8.21511707 C3.24624588,8.23807376 3.27442114,8.26009603 3.30304571,8.28147383 C3.32149583,8.29525686 3.34039793,8.30895866 3.35948496,8.32238181 C3.39248784,8.3455889 3.42593811,8.36789632 3.45990149,8.38935906 C3.47787465,8.40071919 3.49617525,8.41195224 3.51461694,8.42294138 C3.55086189,8.44453142 3.58730445,8.46499606 3.62424074,8.48451721 C3.64384162,8.49488399 3.66423374,8.50530716 3.68476754,8.51544376 C3.71750333,8.53159654 3.75018792,8.54684028 3.78319732,8.56136138 C3.81071172,8.5734661 3.83851503,8.58509384 3.86652971,8.59621015 C3.89129515,8.60603781 3.91627897,8.61548493 3.94141802,8.62452575 C3.97770234,8.63757651 4.01440956,8.64981143 4.05140959,8.66118042 C4.07349091,8.66796259 4.09540445,8.67436106 4.11741309,8.68045555 C4.15007874,8.6895084 4.18344727,8.69800638 4.21700907,8.70580412 C4.24964861,8.71337849 4.28182509,8.720168 4.3141575,8.72631187 L4.39351418,8.74004279 L4.39351418,8.74004279 L4.41118233,8.74273504 C4.52905983,8.76025641 4.64871794,8.76923077 4.76923077,8.76923077 C5.49215384,8.76923077 6.18446153,8.44615387 6.64599998,7.87692307 C6.7536923,7.75384615 6.92307689,7.69230769 7.07692306,7.72307692 Z M12.1848896,8.60121081 L12.2769231,8.6153846 C13.2769231,8.87692309 14,9.84615384 14,10.9230769 L14,10.9230769 L14,11.8461538 C14,12.6153846 13.3846154,13.2307692 12.6153846,13.2307692 L12.6153846,13.2307692 L10.6493673,13.231487 C10.8767915,12.8193563 11.0038461,12.3469874 11.0038461,11.8461538 L11.0038461,10.6615385 L10.9986848,10.444688 C10.980541,10.0641706 10.9148967,9.69447684 10.8070761,9.34215566 C11.200809,9.25378363 11.5805548,9.04980755 11.7846154,8.78461539 C11.9075385,8.63076922 12.0923077,8.56923075 12.2769231,8.6153846 Z M4.76923077,6.78846153 C6.29215385,6.78846153 7.53846151,5.54230769 7.53846151,4.01923077 C7.53846151,2.49615385 6.29215385,1.25 4.76923077,1.25 C3.24615384,1.25 2,2.49615385 2,4.01923077 C2,5.54230769 3.24615384,6.78846153 4.76923077,6.78846153 M10.3076923,7.67693844 C11.4152308,7.67693844 12.3076923,6.78463077 12.3076923,5.67693846 L12.3076923,5.56924615 C12.3076923,4.46155384 11.4152308,3.56924615 10.3076923,3.56924615 C9.19999997,3.56924615 8.3076923,4.46155384 8.3076923,5.56924615 L8.3076923,5.67693846 C8.3076923,6.76924615 9.19999997,7.67693844 10.3076923,7.67693844 Z"
-        id="Combined-Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="m7.999 8.817.089.01.03.005.026.01-.096-.02a3.401 3.401 0 0 1 2.813 3.363v1.353c0 .816-.604 1.48-1.393 1.572l-.15.01H1.583a1.574 1.574 0 0 1-1.575-1.428L0 13.538v-1.353a3.38 3.38 0 0 1 2.813-3.341l.095-.009a.52.52 0 0 1 .397.185l.079.09-.079-.09a2.753 2.753 0 0 0 1.114.804 2.808 2.808 0 0 0 .511.149l.091.016.02.003a2.76 2.76 0 0 0 2.554-.99.532.532 0 0 1 .493-.176l-.09-.009Zm5.927 1.013.105.016c1.143.299 1.969 1.407 1.969 2.637v1.055c0 .88-.703 1.583-1.582 1.583H12.17c.26-.47.405-1.01.405-1.583v-1.353l-.006-.248a5.135 5.135 0 0 0-.22-1.26c.45-.101.885-.334 1.118-.637a.538.538 0 0 1 .563-.194l-.105-.016ZM5.45 7.758a3.174 3.174 0 0 0 3.164-3.165A3.174 3.174 0 0 0 5.451 1.43a3.174 3.174 0 0 0-3.165 3.164A3.174 3.174 0 0 0 5.45 7.758Zm6.33 1.016a2.281 2.281 0 0 0 2.285-2.286v-.123a2.281 2.281 0 0 0-2.286-2.286 2.281 2.281 0 0 0-2.285 2.286v.123a2.292 2.292 0 0 0 2.285 2.286Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconPercentageSmall.svg b/packages/components/src/common/svgs/IconPercentageSmall.svg
index ba2d858c2..7dea34ff4 100644
--- a/packages/components/src/common/svgs/IconPercentageSmall.svg
+++ b/packages/components/src/common/svgs/IconPercentageSmall.svg
@@ -1,8 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M10.9764 12.4764C11.8049 12.4764 12.4764 11.8049 12.4764 10.9764C12.4764 10.148 11.8049 9.47641 10.9764 9.47641C10.148 9.47641 9.47641 10.148 9.47641 10.9764C9.47641 11.8049 10.148 12.4764 10.9764 12.4764Z" />
-    <rect x="11.2079" y="1.02426" width="2.5" height="14.4019" rx="1"
-        transform="rotate(45 11.2079 1.02426)" />
-    <path
-        d="M3.02643 4.52638C3.85486 4.52638 4.52643 3.85481 4.52643 3.02638C4.52643 2.19795 3.85486 1.52638 3.02643 1.52638C2.198 1.52638 1.52643 2.19795 1.52643 3.02638C1.52643 3.85481 2.198 4.52638 3.02643 4.52638Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="m14.021 2.383-.404-.404a1.143 1.143 0 0 0-1.616 0L1.979 12a1.143 1.143 0 0 0 0 1.616l.404.404c.446.447 1.17.447 1.616 0L14.021 4a1.143 1.143 0 0 0 0-1.616Zm-1.477 11.876a1.714 1.714 0 1 0 0-3.428 1.714 1.714 0 0 0 0 3.428Zm-7.371-10.8a1.714 1.714 0 1 1-3.429 0 1.714 1.714 0 0 1 3.43 0Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconPersonLarge.svg b/packages/components/src/common/svgs/IconPersonLarge.svg
index 99b86146f..43698a6e4 100644
--- a/packages/components/src/common/svgs/IconPersonLarge.svg
+++ b/packages/components/src/common/svgs/IconPersonLarge.svg
@@ -1,5 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M18.4937 15.675C18.4937 13.4062 16.8437 11.4812 14.6437 11.0688C14.3687 11 14.1625 11.1375 13.9562 11.3438C13.2 12.2375 12.1687 12.7188 11 12.7188C9.83125 12.7188 8.8 12.2375 8.04375 11.3438C7.90625 11.1375 7.63125 11.0688 7.35625 11.0688C5.0875 11.4812 3.50625 13.4062 3.50625 15.675C3.50625 16.3396 3.50625 17.0042 3.50625 17.6688C3.50625 17.8358 3.53865 18.0319 3.575 18.15C3.85 19.0437 4.675 19.7313 5.6375 19.7313H16.2937C17.2562 19.7313 18.2187 19.25 18.425 18.15C18.4766 17.875 18.4937 17.8337 18.4937 17.6688C18.4937 16.9115 18.4657 16.4316 18.4937 15.675ZM17.05 17.5312C17.05 17.9438 16.7062 18.2875 16.2937 18.2875H5.70625C5.29375 18.2875 4.95 17.9438 4.95 17.5312V15.675C4.95 14.2312 5.9125 12.9937 7.21875 12.5812C8.04375 13.4062 9.075 13.8875 10.175 14.0938C10.45 14.1625 10.725 14.1625 11 14.1625C11.275 14.1625 11.55 14.1625 11.825 14.0938C12.925 13.9563 13.9562 13.4062 14.7812 12.5812C16.1562 12.9937 17.05 14.2312 17.05 15.675V17.5312ZM11 10.7937C13.4062 10.7937 15.3312 8.86875 15.3312 6.4625C15.3312 4.05625 13.4062 2.0625 11 2.0625C8.59375 2.0625 6.66875 3.9875 6.66875 6.39375C6.66875 8.8 8.59375 10.7937 11 10.7937ZM11 3.50625C12.5812 3.50625 13.8875 4.8125 13.8875 6.39375C13.8875 7.975 12.5812 9.28125 11 9.28125C9.41875 9.28125 8.1125 7.975 8.1125 6.39375C8.1125 4.8125 9.41875 3.50625 11 3.50625Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20.175 17.1c0-2.475-1.8-4.575-4.2-5.025-.3-.075-.525.075-.75.3a4.128 4.128 0 0 1-3.225 1.5c-1.275 0-2.4-.525-3.225-1.5-.15-.225-.45-.3-.75-.3a5.07 5.07 0 0 0-4.2 5.025v2.175c0 .182.035.396.075.525.3.975 1.2 1.725 2.25 1.725h11.625c1.05 0 2.1-.525 2.325-1.725.056-.3.075-.345.075-.525 0-.826-.03-1.35 0-2.175ZM18.6 19.125c0 .45-.375.825-.825.825H6.225a.832.832 0 0 1-.825-.825V17.1a3.558 3.558 0 0 1 2.475-3.375c.9.9 2.025 1.425 3.225 1.65.3.075.6.075.9.075.3 0 .6 0 .9-.075 1.2-.15 2.325-.75 3.225-1.65 1.5.45 2.475 1.8 2.475 3.375v2.025Zm-6.6-7.35c2.625 0 4.725-2.1 4.725-4.725 0-2.625-2.1-4.8-4.725-4.8a4.705 4.705 0 0 0-4.725 4.725c0 2.625 2.1 4.8 4.725 4.8Zm0-7.95a3.169 3.169 0 0 1 3.15 3.15 3.169 3.169 0 0 1-3.15 3.15 3.169 3.169 0 0 1-3.15-3.15A3.169 3.169 0 0 1 12 3.825Z"/>
 </svg>
-  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconPersonSmall.svg b/packages/components/src/common/svgs/IconPersonSmall.svg
index 406548d93..3bf458a0c 100644
--- a/packages/components/src/common/svgs/IconPersonSmall.svg
+++ b/packages/components/src/common/svgs/IconPersonSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M9.80001 4.00001C9.80001 5.54641 8.54641 6.80001 7.00001 6.80001C5.45362 6.80001 4.20001 5.54641 4.20001 4.00001C4.20001 2.45361 5.45362 1.20001 7.00001 1.20001C8.54641 1.20001 9.80001 2.45361 9.80001 4.00001Z" />
-    <path
-        d="M8.92795 7.87158C9.02153 7.77579 9.13095 7.66378 9.29999 7.69999C10.7 7.99999 11.7 9.19999 11.7 10.7V11.9C11.7 12.6 11.2478 13.3 10.5 13.3H3.49999C2.71875 13.3 2.29999 12.6 2.29999 11.9V10.7C2.29999 9.19999 3.29999 7.99999 4.69999 7.69999C4.86782 7.66402 4.98076 7.77888 5.07562 7.87535C5.08387 7.88374 5.09199 7.89199 5.09999 7.89999C5.59999 8.49999 6.29999 8.79999 6.99999 8.79999C7.69999 8.79999 8.39999 8.39999 8.89999 7.89999C8.90918 7.8908 8.91849 7.88127 8.92795 7.87158Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.2 4.571a3.2 3.2 0 1 1-6.4 0 3.2 3.2 0 0 1 6.4 0Zm-.997 4.425c.107-.11.232-.237.426-.196 1.6.343 2.742 1.714 2.742 3.429V13.6c0 .8-.516 1.6-1.371 1.6H4c-.893 0-1.371-.8-1.371-1.6v-1.371c0-1.715 1.142-3.086 2.742-3.429.192-.041.321.09.43.2l.028.029A2.815 2.815 0 0 0 8 10.057c.8 0 1.6-.457 2.171-1.028l.032-.033Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconPinLocationSmall.svg b/packages/components/src/common/svgs/IconPinLocationSmall.svg
index 49ae199ae..87449e90c 100644
--- a/packages/components/src/common/svgs/IconPinLocationSmall.svg
+++ b/packages/components/src/common/svgs/IconPinLocationSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M3.23353 8.75622L6.4237 13.4267C6.62134 13.7807 6.99501 14 7.4004 14C7.8058 14 8.17946 13.7807 8.37711 13.4267L11.5673 8.75615C11.7692 8.39456 12.0216 7.88282 12.2268 7.3439C12.4215 6.83275 12.6208 6.17829 12.6208 5.57392C12.6208 2.73369 10.2447 0.5 7.40035 0.5C4.55595 0.5 2.17999 2.7337 2.17999 5.57392C2.17999 6.17827 2.37926 6.83267 2.57393 7.34385C2.77915 7.88275 3.03153 8.39453 3.23353 8.75622ZM7.4004 8.28401C8.81624 8.28401 9.964 7.13625 9.964 5.72041C9.964 4.30458 8.81624 3.15682 7.4004 3.15682C5.98457 3.15682 4.83681 4.30458 4.83681 5.72041C4.83681 7.13625 5.98457 8.28401 7.4004 8.28401Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="m3.238 9.721 3.646 5.338a1.279 1.279 0 0 0 2.232 0l3.646-5.338c.23-.413.52-.998.754-1.614.222-.584.45-1.332.45-2.023C13.966 2.84 11.251.286 8 .286c-3.25 0-5.966 2.552-5.966 5.798 0 .691.228 1.439.45 2.023.235.616.523 1.201.754 1.614ZM8 9.181a2.93 2.93 0 1 0 0-5.859 2.93 2.93 0 0 0 0 5.86Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconPinSmall.svg b/packages/components/src/common/svgs/IconPinSmall.svg
index 871b0d943..ddd06ab17 100644
--- a/packages/components/src/common/svgs/IconPinSmall.svg
+++ b/packages/components/src/common/svgs/IconPinSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M9.35082 6.36393H9.21182C9.14141 6.36393 9.08195 6.31164 9.07296 6.2418L8.7643 3.84297C8.74405 3.68554 8.85894 3.54771 9.01766 3.54969C9.26695 3.5528 9.51388 3.54927 9.67203 3.34592C9.89248 3.06245 10.008 2.69274 9.99432 2.31436C9.98065 1.93597 9.97015 1.71832 9.72999 1.45645C9.48983 1.19458 9.24869 1.04884 8.91624 1.04981H5.04874C4.71629 1.04884 4.53311 1.19458 4.29295 1.45645C4.0528 1.71832 3.98433 1.93597 3.97066 2.31436C3.95699 2.69274 4.0725 3.06245 4.29295 3.34592C4.4511 3.54927 4.69803 3.5528 4.94732 3.54969C5.10604 3.54771 5.22093 3.68555 5.20068 3.84297L4.89202 6.2418C4.88303 6.31164 4.82357 6.36393 4.75316 6.36393H4.61416C4.27225 6.36393 3.76934 6.69365 3.52758 6.96906C3.28581 7.24446 3.11499 7.51299 3.11499 7.90247V8.391C3.11499 8.54564 3.24035 8.671 3.39499 8.671H5.98791C6.02657 8.671 6.05791 8.70234 6.05791 8.741V11.9549C6.05791 12.0319 6.0896 12.1055 6.14553 12.1584L6.79011 12.7679C6.89806 12.87 7.06692 12.87 7.17487 12.7679L7.81945 12.1584C7.87538 12.1055 7.90707 12.0319 7.90707 11.9549V8.741C7.90707 8.70234 7.93841 8.671 7.97707 8.671H10.57C10.7246 8.671 10.85 8.54564 10.85 8.391V7.90247C10.85 7.51299 10.6792 7.24446 10.4374 6.96906C10.1956 6.69365 9.69273 6.36393 9.35082 6.36393Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.687 7.273h-.16a.16.16 0 0 1-.158-.14l-.353-2.741a.29.29 0 0 1 .29-.335c.285.003.567 0 .748-.233a1.82 1.82 0 0 0 .368-1.179c-.016-.432-.027-.681-.302-.98-.274-.3-.55-.466-.93-.465H5.77c-.38-.001-.59.165-.864.465-.274.299-.352.548-.368.98a1.82 1.82 0 0 0 .368 1.179c.181.232.463.236.748.233a.29.29 0 0 1 .29.335L5.59 7.133a.16.16 0 0 1-.159.14h-.159c-.39 0-.965.377-1.241.692-.277.314-.472.621-.472 1.066v.559c0 .176.143.32.32.32h2.963a.08.08 0 0 1 .08.08v3.673a.32.32 0 0 0 .1.232l.737.697a.32.32 0 0 0 .44 0l.737-.697a.32.32 0 0 0 .1-.232V9.99a.08.08 0 0 1 .08-.08h2.963a.32.32 0 0 0 .32-.32v-.56c0-.445-.195-.752-.472-1.066-.276-.315-.85-.692-1.241-.692Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconPlayLarge.svg b/packages/components/src/common/svgs/IconPlayLarge.svg
old mode 100755
new mode 100644
index 07f3dda07..c38ddaea1
--- a/packages/components/src/common/svgs/IconPlayLarge.svg
+++ b/packages/components/src/common/svgs/IconPlayLarge.svg
@@ -1,4 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 18.6389C15.2189 18.6389 18.6389 15.2189 18.6389 11C18.6389 6.78117 15.2189 3.36112 11 3.36112C6.78117 3.36112 3.36112 6.78117 3.36112 11C3.36112 15.2189 6.78117 18.6389 11 18.6389ZM11 20.1667C16.0626 20.1667 20.1667 16.0626 20.1667 11C20.1667 5.9374 16.0626 1.83334 11 1.83334C5.9374 1.83334 1.83334 5.9374 1.83334 11C1.83334 16.0626 5.9374 20.1667 11 20.1667Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0556 11.3056L9.0139 8.39476V14.2164L14.0556 11.3056ZM15.2778 12.364C16.0926 11.8936 16.0926 10.7175 15.2778 10.2471L9.31946 6.80704C8.50464 6.33661 7.48612 6.92465 7.48612 7.86552V14.7456C7.48612 15.6865 8.50464 16.2745 9.31946 15.8041L15.2778 12.364Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M12 20.333a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666ZM12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"/>
+  <path fill-rule="evenodd" d="m15.333 12.333-5.5-3.175v6.35l5.5-3.175Zm1.334 1.155a1.333 1.333 0 0 0 0-2.31l-6.5-3.752c-.89-.513-2 .128-2 1.155v7.505a1.333 1.333 0 0 0 2 1.155l6.5-3.753Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconPlusCircleSmall.svg b/packages/components/src/common/svgs/IconPlusCircleSmall.svg
index dd497b9d4..b395bff6c 100644
--- a/packages/components/src/common/svgs/IconPlusCircleSmall.svg
+++ b/packages/components/src/common/svgs/IconPlusCircleSmall.svg
@@ -1,6 +1,4 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M7,0 C10.8660974,0 14,3.1339026 14,7 C14,10.8660974 10.8660974,14 7,14 C3.1339026,14 0,10.8660974 0,7 C0,3.1339026 3.1339026,0 7,0 Z M7,1.70731707 C4.08190227,1.70731707 1.70731707,4.08190227 1.70731707,7 C1.70731707,9.91809773 4.08190227,12.2926829 7,12.2926829 C9.91809773,12.2926829 12.2926829,9.91809773 12.2926829,7 C12.2926829,4.08190227 9.91809773,1.70731707 7,1.70731707 Z M7,4.09756098 C7.43501673,4.09756098 7.79430334,4.42338476 7.84700414,4.84417664 L7.85365854,4.95121951 L7.85268293,6.14634146 L9.04878049,6.14634146 C9.44754583,6.14634146 9.78267682,6.42012395 9.87635582,6.78987125 L9.89578463,6.89295712 L9.90243902,7 C9.90243902,7.43501673 9.57661524,7.79430334 9.15582336,7.84700414 L9.04878049,7.85365854 L7.85268293,7.85365854 L7.85365854,9.04878049 C7.85365854,9.44754583 7.57987605,9.78267682 7.21012875,9.87635582 L7.10704288,9.89578463 L7,9.90243902 C6.56498327,9.90243902 6.20569666,9.57661524 6.15299586,9.15582336 L6.14634146,9.04878049 L6.14634146,7.85365854 L4.95121951,7.85365854 C4.55245417,7.85365854 4.21732318,7.57987605 4.12364418,7.21012875 L4.10421537,7.10704288 L4.09756098,7 C4.09756098,6.56498327 4.42338476,6.20569666 4.84417664,6.15299586 L4.95121951,6.14634146 L6.14634146,6.14634146 L6.14634146,4.95121951 C6.14634146,4.55245417 6.42012395,4.21732318 6.78987125,4.12364418 L6.89295712,4.10421537 L7,4.09756098 Z"
-        id="Combined-Shape"></path>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 1.951A6.056 6.056 0 0 0 1.951 8 6.056 6.056 0 0 0 8 14.049 6.056 6.056 0 0 0 14.049 8 6.056 6.056 0 0 0 8 1.951Zm0 2.732c.497 0 .908.372.968.853l.008.123-.002 1.365h1.367c.456 0 .84.313.946.736l.022.118.008.122a.976.976 0 0 1-.853.968l-.123.008H8.974l.002 1.365a.976.976 0 0 1-.736.946l-.118.022-.122.008a.976.976 0 0 1-.968-.853l-.008-.123V8.976H5.66a.976.976 0 0 1-.946-.736l-.022-.118L4.683 8c0-.497.372-.908.853-.968l.123-.008h1.365V5.66c0-.456.313-.84.736-.946l.118-.022L8 4.683Z" />
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconPlusSmall.svg b/packages/components/src/common/svgs/IconPlusSmall.svg
index 7c732adb4..22471c62b 100644
--- a/packages/components/src/common/svgs/IconPlusSmall.svg
+++ b/packages/components/src/common/svgs/IconPlusSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 1C7.48325 1 7.875 1.39175 7.875 1.875V6.125H12.125C12.6082 6.125 13 6.51675 13 7C13 7.48325 12.6082 7.875 12.125 7.875H7.875V12.125C7.875 12.6082 7.48325 13 7 13C6.51675 13 6.125 12.6082 6.125 12.125V7.875H1.875C1.39175 7.875 1 7.48325 1 7C1 6.51675 1.39175 6.125 1.875 6.125H6.125V1.875C6.125 1.39175 6.51675 1 7 1Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 1.143a1 1 0 0 1 1 1V7h4.857a1 1 0 1 1 0 2H9v4.857a1 1 0 1 1-2 0V9H2.143a1 1 0 0 1 0-2H7V2.143a1 1 0 0 1 1-1Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconProjectPrivateLarge.svg b/packages/components/src/common/svgs/IconProjectPrivateLarge.svg
index 70eb0e00f..4f38a6fe8 100644
--- a/packages/components/src/common/svgs/IconProjectPrivateLarge.svg
+++ b/packages/components/src/common/svgs/IconProjectPrivateLarge.svg
@@ -1,5 +1,8 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.0087 5.29375C19.8717 5.0875 19.6663 4.95 19.4609 4.8125L19.5293 4.33125C19.6663 3.09375 18.7761 1.99375 17.5435 1.925C17.475 1.925 17.4065 1.925 17.338 1.925H8.77822C8.57279 1.925 8.36735 1.85625 8.23039 1.65L7.54561 0.825C7.06626 0.34375 6.44995 0 5.76517 0H3.36842C2.75212 0 2.13581 0.275 1.72494 0.75625C1.24559 1.2375 1.04015 1.85625 1.10863 2.54375L1.38255 4.74375C1.10863 4.88125 0.834719 5.01875 0.560805 5.29375C0.149934 5.775 -0.0555018 6.39375 0.0129767 7.0125L0.76624 15.6063C0.903197 16.9125 1.99885 17.875 3.29994 17.875H12.1337C12.0652 17.6 12.0652 17.325 12.0652 17.05C12.0652 16.8437 12.0652 16.5687 12.1337 16.3625H3.29994C2.75212 16.3625 2.34125 15.95 2.34125 15.4688L1.5195 6.875C1.5195 6.66875 1.58798 6.4625 1.72494 6.325C1.8619 6.1875 2.06733 6.05 2.27277 6.05H18.3652C18.5706 6.05 18.7761 6.11875 18.913 6.325C19.05 6.4625 19.1185 6.66875 19.1185 6.875L18.6391 12.1C19.187 12.2375 19.6663 12.5125 20.0772 12.7875L20.625 7.0125C20.625 6.39375 20.4196 5.775 20.0087 5.29375ZM17.9543 4.5375H2.88907L2.61516 2.3375C2.61516 2.13125 2.68364 1.925 2.82059 1.7875C2.95755 1.65 3.16299 1.5125 3.36842 1.5125H5.76517C5.97061 1.5125 6.17604 1.58125 6.313 1.7875L6.99778 2.6125C7.40865 3.1625 8.02496 3.4375 8.70974 3.4375H17.2011C17.4065 3.4375 17.6119 3.50625 17.7489 3.64375C17.8859 3.78125 17.9543 3.9875 17.9543 4.19375V4.5375Z" fill="#CCCCCC" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.8438 11.6875C19.7312 11.6875 22 14.025 22 16.8438C22 19.6625 19.6625 22 16.8438 22C14.025 22 11.6875 19.6625 11.6875 16.8438C11.6875 14.025 14.025 11.6875 16.8438 11.6875ZM16.8438 13.475C15.8813 13.475 15.0562 14.3 15.0562 15.2625V15.8813C14.7125 15.8813 14.4375 16.1562 14.4375 16.5V18.9062C14.4375 19.25 14.7125 19.525 15.0562 19.525H18.6313C18.975 19.525 19.25 19.25 19.25 18.9062V16.5C19.25 16.1562 18.975 15.8813 18.6313 15.8813V15.2625C18.6313 14.3 17.8062 13.475 16.8438 13.475ZM16.8438 16.9125C17.1188 16.9125 17.325 17.1188 17.2563 17.325C17.2563 17.5313 17.1875 17.6687 17.05 17.7375V18.3563C17.05 18.4938 16.9813 18.5625 16.8438 18.5625C16.7062 18.5625 16.6375 18.4938 16.6375 18.3563V17.7375C16.5 17.6 16.4312 17.4625 16.4312 17.325C16.4312 17.1188 16.5687 16.9125 16.8438 16.9125ZM16.8438 14.0938C17.5312 14.0938 18.0813 14.6437 18.0125 15.3312V15.95H15.6063V15.3312C15.6063 14.6437 16.1562 14.0938 16.8438 14.0938Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        fill="#CCCCCC"
+        d="M21.828 5.775c-.15-.225-.374-.375-.598-.525l.075-.525c.15-1.35-.822-2.55-2.167-2.625H9.576c-.224 0-.448-.075-.597-.3L8.232.9C7.709.375 7.036 0 6.289 0H3.675C3.002 0 2.33.3 1.882.825c-.523.525-.747 1.2-.673 1.95l.3 2.4c-.3.15-.598.3-.897.6A2.476 2.476 0 0 0 .014 7.65l.822 9.375A2.762 2.762 0 0 0 3.6 19.5h9.637c-.075-.3-.075-.6-.075-.9 0-.225 0-.525.075-.75H3.6c-.598 0-1.046-.45-1.046-.975L1.658 7.5a.85.85 0 0 1 .224-.6c.15-.15.373-.3.597-.3h17.556c.224 0 .448.075.597.3a.85.85 0 0 1 .224.6l-.522 5.7c.597.15 1.12.45 1.568.75l.598-6.3c0-.675-.224-1.35-.672-1.875Zm-2.241-.825H3.152l-.3-2.4c0-.225.076-.45.225-.6.15-.15.374-.3.598-.3h2.614c.224 0 .449.075.598.3l.747.9c.448.6 1.12.9 1.868.9h9.263c.224 0 .448.075.597.225.15.15.225.375.225.6v.375Z" />
+    <path fill-rule="evenodd"
+        d="M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625Zm0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95Zm0 3.75c.3 0 .525.225.45.45 0 .225-.075.375-.225.45v.675c0 .15-.075.225-.225.225-.15 0-.225-.075-.225-.225v-.675c-.15-.15-.225-.3-.225-.45 0-.225.15-.45.45-.45Zm0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35Z" />
 </svg>
-    
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconProjectPublicLarge.svg b/packages/components/src/common/svgs/IconProjectPublicLarge.svg
index f1572a829..486deb613 100644
--- a/packages/components/src/common/svgs/IconProjectPublicLarge.svg
+++ b/packages/components/src/common/svgs/IconProjectPublicLarge.svg
@@ -1,5 +1,8 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0291 17.4625C12.0291 17.325 12.0291 17.1875 12.0291 17.05C12.0291 16.8437 12.0291 16.5687 12.0977 16.3625H3.30885C2.75954 16.3625 2.34756 15.95 2.34756 15.4688L1.5236 6.875C1.5236 6.66875 1.59227 6.4625 1.72959 6.325C1.86692 6.1875 2.07291 6.05 2.2789 6.05H18.4148C18.6208 6.05 18.8267 6.11875 18.9641 6.325C19.1014 6.4625 19.1701 6.66875 19.1701 6.875L18.6894 12.1C18.9641 12.1688 19.1701 12.2375 19.3761 12.375C19.3761 12.375 19.4447 12.375 19.4447 12.4438C19.6507 12.5813 19.8567 12.65 20.0627 12.7875L20.612 7.0125C20.6807 6.39375 20.4747 5.775 20.0627 5.29375C19.9254 5.0875 19.7194 4.95 19.5134 4.8125L19.582 4.33125C19.7194 3.09375 18.8267 1.99375 17.5908 1.925C17.5221 1.925 17.4535 1.925 17.3848 1.925H8.80191C8.59592 1.925 8.38993 1.85625 8.2526 1.65L7.56597 0.825C7.08533 0.34375 6.46736 0 5.78072 0H3.37751C2.75954 0 2.14157 0.275 1.72959 0.75625C1.24895 1.2375 1.04296 1.85625 1.11162 2.54375L1.38628 4.74375C1.11162 4.88125 0.836971 5.01875 0.562318 5.29375C0.150338 5.775 -0.0556515 6.39375 0.0130117 7.0125L0.768308 15.6063C0.905634 16.9125 2.00425 17.875 3.30885 17.875H12.1664C12.0977 17.7375 12.0977 17.6 12.0291 17.4625ZM2.82821 1.7875C2.96553 1.65 3.17152 1.5125 3.37751 1.5125H5.78072C5.98671 1.5125 6.1927 1.58125 6.33003 1.7875L7.01666 2.6125C7.42864 3.1625 8.04661 3.4375 8.73325 3.4375H17.2475C17.4535 3.4375 17.6595 3.50625 17.7968 3.64375C17.9341 3.78125 18.0028 3.9875 18.0028 4.19375L17.9341 4.5375H2.82821L2.62222 2.3375C2.62222 2.13125 2.69088 1.925 2.82821 1.7875Z" fill="#CCCCCC" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2547 11.7069C14.1041 11.4329 11.4329 14.1041 11.7069 17.2547C11.9123 19.7204 13.8986 21.7752 16.4328 21.9806C19.5834 22.2546 22.2546 19.5834 21.9806 16.4328C21.7752 13.8986 19.7889 11.9123 17.2547 11.7069ZM17.8711 12.4603C18.0766 12.5288 18.2821 12.5973 18.4876 12.6658C18.6245 12.7342 18.693 12.8027 18.83 12.8027C19.3779 13.0767 19.8574 13.4192 20.2683 13.8986C20.2683 13.8986 20.3368 13.9671 20.3368 14.0356C20.3368 14.1041 20.3368 14.2411 20.3368 14.3096C20.3368 14.378 20.2683 14.4465 20.2683 14.515C20.2683 14.652 20.4053 14.7205 20.4738 14.7205C20.5423 14.7205 20.6793 14.7205 20.7478 14.7205C20.8163 14.7205 20.8848 14.789 20.8848 14.8575C20.9533 14.9945 21.0217 15.1315 21.0217 15.1999C21.2272 15.6794 21.2957 16.1588 21.3642 16.7068C21.3642 16.7753 21.3642 16.8438 21.2957 16.9122C21.2272 16.9807 21.0902 17.1177 21.0217 17.2547C20.8848 17.5287 20.7478 17.9396 20.5423 18.1451C20.4053 18.2821 20.2683 18.4191 20.2683 18.556C20.1998 18.693 20.2683 18.83 20.1998 18.8985C20.1998 18.967 20.1314 18.967 20.0629 18.8985C19.8574 18.6245 19.7889 18.3506 19.7204 18.0766C19.6519 17.8711 19.6519 17.6657 19.5834 17.3917C19.5149 17.1862 19.3779 16.9807 19.1725 16.8438C18.967 16.7068 18.693 16.7753 18.4876 16.7068C18.2136 16.7068 18.0081 16.6383 17.8026 16.4328C17.7341 16.3643 17.6657 16.2273 17.6657 16.1588C17.5287 15.6109 17.8711 14.9945 18.3506 14.7205C18.4191 14.652 18.4876 14.652 18.556 14.5835C18.693 14.4465 18.7615 14.3096 18.693 14.1041C18.693 14.0356 18.6245 14.0356 18.6245 14.0356C18.4876 14.1041 18.3506 14.1041 18.2821 14.1726C18.2136 14.1726 18.1451 14.1726 18.1451 14.1041C18.1451 13.8986 18.1451 13.6931 18.2136 13.4192C18.2821 13.1452 18.3506 12.9397 18.2136 12.7342C18.2136 12.6658 18.1451 12.6658 18.0766 12.6658C17.8711 12.6658 17.6657 12.6658 17.4602 12.6658C17.5972 12.5973 17.6657 12.5288 17.7341 12.3918C17.8026 12.4603 17.8026 12.4603 17.8711 12.4603ZM15.6794 12.5288C15.7479 12.5288 15.7479 12.5288 15.8164 12.5973C15.8849 12.7342 15.9534 12.8027 16.0218 12.9397C16.1588 13.2137 16.2273 13.5561 16.0903 13.7616C15.9534 14.0356 15.6109 14.1726 15.3369 14.378C14.7205 14.652 14.2411 15.1315 13.8986 15.6794L13.8301 15.7479C13.7616 15.7479 13.7616 15.7479 13.6931 15.6794C13.6246 15.6109 13.5561 15.6109 13.4877 15.5424C13.4877 15.5424 13.4192 15.5424 13.4192 15.6109C13.3507 15.8849 13.4877 16.2273 13.7616 16.3643C13.8301 16.3643 13.8301 16.4328 13.8986 16.4328C13.9671 16.5698 13.8986 16.7068 13.8986 16.8438C13.8986 17.0492 14.1726 17.1177 14.3096 17.1177C14.4465 17.1177 14.652 16.9807 14.8575 16.9122C15.2684 16.7753 15.6794 16.8438 16.0218 17.0492C16.2273 17.1862 16.3643 17.3232 16.5013 17.4602C16.6383 17.5972 16.8438 17.6657 17.0492 17.6657C17.1177 17.6657 17.1177 17.6657 17.1862 17.7341C17.2547 17.9396 17.1862 18.1451 17.0492 18.2821C16.9122 18.4876 16.7068 18.556 16.5698 18.7615C16.2273 19.1725 16.0903 19.7889 15.8164 20.2683C15.7479 20.3368 15.6794 20.4738 15.6109 20.5423C15.4739 20.6793 15.4739 20.8163 15.4739 21.0217C15.4739 21.0217 15.4739 21.0902 15.4054 21.0902C15.3369 21.0902 15.2684 21.0217 15.1999 21.0217C15.1315 21.0217 15.1315 20.9533 15.1315 20.8848C14.9945 20.2683 14.789 19.6519 14.515 19.0355C14.378 18.83 14.2411 18.556 14.0356 18.4191C13.9671 18.3506 13.8986 18.3506 13.8986 18.2821C13.8986 18.2136 13.8986 18.1451 13.8986 18.1451C13.9671 17.5287 13.6931 16.9122 13.2137 16.5698C13.1452 16.5013 13.0082 16.4328 13.0082 16.3643C12.9397 16.2958 12.9397 16.1588 12.9397 16.0903C12.8712 16.0218 12.7342 15.8849 12.6658 15.8164C12.5973 15.8164 12.5973 15.7479 12.5973 15.6794C12.8712 14.1726 14.1041 12.9397 15.6794 12.5288Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        fill="#CCCCCC"
+        d="M13.123 19.05v-.45c0-.225 0-.525.075-.75H3.61c-.6 0-1.049-.45-1.049-.975L1.662 7.5c0-.225.075-.45.225-.6.15-.15.374-.3.6-.3h17.602c.225 0 .45.075.6.3.149.15.224.375.224.6l-.524 5.7c.3.075.524.15.748.3 0 0 .075 0 .075.075.225.15.45.225.675.375l.599-6.3a2.472 2.472 0 0 0-.6-1.875c-.15-.225-.374-.375-.599-.525l.075-.525c.15-1.35-.824-2.55-2.172-2.625H9.602c-.225 0-.45-.075-.6-.3L8.255.9C7.729.375 7.055 0 6.306 0H3.685C3.01 0 2.336.3 1.887.825c-.525.525-.75 1.2-.674 1.95l.3 2.4c-.3.15-.6.3-.9.6A2.477 2.477 0 0 0 .014 7.65l.824 9.375A2.767 2.767 0 0 0 3.61 19.5h9.662c-.075-.15-.075-.3-.15-.45ZM3.085 1.95c.15-.15.375-.3.6-.3h2.621c.225 0 .45.075.6.3l.749.9c.449.6 1.123.9 1.872.9h9.288a.85.85 0 0 1 .6.225.85.85 0 0 1 .224.6l-.075.375H3.085l-.224-2.4c0-.225.075-.45.224-.6Z" />
+    <path fill-rule="evenodd"
+        d="M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052a5.606 5.606 0 0 0-5.156-5.156Zm.673.822.672.224c.15.075.224.15.374.15.598.298 1.12.672 1.569 1.195 0 0 .075.075.075.15v.298c0 .075-.075.15-.075.225 0 .149.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .074 0 .149-.074.224a1.63 1.63 0 0 0-.3.373c-.149.3-.298.747-.522.972-.15.15-.3.298-.3.448-.074.15 0 .299-.074.373 0 .075-.075.075-.15 0-.223-.298-.298-.597-.373-.896-.075-.224-.075-.448-.15-.747a1.162 1.162 0 0 0-.448-.598c-.224-.15-.523-.075-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.3-.149-.597.225-1.27.748-1.568.075-.075.15-.075.224-.15.15-.15.224-.299.15-.523 0-.074-.075-.074-.075-.074-.15.074-.3.074-.374.149-.075 0-.15 0-.15-.075 0-.224 0-.448.075-.747s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.583.583 0 0 0 .3-.299c.074.075.074.075.149.075Zm-2.391.075c.075 0 .075 0 .15.075.074.149.149.224.223.373.15.299.224.673.075.897-.15.299-.523.448-.822.672-.672.299-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.751.751 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.299.447.299.15 0 .374-.15.598-.224a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.447.15.15.374.225.598.225.075 0 .075 0 .15.074a.581.581 0 0 1-.15.598c-.15.224-.373.299-.523.523-.373.448-.523 1.12-.822 1.644-.075.075-.15.224-.224.299-.15.15-.15.299-.15.523 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075-.075 0-.075-.075-.075-.15a10.65 10.65 0 0 0-.672-2.017c-.15-.224-.3-.523-.523-.672-.075-.075-.15-.075-.15-.15v-.15a1.878 1.878 0 0 0-.747-1.718c-.075-.075-.224-.15-.224-.224-.075-.075-.075-.224-.075-.299l-.299-.299c-.075 0-.075-.075-.075-.15.3-1.643 1.644-2.988 3.363-3.436Z" />
 </svg>
-    
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconPuzzlePieceSmall.svg b/packages/components/src/common/svgs/IconPuzzlePieceSmall.svg
index 96e638934..fd21acdeb 100644
--- a/packages/components/src/common/svgs/IconPuzzlePieceSmall.svg
+++ b/packages/components/src/common/svgs/IconPuzzlePieceSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M5.62674826,0.709 C6.37509288,0.709 6.91,1.14121724 6.91,1.8182381 C6.91,2.11778552 6.83648007,2.31475854 6.63380462,2.61297401 L6.49655034,2.80581175 C6.22548657,3.17971405 6.12,3.40765797 6.12,3.75774546 C6.12,4.69756753 7.02118358,4.90615783 8.45922019,4.62213914 C8.80660779,4.55352853 9.17455584,4.45778711 9.55240969,4.34181942 L9.8289873,4.25391502 L10.0962671,4.16328904 L10.433,4.041 L10.4244129,4.07325179 C10.3637731,4.29018861 10.3031516,4.52539747 10.2465548,4.77067034 C10.1656242,5.12139896 10.0997853,5.46328312 10.0543781,5.78562046 C9.87037224,7.09184555 10.033838,8.44 10.7465139,8.44 C10.8415279,8.44 10.9355408,8.42077099 11.0336806,8.3838697 C11.0892293,8.36298296 11.1451145,8.33701517 11.2070578,8.30382759 L11.3052315,8.24836402 C11.3570012,8.21783675 11.5423,8.10312527 11.5764718,8.08256949 C11.942752,7.86223651 12.2256885,7.76091164 12.5985174,7.76091164 C13.3075819,7.76091164 13.75,8.33109019 13.75,9.11993871 C13.75,9.86559545 13.3206875,10.3834363 12.6354219,10.3834171 C12.3341175,10.3834171 12.1360641,10.3104332 11.8363762,10.1093326 L11.6426277,9.97317058 C11.2673076,9.70450882 11.0385914,9.6 10.6874948,9.6 C9.99465418,9.6 9.72496421,10.1701724 9.75864774,11.0681852 C9.76925695,11.3510301 9.80959397,11.6521831 9.87017989,11.9555198 L9.92059332,12.1889978 L9.942,12.28 L9.80762972,12.2877124 C9.71763576,12.2944606 9.60943243,12.3051498 9.46006001,12.321767 L8.41102886,12.4430445 L8.28180276,12.4560801 C6.83951443,12.5961451 6.13933333,12.4379503 6.13933333,11.821625 C6.13933333,11.5740487 6.20768763,11.4006263 6.39315994,11.1370968 L6.875,10.625 C7.18989269,10.2069478 7.155,9.89429538 7.155,9.485 C7.155,8.6532226 6.31659272,8.125 5.4388125,8.125 C4.53308308,8.125 3.675,8.64893373 3.675,9.515 C3.675,9.89308675 3.72855783,10.2887368 3.975,10.625 L4.35806123,11.0760401 C4.38864993,11.1139118 4.5361619,11.2913224 4.57313481,11.3378578 C4.64477429,11.4280258 4.69312939,11.4980392 4.72686826,11.5629102 C4.76388835,11.6340902 4.78169271,11.6968095 4.78169271,11.7565499 C4.78169271,12.3399768 4.08963716,12.5859053 2.89517445,12.5445225 C2.49109079,12.5305228 2.05749071,12.4839233 1.61934407,12.4149684 L1.32379846,12.3653369 L1,12.302 L1,4.5 L1.26732335,4.55332293 C1.35697786,4.569758 1.45543002,4.5868114 1.56125173,4.60385804 C1.99776523,4.67417526 2.43028912,4.72172749 2.83559071,4.73603312 C4.12859908,4.7816715 4.93001136,4.48971165 4.93,3.69893927 C4.93,3.60372927 4.91007034,3.50961131 4.87187202,3.41148421 C4.83950722,3.32834276 4.79537538,3.2445277 4.73201352,3.14073805 L4.56110616,2.87066305 C4.334241,2.50637707 4.23,2.22521413 4.23,1.85495983 C4.23,1.15269006 4.82122404,0.709 5.62674826,0.709 Z"
-        id="Path"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M6.43.81c.856 0 1.467.494 1.467 1.268 0 .342-.084.567-.316.908l-.156.22c-.31.428-.43.688-.43 1.089 0 1.074 1.03 1.312 2.673.987.397-.078.817-.187 1.249-.32l.316-.1.306-.104.384-.14-.01.037c-.069.248-.138.517-.203.797-.092.401-.167.792-.22 1.16-.21 1.493-.023 3.034.792 3.034a.922.922 0 0 0 .328-.064c.063-.024.127-.054.198-.092l.112-.063c.06-.035.271-.166.31-.19.419-.252.742-.367 1.168-.367.81 0 1.316.651 1.316 1.553 0 .852-.49 1.444-1.274 1.444-.344 0-.57-.084-.913-.314l-.221-.155c-.43-.307-.69-.427-1.092-.427-.792 0-1.1.652-1.061 1.678.012.324.058.668.127 1.014l.058.267.024.104-.153.01a9.379 9.379 0 0 0-.397.038l-1.2.139-.147.014c-1.648.16-2.449-.02-2.449-.725 0-.283.079-.48.29-.782l.551-.585c.36-.478.32-.835.32-1.303 0-.95-.958-1.554-1.961-1.554-1.035 0-2.016.598-2.016 1.588 0 .432.061.884.343 1.269l.438.515c.035.044.203.246.245.3.082.103.138.183.176.257a.48.48 0 0 1 .063.221c0 .667-.791.948-2.156.9a11.97 11.97 0 0 1-1.458-.148l-.338-.056-.37-.073V5.143l.305.06a11.919 11.919 0 0 0 1.792.209c1.478.053 2.394-.28 2.394-1.185a.896.896 0 0 0-.066-.328 1.95 1.95 0 0 0-.16-.31l-.195-.308c-.26-.417-.379-.738-.379-1.161 0-.803.676-1.31 1.597-1.31Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconQuestionMarkLarge.svg b/packages/components/src/common/svgs/IconQuestionMarkLarge.svg
index 180eb8582..5c5d196c1 100644
--- a/packages/components/src/common/svgs/IconQuestionMarkLarge.svg
+++ b/packages/components/src/common/svgs/IconQuestionMarkLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0775 15.2C11.4507 15.2 11.8172 15.3522 12.0825 15.6182C12.3479 15.8809 12.5008 16.2478 12.5008 16.6235C12.5008 17.0007 12.3479 17.3685 12.0811 17.6324C11.822 17.8947 11.4549 18.0469 11.0775 18.0469C10.7012 18.0469 10.334 17.895 10.0698 17.6306C9.80551 17.3663 9.65398 16.9993 9.65398 16.6234C9.65398 16.2489 9.80567 15.8824 10.0698 15.6182C10.3355 15.3522 10.7027 15.2 11.0775 15.2ZM11.0552 3.60938C13.5413 3.60938 15.6422 5.30078 15.7537 7.37916L15.7584 7.55744L15.7519 7.77956L15.7344 7.99383C15.6063 9.18249 14.9853 9.95049 13.6777 10.9471L13.4799 11.0995L13.1354 11.3763C12.4597 11.9409 12.2297 12.2999 12.1662 12.896C12.1603 13.2718 11.854 13.5733 11.4782 13.5733H10.7611C10.3248 13.5733 9.97354 13.2151 9.98209 12.7789C10.1047 11.486 10.7853 10.6322 12.1326 9.60537C13.2723 8.74542 13.5714 8.36928 13.5714 7.55254C13.5714 6.37287 12.4623 5.44299 11.0552 5.44299L10.882 5.44774L10.7037 5.46273C9.58697 5.5895 9.02734 6.04297 8.73047 6.71484C8.61175 7.08388 8.2684 7.33411 7.88073 7.33411H6.99191C6.66564 7.33411 6.42179 7.03427 6.48828 6.71484C6.8121 4.81512 8.71139 3.60938 11.0552 3.60938Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M12.085 16.582a1.56 1.56 0 0 1 1.552 1.553 1.557 1.557 0 0 1-1.553 1.552c-.41 0-.81-.165-1.099-.454a1.564 1.564 0 0 1-.453-1.098c0-.409.165-.809.453-1.097.29-.29.69-.456 1.1-.456ZM12.06 3.937c2.712 0 5.004 1.846 5.126 4.113l.005.194-.007.243-.02.234c-.139 1.296-.816 2.134-2.243 3.221l-.216.167-.376.302c-.737.615-.988 1.007-1.057 1.657a.75.75 0 0 1-.75.74h-.783a.85.85 0 0 1-.85-.867c.134-1.41.877-2.342 2.347-3.462 1.243-.939 1.57-1.349 1.57-2.24 0-1.287-1.21-2.301-2.746-2.301l-.189.005-.194.016c-1.218.139-1.829.633-2.153 1.366a.974.974 0 0 1-.927.676h-.97a.561.561 0 0 1-.549-.676c.353-2.072 2.425-3.388 4.982-3.388Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconQuoteLarge.svg b/packages/components/src/common/svgs/IconQuoteLarge.svg
index 3998d0a06..e48219a00 100644
--- a/packages/components/src/common/svgs/IconQuoteLarge.svg
+++ b/packages/components/src/common/svgs/IconQuoteLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M0 5.86666C0 4.6702 0.962092 3.66666 2.17708 3.66666H7.21875C8.43374 3.66666 9.39583 4.6702 9.39583 5.86666V11.6802C9.39583 12.2167 9.27612 12.74 9.03729 13.2264L7.24911 16.8678C6.81792 17.7618 5.90481 18.3333 4.91219 18.3333C2.95161 18.3333 1.71904 16.2539 2.5777 14.5213L2.57868 14.5193L3.22654 13.2H2.17708C0.962092 13.2 0 12.1964 0 11V5.86666ZM2.17708 5.49999C2.00562 5.49999 1.83333 5.65144 1.83333 5.86666V11C1.83333 11.2152 2.00562 11.3667 2.17708 11.3667H5.43361C5.77289 11.3667 5.99456 11.7225 5.84501 12.027L4.2225 15.331L4.2207 15.3347C3.9469 15.886 4.35268 16.5 4.91219 16.5C5.20371 16.5 5.47415 16.3289 5.59834 16.0702L5.60185 16.0629L7.39167 12.4183C7.50575 12.186 7.5625 11.9393 7.5625 11.6802V5.86666C7.5625 5.65144 7.39022 5.49999 7.21875 5.49999H2.17708ZM12.6042 5.86666C12.6042 4.6702 13.5663 3.66666 14.7813 3.66666H19.8229C21.0379 3.66666 22 4.6702 22 5.86666V11.6802C22 12.2166 21.8803 12.74 21.6415 13.2264L19.8533 16.8677C19.4222 17.7618 18.509 18.3333 17.5164 18.3333C15.5558 18.3333 14.3232 16.2539 15.1818 14.5213L15.1828 14.5193L15.8307 13.2H14.7813C13.5663 13.2 12.6042 12.1964 12.6042 11V5.86666ZM14.7813 5.49999C14.6098 5.49999 14.4375 5.65144 14.4375 5.86666V11C14.4375 11.2152 14.6098 11.3667 14.7813 11.3667H18.0378C18.3771 11.3667 18.5987 11.7225 18.4492 12.027L16.8267 15.331L16.8249 15.3347C16.5511 15.886 16.9568 16.5 17.5164 16.5C17.8079 16.5 18.0783 16.3289 18.2025 16.0702L18.206 16.0629L19.9958 12.4183C20.1099 12.186 20.1667 11.9393 20.1667 11.6802V5.86666C20.1667 5.65144 19.9944 5.49999 19.8229 5.49999H14.7813Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M0 6.4C0 5.095 1.05 4 2.375 4h5.5C9.2 4 10.25 5.095 10.25 6.4v6.342c0 .585-.13 1.156-.391 1.687L7.909 18.4A2.837 2.837 0 0 1 5.358 20c-2.14 0-3.484-2.268-2.547-4.159l.001-.002.707-1.439H2.375C1.05 14.4 0 13.305 0 12V6.4ZM2.375 6A.392.392 0 0 0 2 6.4V12c0 .235.188.4.375.4h3.553a.5.5 0 0 1 .448.72l-1.77 3.605-.002.004C4.306 17.33 4.748 18 5.36 18a.837.837 0 0 0 .748-.469l.004-.008 1.953-3.976c.124-.253.186-.522.186-.805V6.4c0-.235-.188-.4-.375-.4h-5.5Zm11.375.4c0-1.305 1.05-2.4 2.375-2.4h5.5C22.95 4 24 5.095 24 6.4v6.342c0 .585-.13 1.156-.391 1.687l-1.95 3.972A2.837 2.837 0 0 1 19.108 20c-2.139 0-3.484-2.268-2.547-4.159l.001-.002.707-1.439h-1.145c-1.325 0-2.375-1.095-2.375-2.4V6.4Zm2.375-.4a.392.392 0 0 0-.375.4V12c0 .235.188.4.375.4h3.553a.5.5 0 0 1 .448.72l-1.77 3.605-.002.004c-.298.601.144 1.271.755 1.271a.837.837 0 0 0 .748-.469l.004-.008 1.953-3.976c.124-.253.186-.522.186-.805V6.4c0-.235-.188-.4-.375-.4h-5.5Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconRadioChecked.svg b/packages/components/src/common/svgs/IconRadioChecked.svg
index ecc361e83..9bdf6c38b 100644
--- a/packages/components/src/common/svgs/IconRadioChecked.svg
+++ b/packages/components/src/common/svgs/IconRadioChecked.svg
@@ -1,8 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
-        fill="white" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z"
-        fill="#000" />
-</svg>
\ No newline at end of file
+  <path fill-rule="evenodd" d="M5 8a3 3 0 1 0 6 0 3 3 0 0 0-6 0Zm3-8a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconRadioUnchecked.svg b/packages/components/src/common/svgs/IconRadioUnchecked.svg
index 7f7d160d7..2fd2bf8ee 100644
--- a/packages/components/src/common/svgs/IconRadioUnchecked.svg
+++ b/packages/components/src/common/svgs/IconRadioUnchecked.svg
@@ -1,8 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
-        fill="white" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z"
-        fill="#000" />
+  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Zm7-8a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z" />
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconReadLarge.svg b/packages/components/src/common/svgs/IconReadLarge.svg
index d4fb8621f..486063502 100644
--- a/packages/components/src/common/svgs/IconReadLarge.svg
+++ b/packages/components/src/common/svgs/IconReadLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="black" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M11.2502 3.99937C11.2504 4.49145 10.8765 4.89633 10.3972 4.94492H10.2998L8.49999 8.21805C8.32033 8.21805 8.09458 8.24999 7.90622 8.42186C7.89585 8.43133 7.88787 8.44011 7.88206 8.44825C7.99395 8.43668 8.10752 8.43076 8.22247 8.43076C9.01378 8.43076 9.73949 8.71162 10.3054 9.17909C11.1699 8.65761 12.2556 8.64515 13.1307 9.14169C13.6896 8.69678 14.3974 8.43092 15.1673 8.43092C15.6983 8.43092 16.1998 8.55741 16.6433 8.78191C16.8085 8.41482 16.9742 8.04791 17.1398 7.68099L17.1399 7.68096C17.6747 6.49629 18.2097 5.31151 18.7291 4.12028C18.8796 3.77525 19.1421 3.51471 19.4929 3.38786C19.7453 3.29659 19.9997 3.29907 20.0837 3.29989L20.0999 3.3C20.6246 3.3 21.0499 3.72533 21.0499 4.25C21.0499 4.69095 20.7495 5.06174 20.3422 5.16884H20.2421C19.8802 5.97955 19.5375 6.79935 19.1948 7.6194L19.1948 7.61949C18.8426 8.4621 18.4903 9.30497 18.1169 10.1385C18.1057 10.1635 18.0936 10.1877 18.0806 10.2112C18.3102 10.6586 18.4398 11.1659 18.4398 11.7034C18.4398 13.5108 16.9746 14.976 15.1673 14.976C13.3599 14.976 11.8948 13.5108 11.8948 11.7034C11.8948 11.2576 11.9839 10.8325 12.1454 10.4451C11.8578 10.345 11.5398 10.3576 11.2598 10.4827C11.4115 10.8599 11.495 11.2718 11.495 11.7033C11.495 13.5106 10.0298 14.9758 8.22247 14.9758C6.41511 14.9758 4.94995 13.5106 4.94995 11.7033C4.94995 11.0529 5.13965 10.4469 5.46674 9.93749C5.58753 9.58156 5.76125 9.22815 5.87535 9.02847L8.87536 3.77847C8.90684 3.72338 8.94376 3.67159 8.98556 3.62386L8.98663 3.62264L8.98773 3.6214L8.99 3.61883L8.99488 3.61338L9.00595 3.60126C9.01392 3.59266 9.0231 3.58301 9.03348 3.57247C9.05418 3.55144 9.07997 3.52659 9.11078 3.49932C9.11922 3.49185 9.1281 3.48388 9.13742 3.47552C9.19552 3.42335 9.27055 3.356 9.36228 3.3C9.57545 3.16988 9.89484 3.04999 10.2998 3.0498C10.8244 3.04956 11.25 3.4747 11.2502 3.99937ZM2.59717 5.10651C2.59717 4.59703 2.79953 4.10857 3.15965 3.74831C3.51992 3.3882 4.0084 3.18579 4.51789 3.18579H6.38421C6.64938 3.18579 6.89437 3.32725 7.0269 3.55685C7.15942 3.78643 7.15942 4.06933 7.0269 4.29891C6.89437 4.52852 6.64938 4.66997 6.38421 4.66997H4.51789C4.40211 4.66997 4.29102 4.71598 4.20919 4.79781C4.12736 4.87964 4.08135 4.99074 4.08135 5.10651V17.4821C4.08135 17.5979 4.12736 17.709 4.20919 17.7908C4.29102 17.8726 4.40211 17.9186 4.51789 17.9186H16.8935C17.0092 17.9186 17.1203 17.8726 17.2022 17.7908C17.284 17.709 17.33 17.5979 17.33 17.4821V16.3698C17.33 16.173 17.4082 15.9789 17.5473 15.8398C17.6865 15.7006 17.8753 15.6198 18.0721 15.6198C18.2689 15.6198 18.4577 15.7006 18.5968 15.8398C18.736 15.9789 18.8142 16.173 18.8142 16.3698V17.4821C18.8142 17.9916 18.6118 18.4801 18.2517 18.8403C17.8914 19.2004 17.4029 19.4028 16.8935 19.4028H4.51789C4.0084 19.4028 3.51991 19.2004 3.15965 18.8403C2.79953 18.48 2.59717 17.9916 2.59717 17.4821V5.10651ZM13.4948 11.7034C13.4948 10.7797 14.2436 10.0309 15.1673 10.0309C16.091 10.0309 16.8398 10.7797 16.8398 11.7034C16.8398 12.6271 16.091 13.376 15.1673 13.376C14.2436 13.376 13.4948 12.6271 13.4948 11.7034ZM8.22247 10.0308C7.29876 10.0308 6.54995 10.7796 6.54995 11.7033C6.54995 12.627 7.29876 13.3758 8.22247 13.3758C9.14617 13.3758 9.89498 12.627 9.89498 11.7033C9.89498 10.7796 9.14617 10.0308 8.22247 10.0308Z"></path>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M11.375 4.116c0 .537-.408.979-.93 1.032h-.107l-1.964 3.57c-.196 0-.442.035-.647.223a.188.188 0 0 0-.027.028 3.556 3.556 0 0 1 2.644.797 3.06 3.06 0 0 1 3.082-.04 3.555 3.555 0 0 1 2.222-.776c.58 0 1.126.138 1.61.383l.542-1.2c.583-1.293 1.167-2.586 1.733-3.885.165-.376.451-.66.834-.799.275-.1.552-.097.644-.096h.018a1.036 1.036 0 0 1 .264 2.039h-.109c-.395.884-.769 1.779-1.143 2.673-.384.92-.768 1.839-1.175 2.748a1.105 1.105 0 0 1-.04.08 3.57 3.57 0 1 1-6.475.255 1.314 1.314 0 0 0-.966.04 3.57 3.57 0 1 1-6.32-.595c.132-.387.322-.773.446-.99l3.273-5.728a.996.996 0 0 1 .12-.169h.001l.001-.002.003-.003.005-.006.012-.013a1.42 1.42 0 0 1 .115-.111l.029-.026c.063-.057.145-.13.245-.192a1.966 1.966 0 0 1 1.023-.273c.572 0 1.036.464 1.037 1.036Zm-9.44 1.208A2.096 2.096 0 0 1 4.03 3.229h2.036a.81.81 0 1 1 0 1.619H4.03a.476.476 0 0 0-.476.476v13.5a.476.476 0 0 0 .476.477h13.5a.477.477 0 0 0 .477-.476V17.61a.812.812 0 0 1 .81-.818.812.812 0 0 1 .81.818v1.213a2.096 2.096 0 0 1-2.096 2.096H4.03a2.096 2.096 0 0 1-2.096-2.096v-13.5Zm11.888 7.197a1.825 1.825 0 1 1 3.65 0 1.825 1.825 0 0 1-3.65 0Zm-5.751-1.825a1.825 1.825 0 1 0 0 3.649 1.825 1.825 0 0 0 0-3.65Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconRefreshLarge.svg b/packages/components/src/common/svgs/IconRefreshLarge.svg
index 41fb362c1..87991edda 100644
--- a/packages/components/src/common/svgs/IconRefreshLarge.svg
+++ b/packages/components/src/common/svgs/IconRefreshLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.59 6.06125L16.624 4.52684C16.6347 4.04681 17.037 3.66888 17.5168 3.68831C17.9851 3.70728 18.3516 4.09842 18.34 4.56696L18.2388 8.68284C18.2236 9.30041 17.6577 9.75663 17.051 9.64039L13.0286 8.86976C12.5497 8.77801 12.2346 8.31703 12.323 7.83752C12.4118 7.35552 12.8746 7.03686 13.3566 7.12583L15.3495 7.49373C14.974 6.84943 14.4863 6.28364 13.9084 5.83053C12.9006 5.04016 11.6768 4.63825 10.4329 4.68906C9.189 4.73987 7.99675 5.24048 7.04685 6.11083C6.31448 6.78186 5.78575 7.65395 5.46691 8.62269C5.31027 9.09859 4.83382 9.41858 4.34479 9.30962C3.87682 9.20534 3.57164 8.74648 3.70513 8.28599C4.11316 6.87843 4.85494 5.60996 5.90299 4.64969C7.15505 3.5025 8.72653 2.84265 10.3661 2.77567C12.0057 2.7087 13.6187 3.23845 14.9472 4.28023C15.5833 4.77905 16.1365 5.38147 16.59 6.06125ZM6.65527 14.5036C7.03079 15.1479 7.51851 15.7137 8.09631 16.1668C9.10418 16.9572 10.3279 17.3591 11.5718 17.3083C12.8158 17.2574 14.008 16.7568 14.9579 15.8865C15.6903 15.2155 16.219 14.3434 16.5379 13.3746C16.6945 12.8987 17.1709 12.5787 17.66 12.6877C18.1279 12.792 18.4331 13.2508 18.2996 13.7113C17.8916 15.1189 17.1498 16.3874 16.1018 17.3476C14.8497 18.4948 13.2782 19.1547 11.6386 19.2216C9.99903 19.2886 8.38602 18.7589 7.05756 17.7171C6.42144 17.2182 5.86815 16.6158 5.41468 15.936L5.38066 17.4705C5.37002 17.9505 4.96765 18.3284 4.48789 18.309C4.01959 18.29 3.65311 17.8989 3.66463 17.4304L3.76585 13.3145C3.78103 12.6969 4.34698 12.2407 4.95371 12.3569L8.97611 13.1276C9.45499 13.2193 9.7701 13.6803 9.68172 14.1598C9.59287 14.6418 9.13006 14.9605 8.64809 14.8715L6.65527 14.5036Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="m18.098 6.612.037-1.674a.936.936 0 1 1 1.872.044l-.11 4.49a1.09 1.09 0 0 1-1.296 1.045l-4.388-.84a.968.968 0 0 1 .358-1.903l2.174.401a6.39 6.39 0 0 0-1.572-1.814 5.754 5.754 0 0 0-3.792-1.246c-1.357.056-2.657.602-3.694 1.551-.798.732-1.375 1.684-1.723 2.74-.171.52-.69.869-1.224.75-.51-.114-.844-.614-.698-1.117.445-1.535 1.254-2.919 2.398-3.967 1.366-1.251 3.08-1.97 4.869-2.044 1.788-.073 3.548.505 4.997 1.641a8.36 8.36 0 0 1 1.792 1.943ZM7.26 15.822a6.39 6.39 0 0 0 1.572 1.815c1.1.862 2.435 1.3 3.792 1.245 1.357-.056 2.657-.602 3.694-1.551.799-.732 1.375-1.684 1.723-2.74.171-.52.69-.869 1.224-.75.51.114.844.615.698 1.117-.445 1.535-1.254 2.92-2.397 3.967-1.366 1.251-3.08 1.971-4.87 2.044-1.788.073-3.548-.505-4.997-1.641a8.362 8.362 0 0 1-1.792-1.943l-.037 1.674a.936.936 0 1 1-1.872-.044l.11-4.49a1.09 1.09 0 0 1 1.296-1.045l4.388.841a.968.968 0 0 1-.358 1.902l-2.174-.4Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconRefreshSmall.svg b/packages/components/src/common/svgs/IconRefreshSmall.svg
index dc62ba18b..54c78a4b9 100644
--- a/packages/components/src/common/svgs/IconRefreshSmall.svg
+++ b/packages/components/src/common/svgs/IconRefreshSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14"  xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7392 2.45583L11.711 3.72739C11.3352 3.16405 10.8767 2.66483 10.3496 2.25146C9.24876 1.38818 7.91211 0.949183 6.55343 1.00468C5.19475 1.06019 3.89252 1.60698 2.85498 2.55762C1.98649 3.35337 1.3718 4.40451 1.03368 5.5709C0.923066 5.95249 1.17596 6.33274 1.56375 6.41915C1.96899 6.50944 2.36381 6.24428 2.49361 5.84991C2.75782 5.04715 3.19596 4.32448 3.80286 3.76841C4.59001 3.04719 5.57798 2.63235 6.60877 2.59025C7.63957 2.54814 8.65365 2.88119 9.48883 3.53614C9.96764 3.91163 10.3718 4.38047 10.683 4.91439L9.03156 4.60953C8.63217 4.5358 8.24865 4.79987 8.17503 5.19928C8.10179 5.59663 8.36291 5.97864 8.75975 6.05466L11.8944 6.65522C12.5011 6.77146 13.0671 6.31524 13.0823 5.69767L13.1612 2.48907C13.1707 2.10081 12.867 1.77669 12.479 1.76097C12.0814 1.74487 11.748 2.05804 11.7392 2.45583ZM1.00022 11.9409C0.990671 12.3292 1.29436 12.6533 1.68243 12.669C2.07998 12.6851 2.41342 12.3719 2.42224 11.9741L2.45043 10.7026C2.82619 11.2659 3.28468 11.7651 3.8118 12.1785C4.91265 13.0418 6.24929 13.4808 7.60797 13.4253C8.96665 13.3698 10.2689 12.823 11.3064 11.8724C12.1749 11.0766 12.7896 10.0255 13.1277 8.85908C13.2383 8.47748 12.9854 8.09724 12.5977 8.01083C12.1924 7.92053 11.7976 8.1857 11.6678 8.58006C11.4036 9.38282 10.9654 10.1055 10.3586 10.6616C9.5714 11.3828 8.58343 11.7976 7.55263 11.8397C6.52184 11.8818 5.50776 11.5488 4.67257 10.8938C4.19376 10.5183 3.7896 10.0495 3.47842 9.51558L5.12984 9.82044C5.52923 9.89417 5.91276 9.63011 5.98638 9.23069C6.05962 8.83334 5.79849 8.45134 5.40166 8.37531L2.26698 7.77475C1.66026 7.65851 1.09431 8.11473 1.07912 8.73231L1.00022 11.9409Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="m13.416 2.807-.032 1.453a7.258 7.258 0 0 0-1.556-1.687C10.57 1.586 9.042 1.085 7.49 1.148c-1.553.064-3.041.689-4.227 1.775-.993.91-1.695 2.11-2.082 3.444-.126.436.163.87.606.97.463.102.915-.2 1.063-.651.302-.918.803-1.744 1.496-2.38A5.05 5.05 0 0 1 7.553 2.96a4.995 4.995 0 0 1 3.291 1.081 5.54 5.54 0 0 1 1.365 1.575l-1.887-.348a.84.84 0 0 0-.31 1.652l3.582.686a1.143 1.143 0 0 0 1.357-1.094l.09-3.667a.813.813 0 1 0-1.625-.038ZM1.143 13.647a.813.813 0 1 0 1.625.038l.033-1.454a7.243 7.243 0 0 0 1.555 1.687c1.258.987 2.786 1.489 4.339 1.425 1.553-.063 3.04-.688 4.227-1.775.992-.909 1.695-2.11 2.081-3.443.127-.436-.162-.871-.606-.97-.463-.103-.914.2-1.062.65-.302.918-.803 1.744-1.497 2.38a5.05 5.05 0 0 1-3.206 1.346 4.995 4.995 0 0 1-3.292-1.08 5.547 5.547 0 0 1-1.365-1.576l1.888.348a.84.84 0 0 0 .31-1.651l-3.582-.687A1.143 1.143 0 0 0 1.233 9.98l-.09 3.667Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconReportLarge.svg b/packages/components/src/common/svgs/IconReportLarge.svg
new file mode 100644
index 000000000..b3f551a5d
--- /dev/null
+++ b/packages/components/src/common/svgs/IconReportLarge.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.142 21.243h11.554a.77.77 0 1 0 0-1.54H3.912V2.756h9.244v3.851c0 .425.344.77.77.77h3.851V9.69a.77.77 0 1 0 1.54 0V6.61a.775.775 0 0 0-.226-.546l-4.62-4.62a.776.776 0 0 0-.545-.226H3.142a.77.77 0 0 0-.77.77v18.486c0 .425.345.77.77.77ZM14.696 3.846l1.992 1.992h-1.992V3.846Z"/>
+  <path d="M11.615 9.305c0-2.18-2.018-4.627-2.104-4.73-.294-.35-.89-.35-1.184 0-.086.103-2.104 2.55-2.104 4.73A2.7 2.7 0 0 0 8.92 12a2.7 2.7 0 0 0 2.696-2.695Zm-3.851 0c0-.942.618-2.113 1.156-2.932.537.817 1.154 1.987 1.154 2.932a1.157 1.157 0 0 1-2.31 0Zm0 5.005a.77.77 0 0 1-.77.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77Zm6.932 0a.77.77 0 0 1-.77.77h-3.852a.77.77 0 1 1 0-1.54h3.852a.77.77 0 0 1 .77.77Zm-6.932 3.082a.77.77 0 0 1-.77.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77Zm6.932 0a.77.77 0 0 1-.77.77h-3.852a.77.77 0 1 1 0-1.54h3.852a.77.77 0 0 1 .77.77Zm.77-5.392v2.31a.77.77 0 0 0 .77.771v5.392a2.313 2.313 0 0 0 2.311 2.31 2.313 2.313 0 0 0 2.31-2.31V15.08a.77.77 0 0 0 .771-.77V12a.77.77 0 0 0-.77-.77h-4.622a.77.77 0 0 0-.77.77Zm3.851 8.473a.771.771 0 0 1-1.54 0V15.08h1.54v5.392Zm-2.31-7.703h3.08v.77h-3.08v-.77Z"/>
+  <path fill-rule="evenodd" d="M2.372 20.473c0 .425.345.77.77.77h11.554a.77.77 0 1 0 0-1.54H3.912V2.756h9.244v3.851c0 .425.344.77.77.77h3.851V9.69a.77.77 0 1 0 1.54 0V6.61a.775.775 0 0 0-.226-.546l-4.62-4.62a.776.776 0 0 0-.545-.226H3.142a.77.77 0 0 0-.77.77v18.486Zm9.243-11.168c0-2.18-2.018-4.627-2.104-4.73-.294-.35-.89-.35-1.184 0-.086.103-2.104 2.55-2.104 4.73A2.7 2.7 0 0 0 8.92 12a2.7 2.7 0 0 0 2.696-2.695Zm-3.85 5.005a.77.77 0 0 1-.771.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77Zm6.93 0a.77.77 0 0 1-.77.77h-3.85a.77.77 0 1 1 0-1.54h3.85a.77.77 0 0 1 .77.77Zm-6.93 3.082a.77.77 0 0 1-.771.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77Zm6.93 0a.77.77 0 0 1-.77.77h-3.85a.77.77 0 1 1 0-1.54h3.85a.77.77 0 0 1 .77.77ZM15.467 12v2.31a.77.77 0 0 0 .77.771v5.392a2.313 2.313 0 0 0 2.311 2.31 2.313 2.313 0 0 0 2.31-2.31V15.08a.77.77 0 0 0 .771-.77V12a.77.77 0 0 0-.77-.77h-4.622a.77.77 0 0 0-.77.77ZM7.764 9.305c0-.942.618-2.113 1.156-2.932.537.817 1.154 1.987 1.154 2.932a1.157 1.157 0 0 1-2.31 0Zm8.924-3.467-1.992-1.992v1.992h1.992Zm2.63 14.635a.771.771 0 0 1-1.541 0V15.08h1.54v5.392Zm.77-7.703h-3.081v.77h3.08v-.77Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconRocketLarge.svg b/packages/components/src/common/svgs/IconRocketLarge.svg
index ddb0a31fc..a667eee83 100644
--- a/packages/components/src/common/svgs/IconRocketLarge.svg
+++ b/packages/components/src/common/svgs/IconRocketLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="black" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M 12.572 5.246 C 13.664 4.155 15.21 3.759 16.582 3.681 C 17.26 3.642 17.868 3.683 18.312 3.742 C 18.457 3.761 18.582 3.782 18.683 3.803 C 18.703 3.904 18.724 4.028 18.744 4.174 C 18.803 4.618 18.843 5.226 18.805 5.903 C 18.726 7.275 18.331 8.821 17.239 9.913 C 16.676 10.477 15.223 11.673 13.873 12.755 C 13.206 13.29 12.576 13.788 12.112 14.152 L 11.84 14.366 L 11.394 13.92 L 11.388 13.915 L 10.475 13.001 L 12.33 11.145 C 12.604 10.872 12.604 10.429 12.33 10.155 C 12.057 9.882 11.614 9.882 11.34 10.155 L 9.485 12.011 L 8.119 10.646 L 8.333 10.373 C 8.698 9.91 9.196 9.279 9.731 8.612 C 10.814 7.262 12.009 5.809 12.572 5.246 Z M 9.485 13.991 L 11.471 15.977 C 11.771 16.283 11.868 16.812 11.821 17.426 C 11.798 17.714 11.747 17.979 11.7 18.172 C 11.677 18.268 11.656 18.344 11.64 18.395 C 11.633 18.42 11.627 18.439 11.623 18.451 L 11.619 18.463 C 11.519 18.757 11.625 19.083 11.88 19.262 C 12.135 19.441 12.478 19.429 12.721 19.234 L 12.722 19.233 L 12.725 19.231 L 12.736 19.222 L 12.771 19.193 C 12.801 19.168 12.843 19.132 12.895 19.087 C 13.001 18.995 13.148 18.862 13.321 18.695 C 13.666 18.361 14.122 17.882 14.558 17.305 C 15.38 16.216 16.26 14.605 15.914 12.904 C 16.876 12.117 17.78 11.353 18.229 10.903 C 19.667 9.465 20.115 7.517 20.202 5.983 C 20.247 5.207 20.201 4.51 20.131 3.988 C 20.096 3.728 20.055 3.505 20.013 3.332 C 19.992 3.247 19.968 3.163 19.942 3.09 C 19.929 3.054 19.912 3.01 19.89 2.964 C 19.875 2.934 19.828 2.838 19.738 2.748 C 19.648 2.658 19.552 2.61 19.522 2.596 C 19.476 2.573 19.432 2.556 19.395 2.543 C 19.322 2.517 19.239 2.494 19.154 2.473 C 18.981 2.431 18.757 2.389 18.497 2.354 C 17.976 2.285 17.278 2.239 16.503 2.283 C 14.969 2.371 13.021 2.818 11.582 4.256 C 11.13 4.708 10.358 5.621 9.565 6.592 C 7.881 6.27 6.289 7.142 5.21 7.956 C 4.632 8.392 4.153 8.848 3.819 9.193 C 3.652 9.367 3.519 9.514 3.428 9.619 C 3.382 9.672 3.346 9.714 3.321 9.743 L 3.292 9.779 L 3.284 9.789 L 3.281 9.792 L 3.28 9.793 C 3.085 10.036 3.073 10.38 3.252 10.635 C 3.431 10.89 3.757 10.996 4.052 10.895 L 4.064 10.891 C 4.075 10.887 4.094 10.881 4.119 10.874 C 4.17 10.859 4.246 10.837 4.342 10.814 C 4.536 10.768 4.8 10.716 5.088 10.694 C 5.707 10.646 6.239 10.745 6.544 11.05 L 7.604 12.11 C 7.605 12.111 7.606 12.113 7.608 12.114 L 8.495 13.001 L 7.365 14.131 C 7.091 14.404 7.091 14.847 7.365 15.121 C 7.638 15.394 8.081 15.394 8.355 15.121 L 9.485 13.991 Z M 7.079 9.704 C 7.127 9.643 7.178 9.577 7.233 9.508 C 7.56 9.091 7.995 8.541 8.468 7.949 C 7.646 8.056 6.806 8.505 6.053 9.074 C 5.954 9.148 5.858 9.224 5.765 9.3 C 6.197 9.339 6.661 9.451 7.079 9.704 Z M 13.441 16.461 C 14.023 15.69 14.479 14.83 14.573 13.988 C 13.967 14.473 13.402 14.919 12.977 15.253 L 12.789 15.401 C 13.057 15.827 13.174 16.305 13.215 16.749 C 13.29 16.656 13.366 16.56 13.441 16.461 Z M 15.692 7.642 C 15.419 7.915 15.026 7.888 14.812 7.674 C 14.598 7.46 14.571 7.066 14.843 6.794 C 15.115 6.522 15.509 6.549 15.723 6.763 C 15.937 6.976 15.964 7.37 15.692 7.642 Z M 16.682 8.632 C 15.883 9.431 14.603 9.445 13.822 8.664 C 13.041 7.883 13.055 6.602 13.853 5.804 C 14.651 5.006 15.932 4.992 16.713 5.773 C 17.494 6.554 17.48 7.834 16.682 8.632 Z M 6.366 17.11 C 6.639 16.837 6.639 16.393 6.366 16.12 C 6.092 15.847 5.649 15.847 5.376 16.12 L 2.484 19.011 C 2.211 19.285 2.211 19.728 2.484 20.001 C 2.758 20.275 3.201 20.275 3.474 20.001 L 6.366 17.11 Z M 9.993 16.499 C 10.231 16.804 10.177 17.244 9.873 17.482 L 6.628 20.02 C 6.324 20.258 5.884 20.204 5.645 19.899 C 5.407 19.595 5.461 19.155 5.766 18.917 L 9.01 16.379 C 9.315 16.141 9.755 16.195 9.993 16.499 Z M 5.001 12.61 C 5.239 12.306 5.679 12.252 5.984 12.49 C 6.288 12.728 6.342 13.168 6.104 13.473 L 3.566 16.717 C 3.328 17.022 2.888 17.076 2.584 16.838 C 2.279 16.599 2.225 16.16 2.463 15.855 L 5.001 12.61 Z"></path>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M13.443 5.465c1.19-1.19 2.877-1.622 4.374-1.707a10.18 10.18 0 0 1 1.887.067 5.6 5.6 0 0 1 .405.066c.022.11.045.246.067.405.064.484.108 1.147.066 1.886-.086 1.497-.517 3.183-1.708 4.375-.614.615-2.2 1.92-3.672 3.1-.728.584-1.415 1.127-1.921 1.524l-.297.233-.486-.486-.007-.006-.996-.997 2.024-2.024a.762.762 0 1 0-1.08-1.08l-2.024 2.024-1.49-1.489.233-.298c.398-.505.942-1.193 1.525-1.92 1.182-1.473 2.485-3.058 3.1-3.673Zm-3.368 9.54 2.167 2.167c.327.334.433.91.381 1.58a5.313 5.313 0 0 1-.216 1.119l-.004.013a.765.765 0 0 0 1.202.841l.001-.001.004-.002.011-.01.039-.032a12.305 12.305 0 0 0 .6-.543c.376-.364.873-.887 1.35-1.516.896-1.188 1.856-2.946 1.478-4.801 1.05-.859 2.036-1.693 2.526-2.183 1.569-1.57 2.057-3.694 2.152-5.368.05-.846 0-1.607-.077-2.176a7.198 7.198 0 0 0-.129-.716 2.815 2.815 0 0 0-.077-.264 1.498 1.498 0 0 0-.057-.137.86.86 0 0 0-.401-.401 1.184 1.184 0 0 0-.14-.058 2.81 2.81 0 0 0-.262-.077 7.178 7.178 0 0 0-.717-.13 11.791 11.791 0 0 0-2.175-.077c-1.674.096-3.799.584-5.368 2.152-.493.493-1.336 1.49-2.2 2.549-1.838-.352-3.575.6-4.752 1.488a13.275 13.275 0 0 0-1.944 1.814c-.05.058-.09.103-.116.135l-.032.04-.009.01-.003.004h-.001a.764.764 0 0 0 .842 1.202l.013-.004a4.746 4.746 0 0 1 .303-.084c.212-.05.5-.106.814-.13.676-.053 1.256.055 1.589.388l1.156 1.156.004.005.968.967-1.233 1.233a.763.763 0 1 0 1.08 1.08l1.233-1.233ZM7.45 10.33l.168-.214c.357-.455.832-1.055 1.348-1.701-.897.117-1.814.607-2.635 1.227a9.018 9.018 0 0 0-.314.247c.471.042.977.165 1.433.44Zm6.94 7.37c.635-.84 1.133-1.778 1.236-2.697-.662.53-1.278 1.016-1.742 1.38l-.205.162c.293.464.42.986.465 1.47.082-.101.165-.206.247-.314Zm2.456-9.62c-.298.298-.726.268-.96.035-.233-.233-.263-.663.034-.96.297-.297.727-.267.96-.034.233.233.263.662-.034.96Zm1.08 1.08c-.871.872-2.268.887-3.12.035-.852-.852-.836-2.25.034-3.12.87-.87 2.268-.886 3.12-.034.852.852.837 2.249-.034 3.12ZM6.672 18.408a.764.764 0 0 0-1.08-1.08l-3.154 3.154a.764.764 0 0 0 1.08 1.08l3.154-3.154Zm3.957-.667c.26.333.2.813-.13 1.073l-3.54 2.768a.764.764 0 0 1-.941-1.203l3.539-2.769a.765.765 0 0 1 1.072.131ZM5.183 13.5a.765.765 0 0 1 1.204.941l-2.77 3.54a.763.763 0 1 1-1.202-.941l2.768-3.54Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconSaveLarge.svg b/packages/components/src/common/svgs/IconSaveLarge.svg
index 612b5ab50..8165d2e09 100644
--- a/packages/components/src/common/svgs/IconSaveLarge.svg
+++ b/packages/components/src/common/svgs/IconSaveLarge.svg
@@ -1,5 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.6485 13.3322C14.6485 15.3471 13.0151 16.9805 11.0001 16.9805C8.98522 16.9805 7.35181 15.3471 7.35181 13.3322C7.35181 11.3173 8.98522 9.68384 11.0001 9.68384C13.0151 9.68384 14.6485 11.3173 14.6485 13.3322ZM13.0785 13.3322C13.0785 14.48 12.148 15.4105 11.0001 15.4105C9.85231 15.4105 8.92181 14.48 8.92181 13.3322C8.92181 12.1843 9.85231 11.2538 11.0001 11.2538C12.148 11.2538 13.0785 12.1843 13.0785 13.3322Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M3 2C2.44772 2 2 2.44772 2 3V19C2 19.5523 2.44772 20 3 20H19C19.5523 20 20 19.5523 20 19V6.4733C20 6.20808 19.8946 5.95372 19.7071 5.76619L16.2338 2.29289C16.0463 2.10536 15.7919 2 15.5267 2H3ZM15.6766 3.95603L18.43 6.7094V18.43H3.57V3.57H6.32007V7.01953C6.32007 7.57182 6.76778 8.01953 7.32007 8.01953H14.6766C15.2289 8.01953 15.6766 7.57182 15.6766 7.01953V3.95603ZM7.89007 6.44953V3.57H14.1066V6.44953H7.89007Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M15.98 14.544a3.98 3.98 0 1 1-7.96 0 3.98 3.98 0 0 1 7.96 0Zm-1.713 0a2.267 2.267 0 1 1-4.534 0 2.267 2.267 0 0 1 4.534 0Z"/>
+  <path fill-rule="evenodd" d="M3.182 2.182a1 1 0 0 0-1 1v17.636a1 1 0 0 0 1 1h17.636a1 1 0 0 0 1-1V7.024a1 1 0 0 0-.293-.707l-3.842-3.842a1 1 0 0 0-.707-.293H3.182Zm13.92 2.134 3.003 3.003v12.787H3.895V3.895h3v3.854a1 1 0 0 0 1 1h8.207a1 1 0 0 0 1-1V4.316Zm-8.495 2.72V3.895h6.782v3.14H8.607Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconSearchLarge.svg b/packages/components/src/common/svgs/IconSearchLarge.svg
index ecd57f582..bb4c6a759 100644
--- a/packages/components/src/common/svgs/IconSearchLarge.svg
+++ b/packages/components/src/common/svgs/IconSearchLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.2002 12.8615C16.3756 10.0334 16.1675 5.96282 13.5759 3.37242C10.758 0.555871 6.18926 0.555871 3.37136 3.37242C0.553459 6.18898 0.553459 10.7555 3.37136 13.5721C5.96246 16.1619 10.0339 16.3704 12.8633 14.1974C12.8839 14.2227 12.9059 14.2472 12.9295 14.2708L19.1177 20.459C19.4887 20.83 20.0902 20.83 20.4612 20.459C20.8322 20.088 20.8322 19.4865 20.4612 19.1155L14.273 12.9273C14.2496 12.9039 14.2253 12.882 14.2002 12.8615ZM12.198 4.6791C14.2743 6.75546 14.2743 10.1219 12.198 12.1983C10.1216 14.2746 6.75514 14.2746 4.67878 12.1983C2.60241 10.1219 2.60241 6.75546 4.67878 4.6791C6.75514 2.60274 10.1216 2.60274 12.198 4.6791Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M15.491 14.03a7.867 7.867 0 0 0-.681-10.35 7.874 7.874 0 0 0-11.132 0 7.865 7.865 0 0 0 0 11.127 7.876 7.876 0 0 0 10.355.682.896.896 0 0 0 .072.08l6.75 6.75a1.036 1.036 0 0 0 1.466-1.465l-6.75-6.75a1.046 1.046 0 0 0-.08-.072Zm-2.184-8.926a5.8 5.8 0 1 1-8.203 8.203 5.8 5.8 0 0 1 8.203-8.203Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconSearchLinesHorizontal3Large.svg b/packages/components/src/common/svgs/IconSearchLinesHorizontal3Large.svg
new file mode 100644
index 000000000..96caf385a
--- /dev/null
+++ b/packages/components/src/common/svgs/IconSearchLinesHorizontal3Large.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.51 5.694a.818.818 0 1 0 0 1.636h4.362a.818.818 0 0 0 0-1.636H6.51ZM5.692 9.24c0-.453.366-.819.818-.819h6.543a.818.818 0 0 1 0 1.636H6.51a.818.818 0 0 1-.818-.818Zm.818 1.908a.818.818 0 1 0 0 1.637h2.726a.818.818 0 1 0 0-1.637H6.51Z"/>
+  <path fill-rule="evenodd" d="M14.81 3.679a7.867 7.867 0 0 1 .681 10.352c.027.022.054.046.08.071l6.75 6.751a1.036 1.036 0 0 1-1.465 1.466l-6.751-6.75a1.04 1.04 0 0 1-.072-.08 7.876 7.876 0 0 1-10.355-.683 7.865 7.865 0 0 1 0-11.127 7.874 7.874 0 0 1 11.132 0Zm-1.503 9.628a5.8 5.8 0 1 0-8.203-8.203 5.8 5.8 0 0 0 8.203 8.203Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconSearchLinesHorizontal3Small.svg b/packages/components/src/common/svgs/IconSearchLinesHorizontal3Small.svg
new file mode 100644
index 000000000..d470fa46c
--- /dev/null
+++ b/packages/components/src/common/svgs/IconSearchLinesHorizontal3Small.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4.378 3.799a.516.516 0 1 0 0 1.033h3.099a.516.516 0 1 0 0-1.033H4.378Zm-.516 2.324c0-.285.23-.517.516-.517H8.51a.516.516 0 1 1 0 1.033H4.378a.516.516 0 0 1-.516-.516Zm.516 1.291a.516.516 0 1 0 0 1.033h2.066a.516.516 0 0 0 0-1.033H4.378Z" />
+  <path fill-rule="evenodd"
+    d="M9.843 2.508a5.187 5.187 0 0 1 .501 6.753.734.734 0 0 1 .079.07l4.36 4.36a.773.773 0 1 1-1.093 1.094l-4.36-4.361a.78.78 0 0 1-.07-.08 5.187 5.187 0 1 1 .583-7.836Zm-1.144 6.19a3.602 3.602 0 1 0-5.095-5.095A3.602 3.602 0 0 0 8.7 8.698Z" />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconSearchLinesHorizontalLarge.svg b/packages/components/src/common/svgs/IconSearchLinesHorizontalLarge.svg
deleted file mode 100644
index d14ebd101..000000000
--- a/packages/components/src/common/svgs/IconSearchLinesHorizontalLarge.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5.96777 5.21926C5.55356 5.21926 5.21777 5.55504 5.21777 5.96926C5.21777 6.38347 5.55356 6.71926 5.96777 6.71926H9.96596C10.3802 6.71926 10.716 6.38347 10.716 5.96926C10.716 5.55504 10.3802 5.21926 9.96596 5.21926H5.96777Z" />
-    <path d="M5.21777 8.46926C5.21777 8.05504 5.55356 7.71926 5.96777 7.71926H11.9653C12.3795 7.71926 12.7153 8.05504 12.7153 8.46926C12.7153 8.88347 12.3795 9.21926 11.9653 9.21926H5.96777C5.55356 9.21926 5.21777 8.88347 5.21777 8.46926Z" />
-    <path d="M5.96777 10.2193C5.55356 10.2193 5.21777 10.555 5.21777 10.9693C5.21777 11.3835 5.55356 11.7193 5.96777 11.7193H8.46645C8.88067 11.7193 9.21645 11.3835 9.21645 10.9693C9.21645 10.555 8.88067 10.2193 8.46645 10.2193H5.96777Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5759 3.37242C16.1675 5.96282 16.3756 10.0334 14.2002 12.8615C14.2253 12.882 14.2496 12.9039 14.273 12.9273L20.4612 19.1155C20.8322 19.4865 20.8322 20.088 20.4612 20.459C20.0902 20.83 19.4887 20.83 19.1177 20.459L12.9295 14.2708C12.9059 14.2472 12.8839 14.2227 12.8633 14.1974C10.0339 16.3704 5.96246 16.1619 3.37136 13.5721C0.553459 10.7555 0.553459 6.18898 3.37136 3.37242C6.18926 0.555871 10.758 0.555871 13.5759 3.37242ZM12.198 12.1983C14.2743 10.1219 14.2743 6.75546 12.198 4.6791C10.1216 2.60274 6.75514 2.60274 4.67878 4.6791C2.60241 6.75546 2.60241 10.1219 4.67878 12.1983C6.75514 14.2746 10.1216 14.2746 12.198 12.1983Z" />
-</svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconSearchLinesHorizontalSmall.svg b/packages/components/src/common/svgs/IconSearchLinesHorizontalSmall.svg
deleted file mode 100644
index 6f30619ab..000000000
--- a/packages/components/src/common/svgs/IconSearchLinesHorizontalSmall.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M3.495 2.93497C3.21885 2.93497 2.995 3.15882 2.995 3.43497C2.995 3.71111 3.21885 3.93497 3.495 3.93497H6.495C6.77114 3.93497 6.995 3.71111 6.995 3.43497C6.995 3.15882 6.77114 2.93497 6.495 2.93497H3.495Z" />
-    <path d="M2.995 5.18497C2.995 4.90882 3.21885 4.68497 3.495 4.68497H7.495C7.77114 4.68497 7.995 4.90882 7.995 5.18497C7.995 5.46111 7.77114 5.68497 7.495 5.68497H3.495C3.21885 5.68497 2.995 5.46111 2.995 5.18497Z" />
-    <path d="M3.495 6.43497C3.21885 6.43497 2.995 6.65882 2.995 6.93497C2.995 7.21111 3.21885 7.43497 3.495 7.43497H5.495C5.77114 7.43497 5.995 7.21111 5.995 6.93497C5.995 6.65882 5.77114 6.43497 5.495 6.43497H3.495Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.78533 1.68544C10.568 3.46815 10.7298 6.25801 9.27054 8.22346C9.29709 8.24369 9.32259 8.26593 9.34684 8.29018L13.5684 12.5117C13.8607 12.8041 13.8607 13.2781 13.5684 13.5704C13.2761 13.8628 12.8021 13.8628 12.5097 13.5704L8.28817 9.34886C8.26382 9.32451 8.2415 9.29889 8.2212 9.27223C6.25586 10.7297 3.46744 10.5674 1.68541 8.78536C-0.275181 6.82477 -0.275181 3.64603 1.68541 1.68544C3.646 -0.275151 6.82474 -0.275151 8.78533 1.68544ZM7.67804 7.67797C9.03996 6.31605 9.03996 4.10796 7.67804 2.74604C6.31613 1.38413 4.10803 1.38413 2.74612 2.74604C1.38421 4.10796 1.38421 6.31605 2.74612 7.67797C4.10803 9.03988 6.31613 9.03988 7.67804 7.67797Z" />
-</svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconSearchSmall.svg b/packages/components/src/common/svgs/IconSearchSmall.svg
index 2b0541cfb..7478c7e79 100644
--- a/packages/components/src/common/svgs/IconSearchSmall.svg
+++ b/packages/components/src/common/svgs/IconSearchSmall.svg
@@ -1,4 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.27054 8.22346C10.7298 6.25801 10.568 3.46815 8.78533 1.68544C6.82474 -0.275151 3.646 -0.275151 1.68541 1.68544C-0.275181 3.64603 -0.275181 6.82477 1.68541 8.78536C3.46744 10.5674 6.25586 10.7297 8.2212 9.27223C8.2415 9.29889 8.26382 9.32451 8.28817 9.34886L12.5097 13.5704C12.8021 13.8628 13.2761 13.8628 13.5684 13.5704C13.8607 13.2781 13.8607 12.8041 13.5684 12.5117L9.34684 8.29018C9.32259 8.26593 9.29709 8.24369 9.27054 8.22346ZM7.67804 2.74604C9.03996 4.10796 9.03996 6.31605 7.67804 7.67797C6.31613 9.03988 4.10803 9.03988 2.74612 7.67797C1.38421 6.31605 1.38421 4.10796 2.74612 2.74604C4.10803 1.38413 6.31613 1.38413 7.67804 2.74604Z" />
-</svg>
-    
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M10.343 9.261a5.186 5.186 0 0 0-7.832-6.752 5.184 5.184 0 0 0 6.749 7.835.78.78 0 0 0 .069.08l4.36 4.359a.773.773 0 0 0 1.093-1.094l-4.36-4.36a.787.787 0 0 0-.079-.068ZM8.7 3.605a3.601 3.601 0 1 1-5.093 5.093A3.601 3.601 0 0 1 8.7 3.605Z" />
+</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconShareLarge.svg b/packages/components/src/common/svgs/IconShareLarge.svg
index 89529a74c..467a4f673 100644
--- a/packages/components/src/common/svgs/IconShareLarge.svg
+++ b/packages/components/src/common/svgs/IconShareLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6329 18.0819C16.1459 18.9326 15.0862 19.2328 14.2218 18.7622C13.3609 18.2975 13.0502 17.237 13.53 16.399C14.0122 15.5564 15.0743 15.2678 15.9495 15.7418C16.8151 16.2112 17.1152 17.2393 16.6329 18.0819ZM5.5274 13.3148C4.57604 13.3148 3.80686 12.5649 3.80686 11.64C3.80686 10.7139 4.57604 9.96402 5.5274 9.96402C6.47875 9.96402 7.24913 10.7139 7.24913 11.64C7.24913 12.5649 6.47875 13.3148 5.5274 13.3148ZM14.2218 4.6116C15.0862 4.14335 16.1459 4.44238 16.6329 5.29311C17.1152 6.13573 16.8151 7.16495 15.9495 7.6332C15.0743 8.1084 14.0122 7.81864 13.53 6.97603C13.0502 6.13804 13.3609 5.07869 14.2218 4.6116ZM16.7794 14.2907C15.4125 13.5501 13.7157 13.8317 12.612 14.971L8.72558 12.9323C8.89585 12.5336 8.99229 12.0978 8.99229 11.64C8.99229 11.2123 8.9018 10.8066 8.75296 10.4288L12.612 8.40396C13.7157 9.54329 15.4125 9.82493 16.7794 9.08431C18.4523 8.17794 19.056 6.1137 18.1249 4.48526L18.0534 4.3624L18.0498 4.36472C17.0854 2.82784 15.0291 2.29237 13.399 3.17671C12.0393 3.91386 11.388 5.46117 11.7916 6.96907L7.7635 9.08315C7.15745 8.58129 6.38469 8.26719 5.5274 8.26719C3.61277 8.26719 2.0625 9.77625 2.0625 11.64C2.0625 13.5025 3.61277 15.0128 5.5274 15.0128C6.35016 15.0128 7.09553 14.7219 7.69087 14.2548L11.7916 16.4071C11.388 17.9138 12.0393 19.4611 13.399 20.1983C15.0291 21.0826 17.0854 20.5472 18.0498 19.0103L18.0534 19.0126L18.1249 18.8897C19.056 17.2613 18.4523 15.1982 16.7794 14.2907Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M18.145 19.726a1.942 1.942 0 0 1-2.63.742 1.869 1.869 0 0 1-.755-2.578c.526-.92 1.685-1.234 2.64-.717.944.512 1.271 1.634.745 2.553Zm-12.115-5.2c-1.038 0-1.877-.819-1.877-1.828 0-1.01.839-1.828 1.877-1.828s1.878.818 1.878 1.828c0 1.01-.84 1.827-1.878 1.827Zm9.485-9.495a1.945 1.945 0 0 1 2.63.743c.526.92.199 2.042-.746 2.553-.954.519-2.113.202-2.639-.717-.524-.914-.184-2.07.755-2.58Zm2.79 10.559c-1.491-.808-3.342-.5-4.546.742l-4.24-2.224a3.58 3.58 0 0 0 .29-1.41c0-.466-.098-.909-.26-1.321l4.21-2.21c1.204 1.244 3.055 1.551 4.546.743 1.825-.989 2.483-3.24 1.468-5.017l-.078-.134-.004.003c-1.052-1.677-3.296-2.261-5.074-1.296-1.483.804-2.194 2.492-1.753 4.137L8.469 9.909a3.808 3.808 0 0 0-2.44-.89c-2.088 0-3.779 1.646-3.779 3.68 0 2.031 1.691 3.679 3.78 3.679.897 0 1.71-.318 2.36-.827l4.474 2.348c-.44 1.643.27 3.331 1.753 4.136 1.778.964 4.022.38 5.074-1.297l.004.003.078-.134c1.015-1.776.357-4.027-1.468-5.017Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconSlidersHorizontalLarge.svg b/packages/components/src/common/svgs/IconSlidersHorizontalLarge.svg
index b5f5732aa..cbfea584d 100644
--- a/packages/components/src/common/svgs/IconSlidersHorizontalLarge.svg
+++ b/packages/components/src/common/svgs/IconSlidersHorizontalLarge.svg
@@ -1,6 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.453 3.23999C15.4353 3.23999 16.2709 3.86825 16.5799 4.74487H19.1899C19.6042 4.74487 19.9399 5.08066 19.9399 5.49487C19.9399 5.90909 19.6042 6.24487 19.1899 6.24487H16.5796C16.2705 7.12112 15.4351 7.74902 14.453 7.74902C13.4709 7.74902 12.6355 7.12112 12.3264 6.24487H2.81494C2.40073 6.24487 2.06494 5.90909 2.06494 5.49487C2.06494 5.08066 2.40073 4.74487 2.81494 4.74487H12.3261C12.6351 3.86825 13.4707 3.23999 14.453 3.23999ZM14.9109 6.33224C14.9574 6.30675 15.0016 6.27749 15.043 6.24487C15.2643 6.07033 15.4061 5.7998 15.4061 5.49609C15.4061 5.19097 15.2627 4.91932 15.0397 4.74487H15.044C14.8814 4.61657 14.6762 4.53999 14.453 4.53999C14.2299 4.53999 14.0246 4.61657 13.862 4.74487H13.8663C13.6433 4.91932 13.4999 5.19097 13.4999 5.49609C13.4999 5.7998 13.6419 6.07033 13.8632 6.24487C13.9046 6.27749 13.9486 6.30675 13.9951 6.33224C14.131 6.40681 14.2871 6.44922 14.453 6.44922C14.6189 6.44922 14.775 6.40681 14.9109 6.33224Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.70166 8.74902C7.68399 8.74902 8.51958 9.37728 8.82855 10.2539H19.1899C19.6042 10.2539 19.9399 10.5897 19.9399 11.0039C19.9399 11.4181 19.6042 11.7539 19.1899 11.7539H8.82829C8.51912 12.6301 7.68372 13.2581 6.70166 13.2581C5.7196 13.2581 4.8842 12.6301 4.57503 11.7539H2.81494C2.40073 11.7539 2.06494 11.4181 2.06494 11.0039C2.06494 10.5897 2.40073 10.2539 2.81494 10.2539H4.57477C4.88374 9.37728 5.71933 8.74902 6.70166 8.74902ZM7.15953 11.8413C7.20608 11.8158 7.25026 11.7865 7.29168 11.7539C7.51297 11.5794 7.65479 11.3088 7.65479 11.0051C7.65479 10.7 7.5114 10.4284 7.28834 10.2539H7.29261C7.13008 10.1256 6.92481 10.049 6.70166 10.049C6.47851 10.049 6.27324 10.1256 6.11071 10.2539H6.11498C5.89192 10.4284 5.74854 10.7 5.74854 11.0051C5.74854 11.3088 5.89059 11.5794 6.11187 11.7539C6.15329 11.7865 6.19724 11.8158 6.24379 11.8413C6.37968 11.9158 6.53572 11.9583 6.70166 11.9583C6.8676 11.9583 7.02364 11.9158 7.15953 11.8413Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5008 15.7681C13.1932 14.8888 12.3563 14.2581 11.3721 14.2581C10.3878 14.2581 9.55089 14.8888 9.24338 15.7681H2.81494C2.40073 15.7681 2.06494 16.1039 2.06494 16.5181C2.06494 16.9323 2.40073 17.2681 2.81494 17.2681H9.24725C9.55787 18.1416 10.3919 18.7671 11.3721 18.7671C12.3522 18.7671 13.1863 18.1416 13.4969 17.2681H19.1899C19.6042 17.2681 19.9399 16.9323 19.9399 16.5181C19.9399 16.1039 19.6042 15.7681 19.1899 15.7681H13.5008ZM11.9555 17.2681C11.9158 17.2988 11.8736 17.3264 11.8293 17.3507C11.6936 17.425 11.5378 17.4673 11.3721 17.4673C11.2064 17.4673 11.0506 17.425 10.9148 17.3507C10.8705 17.3264 10.8285 17.2988 10.7888 17.2681C10.5638 17.0937 10.4189 16.8209 10.4189 16.5142C10.4189 16.212 10.5595 15.9427 10.7789 15.7681H10.7747C10.9382 15.6367 11.146 15.5581 11.3721 15.5581C11.5982 15.5581 11.8059 15.6367 11.9695 15.7681H11.9653C12.1846 15.9427 12.3252 16.212 12.3252 16.5142C12.3252 16.8209 12.1806 17.0937 11.9555 17.2681Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M15.767 3.535a2.46 2.46 0 0 1 2.32 1.641h2.848a.818.818 0 1 1 0 1.637h-2.848a2.46 2.46 0 0 1-4.64 0H3.07a.818.818 0 0 1 0-1.637h10.376a2.46 2.46 0 0 1 2.32-1.641Zm.5 3.373a1.042 1.042 0 0 0 .54-.912c0-.333-.157-.63-.4-.82h.005a1.037 1.037 0 0 0-1.29 0h.005a1.038 1.038 0 0 0 .64 1.86c.18 0 .351-.047.5-.128ZM7.31 9.544a2.46 2.46 0 0 1 2.321 1.642h11.303a.818.818 0 1 1 0 1.636H9.631a2.46 2.46 0 0 1-4.64 0H3.07a.818.818 0 0 1 0-1.636h1.92a2.46 2.46 0 0 1 2.32-1.642Zm.5 3.374a1.038 1.038 0 0 0 .14-1.732h.006a1.037 1.037 0 0 0-1.29 0h.005a1.038 1.038 0 0 0 .14 1.732 1.036 1.036 0 0 0 1 0Zm6.918 4.283a2.46 2.46 0 0 0-4.644 0H3.07a.818.818 0 0 0 0 1.637h7.017a2.46 2.46 0 0 0 4.636 0h6.21a.818.818 0 1 0 0-1.637h-6.206Zm-1.686 1.637a1.035 1.035 0 0 1-.636.217 1.035 1.035 0 0 1-.636-.217 1.038 1.038 0 0 1-.011-1.637h-.005a1.037 1.037 0 0 1 1.304 0h-.005a1.038 1.038 0 0 1-.01 1.637Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconSpeechBubblesLarge.svg b/packages/components/src/common/svgs/IconSpeechBubblesLarge.svg
old mode 100755
new mode 100644
index 74a7f37a0..72a3b30f0
--- a/packages/components/src/common/svgs/IconSpeechBubblesLarge.svg
+++ b/packages/components/src/common/svgs/IconSpeechBubblesLarge.svg
@@ -1,3 +1,3 @@
-<svg width="23" height="22" viewBox="0 0 23 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.049 0.85C18.049 0.380558 17.6684 0 17.199 0H0.85C0.380558 0 0 0.380558 0 0.85V13.2392C0 13.7086 0.380558 14.0892 0.85 14.0892H3.01047V17.0463C3.01047 17.7863 3.8905 18.1728 4.43548 17.6722L8.33616 14.0892H9.15279V15.776C9.15279 16.2454 9.53335 16.626 10.0028 16.626H15.6274L18.1474 19.1825C18.6811 19.7239 19.6028 19.346 19.6028 18.5858V16.626H21.1806C21.65 16.626 22.0306 16.2454 22.0306 15.776V4.9877C22.0306 4.51826 21.65 4.1377 21.1806 4.1377H18.049V0.85ZM18.049 5.56751H20.612V15.1962H18.1842V17.1975L16.2115 15.1962H10.5714V14.0892H17.199C17.6684 14.0892 18.049 13.7086 18.049 13.2392V5.56751ZM16.6304 1.42983H1.41857V12.684H4.42903V15.7513L7.7956 12.684H16.6304V1.42983ZM10.7675 9.01307C11.0436 9.01307 11.2675 9.23693 11.2675 9.51307V9.91948C11.2675 10.1956 11.0436 10.4195 10.7675 10.4195H4.77778C4.50164 10.4195 4.27778 10.1956 4.27778 9.91948V9.51307C4.27778 9.23693 4.50164 9.01307 4.77778 9.01307H10.7675ZM6.06944 6.63345C6.34559 6.63345 6.56944 6.85731 6.56944 7.13345V7.53986C6.56944 7.816 6.34559 8.03986 6.06944 8.03986H4.77778C4.50164 8.03986 4.27778 7.816 4.27778 7.53986V7.13345C4.27778 6.85731 4.50164 6.63345 4.77778 6.63345H6.06944ZM13.5861 6.63345C13.8622 6.63345 14.0861 6.85731 14.0861 7.13345V7.53986C14.0861 7.816 13.8622 8.03986 13.5861 8.03986H12.5719C12.2957 8.03986 12.0719 7.816 12.0719 7.53986V7.13345C12.0719 6.85731 12.2957 6.63345 12.5719 6.63345H13.5861ZM8.59415 6.63345C8.87029 6.63345 9.09415 6.85731 9.09415 7.13345V7.53986C9.09415 7.816 8.87029 8.03986 8.59415 8.03986H7.41249C7.13634 8.03986 6.91249 7.816 6.91249 7.53986V7.13345C6.91249 6.85731 7.13634 6.63345 7.41249 6.63345H8.59415ZM11.2289 6.63345C11.505 6.63345 11.7289 6.85731 11.7289 7.13345V7.53986C11.7289 7.816 11.505 8.03986 11.2289 8.03986H9.9372C9.66106 8.03986 9.4372 7.816 9.4372 7.53986V7.13345C9.4372 6.85731 9.66106 6.63345 9.9372 6.63345H11.2289ZM13.5616 4.27778C13.8377 4.27778 14.0616 4.50164 14.0616 4.77778V5.18419C14.0616 5.46033 13.8377 5.68419 13.5616 5.68419H4.77778C4.50164 5.68419 4.27778 5.46033 4.27778 5.18419V4.77778C4.27778 4.50164 4.50164 4.27778 4.77778 4.27778H13.5616Z" />
-</svg>
\ No newline at end of file
+<svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M19.69.927A.927.927 0 0 0 18.762 0H.927A.927.927 0 0 0 0 .927v13.516c0 .512.415.927.927.927h2.357v3.226a.927.927 0 0 0 1.555.683l4.255-3.909h.89v1.84c0 .512.416.927.928.927h6.136l2.75 2.79c.581.59 1.587.178 1.587-.652v-2.138h1.721a.927.927 0 0 0 .927-.927V5.441a.927.927 0 0 0-.927-.927H19.69V.927Zm0 5.147h2.796v10.504h-2.649v2.183l-2.152-2.183h-6.153V15.37h7.23a.927.927 0 0 0 .928-.927v-8.37ZM18.142 1.56H1.548v12.277h3.284v3.346l3.672-3.346h9.638V1.56Zm-6.396 8.272c.302 0 .546.245.546.546v.443a.545.545 0 0 1-.546.546H5.212a.545.545 0 0 1-.545-.546v-.443c0-.301.244-.546.545-.546h6.534ZM6.621 7.236c.301 0 .546.245.546.546v.443a.545.545 0 0 1-.546.546H5.212a.545.545 0 0 1-.545-.546v-.443c0-.301.244-.546.545-.546h1.41Zm8.2 0c.301 0 .546.245.546.546v.443a.546.546 0 0 1-.546.546h-1.106a.545.545 0 0 1-.546-.546v-.443c0-.301.245-.546.546-.546h1.106Zm-5.446 0c.302 0 .546.245.546.546v.443a.545.545 0 0 1-.546.546H8.086a.545.545 0 0 1-.545-.546v-.443c0-.301.244-.546.545-.546h1.29Zm2.875 0c.3 0 .545.245.545.546v.443a.545.545 0 0 1-.545.546h-1.41a.545.545 0 0 1-.545-.546v-.443c0-.301.244-.546.546-.546h1.409Zm2.544-2.57c.302 0 .546.245.546.546v.443a.545.545 0 0 1-.546.546H5.212a.545.545 0 0 1-.545-.546v-.443c0-.301.244-.545.545-.545h9.582Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconSquareOnDashedSquareLarge.svg b/packages/components/src/common/svgs/IconSquareOnDashedSquareLarge.svg
index a9a253502..0e6288cf0 100644
--- a/packages/components/src/common/svgs/IconSquareOnDashedSquareLarge.svg
+++ b/packages/components/src/common/svgs/IconSquareOnDashedSquareLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.02624 8.2343V13.0787C8.02624 13.3106 8.11249 13.5292 8.26929 13.6982C8.38362 13.8214 8.53007 13.9118 8.67849 13.9561L8.76753 13.9771L8.84204 13.9868L13.7816 13.9898V18.8341C13.7816 19.1489 13.6569 19.4484 13.4355 19.6698C13.2701 19.8352 13.0605 19.9472 12.8286 19.9931L12.7109 20.0106L12.5998 20.0159H3.18186C2.86704 20.0159 2.56759 19.8912 2.34616 19.6698C2.18075 19.5044 2.06879 19.2948 2.02279 19.0629L2.00535 18.9452L2 18.8341V9.41615C2 9.10134 2.12473 8.80188 2.34616 8.58045C2.51156 8.41505 2.72112 8.30308 2.953 8.25709L3.0707 8.23965L3.18186 8.2343H8.02624ZM6.62963 9.63477H3.39916V18.6138L12.3874 18.6138V15.3833H8.80193C8.37927 15.3577 7.97645 15.2131 7.63419 14.9664L7.50876 14.8692L7.31379 14.6824L7.22471 14.5917C6.91276 14.2556 6.71326 13.8344 6.65077 13.3789L6.63505 13.2259L6.63 13.0763L6.62963 9.63477ZM16.0014 13.9773C16.3728 13.9773 16.6785 14.269 16.6785 14.6273C16.6785 14.9303 16.459 15.189 16.1548 15.2594L16.0771 15.273L16.0014 15.2773H15.3411C14.9703 15.2773 14.6697 14.9863 14.6697 14.6273C14.6697 14.3263 14.8823 14.0693 15.1825 13.9966L15.2593 13.9824L15.3411 13.9773H16.0014ZM18.4064 13.5455C18.5816 13.2551 18.9082 13.1327 19.2192 13.2743C19.5568 13.4279 19.6912 13.778 19.5376 14.1155C19.2799 14.6816 18.757 15.0462 18.1367 15.106C17.7675 15.1416 17.4762 14.9499 17.4406 14.5808C17.4107 14.2712 17.5969 13.9865 17.8885 13.883L17.9636 13.861L18.0911 13.8407C18.1747 13.8223 18.25 13.7773 18.3038 13.7174L18.3399 13.6699L18.4064 13.5455ZM19.1956 9.25533C19.4967 9.25533 19.7537 9.46796 19.8263 9.76817L19.8406 9.84497L19.8456 9.9268V11.5067C19.8456 11.8775 19.5546 12.1782 19.1956 12.1782C18.8945 12.1782 18.6375 11.9655 18.5649 11.6653L18.5506 11.5885L18.5456 11.5067V9.9268C18.5456 9.55596 18.8366 9.25533 19.1956 9.25533ZM19.1956 5.18533C19.4967 5.18533 19.7537 5.39796 19.8263 5.69817L19.8406 5.77497L19.8456 5.8568V7.43671C19.8456 7.80755 19.5546 8.10817 19.1956 8.10817C18.8945 8.10817 18.6375 7.89554 18.5649 7.59534L18.5506 7.51854L18.5456 7.43671V5.8568C18.5456 5.48596 18.8366 5.18533 19.1956 5.18533ZM7.46245 4.93534C7.77512 4.93534 8.042 5.14797 8.11744 5.44817L8.13223 5.52497L8.13745 5.6068V6.67889C8.13745 7.04973 7.83524 7.35035 7.46245 7.35035C7.14979 7.35035 6.88291 7.13772 6.80747 6.83752L6.79268 6.76071L6.78745 6.67889V5.6068C6.78745 5.23596 7.08966 4.93534 7.46245 4.93534ZM8.54645 2.20571C8.91709 2.19334 9.22757 2.48376 9.23995 2.85439C9.25033 3.16525 9.04668 3.43768 8.74915 3.5227L8.67288 3.53997L8.54387 3.5523C8.459 3.56532 8.38118 3.60538 8.32383 3.66176L8.28486 3.70694L8.2105 3.82705C8.01731 4.10572 7.64409 4.19717 7.34267 4.03618C7.01557 3.86146 6.89204 3.45466 7.06675 3.12756C7.35976 2.57898 7.92259 2.22654 8.54645 2.20571ZM18.1313 2.14131C18.7552 2.16214 19.318 2.51458 19.611 3.06316C19.7857 3.39026 19.6622 3.79706 19.3351 3.97178C19.0588 4.11935 18.7222 4.0548 18.5159 3.82331L18.463 3.75607L18.4265 3.69585C18.3767 3.60261 18.2931 3.53361 18.1993 3.50273L18.1419 3.48888L18.0865 3.48349C17.7159 3.47111 17.4255 3.16062 17.4378 2.78999C17.4502 2.41936 17.7607 2.12894 18.1313 2.14131ZM12.2173 2C12.5882 2 12.8888 2.29101 12.8888 2.65C12.8888 2.95108 12.6762 3.20808 12.3759 3.28073L12.2991 3.29497L12.2173 3.3H10.6374C10.2666 3.3 9.96594 3.00899 9.96594 2.65C9.96594 2.34892 10.1786 2.09192 10.4788 2.01927L10.5556 2.00503L10.6374 2H12.2173ZM16.0099 2C16.3808 2 16.6814 2.29101 16.6814 2.65C16.6814 2.95108 16.4688 3.20808 16.1686 3.28073L16.0918 3.29497L16.0099 3.3H14.43C14.0592 3.3 13.7585 3.00899 13.7585 2.65C13.7585 2.34892 13.9712 2.09192 14.2714 2.01927L14.3482 2.00503L14.43 2H16.0099Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M9.103 9.226v4.845c0 .232.087.45.244.62.114.122.26.213.409.257l.089.021.074.01 4.94.003v4.844a1.18 1.18 0 0 1-.953 1.16l-.118.017-.111.005H4.259a1.18 1.18 0 0 1-1.159-.953l-.017-.118-.006-.11v-9.419A1.18 1.18 0 0 1 4.03 9.25l.118-.017.111-.006h4.844Zm-1.396 1.4h-3.23v8.98h8.988v-3.23H9.879a2.222 2.222 0 0 1-1.168-.418l-.125-.097-.195-.187-.09-.09a2.222 2.222 0 0 1-.573-1.213l-.016-.153-.005-.15v-3.441Zm9.372 4.343c.371 0 .677.292.677.65a.66.66 0 0 1-.524.633l-.078.013-.075.004h-.66a.661.661 0 0 1-.672-.65c0-.3.213-.558.513-.63l.076-.015.082-.005h.66Zm2.405-.431c.175-.29.501-.413.813-.272a.613.613 0 0 1 .318.842c-.258.566-.78.93-1.401.99-.37.036-.66-.156-.696-.525a.672.672 0 0 1 .448-.698l.075-.022.127-.02a.406.406 0 0 0 .213-.123l.036-.048.067-.125Zm.789-4.29c.3 0 .558.212.63.512l.015.077.005.082v1.58c0 .37-.291.671-.65.671a.655.655 0 0 1-.63-.513l-.015-.076-.005-.082v-1.58a.66.66 0 0 1 .65-.672Zm0-4.07c.3 0 .558.212.63.512l.015.077.005.082v1.58c0 .37-.291.671-.65.671a.655.655 0 0 1-.63-.513l-.015-.076-.005-.082v-1.58a.66.66 0 0 1 .65-.672ZM8.54 5.927c.312 0 .58.212.655.512l.014.077.006.082V7.67a.675.675 0 0 1-1.33.159l-.015-.077-.005-.082V6.599c0-.371.302-.672.675-.672Zm1.084-2.73a.672.672 0 0 1 .202 1.317l-.076.017-.129.012a.404.404 0 0 0-.22.11l-.039.045-.074.12a.672.672 0 0 1-1.144-.7 1.743 1.743 0 0 1 1.48-.921Zm9.585-.065a1.748 1.748 0 0 1 1.48.922.671.671 0 0 1-1.096.76l-.053-.067-.036-.06a.404.404 0 0 0-.228-.193l-.057-.014-.055-.005a.672.672 0 0 1 .044-1.343Zm-5.915-.141c.371 0 .672.291.672.65a.655.655 0 0 1-.513.63l-.077.015-.082.005h-1.58a.661.661 0 0 1-.67-.65c0-.301.212-.558.512-.63l.077-.015.082-.005h1.58Zm3.793 0c.371 0 .672.291.672.65a.655.655 0 0 1-.513.63l-.077.015-.082.005h-1.58a.661.661 0 0 1-.671-.65c0-.301.212-.558.513-.63l.076-.015.082-.005h1.58Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconStarLarge.svg b/packages/components/src/common/svgs/IconStarLarge.svg
index 18ec11264..302c3d07c 100644
--- a/packages/components/src/common/svgs/IconStarLarge.svg
+++ b/packages/components/src/common/svgs/IconStarLarge.svg
@@ -1,12 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.9929 7.98581L10.4066 9.39549C10.1618 9.98409 9.60827 10.3863 8.97283 10.4372L7.45096 10.5592L8.61046 11.5524C9.0946 11.9672 9.30604 12.6179 9.15812 13.238L8.80388 14.7231L10.1068 13.9272C10.6508 13.5949 11.3351 13.5949 11.8791 13.9272L13.182 14.7231L12.8278 13.238C12.6798 12.6179 12.8913 11.9672 13.3754 11.5524L14.5349 10.5592L13.0131 10.4372C12.3776 10.3863 11.8241 9.98409 11.5793 9.39549L10.9929 7.98581ZM11.9163 6.43C11.5747 5.6087 10.4112 5.6087 10.0696 6.43L9.06781 8.83864C9.03181 8.9252 8.9504 8.98435 8.85696 8.99184L6.25662 9.2003C5.36996 9.27139 5.01044 10.3779 5.68597 10.9566L7.66716 12.6537C7.73835 12.7146 7.76945 12.8103 7.74769 12.9015L7.14241 15.439C6.93602 16.3042 7.87727 16.9881 8.63637 16.5244L10.8626 15.1647C10.9426 15.1158 11.0433 15.1158 11.1233 15.1647L13.3495 16.5244C14.1086 16.9881 15.0499 16.3042 14.8435 15.439L14.2382 12.9015C14.2164 12.8103 14.2475 12.7146 14.3187 12.6537L16.2999 10.9566C16.9754 10.3779 16.6159 9.27139 15.7293 9.2003L13.1289 8.99184C13.0355 8.98435 12.9541 8.9252 12.9181 8.83864L11.9163 6.43Z" />
-    <path d="M10.2679 1.93502C10.2679 1.53462 10.5925 1.21002 10.9929 1.21002C11.3933 1.21002 11.7179 1.53462 11.7179 1.93502V3.48502C11.7179 3.88543 11.3933 4.21002 10.9929 4.21002C10.5925 4.21002 10.2679 3.88543 10.2679 3.48502V1.93502Z" />
-    <path d="M20.4009 10.2689C20.8013 10.2689 21.1259 10.5935 21.1259 10.9939C21.1259 11.3943 20.8013 11.7189 20.4009 11.7189H18.8509C18.4505 11.7189 18.1259 11.3943 18.1259 10.9939C18.1259 10.5935 18.4505 10.2689 18.8509 10.2689H20.4009Z" />
-    <path d="M17.2243 3.73293C17.5074 3.4498 17.9665 3.4498 18.2496 3.73293C18.5328 4.01606 18.5328 4.4751 18.2496 4.75823L17.1536 5.85425C16.8705 6.13738 16.4114 6.13738 16.1283 5.85425C15.8452 5.57112 15.8452 5.11207 16.1283 4.82894L17.2243 3.73293Z" />
-    <path d="M19.0068 17.2323C19.2899 17.5154 19.2899 17.9745 19.0068 18.2576C18.7237 18.5407 18.2646 18.5407 17.9815 18.2576L16.8855 17.1616C16.6023 16.8784 16.6023 16.4194 16.8855 16.1363C17.1686 15.8531 17.6276 15.8531 17.9108 16.1363L19.0068 17.2323Z" />
-    <path d="M10.2679 18.5026C10.2679 18.1022 10.5925 17.7776 10.9929 17.7776C11.3933 17.7776 11.7179 18.1022 11.7179 18.5026V20.0526C11.7179 20.4531 11.3933 20.7776 10.9929 20.7776C10.5925 20.7776 10.2679 20.4531 10.2679 20.0526V18.5026Z" />
-    <path d="M3.13502 10.2689C3.53542 10.2689 3.86002 10.5935 3.86002 10.9939C3.86002 11.3943 3.53542 11.7189 3.13502 11.7189H1.58502C1.18461 11.7189 0.860016 11.3943 0.860016 10.9939C0.860016 10.5935 1.18461 10.2689 1.58502 10.2689H3.13502Z" />
-    <path d="M4.07765 16.1362C4.36078 15.8531 4.81982 15.8531 5.10295 16.1362C5.38608 16.4194 5.38608 16.8784 5.10295 17.1616L4.00694 18.2576C3.72381 18.5407 3.26476 18.5407 2.98163 18.2576C2.6985 17.9744 2.6985 17.5154 2.98163 17.2323L4.07765 16.1362Z" />
-    <path d="M5.85676 4.82884C6.13989 5.11197 6.13989 5.57101 5.85676 5.85414C5.57363 6.13727 5.11459 6.13727 4.83146 5.85414L3.73544 4.75813C3.45231 4.475 3.45231 4.01595 3.73544 3.73282C4.01857 3.44969 4.47762 3.44969 4.76075 3.73282L5.85676 4.82884Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="m11.992 8.712-.64 1.538a1.855 1.855 0 0 1-1.563 1.136l-1.66.133 1.264 1.084c.528.452.759 1.162.598 1.838l-.387 1.62 1.422-.868a1.855 1.855 0 0 1 1.933 0l1.421.868-.386-1.62a1.854 1.854 0 0 1 .597-1.838l1.265-1.084-1.66-.133a1.855 1.855 0 0 1-1.564-1.136l-.64-1.538ZM13 7.015c-.372-.896-1.641-.896-2.014 0L9.892 9.642a.273.273 0 0 1-.23.167l-2.837.228c-.967.077-1.36 1.284-.622 1.916l2.161 1.851a.27.27 0 0 1 .088.27l-.66 2.769c-.225.944.801 1.69 1.63 1.184l2.428-1.484a.273.273 0 0 1 .284 0l2.43 1.484c.827.505 1.854-.24 1.629-1.184l-.66-2.769a.273.273 0 0 1 .087-.27l2.162-1.851c.737-.632.344-1.839-.623-1.916l-2.837-.228a.273.273 0 0 1-.23-.167L13 7.015Z"/>
+  <path d="M11.201 2.111a.79.79 0 1 1 1.582 0v1.69a.791.791 0 0 1-1.582 0v-1.69Zm11.055 9.091a.79.79 0 0 1 0 1.582h-1.691a.79.79 0 0 1 0-1.582h1.69Zm-3.466-7.13a.791.791 0 0 1 1.119 1.119l-1.196 1.195a.79.79 0 1 1-1.119-1.118l1.196-1.196Zm1.945 14.727a.79.79 0 1 1-1.119 1.118l-1.195-1.195a.79.79 0 1 1 1.118-1.119l1.196 1.196Zm-9.534 1.386a.79.79 0 0 1 1.582 0v1.69a.791.791 0 0 1-1.582 0v-1.69ZM3.42 11.202a.79.79 0 1 1 0 1.582H1.73a.79.79 0 1 1 0-1.582h1.69Zm1.028 6.401a.79.79 0 1 1 1.119 1.119L4.37 19.917A.791.791 0 0 1 3.253 18.8l1.195-1.196ZM6.39 5.268a.79.79 0 1 1-1.12 1.118L4.076 5.191a.79.79 0 1 1 1.119-1.119L6.39 5.268Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconStarburstSmall.svg b/packages/components/src/common/svgs/IconStarburstSmall.svg
old mode 100755
new mode 100644
index 481260348..9135ea915
--- a/packages/components/src/common/svgs/IconStarburstSmall.svg
+++ b/packages/components/src/common/svgs/IconStarburstSmall.svg
@@ -1,3 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M 11.977 8.821 L 12.719 10.975 L 11.873 11.14 L 10.482 11.412 C 10.183 11.421 10.072 11.513 10.012 11.805 L 9.196 13.933 L 8.441 13.514 L 7.204 12.827 C 6.968 12.643 6.825 12.642 6.59 12.826 L 4.597 13.933 L 4.288 13.127 L 3.781 11.806 C 3.718 11.513 3.607 11.42 3.309 11.411 L 1.073 10.975 L 1.354 10.159 L 1.815 8.822 C 1.955 8.557 1.932 8.415 1.709 8.218 L 0.274 6.446 L 1.014 6.002 L 2.228 5.273 C 2.506 5.162 2.576 5.038 2.534 4.742 L 2.574 2.462 L 3.427 2.598 L 4.823 2.821 C 5.109 2.912 5.245 2.864 5.402 2.61 L 6.896 0.889 L 7.462 1.541 L 8.392 2.612 C 8.548 2.865 8.681 2.912 8.967 2.821 L 11.221 2.462 L 11.235 3.327 L 11.258 4.742 C 11.215 5.038 11.287 5.16 11.564 5.273 L 13.519 6.446 L 12.976 7.117 L 12.083 8.219 C 11.86 8.417 11.837 8.557 11.977 8.821 Z M 10.919 7.273 L 11.267 6.844 L 10.792 6.559 C 10.253 6.18 9.817 5.426 9.758 4.768 L 9.749 4.216 L 9.203 4.303 C 8.547 4.358 7.726 4.061 7.258 3.592 L 6.896 3.177 L 6.534 3.594 C 6.065 4.062 5.249 4.358 4.593 4.303 L 4.044 4.216 L 4.034 4.768 C 3.976 5.426 3.542 6.178 3.002 6.559 L 2.526 6.844 L 2.875 7.274 C 3.254 7.817 3.403 8.673 3.235 9.308 L 3.053 9.833 L 3.597 9.939 C 4.235 10.11 4.9 10.669 5.181 11.266 L 5.379 11.783 L 5.862 11.514 C 6.459 11.238 7.33 11.237 7.928 11.513 L 8.414 11.783 L 8.612 11.267 C 8.892 10.669 9.561 10.109 10.198 9.939 L 10.739 9.833 L 10.559 9.309 C 10.389 8.673 10.54 7.815 10.919 7.273 Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="m.91 6.341 1.513-.908a.8.8 0 0 0 .388-.672l.03-1.764a.8.8 0 0 1 .926-.777l1.743.277a.8.8 0 0 0 .729-.266L7.396.9a.8.8 0 0 1 1.208 0L9.76 2.231a.8.8 0 0 0 .73.266l1.742-.277a.8.8 0 0 1 .925.777l.03 1.764a.8.8 0 0 0 .388.672l1.513.908a.8.8 0 0 1 .21 1.19l-1.11 1.37a.8.8 0 0 0-.136.765l.575 1.668a.8.8 0 0 1-.604 1.046l-1.732.336a.8.8 0 0 0-.594.499c-.441-.186-1.4-.537-1.4-.537a2.3 2.3 0 0 1 1.708-1.435l.942-.182-.313-.907a2.3 2.3 0 0 1 .388-2.197l.603-.745-.822-.493a2.3 2.3 0 0 1-1.115-1.933l-.017-.958-.947.15a2.3 2.3 0 0 1-2.096-.763L8 2.491l-.629.724a2.3 2.3 0 0 1-2.096.763l-.947-.15-.017.959a2.3 2.3 0 0 1-1.115 1.932l-.822.493.603.745a2.3 2.3 0 0 1 .388 2.197l-.313.907.942.182a2.3 2.3 0 0 1 1.709 1.435l.343.895.838-.465.728 1.311-1.543.856a.8.8 0 0 1-1.135-.413l-.632-1.647a.8.8 0 0 0-.594-.499l-1.732-.336a.8.8 0 0 1-.604-1.046l.575-1.668a.8.8 0 0 0-.135-.765l-1.11-1.37A.8.8 0 0 1 .91 6.34Zm9.044 7.232.343-.895s.96.35 1.4.537l-.631 1.647a.8.8 0 0 1-1.135.413l-1.543-.856a.8.8 0 0 0-.776 0l-.728-1.311a2.3 2.3 0 0 1 2.232 0l.838.465Z" />
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconTableSmall.svg b/packages/components/src/common/svgs/IconTableSmall.svg
index a1ad03707..0d8665e2d 100644
--- a/packages/components/src/common/svgs/IconTableSmall.svg
+++ b/packages/components/src/common/svgs/IconTableSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M12.6875,1 L1.3125,1 C0.587617187,1 0,1.58761719 0,2.3125 L0,11.9375 C0,12.6623828 0.587617187,13.25 1.3125,13.25 L12.6875,13.25 C13.4123828,13.25 14,12.6623828 14,11.9375 L14,2.3125 C14,1.58761719 13.4123828,1 12.6875,1 Z M6.5,11.675 L1.25,11.675 L1.25,8.75 L6.5,8.75 L6.5,11.675 Z M6.5,7.125 L1.25,7.125 L1.25,4.15 L6.5,4.15 L6.5,7.125 Z M12.75,11.675 L7.5,11.675 L7.5,8.75 L12.75,8.75 L12.75,11.675 Z M12.75,7.125 L7.5,7.125 L7.5,4.15 L12.75,4.15 L12.75,7.125 Z"
-        id="Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M14.5 1.143h-13a1.5 1.5 0 0 0-1.5 1.5v11a1.5 1.5 0 0 0 1.5 1.5h13a1.5 1.5 0 0 0 1.5-1.5v-11a1.5 1.5 0 0 0-1.5-1.5Zm-7.071 12.2h-6V10h6v3.343Zm0-5.2h-6v-3.4h6v3.4Zm7.142 5.2h-6V10h6v3.343Zm0-5.2h-6v-3.4h6v3.4Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconTrashCanLarge.svg b/packages/components/src/common/svgs/IconTrashCanLarge.svg
index 72260c68f..647110c6c 100644
--- a/packages/components/src/common/svgs/IconTrashCanLarge.svg
+++ b/packages/components/src/common/svgs/IconTrashCanLarge.svg
@@ -1,7 +1,5 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path d="M 16.431 7.178 L 17.466 7.178 L 17 18.5 C 16.979 18.877 16.807 19.232 16.518 19.491 C 16.229 19.751 15.846 19.895 15.449 19.895 L 6.552 19.895 C 6.154 19.895 5.771 19.751 5.482 19.491 C 5.193 19.232 5.021 18.877 5 18.5 L 4.534 7.178 L 5.569 7.178 L 6.034 18.448 C 6.041 18.574 6.099 18.692 6.195 18.779 C 6.291 18.865 6.4190000000000005 18.914 6.552 18.913 L 15.449 18.913 C 15.581 18.914 15.709 18.866 15.805 18.779 C 15.901 18.693 15.959 18.574 15.966 18.449 L 16.431 7.178 Z M 17.668 6.984 L 17.659 7.186 L 17.194 18.511 C 17.163 18.925 16.959 19.346 16.647 19.636 C 16.328 19.914 15.881 20.083 15.448 20.089 L 6.552 20.089 C 6.12 20.083 5.672 19.914 5.352 19.635 C 5.041 19.346 4.836 18.922 4.806 18.508 L 4.332 6.984 L 5.755 6.984 L 5.763 7.17 L 6.228 18.438 C 6.225 18.526 6.251 18.578 6.325 18.635 C 6.39 18.701999999999998 6.453 18.726 6.552 18.719 L 15.449 18.719 C 15.547 18.726 15.61 18.701999999999998 15.675 18.635 C 15.749 18.578 15.774000000000001 18.529 15.772 18.441 L 16.245 6.984 L 17.668 6.984 Z M 16.16 18.457 C 16.143 18.619 16.053 18.807 15.934 18.923000000000002 C 15.808 19.028 15.615 19.101 15.448 19.107 L 6.552 19.107 C 6.384 19.101 6.192 19.028 6.065 18.923000000000002 C 5.947 18.807 5.857 18.622 5.841 18.459 L 5.383 7.372 L 4.737 7.372 L 5.194 18.492 C 5.205 18.832 5.345 19.117 5.612 19.347 C 5.87 19.588 6.188 19.707 6.551 19.701 L 15.449 19.701 C 15.812 19.707 16.13 19.588 16.388 19.347 C 16.654 19.117 16.795 18.829 16.806 18.49 L 17.263 7.372 L 16.617 7.372 L 16.16 18.457 Z" stroke-width="0.388123" stroke-linejoin="round"></path>
-    <rect width="1.20007" height="9.21678" rx="0.4" transform="matrix(0.999085 -0.0427776 0.0402026 0.999192 7.77173 8.41895)"></rect>
-    <rect x="10.4001" y="8.38867" width="1.2" height="9.18823" rx="0.4"></rect>
-    <rect width="1.20007" height="9.21675" rx="0.4" transform="matrix(0.99904 0.0438118 -0.0411748 0.999152 13.0385 8.36694)"></rect>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.42261 4.01807C6.42261 2.9135 7.31804 2.01807 8.42261 2.01807H13.5795C14.684 2.01807 15.5795 2.9135 15.5795 4.01807V4.61182H18.2401C18.4886 4.61182 18.6901 4.81329 18.6901 5.06182V5.57197C18.6901 5.8205 18.4886 6.02197 18.2401 6.02197H3.76006C3.51153 6.02197 3.31006 5.8205 3.31006 5.57197V5.06182C3.31006 4.81329 3.51153 4.61182 3.76006 4.61182H6.42261V4.01807ZM8.43594 3.43604C8.10457 3.43604 7.83594 3.70466 7.83594 4.03604V4.604H14.1641V4.03604C14.1641 3.70466 13.8954 3.43604 13.5641 3.43604H8.43594Z"></path>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M9.188 2.202a2.182 2.182 0 0 0-2.181 2.181v.648H4.102a.49.49 0 0 0-.49.491v.557c0 .27.219.49.49.49h15.796a.49.49 0 0 0 .491-.49v-.557a.49.49 0 0 0-.49-.49h-2.903v-.649a2.182 2.182 0 0 0-2.182-2.181H9.188Zm-.64 2.201c0-.361.293-.654.655-.654h5.594c.362 0 .655.293.655.654v.62H8.548v-.62Z"/>
+  <path d="M17.714 7.828a.218.218 0 0 1 .218-.209h1.103c.124 0 .223.103.218.227l-.492 12.336c-.023.411-.213 1.007-.528 1.29-.315.283-.732.44-1.166.44H6.929c-.434 0-.852-.157-1.167-.44-.315-.283-.501-.88-.524-1.29L4.733 7.845a.218.218 0 0 1 .218-.227h1.117c.117 0 .213.093.218.21l.506 12.296s.047.293.363.292l9.698.008c.308 0 .353-.316.353-.316l.508-12.28Z"/>
+  <path d="M8.496 9.62a.438.438 0 0 1 .418-.454l.436-.02a.436.436 0 0 1 .454.418l.369 9.175a.438.438 0 0 1-.418.454l-.436.02a.435.435 0 0 1-.454-.418l-.37-9.175Zm3.286-.469a.436.436 0 0 0-.436.437v9.15c0 .241.195.437.436.437h.437c.24 0 .436-.196.436-.437v-9.15a.436.436 0 0 0-.436-.437h-.437Zm2.424.413a.435.435 0 0 1 .454-.417l.436.019c.24.01.428.214.418.455l-.378 9.174a.435.435 0 0 1-.454.417l-.436-.02a.438.438 0 0 1-.418-.454l.378-9.174Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconTrashCanSmall.svg b/packages/components/src/common/svgs/IconTrashCanSmall.svg
index 731ce47ec..c495b704e 100644
--- a/packages/components/src/common/svgs/IconTrashCanSmall.svg
+++ b/packages/components/src/common/svgs/IconTrashCanSmall.svg
@@ -1,4 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M9.30431 1.4V1.85899H12.5903C13.1015 1.85899 13.5158 2.27335 13.5158 2.78449C13.5158 3.29564 13.1015 3.71 12.5903 3.71H12.1504L11.4017 12.716C11.3413 13.4417 10.7347 14 10.0065 14H3.81485C3.08662 14 2.47999 13.4417 2.41966 12.716L1.67094 3.71H1.39551C0.884364 3.71 0.470001 3.29564 0.470001 2.78449C0.470001 2.27335 0.884363 1.85899 1.39551 1.85899H4.4841V1.4C4.4841 0.626801 5.1109 0 5.8841 0H7.90431C8.67751 0 9.30431 0.626801 9.30431 1.4ZM8.04401 1.12H5.76201V1.84254H8.04401V1.12ZM4.40777 11.7546C4.42273 12.0306 4.65794 12.2427 4.93408 12.2291C5.21217 12.2155 5.42609 11.9782 5.41103 11.7002L5.07055 5.41559C5.05559 5.13952 4.82038 4.92742 4.54425 4.941C4.26616 4.95468 4.05223 5.19192 4.0673 5.46994L4.40777 11.7546ZM6.77911 12.2043C7.05623 12.2043 7.28088 11.9797 7.28088 11.7026V5.43466C7.28088 5.15755 7.05623 4.9329 6.77911 4.9329C6.502 4.9329 6.27735 5.15755 6.27735 5.43466V11.7026C6.27735 11.9797 6.502 12.2043 6.77911 12.2043ZM8.62415 12.2127C8.90029 12.2263 9.1355 12.0142 9.15046 11.7381L9.49093 5.45349C9.50599 5.17547 9.29207 4.93823 9.01398 4.92455C8.73785 4.91097 8.50263 5.12307 8.48768 5.39913L8.1472 11.6838C8.13214 11.9618 8.34606 12.199 8.62415 12.2127Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+    d="M10.633 1.6v.525h3.756a1.058 1.058 0 1 1 0 2.115h-.503l-.856 10.293A1.6 1.6 0 0 1 11.436 16H4.36a1.6 1.6 0 0 1-1.595-1.467L1.91 4.24h-.315a1.058 1.058 0 0 1 0-2.115h3.53V1.6a1.6 1.6 0 0 1 1.6-1.6h2.308a1.6 1.6 0 0 1 1.6 1.6Zm-1.44-.32H6.585v.826h2.608V1.28ZM5.037 13.434a.574.574 0 0 0 1.147-.062l-.39-7.183a.574.574 0 1 0-1.146.062l.39 7.183Zm2.71.514a.573.573 0 0 0 .574-.574V6.211a.573.573 0 1 0-1.147 0v7.163c0 .317.257.574.574.574Zm2.11.01a.574.574 0 0 0 .6-.543l.39-7.182A.574.574 0 1 0 9.7 6.17l-.389 7.183a.574.574 0 0 0 .545.604Z" />
 </svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconTreeDendogramLarge.svg b/packages/components/src/common/svgs/IconTreeDendogramLarge.svg
index 5a5db50ca..d375f78e2 100644
--- a/packages/components/src/common/svgs/IconTreeDendogramLarge.svg
+++ b/packages/components/src/common/svgs/IconTreeDendogramLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-  <path d="M19.0779 5.79787C19.7867 5.79787 20.3613 5.2233 20.3613 4.51453C20.3613 3.80577 19.7867 3.2312 19.0779 3.2312C18.6368 3.2312 18.2477 3.45375 18.0167 3.79268H11C10.6013 3.79268 10.2781 4.11588 10.2781 4.51456V7.11982H7.14993C6.75125 7.11982 6.42806 7.44302 6.42806 7.8417V11.6353H4.05642C3.82543 11.2964 3.4363 11.0738 2.9952 11.0738C2.28644 11.0738 1.71187 11.6484 1.71187 12.3572C1.71187 13.0659 2.28644 13.6405 2.9952 13.6405C3.43629 13.6405 3.8254 13.418 4.05639 13.0791H6.42806V17.3479C6.42806 17.7466 6.75125 18.0697 7.14993 18.0697H18.0167C18.2477 18.4087 18.6368 18.6313 19.0779 18.6313C19.7867 18.6313 20.3613 18.0567 20.3613 17.3479C20.3613 16.6392 19.7867 16.0646 19.0779 16.0646C18.6369 16.0646 18.2478 16.2871 18.0168 16.626H7.87181V8.56357H10.2781V10.6936C10.2781 11.0923 10.6013 11.4154 11 11.4154H18.0167C18.2477 11.7544 18.6368 11.9769 19.0779 11.9769C19.7867 11.9769 20.3613 11.4023 20.3613 10.6936C20.3613 9.98479 19.7867 9.41023 19.0779 9.41023C18.6368 9.41023 18.2477 9.63277 18.0167 9.97169H11.7219V5.23643H18.0167C18.2477 5.57534 18.6369 5.79787 19.0779 5.79787Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20.812 6.325a1.4 1.4 0 1 0-1.158-2.188H12a.788.788 0 0 0-.788.788v2.842H7.8a.787.787 0 0 0-.788.788v4.138H4.425a1.4 1.4 0 1 0 0 1.575h2.587v4.657c0 .435.353.787.788.787h11.854a1.399 1.399 0 0 0 2.558-.787 1.4 1.4 0 0 0-2.557-.788H8.587V9.342h2.625v2.324c0 .435.353.787.788.787h7.655a1.4 1.4 0 1 0 0-1.575h-6.868V5.712h6.868c.252.37.676.613 1.157.613Z"/>
 </svg>
-  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconTreeHorizontalLarge.svg b/packages/components/src/common/svgs/IconTreeHorizontalLarge.svg
index e14c25a1e..38ea49fdd 100644
--- a/packages/components/src/common/svgs/IconTreeHorizontalLarge.svg
+++ b/packages/components/src/common/svgs/IconTreeHorizontalLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2187 15.8358C17.998 15.8358 18.6088 16.4436 18.6088 17.2189C18.6088 18.0025 17.998 18.6163 17.2187 18.6163C16.444 18.6163 15.8149 17.9897 15.8149 17.2189C15.8149 16.4436 16.4318 15.8358 17.2187 15.8358ZM4.79563 12.3993C4.01635 12.3993 3.40552 11.7855 3.40552 11.0026C3.40552 10.2265 4.01635 9.61878 4.79563 9.61878C5.58327 9.61878 6.20017 10.2265 6.20017 11.0026C6.20017 11.7727 5.56961 12.3993 4.79563 12.3993ZM17.2187 3.38288C17.998 3.38288 18.6088 3.99665 18.6088 4.78029C18.6088 5.55638 17.998 6.16337 17.2187 6.16337C16.4318 6.16337 15.8149 5.55638 15.8149 4.78029C15.8149 4.01024 16.444 3.38288 17.2187 3.38288ZM17.2187 9.61878C17.998 9.61878 18.6088 10.2265 18.6088 11.0026C18.6088 11.7855 17.998 12.3993 17.2187 12.3993C16.444 12.3993 15.8149 11.7727 15.8149 11.0026C15.8149 10.2265 16.4318 9.61878 17.2187 9.61878ZM14.52 11.77C14.8364 12.9824 15.994 13.92 17.2187 13.92C18.7181 13.92 20.04 12.5012 20.04 11.0026C20.04 9.50326 18.7181 8.07997 17.2187 8.07997C15.9879 8.07997 14.8303 9.02921 14.52 10.25H11.79V5.59997H14.54C14.8746 6.7792 16.022 7.59997 17.2187 7.59997C18.7181 7.59997 20.04 6.27962 20.04 4.78028C20.04 3.2817 18.7181 1.95996 17.2187 1.95996C15.978 1.95996 14.7983 2.84638 14.51 4.07997H11.0216C10.8463 4.07997 10.5768 4.1872 10.4516 4.3095C10.3242 4.43332 10.2522 4.66176 10.25 4.84974V10.25H7.48994C7.17959 9.02921 6.0264 8.07996 4.79563 8.07996C3.28942 8.07996 1.95995 9.49996 1.95995 11.0026C1.95995 12.4648 3.32736 13.92 4.79563 13.92C6.02109 13.92 7.17428 12.9824 7.48994 11.77H10.25V17.1706C10.256 17.5314 10.6604 17.92 11.0208 17.92H14.51C14.7998 19.1513 15.9803 20.04 17.2187 20.04C18.7181 20.04 20.04 18.7175 20.04 17.2189C20.04 15.7203 18.7181 14.4 17.2187 14.4C16.022 14.4 14.8746 15.22 14.54 16.4H11.79V11.77H14.52Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M18.784 17.275c.85 0 1.517.663 1.517 1.51 0 .854-.667 1.524-1.517 1.524a1.53 1.53 0 0 1-1.531-1.525c0-.846.673-1.509 1.531-1.509ZM5.232 13.527c-.85 0-1.517-.67-1.517-1.524 0-.847.667-1.51 1.517-1.51.859 0 1.532.663 1.532 1.51a1.53 1.53 0 0 1-1.532 1.524ZM18.784 3.69c.85 0 1.517.67 1.517 1.525 0 .846-.667 1.509-1.517 1.509-.858 0-1.531-.663-1.531-1.51 0-.84.686-1.524 1.531-1.524Zm0 6.803c.85 0 1.517.663 1.517 1.51 0 .854-.667 1.524-1.517 1.524a1.529 1.529 0 0 1-1.531-1.524c0-.847.673-1.51 1.531-1.51ZM15.84 12.84c.345 1.323 1.608 2.345 2.944 2.345 1.636 0 3.078-1.547 3.078-3.182 0-1.636-1.442-3.189-3.078-3.189-1.343 0-2.605 1.036-2.944 2.368h-2.978V6.109h3c.365 1.286 1.617 2.182 2.922 2.182 1.636 0 3.078-1.44 3.078-3.076 0-1.635-1.442-3.077-3.078-3.077-1.353 0-2.64.967-2.955 2.313h-3.805c-.192 0-.486.117-.622.25-.14.135-.218.385-.22.59v5.89H8.17C7.832 9.85 6.574 8.815 5.23 8.815c-1.642 0-3.093 1.55-3.093 3.189 0 1.595 1.492 3.182 3.094 3.182 1.337 0 2.595-1.022 2.939-2.345h3.01v5.892c.007.393.449.817.842.817h3.806c.316 1.343 1.604 2.313 2.955 2.313 1.636 0 3.078-1.443 3.078-3.078 0-1.635-1.442-3.075-3.078-3.075-1.305 0-2.557.895-2.922 2.182h-3V12.84h2.978Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconTreeHorizontalPrivateLarge.svg b/packages/components/src/common/svgs/IconTreeHorizontalPrivateLarge.svg
index d33410928..5effba6cf 100644
--- a/packages/components/src/common/svgs/IconTreeHorizontalPrivateLarge.svg
+++ b/packages/components/src/common/svgs/IconTreeHorizontalPrivateLarge.svg
@@ -1,5 +1,8 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5681 14.575H8.84681V10.175H11.5851C11.866 11.275 12.8489 12.0312 13.9723 12.0312C15.3766 12.0312 16.5 10.9312 16.5 9.55625C16.5 8.18125 15.3766 7.08125 13.9723 7.08125C12.8489 7.08125 11.866 7.8375 11.5851 8.9375H8.84681V4.5375H11.5851C11.866 5.6375 12.8489 6.325 13.9723 6.325C15.3766 6.325 16.5 5.225 16.5 3.85C16.5 2.475 15.3766 1.375 13.9723 1.375C12.8489 1.375 11.7957 2.2 11.5851 3.3H8.28511C8.14468 3.3 8.00426 3.36875 7.86383 3.50625C7.7234 3.64375 7.65319 3.78125 7.65319 3.91875V8.9375H4.91489C4.63404 7.8375 3.65106 7.08125 2.52766 7.08125C1.1234 7.08125 0 8.18125 0 9.55625V9.625C0.0702128 10.9312 1.19362 12.0312 2.52766 12.0312C3.65106 12.0312 4.63404 11.275 4.91489 10.175H7.65319V15.1938C7.65319 15.5375 7.93404 15.8125 8.28511 15.8125H12.0064C12.0766 15.3313 12.2872 14.9875 12.5681 14.575ZM13.9723 8.31875C14.6745 8.31875 15.2362 8.86875 15.2362 9.55625C15.2362 10.2437 14.6745 10.8625 13.9723 10.8625C13.2702 10.8625 12.7085 10.3125 12.7085 9.55625C12.6383 8.86875 13.2 8.31875 13.9723 8.31875ZM13.9723 2.6125C14.6745 2.6125 15.2362 3.1625 15.2362 3.91875C15.2362 4.60625 14.6745 5.15625 13.9723 5.15625C13.2702 5.15625 12.7085 4.60625 12.7085 3.91875C12.6383 3.23125 13.2702 2.6125 13.9723 2.6125ZM2.45745 10.8625C1.75532 10.8625 1.19362 10.3125 1.19362 9.55625C1.19362 8.86875 1.75532 8.31875 2.45745 8.31875C3.15957 8.31875 3.79149 8.86875 3.79149 9.55625C3.79149 10.2437 3.15957 10.8625 2.45745 10.8625Z" fill="#CCCCCC" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.8438 11.6875C19.7312 11.6875 22 14.025 22 16.8438C22 19.6625 19.6625 22 16.8438 22C14.025 22 11.6875 19.6625 11.6875 16.8438C11.6875 14.025 14.025 11.6875 16.8438 11.6875ZM16.8438 13.475C15.8813 13.475 15.0562 14.3 15.0562 15.2625V15.8813C14.7125 15.8813 14.4375 16.1562 14.4375 16.5V18.9062C14.4375 19.25 14.7125 19.525 15.0562 19.525H18.6313C18.975 19.525 19.25 19.25 19.25 18.9062V16.5C19.25 16.1562 18.975 15.8813 18.6313 15.8813V15.2625C18.6313 14.3 17.8062 13.475 16.8438 13.475ZM16.8438 16.9125C17.1188 16.9125 17.325 17.1188 17.2563 17.325C17.2563 17.5313 17.1875 17.6687 17.05 17.7375V18.3563C17.05 18.4938 16.9813 18.5625 16.8438 18.5625C16.7062 18.5625 16.6375 18.4938 16.6375 18.3563V17.7375C16.5 17.6 16.4312 17.4625 16.4312 17.325C16.4312 17.1188 16.5687 16.9125 16.8438 16.9125ZM16.8438 14.0938C17.5312 14.0938 18.0813 14.6437 18.0125 15.3312V15.95H15.6063V15.3312C15.6063 14.6437 16.1562 14.0938 16.8438 14.0938Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        fill="#CCCCCC"
+        d="M13.71 15.9H9.652v-4.8h2.987a2.683 2.683 0 0 0 2.605 2.025c1.531 0 2.757-1.2 2.757-2.7 0-1.5-1.226-2.7-2.757-2.7a2.683 2.683 0 0 0-2.605 2.025H9.651v-4.8h2.987c.307 1.2 1.379 1.95 2.605 1.95C16.774 6.9 18 5.7 18 4.2c0-1.5-1.226-2.7-2.757-2.7-1.226 0-2.375.9-2.605 2.1h-3.6c-.153 0-.306.075-.46.225-.152.15-.23.3-.23.45V9.75H5.363a2.683 2.683 0 0 0-2.605-2.025c-1.531 0-2.757 1.2-2.757 2.7v.075c.077 1.425 1.302 2.625 2.757 2.625A2.683 2.683 0 0 0 5.362 11.1h2.987v5.475a.68.68 0 0 0 .69.675h4.059c.076-.525.306-.9.613-1.35Zm1.533-6.825c.766 0 1.378.6 1.378 1.35 0 .75-.612 1.425-1.378 1.425-.766 0-1.38-.6-1.38-1.425-.076-.75.537-1.35 1.38-1.35Zm0-6.225c.766 0 1.378.6 1.378 1.425 0 .75-.612 1.35-1.378 1.35-.766 0-1.38-.6-1.38-1.35-.076-.75.614-1.425 1.38-1.425Zm-12.562 9c-.766 0-1.379-.6-1.379-1.425 0-.75.613-1.35 1.379-1.35s1.455.6 1.455 1.35c0 .75-.69 1.425-1.455 1.425Z" />
+    <path fill-rule="evenodd"
+        d="M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625Zm0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95Zm0 3.75c.3 0 .525.225.45.45 0 .225-.075.375-.225.45v.675c0 .15-.075.225-.225.225-.15 0-.225-.075-.225-.225v-.675c-.15-.15-.225-.3-.225-.45 0-.225.15-.45.45-.45Zm0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35Z" />
 </svg>
-    
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconTreeHorizontalPublicLarge.svg b/packages/components/src/common/svgs/IconTreeHorizontalPublicLarge.svg
index 70a64038c..3b0654a22 100644
--- a/packages/components/src/common/svgs/IconTreeHorizontalPublicLarge.svg
+++ b/packages/components/src/common/svgs/IconTreeHorizontalPublicLarge.svg
@@ -1,5 +1,8 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7787 14.575H8.84681V10.175H11.5851C11.866 11.275 12.8489 12.0312 13.9723 12.0312C15.3766 12.0312 16.5 10.9312 16.5 9.55625C16.5 8.18125 15.3766 7.08125 13.9723 7.08125C12.8489 7.08125 11.866 7.8375 11.5851 8.9375H8.84681V4.5375H11.5851C11.866 5.6375 12.8489 6.325 13.9723 6.325C15.3766 6.325 16.5 5.225 16.5 3.85C16.5 2.475 15.3766 1.375 13.9723 1.375C12.8489 1.375 11.7957 2.2 11.5851 3.3H8.28511C8.14468 3.3 8.00426 3.36875 7.86383 3.50625C7.7234 3.64375 7.65319 3.78125 7.65319 3.91875V8.9375H4.91489C4.63404 7.8375 3.65106 7.08125 2.52766 7.08125C1.1234 7.08125 0 8.18125 0 9.55625V9.625C0.0702128 10.9312 1.19362 12.0312 2.52766 12.0312C3.65106 12.0312 4.63404 11.275 4.91489 10.175H7.65319V15.1938C7.65319 15.5375 7.93404 15.8125 8.28511 15.8125H12.217C12.2872 15.3313 12.4979 14.9188 12.7787 14.575ZM13.9723 8.31875C14.6745 8.31875 15.2362 8.86875 15.2362 9.55625C15.2362 10.2437 14.6745 10.8625 13.9723 10.8625C13.2702 10.8625 12.7085 10.3125 12.7085 9.55625C12.6383 8.86875 13.2 8.31875 13.9723 8.31875ZM13.9723 2.6125C14.6745 2.6125 15.2362 3.1625 15.2362 3.91875C15.2362 4.60625 14.6745 5.15625 13.9723 5.15625C13.2702 5.15625 12.7085 4.60625 12.7085 3.91875C12.6383 3.23125 13.2702 2.6125 13.9723 2.6125ZM2.45745 10.8625C1.75532 10.8625 1.19362 10.3125 1.19362 9.55625C1.19362 8.86875 1.75532 8.31875 2.45745 8.31875C3.15957 8.31875 3.79149 8.86875 3.79149 9.55625C3.79149 10.2437 3.15957 10.8625 2.45745 10.8625Z" fill="#CCCCCC" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2547 11.7069C14.1041 11.4329 11.4329 14.1041 11.7069 17.2547C11.9123 19.7204 13.8986 21.7752 16.4328 21.9806C19.5834 22.2546 22.2546 19.5834 21.9806 16.4328C21.7752 13.8986 19.7889 11.8439 17.2547 11.7069ZM17.8711 12.3918C18.0766 12.4603 18.2821 12.5288 18.4876 12.5973C18.6245 12.6658 18.693 12.7342 18.83 12.7342C19.3779 13.0082 19.8574 13.3507 20.2683 13.8301C20.2683 13.8301 20.3368 13.8986 20.3368 13.9671C20.3368 14.0356 20.3368 14.1726 20.3368 14.2411C20.3368 14.3096 20.2683 14.378 20.2683 14.4465C20.2683 14.5835 20.4053 14.652 20.4738 14.652C20.5423 14.652 20.6793 14.652 20.7478 14.652C20.8163 14.652 20.8848 14.7205 20.8848 14.789C20.9533 14.926 21.0217 15.063 21.0217 15.1315C21.2272 15.6109 21.2957 16.0903 21.3642 16.6383C21.3642 16.7068 21.3642 16.7753 21.2957 16.8438C21.2272 16.9122 21.0902 17.0492 21.0217 17.1862C20.8848 17.4602 20.7478 17.8711 20.5423 18.0766C20.4053 18.2136 20.2683 18.3506 20.2683 18.4876C20.1998 18.6245 20.2683 18.7615 20.1998 18.83C20.1998 18.8985 20.1314 18.8985 20.0629 18.83C19.8574 18.556 19.7889 18.2821 19.7204 18.0081C19.6519 17.8026 19.6519 17.5972 19.5834 17.3232C19.5149 17.1177 19.3779 16.9122 19.1725 16.7753C18.967 16.6383 18.693 16.7068 18.4876 16.6383C18.2136 16.6383 18.0081 16.5698 17.8026 16.3643C17.7341 16.2958 17.6657 16.1588 17.6657 16.0903C17.5287 15.5424 17.8711 14.926 18.3506 14.652C18.4191 14.5835 18.4876 14.5835 18.556 14.515C18.693 14.378 18.7615 14.2411 18.693 14.0356C18.693 13.9671 18.6245 13.9671 18.6245 13.9671C18.4876 14.0356 18.3506 14.0356 18.2821 14.1041C18.2136 14.1041 18.1451 14.1041 18.1451 14.0356C18.1451 13.8301 18.1451 13.6246 18.2136 13.3507C18.2821 13.0767 18.3506 12.8712 18.2136 12.6658C18.2136 12.5973 18.1451 12.5973 18.0766 12.5973C17.8711 12.5973 17.6657 12.5973 17.4602 12.5973C17.5972 12.5288 17.6657 12.4603 17.7341 12.3233C17.8026 12.4603 17.8711 12.3918 17.8711 12.3918ZM15.6794 12.4603C15.7479 12.4603 15.7479 12.4603 15.8164 12.5288C15.8849 12.6658 15.9534 12.7342 16.0218 12.8712C16.1588 13.1452 16.2273 13.4877 16.0903 13.6931C15.9534 13.9671 15.6109 14.1041 15.3369 14.3096C14.7205 14.5835 14.2411 15.063 13.8986 15.6109L13.8301 15.6794C13.7616 15.6794 13.7616 15.6794 13.6931 15.6109C13.6246 15.5424 13.5561 15.5424 13.4877 15.4739C13.4877 15.4739 13.4192 15.4739 13.4192 15.5424C13.3507 15.8164 13.4877 16.1588 13.7616 16.2958C13.8301 16.2958 13.8301 16.3643 13.8986 16.3643C13.9671 16.5013 13.8986 16.6383 13.8986 16.7753C13.8986 16.9807 14.1726 17.0492 14.3096 17.0492C14.515 17.0492 14.652 16.9122 14.8575 16.8438C15.2684 16.7068 15.6794 16.7753 16.0218 16.9807C16.2273 17.1177 16.3643 17.2547 16.5013 17.3917C16.6383 17.5287 16.8438 17.5972 17.0492 17.5972C17.1177 17.5972 17.1177 17.5972 17.1862 17.6657C17.2547 17.8711 17.1862 18.0766 17.0492 18.2136C16.9122 18.4191 16.7068 18.4876 16.5698 18.693C16.2273 19.104 16.0903 19.7204 15.8164 20.1998C15.7479 20.2683 15.6794 20.4053 15.6109 20.4738C15.5424 20.6108 15.5424 20.7478 15.5424 20.9533C15.5424 20.9533 15.5424 21.0217 15.4739 21.0217C15.4054 21.0217 15.3369 20.9533 15.2684 20.9533C15.1999 20.9533 15.1999 20.8848 15.1999 20.8163C15.063 20.1998 14.8575 19.5834 14.5835 18.967C14.4465 18.7615 14.3096 18.4876 14.1041 18.3506C14.0356 18.2821 13.9671 18.2821 13.9671 18.2136C13.9671 18.1451 13.9671 18.0766 13.9671 18.0766C14.0356 17.4602 13.7616 16.8438 13.2822 16.5013C13.2137 16.4328 13.0767 16.3643 13.0767 16.2958C13.0767 16.2273 13.0082 16.0903 13.0082 16.0218C12.9397 15.9534 12.8027 15.8164 12.7342 15.7479C12.6658 15.7479 12.6658 15.6794 12.6658 15.6109C12.9397 14.1726 14.1041 12.8712 15.6794 12.4603Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        fill="#CCCCCC"
+        d="M13.94 15.9H9.651v-4.8h2.987a2.683 2.683 0 0 0 2.605 2.025c1.531 0 2.757-1.2 2.757-2.7 0-1.5-1.226-2.7-2.757-2.7a2.683 2.683 0 0 0-2.605 2.025H9.651v-4.8h2.987c.307 1.2 1.379 1.95 2.605 1.95C16.774 6.9 18 5.7 18 4.2c0-1.5-1.226-2.7-2.757-2.7-1.226 0-2.375.9-2.605 2.1h-3.6c-.153 0-.306.075-.46.225-.152.15-.23.3-.23.45V9.75H5.363a2.683 2.683 0 0 0-2.605-2.025c-1.531 0-2.757 1.2-2.757 2.7v.075c.077 1.425 1.302 2.625 2.757 2.625A2.683 2.683 0 0 0 5.362 11.1h2.987v5.475a.68.68 0 0 0 .69.675h4.289a2.75 2.75 0 0 1 .612-1.35Zm1.303-6.825c.766 0 1.378.6 1.378 1.35 0 .75-.612 1.425-1.378 1.425-.766 0-1.38-.6-1.38-1.425-.076-.75.537-1.35 1.38-1.35Zm0-6.225c.766 0 1.378.6 1.378 1.425 0 .75-.612 1.35-1.378 1.35-.766 0-1.38-.6-1.38-1.35-.076-.75.614-1.425 1.38-1.425Zm-12.562 9c-.766 0-1.379-.6-1.379-1.425 0-.75.613-1.35 1.379-1.35s1.455.6 1.455 1.35c0 .75-.69 1.425-1.455 1.425Z" />
+    <path fill-rule="evenodd"
+        d="M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052-.224-2.765-2.391-5.006-5.156-5.156Zm.673.747.672.224c.15.075.224.15.374.15.598.299 1.12.672 1.569 1.195 0 0 .075.075.075.15v.299c0 .074-.075.15-.075.224 0 .15.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .075 0 .15-.074.224a1.63 1.63 0 0 0-.3.374c-.149.299-.298.747-.522.97-.15.15-.3.3-.3.45-.074.149 0 .298-.074.373 0 .074-.075.074-.15 0-.223-.299-.298-.598-.373-.897-.075-.224-.075-.448-.15-.747a1.162 1.162 0 0 0-.448-.598c-.224-.15-.523-.074-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.299-.149-.598.225-1.27.748-1.569.075-.075.15-.075.224-.15.15-.149.224-.298.15-.522 0-.075-.075-.075-.075-.075-.15.075-.3.075-.374.15-.075 0-.15 0-.15-.075 0-.225 0-.449.075-.748s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.584.584 0 0 0 .3-.298c.074.149.149.074.149.074Zm-2.391.075c.075 0 .075 0 .15.075.074.15.149.224.223.373.15.3.224.673.075.897-.15.299-.523.448-.822.672-.672.3-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.751.751 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.3.447.3.225 0 .374-.15.598-.225a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.448.15.15.374.224.598.224.075 0 .075 0 .15.075a.581.581 0 0 1-.15.597c-.15.224-.373.3-.523.523-.373.449-.523 1.121-.822 1.644-.075.075-.15.224-.224.3-.075.149-.075.298-.075.522 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075-.075 0-.075-.075-.075-.15a10.657 10.657 0 0 0-.673-2.017c-.15-.224-.299-.523-.523-.672-.074-.075-.15-.075-.15-.15v-.15a1.875 1.875 0 0 0-.746-1.718c-.075-.074-.225-.149-.225-.224 0-.075-.074-.224-.074-.299l-.3-.299c-.074 0-.074-.074-.074-.149.3-1.569 1.57-2.989 3.288-3.437Z" />
 </svg>
-    
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconTreeHorizontalSmall.svg b/packages/components/src/common/svgs/IconTreeHorizontalSmall.svg
index 16599603f..16bbbcdac 100644
--- a/packages/components/src/common/svgs/IconTreeHorizontalSmall.svg
+++ b/packages/components/src/common/svgs/IconTreeHorizontalSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M11.5170333,1 C12.4979756,1 13.2668739,1.76500136 13.2668739,2.74192235 C13.2668739,3.72739614 12.4979756,4.5 11.5170333,4.5 C10.8151171,4.5 10.208206,4.091382 9.92316754,3.5009266 L7.25,3.5 L7.25,6.25 L9.91237329,6.2500398 C10.1902215,5.65413552 10.7971134,5.25 11.5170333,5.25 C12.4979756,5.25 13.2668739,6.01500136 13.2668739,6.99192235 C13.2668739,7.97739614 12.4979756,8.75 11.5170333,8.75 C10.8151171,8.75 10.208206,8.341382 9.92316754,7.7509266 L7.25,7.75 L7.25,10.5 L9.91237329,10.5000398 C10.1902215,9.90413552 10.7971134,9.5 11.5170333,9.5 C12.4979756,9.5 13.2668739,10.2650014 13.2668739,11.2419223 C13.2668739,12.2273961 12.4979756,13 11.5170333,13 C10.8151171,13 10.208206,12.591382 9.92316754,12.0009266 L6.5,12 C6.12030423,12 5.80650904,11.7178461 5.75684662,11.3517706 L5.75,11.25 L5.75,7.75 L3.85123643,7.75099183 C3.57394018,8.34660592 2.97584327,8.75 2.26703335,8.75 C1.29182197,8.75 0.5,7.96124084 0.5,6.99192235 C0.5,6.01500136 1.27653952,5.25 2.26703335,5.25 C2.98001092,5.25 3.58096972,5.65413552 3.85609444,6.2500398 L5.75,6.25 L5.75,2.75 C5.75,2.37030423 6.03215388,2.05650904 6.39822944,2.00684662 L6.5,2 L9.91237329,2.0000398 C10.1902215,1.40413552 10.7971134,1 11.5170333,1 Z"
-        id="Combined-Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M13.162 1.143c1.121 0 2 .874 2 1.99 0 1.127-.879 2.01-2 2.01A2.022 2.022 0 0 1 11.341 4H8.286v3.143h3.042A2 2 0 0 1 13.162 6c1.121 0 2 .874 2 1.99 0 1.127-.879 2.01-2 2.01a2.022 2.022 0 0 1-1.821-1.142H8.286V12h3.042a2 2 0 0 1 1.834-1.143c1.121 0 2 .875 2 1.99 0 1.127-.879 2.01-2 2.01a2.022 2.022 0 0 1-1.821-1.142H7.429a.857.857 0 0 1-.85-.742l-.008-.116v-4l-2.17.001c-.317.681-1 1.142-1.81 1.142A2.016 2.016 0 0 1 .57 7.99C.571 6.875 1.46 6 2.591 6c.815 0 1.502.462 1.816 1.143H6.57v-4c0-.434.323-.793.741-.85l.117-.007h3.9a2 2 0 0 1 1.833-1.143Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconTreeHorizontalTopRightFilledLarge.svg b/packages/components/src/common/svgs/IconTreeHorizontalTopRightFilledLarge.svg
old mode 100755
new mode 100644
index c313aa047..0933ae815
--- a/packages/components/src/common/svgs/IconTreeHorizontalTopRightFilledLarge.svg
+++ b/packages/components/src/common/svgs/IconTreeHorizontalTopRightFilledLarge.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2187 15.8359C17.998 15.8359 18.6089 16.4436 18.6089 17.2189C18.6089 18.0026 17.998 18.6164 17.2187 18.6164C16.444 18.6164 15.815 17.9897 15.815 17.2189C15.815 16.4436 16.4319 15.8359 17.2187 15.8359ZM4.79569 12.3993C4.0164 12.3993 3.40557 11.7855 3.40557 11.0027C3.40557 10.2266 4.0164 9.61883 4.79569 9.61883C5.58332 9.61883 6.20022 10.2266 6.20022 11.0027C6.20022 11.7727 5.56966 12.3993 4.79569 12.3993ZM17.2187 9.61883C17.998 9.61883 18.6089 10.2266 18.6089 11.0027C18.6089 11.7855 17.998 12.3993 17.2187 12.3993C16.444 12.3993 15.815 11.7727 15.815 11.0027C15.815 10.2266 16.4319 9.61883 17.2187 9.61883ZM14.52 11.77C14.8364 12.9825 15.994 13.92 17.2187 13.92C18.7181 13.92 20.04 12.5012 20.04 11.0027C20.04 9.50332 18.7181 8.08003 17.2187 8.08003C15.988 8.08003 14.8304 9.02927 14.52 10.25H11.79V5.60003H14.54C14.8746 6.77927 16.0221 7.60003 17.2187 7.60003C18.7181 7.60003 20.04 6.27968 20.04 4.78034C20.04 3.28176 18.7181 1.96002 17.2187 1.96002C15.9781 1.96002 14.7984 2.84644 14.51 4.08003H11.0216C10.8463 4.08003 10.5769 4.18726 10.4517 4.30956C10.3242 4.43338 10.2523 4.66182 10.25 4.8498V10.25H7.49C7.17965 9.02927 6.02646 8.08002 4.79569 8.08002C3.28948 8.08002 1.96001 9.50002 1.96001 11.0027C1.96001 12.4649 3.32742 13.92 4.79569 13.92C6.02115 13.92 7.17434 12.9825 7.49 11.77H10.25V17.1706C10.2561 17.5315 10.6604 17.92 11.0209 17.92H14.51C14.7999 19.1514 15.9804 20.04 17.2187 20.04C18.7181 20.04 20.04 18.7175 20.04 17.2189C20.04 15.7204 18.7181 14.4 17.2187 14.4C16.0221 14.4 14.8746 15.22 14.54 16.4H11.79V11.77H14.52Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M18.784 17.276c.85 0 1.517.663 1.517 1.508 0 .855-.667 1.525-1.517 1.525a1.529 1.529 0 0 1-1.531-1.525c0-.845.673-1.508 1.531-1.508Zm-13.552-3.75c-.85 0-1.517-.67-1.517-1.523 0-.847.667-1.51 1.517-1.51.859 0 1.532.663 1.532 1.51a1.53 1.53 0 0 1-1.532 1.524Zm13.552-3.033c.85 0 1.517.663 1.517 1.51 0 .854-.667 1.524-1.517 1.524a1.529 1.529 0 0 1-1.531-1.524c0-.847.673-1.51 1.531-1.51ZM15.84 12.84c.345 1.323 1.608 2.345 2.944 2.345 1.636 0 3.078-1.547 3.078-3.182 0-1.636-1.442-3.188-3.078-3.188-1.343 0-2.605 1.035-2.944 2.367h-2.978V6.109h3c.365 1.287 1.617 2.182 2.922 2.182 1.636 0 3.078-1.44 3.078-3.076 0-1.635-1.442-3.077-3.078-3.077-1.353 0-2.64.967-2.955 2.313h-3.805c-.192 0-.486.117-.622.25-.14.135-.218.385-.22.59v5.89H8.17c-.339-1.33-1.597-2.366-2.94-2.366-1.642 0-3.093 1.549-3.093 3.188 0 1.595 1.492 3.182 3.094 3.182 1.337 0 2.595-1.022 2.939-2.345h3.01v5.892c.008.393.449.817.842.817h3.806c.316 1.343 1.604 2.313 2.955 2.313 1.636 0 3.078-1.443 3.078-3.078 0-1.634-1.442-3.075-3.078-3.075-1.305 0-2.557.895-2.922 2.182h-3V12.84h2.978Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconTreeVerticalSmall.svg b/packages/components/src/common/svgs/IconTreeVerticalSmall.svg
index 2227c621b..36fd72360 100644
--- a/packages/components/src/common/svgs/IconTreeVerticalSmall.svg
+++ b/packages/components/src/common/svgs/IconTreeVerticalSmall.svg
@@ -1,6 +1,3 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M4.875,1 C5.9109375,1 6.75,1.8390625 6.75,2.875 C6.75,3.66045573 6.26734818,4.33295039 5.58082446,4.61178146 L5.5875,4.62246094 L5.587,7.768 L5.74291977,7.71198179 C6.08350356,7.59933512 6.4754264,7.53653161 7.08859666,7.47507481 L7.08859666,7.47507481 L7.73964901,7.41079089 C8.62155633,7.31269905 8.99127205,7.19386958 9.22325702,6.9046437 C9.35811599,6.73805321 9.43468269,6.47950949 9.4477603,6.1285935 L9.4477603,6.1285935 C8.7486319,5.85455531 8.25,5.17325917 8.25,4.375 C8.25,3.3390625 9.0890625,2.5 10.125,2.5 C11.1609375,2.5 12,3.3390625 12,4.375 C12,5.2 11.465625,5.90078125 10.725,6.15390625 L10.866,6.099 L10.8749763,6.11575455 C10.8640501,6.72980454 10.7229935,7.23802492 10.4458665,7.64902024 L10.335554,7.79860286 C9.75378717,8.52065392 9.04708105,8.72457695 7.4623846,8.87102987 L7.4623846,8.87102987 L6.87874121,8.93162291 C6.42777607,8.98684306 6.18124909,9.0470448 5.96705345,9.15546479 C5.8336696,9.22309604 5.74111349,9.30809655 5.68902744,9.3920571 L5.68902744,9.3920571 L5.66506266,9.42517628 C6.30672365,9.72211779 6.75,10.3723312 6.75,11.125 C6.75,12.1609375 5.9109375,13 4.875,13 C3.8390625,13 3,12.1609375 3,11.125 C3,10.2859375 3.55078125,9.57578125 4.3125,9.334375 L4.199,9.375 L4.1625,9.29355469 L4.1625,4.62246094 L4.16713898,4.61095291 C3.48169749,4.33161993 3,3.65967882 3,2.875 C3,1.8390625 3.8390625,1 4.875,1 Z"
-        id="Shape"></path>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M5.571 1.143a2.142 2.142 0 0 1 .807 4.128l.008.012v3.595l.177-.064c.39-.129.838-.2 1.538-.271l.744-.073c1.008-.113 1.43-.248 1.696-.579.154-.19.242-.486.256-.887A2.155 2.155 0 0 1 9.43 5a2.142 2.142 0 1 1 4.285 0 2.15 2.15 0 0 1-1.457 2.033l.161-.063.01.02c-.012.701-.173 1.282-.49 1.752l-.126.17c-.665.826-1.473 1.059-3.284 1.226l-.667.07c-.515.063-.797.131-1.041.255a.786.786 0 0 0-.318.27l-.028.039a2.142 2.142 0 1 1-3.046 1.943c0-.96.63-1.771 1.5-2.047l-.13.046-.04-.093V5.283l.004-.013a2.141 2.141 0 0 1 .81-4.127Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconTriangleDownSmall.svg b/packages/components/src/common/svgs/IconTriangleDownSmall.svg
old mode 100755
new mode 100644
index 1093da341..f56ecbd3c
--- a/packages/components/src/common/svgs/IconTriangleDownSmall.svg
+++ b/packages/components/src/common/svgs/IconTriangleDownSmall.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M3.08995 4.20001L10.9101 4.20001C11.5337 4.20001 11.846 4.95401 11.405 5.39499L7.49498 9.30504C7.22161 9.5784 6.7784 9.5784 6.50503 9.30504L2.59498 5.39499C2.15401 4.95401 2.46632 4.20001 3.08995 4.20001Z"/>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.29 4.8h9.42a.7.7 0 0 1 .495 1.195l-4.71 4.71a.7.7 0 0 1-.99 0l-4.71-4.71A.7.7 0 0 1 3.29 4.8Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconTriangleLeftSmall.svg b/packages/components/src/common/svgs/IconTriangleLeftSmall.svg
old mode 100755
new mode 100644
index 31e9969ad..c84239909
--- a/packages/components/src/common/svgs/IconTriangleLeftSmall.svg
+++ b/packages/components/src/common/svgs/IconTriangleLeftSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M9.80002 3.08998L9.80002 10.9101C9.80002 11.5337 9.04602 11.846 8.60504 11.4051L4.69499 7.49501C4.42163 7.22164 4.42163 6.77843 4.69499 6.50506L8.60504 2.59501C9.04602 2.15404 9.80002 2.46635 9.80002 3.08998Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.2 3.29v9.42a.7.7 0 0 1-1.195.495l-4.71-4.71a.7.7 0 0 1 0-.99l4.71-4.71a.7.7 0 0 1 1.195.495Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconTriangleRightSmall.svg b/packages/components/src/common/svgs/IconTriangleRightSmall.svg
old mode 100755
new mode 100644
index 33e1935f5..dea2beeb2
--- a/packages/components/src/common/svgs/IconTriangleRightSmall.svg
+++ b/packages/components/src/common/svgs/IconTriangleRightSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M4.20001 10.9101V3.08997C4.20001 2.46634 4.95401 2.15402 5.39499 2.595L9.30504 6.50505C9.5784 6.77842 9.5784 7.22163 9.30504 7.495L5.39499 11.405C4.95401 11.846 4.20001 11.5337 4.20001 10.9101Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.8 12.71V3.29a.7.7 0 0 1 1.195-.495l4.71 4.71a.7.7 0 0 1 0 .99l-4.71 4.71A.7.7 0 0 1 4.8 12.71Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconTriangleUpSmall.svg b/packages/components/src/common/svgs/IconTriangleUpSmall.svg
old mode 100755
new mode 100644
index c7a517aad..7a8016083
--- a/packages/components/src/common/svgs/IconTriangleUpSmall.svg
+++ b/packages/components/src/common/svgs/IconTriangleUpSmall.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10.9101 9.79993L3.08996 9.79993C2.46633 9.79993 2.15401 9.04593 2.59498 8.60495L6.50503 4.6949C6.7784 4.42153 7.22162 4.42153 7.49498 4.6949L11.405 8.60495C11.846 9.04593 11.5337 9.79993 10.9101 9.79993Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.71 11.2H3.29a.7.7 0 0 1-.495-1.195l4.71-4.71a.7.7 0 0 1 .99 0l4.71 4.71a.7.7 0 0 1-.495 1.195Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconUpdateLarge.svg b/packages/components/src/common/svgs/IconUpdateLarge.svg
new file mode 100644
index 000000000..d6adc6b50
--- /dev/null
+++ b/packages/components/src/common/svgs/IconUpdateLarge.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M18.772 7.79a.873.873 0 0 1 1.21.239c.233.347.443.71.63 1.087a.873.873 0 1 1-1.565.773A7.874 7.874 0 0 0 18.532 9a.873.873 0 0 1 .24-1.21Zm1.88 4.131a.873.873 0 0 1 .928.815 9.672 9.672 0 0 1 0 1.255.873.873 0 0 1-1.742-.112 7.982 7.982 0 0 0 0-1.03.873.873 0 0 1 .815-.928Zm-.436 4.52c.432.215.61.738.396 1.17a9.59 9.59 0 0 1-.63 1.087.873.873 0 0 1-1.45-.97c.19-.285.362-.582.515-.89a.873.873 0 0 1 1.169-.396Zm-16.431 0a.873.873 0 0 1 1.169.397c.152.308.324.605.514.89a.873.873 0 0 1-1.45.97 9.598 9.598 0 0 1-.63-1.087.873.873 0 0 1 .397-1.17Zm13.79 3.694c.268.4.16.943-.24 1.211-.347.232-.71.443-1.087.629a.873.873 0 0 1-.774-1.565c.309-.152.606-.324.89-.514a.873.873 0 0 1 1.21.24Zm-11.149 0a.873.873 0 0 1 1.21-.24c.285.19.582.363.89.515a.873.873 0 1 1-.773 1.565 9.598 9.598 0 0 1-1.087-.629.873.873 0 0 1-.24-1.21Zm4.132 1.881a.873.873 0 0 1 .927-.814 7.981 7.981 0 0 0 1.03 0 .873.873 0 1 1 .113 1.741 9.741 9.741 0 0 1-1.255 0 .873.873 0 0 1-.815-.927Zm5.332-10.36c.34.34.34.893 0 1.234l-3.273 3.273a.873.873 0 0 1-1.234 0L9.201 13.98a.873.873 0 0 1 1.234-1.234L12 14.31l2.656-2.655a.873.873 0 0 1 1.234 0Zm1.091-6.402a.873.873 0 0 0 0-1.235l-2.717-2.716a.873.873 0 1 0-1.234 1.234l1.227 1.227H12a9.6 9.6 0 0 0-9.6 9.6.873.873 0 0 0 1.746 0A7.855 7.855 0 0 1 12 5.509h2.257L13.03 6.736a.873.873 0 0 0 1.235 1.234l2.716-2.716Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconUpdatedLarge.svg b/packages/components/src/common/svgs/IconUpdatedLarge.svg
deleted file mode 100644
index 94f1afa4c..000000000
--- a/packages/components/src/common/svgs/IconUpdatedLarge.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M17.2077 7.14019C17.5748 6.89439 18.0717 6.99277 18.3175 7.35991C18.5304 7.67795 18.7232 8.01074 18.894 8.35644C19.0897 8.75256 18.9273 9.23233 18.5312 9.42805C18.1351 9.62376 17.6553 9.4613 17.4596 9.06519C17.3199 8.78256 17.1622 8.51034 16.988 8.25002C16.7422 7.88288 16.8405 7.38599 17.2077 7.14019ZM18.9317 10.9278C19.3727 10.8993 19.7532 11.2337 19.7817 11.6746C19.794 11.8649 19.8002 12.0567 19.8002 12.2499C19.8002 12.4431 19.794 12.6349 19.7817 12.8252C19.7532 13.2661 19.3727 13.6004 18.9317 13.572C18.4908 13.5435 18.1565 13.1629 18.185 12.722C18.1951 12.5661 18.2002 12.4086 18.2002 12.2499C18.2002 12.0912 18.1951 11.9337 18.185 11.7778C18.1565 11.3368 18.4908 10.9563 18.9317 10.9278ZM18.5312 15.0717C18.9273 15.2675 19.0897 15.7472 18.894 16.1433C18.7232 16.489 18.5304 16.8218 18.3175 17.1399C18.0717 17.507 17.5748 17.6054 17.2077 17.3596C16.8405 17.1138 16.7422 16.6169 16.988 16.2498C17.1622 15.9894 17.3199 15.7172 17.4596 15.4346C17.6553 15.0385 18.1351 14.876 18.5312 15.0717ZM3.46924 15.0717C3.86536 14.876 4.34513 15.0385 4.54085 15.4346C4.68049 15.7172 4.83818 15.9894 5.01246 16.2498C5.25826 16.6169 5.15988 17.1138 4.79274 17.3596C4.42559 17.6054 3.92871 17.507 3.68291 17.1399C3.46999 16.8218 3.27719 16.489 3.10638 16.1433C2.91067 15.7472 3.07313 15.2675 3.46924 15.0717ZM16.1099 18.4574C16.3557 18.8245 16.2573 19.3214 15.8902 19.5672C15.5721 19.7801 15.2394 19.9729 14.8937 20.1437C14.4975 20.3394 14.0178 20.177 13.8221 19.7809C13.6263 19.3847 13.7888 18.905 14.1849 18.7093C14.4675 18.5696 14.7398 18.4119 15.0001 18.2376C15.3672 17.9918 15.8641 18.0902 16.1099 18.4574ZM5.89051 18.4574C6.13631 18.0902 6.63319 17.9918 7.00034 18.2376C7.26065 18.4119 7.53288 18.5696 7.8155 18.7093C8.21162 18.905 8.37408 19.3847 8.17836 19.7809C7.98265 20.177 7.50287 20.3394 7.10676 20.1437C6.76105 19.9729 6.42827 19.7801 6.11023 19.5672C5.74308 19.3214 5.64471 18.8245 5.89051 18.4574ZM9.67815 20.1814C9.70664 19.7405 10.0872 19.4062 10.5281 19.4347C10.684 19.4448 10.8415 19.4499 11.0002 19.4499C11.1589 19.4499 11.3164 19.4448 11.4723 19.4347C11.9133 19.4062 12.2938 19.7405 12.3223 20.1814C12.3508 20.6223 12.0164 21.0029 11.5755 21.0314C11.3852 21.0437 11.1934 21.0499 11.0002 21.0499C10.807 21.0499 10.6152 21.0437 10.4249 21.0314C9.98398 21.0029 9.64966 20.6223 9.67815 20.1814Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M14.5659 10.6845C14.8783 10.9969 14.8783 11.5035 14.5659 11.8159L11.5659 14.8159C11.2535 15.1283 10.7469 15.1283 10.4345 14.8159L8.43451 12.8159C8.12209 12.5035 8.12209 11.9969 8.43451 11.6845C8.74693 11.3721 9.25346 11.3721 9.56588 11.6845L11.0002 13.1188L13.4345 10.6845C13.7469 10.3721 14.2535 10.3721 14.5659 10.6845Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M15.566 4.81582C15.8784 4.5034 15.8784 3.99687 15.566 3.68445L13.0758 1.19428C12.7634 0.881856 12.2569 0.881856 11.9444 1.19428C11.632 1.50669 11.632 2.01323 11.9444 2.32565L13.069 3.4502H11.0002C6.14009 3.4502 2.2002 7.39009 2.2002 12.2502C2.2002 12.692 2.55837 13.0502 3.0002 13.0502C3.44202 13.0502 3.8002 12.692 3.8002 12.2502C3.8002 8.27375 7.02375 5.0502 11.0002 5.0502H13.0689L11.9444 6.17463C11.632 6.48705 11.632 6.99358 11.9444 7.306C12.2569 7.61842 12.7634 7.61842 13.0758 7.306L15.566 4.81582Z" />
-</svg>
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconUploadLarge.svg b/packages/components/src/common/svgs/IconUploadLarge.svg
old mode 100755
new mode 100644
index 71a78b708..86966f78b
--- a/packages/components/src/common/svgs/IconUploadLarge.svg
+++ b/packages/components/src/common/svgs/IconUploadLarge.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.77778 3.4375C7.08139 3.4375 4.82087 5.38817 4.27778 7.98031C1.87223 8.29015 0 10.3642 0 12.8965C0 15.6416 2.19313 17.8749 4.88889 17.8749H5.62222C5.88669 17.8787 6.13268 17.7372 6.26601 17.5046C6.39933 17.272 6.39933 16.9843 6.26601 16.7517C6.13268 16.5191 5.88669 16.3776 5.62222 16.3814H4.88889C2.98029 16.3814 1.46667 14.8401 1.46667 12.8965C1.46667 10.953 2.98029 9.41161 4.88889 9.41161C5.26849 9.41327 5.5866 9.1197 5.62222 8.73485C5.83169 6.60115 7.61642 4.93103 9.77778 4.93103C10.9566 4.93103 11.9037 5.38526 12.6729 6.19119C12.8766 6.40543 13.1859 6.47576 13.4597 6.3701C13.7736 6.24875 14.2586 6.17563 14.6667 6.17563C16.3017 6.17563 17.6619 7.40528 17.8521 8.99933C17.8838 9.27862 18.0668 9.51612 18.3257 9.61386C19.6269 10.1003 20.5333 11.3731 20.5333 12.8965C20.5333 14.8401 19.0197 16.3814 17.1111 16.3814H16.3778C16.1133 16.3776 15.8673 16.5191 15.734 16.7517C15.6007 16.9843 15.6007 17.272 15.734 17.5046C15.8673 17.7372 16.1133 17.8787 16.3778 17.8749H17.1111C19.8069 17.8749 22 15.6416 22 12.8965C22 10.9234 20.8695 9.22733 19.2194 8.4237C18.7725 6.27663 16.8923 4.68211 14.6667 4.68211C14.2443 4.68211 13.8084 4.75019 13.3833 4.86102C12.4147 3.9904 11.1864 3.4375 9.77778 3.4375ZM11.0048 15.3818C11.2007 15.3797 11.3876 15.298 11.5239 15.1548C11.6602 15.0116 11.7346 14.8188 11.7305 14.6194V10.6367L12.1583 11.1345C12.3201 11.3285 12.5676 11.4252 12.8153 11.3912C13.0859 11.3542 13.3139 11.167 13.407 10.9056C13.5 10.6442 13.4428 10.3517 13.2583 10.1466L11.5472 8.15527C11.408 7.99455 11.2077 7.90248 10.9972 7.90248C10.7867 7.90248 10.5864 7.99455 10.4472 8.15527L8.73609 10.1466C8.55866 10.3461 8.50039 10.6274 8.58355 10.8829C8.66671 11.1384 8.87844 11.3286 9.13777 11.3807C9.39709 11.4328 9.66387 11.3387 9.83609 11.1345L10.2639 10.6367V14.6194C10.2597 14.8215 10.3362 15.0167 10.4759 15.1603C10.6155 15.304 10.8064 15.3839 11.0048 15.3818ZM8.05903 14.8723C7.8632 14.8744 7.67631 14.9561 7.53999 15.0993C7.40368 15.2425 7.32927 15.4352 7.33334 15.6346V17.1282C7.33338 17.5406 7.66168 17.8749 8.06667 17.8749H13.9333C14.3383 17.8749 14.6666 17.5406 14.6667 17.1282V15.6346C14.6704 15.3653 14.5315 15.1148 14.303 14.9791C14.0746 14.8433 13.7921 14.8433 13.5636 14.9791C13.3352 15.1148 13.1963 15.3653 13.2 15.6346V16.3814H8.8V15.6346C8.80413 15.4325 8.72764 15.2374 8.58801 15.0937C8.44837 14.9501 8.25752 14.8702 8.05903 14.8723Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M10.667 3.75c-2.942 0-5.408 2.128-6 4.956C2.042 9.044 0 11.306 0 14.069c0 2.995 2.393 5.43 5.333 5.43h.8a.797.797 0 0 0 .703-.403.828.828 0 0 0 0-.821.797.797 0 0 0-.703-.404h-.8c-2.082 0-3.733-1.682-3.733-3.802s1.651-3.802 3.733-3.802a.806.806 0 0 0 .8-.738c.229-2.328 2.176-4.15 4.534-4.15 1.286 0 2.319.496 3.158 1.375a.79.79 0 0 0 .858.195c.343-.132.872-.212 1.317-.212a3.503 3.503 0 0 1 3.475 3.08.812.812 0 0 0 .517.67c1.42.531 2.408 1.92 2.408 3.582 0 2.12-1.651 3.802-3.733 3.802h-.8a.797.797 0 0 0-.703.404.827.827 0 0 0 0 .821.797.797 0 0 0 .703.404h.8c2.94 0 5.333-2.436 5.333-5.431a5.408 5.408 0 0 0-3.033-4.88c-.488-2.342-2.54-4.081-4.967-4.081-.46 0-.936.074-1.4.195-1.057-.95-2.397-1.553-3.933-1.553Zm1.338 13.03a.793.793 0 0 0 .566-.248.823.823 0 0 0 .226-.584v-4.344l.467.543a.793.793 0 0 0 1.362-.25.826.826 0 0 0-.162-.828l-1.867-2.172a.794.794 0 0 0-1.2 0L9.53 11.069a.826.826 0 0 0-.166.803.792.792 0 0 0 1.366.275l.467-.543v4.345a.823.823 0 0 0 .231.59c.152.156.36.243.577.241Zm-3.213-.556a.793.793 0 0 0-.567.248.823.823 0 0 0-.225.584v1.63c0 .45.358.814.8.814h6.4c.442 0 .8-.365.8-.815v-1.629a.818.818 0 0 0-.397-.715.788.788 0 0 0-.806 0 .818.818 0 0 0-.397.715v.815H9.6v-.815a.823.823 0 0 0-.231-.59.793.793 0 0 0-.577-.242Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconUploadSmall.svg b/packages/components/src/common/svgs/IconUploadSmall.svg
index 8f24bd4bd..e3ec0a1d8 100644
--- a/packages/components/src/common/svgs/IconUploadSmall.svg
+++ b/packages/components/src/common/svgs/IconUploadSmall.svg
@@ -1,4 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.00509 10.4791C6.77126 10.4815 6.54622 10.3873 6.38119 10.2175C6.21545 10.047 6.12446 9.81482 6.12937 9.5742L6.12942 4.23741L5.1555 5.37084C4.95072 5.61363 4.63628 5.72446 4.33084 5.6631C4.0248 5.60162 3.77422 5.37658 3.6755 5.0733C3.62464 4.91704 3.61821 4.75267 3.65256 4.59762C3.68508 4.45083 3.75414 4.3124 3.85664 4.19714L6.34778 1.29803C6.51188 1.10859 6.74815 1 6.99608 1C7.24401 1 7.48028 1.10859 7.64491 1.29864L10.1333 4.19457C10.3554 4.44158 10.4236 4.78984 10.3128 5.10109C10.2024 5.41133 9.93267 5.63268 9.61338 5.67641C9.32168 5.71644 9.02981 5.60239 8.83857 5.37308L7.86275 4.23741L7.86275 9.57012C7.86764 9.81161 7.77912 10.0409 7.6173 10.2109C7.48304 10.3519 7.3076 10.4424 7.11933 10.4701L7.00509 10.4791Z" />
-<path d="M10.96 9.84674C10.96 9.36123 11.3255 8.96107 11.7963 8.90638L11.9067 8.90001C12.4296 8.90001 12.8535 9.32388 12.8535 9.84674L12.8515 12.0195L12.8436 12.1755C12.7889 12.6463 12.3888 13.0118 11.9033 13.0118H2.09673C1.57387 13.0118 1.15 12.5879 1.15019 12.0589L1.15 12V9.84674C1.15 9.32388 1.57387 8.90001 2.09673 8.90001C2.61959 8.90001 3.04346 9.32388 3.04346 9.84678L3.042 11.118H10.959L10.96 9.84674Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.006 11.976a.98.98 0 0 1-.713-.299 1.025 1.025 0 0 1-.288-.735v-6.1L5.892 6.139a.979.979 0 0 1-.942.334.998.998 0 0 1-.75-.674 1.034 1.034 0 0 1 .208-1.001l2.847-3.314a.98.98 0 0 1 .74-.34c.284 0 .554.124.742.341l2.844 3.31c.254.282.332.68.205 1.036a.98.98 0 0 1-1.685.31L8.986 4.844v6.094c.006.276-.096.538-.28.733a.983.983 0 0 1-.57.296l-.13.01Z"/>
+  <path d="M12.526 11.253c0-.554.417-1.012.956-1.074l.126-.008c.597 0 1.082.485 1.082 1.082l-.002 2.484-.01.178c-.062.538-.52.956-1.074.956H2.396a1.083 1.083 0 0 1-1.081-1.09v-2.527a1.082 1.082 0 1 1 2.163 0l-.001 1.452h9.048v-1.453Z"/>
 </svg>
diff --git a/packages/components/src/common/svgs/IconVirusCircleSLarge.svg b/packages/components/src/common/svgs/IconVirusCircleSLarge.svg
index 071cc764c..ecf66a97d 100644
--- a/packages/components/src/common/svgs/IconVirusCircleSLarge.svg
+++ b/packages/components/src/common/svgs/IconVirusCircleSLarge.svg
@@ -1,12 +1,6 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M18.9024 9.61312C18.9024 9.26334 19.1842 8.87734 19.6411 8.87734C20.098 8.87734 20.3608 9.26334 20.3608 9.61312L20.3608 12.1465C20.3608 12.4032 20.2232 12.6376 20.0318 12.7626C19.7191 12.485 19.2761 12.177 18.9024 11.9813L18.9024 11.6102L17.9431 11.6102C17.5179 11.4968 17.0711 11.4363 16.6101 11.4363C16.5553 11.4363 16.3995 11.4346 16.3451 11.4363C16.3575 11.2832 16.3638 11.032 16.3638 10.8772C16.3638 7.72921 13.824 5.27429 10.7662 5.27429C7.70834 5.27429 5.16071 7.82001 5.16071 10.8798C5.16071 13.9396 7.61816 16.4852 10.7662 16.4852C10.9977 16.4852 11.3199 16.4622 11.5474 16.4345C11.5479 16.4969 11.5485 16.5589 11.5485 16.6213C11.5485 16.9998 11.6106 17.548 11.6881 17.9033C11.6298 17.9103 11.5513 17.9244 11.4928 17.93L11.4928 19.0165L12.0982 19.0165C12.2612 19.3276 12.5066 19.7078 12.7271 19.9775C12.6021 20.2939 12.317 20.5009 12.0406 20.4776L9.50731 20.4776C9.15753 20.4776 8.76619 20.1962 8.76619 19.7431C8.76619 19.29 9.14847 19.0165 9.49824 19.0165L10.0357 19.0165L10.0357 17.93C8.63497 17.788 7.42028 17.2743 6.34591 16.3643L5.53005 17.1476L5.90973 17.5273C6.15529 17.7743 6.23009 18.229 5.90942 18.5516C5.58874 18.8742 5.12015 18.7968 4.87312 18.5513L3.09346 16.7716C2.78422 16.543 2.67737 16.0198 3.02751 15.6697C3.37765 15.3196 3.88906 15.4478 4.1174 15.7476L4.49294 16.1232L5.28347 15.3019C4.38495 14.2236 3.87959 13.0081 3.74665 11.6108L2.62564 11.6108L2.62564 12.1465C2.62564 12.4962 2.36172 12.8775 1.89826 12.8775C1.43479 12.8775 1.1692 12.4962 1.1692 12.1465L1.1692 9.61312C1.1692 9.26334 1.44939 8.87832 1.89826 8.87832C2.34713 8.87832 2.62564 9.26334 2.62564 9.61312L2.62564 10.1497L3.74665 10.1497C3.87959 8.75244 4.3892 7.53155 5.28771 6.4533L4.50628 5.63878L4.12525 6.0198C3.87823 6.26536 3.418 6.34036 3.09751 6.01988C2.77703 5.69939 2.85023 5.22469 3.09579 4.97767L4.87545 3.198C5.10403 2.88876 5.6386 2.80467 5.97566 3.14173C6.31272 3.47878 6.20477 3.99913 5.90492 4.22747L5.5247 4.60769L6.34413 5.39688C7.42238 4.49836 8.63848 3.99317 10.0357 3.86023L10.0357 2.74304L9.49824 2.74304C9.14846 2.74304 8.7701 2.45902 8.7701 2.01314C8.7701 1.56726 9.14846 1.2821 9.49824 1.2821L12.0316 1.2821C12.3814 1.2821 12.7623 1.56726 12.7623 2.01314C12.7623 2.45902 12.3814 2.74304 12.0316 2.74304L11.4928 2.74304L11.4928 3.86023C12.89 3.99317 14.1102 4.50389 15.1885 5.4024L16.0038 4.62186L15.6235 4.24153C15.3439 4.00207 15.2638 3.48969 15.5893 3.16419C15.9148 2.8387 16.4194 2.93646 16.6543 3.21076L18.4466 4.99042C18.6922 5.23744 18.7664 5.70291 18.4481 6.02304C18.1299 6.34317 17.6629 6.26676 17.4158 6.0212L17.0379 5.64327L16.2795 6.4618C17.1781 7.54005 17.684 8.75596 17.817 10.1532L18.9024 10.1532L18.9024 9.61312Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M20.8326 16.4891C20.8326 18.7674 18.9863 20.7235 16.6177 20.7235C14.2491 20.7235 12.3912 18.8198 12.3912 16.4852C12.3912 14.1506 14.2733 12.2782 16.6101 12.2782C18.9469 12.2782 20.8326 14.2109 20.8326 16.4891ZM17.7193 18.5829C17.9876 18.3401 18.1099 18.0321 18.1099 17.6532C18.1099 17.2743 18.0435 17.1688 17.8898 16.9122C17.7197 16.6906 17.4053 16.4702 16.9465 16.2509C16.5996 16.0852 16.3792 15.9711 16.2852 15.9084C16.1934 15.8435 16.1263 15.7775 16.0838 15.7104C16.0412 15.641 15.981 15.4715 15.981 15.3798C15.981 15.2321 16.0763 15.0242 16.2239 14.9303C16.3291 14.8386 16.5084 14.7978 16.7053 14.7978C16.8709 14.7978 17.0388 14.819 17.2089 14.8615C17.3812 14.9041 17.5351 14.9581 17.797 15.0655L18.056 14.4279C17.8031 14.3183 17.6423 14.2657 17.4095 14.2053C17.1768 14.1448 16.9304 14.1212 16.6753 14.1212C16.1509 14.1464 15.7912 14.2849 15.4958 14.5333C15.2342 14.8323 15.1668 15.0864 15.1668 15.4647C15.1668 15.6952 15.1898 15.799 15.2793 15.9713C15.3688 16.1437 15.4885 16.2947 15.6385 16.4245C15.7884 16.5543 16.0096 16.6864 16.3132 16.8307C16.6332 16.9829 16.8311 17.0854 16.9341 17.1548C17.0393 17.2242 17.2051 17.3528 17.2259 17.4392C17.2796 17.5131 17.2818 17.6156 17.2818 17.7118C17.2818 17.9188 17.1646 18.1259 17.0036 18.1907C16.8827 18.278 16.7081 18.3217 16.4799 18.3217C16.2896 18.3217 16.0793 18.2914 15.8488 18.231C15.6205 18.1706 15.4333 18.1095 15.1021 17.9618L15.1021 18.7079C15.5049 18.9048 15.8756 18.976 16.3993 18.976C16.9677 18.976 17.451 18.8256 17.7193 18.5829Z" />
-    <path
-        d="M11.7232 15.1962C11.9011 14.5516 12.2144 13.9084 12.6099 13.3915C12.5318 12.7665 11.8795 12.0634 11.003 12.0634C10.1266 12.0634 9.35993 12.7626 9.35993 13.7157C9.35993 14.6688 10.1482 15.3563 11.003 15.3563C11.2298 15.3563 11.5291 15.2838 11.7232 15.1962Z" />
-    <path
-        d="M8.92243 10.8798C8.92243 10.2313 8.4029 9.67664 7.71858 9.67664C7.03426 9.67664 6.51618 10.1962 6.51618 10.8798C6.51618 11.5634 7.05134 12.0829 7.73884 12.0829C8.42634 12.0829 8.92243 11.5283 8.92243 10.8798Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M12.4433 10.9969C11.254 11.0632 10.2174 10.122 10.2193 8.88488C10.2212 7.6478 11.2427 6.73523 12.4433 6.7782C13.6438 6.82117 14.442 7.81445 14.442 8.88488C14.442 9.95532 13.6326 10.9307 12.4433 10.9969ZM12.4433 8.03589C11.972 8.03589 11.5621 8.39147 11.5591 8.88488C11.5562 9.37829 11.9967 9.76092 12.4433 9.75391C12.8899 9.74691 13.2779 9.35485 13.2779 8.88488C13.2779 8.41492 12.9146 8.03589 12.4433 8.03589Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20.62 10.487c0-.382.308-.803.807-.803.498 0 .785.421.785.803v2.764c0 .28-.15.536-.36.672a6.742 6.742 0 0 0-1.231-.852v-.405h-1.047a5.633 5.633 0 0 0-1.454-.19c-.06 0-.23-.002-.289 0 .014-.167.02-.441.02-.61a6.095 6.095 0 0 0-6.106-6.112c-3.336 0-6.115 2.777-6.115 6.115a6.104 6.104 0 0 0 6.115 6.115c.253 0 .604-.025.852-.055l.001.203c0 .413.068 1.011.153 1.399-.064.008-.15.023-.213.029v1.185h.66c.178.34.445.755.686 1.049-.136.345-.447.57-.749.545h-2.763c-.382 0-.809-.307-.809-.801 0-.494.417-.793.799-.793h.586V19.56a7.172 7.172 0 0 1-4.025-1.708l-.89.854.414.415c.268.27.35.765 0 1.117s-.861.268-1.13 0l-1.942-1.942a.8.8 0 0 1-.072-1.202c.382-.382.94-.242 1.189.085l.41.41.862-.896a7.179 7.179 0 0 1-1.677-4.027H2.864v.585c0 .381-.288.797-.793.797a.79.79 0 0 1-.796-.797v-2.764c0-.382.306-.802.796-.802.49 0 .793.42.793.802v.585h1.223A7.202 7.202 0 0 1 5.768 7.04l-.852-.889-.416.416a.793.793 0 0 1-1.12 0c-.35-.35-.27-.867-.003-1.137L5.32 3.49c.249-.338.832-.43 1.2-.062s.25.936-.077 1.185l-.415.415.894.86a7.18 7.18 0 0 1 4.027-1.676v-1.22h-.586a.801.801 0 0 1-.795-.796c0-.486.413-.797.795-.797h2.763c.382 0 .797.31.797.797 0 .487-.415.796-.797.796h-.588v1.22a7.2 7.2 0 0 1 4.032 1.682l.89-.852-.415-.415c-.305-.261-.393-.82-.038-1.175.356-.355.906-.249 1.162.05l1.956 1.942c.267.27.348.777.001 1.127-.347.349-.856.265-1.126-.002l-.412-.413-.828.893a7.181 7.181 0 0 1 1.678 4.027h1.184v-.589Z"/>
+  <path fill-rule="evenodd" d="M22.726 17.988c0 2.486-2.014 4.62-4.598 4.62a4.598 4.598 0 0 1-4.61-4.624 4.584 4.584 0 0 1 4.602-4.59c2.55 0 4.606 2.109 4.606 4.594Zm-3.396 2.284c.293-.264.426-.6.426-1.014 0-.413-.072-.528-.24-.808-.185-.242-.528-.482-1.029-.722a7.49 7.49 0 0 1-.721-.373.804.804 0 0 1-.22-.216.932.932 0 0 1-.112-.361.64.64 0 0 1 .265-.49c.114-.1.31-.145.525-.145.18 0 .364.023.55.07.187.046.355.105.64.222l.283-.695a4.251 4.251 0 0 0-.705-.243 3.187 3.187 0 0 0-.8-.092c-.573.027-.965.179-1.288.45-.285.326-.358.603-.358 1.016 0 .251.025.364.122.552.098.188.229.353.392.495.164.141.405.285.736.443.35.166.565.278.678.353.114.076.295.216.318.31.058.081.06.193.06.298 0 .226-.127.452-.303.523-.131.095-.322.142-.571.142-.208 0-.437-.033-.688-.099a4.794 4.794 0 0 1-.815-.293v.814c.44.215.844.292 1.415.292.62 0 1.147-.164 1.44-.429Z"/>
+  <path d="M12.789 16.578a5.895 5.895 0 0 1 .967-1.97c-.085-.68-.797-1.448-1.753-1.448a1.79 1.79 0 0 0-1.792 1.803c0 1.04.86 1.79 1.792 1.79.248 0 .574-.08.786-.175Zm-3.055-4.709a1.31 1.31 0 0 0-1.314-1.313c-.746 0-1.311.567-1.311 1.313s.583 1.312 1.333 1.312 1.292-.605 1.292-1.312Z"/>
+  <path fill-rule="evenodd" d="M13.575 11.997a2.299 2.299 0 0 1-2.427-2.304c.002-1.35 1.117-2.345 2.427-2.299 1.31.047 2.18 1.13 2.18 2.299a2.296 2.296 0 0 1-2.18 2.304Zm0-3.23c-.515 0-.962.387-.965.926-.003.538.477.955.965.948.487-.008.91-.436.91-.948a.91.91 0 0 0-.91-.927Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconVirusLarge.svg b/packages/components/src/common/svgs/IconVirusLarge.svg
index 3ec9e0cec..6cb52fed6 100644
--- a/packages/components/src/common/svgs/IconVirusLarge.svg
+++ b/packages/components/src/common/svgs/IconVirusLarge.svg
@@ -1,10 +1,5 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M19.1344 9.73333C19.1344 9.38355 19.4068 9 19.8643 9C20.3219 9 20.5914 9.38355 20.5914 9.73333L20.5914 12.2667C20.5914 12.6164 20.3258 12.9961 19.8643 12.9961C19.4029 12.9961 19.1344 12.6164 19.1344 12.2667L19.1344 11.7305L18.0484 11.7305C17.9065 13.1312 17.4071 14.3654 16.4972 15.4398L17.2587 16.2377L17.6369 15.8596C17.8882 15.6444 18.2873 15.541 18.6356 15.8894C18.9839 16.2377 18.8786 16.6348 18.6634 16.8861L17.7577 17.8171L16.8647 18.7101C16.6177 18.9556 16.168 19.0417 15.8256 18.6994C15.4832 18.357 15.5927 17.9306 15.8382 17.6836L16.2059 17.2905L15.4262 16.5108C14.348 17.4093 13.1256 17.9178 11.7284 18.0508L11.7284 19.1373L12.2643 19.1373C12.6141 19.1373 12.9992 19.3997 12.9992 19.8667C12.9992 20.3336 12.6141 20.594 12.2643 20.594L9.73099 20.594C9.38121 20.594 9.00601 20.3278 9.00601 19.8667C9.00601 19.4055 9.38121 19.1373 9.73099 19.1373L10.2672 19.1373L10.2672 18.0508C8.86647 17.9088 7.6388 17.3873 6.56442 16.4773L5.75594 17.2582L6.13755 17.6398C6.38311 17.8868 6.46222 18.3418 6.13629 18.6677C5.81037 18.9936 5.35073 18.9065 5.10371 18.661L4.20437 17.7743L3.32404 16.8813C3.01519 16.653 2.91063 16.1436 3.2775 15.7812C3.64437 15.4189 4.11659 15.5599 4.34522 15.8601L4.73396 16.2362L5.50929 15.4222C4.61077 14.3439 4.11107 13.1355 3.97813 11.7383L2.86094 11.7383L2.86094 12.2667C2.86094 12.6164 2.63152 12.9961 2.13099 12.9961C1.63047 12.9961 1.4 12.5862 1.4 12.2365L1.4 9.70312C1.4 9.35334 1.67839 9.00391 2.13099 9.00391C2.5836 9.00391 2.86094 9.38355 2.86094 9.73333L2.86094 10.2695L3.97813 10.2695C4.11107 8.87229 4.61845 7.6527 5.51697 6.57444L4.73321 5.76239L4.35046 6.14514C4.10344 6.39069 3.64314 6.454 3.3298 6.13878C3.01645 5.82356 3.08346 5.35804 3.32902 5.11102L4.21568 4.21169L5.10868 3.33135C5.33697 3.02251 5.86611 2.91698 6.20885 3.25972C6.55159 3.60246 6.43037 4.12416 6.13013 4.3528L5.75778 4.72514L6.58751 5.50391C7.66576 4.60539 8.86995 4.11341 10.2672 3.98047L10.2672 2.86328L9.73099 2.86328C9.38121 2.86328 8.99518 2.58594 8.99518 2.13672C8.99518 1.6875 9.38121 1.40234 9.73099 1.40234L12.2643 1.40234C12.6141 1.40234 12.9977 1.6875 12.9977 2.13672C12.9977 2.58594 12.6141 2.86328 12.2643 2.86328L11.7281 2.86328L11.7281 3.98047C13.1254 4.11341 14.3637 4.59654 15.4419 5.49506L16.2316 4.73945L15.8476 4.35543C15.5764 4.1232 15.4878 3.62951 15.8303 3.287C16.1728 2.9445 16.6553 3.05816 16.8811 3.3219L17.7804 4.20856L18.6734 5.10156C18.919 5.34859 19.0253 5.78969 18.6879 6.12711C18.3504 6.46452 17.8869 6.38065 17.6399 6.13509L17.2586 5.76642L16.5136 6.56676C17.4121 7.64502 17.9155 8.87229 18.0484 10.2695L19.1344 10.2695L19.1344 9.73333ZM5.3961 11C5.3961 14.0355 7.97329 16.5942 10.9942 16.5942C14.0151 16.5942 16.6026 14.1702 16.6026 11.0222C16.6026 7.87418 14.1457 5.39476 10.9977 5.39476C7.84964 5.39476 5.3961 7.9645 5.3961 11Z" />
-    <path
-        d="M7.95132 9.79297C8.70469 9.79297 9.15391 10.3872 9.15391 11C9.15391 11.6128 8.67735 12.2109 7.95132 12.2109C7.2253 12.2109 6.74766 11.6128 6.74766 11C6.74766 10.3872 7.19795 9.79297 7.95132 9.79297Z" />
-    <path
-        d="M11.2358 12.1817C12.1948 12.1817 12.8779 12.9742 12.8779 13.8291C12.8779 14.6839 12.1993 15.4797 11.2358 15.4797C10.2723 15.4797 9.59344 14.6839 9.59344 13.8291C9.59344 12.9742 10.2768 12.1817 11.2358 12.1817Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M12.676 11.1211C13.7887 11.0591 14.6813 10.157 14.6813 9.0082C14.6813 7.85938 13.7982 6.96095 12.676 6.89844C11.5539 6.83593 10.4508 7.7189 10.4508 9.0082C10.4508 10.2975 11.5634 11.1831 12.676 11.1211ZM12.676 8.15234C13.1499 8.16473 13.5133 8.53594 13.5133 9.0082C13.5133 9.48047 13.1344 9.86719 12.676 9.86719C12.2177 9.86719 11.7867 9.48438 11.7867 9.0082C11.7867 8.53203 12.2022 8.13996 12.676 8.15234Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M20.874 10.618c0-.381.297-.8.796-.8.5 0 .793.419.793.8v2.764c0 .381-.29.796-.793.796a.79.79 0 0 1-.796-.796v-.585h-1.185c-.155 1.528-.7 2.874-1.692 4.046l.83.87.413-.412c.274-.234.71-.347 1.09.033.38.38.265.813.03 1.087l-.988 1.016-.974.974a.787.787 0 0 1-1.134-.012c-.373-.373-.254-.838.014-1.108l.401-.429-.85-.85a7.205 7.205 0 0 1-4.034 1.68v1.185h.584c.382 0 .802.286.802.796s-.42.793-.802.793h-2.763a.785.785 0 0 1-.791-.793c0-.503.409-.796.79-.796h.586v-1.185a7.225 7.225 0 0 1-4.04-1.717l-.882.852.417.416a.788.788 0 0 1-.002 1.122c-.355.355-.857.26-1.126-.008l-.981-.967-.96-.974a.785.785 0 0 1-.052-1.2c.4-.395.916-.242 1.165.086l.424.41.846-.888a7.148 7.148 0 0 1-1.67-4.019H3.12v.577c0 .381-.25.796-.796.796s-.798-.448-.798-.83v-2.763c0-.381.304-.763.798-.763.493 0 .796.415.796.796v.585h1.22a7.194 7.194 0 0 1 1.679-4.03l-.856-.887-.417.418a.79.79 0 0 1-1.114-.007.8.8 0 0 1 0-1.121l.967-.981.974-.96c.25-.338.826-.453 1.2-.079s.242.943-.086 1.193l-.406.406.905.85c1.177-.98 2.49-1.518 4.015-1.663V3.124h-.585c-.382 0-.803-.303-.803-.793 0-.49.421-.801.803-.801h2.763c.382 0 .8.31.8.801 0 .49-.418.793-.8.793h-.585v1.218c1.525.145 2.875.672 4.052 1.653l.861-.825-.419-.419a.798.798 0 0 1-.019-1.165.782.782 0 0 1 1.147.038l.98.967.975.974c.268.27.384.751.016 1.12a.803.803 0 0 1-1.143.008l-.416-.402-.813.873a7.206 7.206 0 0 1 1.674 4.04h1.185v-.586ZM5.887 12c0 3.312 2.811 6.103 6.107 6.103 3.295 0 6.118-2.645 6.118-6.079 0-3.434-2.68-6.139-6.115-6.139-3.434 0-6.11 2.804-6.11 6.115Z"/>
+  <path d="M8.674 10.683c.822 0 1.312.649 1.312 1.317 0 .668-.52 1.321-1.312 1.321S7.361 12.669 7.361 12c0-.668.491-1.317 1.313-1.317Zm3.583 2.607c1.046 0 1.792.864 1.792 1.796 0 .933-.74 1.801-1.792 1.801-1.05 0-1.791-.868-1.791-1.8 0-.933.745-1.798 1.791-1.798Z"/>
+  <path fill-rule="evenodd" d="M13.828 12.132a2.302 2.302 0 0 0 2.188-2.305 2.292 2.292 0 0 0-2.188-2.301c-1.224-.069-2.427.895-2.427 2.301 0 1.407 1.214 2.373 2.427 2.305Zm0-3.239a.925.925 0 0 1 .914.934.93.93 0 0 1-.914.937c-.5 0-.97-.417-.97-.937s.454-.947.97-.934Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconWidgetLarge.svg b/packages/components/src/common/svgs/IconWidgetLarge.svg
index 7ba455ea2..c5e236cbc 100644
--- a/packages/components/src/common/svgs/IconWidgetLarge.svg
+++ b/packages/components/src/common/svgs/IconWidgetLarge.svg
@@ -1,10 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M1.4502 3.27021C1.4502 2.82839 1.80837 2.47021 2.2502 2.47021H8.38733C8.82915 2.47021 9.18733 2.82839 9.18733 3.27021V9.40735C9.18733 9.84917 8.82915 10.2073 8.38733 10.2073H2.2502C1.80837 10.2073 1.4502 9.84917 1.4502 9.40735V3.27021ZM3.0502 4.07021V8.60735H7.58733V4.07021H3.0502Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M1.4502 13.4631C1.4502 13.0213 1.80837 12.6631 2.2502 12.6631H8.38733C8.82915 12.6631 9.18733 13.0213 9.18733 13.4631V19.6002C9.18733 20.042 8.82915 20.4002 8.38733 20.4002H2.2502C1.80837 20.4002 1.4502 20.042 1.4502 19.6002V13.4631ZM3.0502 14.2631V18.8002H7.58733V14.2631H3.0502Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M11.8696 13.4631C11.8696 13.0213 12.2278 12.6631 12.6696 12.6631H18.8068C19.2486 12.6631 19.6068 13.0213 19.6068 13.4631V19.6002C19.6068 20.042 19.2486 20.4002 18.8068 20.4002H12.6696C12.2278 20.4002 11.8696 20.042 11.8696 19.6002V13.4631ZM13.4696 14.2631V18.8002H18.0068V14.2631H13.4696Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M10.8308 6.90553C10.5184 6.59311 10.5184 6.08658 10.8308 5.77416L15.1704 1.43455C15.4828 1.12213 15.9894 1.12213 16.3018 1.43455L20.6414 5.77416C20.9538 6.08658 20.9538 6.59311 20.6414 6.90553L16.3018 11.2451C15.9894 11.5576 15.4828 11.5576 15.1704 11.2451L10.8308 6.90553ZM12.5279 6.33984L15.7361 9.54808L18.9443 6.33984L15.7361 3.13161L12.5279 6.33984Z" />
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M1.404 3.785c0-.481.391-.872.873-.872h6.695c.482 0 .873.39.873.873v6.695a.872.872 0 0 1-.873.872H2.277a.873.873 0 0 1-.873-.872V3.785Zm1.746.873v4.95H8.1v-4.95H3.15ZM1.404 14.905c0-.482.391-.873.873-.873h6.695c.482 0 .873.391.873.873V21.6a.873.873 0 0 1-.873.873H2.277a.873.873 0 0 1-.873-.873v-6.695Zm1.746.873v4.95H8.1v-4.95H3.15Zm9.62-.873c0-.482.392-.873.874-.873h6.695c.482 0 .873.391.873.873V21.6a.873.873 0 0 1-.873.873h-6.695a.873.873 0 0 1-.873-.873v-6.695Zm1.746.873v4.95h4.95v-4.95h-4.95Zm-2.878-8.027a.873.873 0 0 1 0-1.234l4.734-4.734a.873.873 0 0 1 1.234 0l4.734 4.734c.34.34.34.893 0 1.234l-4.734 4.734a.873.873 0 0 1-1.234 0l-4.734-4.734Zm1.851-.617 3.5 3.5 3.5-3.5-3.5-3.5-3.5 3.5Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconXMarkCircleSmall.svg b/packages/components/src/common/svgs/IconXMarkCircleSmall.svg
index d9411fce0..b234df0ae 100644
--- a/packages/components/src/common/svgs/IconXMarkCircleSmall.svg
+++ b/packages/components/src/common/svgs/IconXMarkCircleSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M7 0C10.8661 0 14 3.1339 14 7C14 10.8661 10.8661 14 7 14C3.1339 14 0 10.8661 0 7C0 3.1339 3.1339 0 7 0ZM7 1.70732C4.0819 1.70732 1.70732 4.0819 1.70732 7C1.70732 9.9181 4.0819 12.2927 7 12.2927C9.9181 12.2927 12.2927 9.9181 12.2927 7C12.2927 4.0819 9.9181 1.70732 7 1.70732ZM7.84508 4.94767C8.17832 4.61443 8.7191 4.61443 9.05233 4.94767C9.3578 5.25313 9.38326 5.733 9.1287 6.06753L9.05233 6.15492L8.20683 7L9.05233 7.84508C9.33003 8.12278 9.37631 8.5446 9.19118 8.87034L9.1287 8.96494L9.05233 9.05233C8.74687 9.3578 8.267 9.38326 7.93247 9.1287L7.84508 9.05233L7 8.20683L6.15492 9.05233C5.87722 9.33003 5.4554 9.37631 5.12966 9.19118L5.03506 9.1287L4.94767 9.05233C4.6422 8.74687 4.61674 8.267 4.8713 7.93247L4.94767 7.84508L5.79317 7L4.94767 6.15492C4.66997 5.87722 4.62369 5.4554 4.80882 5.12966L4.8713 5.03506L4.94767 4.94767C5.25313 4.6422 5.733 4.61674 6.06753 4.8713L6.15492 4.94767L7 5.79317L7.84508 4.94767Z" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 1.951A6.056 6.056 0 0 0 1.951 8 6.056 6.056 0 0 0 8 14.049 6.056 6.056 0 0 0 14.049 8 6.056 6.056 0 0 0 8 1.951Zm.966 3.703a.976.976 0 0 1 1.467 1.28l-.088.1L9.38 8l.966.966c.318.317.37.8.16 1.171l-.072.109-.088.1a.976.976 0 0 1-1.28.087l-.1-.088L8 9.38l-.966.966a.976.976 0 0 1-1.172.16l-.108-.072-.1-.088a.976.976 0 0 1-.087-1.28l.087-.1L6.621 8l-.967-.966a.976.976 0 0 1-.158-1.172l.071-.108.087-.1a.976.976 0 0 1 1.28-.087l.1.087.966.967.966-.967Z"/>
+</svg>
diff --git a/packages/components/src/common/svgs/IconXMarkLarge.svg b/packages/components/src/common/svgs/IconXMarkLarge.svg
index c10db2e61..825915314 100644
--- a/packages/components/src/common/svgs/IconXMarkLarge.svg
+++ b/packages/components/src/common/svgs/IconXMarkLarge.svg
@@ -1,4 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0014 12.4157L17.2415 18.6557C17.632 19.0462 18.2652 19.0462 18.6557 18.6557C19.0462 18.2652 19.0462 17.632 18.6557 17.2415L12.4157 11.0015L18.6557 4.76143C19.0462 4.3709 19.0462 3.73774 18.6557 3.34721C18.2652 2.95669 17.632 2.95669 17.2415 3.34721L11.0014 9.58725L4.76132 3.34712C4.3708 2.9566 3.73763 2.9566 3.34711 3.34712C2.95658 3.73765 2.95658 4.37081 3.34711 4.76133L9.58724 11.0015L3.34712 17.2416C2.95659 17.6321 2.95659 18.2653 3.34712 18.6558C3.73764 19.0463 4.37081 19.0463 4.76133 18.6558L11.0014 12.4157Z"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="m12.002 13.544 6.871 6.872a1 1 0 0 0 1.414 0l.129-.129a1 1 0 0 0 0-1.414l-6.872-6.871 6.872-6.872a1 1 0 0 0 0-1.414l-.129-.129a1 1 0 0 0-1.414 0l-6.871 6.872L5.13 3.587a1 1 0 0 0-1.414 0l-.129.129a1 1 0 0 0 0 1.414l6.872 6.872-6.872 6.871a1 1 0 0 0 0 1.415l.129.128a1 1 0 0 0 1.414 0l6.872-6.872Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/common/svgs/IconXMarkSmall.svg b/packages/components/src/common/svgs/IconXMarkSmall.svg
index c1ac76a8d..d080a370e 100644
--- a/packages/components/src/common/svgs/IconXMarkSmall.svg
+++ b/packages/components/src/common/svgs/IconXMarkSmall.svg
@@ -1,4 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6882 1.30866C12.3465 0.967143 11.7927 0.967229 11.451 1.30886L6.99849 5.76149L2.54613 1.30875C2.20444 0.967028 1.65043 0.967016 1.30872 1.30872C0.967016 1.65043 0.967028 2.20444 1.30875 2.54613L5.76149 6.99849L1.30871 11.4512C0.967006 11.7929 0.967003 12.3469 1.3087 12.6886C1.65041 13.0303 2.20444 13.0303 2.54613 12.6885L6.99849 8.23549L11.451 12.6884C11.7927 13.0301 12.3465 13.0302 12.6883 12.6886C13.0302 12.347 13.0302 11.7928 12.6884 11.451L8.23549 6.99849L12.6884 2.54628C13.0302 2.20452 13.0301 1.65034 12.6882 1.30866Z" />
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M13.007 2.99a1 1 0 0 0-1.414 0L7.998 6.585 4.407 2.993a1 1 0 1 0-1.414 1.414l3.592 3.591-3.595 3.595a1 1 0 1 0 1.414 1.414l3.594-3.595 3.595 3.595a1 1 0 1 0 1.414-1.414L9.412 7.998l3.595-3.594a1 1 0 0 0 0-1.414Z"/>
 </svg>
-    
\ No newline at end of file
diff --git a/packages/components/src/core/Accordion/__storybook__/constants.tsx b/packages/components/src/core/Accordion/__storybook__/constants.tsx
new file mode 100644
index 000000000..914a64420
--- /dev/null
+++ b/packages/components/src/core/Accordion/__storybook__/constants.tsx
@@ -0,0 +1,6 @@
+export const ACCORDION_EXCLUDED_CONTROLS = [
+  "id",
+  "subtitle",
+  "useDivider",
+  "togglePosition",
+];
diff --git a/packages/components/src/core/Accordion/__storybook__/index.stories.tsx b/packages/components/src/core/Accordion/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..d276c3b0d
--- /dev/null
+++ b/packages/components/src/core/Accordion/__storybook__/index.stories.tsx
@@ -0,0 +1,71 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Accordion } from "./stories/default";
+import { ACCORDION_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+
+export default {
+  argTypes: {
+    id: {
+      control: { type: "text" },
+      required: true,
+    },
+    subtitle: {
+      control: { type: "text" },
+    },
+    togglePosition: {
+      control: { type: "select" },
+      options: ["right", "left"],
+    },
+    useDivider: {
+      control: { type: "boolean" },
+    },
+  },
+  component: Accordion,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Accordion",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    togglePosition: "right",
+  },
+};
+
+// LivePreview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: ACCORDION_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    id: "test-story",
+    togglePosition: "right",
+  },
+  parameters: {
+    controls: {
+      exclude: ACCORDION_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (props: Args): JSX.Element => (
+    <Accordion {...props} data-testid="accordion" />
+  ),
+};
diff --git a/packages/components/src/core/Accordion/__storybook__/stories/default.tsx b/packages/components/src/core/Accordion/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..333558345
--- /dev/null
+++ b/packages/components/src/core/Accordion/__storybook__/stories/default.tsx
@@ -0,0 +1,23 @@
+import { Args } from "@storybook/react";
+import RawAccordion, {
+  AccordionDetails,
+  AccordionHeader,
+} from "src/core/Accordion";
+import { EXTRA_SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+
+export const Accordion = (props: Args): JSX.Element => {
+  const { id, subtitle, useDivider, togglePosition } = props;
+  return (
+    <RawAccordion
+      id={id}
+      useDivider={useDivider}
+      togglePosition={togglePosition}
+      {...props}
+    >
+      <AccordionHeader id={`${id}-header`} subtitle={subtitle}>
+        Accordion Header
+      </AccordionHeader>
+      <AccordionDetails>{EXTRA_SHORT_LOREM_IPSUM}</AccordionDetails>
+    </RawAccordion>
+  );
+};
diff --git a/packages/components/src/core/Accordion/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Accordion/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..5c33c2c63
--- /dev/null
+++ b/packages/components/src/core/Accordion/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,37 @@
+import { Args } from "@storybook/react";
+import { Accordion } from "./default";
+
+const livePreviewStyles = {
+  display: "grid",
+  gridColumnGap: "24px",
+  gridRowGap: "50px",
+  gridTemplateColumns: "repeat(4, 200px)",
+};
+
+export function LivePreviewDemo(props: Args): JSX.Element {
+  return (
+    <div style={livePreviewStyles as React.CSSProperties}>
+      <Accordion
+        id="accordion-1"
+        togglePosition="right"
+        useDivider
+        {...props}
+      />
+      <Accordion
+        id="accordion-2"
+        togglePosition="right"
+        subtitle="Optional Subtitle"
+        useDivider
+        {...props}
+      />
+      <Accordion id="accordion-3" togglePosition="left" useDivider {...props} />
+      <Accordion
+        id="accordion-4"
+        togglePosition="left"
+        subtitle="Optional Subtitle"
+        useDivider
+        {...props}
+      />
+    </div>
+  );
+}
diff --git a/packages/components/src/core/Accordion/Accordion.namespace-test.tsx b/packages/components/src/core/Accordion/__tests__/Accordion.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Accordion/Accordion.namespace-test.tsx
rename to packages/components/src/core/Accordion/__tests__/Accordion.namespace-test.tsx
diff --git a/packages/components/src/core/Accordion/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap
similarity index 83%
rename from packages/components/src/core/Accordion/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap
index c2eccaacd..3641ff7ee 100644
--- a/packages/components/src/core/Accordion/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`<Accordion /> Default story renders snapshot 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1gtxzl5-MuiPaper-root-MuiAccordion-root"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-16nijzp-MuiPaper-root-MuiAccordion-root"
 >
   <div
     aria-controls="undefined-header-panel-content"
     aria-expanded="false"
-    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-q39ari-MuiButtonBase-root-MuiAccordionSummary-root"
+    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-1qm0oyu-MuiButtonBase-root-MuiAccordionSummary-root"
     id="undefined-header"
     role="button"
     tabindex="0"
@@ -30,7 +30,9 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
           focusable="false"
-          viewBox="0 0 14 14"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         />
       </div>
     </div>
@@ -51,9 +53,9 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
           role="region"
         >
           <div
-            class="MuiAccordionDetails-root css-rnrgul-MuiAccordionDetails-root"
+            class="MuiAccordionDetails-root css-kcniag-MuiAccordionDetails-root"
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
         </div>
       </div>
diff --git a/packages/components/src/core/Accordion/index.test.tsx b/packages/components/src/core/Accordion/__tests__/index.test.tsx
similarity index 95%
rename from packages/components/src/core/Accordion/index.test.tsx
rename to packages/components/src/core/Accordion/__tests__/index.test.tsx
index b3781d272..e6a4dc0a9 100644
--- a/packages/components/src/core/Accordion/index.test.tsx
+++ b/packages/components/src/core/Accordion/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/Accordion/components/AccordionDetails/style.ts b/packages/components/src/core/Accordion/components/AccordionDetails/style.ts
index ab37828c5..c337611fb 100644
--- a/packages/components/src/core/Accordion/components/AccordionDetails/style.ts
+++ b/packages/components/src/core/Accordion/components/AccordionDetails/style.ts
@@ -10,8 +10,7 @@ export const StyledAccordionDetails = styled(AccordionDetails)`
     const spaces = getSpaces(props);
 
     return css`
-      padding: ${spaces?.m}px;
-      padding-top: ${spaces?.xxs}px;
+      padding: ${spaces?.xxs}px ${spaces?.m}px ${spaces?.m}px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx b/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx
index cca2bebe9..d88b63804 100644
--- a/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx
+++ b/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx
@@ -15,7 +15,7 @@ const AccordionHeader = (props: AccordionHeaderProps) => {
     <StyledAccordionHeader
       aria-controls={`${id}-panel-content`}
       id={id}
-      expandIcon={<Icon sdsIcon="chevronDown" sdsSize="s" sdsType="static" />}
+      expandIcon={<Icon sdsIcon="ChevronDown" sdsSize="xs" sdsType="static" />}
     >
       {children}
       {subtitle && <StyledSubtitle>{subtitle}</StyledSubtitle>}
diff --git a/packages/components/src/core/Accordion/components/AccordionHeader/style.ts b/packages/components/src/core/Accordion/components/AccordionHeader/style.ts
index e7556a6af..8e0931b47 100644
--- a/packages/components/src/core/Accordion/components/AccordionHeader/style.ts
+++ b/packages/components/src/core/Accordion/components/AccordionHeader/style.ts
@@ -1,11 +1,12 @@
 import { css } from "@emotion/react";
-import { AccordionSummary } from "@mui/material";
+import { AccordionSummary, accordionSummaryClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
   fontBodyXxs,
   fontHeaderS,
-  getColors,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
 } from "src/core/styles";
 
@@ -13,33 +14,29 @@ export const StyledAccordionHeader = styled(AccordionSummary)`
   ${fontHeaderS}
   ${(props: CommonThemeProps) => {
     const spaces = getSpaces(props);
-    const colors = getColors(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return css`
       padding: ${spaces?.m}px;
-      min-height: 40px;
       align-items: flex-start;
       box-sizing: border-box;
 
-      &.Mui-expanded {
-        min-height: 40px;
-      }
-
-      .MuiAccordionSummary-content {
+      .${accordionSummaryClasses.content} {
         margin: 0;
         flex-direction: column;
 
-        &.Mui-expanded {
+        &.${accordionSummaryClasses.expanded} {
           margin: 0;
         }
       }
 
-      .MuiAccordionSummary-expandIconWrapper {
-        padding: 0px;
-        margin-right: 0;
+      & .${accordionSummaryClasses.expandIconWrapper} {
         margin-left: ${spaces?.m}px;
+        margin-top: ${spaces?.xxs}px !important;
+        align-self: center;
+
         svg {
-          color: ${colors?.gray[500]};
+          color: ${semanticComponentColors?.base?.icon};
         }
       }
     `;
@@ -50,10 +47,10 @@ export const StyledSubtitle = styled("p")`
   ${fontBodyXxs}
 
   ${(props: CommonThemeProps) => {
-    const colors = getColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return css`
-      color: ${colors?.gray[500]};
+      color: ${semanticTextColors?.base?.secondary};
       margin: 0;
     `;
   }}
diff --git a/packages/components/src/core/Accordion/index.stories.tsx b/packages/components/src/core/Accordion/index.stories.tsx
deleted file mode 100644
index dc2401a21..000000000
--- a/packages/components/src/core/Accordion/index.stories.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import AccordionDetails from "./components/AccordionDetails";
-import AccordionHeader from "./components/AccordionHeader";
-import RawAccordion from "./index";
-
-const Accordion = (props: Args): JSX.Element => {
-  const { id, subtitle, useDivider, togglePosition } = props;
-  return (
-    <RawAccordion
-      id={id}
-      useDivider={useDivider}
-      togglePosition={togglePosition}
-      {...props}
-    >
-      <AccordionHeader id={`${id}-header`} subtitle={subtitle}>
-        Accordion Header
-      </AccordionHeader>
-      <AccordionDetails>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        malesuada lacus ex, sit amet blandit leo lobortis eget.
-      </AccordionDetails>
-    </RawAccordion>
-  );
-};
-
-export default {
-  argTypes: {
-    id: {
-      control: { type: "text" },
-      required: true,
-    },
-    subtitle: {
-      control: { type: "text" },
-    },
-    togglePosition: {
-      control: { type: "select" },
-      options: ["right", "left"],
-    },
-    useDivider: {
-      control: { type: "boolean" },
-    },
-  },
-  component: Accordion,
-  title: "Accordion",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    togglePosition: "right",
-  },
-};
-
-// LivePreview
-
-const livePreviewStyles = {
-  display: "grid",
-  gridColumnGap: "24px",
-  gridRowGap: "50px",
-  gridTemplateColumns: "repeat(4, 200px)",
-};
-
-function LivePreviewDemo(props: Args): JSX.Element {
-  return (
-    <div style={livePreviewStyles as React.CSSProperties}>
-      <Accordion
-        id="accordion-1"
-        togglePosition="right"
-        useDivider
-        {...props}
-      />
-      <Accordion
-        id="accordion-2"
-        togglePosition="right"
-        subtitle="Optional Subtitle"
-        useDivider
-        {...props}
-      />
-      <Accordion id="accordion-3" togglePosition="left" useDivider {...props} />
-      <Accordion
-        id="accordion-4"
-        togglePosition="left"
-        subtitle="Optional Subtitle"
-        useDivider
-        {...props}
-      />
-    </div>
-  );
-}
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  args: {
-    id: "test-story",
-    togglePosition: "right",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (props: Args): JSX.Element => (
-    <Accordion {...props} data-testid="accordion" />
-  ),
-};
diff --git a/packages/components/src/core/Accordion/style.ts b/packages/components/src/core/Accordion/style.ts
index 841b42fd4..c3a0988ad 100644
--- a/packages/components/src/core/Accordion/style.ts
+++ b/packages/components/src/core/Accordion/style.ts
@@ -1,13 +1,20 @@
 import { css, SerializedStyles } from "@emotion/react";
-import { Accordion } from "@mui/material";
+import {
+  Accordion,
+  accordionClasses,
+  accordionSummaryClasses,
+  accordionDetailsClasses,
+} from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
+  fontBodyXs,
   getBorders,
+  getIconSizes,
   getShadows,
   getSpaces,
   getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface AccordionExtraProps extends CommonThemeProps {
   useDivider?: boolean;
@@ -27,42 +34,45 @@ export const StyledAccordion = styled(Accordion, {
 
     const shadows = getShadows(props);
     const typography = getTypography(props);
-    const border = getBorders(props);
+    const borders = getBorders(props);
+    const spaces = getSpaces(props);
 
     return css`
-      &.MuiAccordion-root {
+      &.${accordionClasses.root} {
         box-shadow: ${shadows?.none};
-        font-family: ${typography?.fontFamily};
-        border-bottom: ${useDivider ? border?.gray[300] : "none"};
+        font-family: ${typography?.fontFamily?.body};
+        border-bottom: ${useDivider ? borders?.base?.divider : "none"};
         height: fit-content;
 
-        & .MuiAccordionSummary-root {
-          padding: 10px;
-          min-height: 40px;
+        & .${accordionSummaryClasses.root} {
+          min-height: 44px;
 
-          &.Mui-expanded {
+          &.${accordionSummaryClasses.expanded} {
             min-height: unset;
           }
 
           & .MuiAccordionSummary-expandIcon,
-          & .MuiAccordionSummary-expandIconWrapper {
+          & .${accordionSummaryClasses.expandIconWrapper} {
             padding: 0;
             align-self: flex-start;
+            margin-top: ${spaces?.xxxs}px;
           }
         }
 
-        .MuiAccordionDetails-root {
-          padding: 10px;
-          padding-top: 4px;
+        .${accordionDetailsClasses.root} {
+          ${fontBodyXs(props)}
+          padding: ${spaces?.m}px;
+          padding-top: ${spaces?.xxs}px;
         }
 
         &:before {
           opacity: 0;
         }
 
-        &.Mui-expanded {
+        &.${accordionClasses.expanded} {
           margin: 0;
         }
+
         ${togglePosition === "left" && leftPosition(props)}
       }
     `;
@@ -71,30 +81,39 @@ export const StyledAccordion = styled(Accordion, {
 
 const leftPosition = (props: AccordionExtraProps): SerializedStyles => {
   const spaces = getSpaces(props);
+  const iconSizes = getIconSizes(props);
 
   return css`
-    &.MuiAccordion-root {
-      & .MuiAccordionSummary-root {
+    &.${accordionClasses.root} {
+      & .${accordionSummaryClasses.root} {
         flex-direction: row-reverse;
 
-        .MuiAccordionSummary-content {
-          padding-left: ${spaces?.xs}px;
+        .${accordionSummaryClasses.content} {
+          padding-left: ${spaces?.s}px;
         }
 
-        .MuiAccordionSummary-expandIconWrapper {
+        .${accordionSummaryClasses.expandIconWrapper} {
           margin: 0;
           transform: rotate(-90deg);
           align-self: flex-start;
-          margin-top: ${spaces?.xxs}px;
+          margin-top: ${spaces?.xxxs}px;
 
-          &.Mui-expanded {
+          &.${accordionSummaryClasses.expanded} {
             transform: rotate(0deg);
           }
         }
       }
 
-      & .MuiAccordionDetails-root {
-        padding-left: 30px;
+      /** This is to adjust the padding of the AccordionDetails when the togglePosition is left
+        * The padding-left is the sum of the
+        * left padding of the AccordionButton = spaces?.m
+        * the width of the expandIcon = iconSizes?.xs.width
+        * and the left padding of the AccordionSummary = spaces?.s 
+        */
+      & .${accordionDetailsClasses.root} {
+        padding-left: ${(spaces?.m ?? 12) +
+        (iconSizes?.xs.width ?? 12) +
+        (spaces?.s ?? 8)}px;
       }
     }
   `;
diff --git a/packages/components/src/core/Alert/index.stories.tsx b/packages/components/src/core/Alert/__storybook__/index.stories.tsx
similarity index 80%
rename from packages/components/src/core/Alert/index.stories.tsx
rename to packages/components/src/core/Alert/__storybook__/index.stories.tsx
index f4cbaab93..c90663061 100644
--- a/packages/components/src/core/Alert/index.stories.tsx
+++ b/packages/components/src/core/Alert/__storybook__/index.stories.tsx
@@ -3,9 +3,10 @@ import { Snackbar } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { Args, Meta } from "@storybook/react";
 import React from "react";
-import Button from "../Button";
-import { defaultTheme } from "../styles/common/defaultTheme";
-import Alert from "./index";
+import Button from "src/core/Button";
+import { defaultTheme } from "src/core/styles/common/defaultTheme";
+import Alert from "../index";
+import { BADGE } from "src/common/storybook/storybookBadges";
 
 const DismissButton = styled(Button)`
   margin-left: -${defaultTheme.spacing(3)}px;
@@ -36,9 +37,16 @@ export default {
     },
   },
   component: Demo,
-  title: "Alert - To Be Depreciated",
+  parameters: {
+    badges: [BADGE.DEPRECATED],
+  },
+  title: "Deprecated/Alert [deprecated]",
 } as Meta;
 
+const ExcludedControls = ["text"];
+
+// Default
+
 export const Default = {
   args: {
     text: "This is an alert!",
@@ -84,4 +92,9 @@ export const Test = {
   args: {
     text: "Test Alert!",
   },
+  parameters: {
+    controls: {
+      exclude: ExcludedControls,
+    },
+  },
 };
diff --git a/packages/components/src/core/Alert/style.ts b/packages/components/src/core/Alert/style.ts
index 851980c15..a3f6092a4 100644
--- a/packages/components/src/core/Alert/style.ts
+++ b/packages/components/src/core/Alert/style.ts
@@ -1,25 +1,29 @@
-import { Alert } from "@mui/material";
+import { Alert, AlertProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { getColors, getShadows, getSpaces } from "../styles";
-import { defaultTheme } from "../styles/common/defaultTheme";
+import { Colors, getColors, getShadows, getSpaces } from "../styles";
+import { defaultTheme } from "src/core/styles/common/defaultTheme";
 
 export const StyledAlert = styled(Alert)`
   ${(props) => {
     const colors = getColors(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
     const shadows = getShadows(props);
     const { severity = "success" } = props;
-    const borderColor = (colors && colors[severity][400]) || "black";
-    const alertColor = (colors && colors[severity][100]) || "white";
-    const iconColor = (colors && colors[severity][400]) || "black";
-    const backgroundColor = colors && colors[severity][100];
+
+    const borderColor =
+      (colors && severityToColor(severity, colors)[400]) || "black";
+    const alertColor =
+      (colors && severityToColor(severity, colors)[100]) || "white";
+    const iconColor =
+      (colors && severityToColor(severity, colors)[400]) || "black";
+    const backgroundColor = colors && severityToColor(severity, colors)[100];
 
     return `
       background-color: ${backgroundColor};
-      margin: ${spacings?.m}px 0;
+      margin: ${spaces?.m}px 0;
       color: ${defaultTheme.palette.text.primary};
-      padding: ${spacings?.l}px ${spacings?.l}px
-        ${spacings?.l}px 9px;
+      padding: ${spaces?.l}px ${spaces?.l}px
+        ${spaces?.l}px 9px;
       background-color: ${alertColor};
       &.elevated {
         border-left: 5px solid;
@@ -34,3 +38,21 @@ export const StyledAlert = styled(Alert)`
     `;
   }}
 `;
+
+function severityToColor(
+  alertSeverity: AlertProps["severity"],
+  colors: Colors
+) {
+  switch (alertSeverity) {
+    case "error":
+      return colors?.red;
+    case "warning":
+      return colors?.yellow;
+    case "info":
+      return colors?.blue;
+    case "success":
+      return colors?.green;
+    default:
+      return colors?.green;
+  }
+}
diff --git a/packages/components/src/core/Autocomplete/__storybook__/constants.tsx b/packages/components/src/core/Autocomplete/__storybook__/constants.tsx
new file mode 100644
index 000000000..b824244fb
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/__storybook__/constants.tsx
@@ -0,0 +1,38 @@
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
+import { AUTOCOMPLETE_MULTI_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS";
+
+export const AUTOCOMPLETE_EXCLUDED_CONTROLS = [
+  "search",
+  "keepSearchOnSelect",
+  "multiple",
+  "blurOnSelect",
+  "clearOnBlur",
+  "groupBy",
+  "label",
+  "options",
+];
+
+export const AUTOCOMPLETE_GROUP_BY_OPTIONS = [
+  undefined,
+  (option: DefaultAutocompleteOption) => option.section as string,
+];
+
+export const AUTOCOMPLETE_WRAPPER_STYLES = {
+  margin: "16px 0 0 24px",
+  width: 274,
+};
+
+export const AUTOCOMPLETE_DIV_MARGIN = "10px 0 0 24px";
+
+export const AUTOCOMPLETE_LABEL = "Search by label";
+
+export const AUTOCOMPLETE_DATA_OPTIONS = [
+  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],
+  ],
+];
diff --git a/packages/components/src/core/Autocomplete/__storybook__/index.stories.tsx b/packages/components/src/core/Autocomplete/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..8ddbf88b1
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/__storybook__/index.stories.tsx
@@ -0,0 +1,143 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import {
+  AUTOCOMPLETE_DATA_OPTIONS,
+  AUTOCOMPLETE_EXCLUDED_CONTROLS,
+  AUTOCOMPLETE_GROUP_BY_OPTIONS,
+  AUTOCOMPLETE_LABEL,
+} from "./constants";
+import { Autocomplete } from "./stories/default";
+import { AutocompleteSingleColumnDemo } from "./stories/singleColumn";
+import { AutocompleteMultiColumnDemo } from "./stories/multiColumn";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    groupBy: {
+      control: {
+        labels: ["No group by", "Group by section names"],
+        type: "select",
+      },
+      mapping: AUTOCOMPLETE_GROUP_BY_OPTIONS,
+      options: Object.keys(AUTOCOMPLETE_GROUP_BY_OPTIONS),
+    },
+    keepSearchOnSelect: {
+      control: { type: "boolean" },
+    },
+    label: {
+      control: { type: "text" },
+    },
+    multiple: {
+      control: { type: "boolean" },
+    },
+    options: {
+      control: {
+        labels: ["One Column", "Two Columns", "Three Columns"],
+        type: "select",
+      },
+      mapping: AUTOCOMPLETE_DATA_OPTIONS,
+      options: Object.keys(AUTOCOMPLETE_DATA_OPTIONS),
+    },
+  },
+  component: Autocomplete,
+  // (masoudmanson) For the purpose of storybook, the button is removed
+  // 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
+  // accessibility rules have been temporarily disabled in the tests
+  parameters: {
+    axe: {
+      disabledRules: [
+        "aria-input-field-name",
+        "aria-required-children",
+        "aria-required-parent",
+        "button-name",
+        "list",
+        "listitem",
+      ],
+    },
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Dropdowns/Autocomplete",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    groupBy: AUTOCOMPLETE_GROUP_BY_OPTIONS[1],
+    keepSearchOnSelect: true,
+    label: AUTOCOMPLETE_LABEL,
+    multiple: true,
+    search: true,
+  },
+  parameters: {
+    controls: {
+      exclude: ["search"],
+    },
+  },
+};
+
+// Single Column Autocomplete
+
+export const SingleColumn = {
+  args: {
+    groupBy: AUTOCOMPLETE_GROUP_BY_OPTIONS[1],
+    keepSearchOnSelect: false,
+    label: AUTOCOMPLETE_LABEL,
+    multiple: true,
+    search: true,
+  },
+  parameters: {
+    controls: {
+      exclude: AUTOCOMPLETE_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <AutocompleteSingleColumnDemo {...args} />,
+};
+
+// Multi Column Autocomplete
+
+export const MultiColumn = {
+  args: {
+    groupBy: AUTOCOMPLETE_GROUP_BY_OPTIONS[1],
+    keepSearchOnSelect: false,
+    label: AUTOCOMPLETE_LABEL,
+    multiple: true,
+    search: true,
+  },
+  parameters: {
+    controls: {
+      exclude: AUTOCOMPLETE_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <AutocompleteMultiColumnDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    keepSearchOnSelect: false,
+    multiple: true,
+    search: true,
+  },
+  parameters: {
+    controls: {
+      exclude: AUTOCOMPLETE_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => (
+    <TestDemo data-testid="autocomplete-base" {...args} />
+  ),
+};
diff --git a/packages/components/src/core/Autocomplete/__storybook__/stories/default.tsx b/packages/components/src/core/Autocomplete/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..a79d64020
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/__storybook__/stories/default.tsx
@@ -0,0 +1,229 @@
+import { Args } from "@storybook/react";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { SyntheticEvent, useEffect, useState } from "react";
+import RawAutocomplete, {
+  AutocompleteMultiColumnValue,
+  SDSAutocompleteValue,
+} from "src/core/Autocomplete";
+import TagFilter from "src/core/TagFilter";
+import { AutocompleteValue } from "@mui/base";
+import {
+  AUTOCOMPLETE_DIV_MARGIN,
+  AUTOCOMPLETE_WRAPPER_STYLES,
+} from "../constants";
+
+export const Autocomplete = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+>(
+  props: Args
+): JSX.Element => {
+  const {
+    label,
+    multiple,
+    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+    search,
+    value: propValue,
+    keepSearchOnSelect,
+  } = props;
+
+  type DisableClearable = false;
+  type FreeSolo = false;
+
+  const isControlled = propValue !== undefined;
+  const [value, setValue] = useState<
+    SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(
+    (multiple ? [] : null) as SDSAutocompleteValue<
+      T,
+      Multiple,
+      DisableClearable,
+      FreeSolo
+    >
+  );
+
+  const [selection, setSelection] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (isControlled) {
+      setValue(propValue);
+    }
+  }, [isControlled, propValue]);
+
+  useEffect(() => {
+    setSelection([]);
+    setValue(
+      (multiple ? [] : null) as SDSAutocompleteValue<
+        T,
+        Multiple,
+        DisableClearable,
+        FreeSolo
+      >
+    );
+  }, [multiple, options]);
+
+  return (
+    <>
+      <div style={AUTOCOMPLETE_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: AUTOCOMPLETE_DIV_MARGIN }}>
+        {selection.length
+          ? selection.map((item) => {
+              return (
+                <TagFilter
+                  key={item}
+                  label={item}
+                  onDelete={() => handleTagDelete(item)}
+                  onClick={() => handleTagDelete(item)}
+                />
+              );
+            })
+          : null}
+      </div>
+    </>
+  );
+
+  // eslint-disable-next-line sonarjs/cognitive-complexity
+  function handleChange(
+    _: SyntheticEvent<Element, Event>,
+    newValue: SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    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 (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);
+      }
+    }
+  }
+
+  // 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);
+          }
+        });
+      }
+    } else {
+      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 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
+          >
+        );
+
+        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);
+    }
+  }
+};
diff --git a/packages/components/src/core/Autocomplete/__storybook__/stories/multiColumn.tsx b/packages/components/src/core/Autocomplete/__storybook__/stories/multiColumn.tsx
new file mode 100644
index 000000000..85666e0dd
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/__storybook__/stories/multiColumn.tsx
@@ -0,0 +1,155 @@
+import { Args } from "@storybook/react";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
+import { AUTOCOMPLETE_MULTI_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS";
+import { useEffect, useState } from "react";
+import { AutocompleteMultiColumnValue } from "src/core/Autocomplete";
+import {
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteValue,
+} from "@mui/base";
+import {
+  AUTOCOMPLETE_DIV_MARGIN,
+  AUTOCOMPLETE_WRAPPER_STYLES,
+} from "../constants";
+import TagFilter from "src/core/TagFilter";
+import RawAutocompleteMultiColumn from "src/core/Autocomplete/components/AutocompleteMultiColumn";
+
+export 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={AUTOCOMPLETE_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: AUTOCOMPLETE_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);
+          }
+        });
+      }
+    }
+  }
+};
diff --git a/packages/components/src/core/Autocomplete/__storybook__/stories/singleColumn.tsx b/packages/components/src/core/Autocomplete/__storybook__/stories/singleColumn.tsx
new file mode 100644
index 000000000..0b1ee1607
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/__storybook__/stories/singleColumn.tsx
@@ -0,0 +1,153 @@
+import { AutocompleteChangeReason, AutocompleteValue } from "@mui/base";
+import AutocompleteBase, {
+  DefaultAutocompleteOption,
+} from "src/core/Autocomplete/components/AutocompleteBase";
+import { Args } from "@storybook/react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { useEffect, useState } from "react";
+import {
+  AUTOCOMPLETE_DIV_MARGIN,
+  AUTOCOMPLETE_WRAPPER_STYLES,
+} from "../constants";
+import TagFilter from "src/core/TagFilter";
+
+export 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(getInitialValue());
+  const [pendingValue, setPendingValue] = useState(getInitialValue());
+
+  const [selection, setSelection] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (isControlled) {
+      setValue(propValue);
+    }
+  }, [isControlled, propValue]);
+
+  useEffect(() => {
+    setSelection([]);
+  }, [multiple]);
+
+  return (
+    <>
+      <div style={AUTOCOMPLETE_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: AUTOCOMPLETE_DIV_MARGIN }}>
+        {selection.length
+          ? selection.map((item) => {
+              return (
+                <TagFilter
+                  key={item}
+                  label={item}
+                  onDelete={() => handleTagDelete(item)}
+                  onClick={() => handleTagDelete(item)}
+                />
+              );
+            })
+          : null}
+      </div>
+    </>
+  );
+
+  function handleChange(
+    _event: React.SyntheticEvent,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
+    _reason: AutocompleteChangeReason
+  ) {
+    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([]);
+    }
+  }
+
+  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
+        >);
+  }
+};
diff --git a/packages/components/src/core/Autocomplete/__storybook__/stories/test.tsx b/packages/components/src/core/Autocomplete/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..9e6b7a22a
--- /dev/null
+++ b/packages/components/src/core/Autocomplete/__storybook__/stories/test.tsx
@@ -0,0 +1,30 @@
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
+import { AUTOCOMPLETE_WRAPPER_STYLES } from "../constants";
+import { Args } from "@storybook/react";
+import RawAutocomplete from "src/core/Autocomplete";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  const {
+    multiple,
+    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+    search,
+  } = props;
+
+  return (
+    <div style={AUTOCOMPLETE_WRAPPER_STYLES}>
+      <RawAutocomplete
+        open
+        search={search}
+        label="Search"
+        multiple={multiple}
+        disableCloseOnSelect={multiple}
+        options={options}
+        groupBy={(option: DefaultAutocompleteOption) =>
+          option.section as string
+        }
+        {...props}
+      />
+    </div>
+  );
+};
diff --git a/packages/components/src/core/Autocomplete/Autocomplete.namespace-test.tsx b/packages/components/src/core/Autocomplete/__tests__/Autocomplete.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Autocomplete/Autocomplete.namespace-test.tsx
rename to packages/components/src/core/Autocomplete/__tests__/Autocomplete.namespace-test.tsx
diff --git a/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
similarity index 72%
rename from packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
index 1e43d0004..dd4da5bb9 100644
--- a/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,46 +5,37 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
   style="margin: 16px 0px 0px 24px; width: 274px;"
 >
   <div
-    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-kwza7v-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-varg9y-MuiAutocomplete-root"
     label="Search by label"
   >
     <div
       class="css-1oteowz"
     >
       <label
-        class="css-1xrxdra"
+        class="css-l5xdrx"
         for="location-search"
       >
         Search by label
       </label>
       <div
-        class="MuiFormControl-root MuiTextField-root css-1gkuvuu-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root css-1opgyxy-MuiFormControl-root-MuiTextField-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
           inputmode="text"
         >
-          <input
-            aria-autocomplete="list"
-            aria-expanded="false"
-            aria-invalid="false"
-            autocapitalize="none"
-            autocomplete="off"
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-vvf66v-MuiInputBase-input-MuiOutlinedInput-input"
-            id="autocomplete-demo"
-            placeholder="Search by label"
-            role="combobox"
-            spellcheck="false"
-            type="search"
-            value=""
-          />
           <div
-            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-g8kzra-MuiInputAdornment-root"
+            class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-3b46cg-MuiInputAdornment-root"
           >
+            <span
+              class="notranslate"
+            >
+              ​
+            </span>
             <button
               aria-label="search-button"
               class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-5z5hxc-MuiButtonBase-root-MuiIconButton-root"
-              icon="search"
+              icon="Search"
               tabindex="0"
               type="button"
             >
@@ -58,7 +49,9 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
                   data-testid="IconSearchSmall"
                   fillcontrast="white"
                   focusable="false"
-                  viewBox="0 0 14 14"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
                 />
               </div>
               <span
@@ -66,6 +59,27 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
               />
             </button>
           </div>
+          <input
+            aria-autocomplete="list"
+            aria-expanded="false"
+            aria-invalid="false"
+            autocapitalize="none"
+            autocomplete="off"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-16slxrv-MuiInputBase-input-MuiOutlinedInput-input"
+            id="autocomplete-demo"
+            placeholder="Search by label"
+            role="combobox"
+            spellcheck="false"
+            type="search"
+            value=""
+          />
+          <div
+            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1is7ehy-MuiInputAdornment-root"
+          >
+            <p
+              class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+            />
+          </div>
           <fieldset
             aria-hidden="true"
             class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
diff --git a/packages/components/src/core/Autocomplete/index.test.tsx b/packages/components/src/core/Autocomplete/__tests__/index.test.tsx
similarity index 77%
rename from packages/components/src/core/Autocomplete/index.test.tsx
rename to packages/components/src/core/Autocomplete/__tests__/index.test.tsx
index f747f44c3..d92a84fb7 100644
--- a/packages/components/src/core/Autocomplete/index.test.tsx
+++ b/packages/components/src/core/Autocomplete/__tests__/index.test.tsx
@@ -1,8 +1,8 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStory } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as snapshotTestStoryFile from "./index.stories";
-import Meta, { Test as TestStory } from "./index.stories";
+import * as snapshotTestStoryFile from "../__storybook__/index.stories";
+import Meta, { Test as TestStory } from "../__storybook__/index.stories";
 
 const Test = composeStory(TestStory, Meta);
 
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
index 77f42ebb6..c7b7cb846 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
@@ -13,12 +13,12 @@ import {
 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 ButtonIcon from "src/core/ButtonIcon";
+import { IconProps } from "src/core/Icon";
+import { InputSearchProps } from "src/core/InputSearch";
+import { StyledInputAdornment } from "src/core/InputSearch/style";
+import MenuItem, { IconNameToSmallSizes } from "src/core/MenuItem";
+import { SDSTheme } from "src/core/styles";
 import {
   InputBaseWrapper,
   StyleProps,
@@ -213,10 +213,6 @@ const AutocompleteBase = <
             ...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"
@@ -227,21 +223,26 @@ const AutocompleteBase = <
                     sdsIconProps={{
                       sdsType: "iconButton",
                     }}
-                    icon="xMark"
+                    icon="XMarkCircle"
                   />
                 )}
+              </StyledInputAdornment>
+            ),
+            inputProps: params.inputProps,
+            startAdornment: (
+              <StyledInputAdornment position="start">
                 <ButtonIcon
                   aria-label="search-button"
+                  onClick={clearInput}
                   sdsType="secondary"
                   sdsSize="small"
                   sdsIconProps={{
                     sdsType: "interactive",
                   }}
-                  icon="search"
+                  icon="Search"
                 />
               </StyledInputAdornment>
             ),
-            inputProps: params.inputProps,
           }}
           {...InputBaseProps}
         />
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
index 58422402b..54eb7a67f 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
@@ -1,17 +1,18 @@
 import { Autocomplete, autocompleteClasses, Paper } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactElement } from "react";
-import InputSearch from "../../../InputSearch";
+import InputSearch from "src/core/InputSearch";
 import {
   CommonThemeProps,
   fontBodyXxs,
-  fontCapsXxxs,
+  fontCapsXxxxs,
   getBorders,
-  getColors,
   getCorners,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getShadows,
   getSpaces,
-} from "../../../styles";
+} from "src/core/styles";
 
 export interface StyleProps extends CommonThemeProps {
   count?: number;
@@ -34,40 +35,41 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
   + .${autocompleteClasses.popper}
     > .${autocompleteClasses.paper}
     .${autocompleteClasses.groupLabel} {
-    ${fontCapsXxxs}
+    ${fontCapsXxxxs}
   }
 
   ${(props: StyleProps) => {
     const { search } = props;
-    const spacings = getSpaces(props);
-    const colors = getColors(props);
+    const spaces = getSpaces(props);
     const borders = getBorders(props);
+    const semanticTextColors = getSemanticTextColors(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
       ${!search && `height: 0`};
 
       .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {
-        padding: 0 ${spacings?.l}px 0 0;
+        padding: 0 ${spaces?.m}px;
 
         .MuiAutocomplete-input {
-          padding: ${spacings?.xs}px ${spacings?.l}px;
+          padding: ${spaces?.xs}px ${spaces?.s}px;
         }
       }
 
       & + .${autocompleteClasses.popper} > .${autocompleteClasses.paper} {
         .${autocompleteClasses.listbox} {
           max-height: 40vh;
-          padding: 0 ${spacings?.m}px 0 0;
+          padding: 0 ${spaces?.m}px 0 0;
 
           .${autocompleteClasses.option} {
             min-height: unset;
 
             &.${autocompleteClasses.focused} {
-              background-color: ${colors?.gray[100]};
+              background-color: ${semanticComponentColors?.base?.surfaceSecondary};
             }
 
             &[aria-selected="true"] {
-              background-color: white;
+              background-color: ${semanticComponentColors?.base?.surfacePrimary};
             }
 
             &[aria-disabled="true"] {
@@ -75,7 +77,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
             }
 
             &[aria-selected="true"].${autocompleteClasses.focused} {
-              background-color: ${colors?.gray[100]};
+              background-color: ${semanticComponentColors?.base?.surfaceSecondary};
             }
           }
 
@@ -88,15 +90,15 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
 
         .${autocompleteClasses.groupLabel} {
           top: 0;
-          color: ${colors?.gray[500]};
-          padding: ${spacings?.xxs}px ${spacings?.s}px;
+          color: ${semanticTextColors?.base?.secondary};
+          padding: ${spaces?.xxs}px ${spaces?.s}px;
         }
 
         .${autocompleteClasses.groupUl} {
           position: relative;
-          margin: 0 0 ${spacings?.m}px;
-          border-bottom: ${borders?.gray[200]};
-          padding-bottom: ${spacings?.xxs}px;
+          margin: 0 0 ${spaces?.m}px;
+          border-bottom: ${borders?.base?.divider};
+          padding-bottom: ${spaces?.xxs}px;
 
           & li:last-of-type {
             position: relative;
@@ -104,12 +106,12 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
         }
 
         .${autocompleteClasses.noOptions} {
-          padding: ${spacings?.xs}px ${spacings?.s}px;
-          margin-right: ${spacings?.l}px;
+          padding: ${spaces?.xs}px ${spaces?.s}px;
+          margin-right: ${spaces?.l}px;
         }
 
         .${autocompleteClasses.loading} {
-          padding: 0 ${spacings?.m}px 0 0;
+          padding: 0 ${spaces?.m}px 0 0;
         }
       }
     `;
@@ -152,15 +154,16 @@ export const StyledMenuInputSearch = styled(InputSearch, {
 
 export const StyledPaper = styled(Paper)`
   ${(props) => {
-    const spacings = getSpaces(props);
-    const borders = getBorders(props);
+    const spaces = getSpaces(props);
     const corners = getCorners(props);
     const shadows = getShadows(props);
+    const borders = getBorders(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
-      padding: ${spacings?.l}px ${spacings?.xxs}px ${spacings?.l}px ${spacings?.l}px ;
-      background-color: white;
-      border: ${borders?.gray[100]};
+      padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px ;
+      background-color: ${semanticComponentColors?.base?.surfacePrimary};
+      border: ${borders?.none};
       border-radius: ${corners?.m}px;
       box-shadow: ${shadows?.m};
       box-sizing: border-box;
@@ -171,10 +174,10 @@ export const StyledPaper = styled(Paper)`
 export const StyledMenuItemDetails = styled("div")`
   ${fontBodyXxs}
   ${(props) => {
-    const colors = getColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
-      color: ${colors?.gray[500]};
+      color: ${semanticTextColors?.base?.secondary};
       white-space: pre-wrap;
     `;
   }}
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/index.tsx
index 310c45606..d97e0fa1f 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/index.tsx
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/index.tsx
@@ -4,7 +4,7 @@ import {
   AutocompleteValue,
 } from "@mui/base";
 import { useCallback, useEffect, useState } from "react";
-import { AutocompleteMultiColumnOption } from "../..";
+import { AutocompleteMultiColumnOption } from "src/core/Autocomplete";
 import AutocompleteBase, {
   AutocompleteBaseProps,
   DefaultAutocompleteOption,
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
index b40bd0862..b33a66477 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
@@ -2,12 +2,13 @@ import { styled } from "@mui/material/styles";
 import { ReactElement } from "react";
 import {
   CommonThemeProps,
-  fontCapsXxxs,
-  getColors,
+  fontCapsXxxxs,
+  getBorders,
   getIconSizes,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-  getTypography,
-} from "../../../styles";
+} from "src/core/styles";
 
 export interface StyleProps extends CommonThemeProps {
   count?: number;
@@ -21,16 +22,16 @@ export const StyledColumn = styled("div")`
   ${(props: StyleProps) => {
     const { width = 280 } = props;
 
-    const colors = getColors(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
+    const borders = getBorders(props);
 
     return `
       position: relative;
       width: ${width}px;
 
       &:not(:last-child) {
-        border-right: solid 1px ${colors?.gray[200]};
-        margin-right: ${spacings?.m}px;
+        border-right: ${borders?.base?.divider};
+        margin-right: ${spaces?.m}px;
       }
 
       // (masoudmanson): This code hides the relation icon of the last column
@@ -44,15 +45,14 @@ export const StyledColumn = styled("div")`
 `;
 
 export const StyledColumnTitle = styled("p")`
-  ${fontCapsXxxs}
+  ${fontCapsXxxxs}
   ${(props: StyleProps) => {
-    const spacings = getSpaces(props);
-    const colors = getColors(props);
-    const typography = getTypography(props);
+    const spaces = getSpaces(props);
+    const semanticTextColors = getSemanticTextColors(props);
+
     return `
-      font-family: ${typography?.fontFamily};
-      color: ${colors?.gray[500]};
-      padding: 0 ${spacings?.s}px ${spacings?.xxs}px;
+      color: ${semanticTextColors?.base?.secondary};
+      padding: 0 ${spaces?.s}px ${spaces?.xxs}px;
       margin: 0;
     `;
   }}
@@ -60,19 +60,19 @@ export const StyledColumnTitle = styled("p")`
 
 export const StyledColumnIcon = styled("span")`
   ${(props: StyleProps) => {
-    const spacings = getSpaces(props);
-    const colors = getColors(props);
+    const spaces = getSpaces(props);
     const iconSizes = getIconSizes(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
-      background-color: white;
+      background-color: ${semanticComponentColors?.base?.surfacePrimary};
       position: absolute;
-      right: -${spacings?.xs}px;
+      right: -${spaces?.xs}px;
       top: -2px;
       padding-bottom: 2px;
 
       svg {
-        color: ${colors?.gray[500]};
+        color: ${semanticComponentColors?.base?.icon};
         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
index 9bfa1687c..f937f4bab 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
@@ -13,11 +13,11 @@ 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";
+} from "src/core/Autocomplete";
+import ButtonIcon from "src/core/ButtonIcon";
+import { InputSearchProps } from "src/core/InputSearch";
+import { StyledInputAdornment } from "src/core/InputSearch/style";
+import { SDSTheme } from "src/core/styles";
 import {
   AutocompleteBaseProps,
   DefaultAutocompleteOption,
@@ -207,10 +207,19 @@ const AutocompleteMultiColumn = <
                     sdsIconProps={{
                       sdsType: "iconButton",
                     }}
-                    icon="xMark"
+                    icon="XMarkCircle"
                     onClick={clearInput}
                   />
                 )}
+              </StyledInputAdornment>
+            ),
+            /**
+             * (thuang): Works with css caret-color: "transparent" to hide
+             * mobile keyboard
+             */
+            inputMode: "text",
+            startAdornment: (
+              <StyledInputAdornment position="start">
                 <ButtonIcon
                   aria-label="search-button"
                   sdsType="secondary"
@@ -218,15 +227,10 @@ const AutocompleteMultiColumn = <
                   sdsIconProps={{
                     sdsType: "interactive",
                   }}
-                  icon="search"
+                  icon="Search"
                 />
               </StyledInputAdornment>
             ),
-            /**
-             * (thuang): Works with css caret-color: "transparent" to hide
-             * mobile keyboard
-             */
-            inputMode: "text",
           }}
           {...InputBaseProps}
         />
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
index a260d5b4a..70f71916e 100644
--- a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
+++ b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
@@ -1,14 +1,15 @@
 import { autocompleteClasses, Paper, Popper } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactElement } from "react";
-import InputSearch from "../../../InputSearch";
+import InputSearch from "src/core/InputSearch";
 import {
   CommonThemeProps,
   getBorders,
   getCorners,
+  getSemanticComponentColors,
   getShadows,
   getSpaces,
-} from "../../../styles";
+} from "src/core/styles";
 
 export interface StyleProps extends CommonThemeProps {
   count?: number;
@@ -35,17 +36,18 @@ export const StyledPopper = styled(Popper, {
     !doNotForwardProps.includes(prop) || prop === "anchorEl",
 })`
   ${(props: StyleProps) => {
-    const borders = getBorders(props);
     const corners = getCorners(props);
     const shadows = getShadows(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
+    const borders = getBorders(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
-      background-color: white;
-      border: ${borders?.gray[100]};
+      background-color: ${semanticComponentColors?.base?.surfacePrimary};
+      border: ${borders?.none};
       border-radius: ${corners?.m}px;
       box-shadow: ${shadows?.m};
-      padding: ${spacings?.l}px ${spacings?.xxs}px ${spacings?.l}px ${spacings?.l}px;
+      padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px;
       box-sizing: border-box;
       z-index: 1400;
 
@@ -54,7 +56,7 @@ export const StyledPopper = styled(Popper, {
         transform: none !important;
       
         .MuiPaper-root .${autocompleteClasses.listbox} {
-          padding: 0 ${spacings?.m}px 0 0;
+          padding: 0 ${spaces?.m}px 0 0;
         }
       }
     `;
@@ -64,11 +66,17 @@ export const StyledPopper = styled(Popper, {
 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;
+  ${(props: StyleProps) => {
+    const shadows = getShadows(props);
+
+    return `
+      box-shadow: ${shadows?.none};
+      margin: 0;
+      border-radius: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    `;
+  }}
 `;
 
 export const StyledAutocompleteGroupWrapper = styled("div")`
diff --git a/packages/components/src/core/Autocomplete/index.stories.tsx b/packages/components/src/core/Autocomplete/index.stories.tsx
deleted file mode 100644
index 1b8c97331..000000000
--- a/packages/components/src/core/Autocomplete/index.stories.tsx
+++ /dev/null
@@ -1,699 +0,0 @@
-import {
-  AutocompleteChangeDetails,
-  AutocompleteChangeReason,
-  AutocompleteValue,
-} from "@mui/base";
-import { Args, Meta } from "@storybook/react";
-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 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 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 = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
-    search,
-    value: propValue,
-    keepSearchOnSelect,
-  } = props;
-
-  type DisableClearable = false;
-  type FreeSolo = false;
-
-  const isControlled = propValue !== undefined;
-  const [value, setValue] = useState<
-    SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  >(
-    (multiple ? [] : null) as SDSAutocompleteValue<
-      T,
-      Multiple,
-      DisableClearable,
-      FreeSolo
-    >
-  );
-
-  const [selection, setSelection] = useState<string[]>([]);
-
-  useEffect(() => {
-    if (isControlled) {
-      setValue(propValue);
-    }
-  }, [isControlled, propValue]);
-
-  useEffect(() => {
-    setSelection([]);
-    setValue(
-      (multiple ? [] : null) as SDSAutocompleteValue<
-        T,
-        Multiple,
-        DisableClearable,
-        FreeSolo
-      >
-    );
-  }, [multiple, options]);
-
-  return (
-    <>
-      <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 (
-                <TagFilter
-                  key={item}
-                  label={item}
-                  onDelete={() => handleTagDelete(item)}
-                  onClick={() => handleTagDelete(item)}
-                />
-              );
-            })
-          : null}
-      </div>
-    </>
-  );
-
-  // eslint-disable-next-line sonarjs/cognitive-complexity
-  function handleChange(
-    _: SyntheticEvent<Element, Event>,
-    newValue: SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  ) {
-    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 (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);
-      }
-    }
-  }
-
-  // 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);
-          }
-        });
-      }
-    } else {
-      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 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
-          >
-        );
-
-        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);
-    }
-  }
-};
-
-export default {
-  argTypes: {
-    groupBy: {
-      control: {
-        labels: ["No group by", "Group by section names"],
-        type: "select",
-      },
-      mapping: groupByOptions,
-      options: Object.keys(groupByOptions),
-    },
-    keepSearchOnSelect: {
-      control: { type: "boolean" },
-    },
-    label: {
-      control: { type: "text" },
-    },
-    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 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
-  // accessibility rules have been temporarily disabled in the tests
-  parameters: {
-    axe: {
-      disabledRules: [
-        "aria-input-field-name",
-        "aria-required-children",
-        "aria-required-parent",
-        "button-name",
-        "list",
-        "listitem",
-      ],
-    },
-  },
-  title: "Dropdowns/Autocomplete",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    groupBy: groupByOptions[1],
-    keepSearchOnSelect: true,
-    label: LABEL,
-    multiple: true,
-    search: true,
-  },
-  parameters: {
-    controls: {
-      exclude: ["search"],
-    },
-  },
-};
-
-// Single Column Autocomplete
-
-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(getInitialValue());
-  const [pendingValue, setPendingValue] = useState(getInitialValue());
-
-  const [selection, setSelection] = useState<string[]>([]);
-
-  useEffect(() => {
-    if (isControlled) {
-      setValue(propValue);
-    }
-  }, [isControlled, propValue]);
-
-  useEffect(() => {
-    setSelection([]);
-  }, [multiple]);
-
-  return (
-    <>
-      <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(
-    _event: React.SyntheticEvent,
-    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>,
-    _reason: AutocompleteChangeReason
-  ) {
-    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([]);
-    }
-  }
-
-  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,
-    multiple: true,
-    search: true,
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        "search",
-        "keepSearchOnSelect",
-        "multiple",
-        "blurOnSelect",
-        "clearOnBlur",
-        "groupBy",
-        "label",
-        "options",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => (
-    <TestDemo data-testid="autocomplete-base" {...args} />
-  ),
-};
diff --git a/packages/components/src/core/Banner/__storybook__/constants.tsx b/packages/components/src/core/Banner/__storybook__/constants.tsx
new file mode 100644
index 000000000..974c2d1ac
--- /dev/null
+++ b/packages/components/src/core/Banner/__storybook__/constants.tsx
@@ -0,0 +1,20 @@
+import CustomSdsIcon from "src/common/storybook/customSdsIcon";
+import CustomSvgIcon from "src/common/storybook/customSvgIcon";
+
+export const BANNER_EXCLUDED_CONTROLS = [
+  "dismissed",
+  "dismissible",
+  "icon",
+  "sdsIconProps",
+  "sdsType",
+  "textChild",
+];
+
+export const BANNER_TEXT = "Banner text lorem ipsum dolor mit";
+
+export const BANNER_ICON_OPTIONS = [
+  "CheckCircle",
+  "InfoCircle",
+  <CustomSdsIcon key="customSdsIcon" sdsSize="l" />,
+  <CustomSvgIcon key="customSvgIcon" />,
+];
diff --git a/packages/components/src/core/Banner/index.stories.tsx b/packages/components/src/core/Banner/__storybook__/index.stories.tsx
similarity index 54%
rename from packages/components/src/core/Banner/index.stories.tsx
rename to packages/components/src/core/Banner/__storybook__/index.stories.tsx
index 51b1c7fec..82c9255fd 100644
--- a/packages/components/src/core/Banner/index.stories.tsx
+++ b/packages/components/src/core/Banner/__storybook__/index.stories.tsx
@@ -1,26 +1,12 @@
-import { styled } from "@mui/material/styles";
 import { Args, Meta } from "@storybook/react";
-import RawBanner from "./index";
-import CustomSdsIcon from "src/common/customSdsIcon";
-import CustomSvgIcon from "src/common/customSvgIcon";
-
-const BANNER_TEXT = "Banner text lorem ipsum dolor mit";
-
-const iconOptions = [
-  "checkCircle",
-  "infoCircle",
-  <CustomSdsIcon key="customSdsIcon" sdsSize="l" />,
-  <CustomSvgIcon key="customSvgIcon" sx={{ height: 22, width: 22 }} />,
-];
-
-const Banner = (props: Args): JSX.Element => {
-  const { sdsType, textChild } = props;
-  return (
-    <RawBanner sdsType={sdsType} {...props}>
-      {textChild}
-    </RawBanner>
-  );
-};
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import {
+  BANNER_EXCLUDED_CONTROLS,
+  BANNER_ICON_OPTIONS,
+  BANNER_TEXT,
+} from "./constants";
+import { Banner } from "./stories/default";
+import { LivePreviewDemo } from "./stories/livePreview";
 
 export default {
   argTypes: {
@@ -40,8 +26,8 @@ export default {
         ],
         type: "select",
       },
-      mapping: iconOptions,
-      options: Object.keys(iconOptions),
+      mapping: BANNER_ICON_OPTIONS,
+      options: Object.keys(BANNER_ICON_OPTIONS),
     },
     sdsIconProps: {
       control: {
@@ -63,8 +49,9 @@ export default {
     axe: {
       disabledRules: ["landmark-no-duplicate-banner", "landmark-unique"],
     },
+    badges: [BADGE.STABLE],
   },
-  title: "Banner",
+  title: "Components/Banner",
 } as Meta<Args>;
 
 // Default
@@ -80,28 +67,6 @@ export const Default = {
 
 // Live Preview
 
-const StyledBanner = styled(RawBanner)`
-  background-color: Crimson;
-`;
-
-const LivePreviewDemo = (): JSX.Element => {
-  return (
-    <div style={{ padding: "24px", width: "600px" }}>
-      <RawBanner dismissible sdsType="primary">
-        {BANNER_TEXT}
-      </RawBanner>
-      <div style={{ height: "24px" }} />
-      <RawBanner dismissible sdsType="secondary">
-        {BANNER_TEXT}
-      </RawBanner>
-      <div style={{ height: "24px" }} />
-      <StyledBanner sdsType="primary">
-        Stylable. Should have Crimson background color
-      </StyledBanner>
-    </div>
-  );
-};
-
 export const LivePreview = {
   args: {
     dismissible: true,
@@ -113,7 +78,7 @@ export const LivePreview = {
       disabledRules: ["landmark-no-duplicate-banner", "landmark-unique"],
     },
     controls: {
-      exclude: ["dismissible", "sdsType", "textChild", "dismissed"],
+      exclude: BANNER_EXCLUDED_CONTROLS,
     },
     snapshot: {
       skip: true,
@@ -132,7 +97,7 @@ export const Test = {
   },
   parameters: {
     controls: {
-      exclude: ["dismissible", "sdsType", "textChild", "dismissed"],
+      exclude: BANNER_EXCLUDED_CONTROLS,
     },
     snapshot: {
       skip: true,
diff --git a/packages/components/src/core/Banner/__storybook__/stories/default.tsx b/packages/components/src/core/Banner/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..f60065783
--- /dev/null
+++ b/packages/components/src/core/Banner/__storybook__/stories/default.tsx
@@ -0,0 +1,11 @@
+import { Args } from "@storybook/react";
+import RawBanner from "src/core/Banner";
+
+export const Banner = (props: Args): JSX.Element => {
+  const { sdsType, textChild } = props;
+  return (
+    <RawBanner sdsType={sdsType} {...props}>
+      {textChild}
+    </RawBanner>
+  );
+};
diff --git a/packages/components/src/core/Banner/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Banner/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..7271cb66e
--- /dev/null
+++ b/packages/components/src/core/Banner/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,25 @@
+import { styled } from "@mui/material/styles";
+import RawBanner from "src/core/Banner";
+import { BANNER_TEXT } from "../constants";
+
+const StyledBanner = styled(RawBanner)`
+  background-color: Crimson;
+`;
+
+export const LivePreviewDemo = (): JSX.Element => {
+  return (
+    <div style={{ padding: "24px", width: "600px" }}>
+      <RawBanner dismissible sdsType="primary">
+        {BANNER_TEXT}
+      </RawBanner>
+      <div style={{ height: "24px" }} />
+      <RawBanner dismissible sdsType="secondary">
+        {BANNER_TEXT}
+      </RawBanner>
+      <div style={{ height: "24px" }} />
+      <StyledBanner sdsType="primary">
+        Stylable. Should have Crimson background color
+      </StyledBanner>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/Banner/Banner.namespace-test.tsx b/packages/components/src/core/Banner/__tests__/Banner.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Banner/Banner.namespace-test.tsx
rename to packages/components/src/core/Banner/__tests__/Banner.namespace-test.tsx
diff --git a/packages/components/src/core/Banner/__snapshots__/banner.test.tsx.snap b/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
similarity index 83%
rename from packages/components/src/core/Banner/__snapshots__/banner.test.tsx.snap
rename to packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
index 653895ddc..1e06e19da 100644
--- a/packages/components/src/core/Banner/__snapshots__/banner.test.tsx.snap
+++ b/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Banner /> Default story renders snapshot 1`] = `
 <div
-  class="css-1v66a8t"
+  class="css-1hsqpe0"
   role="banner"
 >
   <div
@@ -21,7 +21,9 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
           data-testid="IconInfoCircleLarge"
           fillcontrast="white"
           focusable="false"
-          viewBox="0 0 22 22"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
         />
       </div>
     </div>
@@ -29,8 +31,8 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
   </div>
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-co4rz1-MuiButtonBase-root-MuiIconButton-root"
-    icon="xMark"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-x8omeu-MuiButtonBase-root-MuiIconButton-root"
+    icon="XMark"
     tabindex="0"
     type="button"
   >
@@ -44,7 +46,9 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
         data-testid="IconXMarkSmall"
         fillcontrast="white"
         focusable="false"
-        viewBox="0 0 14 14"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
       />
     </div>
     <span
diff --git a/packages/components/src/core/Banner/banner.test.tsx b/packages/components/src/core/Banner/__tests__/banner.test.tsx
similarity index 96%
rename from packages/components/src/core/Banner/banner.test.tsx
rename to packages/components/src/core/Banner/__tests__/banner.test.tsx
index 92a437115..876e9dcda 100644
--- a/packages/components/src/core/Banner/banner.test.tsx
+++ b/packages/components/src/core/Banner/__tests__/banner.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/Banner/index.tsx b/packages/components/src/core/Banner/index.tsx
index 4079c2776..628fa82f0 100644
--- a/packages/components/src/core/Banner/index.tsx
+++ b/packages/components/src/core/Banner/index.tsx
@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef, useState } from "react";
-import { ButtonIconSizeToTypes } from "../ButtonIcon";
-import Icon, { IconNameToSizes, IconProps } from "../Icon";
+import { ButtonIconSizeToTypes } from "src/core/ButtonIcon";
+import Icon, { IconNameToSizes, IconProps } from "src/core/Icon";
 import {
   BannerExtraProps,
   Centered,
@@ -60,7 +60,7 @@ const Banner = forwardRef(function Banner<
     } else {
       return (
         <Icon
-          sdsIcon={"infoCircle"}
+          sdsIcon="InfoCircle"
           sdsSize="l"
           sdsType="static"
           {...sdsIconProps}
@@ -82,7 +82,7 @@ const Banner = forwardRef(function Banner<
           sdsType="tertiary"
           sdsSize="small"
           onClick={handleClose}
-          icon={"xMark"}
+          icon="XMark"
         />
       )}
     </StyledBanner>
diff --git a/packages/components/src/core/Banner/style.ts b/packages/components/src/core/Banner/style.ts
index 8d417263e..f58c39f91 100644
--- a/packages/components/src/core/Banner/style.ts
+++ b/packages/components/src/core/Banner/style.ts
@@ -1,20 +1,21 @@
 import { styled } from "@mui/material/styles";
-import ButtonIcon from "../ButtonIcon";
+import ButtonIcon from "src/core/ButtonIcon";
 import {
   ButtonIconExtraProps,
   ButtonIconSizeToTypes,
-} from "../ButtonIcon/style";
+} from "src/core/ButtonIcon/style";
 import {
   CommonThemeProps,
   fontBodyS,
   getColors,
   getIconSizes,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface BannerExtraProps<
-  ButtonIconSize extends keyof ButtonIconSizeToTypes
+  ButtonIconSize extends keyof ButtonIconSizeToTypes,
 > extends CommonThemeProps {
   sdsType: ButtonIconSizeToTypes[ButtonIconSize];
 }
@@ -48,28 +49,20 @@ export const StyledButtonIcon = styled(ButtonIcon, {
   shouldForwardProp: (prop: string) =>
     !doNotForwardPropsButtonIcon.includes(prop),
 })`
-  ${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-    props: ButtonIconType<ButtonIconSize>
-  ) => {
-    const spaces = getSpaces(props);
-
-    return `
-      flex: 0 0 auto;
-      margin: ${spaces?.l}px;
-    `;
-  }}
+  flex: 0 0 auto;
 
   ${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
     props: ButtonIconType<ButtonIconSize>
   ) => {
     const { bannerType } = props;
+
     const colors = getColors(props);
 
     if (bannerType !== "primary") return "";
 
     return `
       svg:hover {
-        fill: ${colors?.primary[300]};
+        fill: ${colors?.blue[300]};
       }
     `;
   }}
@@ -77,25 +70,19 @@ export const StyledButtonIcon = styled(ButtonIcon, {
 
 export const Text = styled("div")`
   ${fontBodyS}
-  ${(props) => {
-    const typography = getTypography(props);
-
-    return `
-      font-family: ${typography?.fontFamily};
-    `;
-  }}
 `;
 
 const primary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   props: BannerExtraProps<ButtonIconSize>
 ) => {
-  const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return `
-    background-color: ${colors?.info[400]};
-    color: white;
+    background-color: ${semanticComponentColors?.accent?.fill};
+    color: ${semanticTextColors?.base?.onFill};
     svg {
-      fill: white;
+      fill: ${semanticComponentColors?.accent?.fillOnFill};
     }
   `;
 };
@@ -103,11 +90,12 @@ const primary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
 const secondary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   props: BannerExtraProps<ButtonIconSize>
 ) => {
-  const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return `
-    background-color: ${colors?.info[100]};
-    color: black;
+    background-color: ${semanticComponentColors?.accent?.surface};
+    color: ${semanticTextColors?.base?.primary};
   `;
 };
 
@@ -116,23 +104,22 @@ const doNotForwardProps = ["sdsType", "textChild"];
 export const StyledBanner = styled("div", {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
-  display: flex;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-
   ${fontBodyS}
 
   ${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
     props: BannerExtraProps<ButtonIconSize>
   ) => {
     const { sdsType } = props;
-    const typography = getTypography(props);
+
+    const spaces = getSpaces(props);
 
     return `
+      display: flex;
+      align-items: center;
+      padding: ${spaces?.s}px ${spaces?.l}px;
+  
       ${sdsType === "primary" ? primary(props) : ""}
       ${sdsType === "secondary" ? secondary(props) : ""}
-      font-family: ${typography?.fontFamily};
     `;
   }}
 `;
diff --git a/packages/components/src/core/Bases/Borders/__storybook__/constants.tsx b/packages/components/src/core/Bases/Borders/__storybook__/constants.tsx
new file mode 100644
index 000000000..be6bd3b11
--- /dev/null
+++ b/packages/components/src/core/Bases/Borders/__storybook__/constants.tsx
@@ -0,0 +1,27 @@
+export const BORDER_USAGE: Record<string, string> = {
+  "$sds-border-accent-300": "-",
+  "$sds-border-accent-400":
+    "Secondary buttons, active states of input containers",
+  "$sds-border-accent-500": "Hover rounded and square buttons",
+  "$sds-border-accent-600": "Active rounded and square buttons",
+  "$sds-border-accent-dashed-400":
+    "Hover states for containers with dashed borders",
+  "$sds-border-base-100": "Modals and dropdown Menus",
+  "$sds-border-base-200": "-",
+  "$sds-border-base-300":
+    "Disabled or non-interactive containers (buttons/inputs/tooltips)",
+  "$sds-border-base-400": "Input borders (default states)",
+  "$sds-border-base-500": "-",
+  "$sds-border-base-black": "Input and dropdown hover states",
+  "$sds-border-base-dashed-400": "File upload/drag and drop containers",
+  "$sds-border-beta-400": "-",
+  "$sds-border-info-400": "-",
+  "$sds-border-link-dashed":
+    "Default bottom-border for Text Links; border color is inherited from the color used in the paragraph it is part of.",
+  "$sds-border-link-solid":
+    "Hover and Pressed bottom-border for Text Links; border color is inherited from the color used in the paragraph it is part of.",
+  "$sds-border-negative-400": "Error state on inputs.",
+  "$sds-border-none": "No borders",
+  "$sds-border-notice-400": "Warning state on inputs.",
+  "$sds-border-positive-400": "Success state on inputs.",
+};
diff --git a/packages/components/src/core/Bases/Borders/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/Borders/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..f1a948a42
--- /dev/null
+++ b/packages/components/src/core/Bases/Borders/__storybook__/index.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "src/common/storybook/storybookBadges";
+import { StyledBordersWrapper } from "./style";
+import { Template } from "./stories/default";
+
+export default {
+  parameters: {
+    badges: [BADGE.WIP],
+  },
+  title: "Bases/Borders",
+} as Meta;
+
+// Borders
+
+export const Default = {
+  render: () => (
+    <>
+      <StyledBordersWrapper>
+        <Template />
+      </StyledBordersWrapper>
+    </>
+  ),
+};
diff --git a/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..fd837fbc4
--- /dev/null
+++ b/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx
@@ -0,0 +1,109 @@
+import { useTheme } from "@mui/material";
+import CellComponent from "src/core/CellComponent";
+import CellHeader from "src/core/CellHeader";
+import Table from "src/core/Table";
+import TableHeader from "src/core/TableHeader";
+import TableRow from "src/core/TableRow";
+import { Borders, getBorders } from "src/core/styles";
+import { StyledBorderBox } from "../style";
+import { StyledVariable } from "src/core/Bases/style";
+import { copyToClipboard } from "src/core/Bases/utils";
+import CellBasic from "src/core/CellBasic";
+import { BORDER_USAGE } from "../constants";
+
+export const Template = () => {
+  const theme = useTheme();
+  const borders = getBorders({ theme });
+
+  const RenderTableRow = (
+    border: string,
+    parentKey: string | null,
+    currentKey: string
+  ) => {
+    const sassVariable = parentKey
+      ? "$sds-border-" + parentKey + "-" + currentKey
+      : "$sds-border-" + currentKey;
+
+    const cssVariable = parentKey
+      ? "--sds-border-" + parentKey + "-" + currentKey
+      : "--sds-border-" + currentKey;
+
+    return (
+      <TableRow key={cssVariable}>
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledBorderBox border={border} />
+        </CellComponent>
+
+        <CellComponent verticalAlign="center">
+          <StyledVariable
+            onClick={() => copyToClipboard(sassVariable)}
+            type="sass"
+          >
+            {sassVariable}
+          </StyledVariable>
+          <StyledVariable
+            onClick={() => copyToClipboard(cssVariable)}
+            type="css"
+          >
+            {cssVariable}
+          </StyledVariable>
+        </CellComponent>
+
+        <CellComponent
+          verticalAlign="center"
+          onClick={() => copyToClipboard(`border: ${border};`)}
+        >
+          <StyledVariable>border: {border};</StyledVariable>
+        </CellComponent>
+
+        <CellBasic
+          verticalAlign="center"
+          primaryText={BORDER_USAGE[sassVariable]}
+          shouldShowTooltipOnHover={false}
+        />
+      </TableRow>
+    );
+  };
+
+  if (borders) {
+    const { none, link, base, ...rest } = borders;
+
+    const generateTableBodyContent = (
+      border: Borders,
+      parentKey: string | null = null
+    ): JSX.Element[] => {
+      return Object.entries(border).flatMap(([key, value]) => {
+        const currentKey = parentKey ? `${parentKey}-${key}` : key;
+
+        if (typeof value === "object") {
+          return generateTableBodyContent(value, currentKey);
+        } else {
+          return RenderTableRow(value, parentKey, key);
+        }
+      });
+    };
+
+    const TableBodyContent = generateTableBodyContent({
+      none,
+      // eslint-disable-next-line sort-keys, prettier/prettier
+      link,
+      // eslint-disable-next-line sort-keys, prettier/prettier
+      base,
+      ...rest,
+    });
+
+    return (
+      <Table>
+        <TableHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Example
+          </CellHeader>
+          <CellHeader hideSortIcon>Variables</CellHeader>
+          <CellHeader hideSortIcon>Value</CellHeader>
+          <CellHeader hideSortIcon>Usage</CellHeader>
+        </TableHeader>
+        <tbody>{TableBodyContent}</tbody>
+      </Table>
+    );
+  }
+};
diff --git a/packages/components/src/core/Bases/Borders/__storybook__/style.ts b/packages/components/src/core/Bases/Borders/__storybook__/style.ts
new file mode 100644
index 000000000..65ae5e5f6
--- /dev/null
+++ b/packages/components/src/core/Bases/Borders/__storybook__/style.ts
@@ -0,0 +1,42 @@
+import { styled } from "@mui/material";
+import { CommonThemeProps, getCorners } from "src/core/styles";
+
+const BORDER_BOX_BORDER_WIDTH_PX = 1,
+  BORDER_BOX_BOX_SIZE_PX = 60;
+
+export const StyledBordersWrapper = styled("div")`
+  max-width: 100%;
+`;
+
+interface IStyledCornerBoxProps extends CommonThemeProps {
+  border: string;
+}
+
+export const StyledBorderBox = styled("div")`
+  ${(props: IStyledCornerBoxProps) => {
+    const { border } = props;
+
+    const corners = getCorners(props);
+
+    return `
+      position: relative;
+      margin-left: 10px;
+      width: ${BORDER_BOX_BOX_SIZE_PX}px;
+      height: ${BORDER_BOX_BOX_SIZE_PX}px;
+      background-color: transparent;
+      border-radius: ${BORDER_BOX_BORDER_WIDTH_PX}px;
+      border: ${border};
+      border-radius: ${corners?.l}px;
+
+      &:hover {
+        animation: pulse 3s infinite;
+      }
+
+      @keyframes pulse {
+        50% {
+          border-radius: 0;
+        }
+      }
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/color.tsx b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/color.tsx
new file mode 100644
index 000000000..dea44647a
--- /dev/null
+++ b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/color.tsx
@@ -0,0 +1,63 @@
+import {
+  StyledColorWrapper,
+  StyledColorCode,
+  StyledColorVariable,
+  StyledColorTitle,
+} from "./style";
+import {
+  convertToKebabCase,
+  copyToClipboard,
+  pickTextColorBasedOnBgColor,
+} from "src/core/Bases/utils";
+
+interface ColorComponentProps {
+  group: string;
+  value: string;
+  shade?: string;
+  prefix?: string;
+  semanticName?: string;
+}
+
+const Color = (props: ColorComponentProps) => {
+  const { group, value, shade, prefix = "$", semanticName } = props;
+
+  const sassVariable = shade
+    ? "$" + prefix + "-" + group + "-" + convertToKebabCase(shade)
+    : "$" + prefix + "-" + group;
+
+  const cssVariable = shade
+    ? "--" + prefix + "-" + group + "-" + convertToKebabCase(shade)
+    : "--" + prefix + "-" + group;
+
+  const title = shade || group;
+
+  return (
+    <StyledColorWrapper
+      key={group + shade}
+      backgroundColor={String(value)}
+      textColor={pickTextColorBasedOnBgColor(value)}
+    >
+      <div>
+        <StyledColorTitle className="color-title">
+          {title.charAt(0).toUpperCase() + title.slice(1)}
+        </StyledColorTitle>
+
+        <StyledColorVariable onClick={() => copyToClipboard(sassVariable)}>
+          {sassVariable}
+        </StyledColorVariable>
+      </div>
+
+      <div>
+        <StyledColorCode onClick={() => copyToClipboard(value)}>
+          {String(semanticName)}
+        </StyledColorCode>
+
+        <StyledColorVariable onClick={() => copyToClipboard(cssVariable)}>
+          {cssVariable}
+        </StyledColorVariable>
+      </div>
+    </StyledColorWrapper>
+  );
+};
+
+export default Color;
diff --git a/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/index.tsx b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/index.tsx
new file mode 100644
index 000000000..bc2910030
--- /dev/null
+++ b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/index.tsx
@@ -0,0 +1,73 @@
+import { Color as ColorType, getColors } from "src/core/styles";
+import Color from "./color";
+import { StyledColorGroupTitle, StyledColorsWrapper } from "./style";
+import { useTheme } from "@mui/material";
+import { NestedObject, flattenObj } from "./util";
+
+interface SemanticColorsProps {
+  colors: object;
+  type?: "semantic" | "primitive";
+  prefix?: string;
+}
+
+const Colors = (props: SemanticColorsProps): JSX.Element => {
+  const { colors, type = "semantic", prefix } = props;
+
+  const theme = useTheme();
+  const primitiveColors = getColors({ theme });
+
+  const flattenColors = primitiveColors
+    ? flattenObj(primitiveColors as unknown as NestedObject, null)
+    : {};
+
+  const renderColorGroups = (colorGroups: object) => {
+    if (colorGroups) {
+      return Object.entries(colorGroups).map(([key, value]) => (
+        <div key={key}>
+          <StyledColorGroupTitle>
+            {key.charAt(0).toLocaleUpperCase() + key.slice(1)}
+          </StyledColorGroupTitle>
+          <div>{renderColors(value, key)}</div>
+        </div>
+      ));
+    }
+  };
+
+  const renderColors = (sdsColors: ColorType, groupName: string) => {
+    if (typeof sdsColors === "string") {
+      return (
+        <Color
+          group={groupName}
+          semanticName={
+            type === "semantic" ? flattenColors[sdsColors] : sdsColors
+          }
+          value={sdsColors}
+          prefix={prefix}
+        />
+      );
+    } else {
+      return Object.entries(sdsColors).map(([k, v]) => {
+        if (v === "transparent") return;
+
+        return (
+          <Color
+            key={k}
+            group={groupName}
+            value={v}
+            semanticName={type === "semantic" ? flattenColors[v] : v}
+            shade={k}
+            prefix={prefix}
+          />
+        );
+      });
+    }
+  };
+
+  return (
+    <StyledColorsWrapper type={type}>
+      {colors && renderColorGroups(colors)}
+    </StyledColorsWrapper>
+  );
+};
+
+export default Colors;
diff --git a/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/style.ts b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/style.ts
new file mode 100644
index 000000000..966a75fa7
--- /dev/null
+++ b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/style.ts
@@ -0,0 +1,129 @@
+import { styled } from "@mui/material";
+import {
+  CommonThemeProps,
+  fontBodyXs,
+  fontCodeXs,
+  fontHeaderL,
+  getBorders,
+  getCorners,
+  getFontWeights,
+  getSpaces,
+} from "src/core/styles";
+
+interface IStyledDivProps extends CommonThemeProps {
+  backgroundColor: string;
+  textColor: string;
+}
+
+export const StyledColorWrapper = styled("div")`
+  ${fontBodyXs}
+
+  ${(props: IStyledDivProps) => {
+    const { backgroundColor, textColor } = props;
+
+    const spaces = getSpaces(props);
+    const corners = getCorners(props);
+    const borders = getBorders(props);
+    const fontWeights = getFontWeights(props);
+
+    return `
+      background-color: ${backgroundColor};
+      color: ${textColor};
+      padding: ${spaces?.xs}px ${spaces?.s}px;
+      margin: ${spaces?.xxxs}px 0;
+      border-radius: ${corners?.m}px;
+      border: solid 1px ${backgroundColor};
+      transition: transform 0.2s ease-in-out;
+
+      & > div {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      &:hover {
+        border: ${borders?.base?.hover};
+        z-index: 10;
+
+        .color-title {
+          font-weight: ${fontWeights?.semibold};
+        }
+      }
+    `;
+  }}
+`;
+
+export const StyledColorGroupTitle = styled("h3")`
+  ${fontHeaderL}
+
+  ${(props) => {
+    const spaces = getSpaces(props);
+    return `
+      margin-bottom: ${spaces?.s}px;
+    `;
+  }}
+`;
+
+export const StyledColorCode = styled("span")`
+  ${fontCodeXs}
+
+  ${(props) => {
+    const fontWeights = getFontWeights(props);
+
+    return `
+      cursor: pointer;
+      font-size: 12px;
+
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+      }
+    `;
+  }}
+`;
+
+export const StyledColorTitle = styled("span")`
+  ${fontBodyXs}
+`;
+
+export const StyledColorVariable = styled("span")`
+  ${fontCodeXs}
+
+  ${(props) => {
+    const fontWeights = getFontWeights(props);
+
+    return `
+      cursor: pointer;
+      font-size: 10px;
+
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+      }
+    `;
+  }}
+`;
+
+interface IStyledColorsWrapperProps extends CommonThemeProps {
+  type: "primitive" | "semantic";
+}
+
+export const StyledColorsWrapper = styled("div")`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(4, auto);
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+
+  ${(props: IStyledColorsWrapperProps) => {
+    const { type } = props;
+
+    return `
+      ${
+        type === "primitive" &&
+        `
+          & > div:nth-of-type(1) {
+            grid-area: 1 / 1 / 2 / 3;
+          }
+        `
+      }
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/util.ts b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/util.ts
new file mode 100644
index 000000000..c6598aaef
--- /dev/null
+++ b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/util.ts
@@ -0,0 +1,19 @@
+export type NestedObject = {
+  [key: string]: NestedObject | string;
+};
+
+export function flattenObj(
+  obj: NestedObject,
+  parent: string | null = null,
+  res: { [key: string]: string } = {}
+) {
+  for (const key in obj) {
+    const propName = parent ? `${parent}-${key}` : key;
+    if (typeof obj[key] === "object") {
+      flattenObj(obj[key] as NestedObject, propName, res);
+    } else {
+      res[obj[key] as string] = propName;
+    }
+  }
+  return res;
+}
diff --git a/packages/components/src/core/Bases/Colors/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/Colors/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..1477c5aaf
--- /dev/null
+++ b/packages/components/src/core/Bases/Colors/__storybook__/index.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "src/common/storybook/storybookBadges";
+import { PrimitiveColorsTemplate } from "./stories/primitiveColors";
+import { SemanticComponentColorsTemplate } from "./stories/semanticComponentColors";
+import { SemanticTextColorsTemplate } from "./stories/semanticTextColors";
+
+export default {
+  parameters: {
+    axe: {
+      disabledRules: ["color-contrast"],
+    },
+    badges: [BADGE.WIP],
+  },
+  title: "Bases/Colors",
+} as Meta;
+
+// Primitive
+
+export const PrimitiveColors = {
+  render: () => <PrimitiveColorsTemplate />,
+};
+
+// Semantic Component Colors
+
+export const SemanticComponentColors = {
+  render: () => <SemanticComponentColorsTemplate />,
+};
+
+// Semantic Text Colors
+
+export const SemanticTextColors = {
+  render: () => <SemanticTextColorsTemplate />,
+};
diff --git a/packages/components/src/core/Bases/Colors/__storybook__/stories/primitiveColors.tsx b/packages/components/src/core/Bases/Colors/__storybook__/stories/primitiveColors.tsx
new file mode 100644
index 000000000..d348c4d41
--- /dev/null
+++ b/packages/components/src/core/Bases/Colors/__storybook__/stories/primitiveColors.tsx
@@ -0,0 +1,22 @@
+import { useTheme } from "@mui/material";
+import { getColors } from "src/core/styles";
+import Colors from "../components/Colors";
+
+export const PrimitiveColorsTemplate = () => {
+  const theme = useTheme();
+  const colors = getColors({ theme });
+
+  if (colors) {
+    // Prioritizing the common color to be passed as the initial color to
+    // the SemanticColors component.
+    const { common, ...rest } = colors;
+
+    return (
+      <Colors
+        colors={{ common, ...rest }}
+        type="primitive"
+        prefix="sds-color-primitive"
+      />
+    );
+  }
+};
diff --git a/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticComponentColors.tsx b/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticComponentColors.tsx
new file mode 100644
index 000000000..a7ebfec9d
--- /dev/null
+++ b/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticComponentColors.tsx
@@ -0,0 +1,17 @@
+import { useTheme } from "@mui/material";
+import { getSemanticComponentColors } from "src/core/styles";
+import Colors from "../components/Colors";
+
+export const SemanticComponentColorsTemplate = () => {
+  const theme = useTheme();
+  const semanticComponentColors = getSemanticComponentColors({ theme });
+
+  return (
+    semanticComponentColors && (
+      <Colors
+        colors={semanticComponentColors}
+        prefix="sds-color-semantic-component"
+      />
+    )
+  );
+};
diff --git a/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticTextColors.tsx b/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticTextColors.tsx
new file mode 100644
index 000000000..55f7c013c
--- /dev/null
+++ b/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticTextColors.tsx
@@ -0,0 +1,14 @@
+import { useTheme } from "@mui/material";
+import { getSemanticTextColors } from "src/core/styles";
+import Colors from "../components/Colors";
+
+export const SemanticTextColorsTemplate = () => {
+  const theme = useTheme();
+  const semanticTextColors = getSemanticTextColors({ theme });
+
+  return (
+    semanticTextColors && (
+      <Colors colors={semanticTextColors} prefix="$sds-color-semantic-text" />
+    )
+  );
+};
diff --git a/packages/components/src/core/Bases/Corners/__storybook__/constants.tsx b/packages/components/src/core/Bases/Corners/__storybook__/constants.tsx
new file mode 100644
index 000000000..de0fbee85
--- /dev/null
+++ b/packages/components/src/core/Bases/Corners/__storybook__/constants.tsx
@@ -0,0 +1,15 @@
+import { Corners } from "src/core/styles";
+
+export const CORNERS_USAGE: Record<keyof Corners, string> = {
+  l: "Rounded elements (buttons and inputs)",
+  m: "Standard, default radius for corners in UI elements (square buttons, form inputs, modals, tooltips, tags, etc.)",
+  none: "Corners on backgrounds for hovered dropdown menus and tables.",
+  s: "Corners on elements that are smaller than 20px × 20px.",
+};
+
+export const CORNERS_TITLE: Record<keyof Corners, string> = {
+  l: "Large Corner",
+  m: "Medium Corner",
+  none: "No Set Corner",
+  s: "Small Corner",
+};
diff --git a/packages/components/src/core/Bases/Corners/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/Corners/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..4fddc0902
--- /dev/null
+++ b/packages/components/src/core/Bases/Corners/__storybook__/index.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "src/common/storybook/storybookBadges";
+import { StyledCornersWrapper } from "./style";
+import { Template } from "./stories/default";
+
+export default {
+  parameters: {
+    badges: [BADGE.WIP],
+  },
+  title: "Bases/Corners",
+} as Meta;
+
+// Corners
+
+export const Default = {
+  render: () => (
+    <>
+      <StyledCornersWrapper>
+        <Template />
+      </StyledCornersWrapper>
+    </>
+  ),
+};
diff --git a/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..d7a9feb8f
--- /dev/null
+++ b/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx
@@ -0,0 +1,86 @@
+import Table from "src/core/Table";
+import TableHeader from "src/core/TableHeader";
+import CellHeader from "src/core/CellHeader";
+import TableRow from "src/core/TableRow";
+import CellComponent from "src/core/CellComponent";
+import CellBasic from "src/core/CellBasic";
+import { copyToClipboard } from "src/core/Bases/utils";
+import { StyledVariable } from "src/core/Bases/style";
+import { CORNERS_TITLE, CORNERS_USAGE } from "../constants";
+import { useTheme } from "@mui/material";
+import { Corners, getCorners } from "src/core/styles";
+import { StyledCornerBox, StyledCornerVariable } from "../style";
+
+export const Template = () => {
+  const theme = useTheme();
+  const corners = getCorners({ theme });
+
+  const RenderTableRow = (size: number, name: keyof Corners) => {
+    const sassVariable = "$sds-corner-" + name;
+    const cssVariable = "--sds-corner-" + name;
+
+    return (
+      <TableRow key={name}>
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledCornerBox size={size} />
+        </CellComponent>
+
+        <CellBasic
+          primaryText={CORNERS_TITLE[name]}
+          verticalAlign="center"
+          shouldShowTooltipOnHover={false}
+        />
+
+        <CellComponent verticalAlign="center">
+          <StyledVariable
+            onClick={() => copyToClipboard(sassVariable)}
+            type="sass"
+          >
+            {sassVariable}
+          </StyledVariable>
+          <StyledVariable
+            onClick={() => copyToClipboard(cssVariable)}
+            type="css"
+          >
+            {cssVariable}
+          </StyledVariable>
+        </CellComponent>
+
+        <CellComponent verticalAlign="center">
+          <StyledCornerVariable>{`${size}px`}</StyledCornerVariable>
+        </CellComponent>
+
+        <CellBasic
+          verticalAlign="center"
+          primaryText={CORNERS_USAGE[name]}
+          shouldShowTooltipOnHover={false}
+        />
+      </TableRow>
+    );
+  };
+
+  if (corners) {
+    const TableBodyContent = Object.entries(corners)
+      .sort((a, b) => b[1] - a[1])
+      .map(([key, value]) => RenderTableRow(value, key as keyof Corners));
+
+    return (
+      <Table>
+        <TableHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Example
+          </CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Corner Type
+          </CellHeader>
+          <CellHeader hideSortIcon>Variables</CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Value
+          </CellHeader>
+          <CellHeader hideSortIcon>Usage</CellHeader>
+        </TableHeader>
+        <tbody>{TableBodyContent}</tbody>
+      </Table>
+    );
+  }
+};
diff --git a/packages/components/src/core/Bases/Corners/__storybook__/style.ts b/packages/components/src/core/Bases/Corners/__storybook__/style.ts
new file mode 100644
index 000000000..fc97fe015
--- /dev/null
+++ b/packages/components/src/core/Bases/Corners/__storybook__/style.ts
@@ -0,0 +1,151 @@
+import { styled } from "@mui/material";
+import {
+  getColors,
+  CommonThemeProps,
+  fontCodeXs,
+  getFontWeights,
+} from "src/core/styles";
+
+export const StyledCornersWrapper = styled("div")`
+  max-width: 100%;
+`;
+
+interface IStyledCornerBoxProps extends CommonThemeProps {
+  size: number;
+}
+
+export const StyledCornerBox = styled("div")`
+  ${(props: IStyledCornerBoxProps) => {
+    const { size } = props;
+
+    const colors = getColors(props);
+    const BorderWidth = 2;
+    const BoxSize = 60;
+
+    return `
+      position: relative;
+      margin-left: 10px;
+      width: ${BoxSize}px;
+      height: ${BoxSize}px;
+      background-color: transparent;
+      border-radius: ${size + BorderWidth}px;
+
+      background-position:  0 0, 0 0, 100% 0, 0 100%;
+      background-size: 10px 100%, 100% 10px, 10px 100% , 100% 10px;
+      background-repeat: no-repeat;
+      background-image:
+        none, // left
+        linear-gradient(90deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // top
+        linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // right
+        none // bottom
+      ;
+
+      &::after {
+        content: "";
+        position: absolute;
+        background-color: ${colors?.gray[200]};
+        width: ${BoxSize - 2 * BorderWidth}px;
+        height: ${BoxSize - 2 * BorderWidth}px;
+        top: ${BorderWidth}px;
+        left: ${BorderWidth}px;
+        border-radius: ${size}px;
+      }
+
+      &:hover {
+        animation: boxBorderAnimation 2s infinite linear;
+      }
+
+      @keyframes boxBorderAnimation {
+        0% {
+          background-image:
+            none, // left
+            linear-gradient(90deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // top
+            linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // right
+            none // bottom
+          ;
+        }
+        12.5% {
+          background-image:
+            none, // left
+            none, // top
+            linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%, transparent 100%), // right
+            none // bottom
+          ;
+        }
+        25% {
+          background-image:
+            none, // left
+            none, // top
+            linear-gradient(180deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // right
+            linear-gradient(270deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%) // bottom
+          ;
+        }
+        37.5% {
+          background-image:
+            none, // left
+            none, // top
+            none, // right
+            linear-gradient(270deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%, transparent 100%) // bottom
+          ;
+        }
+        50% {
+          background-image:
+            linear-gradient(0deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // left
+            none, // top
+            none, // right
+            linear-gradient(270deg, transparent, transparent 50%, ${colors?.blue[400]} 50%) // bottom
+          ;
+        }
+        62.5% {
+          background-image:
+            linear-gradient(0deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%), // left
+            none, // top
+            none, // right
+            none // bottom
+          ;
+        }
+        75% {
+          background-image:
+            linear-gradient(0deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // left
+            linear-gradient(90deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // top
+            none, // right
+            none // bottom
+          ;
+        }
+        87.5% {
+          background-image:
+          none, // left
+          linear-gradient(90deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%), // top
+          none, // right
+          none // bottom
+        ;
+        }
+        100% {
+          background-image:
+            none, // left
+            linear-gradient(90deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // top
+            linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // right
+            none // bottom
+          ;
+        }
+      }
+    `;
+  }}
+`;
+
+export const StyledCornerVariable = styled("p")`
+  ${fontCodeXs}
+
+  ${(props) => {
+    const fontWeights = getFontWeights(props);
+
+    return `
+      margin: 0;
+      cursor: pointer;
+
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+      }
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Bases/DropShadows/__storybook__/constants.tsx b/packages/components/src/core/Bases/DropShadows/__storybook__/constants.tsx
new file mode 100644
index 000000000..08add2833
--- /dev/null
+++ b/packages/components/src/core/Bases/DropShadows/__storybook__/constants.tsx
@@ -0,0 +1,13 @@
+export const DROP_SHADOWS_USAGE: Record<string, string> = {
+  l: "Containers that layer on top of all other page content (bottom panels, side panels, modals, etc.)",
+  m: "Containers that are part of a page's content, but appear on user input, layering over primary content (dropdown menus, tooltips, etc.)",
+  none: "No shadows.",
+  s: "Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms.",
+};
+
+export const DROP_SHADOWS_TITLE: Record<string, string> = {
+  l: "Large Shadow",
+  m: "Medium Shadow",
+  none: "No Shadow",
+  s: "Small Shadow",
+};
diff --git a/packages/components/src/core/Bases/DropShadows/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/DropShadows/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..3be1d1f93
--- /dev/null
+++ b/packages/components/src/core/Bases/DropShadows/__storybook__/index.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "src/common/storybook/storybookBadges";
+import { StyledShadowsWrapper } from "./style";
+import { Template } from "./stories/default";
+
+export default {
+  parameters: {
+    badges: [BADGE.WIP],
+  },
+  title: "Bases/Drop Shadows",
+} as Meta;
+
+// Drop Shadows
+
+export const Default = {
+  render: () => (
+    <>
+      <StyledShadowsWrapper>
+        <Template />
+      </StyledShadowsWrapper>
+    </>
+  ),
+};
diff --git a/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..88d0819ff
--- /dev/null
+++ b/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx
@@ -0,0 +1,88 @@
+import { useTheme } from "@mui/material";
+import { getShadows } from "src/core/styles";
+import { StyledShadowBox, StyledShadowVariable } from "../style";
+import Table from "src/core/Table";
+import TableHeader from "src/core/TableHeader";
+import CellHeader from "src/core/CellHeader";
+import TableRow from "src/core/TableRow";
+import CellComponent from "src/core/CellComponent";
+import CellBasic from "src/core/CellBasic";
+import { copyToClipboard } from "src/core/Bases/utils";
+import { StyledVariable } from "src/core/Bases/style";
+import { DROP_SHADOWS_TITLE, DROP_SHADOWS_USAGE } from "../constants";
+
+export const Template = () => {
+  const theme = useTheme();
+  const shadows = getShadows({ theme });
+
+  const RenderTableRow = (shadow: string, name: string) => {
+    const sassVariable = "$sds-drop-shadow-" + name;
+    const cssVariable = "--sds-drop-shadow-" + name;
+
+    return (
+      <TableRow key={name}>
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledShadowBox shadow={shadow} />
+        </CellComponent>
+        <CellBasic
+          primaryText={DROP_SHADOWS_TITLE[name]}
+          verticalAlign="center"
+          shouldShowTooltipOnHover={false}
+        />
+        <CellComponent verticalAlign="center">
+          <StyledVariable
+            onClick={() => copyToClipboard(sassVariable)}
+            type="sass"
+          >
+            {sassVariable}
+          </StyledVariable>
+          <StyledVariable
+            onClick={() => copyToClipboard(cssVariable)}
+            type="css"
+          >
+            {cssVariable}
+          </StyledVariable>
+        </CellComponent>
+        <CellComponent
+          verticalAlign="center"
+          onClick={() => copyToClipboard(`box-shadow: ${shadow};`)}
+        >
+          <StyledShadowVariable>box-shadow: {shadow};</StyledShadowVariable>
+        </CellComponent>
+        <CellBasic
+          verticalAlign="center"
+          primaryText={DROP_SHADOWS_USAGE[name]}
+          shouldShowTooltipOnHover={false}
+          primaryTextWrapLineCount={5}
+        />
+      </TableRow>
+    );
+  };
+
+  if (shadows) {
+    const { l, m, s, none } = shadows;
+
+    // eslint-disable-next-line sort-keys
+    const TableBodyContent = Object.entries({ l, m, s, none }).map(
+      ([key, value]) => RenderTableRow(value, key)
+    );
+
+    return (
+      <Table>
+        <TableHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Example
+          </CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Shadow Type
+          </CellHeader>
+          <CellHeader hideSortIcon>Variables</CellHeader>
+          <CellHeader hideSortIcon>Value</CellHeader>
+          <CellHeader hideSortIcon>Usage</CellHeader>
+        </TableHeader>
+
+        <tbody>{TableBodyContent}</tbody>
+      </Table>
+    );
+  }
+};
diff --git a/packages/components/src/core/Bases/DropShadows/__storybook__/style.ts b/packages/components/src/core/Bases/DropShadows/__storybook__/style.ts
new file mode 100644
index 000000000..324668e41
--- /dev/null
+++ b/packages/components/src/core/Bases/DropShadows/__storybook__/style.ts
@@ -0,0 +1,62 @@
+import { styled } from "@mui/material";
+import {
+  getColors,
+  CommonThemeProps,
+  fontCodeXs,
+  getFontWeights,
+} from "src/core/styles";
+
+const SHADOW_BOX_BOX_SIZE_PX = 60;
+
+export const StyledShadowsWrapper = styled("div")`
+  max-width: 100%;
+`;
+
+interface IStyledCornerBoxProps extends CommonThemeProps {
+  shadow: string;
+}
+
+export const StyledShadowBox = styled("div")`
+  ${(props: IStyledCornerBoxProps) => {
+    const { shadow } = props;
+
+    const colors = getColors(props);
+
+    return `
+      position: relative;
+      margin-left: 10px;
+      width: ${SHADOW_BOX_BOX_SIZE_PX}px;
+      height: ${SHADOW_BOX_BOX_SIZE_PX}px;
+      background-color: ${colors?.gray[100]};
+      border-radius: 6px;
+      box-shadow: ${shadow};
+
+      &:hover {
+        animation: boxShadowAnimation 3s infinite;
+      }
+
+      @keyframes boxShadowAnimation {
+        50% {
+          box-shadow: ${shadow};
+        }
+      }
+    `;
+  }}
+`;
+
+export const StyledShadowVariable = styled("p")`
+  ${fontCodeXs}
+
+  ${(props) => {
+    const fontWeights = getFontWeights(props);
+
+    return `
+      margin: 0;
+      cursor: pointer;
+    
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+      }
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Bases/Spaces/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/Spaces/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..cb9304346
--- /dev/null
+++ b/packages/components/src/core/Bases/Spaces/__storybook__/index.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "src/common/storybook/storybookBadges";
+import { StyledSpacingWrapper } from "./style";
+import { Template } from "./stories/default";
+
+export default {
+  parameters: {
+    axe: {
+      disabledRules: ["color-contrast"],
+    },
+    badges: [BADGE.WIP],
+  },
+  title: "Bases/Spaces",
+} as Meta;
+
+// Spaces
+
+export const Default = {
+  render: () => (
+    <>
+      <StyledSpacingWrapper>
+        <Template />
+      </StyledSpacingWrapper>
+    </>
+  ),
+};
diff --git a/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..4db306d1c
--- /dev/null
+++ b/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx
@@ -0,0 +1,90 @@
+import { useTheme } from "@mui/material";
+import { getSpaces } from "src/core/styles";
+import {
+  StyledInlineSpacingBox,
+  StyledInsetSpacingBox,
+  StyledSpacingVariable,
+  StyledStackedSpacingBox,
+} from "../style";
+import Table from "src/core/Table";
+import TableHeader from "src/core/TableHeader";
+import CellHeader from "src/core/CellHeader";
+import TableRow from "src/core/TableRow";
+import CellComponent from "src/core/CellComponent";
+import { copyToClipboard } from "src/core/Bases/utils";
+import { StyledVariable } from "src/core/Bases/style";
+
+export const Template = () => {
+  const theme = useTheme();
+  const spaces = getSpaces({ theme });
+
+  const RenderTableRow = (size: number, name: string) => {
+    const sassVariable = "$sds-space-" + name;
+    const cssVariable = "--sds-space-" + name;
+
+    return (
+      <TableRow key={name} hover={false}>
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledInsetSpacingBox size={size}>{name}</StyledInsetSpacingBox>
+        </CellComponent>
+
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledInlineSpacingBox size={size}>{name}</StyledInlineSpacingBox>
+        </CellComponent>
+
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledStackedSpacingBox size={size}>{name}</StyledStackedSpacingBox>
+        </CellComponent>
+
+        <CellComponent verticalAlign="center">
+          <StyledVariable
+            onClick={() => copyToClipboard(sassVariable)}
+            type="sass"
+          >
+            {sassVariable}
+          </StyledVariable>
+          <StyledVariable
+            onClick={() => copyToClipboard(cssVariable)}
+            type="css"
+          >
+            {cssVariable}
+          </StyledVariable>
+        </CellComponent>
+
+        <CellComponent verticalAlign="center">
+          <StyledSpacingVariable>{`${size}px`}</StyledSpacingVariable>
+        </CellComponent>
+      </TableRow>
+    );
+  };
+
+  if (spaces) {
+    const TableBodyContent = Object.entries(spaces)
+      .sort((a, b) => a[1] - b[1])
+      .map(([key, value]) => {
+        return RenderTableRow(value, key);
+      });
+
+    return (
+      <Table>
+        <TableHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Inset Spacing
+          </CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Inline Spacing
+          </CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Stacked Spacing
+          </CellHeader>
+          <CellHeader hideSortIcon>Variables</CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Value
+          </CellHeader>
+        </TableHeader>
+
+        <tbody>{TableBodyContent}</tbody>
+      </Table>
+    );
+  }
+};
diff --git a/packages/components/src/core/Bases/Spaces/__storybook__/style.ts b/packages/components/src/core/Bases/Spaces/__storybook__/style.ts
new file mode 100644
index 000000000..d43fb0858
--- /dev/null
+++ b/packages/components/src/core/Bases/Spaces/__storybook__/style.ts
@@ -0,0 +1,103 @@
+import { styled } from "@mui/material";
+import {
+  getColors,
+  CommonThemeProps,
+  fontCodeXs,
+  getFontWeights,
+} from "src/core/styles";
+
+export const StyledSpacingWrapper = styled("div")`
+  max-width: 100%;
+`;
+
+interface IProps extends CommonThemeProps {
+  size: number;
+}
+
+export const StyledInsetSpacingBox = styled("div")`
+  ${fontCodeXs}
+
+  ${(props: IProps) => {
+    const { size } = props;
+
+    const colors = getColors(props);
+    const BoxSize = 100;
+
+    return `
+      position: relative;
+      box-sizing: border-box;
+      width: ${BoxSize}px;
+      height: ${BoxSize}px;
+      border: solid ${size}px rgb(205, 225, 195);
+      color: ${colors?.green[600]};
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+  }}
+`;
+
+export const StyledInlineSpacingBox = styled("div")`
+  ${fontCodeXs}
+
+  ${(props: IProps) => {
+    const { size } = props;
+
+    const colors = getColors(props);
+    const BoxSize = 100;
+
+    return `
+      position: relative;
+      margin-left: 30px;
+      width: ${size}px;
+      height: ${BoxSize}px;
+      background-color: rgb(250, 230, 210);
+      color: ${colors?.yellow[600]};
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+  }}
+`;
+
+export const StyledStackedSpacingBox = styled("div")`
+  ${fontCodeXs}
+
+  ${(props: IProps) => {
+    const { size } = props;
+
+    const colors = getColors(props);
+    const BoxSize = 120;
+
+    return `
+      position: relative;
+      height: ${size}px;
+      width: ${BoxSize}px;
+      background-color: rgb(250, 230, 210);
+      color: ${colors?.yellow[600]};
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+  }}
+`;
+
+export const StyledSpacingVariable = styled("p")`
+  ${fontCodeXs}
+
+  ${(props) => {
+    const fontWeights = getFontWeights(props);
+
+    return `
+      margin: 0;
+      cursor: pointer;
+    
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+      }
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Bases/style.ts b/packages/components/src/core/Bases/style.ts
new file mode 100644
index 000000000..3db75d1a9
--- /dev/null
+++ b/packages/components/src/core/Bases/style.ts
@@ -0,0 +1,57 @@
+import { styled } from "@mui/material";
+import {
+  CommonThemeProps,
+  fontCodeXs,
+  getColors,
+  getFontWeights,
+} from "src/core/styles";
+
+interface IStyledVariableProps extends CommonThemeProps {
+  type?: "css" | "sass" | "none";
+  color?: string;
+}
+
+export const StyledVariable = styled("p")`
+  ${fontCodeXs}
+
+  ${(props: IStyledVariableProps) => {
+    const { type = "none", color } = props;
+
+    const colors = getColors(props);
+    const fontWeights = getFontWeights(props);
+
+    const textColor =
+      type === "none"
+        ? "black"
+        : type === "css"
+          ? colors?.yellow?.[500]
+          : colors?.red?.[400];
+
+    return `
+      cursor: pointer;
+      position: relative;
+      padding-left: ${type === "none" ? 0 : type === "css" ? 32 : 40}px;
+
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+
+        &::before {
+          font-weight: normal;
+          background-color: ${type === "none" ? "transparent" : colors?.gray?.[200]};
+          color: black;
+        }
+      }
+
+      &::before {
+        content: "${type === "none" ? "" : type}";
+        color: ${color || textColor};
+        position: absolute;
+        padding: 0 5px;
+        border-radius: 4px;
+        left: 0;
+        top: 0;
+        font-size: 10px;
+      }
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Bases/utils.ts b/packages/components/src/core/Bases/utils.ts
new file mode 100644
index 000000000..4dbc26d21
--- /dev/null
+++ b/packages/components/src/core/Bases/utils.ts
@@ -0,0 +1,49 @@
+/**
+ * Function to determine whether to use light or dark text based on the background color.
+ * @param {string} bgColor - The background color in hex or RGB format.
+ * @param {string} lightColor - The color code for light text (default: "#ffffff").
+ * @param {string} darkColor - The color code for dark text (default: "#000000").
+ * @returns {string} - The color code for the chosen text color.
+ */
+export const pickTextColorBasedOnBgColor = (
+  bgColor: string,
+  lightColor: string = "#ffffff",
+  darkColor: string = "#000000"
+): string => {
+  // Extracting the hex color if it starts with '#'
+  const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
+
+  // Extracting individual RGB values from the hex color
+  const r = parseInt(color.substring(0, 2), 16); // hexToR
+  const g = parseInt(color.substring(2, 4), 16); // hexToG
+  const b = parseInt(color.substring(4, 6), 16); // hexToB
+
+  // Normalizing RGB values to the range [0, 1]
+  const uicolors = [r / 255, g / 255, b / 255];
+
+  // Applying the gamma correction to the RGB values
+  const c = uicolors.map((col) => {
+    if (col <= 0.03928) {
+      return col / 12.92;
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4);
+  });
+
+  // Calculating the relative luminance of the color
+  const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+
+  // Choosing text color based on the luminance
+  return L > 0.5 ? darkColor : lightColor;
+};
+
+export const copyToClipboard = (text: string): void => {
+  navigator.clipboard.writeText(text);
+};
+
+export const convertToKebabCase = (input: string): string => {
+  return input
+    .replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+    .replace(/\d+/g, (match) => `-${match}`)
+    .replace(/^-/, "")
+    .replace(/-+/g, "-");
+};
diff --git a/packages/components/src/core/Button/__storybook__/constants.tsx b/packages/components/src/core/Button/__storybook__/constants.tsx
new file mode 100644
index 000000000..8713f497d
--- /dev/null
+++ b/packages/components/src/core/Button/__storybook__/constants.tsx
@@ -0,0 +1,88 @@
+import { action } from "@storybook/addon-actions";
+import Icon from "src/core/Icon";
+
+export const BUTTON_EXCLUDED_CONTROLS = [
+  "endIcon",
+  "endIċon",
+  "startIcon",
+  "startIċon",
+  "onClick",
+  "sdsStyle",
+  "sdsType",
+  "text",
+  "label",
+  "disabled",
+];
+
+export const BUTTON_SDS_STYLES = ["rounded", "square", "minimal"];
+
+export const BUTTON_SDS_TYPES = ["primary", "secondary"];
+
+export const BUTTON_TEXT = "Label";
+
+export const BUTTON_ICON_OPTIONS = [
+  undefined,
+  <Icon key="download" sdsSize="l" sdsIcon="Download" sdsType="button" />,
+];
+
+export const BUTTON_DISABLED_OPTIONS = [false, true];
+
+export const BUTTON_PSEUDO_STATES = [
+  "default",
+  "hover",
+  "active",
+  "focus-visible",
+];
+
+export const BUTTON_ACTIONS = {
+  onClick: action("onClick"),
+};
+
+export const BUTTON_LARGE_ICON_OPTIONS = [
+  undefined,
+  <Icon sdsIcon="Download" sdsType="button" sdsSize="l" key="download" />,
+  <Icon sdsIcon="Share" sdsType="button" sdsSize="l" key="share" />,
+  <Icon
+    sdsIcon="SpeechBubbles"
+    sdsType="button"
+    sdsSize="l"
+    key="speechBubbles"
+  />,
+];
+
+export const BUTTON_SMALL_ICON_OPTIONS = [
+  undefined,
+  <Icon sdsIcon="Download" sdsType="button" sdsSize="s" key="downloadSmall" />,
+  <Icon sdsIcon="Copy" sdsType="button" sdsSize="s" key="copy" />,
+  <Icon sdsIcon="LightBulb" sdsType="button" sdsSize="s" key="lightBulb" />,
+];
+
+export const BUTTON_LARGE_ICON_LABELS = [
+  "No icon",
+  "Download",
+  "Share",
+  "Speech Bubbles",
+];
+
+export const BUTTON_SMALL_ICON_LABELS = [
+  "No icon",
+  "Download",
+  "Copy",
+  "Light Bulb",
+];
+
+export const DEFAULT_PLACEMENT_STYLES: React.CSSProperties = {
+  display: "grid",
+  gridColumnGap: "10px",
+  gridRowGap: "0px",
+  gridTemplateColumns: "repeat(6, 120px)",
+  gridTemplateRows: "1fr",
+};
+
+export const MINIMAL_PLACEMENT_STYLES: React.CSSProperties = {
+  display: "grid",
+  gridColumnGap: "24px",
+  gridRowGap: "0px",
+  gridTemplateColumns: "repeat(3, min-content)",
+  gridTemplateRows: "1fr",
+};
diff --git a/packages/components/src/core/Button/__storybook__/index.stories.tsx b/packages/components/src/core/Button/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..cdff32096
--- /dev/null
+++ b/packages/components/src/core/Button/__storybook__/index.stories.tsx
@@ -0,0 +1,199 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { ScreenshotTestDemo } from "./stories/screenshot";
+import {
+  BUTTON_ACTIONS,
+  BUTTON_EXCLUDED_CONTROLS,
+  BUTTON_LARGE_ICON_LABELS,
+  BUTTON_LARGE_ICON_OPTIONS,
+  BUTTON_SDS_STYLES,
+  BUTTON_SDS_TYPES,
+  BUTTON_SMALL_ICON_LABELS,
+  BUTTON_SMALL_ICON_OPTIONS,
+} from "./constants";
+import { Button } from "./stories/default";
+import {
+  MinimalLivePreviewDemo,
+  RoundedLivePreviewDemo,
+  SquareLivePreviewDemo,
+} from "./stories/livePreview";
+
+export default {
+  argTypes: {
+    /**
+     * (masoudmanson)
+     * Temporary workaround due to Storybook limitations in rendering conditional
+     * control options. To address the restriction of having identical keys, a distinct
+     * key is used for small icon options. This serves as a temporary solution until
+     * Storybook incorporates the feature for conditional control options rendering.
+     * When sdsType is "minimal," BUTTON_SMALL_ICON_OPTIONS and BUTTON_SMALL_ICON_LABELS are utilized for
+     * startIcon and endIcon. For sdsType other than "minimal," BUTTON_LARGE_ICON_OPTIONS and
+     * BUTTON_LARGE_ICON_LABELS are used. The variables startIċon and endIċon serve the same purpose
+     * as startIcon and endIcon specifically for sdsStyle "minimal." In the main story
+     * definition, conditional rendering for startIcon and endIcon is determined by the sdsStyle:
+     *
+     * const startIconFinal = startIcon || startIċon;
+     * const endIconFinal = endIcon || endIċon;
+     */
+    endIcon: {
+      control: {
+        labels: BUTTON_LARGE_ICON_LABELS,
+        type: "select",
+      },
+      if: { arg: "sdsStyle", neq: "minimal" },
+      mapping: BUTTON_LARGE_ICON_OPTIONS,
+      options: Object.keys(BUTTON_LARGE_ICON_OPTIONS),
+    },
+    endIċon: {
+      control: {
+        labels: BUTTON_SMALL_ICON_LABELS,
+        type: "select",
+      },
+      if: { arg: "sdsStyle", eq: "minimal" },
+      mapping: BUTTON_SMALL_ICON_OPTIONS,
+      options: Object.keys(BUTTON_SMALL_ICON_OPTIONS),
+    },
+    onClick: { action: BUTTON_ACTIONS.onClick },
+    sdsStyle: {
+      control: { type: "select" },
+      options: BUTTON_SDS_STYLES,
+    },
+    sdsType: {
+      control: { type: "select" },
+      options: BUTTON_SDS_TYPES,
+    },
+    /**
+     * (masoudmanson)
+     * Temporary workaround due to Storybook limitations in rendering conditional
+     * control options. Same as the endIcon and endIċon, a distinct key is used for
+     * startIcon options.
+     */
+    startIcon: {
+      control: {
+        labels: BUTTON_LARGE_ICON_LABELS,
+        type: "select",
+      },
+      if: { arg: "sdsStyle", neq: "minimal" },
+      mapping: BUTTON_LARGE_ICON_OPTIONS,
+      options: Object.keys(BUTTON_LARGE_ICON_OPTIONS),
+    },
+    startIċon: {
+      control: {
+        labels: BUTTON_SMALL_ICON_LABELS,
+        type: "select",
+      },
+      if: { arg: "sdsStyle", eq: "minimal" },
+      mapping: BUTTON_SMALL_ICON_OPTIONS,
+      options: Object.keys(BUTTON_SMALL_ICON_OPTIONS),
+    },
+    text: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+  component: Button,
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+  title: "Components/Button [wip]",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    disabled: false,
+    sdsStyle: "rounded",
+    sdsType: "primary",
+    text: "Label",
+  },
+};
+
+// Rounded Live Preview
+
+export const RoundedLivePreview = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: BUTTON_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <RoundedLivePreviewDemo {...args} />,
+};
+
+// Square Live Preview
+
+export const SquareLivePreview = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: BUTTON_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <SquareLivePreviewDemo {...args} />,
+};
+
+// Minimal Live Preview
+
+export const MinimalLivePreview = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: BUTTON_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <MinimalLivePreviewDemo {...args} />,
+};
+
+// Screenshot Test
+
+export const ScreenshotTest = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: BUTTON_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <ScreenshotTestDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    disabled: false,
+    sdsStyle: "rounded",
+    sdsType: "primary",
+    text: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: BUTTON_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (props: Args) => <Button {...props} data-testid="button" />,
+};
diff --git a/packages/components/src/core/Button/__storybook__/stories/default.tsx b/packages/components/src/core/Button/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..abdf408c9
--- /dev/null
+++ b/packages/components/src/core/Button/__storybook__/stories/default.tsx
@@ -0,0 +1,22 @@
+import { Args } from "@storybook/react";
+import RawButton from "src/core/Button";
+
+export const Button = (props: Args): JSX.Element => {
+  const { sdsType, sdsStyle, text, startIcon, startIċon, endIcon, endIċon } =
+    props;
+
+  const startIconFinal = startIcon || startIċon;
+  const endIconFinal = endIcon || endIċon;
+
+  return (
+    <RawButton
+      sdsType={sdsType}
+      sdsStyle={sdsStyle}
+      startIcon={startIconFinal}
+      endIcon={endIconFinal}
+      {...props}
+    >
+      {text}
+    </RawButton>
+  );
+};
diff --git a/packages/components/src/core/Button/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Button/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..4eec73872
--- /dev/null
+++ b/packages/components/src/core/Button/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,120 @@
+import { Args } from "@storybook/react";
+import RawButton from "src/core/Button";
+import {
+  BUTTON_TEXT,
+  DEFAULT_PLACEMENT_STYLES,
+  MINIMAL_PLACEMENT_STYLES,
+} from "../constants";
+import Icon from "src/core/Icon";
+
+// Rounded Live Preview Demo
+
+export const RoundedLivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <div style={DEFAULT_PLACEMENT_STYLES}>
+      <div>
+        <RawButton {...props} sdsStyle="rounded" sdsType="primary">
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+      <div>
+        <RawButton
+          {...props}
+          startIcon={<Icon sdsIcon="Download" sdsSize="xl" sdsType="button" />}
+          sdsStyle="rounded"
+          sdsType="primary"
+        >
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+      <div>
+        <RawButton {...props} sdsStyle="rounded" sdsType="secondary">
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+      <div>
+        <RawButton
+          {...props}
+          startIcon={<Icon sdsIcon="Download" sdsSize="s" sdsType="button" />}
+          sdsStyle="rounded"
+          sdsType="secondary"
+        >
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+    </div>
+  );
+};
+
+// Square Live Preview Demo
+
+export const SquareLivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <div style={DEFAULT_PLACEMENT_STYLES as React.CSSProperties}>
+      <div>
+        <RawButton {...props} sdsStyle="square" sdsType="primary">
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+
+      <div>
+        <RawButton
+          {...props}
+          startIcon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
+          sdsStyle="square"
+          sdsType="primary"
+        >
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+
+      <div>
+        <RawButton {...props} sdsStyle="square" sdsType="secondary">
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+
+      <div>
+        <RawButton
+          {...props}
+          startIcon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
+          sdsStyle="square"
+          sdsType="secondary"
+        >
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+    </div>
+  );
+};
+
+// Minimal Live Preview Demo
+
+export const MinimalLivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <div style={MINIMAL_PLACEMENT_STYLES}>
+      <div>
+        <RawButton {...props} sdsStyle="minimal" sdsType="primary">
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+
+      <div>
+        <RawButton
+          {...props}
+          startIcon={<Icon sdsIcon="Download" sdsSize="s" sdsType="button" />}
+          sdsStyle="minimal"
+          sdsType="primary"
+        >
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+
+      <div>
+        <RawButton {...props} sdsStyle="minimal" sdsType="secondary">
+          {BUTTON_TEXT}
+        </RawButton>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/Button/__storybook__/stories/screenshot.tsx b/packages/components/src/core/Button/__storybook__/stories/screenshot.tsx
new file mode 100644
index 000000000..323dc46b4
--- /dev/null
+++ b/packages/components/src/core/Button/__storybook__/stories/screenshot.tsx
@@ -0,0 +1,204 @@
+import { Args } from "@storybook/react";
+import RawButton from "src/core/Button";
+import {
+  BUTTON_DISABLED_OPTIONS,
+  BUTTON_ICON_OPTIONS,
+  BUTTON_PSEUDO_STATES,
+  BUTTON_SDS_STYLES,
+  BUTTON_SDS_TYPES,
+  BUTTON_TEXT,
+} from "../constants";
+
+export const ScreenshotTestDemo = (props: Args): JSX.Element => {
+  const topLevel: React.CSSProperties = {
+    columnGap: "20px",
+    display: "inline-grid",
+    fontFamily: "sans-serif",
+    marginRight: "50px",
+  };
+  const displayContents: React.CSSProperties = {
+    display: "contents",
+  };
+  const penultimateLevel: React.CSSProperties = {
+    display: "contents",
+  };
+  const bottomLevel: React.CSSProperties = {
+    marginBottom: 10,
+  };
+  const fontWeightNormal: React.CSSProperties = {
+    fontWeight: "normal",
+  };
+  const topLabel: React.CSSProperties = {
+    ...fontWeightNormal,
+    fontSize: "2em",
+    gridColumn: "1 / 6",
+    marginBottom: 0,
+  };
+  const midLabel: React.CSSProperties = {
+    ...fontWeightNormal,
+    borderStyle: "solid none none none",
+    gridColumn: "1 / 6",
+    justifySelf: "stretch",
+    paddingTop: 10,
+  };
+  const secondLabel: React.CSSProperties = {
+    ...midLabel,
+    borderWidth: "2px",
+    fontSize: "1.17em",
+    margin: "20px 0",
+  };
+  const thirdLabel: React.CSSProperties = {
+    ...midLabel,
+    alignSelf: "end",
+    borderWidth: "1px",
+    fontWeight: "normal",
+    margin: "0 0 5px 0",
+  };
+  const bottomLabel: React.CSSProperties = {
+    ...fontWeightNormal,
+    margin: "10px 0",
+  };
+
+  // loop through all BUTTON_SDS_STYLES
+  return (
+    <>
+      {BUTTON_SDS_STYLES.map((sdsStyle) => {
+        return <ButtonStyleOption sdsStyle={sdsStyle} key={sdsStyle} />;
+      })}
+    </>
+  );
+
+  // loop through all BUTTON_SDS_TYPES + create headers for BUTTON_SDS_STYLES
+  function ButtonStyleOption({
+    sdsStyle,
+  }: {
+    sdsStyle: (typeof BUTTON_SDS_STYLES)[number];
+  }) {
+    return (
+      <div style={topLevel}>
+        <h3 style={topLabel}>
+          Style: <b>{sdsStyle}</b>
+        </h3>
+        {BUTTON_SDS_TYPES.map((type) => {
+          return (
+            <ButtonTypeOption sdsStyle={sdsStyle} type={type} key={type} />
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all BUTTON_ICON_OPTIONS + create headers for BUTTON_SDS_TYPES
+  function ButtonTypeOption({
+    sdsStyle,
+    type,
+  }: {
+    sdsStyle: (typeof BUTTON_SDS_STYLES)[number];
+    type: (typeof BUTTON_SDS_TYPES)[number];
+  }) {
+    return (
+      <div style={displayContents}>
+        <h4 style={secondLabel}>
+          Type: <b>{type}</b>
+        </h4>
+        {/* Minimal Secondary doesn't have icon button option */}
+        {sdsStyle === "minimal" && type === "secondary" ? (
+          <ButtonIconOption
+            sdsStyle={sdsStyle}
+            type={type}
+            icon={BUTTON_ICON_OPTIONS[0]}
+            key={String(BUTTON_ICON_OPTIONS[0])}
+          />
+        ) : (
+          BUTTON_ICON_OPTIONS.map((icon) => {
+            return (
+              <ButtonIconOption
+                sdsStyle={sdsStyle}
+                type={type}
+                icon={icon}
+                key={String(icon)}
+              />
+            );
+          })
+        )}
+      </div>
+    );
+  }
+
+  // loop through all BUTTON_DISABLED_OPTIONS + create headers for BUTTON_ICON_OPTIONS
+  function ButtonIconOption({
+    sdsStyle,
+    type,
+    icon,
+  }: {
+    sdsStyle: (typeof BUTTON_SDS_STYLES)[number];
+    type: (typeof BUTTON_SDS_TYPES)[number];
+    icon: (typeof BUTTON_ICON_OPTIONS)[number];
+  }) {
+    return (
+      <div style={displayContents}>
+        <h5 style={thirdLabel}>
+          Icon: <b>{icon ? "yes" : "no"}</b>
+        </h5>
+        {BUTTON_DISABLED_OPTIONS.map((disabled) => {
+          return (
+            <ButtonDisabledOption
+              sdsStyle={sdsStyle}
+              type={type}
+              icon={icon}
+              disabled={disabled}
+              key={String(disabled)}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all BUTTON_PSEUDO_STATES + create headers for BUTTON_DISABLED_OPTIONS, BUTTON_PSEUDO_STATES
+  function ButtonDisabledOption({
+    sdsStyle,
+    type,
+    icon,
+    disabled,
+  }: {
+    sdsStyle: (typeof BUTTON_SDS_STYLES)[number];
+    type: (typeof BUTTON_SDS_TYPES)[number];
+    icon: (typeof BUTTON_ICON_OPTIONS)[number];
+    disabled: (typeof BUTTON_DISABLED_OPTIONS)[number];
+  }) {
+    return (
+      <div style={penultimateLevel}>
+        {BUTTON_PSEUDO_STATES.map((state) => {
+          return (
+            <div style={bottomLevel} key={state}>
+              {/* removes irrelevant disabled iterations: when combined with all pseudo-states except default, `disabled=false` is impossible */}
+              {(disabled === false ||
+                (disabled === true && state === "default")) && (
+                <>
+                  <h6 style={bottomLabel}>
+                    {disabled === false ? "State: " : "Disabled: "}
+                    <br />
+                    <b>{disabled === false ? state : "true"}</b>
+                  </h6>
+                  <RawButton
+                    {...props}
+                    data-testid="button"
+                    sdsStyle={sdsStyle}
+                    sdsType={type}
+                    startIcon={icon}
+                    disabled={disabled}
+                    className={`pseudo-${state}`}
+                    key={state}
+                  >
+                    {BUTTON_TEXT}
+                  </RawButton>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+};
diff --git a/packages/components/src/core/Button/Button.namespace-test.tsx b/packages/components/src/core/Button/__tests__/Button.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Button/Button.namespace-test.tsx
rename to packages/components/src/core/Button/__tests__/Button.namespace-test.tsx
diff --git a/packages/components/src/core/Button/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
similarity index 92%
rename from packages/components/src/core/Button/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
index 9b645759f..d878f09b0 100644
--- a/packages/components/src/core/Button/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<button /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-mmoecm-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-s6dhdg-MuiButtonBase-root-MuiButton-root"
   tabindex="0"
   text="Label"
   type="button"
diff --git a/packages/components/src/core/Button/index.test.tsx b/packages/components/src/core/Button/__tests__/index.test.tsx
similarity index 88%
rename from packages/components/src/core/Button/index.test.tsx
rename to packages/components/src/core/Button/__tests__/index.test.tsx
index 37d3c84ad..dd85c933c 100644
--- a/packages/components/src/core/Button/index.test.tsx
+++ b/packages/components/src/core/Button/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 const { Test } = composeStories(stories);
 
diff --git a/packages/components/src/core/Button/index.stories.tsx b/packages/components/src/core/Button/index.stories.tsx
deleted file mode 100644
index b610b736d..000000000
--- a/packages/components/src/core/Button/index.stories.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import Icon from "../Icon";
-import RawButton from "./index";
-
-const SDS_STYLES = ["rounded", "square", "minimal"];
-const SDS_TYPES = ["primary", "secondary"];
-const ICON_OPTIONS = [
-  undefined,
-  <Icon key="download" sdsSize="l" sdsIcon="download" sdsType="button" />,
-];
-const DISABLED_OPTIONS = [false, true];
-const PSEUDO_STATES = ["default", "hover", "active", "focus-visible"];
-const TEXT = "Label";
-
-const actions = {
-  onClick: action("onClick"),
-};
-
-const Button = (props: Args): JSX.Element => {
-  const { sdsType, sdsStyle } = props;
-  return (
-    <RawButton sdsType={sdsType} sdsStyle={sdsStyle} {...props}>
-      {TEXT}
-    </RawButton>
-  );
-};
-
-export default {
-  argTypes: {
-    // https://storybook.js.org/docs/react/essentials/actions#action-argtype-annotation
-    onClick: { action: actions.onClick },
-    sdsStyle: {
-      control: { type: "select" },
-      options: SDS_STYLES,
-    },
-    sdsType: {
-      control: { type: "select" },
-      options: SDS_TYPES,
-    },
-    text: {
-      control: {
-        type: "text",
-      },
-    },
-  },
-  component: Button,
-  title: "Button",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    disabled: false,
-    sdsStyle: "rounded",
-    sdsType: "primary",
-    text: "Label",
-  },
-};
-
-// Rounded Live Preview
-
-const placementStyles: React.CSSProperties = {
-  display: "grid",
-  gridColumnGap: "10px",
-  gridRowGap: "0px",
-  gridTemplateColumns: "repeat(6, 120px)",
-  gridTemplateRows: "1fr",
-};
-
-const RoundedLivePreviewDemo = (props: Args): JSX.Element => {
-  return (
-    <div style={placementStyles}>
-      <RawButton {...props} sdsStyle="rounded" sdsType="primary">
-        {TEXT}
-      </RawButton>
-      <RawButton
-        {...props}
-        startIcon={<Icon sdsIcon="download" sdsSize="s" sdsType="button" />}
-        sdsStyle="rounded"
-        sdsType="primary"
-      >
-        {TEXT}
-      </RawButton>
-      <RawButton {...props} sdsStyle="rounded" sdsType="secondary">
-        {TEXT}
-      </RawButton>
-      <RawButton
-        {...props}
-        startIcon={<Icon sdsIcon="download" sdsSize="s" sdsType="button" />}
-        sdsStyle="rounded"
-        sdsType="secondary"
-      >
-        {TEXT}
-      </RawButton>
-    </div>
-  );
-};
-
-export const RoundedLivePreview = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <RoundedLivePreviewDemo {...args} />,
-};
-
-// Square Live Preview
-
-const SquareLivePreviewDemo = (props: Args): JSX.Element => {
-  return (
-    <div style={placementStyles as React.CSSProperties}>
-      <RawButton {...props} sdsStyle="square" sdsType="primary">
-        {TEXT}
-      </RawButton>
-      <RawButton
-        {...props}
-        startIcon={<Icon sdsIcon="download" sdsSize="s" sdsType="button" />}
-        sdsStyle="square"
-        sdsType="primary"
-      >
-        {TEXT}
-      </RawButton>
-      <RawButton {...props} sdsStyle="square" sdsType="secondary">
-        {TEXT}
-      </RawButton>
-      <RawButton
-        {...props}
-        startIcon={<Icon sdsIcon="download" sdsSize="s" sdsType="button" />}
-        sdsStyle="square"
-        sdsType="secondary"
-      >
-        {TEXT}
-      </RawButton>
-    </div>
-  );
-};
-
-export const SquareLivePreview = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <SquareLivePreviewDemo {...args} />,
-};
-
-// Minimal Live Preview
-
-const MinimalLivePreviewDemo = (props: Args): JSX.Element => {
-  const minimalPlacementStyles: React.CSSProperties = {
-    display: "grid",
-    gridColumnGap: "24px",
-    gridRowGap: "0px",
-    gridTemplateColumns: "repeat(3, min-content)",
-    gridTemplateRows: "1fr",
-  };
-
-  return (
-    <div style={minimalPlacementStyles}>
-      <RawButton {...props} sdsStyle="minimal" sdsType="primary">
-        {TEXT}
-      </RawButton>
-      <RawButton
-        {...props}
-        startIcon={<Icon sdsIcon="download" sdsSize="s" sdsType="button" />}
-        sdsStyle="minimal"
-        sdsType="primary"
-      >
-        {TEXT}
-      </RawButton>
-      <RawButton {...props} sdsStyle="minimal" sdsType="secondary">
-        {TEXT}
-      </RawButton>
-    </div>
-  );
-};
-
-export const MinimalLivePreview = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <MinimalLivePreviewDemo {...args} />,
-};
-
-// Screenshot Test
-
-const ScreenshotTestDemo = (props: Args): JSX.Element => {
-  const topLevel: React.CSSProperties = {
-    columnGap: "20px",
-    display: "inline-grid",
-    fontFamily: "sans-serif",
-    marginRight: "50px",
-  };
-  const displayContents: React.CSSProperties = {
-    display: "contents",
-  };
-  const penultimateLevel: React.CSSProperties = {
-    display: "contents",
-  };
-  const bottomLevel: React.CSSProperties = {
-    marginBottom: 10,
-  };
-  const fontWeightNormal: React.CSSProperties = {
-    fontWeight: "normal",
-  };
-  const topLabel: React.CSSProperties = {
-    ...fontWeightNormal,
-    fontSize: "2em",
-    gridColumn: "1 / 6",
-    marginBottom: 0,
-  };
-  const midLabel: React.CSSProperties = {
-    ...fontWeightNormal,
-    borderStyle: "solid none none none",
-    gridColumn: "1 / 6",
-    justifySelf: "stretch",
-    paddingTop: 10,
-  };
-  const secondLabel: React.CSSProperties = {
-    ...midLabel,
-    borderWidth: "2px",
-    fontSize: "1.17em",
-    margin: "20px 0",
-  };
-  const thirdLabel: React.CSSProperties = {
-    ...midLabel,
-    alignSelf: "end",
-    borderWidth: "1px",
-    fontWeight: "normal",
-    margin: "0 0 5px 0",
-  };
-  const bottomLabel: React.CSSProperties = {
-    ...fontWeightNormal,
-    margin: "10px 0",
-  };
-
-  // loop through all SDS_STYLES
-  return (
-    <>
-      {SDS_STYLES.map((sdsStyle) => {
-        return <ButtonStyleOption sdsStyle={sdsStyle} key={sdsStyle} />;
-      })}
-    </>
-  );
-
-  // loop through all SDS_TYPES + create headers for SDS_STYLES
-  function ButtonStyleOption({
-    sdsStyle,
-  }: {
-    sdsStyle: (typeof SDS_STYLES)[number];
-  }) {
-    return (
-      <div style={topLevel}>
-        <h3 style={topLabel}>
-          Style: <b>{sdsStyle}</b>
-        </h3>
-        {SDS_TYPES.map((type) => {
-          return (
-            <ButtonTypeOption sdsStyle={sdsStyle} type={type} key={type} />
-          );
-        })}
-      </div>
-    );
-  }
-
-  // loop through all ICON_OPTIONS + create headers for SDS_TYPES
-  function ButtonTypeOption({
-    sdsStyle,
-    type,
-  }: {
-    sdsStyle: (typeof SDS_STYLES)[number];
-    type: (typeof SDS_TYPES)[number];
-  }) {
-    return (
-      <div style={displayContents}>
-        <h4 style={secondLabel}>
-          Type: <b>{type}</b>
-        </h4>
-        {/* Minimal Secondary doesn't have icon button option */}
-        {sdsStyle === "minimal" && type === "secondary" ? (
-          <ButtonIconOption
-            sdsStyle={sdsStyle}
-            type={type}
-            icon={ICON_OPTIONS[0]}
-            key={String(ICON_OPTIONS[0])}
-          />
-        ) : (
-          ICON_OPTIONS.map((icon) => {
-            return (
-              <ButtonIconOption
-                sdsStyle={sdsStyle}
-                type={type}
-                icon={icon}
-                key={String(icon)}
-              />
-            );
-          })
-        )}
-      </div>
-    );
-  }
-
-  // loop through all DISABLED_OPTIONS + create headers for ICON_OPTIONS
-  function ButtonIconOption({
-    sdsStyle,
-    type,
-    icon,
-  }: {
-    sdsStyle: (typeof SDS_STYLES)[number];
-    type: (typeof SDS_TYPES)[number];
-    icon: (typeof ICON_OPTIONS)[number];
-  }) {
-    return (
-      <div style={displayContents}>
-        <h5 style={thirdLabel}>
-          Icon: <b>{icon ? "yes" : "no"}</b>
-        </h5>
-        {DISABLED_OPTIONS.map((disabled) => {
-          return (
-            <ButtonDisabledOption
-              sdsStyle={sdsStyle}
-              type={type}
-              icon={icon}
-              disabled={disabled}
-              key={String(disabled)}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-
-  // loop through all PSEUDO_STATES + create headers for DISABLED_OPTIONS, PSEUDO_STATES
-  function ButtonDisabledOption({
-    sdsStyle,
-    type,
-    icon,
-    disabled,
-  }: {
-    sdsStyle: (typeof SDS_STYLES)[number];
-    type: (typeof SDS_TYPES)[number];
-    icon: (typeof ICON_OPTIONS)[number];
-    disabled: (typeof DISABLED_OPTIONS)[number];
-  }) {
-    return (
-      <div style={penultimateLevel}>
-        {PSEUDO_STATES.map((state) => {
-          return (
-            <div style={bottomLevel} key={state}>
-              {/* removes irrelevant disabled iterations: when combined with all pseudo-states except default, `disabled=false` is impossible */}
-              {(disabled === false ||
-                (disabled === true && state === "default")) && (
-                <>
-                  <h6 style={bottomLabel}>
-                    {disabled === false ? "State: " : "Disabled: "}
-                    <br />
-                    <b>{disabled === false ? state : "true"}</b>
-                  </h6>
-                  <RawButton
-                    {...props}
-                    data-testid="button"
-                    sdsStyle={sdsStyle}
-                    sdsType={type}
-                    startIcon={icon}
-                    disabled={disabled}
-                    className={`pseudo-${state}`}
-                    key={state}
-                  >
-                    {TEXT}
-                  </RawButton>
-                </>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-};
-
-export const ScreenshotTest = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    controls: {
-      exclude: ["onClick", "sdsStyle", "sdsType", "text"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <ScreenshotTestDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  args: {
-    disabled: false,
-    sdsStyle: "rounded",
-    sdsType: "primary",
-    text: "Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (props: Args) => <Button {...props} data-testid="button" />,
-};
diff --git a/packages/components/src/core/Button/style.ts b/packages/components/src/core/Button/style.ts
index 17151e1a9..01407f128 100644
--- a/packages/components/src/core/Button/style.ts
+++ b/packages/components/src/core/Button/style.ts
@@ -1,64 +1,99 @@
-import { Button } from "@mui/material";
+import { Button, buttonClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
+  fontBodySemiboldXs,
   fontCapsXxxs,
-  getColors,
   getCorners,
-  getPalette,
+  getIconSizes,
+  getSemanticComponentColors,
+  getSemanticTextColors,
+  getShadows,
   getSpaces,
-} from "../styles";
-import { focusVisibleA11yStyle } from "../styles/common/mixins/a11y";
+} from "src/core/styles";
+import { focusVisibleA11yStyle } from "src/core/styles/common/mixins/a11y";
 
 const sdsPropNames = ["isAllCaps", "isRounded", "sdsStyle", "sdsType"];
 
 const ButtonBase = styled(Button, {
   shouldForwardProp: (prop) => !sdsPropNames.includes(prop as string),
 })`
-  box-shadow: none;
+  ${fontBodySemiboldXs}
   ${focusVisibleA11yStyle}
   ${(props) => {
-    const { variant } = props;
-    const colors = getColors(props);
-    const spacings = getSpaces(props);
-    const palette = getPalette(props);
-
-    const containedPadding = `${spacings?.xs}px ${spacings?.l}px`;
+    const { variant, startIcon, endIcon } = props;
+    const spaces = getSpaces(props);
+    const shadows = getShadows(props);
+    const iconSizes = getIconSizes(props);
+    const semanticTextColors = getSemanticTextColors(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
+
+    const hasIcon = !!startIcon || !!endIcon;
+
+    // (masoudmanson): The padding for the contained variant depends on the presence of an icon.
+    // If the component has either a startIcon or endIcon, the padding will be different.
+    // If the component doesn't have any icon at all, the padding will be different.
+    const containedPadding = hasIcon
+      ? `${spaces?.xxs}px ${spaces?.m}px`
+      : `${spaces?.xs}px ${spaces?.l}px`;
 
     // (thuang): outline variant has border 1px, so padding needs to be smaller
-    const outlinedPadding = `${(spacings?.xs || 0) - 1}px ${
-      (spacings?.l || 0) - 1
-    }px`;
+    const outlinedPadding = hasIcon
+      ? `${(spaces?.xxs || 0) - 1}px ${(spaces?.m || 0) - 1}px`
+      : `${(spaces?.xs || 0) - 1}px ${(spaces?.m || 0) - 1}px`;
 
     const padding = variant === "outlined" ? outlinedPadding : containedPadding;
+
     const outlineBorder =
-      variant === "outlined" ? `border-color: ${colors?.primary[400]};` : "";
+      variant === "outlined"
+        ? `border-color: ${semanticComponentColors?.accent?.border};`
+        : "";
 
     return `
       ${outlineBorder}
       padding: ${padding};
       min-width: 120px;
-      height: 34px;
+      box-shadow: ${shadows?.none};
+
       &:hover {
-        color: white;
-        background-color: ${colors?.primary[500]};
-        box-shadow: none;
+        color: ${semanticTextColors?.base?.onFill};
+        background-color: ${semanticComponentColors?.accent?.fillHover};
+        box-shadow: ${shadows?.none};
       }
+
       &:active {
-        color: white;
-        background-color: ${colors?.primary[600]};
-        box-shadow: none;
+        color: ${semanticTextColors?.base?.onFill};
+        background-color: ${semanticComponentColors?.accent?.fillPressed};
+        box-shadow: ${shadows?.none};
       }
+
       &:disabled {
-        color: ${palette?.action?.disabled};
-        background-color: ${palette?.action?.disabledBackground};
-        border-color: ${colors?.gray[300]};
+        color: ${semanticTextColors?.base?.onFillDisabled};
+        background-color: ${semanticComponentColors?.base?.fillDisabled};
+        border-color: ${semanticComponentColors?.base?.borderDisabled};
       }
-      .MuiButton-startIcon {
-        margin-right: ${spacings?.m}px;
+
+      .${buttonClasses.startIcon}, .${buttonClasses.endIcon} {
+        width: ${iconSizes?.l?.width}px;
+        height: ${iconSizes?.l?.width}px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+          max-width: ${iconSizes?.l?.width}px;
+          max-height: ${iconSizes?.l?.width}px;
+        }
       }
-      .MuiButton-endIcon {
-        margin-left: ${spacings?.m}px;
+
+      .${buttonClasses.startIcon} {
+        margin-right: ${spaces?.m}px;
+        margin-left: 0;
+      }
+
+      .${buttonClasses.endIcon} {
+        margin-left: ${spaces?.m}px;
+        margin-right: 0;
       }
     `;
   }}
@@ -88,10 +123,10 @@ const MinimalButton = styled(Button, {
   ${focusVisibleA11yStyle}
 
   ${(props: IsAllCaps) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
-      padding: ${spacings?.xxs}px 0;
+      padding: ${spaces?.xxs}px 0;
     `;
   }}
 
@@ -107,24 +142,42 @@ const MinimalButton = styled(Button, {
 `;
 
 const minimal = (props: CommonThemeProps) => {
-  const colors = getColors(props);
   const spaces = getSpaces(props);
-  const palette = getPalette(props);
+  const iconSizes = getIconSizes(props);
+  const semanticTextColors = getSemanticTextColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return `
     &:hover, &:focus-visible {
-      color: ${colors?.primary[500]};
+      color: ${semanticComponentColors?.accent?.fillHover};
     }
     &:active {
-      color: ${colors?.primary[600]};
+      color: ${semanticComponentColors?.accent?.fillPressed};
     }
     &:disabled {      
-      color: ${palette?.text?.disabled};
+      color: ${semanticTextColors?.base?.onFillDisabled};
     }
 
-    .MuiButton-startIcon {
+    .${buttonClasses.startIcon}, .${buttonClasses.endIcon} {
+      width: ${iconSizes?.s?.width}px;
+      height: ${iconSizes?.s?.width}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        max-width: ${iconSizes?.s?.width}px;
+        max-height: ${iconSizes?.s?.width}px;
+      }
+    }
+
+    .${buttonClasses.startIcon} {
       margin-right: ${spaces?.xxs}px;
     }
+
+    .${buttonClasses.endIcon} {
+      margin-left: ${spaces?.xxs}px;
+    }
   `;
 };
 
@@ -134,7 +187,13 @@ export const PrimaryMinimalButton = styled(MinimalButton)`
 
 export const SecondaryMinimalButton = styled(MinimalButton)`
   ${minimal}
-  color: #000;
+  ${(props: CommonThemeProps) => {
+    const semanticTextColors = getSemanticTextColors(props);
+
+    return `
+      color: ${semanticTextColors?.base?.primary};
+    `;
+  }}
 `;
 
 // Legacy support for backwards-compatible props
@@ -149,13 +208,12 @@ export const StyledButton = styled(Button, {
     if (!props.isRounded) return ``;
 
     const corners = getCorners(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
       border-radius: ${corners?.l}px;
-      padding: ${spacings?.xs}px ${spacings?.l}px;
+      padding: ${spaces?.xs}px ${spaces?.l}px;
       min-width: 120px;
-      height: 34px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/ButtonDropdown/__storybook__/constants.tsx b/packages/components/src/core/ButtonDropdown/__storybook__/constants.tsx
new file mode 100644
index 000000000..266136233
--- /dev/null
+++ b/packages/components/src/core/ButtonDropdown/__storybook__/constants.tsx
@@ -0,0 +1,22 @@
+import { action } from "@storybook/addon-actions";
+import Icon from "src/core/Icon";
+
+export const BUTTON_DROPDOWN_EXCLUDED_CONTROLS = [
+  "disabled",
+  "icon",
+  "sdsStyle",
+  "sdsType",
+  "onClick",
+];
+
+export const BUTTON_DROPDOWN_TEXT = "Label";
+
+export const BUTTON_DROPDOWN_ACTIONS = {
+  onClick: action("onClick"),
+};
+
+export const BUTTON_DROPDOWN_ICON_OPTIONS = [
+  <Icon sdsIcon="Download" sdsSize="l" sdsType="button" key="downloadIcon" />,
+  <Icon sdsIcon="Copy" sdsSize="l" sdsType="button" key="copyIcon" />,
+  <Icon sdsIcon="Bacteria" sdsSize="l" sdsType="button" key="bacteriaIcon" />,
+];
diff --git a/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx b/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..169b108b8
--- /dev/null
+++ b/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx
@@ -0,0 +1,95 @@
+import { Args, Meta } from "@storybook/react";
+import Icon from "src/core/Icon";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import {
+  BUTTON_DROPDOWN_ACTIONS,
+  BUTTON_DROPDOWN_EXCLUDED_CONTROLS,
+  BUTTON_DROPDOWN_ICON_OPTIONS,
+  BUTTON_DROPDOWN_TEXT,
+} from "./constants";
+import { ButtonDropdown } from "./stories/default";
+import { LivePreviewDemo } from "./stories/livePreview";
+
+export default {
+  argTypes: {
+    disabled: {
+      control: { type: "boolean" },
+    },
+    icon: {
+      control: {
+        labels: ["Download Icon", "Copy Icon", "Bacteria Icon"],
+        type: "select",
+      },
+      mapping: BUTTON_DROPDOWN_ICON_OPTIONS,
+      options: Object.keys(BUTTON_DROPDOWN_ICON_OPTIONS),
+    },
+    sdsStyle: {
+      control: { type: "radio" },
+      options: ["rounded", "square"],
+      required: true,
+    },
+    sdsType: {
+      control: { type: "radio" },
+      options: ["primary", "secondary"],
+      required: true,
+    },
+  },
+  component: ButtonDropdown,
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+  title: "Components/ButtonDropdown [wip]",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    disabled: false,
+    icon: <Icon sdsIcon="Download" sdsSize="l" sdsType="button" />,
+    onClick: BUTTON_DROPDOWN_ACTIONS.onClick,
+    sdsStyle: "square",
+    sdsType: "primary",
+  },
+};
+
+// LivePreview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: BUTTON_DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    disabled: false,
+    icon: <Icon sdsIcon="Download" sdsSize="l" sdsType="button" />,
+    onClick: BUTTON_DROPDOWN_ACTIONS.onClick,
+    sdsStyle: "rounded",
+    sdsType: "primary",
+  },
+  parameters: {
+    controls: {
+      exclude: BUTTON_DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (props: Args): JSX.Element => {
+    return (
+      <ButtonDropdown data-testid="button-dropdown" {...props}>
+        {BUTTON_DROPDOWN_TEXT}
+      </ButtonDropdown>
+    );
+  },
+};
diff --git a/packages/components/src/core/ButtonDropdown/__storybook__/stories/default.tsx b/packages/components/src/core/ButtonDropdown/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..6d2d07dc2
--- /dev/null
+++ b/packages/components/src/core/ButtonDropdown/__storybook__/stories/default.tsx
@@ -0,0 +1,9 @@
+import { Args } from "@storybook/react";
+import RawButtonDropdown from "src/core/ButtonDropdown";
+import { BUTTON_DROPDOWN_TEXT } from "../constants";
+
+export const ButtonDropdown = (props: Args): JSX.Element => {
+  return (
+    <RawButtonDropdown {...props}>{BUTTON_DROPDOWN_TEXT}</RawButtonDropdown>
+  );
+};
diff --git a/packages/components/src/core/ButtonDropdown/__storybook__/stories/livePreview.tsx b/packages/components/src/core/ButtonDropdown/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..9469f55cd
--- /dev/null
+++ b/packages/components/src/core/ButtonDropdown/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,62 @@
+import { Args } from "@storybook/react";
+import { ButtonDropdown } from "./default";
+import Icon from "src/core/Icon";
+import { BUTTON_DROPDOWN_TEXT } from "../constants";
+
+const livePreviewWrapperStyle = {
+  display: "grid",
+  gridColumnGap: 10,
+  gridRowGap: 24,
+  gridTemplateColumns: "repeat(2, min-content)",
+  gridTemplateRows: "repeat(2, auto)",
+};
+
+export function LivePreviewDemo(props: Args): JSX.Element {
+  return (
+    <div style={livePreviewWrapperStyle as React.CSSProperties}>
+      <div>
+        <ButtonDropdown
+          sdsType="primary"
+          sdsStyle="rounded"
+          icon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
+          {...props}
+        >
+          {BUTTON_DROPDOWN_TEXT}
+        </ButtonDropdown>
+      </div>
+
+      <div>
+        <ButtonDropdown
+          sdsType="secondary"
+          sdsStyle="rounded"
+          icon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
+          {...props}
+        >
+          {BUTTON_DROPDOWN_TEXT}
+        </ButtonDropdown>
+      </div>
+
+      <div>
+        <ButtonDropdown
+          sdsType="primary"
+          sdsStyle="square"
+          icon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
+          {...props}
+        >
+          {BUTTON_DROPDOWN_TEXT}
+        </ButtonDropdown>
+      </div>
+
+      <div>
+        <ButtonDropdown
+          sdsType="secondary"
+          sdsStyle="square"
+          icon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
+          {...props}
+        >
+          {BUTTON_DROPDOWN_TEXT}
+        </ButtonDropdown>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/src/core/ButtonDropdown/ButtonDropdown.namespace-test.tsx b/packages/components/src/core/ButtonDropdown/__tests__/ButtonDropdown.namespace-test.tsx
similarity index 84%
rename from packages/components/src/core/ButtonDropdown/ButtonDropdown.namespace-test.tsx
rename to packages/components/src/core/ButtonDropdown/__tests__/ButtonDropdown.namespace-test.tsx
index e05745b5f..770d7ce81 100644
--- a/packages/components/src/core/ButtonDropdown/ButtonDropdown.namespace-test.tsx
+++ b/packages/components/src/core/ButtonDropdown/__tests__/ButtonDropdown.namespace-test.tsx
@@ -6,7 +6,7 @@ const ButtonDropdownNameSpaceTest = (props: ButtonDropdownProps) => {
     <ButtonDropdown
       sdsType="primary"
       sdsStyle="rounded"
-      icon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
+      icon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
       {...props}
     >
       Button Dropdown
diff --git a/packages/components/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap
similarity index 88%
rename from packages/components/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap
index 5a28fa8cd..63e0ba068 100644
--- a/packages/components/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-81bzv7-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-u3s4xc-MuiButtonBase-root-MuiButton-root"
   icon="[object Object]"
   tabindex="0"
   type="button"
@@ -20,7 +20,9 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
         data-testid="IconDownloadLarge"
         fillcontrast="white"
         focusable="false"
-        viewBox="0 0 22 22"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
       />
     </div>
   </span>
@@ -38,7 +40,9 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
         data-testid="IconChevronDownSmall"
         fillcontrast="white"
         focusable="false"
-        viewBox="0 0 14 14"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
       />
     </div>
   </span>
diff --git a/packages/components/src/core/ButtonDropdown/index.test.tsx b/packages/components/src/core/ButtonDropdown/__tests__/index.test.tsx
similarity index 90%
rename from packages/components/src/core/ButtonDropdown/index.test.tsx
rename to packages/components/src/core/ButtonDropdown/__tests__/index.test.tsx
index 0df4e8e7d..5bbc153a5 100644
--- a/packages/components/src/core/ButtonDropdown/index.test.tsx
+++ b/packages/components/src/core/ButtonDropdown/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/ButtonDropdown/index.stories.tsx b/packages/components/src/core/ButtonDropdown/index.stories.tsx
deleted file mode 100644
index 21c089192..000000000
--- a/packages/components/src/core/ButtonDropdown/index.stories.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import Icon from "../Icon";
-import RawButtonDropdown from "./index";
-
-const text = "Label";
-
-const actions = {
-  onClick: action("onClick"),
-};
-
-const iconOptions = [
-  <Icon sdsIcon="download" sdsSize="l" sdsType="button" key="downloadIcon" />,
-  <Icon sdsIcon="copy" sdsSize="l" sdsType="button" key="copyIcon" />,
-  <Icon sdsIcon="bacteria" sdsSize="l" sdsType="button" key="bacteriaIcon" />,
-];
-
-const ButtonDropdown = (props: Args): JSX.Element => {
-  return <RawButtonDropdown {...props}>{text}</RawButtonDropdown>;
-};
-
-export default {
-  argTypes: {
-    disabled: {
-      control: { type: "boolean" },
-    },
-    icon: {
-      control: {
-        labels: ["Download Icon", "Copy Icon", "Bacteria Icon"],
-        type: "select",
-      },
-      mapping: iconOptions,
-      options: Object.keys(iconOptions),
-    },
-    sdsStyle: {
-      control: { type: "radio" },
-      options: ["rounded", "square"],
-      required: true,
-    },
-    sdsType: {
-      control: { type: "radio" },
-      options: ["primary", "secondary"],
-      required: true,
-    },
-  },
-  component: ButtonDropdown,
-  title: "ButtonDropdown",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    disabled: false,
-    icon: <Icon sdsIcon="download" sdsSize="l" sdsType="button" />,
-    onClick: actions.onClick,
-    sdsStyle: "square",
-    sdsType: "primary",
-  },
-};
-
-// LivePreview
-
-const livePreviewWrapperStyle = {
-  display: "grid",
-  gridColumnGap: 10,
-  gridRowGap: 24,
-  gridTemplateColumns: "repeat(4, min-content)",
-  gridTemplateRows: "repeat(2, auto)",
-};
-
-function LivePreviewDemo(props: Args): JSX.Element {
-  return (
-    <div style={livePreviewWrapperStyle as React.CSSProperties}>
-      <div style={{ gridArea: "1/1/2/2" }}>
-        <ButtonDropdown
-          sdsType="primary"
-          sdsStyle="rounded"
-          icon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
-          {...props}
-        >
-          {text}
-        </ButtonDropdown>
-      </div>
-
-      <div style={{ gridArea: "1/2/2/3" }}>
-        <ButtonDropdown
-          sdsType="secondary"
-          sdsStyle="rounded"
-          icon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
-          {...props}
-        >
-          {text}
-        </ButtonDropdown>
-      </div>
-
-      <div style={{ gridArea: "2/1/3/2" }}>
-        <ButtonDropdown
-          sdsType="primary"
-          sdsStyle="square"
-          icon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
-          {...props}
-        >
-          {text}
-        </ButtonDropdown>
-      </div>
-
-      <div style={{ gridArea: "2/2/3/3" }}>
-        <ButtonDropdown
-          sdsType="secondary"
-          sdsStyle="square"
-          icon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
-          {...props}
-        >
-          {text}
-        </ButtonDropdown>
-      </div>
-    </div>
-  );
-}
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  args: {
-    disabled: false,
-    icon: <Icon sdsIcon="download" sdsSize="l" sdsType="button" />,
-    onClick: actions.onClick,
-    sdsStyle: "rounded",
-    sdsType: "primary",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (props: Args): JSX.Element => {
-    return (
-      <ButtonDropdown data-testid="button-dropdown" {...props}>
-        {text}
-      </ButtonDropdown>
-    );
-  },
-};
diff --git a/packages/components/src/core/ButtonDropdown/index.tsx b/packages/components/src/core/ButtonDropdown/index.tsx
index eba10158f..e085c64e4 100644
--- a/packages/components/src/core/ButtonDropdown/index.tsx
+++ b/packages/components/src/core/ButtonDropdown/index.tsx
@@ -1,7 +1,7 @@
 import { ButtonProps as RawButtonProps } from "@mui/material";
 import React, { ForwardedRef } from "react";
-import Button from "../Button";
-import Icon from "../Icon";
+import Button from "src/core/Button";
+import Icon from "src/core/Icon";
 
 interface SdsProps {
   icon?: JSX.Element;
@@ -27,7 +27,7 @@ const ButtonDropdown = React.forwardRef(
     return (
       <Button
         {...props}
-        endIcon={<Icon sdsIcon="chevronDown" sdsSize="s" sdsType="button" />}
+        endIcon={<Icon sdsIcon="ChevronDown" sdsSize="xs" sdsType="button" />}
         sdsStyle={sdsStyle}
         ref={ref}
         sdsType={sdsType}
diff --git a/packages/components/src/core/ButtonIcon/__storybook__/constants.tsx b/packages/components/src/core/ButtonIcon/__storybook__/constants.tsx
new file mode 100644
index 000000000..7f7f7b09c
--- /dev/null
+++ b/packages/components/src/core/ButtonIcon/__storybook__/constants.tsx
@@ -0,0 +1,46 @@
+import CustomSdsIcon from "src/common/storybook/customSdsIcon";
+import CustomSvgIcon from "src/common/storybook/customSvgIcon";
+import { SDSSizes, SDSTypes } from "./types";
+
+export const BUTTON_ICON_EXCLUDED_CONTROLS = [
+  "disabled",
+  "on",
+  "icon",
+  "sdsSize",
+  "sdsType",
+];
+
+export const BUTTON_ICON_SDS_TYPES: SDSTypes = [
+  "primary",
+  "secondary",
+  "tertiary",
+];
+
+export const BUTTON_ICON_SDS_SIZES: SDSSizes = ["large", "medium", "small"];
+
+export const BUTTON_ICON_ON_OPTIONS = [false, true];
+
+export const BUTTON_ICON_DISABLED_OPTIONS = [false, true];
+
+export const BUTTON_ICON_PSEUDO_STATES = [
+  "default",
+  "hover",
+  "active",
+  "focus",
+];
+
+export const BUTTON_ICON_ICON_OPTIONS = [
+  "DotsHorizontal",
+  "Virus",
+  "XMark",
+  <CustomSdsIcon key="customSdsIcon" />,
+  <CustomSvgIcon key="customIcon" />,
+];
+
+export const BUTTON_ICON_ICON_LABELS = [
+  "SDS Icon: DotsHorizontal",
+  "SDS Icon: Virus",
+  "SDS Icon: XMark",
+  "Custom SDS Icon",
+  "Custom Icon",
+];
diff --git a/packages/components/src/core/ButtonIcon/__storybook__/index.stories.tsx b/packages/components/src/core/ButtonIcon/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..a792e5cd7
--- /dev/null
+++ b/packages/components/src/core/ButtonIcon/__storybook__/index.stories.tsx
@@ -0,0 +1,116 @@
+import { Args, Meta } from "@storybook/react";
+import RawButtonIcon from "src/core/ButtonIcon";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { ButtonIcon } from "./stories/default";
+import {
+  BUTTON_ICON_EXCLUDED_CONTROLS,
+  BUTTON_ICON_ICON_LABELS,
+  BUTTON_ICON_ICON_OPTIONS,
+} from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { ScreenshotTestDemo } from "./stories/screenshots";
+
+export default {
+  argTypes: {
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+    icon: {
+      control: {
+        labels: BUTTON_ICON_ICON_LABELS,
+        type: "select",
+      },
+      mapping: BUTTON_ICON_ICON_OPTIONS,
+      options: Object.keys(BUTTON_ICON_ICON_OPTIONS),
+    },
+    on: {
+      control: {
+        type: "boolean",
+      },
+    },
+    sdsSize: {
+      control: {
+        type: "select",
+      },
+      options: ["small", "medium", "large"],
+    },
+    sdsType: {
+      control: {
+        type: "select",
+      },
+      options: ["primary", "secondary", "tertiary"],
+    },
+  },
+  component: ButtonIcon,
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+  title: "Components/ButtonIcon [wip]",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    "aria-label": "info",
+    disabled: false,
+    icon: "DotsHorizontal",
+    sdsSize: "large",
+    sdsType: "primary",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: BUTTON_ICON_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Screenshot test
+
+export const ScreenshotTest = {
+  parameters: {
+    controls: {
+      exclude: BUTTON_ICON_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <ScreenshotTestDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: BUTTON_ICON_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (): JSX.Element => {
+    return (
+      <RawButtonIcon
+        aria-label="dotsHorizontal"
+        data-testid="iconButton"
+        on
+        icon="DotsHorizontal"
+        sdsSize="medium"
+        sdsType="primary"
+      />
+    );
+  },
+};
diff --git a/packages/components/src/core/ButtonIcon/__storybook__/stories/default.tsx b/packages/components/src/core/ButtonIcon/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..1d68a76bb
--- /dev/null
+++ b/packages/components/src/core/ButtonIcon/__storybook__/stories/default.tsx
@@ -0,0 +1,21 @@
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import RawButtonIcon from "src/core/ButtonIcon";
+
+export const ButtonIcon = (props: Args): JSX.Element => {
+  const { icon, ...rest } = props;
+
+  const [on, setOn] = useState(false);
+  const handleButtonClick = () => setOn(!on);
+
+  return (
+    <RawButtonIcon
+      onClick={handleButtonClick}
+      on={on}
+      icon={icon}
+      sdsSize="medium"
+      sdsType="primary"
+      {...rest}
+    />
+  );
+};
diff --git a/packages/components/src/core/ButtonIcon/__storybook__/stories/livePreview.tsx b/packages/components/src/core/ButtonIcon/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..601b530bb
--- /dev/null
+++ b/packages/components/src/core/ButtonIcon/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,109 @@
+import { SDSAppTheme } from "src/core/styles";
+import { ButtonIcon } from "./default";
+
+export const LivePreviewDemo = (): JSX.Element => {
+  const spaces = SDSAppTheme?.spacing;
+
+  const livePreviewStyles: React.CSSProperties = {
+    alignItems: "center",
+    display: "grid",
+    gridColumnGap: "24px",
+    gridTemplateColumns: "repeat(7, min-content)",
+  };
+
+  return (
+    <div style={livePreviewStyles}>
+      <div style={{ display: "flex" }}>
+        <ButtonIcon
+          aria-label="grid"
+          style={{ marginRight: spaces?.xxs }}
+          icon="Grid"
+          sdsSize="large"
+          sdsType="primary"
+        />
+        <ButtonIcon
+          aria-label="grid"
+          style={{ marginRight: spaces?.xxs }}
+          icon="Grid"
+          sdsSize="large"
+          sdsType="primary"
+        />
+      </div>
+      <div style={{ display: "flex" }}>
+        <ButtonIcon
+          aria-label="infoSpeechBubble"
+          style={{ marginRight: spaces?.m }}
+          icon="InfoSpeechBubble"
+          sdsSize="large"
+          sdsType="secondary"
+        />
+        <ButtonIcon
+          aria-label="infoSpeechBubble"
+          style={{ marginRight: spaces?.m }}
+          icon="InfoSpeechBubble"
+          sdsSize="large"
+          sdsType="secondary"
+        />
+      </div>
+      <div>
+        <ButtonIcon
+          aria-label="xMark"
+          style={{ marginRight: spaces?.m }}
+          icon="XMark"
+          sdsSize="large"
+          sdsType="tertiary"
+        />
+      </div>
+      <div>
+        <ButtonIcon
+          aria-label="xMark"
+          style={{ marginRight: spaces?.m }}
+          icon="XMark"
+          sdsSize="medium"
+          sdsType="tertiary"
+        />
+      </div>
+      <div style={{ display: "flex" }}>
+        <ButtonIcon
+          aria-label="barChartVertical3"
+          style={{ marginRight: spaces?.s }}
+          icon="BarChartVertical3"
+          sdsSize="small"
+          sdsType="primary"
+        />
+        <ButtonIcon
+          aria-label="barChartVertical3"
+          style={{ marginRight: spaces?.s }}
+          icon="BarChartVertical3"
+          sdsSize="small"
+          sdsType="primary"
+        />
+      </div>
+      <div style={{ display: "flex" }}>
+        <ButtonIcon
+          aria-label="plusCircle"
+          style={{ marginRight: spaces?.s }}
+          icon="PlusCircle"
+          sdsSize="small"
+          sdsType="secondary"
+        />
+        <ButtonIcon
+          aria-label="plusCircle"
+          style={{ marginRight: spaces?.s }}
+          icon="PlusCircle"
+          sdsSize="small"
+          sdsType="secondary"
+        />
+      </div>
+      <div>
+        <ButtonIcon
+          aria-label="xMark"
+          style={{ marginRight: spaces?.s }}
+          icon="XMark"
+          sdsSize="small"
+          sdsType="tertiary"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/ButtonIcon/__storybook__/stories/screenshots.tsx b/packages/components/src/core/ButtonIcon/__storybook__/stories/screenshots.tsx
new file mode 100644
index 000000000..4feee1772
--- /dev/null
+++ b/packages/components/src/core/ButtonIcon/__storybook__/stories/screenshots.tsx
@@ -0,0 +1,237 @@
+import {
+  BUTTON_ICON_DISABLED_OPTIONS,
+  BUTTON_ICON_ON_OPTIONS,
+  BUTTON_ICON_PSEUDO_STATES,
+  BUTTON_ICON_SDS_SIZES,
+  BUTTON_ICON_SDS_TYPES,
+} from "../constants";
+import { SDSSizes, SDSTypes } from "../types";
+import { ButtonIcon } from "./default";
+
+export const ScreenshotTestDemo = (): JSX.Element => {
+  const DISPLAY_CONTENTS: React.CSSProperties = {
+    display: "contents",
+  };
+  const MID_LABEL: React.CSSProperties = {
+    borderStyle: "solid none none none",
+    gridColumn: "1 / 6",
+    justifySelf: "stretch",
+    paddingTop: 10,
+  };
+
+  // loop through all SDS_TYPES
+  return (
+    <>
+      {BUTTON_ICON_SDS_TYPES.map((sdsType) => {
+        return <ButtonIconTypeOption sdsType={sdsType} key={sdsType} />;
+      })}
+    </>
+  );
+
+  // loop through all SDS_SIZES + create headers for SDS_TYPES
+  function ButtonIconTypeOption({ sdsType }: { sdsType: SDSTypes[number] }) {
+    const LEVEL_STYLE: React.CSSProperties = {
+      columnGap: "20px",
+      display: "inline-grid",
+      fontFamily: "sans-serif",
+      marginRight: "50px",
+    };
+    const LABEL_STYLE: React.CSSProperties = {
+      fontSize: "2em",
+      gridColumn: "1 / 6",
+      marginBottom: 0,
+    };
+    return (
+      <div style={LEVEL_STYLE}>
+        <p style={LABEL_STYLE}>
+          Type: <b>{sdsType}</b>
+        </p>
+        {BUTTON_ICON_SDS_SIZES.map((sdsSize) => {
+          // primary and secondary types don't have medium size
+          if (
+            (sdsType === "primary" || sdsType === "secondary") &&
+            sdsSize === "medium"
+          ) {
+            return null;
+          }
+
+          return (
+            <ButtonIconSizeOption
+              sdsType={sdsType}
+              sdsSize={sdsSize}
+              key={sdsSize}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all ON_OPTIONS + create headers for SDS_SIZES
+  function ButtonIconSizeOption({
+    sdsType,
+    sdsSize,
+  }: {
+    sdsType: SDSTypes[number];
+    sdsSize: SDSSizes[number];
+  }) {
+    // establish which combinations have `on` as a prop (used below and passed to next loop)
+    const ON_LABEL_NEEDED =
+      (sdsType === "primary" && sdsSize === "large") ||
+      (sdsType === "secondary" && sdsSize === "small");
+    const LABEL_STYLE: React.CSSProperties = {
+      ...MID_LABEL,
+      borderWidth: "2px",
+      fontSize: "1.17em",
+      margin: "20px 0",
+    };
+
+    return (
+      <div style={DISPLAY_CONTENTS}>
+        <p style={LABEL_STYLE}>
+          Size: <b>{sdsSize}</b>
+        </p>
+        {BUTTON_ICON_ON_OPTIONS.map((on) => {
+          return (
+            // for the combinations with `on` as a prop, loop through all values for `on`(true, false)
+            // for the combinations without `on` as a prop, loop through only once
+            (ON_LABEL_NEEDED ||
+              ((sdsType === "tertiary" ||
+                (sdsType === "primary" && sdsSize === "small") ||
+                (sdsType === "secondary" && sdsSize === "large")) &&
+                on === false)) && (
+              <ButtonIconOnOption
+                sdsType={sdsType}
+                sdsSize={sdsSize}
+                on={on}
+                key={String(on)}
+                onLabelNeeded={ON_LABEL_NEEDED}
+              />
+            )
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all DISABLED_OPTIONS + create headers for ON_OPTIONS
+  function ButtonIconOnOption({
+    sdsType,
+    sdsSize,
+    on,
+    onLabelNeeded,
+  }: {
+    sdsType: SDSTypes[number];
+    sdsSize: SDSSizes[number];
+    on: (typeof BUTTON_ICON_ON_OPTIONS)[number];
+    onLabelNeeded: boolean;
+  }) {
+    const LABEL_STYLE: React.CSSProperties = {
+      ...MID_LABEL,
+      alignSelf: "end",
+      borderWidth: "1px",
+      fontSize: "0.83em",
+      fontWeight: "normal",
+      margin: "0 0 5px 0",
+    };
+    return (
+      <div style={DISPLAY_CONTENTS}>
+        {/* only show the "On: ..." label for combinations that have `on` as a prop */}
+        {onLabelNeeded && (
+          <p style={LABEL_STYLE}>
+            On: <b>{on ? "true" : "false"}</b>
+          </p>
+        )}
+        {BUTTON_ICON_DISABLED_OPTIONS.map((disabled) => {
+          return (
+            <ButtonIconDisabledOption
+              sdsType={sdsType}
+              sdsSize={sdsSize}
+              on={on}
+              disabled={disabled}
+              key={String(disabled)}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all PSEUDO_STATES + create headers for DISABLED_OPTIONS, PSEUDO_STATES
+  function ButtonIconDisabledOption({
+    sdsType,
+    sdsSize,
+    on,
+    disabled,
+  }: {
+    sdsType: SDSTypes[number];
+    sdsSize: SDSSizes[number];
+    on: (typeof BUTTON_ICON_ON_OPTIONS)[number];
+    disabled: (typeof BUTTON_ICON_DISABLED_OPTIONS)[number];
+  }) {
+    const SDS_ICONS = {
+      primary: {
+        large: "Grid",
+        small: "BarChartVertical3",
+      },
+      secondary: {
+        large: "InfoSpeechBubble",
+        small: "PlusCircle",
+      },
+      tertiary: {
+        large: "XMark",
+        medium: "XMark",
+        small: "XMark",
+      },
+    };
+    const DISABLED_LEVEL: React.CSSProperties = {
+      display: "contents",
+    };
+    const PSEUDO_STATE_LEVEL: React.CSSProperties = {
+      marginBottom: 10,
+    };
+    const PSEUDO_STATE_LABEL: React.CSSProperties = {
+      fontSize: "0.67em",
+      margin: "10px 0",
+    };
+
+    return (
+      <div style={DISABLED_LEVEL}>
+        {BUTTON_ICON_PSEUDO_STATES.map((state) => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore: invalid `icon` is skipped in <ButtonIconTypeOption />
+          const icon = SDS_ICONS[sdsType][sdsSize];
+
+          return (
+            <div style={PSEUDO_STATE_LEVEL} key={`div-${state}`}>
+              {/* remove irrelevant disabled iterations: when combined with all pseudo-states except default, `disabled=false` is impossible */}
+              {(disabled === false ||
+                (disabled === true && state === "default")) && (
+                <>
+                  <p style={PSEUDO_STATE_LABEL}>
+                    {disabled === false ? "State: " : "Disabled: "}
+                    <br />
+                    <b>{disabled === false ? state : "true"}</b>
+                  </p>
+                  <ButtonIcon
+                    aria-label={icon}
+                    icon={icon}
+                    data-testid="button-icon"
+                    sdsType={sdsType}
+                    sdsSize={sdsSize}
+                    on={on}
+                    disabled={disabled}
+                    className={`pseudo-${state}`}
+                    key={state}
+                  />
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // }, // close render
+};
diff --git a/packages/components/src/core/ButtonIcon/__storybook__/types.ts b/packages/components/src/core/ButtonIcon/__storybook__/types.ts
new file mode 100644
index 000000000..88e0dcd00
--- /dev/null
+++ b/packages/components/src/core/ButtonIcon/__storybook__/types.ts
@@ -0,0 +1,12 @@
+import {
+  ButtonIconExtraProps,
+  ButtonIconSizeToTypes,
+} from "src/core/ButtonIcon/style";
+
+export type SDSTypes = NonNullable<
+  | ButtonIconExtraProps<"small">["sdsType"]
+  | ButtonIconExtraProps<"medium">["sdsType"]
+  | ButtonIconExtraProps<"large">["sdsType"]
+>[];
+
+export type SDSSizes = (keyof ButtonIconSizeToTypes)[];
diff --git a/packages/components/src/core/ButtonIcon/ButtonIcon.namespace-test.tsx b/packages/components/src/core/ButtonIcon/__tests__/ButtonIcon.namespace-test.tsx
similarity index 68%
rename from packages/components/src/core/ButtonIcon/ButtonIcon.namespace-test.tsx
rename to packages/components/src/core/ButtonIcon/__tests__/ButtonIcon.namespace-test.tsx
index adeb3303a..637164ec2 100644
--- a/packages/components/src/core/ButtonIcon/ButtonIcon.namespace-test.tsx
+++ b/packages/components/src/core/ButtonIcon/__tests__/ButtonIcon.namespace-test.tsx
@@ -2,11 +2,11 @@ import { ButtonIcon, ButtonIconProps, Icon } from "@czi-sds/components";
 import React from "react";
 
 const ButtonIconNameSpaceTest = (
-  props: ButtonIconProps<"download", "large">
+  props: ButtonIconProps<"Download", "large">
 ) => {
   return (
     <ButtonIcon size="large" sdsType="primary" {...props}>
-      <Icon sdsIcon="download" sdsSize="l" sdsType="button" />
+      <Icon sdsIcon="Download" sdsSize="l" sdsType="button" />
     </ButtonIcon>
   );
 };
diff --git a/packages/components/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
similarity index 89%
rename from packages/components/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
index 97a893d94..c0cb16a98 100644
--- a/packages/components/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<ButtonIcon /> Default story renders snapshot 1`] = `
 <button
   aria-label="info"
   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1dufxsi-MuiButtonBase-root-MuiIconButton-root"
-  icon="dotsHorizontal"
+  icon="DotsHorizontal"
   tabindex="0"
   type="button"
 >
@@ -18,7 +18,9 @@ exports[`<ButtonIcon /> Default story renders snapshot 1`] = `
       data-testid="IconDotsHorizontal3Large"
       fillcontrast="white"
       focusable="false"
-      viewBox="0 0 22 22"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
     />
   </div>
   <span
diff --git a/packages/components/src/core/ButtonIcon/index.test.tsx b/packages/components/src/core/ButtonIcon/__tests__/index.test.tsx
similarity index 90%
rename from packages/components/src/core/ButtonIcon/index.test.tsx
rename to packages/components/src/core/ButtonIcon/__tests__/index.test.tsx
index e9baff15f..c562f1cdd 100644
--- a/packages/components/src/core/ButtonIcon/index.test.tsx
+++ b/packages/components/src/core/ButtonIcon/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/ButtonIcon/index.stories.tsx b/packages/components/src/core/ButtonIcon/index.stories.tsx
deleted file mode 100644
index b19a0c513..000000000
--- a/packages/components/src/core/ButtonIcon/index.stories.tsx
+++ /dev/null
@@ -1,483 +0,0 @@
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import { defaultAppTheme } from "../styles";
-import RawButtonIcon from "./index";
-import { ButtonIconExtraProps, ButtonIconSizeToTypes } from "./style";
-import CustomSvgIcon from "src/common/customSvgIcon";
-import CustomSdsIcon from "src/common/customSdsIcon";
-
-type SDSTypes = NonNullable<
-  | ButtonIconExtraProps<"small">["sdsType"]
-  | ButtonIconExtraProps<"medium">["sdsType"]
-  | ButtonIconExtraProps<"large">["sdsType"]
->[];
-
-type SDSSizes = (keyof ButtonIconSizeToTypes)[];
-
-const SDS_TYPES: SDSTypes = ["primary", "secondary", "tertiary"];
-const SDS_SIZES: SDSSizes = ["large", "medium", "small"];
-const ON_OPTIONS = [false, true];
-const DISABLED_OPTIONS = [false, true];
-const PSEUDO_STATES = ["default", "hover", "active", "focus"];
-const ICON_OPTIONS = [
-  "dotsHorizontal",
-  "virus",
-  "xMark",
-  <CustomSdsIcon key="customSdsIcon" />,
-  <CustomSvgIcon key="customIcon" />,
-];
-
-const ButtonIcon = (props: Args): JSX.Element => {
-  const { icon, ...rest } = props;
-
-  const [on, setOn] = React.useState(false);
-  const handleButtonClick = () => setOn(!on);
-
-  return (
-    <RawButtonIcon
-      onClick={handleButtonClick}
-      on={on}
-      icon={icon}
-      sdsSize="medium"
-      sdsType="primary"
-      {...rest}
-    />
-  );
-};
-
-export default {
-  argTypes: {
-    disabled: {
-      control: {
-        type: "boolean",
-      },
-    },
-    icon: {
-      control: {
-        labels: [
-          "SDS Icon: dotsHorizontal",
-          "SDS Icon: virus",
-          "SDS Icon: xMark",
-          "Custom SDS Icon",
-          "Custom Icon",
-        ],
-        type: "select",
-      },
-      mapping: ICON_OPTIONS,
-      options: Object.keys(ICON_OPTIONS),
-    },
-    on: {
-      control: {
-        type: "boolean",
-      },
-    },
-    sdsSize: {
-      control: {
-        type: "select",
-      },
-      options: ["small", "medium", "large"],
-    },
-    sdsType: {
-      control: {
-        type: "select",
-      },
-      options: ["primary", "secondary", "tertiary"],
-    },
-  },
-  component: ButtonIcon,
-  title: "ButtonIcon",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    "aria-label": "info",
-    disabled: false,
-    icon: "dotsHorizontal",
-    sdsSize: "large",
-    sdsType: "primary",
-  },
-};
-
-// Live Preview
-
-const LivePreviewDemo = (): JSX.Element => {
-  const spacings = defaultAppTheme?.spacing;
-
-  const livePreviewStyles: React.CSSProperties = {
-    alignItems: "center",
-    display: "grid",
-    gridColumnGap: "24px",
-    gridTemplateColumns: "repeat(7, min-content)",
-  };
-
-  return (
-    <div style={livePreviewStyles}>
-      <div style={{ display: "flex" }}>
-        <ButtonIcon
-          aria-label="grid"
-          style={{ marginRight: spacings?.xxs }}
-          icon="grid"
-          sdsSize="large"
-          sdsType="primary"
-        />
-        <ButtonIcon
-          aria-label="grid"
-          style={{ marginRight: spacings?.xxs }}
-          icon="grid"
-          sdsSize="large"
-          sdsType="primary"
-        />
-      </div>
-      <div style={{ display: "flex" }}>
-        <ButtonIcon
-          aria-label="infoSpeechBubble"
-          style={{ marginRight: spacings?.m }}
-          icon="infoSpeechBubble"
-          sdsSize="large"
-          sdsType="secondary"
-        />
-        <ButtonIcon
-          aria-label="infoSpeechBubble"
-          style={{ marginRight: spacings?.m }}
-          icon="infoSpeechBubble"
-          sdsSize="large"
-          sdsType="secondary"
-        />
-      </div>
-      <div>
-        <ButtonIcon
-          aria-label="xMark"
-          style={{ marginRight: spacings?.m }}
-          icon="xMark"
-          sdsSize="large"
-          sdsType="tertiary"
-        />
-      </div>
-      <div>
-        <ButtonIcon
-          aria-label="xMark"
-          style={{ marginRight: spacings?.m }}
-          icon="xMark"
-          sdsSize="medium"
-          sdsType="tertiary"
-        />
-      </div>
-      <div style={{ display: "flex" }}>
-        <ButtonIcon
-          aria-label="barChartVertical3"
-          style={{ marginRight: spacings?.s }}
-          icon="barChartVertical3"
-          sdsSize="small"
-          sdsType="primary"
-        />
-        <ButtonIcon
-          aria-label="barChartVertical3"
-          style={{ marginRight: spacings?.s }}
-          icon="barChartVertical3"
-          sdsSize="small"
-          sdsType="primary"
-        />
-      </div>
-      <div style={{ display: "flex" }}>
-        <ButtonIcon
-          aria-label="plusCircle"
-          style={{ marginRight: spacings?.s }}
-          icon="plusCircle"
-          sdsSize="small"
-          sdsType="secondary"
-        />
-        <ButtonIcon
-          aria-label="plusCircle"
-          style={{ marginRight: spacings?.s }}
-          icon="plusCircle"
-          sdsSize="small"
-          sdsType="secondary"
-        />
-      </div>
-      <div>
-        <ButtonIcon
-          aria-label="xMark"
-          style={{ marginRight: spacings?.s }}
-          icon="xMark"
-          sdsSize="small"
-          sdsType="tertiary"
-        />
-      </div>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Screenshot test
-
-const ScreenshotTestDemo = (): JSX.Element => {
-  const DISPLAY_CONTENTS: React.CSSProperties = {
-    display: "contents",
-  };
-  const MID_LABEL: React.CSSProperties = {
-    borderStyle: "solid none none none",
-    gridColumn: "1 / 6",
-    justifySelf: "stretch",
-    paddingTop: 10,
-  };
-
-  // loop through all SDS_TYPES
-  return (
-    <>
-      {SDS_TYPES.map((sdsType) => {
-        return <ButtonIconTypeOption sdsType={sdsType} key={sdsType} />;
-      })}
-    </>
-  );
-
-  // loop through all SDS_SIZES + create headers for SDS_TYPES
-  function ButtonIconTypeOption({ sdsType }: { sdsType: SDSTypes[number] }) {
-    const LEVEL_STYLE: React.CSSProperties = {
-      columnGap: "20px",
-      display: "inline-grid",
-      fontFamily: "sans-serif",
-      marginRight: "50px",
-    };
-    const LABEL_STYLE: React.CSSProperties = {
-      fontSize: "2em",
-      gridColumn: "1 / 6",
-      marginBottom: 0,
-    };
-    return (
-      <div style={LEVEL_STYLE}>
-        <p style={LABEL_STYLE}>
-          Type: <b>{sdsType}</b>
-        </p>
-        {SDS_SIZES.map((sdsSize) => {
-          // primary and secondary types don't have medium size
-          if (
-            (sdsType === "primary" || sdsType === "secondary") &&
-            sdsSize === "medium"
-          ) {
-            return null;
-          }
-
-          return (
-            <ButtonIconSizeOption
-              sdsType={sdsType}
-              sdsSize={sdsSize}
-              key={sdsSize}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-
-  // loop through all ON_OPTIONS + create headers for SDS_SIZES
-  function ButtonIconSizeOption({
-    sdsType,
-    sdsSize,
-  }: {
-    sdsType: SDSTypes[number];
-    sdsSize: SDSSizes[number];
-  }) {
-    // establish which combinations have `on` as a prop (used below and passed to next loop)
-    const ON_LABEL_NEEDED =
-      (sdsType === "primary" && sdsSize === "large") ||
-      (sdsType === "secondary" && sdsSize === "small");
-    const LABEL_STYLE: React.CSSProperties = {
-      ...MID_LABEL,
-      borderWidth: "2px",
-      fontSize: "1.17em",
-      margin: "20px 0",
-    };
-
-    return (
-      <div style={DISPLAY_CONTENTS}>
-        <p style={LABEL_STYLE}>
-          Size: <b>{sdsSize}</b>
-        </p>
-        {ON_OPTIONS.map((on) => {
-          return (
-            // for the combinations with `on` as a prop, loop through all values for `on`(true, false)
-            // for the combinations without `on` as a prop, loop through only once
-            (ON_LABEL_NEEDED ||
-              ((sdsType === "tertiary" ||
-                (sdsType === "primary" && sdsSize === "small") ||
-                (sdsType === "secondary" && sdsSize === "large")) &&
-                on === false)) && (
-              <ButtonIconOnOption
-                sdsType={sdsType}
-                sdsSize={sdsSize}
-                on={on}
-                key={String(on)}
-                onLabelNeeded={ON_LABEL_NEEDED}
-              />
-            )
-          );
-        })}
-      </div>
-    );
-  }
-
-  // loop through all DISABLED_OPTIONS + create headers for ON_OPTIONS
-  function ButtonIconOnOption({
-    sdsType,
-    sdsSize,
-    on,
-    onLabelNeeded,
-  }: {
-    sdsType: SDSTypes[number];
-    sdsSize: SDSSizes[number];
-    on: (typeof ON_OPTIONS)[number];
-    onLabelNeeded: boolean;
-  }) {
-    const LABEL_STYLE: React.CSSProperties = {
-      ...MID_LABEL,
-      alignSelf: "end",
-      borderWidth: "1px",
-      fontSize: "0.83em",
-      fontWeight: "normal",
-      margin: "0 0 5px 0",
-    };
-    return (
-      <div style={DISPLAY_CONTENTS}>
-        {/* only show the "On: ..." label for combinations that have `on` as a prop */}
-        {onLabelNeeded && (
-          <p style={LABEL_STYLE}>
-            On: <b>{on ? "true" : "false"}</b>
-          </p>
-        )}
-        {DISABLED_OPTIONS.map((disabled) => {
-          return (
-            <ButtonIconDisabledOption
-              sdsType={sdsType}
-              sdsSize={sdsSize}
-              on={on}
-              disabled={disabled}
-              key={String(disabled)}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-
-  // loop through all PSEUDO_STATES + create headers for DISABLED_OPTIONS, PSEUDO_STATES
-  function ButtonIconDisabledOption({
-    sdsType,
-    sdsSize,
-    on,
-    disabled,
-  }: {
-    sdsType: SDSTypes[number];
-    sdsSize: SDSSizes[number];
-    on: (typeof ON_OPTIONS)[number];
-    disabled: (typeof DISABLED_OPTIONS)[number];
-  }) {
-    const SDS_ICONS = {
-      primary: {
-        large: "grid",
-        small: "barChartVertical3",
-      },
-      secondary: {
-        large: "infoSpeechBubble",
-        small: "plusCircle",
-      },
-      tertiary: {
-        large: "xMark",
-        medium: "xMark",
-        small: "xMark",
-      },
-    };
-    const DISABLED_LEVEL: React.CSSProperties = {
-      display: "contents",
-    };
-    const PSEUDO_STATE_LEVEL: React.CSSProperties = {
-      marginBottom: 10,
-    };
-    const PSEUDO_STATE_LABEL: React.CSSProperties = {
-      fontSize: "0.67em",
-      margin: "10px 0",
-    };
-
-    return (
-      <div style={DISABLED_LEVEL}>
-        {PSEUDO_STATES.map((state) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore: invalid `icon` is skipped in <ButtonIconTypeOption />
-          const icon = SDS_ICONS[sdsType][sdsSize];
-
-          return (
-            <div style={PSEUDO_STATE_LEVEL} key={`div-${state}`}>
-              {/* remove irrelevant disabled iterations: when combined with all pseudo-states except default, `disabled=false` is impossible */}
-              {(disabled === false ||
-                (disabled === true && state === "default")) && (
-                <>
-                  <p style={PSEUDO_STATE_LABEL}>
-                    {disabled === false ? "State: " : "Disabled: "}
-                    <br />
-                    <b>{disabled === false ? state : "true"}</b>
-                  </p>
-                  <ButtonIcon
-                    aria-label={icon}
-                    icon={icon}
-                    data-testid="button-icon"
-                    sdsType={sdsType}
-                    sdsSize={sdsSize}
-                    on={on}
-                    disabled={disabled}
-                    className={`pseudo-${state}`}
-                    key={state}
-                  />
-                </>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  // }, // close render
-}; // close ScreenshotTest
-
-export const ScreenshotTest = {
-  parameters: {
-    controls: {
-      exclude: ["disabled", "on", "icon", "sdsSize", "sdsType"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <ScreenshotTestDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (): JSX.Element => {
-    return (
-      <RawButtonIcon
-        aria-label="dotsHorizontal"
-        data-testid="iconButton"
-        on
-        icon="dotsHorizontal"
-        sdsSize="medium"
-        sdsType="primary"
-      />
-    );
-  },
-};
diff --git a/packages/components/src/core/ButtonIcon/index.tsx b/packages/components/src/core/ButtonIcon/index.tsx
index 4c18b92ea..7ad132b03 100644
--- a/packages/components/src/core/ButtonIcon/index.tsx
+++ b/packages/components/src/core/ButtonIcon/index.tsx
@@ -1,6 +1,6 @@
 import { IconButtonProps as RawButtonIconProps } from "@mui/material";
 import { ForwardedRef, forwardRef } from "react";
-import Icon, { IconNameToSizes, IconProps } from "../Icon";
+import Icon, { IconNameToSizes, IconProps } from "src/core/Icon";
 import {
   ButtonIconExtraProps,
   ButtonIconSizeToTypes,
diff --git a/packages/components/src/core/ButtonIcon/style.ts b/packages/components/src/core/ButtonIcon/style.ts
index 2843c2aa4..70c69a014 100644
--- a/packages/components/src/core/ButtonIcon/style.ts
+++ b/packages/components/src/core/ButtonIcon/style.ts
@@ -11,7 +11,7 @@ import {
   getColors,
   getIconSizes,
   getPalette,
-} from "../styles";
+} from "src/core/styles";
 
 export interface ButtonIconSizeToTypes {
   small: "primary" | "secondary" | "tertiary";
@@ -36,12 +36,10 @@ const isOn = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   return css`
     ${sdsType !== "tertiary" &&
     `
-      color: ${
-        sdsType === "primary" ? colors?.primary[600] : colors?.primary[400]
-      };
+      color: ${sdsType === "primary" ? colors?.blue[600] : colors?.blue[400]};
 
       &:hover {
-        color: ${colors?.primary[600]};
+        color: ${colors?.blue[600]};
       }
     `}
   `;
@@ -66,17 +64,15 @@ const primary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   const { sdsSize } = props;
 
   return css`
-    color: ${colors?.primary[400]};
+    color: ${colors?.blue[400]};
 
     &:hover {
       background: ${colors?.gray[200]};
-      color: ${sdsSize === "small"
-        ? colors?.primary[600]
-        : colors?.primary[400]};
+      color: ${sdsSize === "small" ? colors?.blue[600] : colors?.blue[400]};
     }
 
     &:active {
-      color: ${colors?.primary[600]};
+      color: ${colors?.blue[600]};
     }
   `;
 };
@@ -92,7 +88,7 @@ const secondary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
     &:hover,
     &:active {
       background: none;
-      color: ${colors?.primary[400]};
+      color: ${colors?.blue[400]};
     }
   `;
 };
diff --git a/packages/components/src/core/Callout/__storybook__/constants.tsx b/packages/components/src/core/Callout/__storybook__/constants.tsx
new file mode 100644
index 000000000..47854bf3c
--- /dev/null
+++ b/packages/components/src/core/Callout/__storybook__/constants.tsx
@@ -0,0 +1,20 @@
+import { action } from "@storybook/addon-actions";
+import CustomSdsIcon from "src/common/storybook/customSdsIcon";
+import CustomSvgIcon from "src/common/storybook/customSvgIcon";
+
+export const CALLOUT_EXCLUDED_CONTROLS = [
+  "autoDismiss",
+  "expandable",
+  "icon",
+  "intent",
+  "onClose",
+];
+
+export const CALLOUT_ICON_OPTIONS = [
+  <CustomSvgIcon key="customSdsIcon" />,
+  <CustomSdsIcon key="customSvgIcon" />,
+  "Book",
+  "CheckCircle",
+];
+
+export const CALLOUT_ON_CLOSE_OPTIONS = [action("onClick"), undefined];
diff --git a/packages/components/src/core/Callout/__storybook__/index.stories.tsx b/packages/components/src/core/Callout/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..b4d00493c
--- /dev/null
+++ b/packages/components/src/core/Callout/__storybook__/index.stories.tsx
@@ -0,0 +1,74 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import {
+  CALLOUT_EXCLUDED_CONTROLS,
+  CALLOUT_ICON_OPTIONS,
+  CALLOUT_ON_CLOSE_OPTIONS,
+} from "./constants";
+import { Callout } from "./stories/default";
+import { LivePreviewDemo } from "./stories/livePreview";
+
+export default {
+  argTypes: {
+    autoDismiss: {
+      control: { type: "select" },
+      options: [true, false, 4000, 12000, 20000],
+    },
+    expandable: {
+      control: {
+        type: "boolean",
+      },
+    },
+    icon: {
+      control: {
+        labels: [
+          "Custom SVG Icon",
+          "Custom SDS Icon",
+          "SDS Icon: Book",
+          "SDS Icon: Check Circle",
+        ],
+        type: "select",
+      },
+      mapping: CALLOUT_ICON_OPTIONS,
+      options: Object.keys(CALLOUT_ICON_OPTIONS),
+    },
+    intent: {
+      control: { type: "radio" },
+      options: ["info", "negative", "positive", "notice"],
+    },
+    onClose: {
+      control: {
+        labels: ["() => {}", "undefined"],
+        type: "select",
+      },
+      mapping: CALLOUT_ON_CLOSE_OPTIONS,
+      options: Object.keys(CALLOUT_ON_CLOSE_OPTIONS),
+    },
+  },
+  component: Callout,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Callout",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    autoDismiss: false,
+    calloutTitle: "Callout title.",
+    onClose: false,
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: CALLOUT_EXCLUDED_CONTROLS,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
diff --git a/packages/components/src/core/Callout/__storybook__/stories/default.tsx b/packages/components/src/core/Callout/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..de7637167
--- /dev/null
+++ b/packages/components/src/core/Callout/__storybook__/stories/default.tsx
@@ -0,0 +1,46 @@
+import { FormControlLabel } from "@mui/material";
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import RawCallout from "src/core/Callout";
+import InputToggle from "src/core/InputToggle";
+import CalloutTitle from "src/core/Callout/components/CalloutTitle";
+import { EXTRA_SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+
+export const Callout = (props: Args): JSX.Element => {
+  const { intent, onClose, calloutTitle, autoDismiss, ...rest } = props;
+
+  const [dismissed, setDismissed] = useState(false);
+
+  const handleChange = () => {
+    setDismissed((prev) => !prev);
+  };
+
+  const finalOnclose = !onClose ? undefined : () => setDismissed(true);
+
+  return (
+    <>
+      {!autoDismiss && (
+        <FormControlLabel
+          control={<InputToggle checked={dismissed} onChange={handleChange} />}
+          label="Hide Callout"
+          sx={{
+            "& .MuiSwitch-root": {
+              mr: "12px",
+            },
+            margin: "0 0 16px 0",
+          }}
+        />
+      )}
+      <RawCallout
+        autoDismiss={autoDismiss}
+        intent={intent}
+        dismissed={dismissed}
+        onClose={finalOnclose}
+        {...rest}
+      >
+        {calloutTitle && <CalloutTitle>{calloutTitle}</CalloutTitle>}
+        {EXTRA_SHORT_LOREM_IPSUM}
+      </RawCallout>
+    </>
+  );
+};
diff --git a/packages/components/src/core/Callout/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Callout/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..3ae4add27
--- /dev/null
+++ b/packages/components/src/core/Callout/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,44 @@
+import { Args } from "@storybook/react";
+import RawCallout from "src/core/Callout";
+import CalloutTitle from "src/core/Callout/components/CalloutTitle";
+
+const storyRow = {
+  alignItems: "flex-start",
+  display: "flex",
+  flexDirection: "row",
+  gap: "20px",
+};
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <div style={storyRow as React.CSSProperties}>
+      <RawCallout intent="info" {...props} style={{ width: "180px" }}>
+        Title
+      </RawCallout>
+      <RawCallout intent="info" {...props} style={{ width: "180px" }}>
+        <CalloutTitle>Title</CalloutTitle>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      </RawCallout>
+      <RawCallout
+        intent="info"
+        expandable
+        sdsStage="closed"
+        {...props}
+        style={{ width: "180px" }}
+      >
+        <CalloutTitle>Title</CalloutTitle>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      </RawCallout>
+      <RawCallout
+        intent="info"
+        {...props}
+        // eslint-disable-next-line no-alert
+        onClose={() => alert("callout closed")}
+        style={{ width: "180px" }}
+      >
+        <CalloutTitle>Title</CalloutTitle>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      </RawCallout>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/Callout/Callout.namespace-test.tsx b/packages/components/src/core/Callout/__tests__/Callout.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Callout/Callout.namespace-test.tsx
rename to packages/components/src/core/Callout/__tests__/Callout.namespace-test.tsx
diff --git a/packages/components/src/core/Callout/components/CalloutTitle/index.tsx b/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
index 6ffd26568..f02e93e09 100644
--- a/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
+++ b/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
@@ -1,5 +1,5 @@
 import { AlertTitleProps } from "@mui/material/AlertTitle";
-import { CALLOUT_TITLE_DISPLAY_NAME } from "../../constants";
+import { CALLOUT_TITLE_DISPLAY_NAME } from "src/core/Callout/constants";
 import { StyledCalloutTitle } from "./style";
 
 const CalloutTitle = ({ children }: AlertTitleProps): JSX.Element => {
diff --git a/packages/components/src/core/Callout/components/CalloutTitle/style.ts b/packages/components/src/core/Callout/components/CalloutTitle/style.ts
index 1cd4f39e6..b98c239be 100644
--- a/packages/components/src/core/Callout/components/CalloutTitle/style.ts
+++ b/packages/components/src/core/Callout/components/CalloutTitle/style.ts
@@ -1,17 +1,15 @@
 import { AlertTitle } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { fontBody, getSpaces } from "src/core/styles";
-
-const fontBodyXs = fontBody("xs");
+import { fontBodyXs, getSpaces } from "src/core/styles";
 
 export const StyledCalloutTitle = styled(AlertTitle)`
   ${fontBodyXs}
 
   ${(props) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
-    margin: ${spacings?.xxxs}px 0 ${spacings?.xs}px;
-  `;
+      margin: ${spaces?.xxxs}px 0 ${spaces?.xs}px;
+    `;
   }}
 `;
diff --git a/packages/components/src/core/Callout/index.stories.tsx b/packages/components/src/core/Callout/index.stories.tsx
deleted file mode 100644
index 0e134b775..000000000
--- a/packages/components/src/core/Callout/index.stories.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { FormControlLabel, Switch } from "@mui/material";
-import { action } from "@storybook/addon-actions";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import Button from "../Button";
-import CalloutTitle from "./components/CalloutTitle";
-import RawCallout from "./index";
-import CustomSdsIcon from "src/common/customSdsIcon";
-import CustomSvgIcon from "src/common/customSvgIcon";
-
-const iconOptions = [
-  <CustomSvgIcon key="customSdsIcon" sx={{ height: 22, width: 22 }} />,
-  <CustomSdsIcon key="customSvgIcon" />,
-  "book",
-  "checkCircle",
-];
-
-const Callout = (props: Args): JSX.Element => {
-  const { intent, onClose, calloutTitle, autoDismiss } = props;
-
-  const [dismissed, setDismissed] = React.useState(false);
-
-  const handleChange = () => {
-    setDismissed((prev) => !prev);
-  };
-
-  return (
-    <>
-      {!autoDismiss && (
-        <FormControlLabel
-          control={<Switch checked={dismissed} onChange={handleChange} />}
-          label="Hide"
-        />
-      )}
-      <RawCallout
-        autoDismiss={autoDismiss}
-        intent={intent}
-        dismissed={dismissed}
-        onClose={onClose}
-        {...props}
-      >
-        {calloutTitle && <CalloutTitle>{calloutTitle}</CalloutTitle>}
-        This is a callout!
-      </RawCallout>
-      <Button onClick={handleChange} sdsType="primary" sdsStyle="rounded">
-        Reset Callout
-      </Button>
-    </>
-  );
-};
-
-export default {
-  argTypes: {
-    autoDismiss: {
-      control: { type: "select" },
-      options: [true, false, 4000, 12000, 20000],
-    },
-    expandable: {
-      control: {
-        type: "boolean",
-      },
-    },
-    icon: {
-      control: {
-        labels: [
-          "Custom SVG Icon",
-          "Custom SDS Icon",
-          "SDS Icon: Book",
-          "SDS Icon: Check Circle",
-        ],
-        type: "select",
-      },
-      mapping: iconOptions,
-      options: Object.keys(iconOptions),
-    },
-    intent: {
-      control: { type: "radio" },
-      options: ["info", "error", "success", "warning"],
-    },
-    onClose: {
-      control: {
-        labels: {
-          "() => {}": true,
-          undefined,
-        },
-        type: "select",
-      },
-      options: [action("onClick"), undefined],
-    },
-  },
-  component: Callout,
-  title: "Callout",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    autoDismiss: false,
-    calloutTitle: "this is a title",
-    intent: "success",
-    onClose: false,
-  },
-};
-
-// Live Preview
-
-const storyRow = {
-  alignItems: "flex-start",
-  display: "flex",
-  flexDirection: "row",
-  gap: "20px",
-};
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  return (
-    <div style={storyRow as React.CSSProperties}>
-      <RawCallout intent="info" {...props} style={{ width: "180px" }}>
-        Title
-      </RawCallout>
-      <RawCallout intent="info" {...props} style={{ width: "180px" }}>
-        <CalloutTitle>Title</CalloutTitle>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </RawCallout>
-      <RawCallout
-        intent="info"
-        expandable
-        sdsStage="closed"
-        {...props}
-        style={{ width: "180px" }}
-      >
-        <CalloutTitle>Title</CalloutTitle>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </RawCallout>
-      <RawCallout
-        intent="info"
-        {...props}
-        // eslint-disable-next-line no-alert
-        onClose={() => alert("callout closed")}
-        style={{ width: "180px" }}
-      >
-        <CalloutTitle>Title</CalloutTitle>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit
-      </RawCallout>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
diff --git a/packages/components/src/core/Callout/index.tsx b/packages/components/src/core/Callout/index.tsx
index cc737a81f..1b1811fe3 100644
--- a/packages/components/src/core/Callout/index.tsx
+++ b/packages/components/src/core/Callout/index.tsx
@@ -1,24 +1,26 @@
 import { AlertProps } from "@mui/lab";
 import { Grow } from "@mui/material";
 import React, { useEffect, useState } from "react";
-import ButtonIcon from "../ButtonIcon";
-import Icon, { IconNameToSizes, IconProps } from "../Icon";
+import ButtonIcon from "src/core/ButtonIcon";
+import Icon, { IconNameToSizes, IconProps } from "src/core/Icon";
 import { CALLOUT_TITLE_DISPLAY_NAME } from "./constants";
 import { StyledCallout } from "./style";
 
 const SDS_STAGE_OPEN = "open";
 const SDS_STAGE_CLOSED = "closed";
+
+export type CalloutIntentType = "info" | "negative" | "notice" | "positive";
 export interface CalloutProps {
   autoDismiss?: boolean | number;
   dismissed?: boolean;
   expandable?: boolean;
   icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
   sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
-  intent: "info" | "error" | "success" | "warning";
+  intent: CalloutIntentType;
   sdsStage?: typeof SDS_STAGE_CLOSED | typeof SDS_STAGE_OPEN;
 }
 
-export type ExposedCalloutProps = AlertProps & CalloutProps;
+export type ExposedCalloutProps = Omit<AlertProps, "severity"> & CalloutProps;
 
 /**
  * @see https://mui.com/material-ui/react-alert/
@@ -70,15 +72,15 @@ const Callout = ({
       }
     } else {
       switch (intent) {
-        case "success":
-          return <Icon sdsSize="l" sdsIcon="checkCircle" sdsType="static" />;
+        case "positive":
+          return <Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="static" />;
         case "info":
-          return <Icon sdsSize="l" sdsIcon="infoCircle" sdsType="static" />;
+          return <Icon sdsSize="l" sdsIcon="InfoCircle" sdsType="static" />;
         default:
           return (
             <Icon
               sdsSize="l"
-              sdsIcon="exclamationMarkCircle"
+              sdsIcon="ExclamationMarkCircle"
               sdsType="static"
             />
           );
@@ -96,7 +98,7 @@ const Callout = ({
           }}
           sdsSize="small"
           sdsType="tertiary"
-          icon={collapsed ? "chevronDown" : "chevronUp"}
+          icon={collapsed ? "ChevronDown" : "ChevronUp"}
         />
       );
     }
@@ -107,7 +109,7 @@ const Callout = ({
         sdsSize="small"
         sdsType="tertiary"
         size="large"
-        icon="xMark"
+        icon="XMark"
       />
     ) : null;
   };
@@ -134,7 +136,7 @@ const Callout = ({
           onClose={onClose ? handleClose : undefined}
           action={getAction(collapsed)}
           icon={getIcon()}
-          severity={intent}
+          intent={intent}
           collapsed={collapsed || false}
           {...rest}
         >
diff --git a/packages/components/src/core/Callout/style.ts b/packages/components/src/core/Callout/style.ts
index f4183797c..e83abc68f 100644
--- a/packages/components/src/core/Callout/style.ts
+++ b/packages/components/src/core/Callout/style.ts
@@ -1,79 +1,99 @@
-import { Alert, AlertProps } from "@mui/material";
+import {
+  Alert,
+  AlertProps,
+  alertClasses,
+  alertTitleClasses,
+} from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
-  fontBody,
-  getColors,
+  fontBodyXs,
   getCorners,
   getIconSizes,
   getPalette,
+  getSemanticComponentColors,
   getSpaces,
-} from "../styles";
+  getTypography,
+} from "src/core/styles";
+import { CalloutIntentType } from "src/core/Callout";
 
 interface CalloutExtraProps extends CommonThemeProps {
   collapsed?: boolean;
+  intent?: CalloutIntentType;
 }
 
-type CalloutProps = AlertProps & CalloutExtraProps;
-
-const fontBodyXs = fontBody("xs");
+type CalloutProps = Omit<AlertProps, "severity"> & CalloutExtraProps;
 
-const doNotForwardProps = ["calloutTitle", "collapsed"];
+const doNotForwardProps = ["calloutTitle", "collapsed", "severity"];
 
 export const StyledCallout = styled(Alert, {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
   ${fontBodyXs}
   ${(props: CalloutProps) => {
-    const colors = getColors(props);
-    const spacings = getSpaces(props);
-    const { severity = "success" } = props;
+    const { intent = "info" } = props;
+
+    const spaces = getSpaces(props);
     const corners = getCorners(props);
     const iconSizes = getIconSizes(props);
-    const iconColor = (colors && colors[severity][400]) || "black";
-    const calloutColor = (colors && colors[severity][100]) || "white";
-    const backgroundColor = colors && colors[severity][100];
     const palette = getPalette(props);
+    const typography = getTypography(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
+
+    const iconColor = semanticComponentColors?.[intent]?.icon ?? "black";
+    const backgroundColor =
+      semanticComponentColors?.[intent]?.surface ?? "white";
 
     // when a title is present Mui's default styling has vertical margin,
     // but for an expandable callout that is collapsed, we do not want
     // any bottom margin
     const titleBottomMargin = props.collapsed ? "margin-bottom: 0;" : "";
 
+    // (masoudmanson): The Callout Icon should be vertically centered with the Callout
+    // Title. The padding-top of the Callout Message is calculated based on the difference
+    // between the height of the Icon and the line-height of the Callout Title.
+    const alertMessagePaddingTop = Math.abs(
+      ((iconSizes?.l.height ?? 0) -
+        parseInt(
+          String(typography?.styles?.body?.regular?.xs?.lineHeight ?? "0")
+        )) /
+        2
+    );
+
     return `
-      background-color: ${backgroundColor};
       width: 360px;
-      margin: ${spacings?.m}px 0;
+      margin: ${spaces?.m}px 0;
       border-radius: ${corners?.m}px;
       color: ${palette?.text?.primary};
-      padding: ${spacings?.m}px;
-      background-color: ${calloutColor};
+      padding: ${spaces?.m}px;
+      background-color: ${backgroundColor};
 
-      .MuiAlert-icon {
+      .${alertClasses.icon} {
         height: ${iconSizes?.l.height}px;
         width: ${iconSizes?.l.width}px;
-        margin-right: ${spacings?.m}px;
+        margin-right: ${spaces?.s}px;
         padding: 0;
+
         path {
           fill: ${iconColor};
         }
       }
 
-      .MuiAlert-message {
-        padding: 0;
-        margin-right: ${spacings?.m}px;
+      .${alertClasses.message} {
+        padding: ${alertMessagePaddingTop}px 0 0;
+        margin-right: ${spaces?.m}px;
 
-        .MuiAlertTitle-root{
+        .${alertTitleClasses.root} {
           margin-top: 0;
           ${titleBottomMargin}
         }
       }
 
-      .MuiAlert-action {
+      .${alertClasses.action} {
         margin-right: 0;
         padding: 0;
         align-items: flex-start;
-        margin-top: ${spacings?.xxs}px;
+        margin-top: ${spaces?.xxs}px;
 
         > button {
           padding: 0;
diff --git a/packages/components/src/core/CellBasic/__storybook__/constants.tsx b/packages/components/src/core/CellBasic/__storybook__/constants.tsx
new file mode 100644
index 000000000..eb88d8b5a
--- /dev/null
+++ b/packages/components/src/core/CellBasic/__storybook__/constants.tsx
@@ -0,0 +1,161 @@
+import Icon from "src/core/Icon";
+import Tag from "src/core/Tag";
+import {
+  ButtonIconsGroupBottom,
+  ButtonIconsGroupRight,
+  EmptySlotBottom,
+  EmptySlotRight,
+  StyledButtonIcon,
+} from "./style";
+
+export const CELL_BASIC_EXCLUDED_CONTROLS = [
+  "icon",
+  "iconVerticalAlign",
+  "primaryText",
+  "primaryTextWrapLineCount",
+  "secondaryText",
+  "secondaryTextWrapLineCount",
+  "tertiaryText",
+  "tertiaryTextWrapLineCount",
+  "shouldShowTooltipOnHover",
+  "shouldTextWrap",
+  "tooltipProps",
+  "horizontalAlign",
+  "verticalAlign",
+  "primaryTextComponentSlotBottom",
+  "primaryTextComponentSlotRight",
+];
+
+export const CELL_BASIC_ICON_OPTIONS = [
+  undefined,
+  <Icon sdsSize="xs" sdsIcon="Download" key="download" sdsType="static" />,
+  <Icon sdsSize="s" sdsIcon="LightBulb" key="lightBulb" sdsType="static" />,
+  <Icon sdsSize="l" sdsIcon="Bacteria" key="bacteria" sdsType="static" />,
+  <Icon sdsSize="xl" sdsIcon="Flask" key="flask" sdsType="static" />,
+];
+
+export const CELL_BASIC_ICON_LABELS = [
+  "No Icon",
+  "XS Download",
+  "S Light bulb",
+  "L Bacteria",
+  "XL Flask",
+];
+
+export const CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS = [
+  undefined,
+  <EmptySlotRight key="componentSlotRight-0">Empty Slot</EmptySlotRight>,
+  <Tag
+    label="lorem ipsum"
+    hover={false}
+    sdsStyle="rounded"
+    sdsType="secondary"
+    style={{ margin: 0 }}
+    key="componentSlotRight-1"
+  />,
+  <ButtonIconsGroupRight key="componentSlotRight-2">
+    <StyledButtonIcon
+      aria-label="Bar Chart Vertical 4"
+      icon="BarChartVertical4"
+      sdsSize="small"
+      sdsType="primary"
+    />
+    <StyledButtonIcon
+      aria-label="Copy"
+      icon="Copy"
+      sdsSize="small"
+      sdsType="primary"
+    />
+    <StyledButtonIcon
+      aria-label="Search Lines Horizontal 3"
+      icon="SearchLinesHorizontal3"
+      sdsSize="small"
+      sdsType="primary"
+    />
+    <StyledButtonIcon
+      aria-label="Tree Horizontal"
+      icon="TreeHorizontal"
+      sdsSize="small"
+      sdsType="primary"
+    />
+    <StyledButtonIcon
+      aria-label="Download"
+      icon="Download"
+      sdsSize="small"
+      sdsType="primary"
+    />
+  </ButtonIconsGroupRight>,
+];
+
+export const CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_LABELS = [
+  "No Component",
+  "Empty Slot",
+  "Tag",
+  "Icon Group",
+];
+
+export const CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_OPTIONS = [
+  undefined,
+  <EmptySlotBottom key="componentSlotBottom-0">Empty Slot</EmptySlotBottom>,
+  <div key="componentSlotBottom-1">
+    <Tag
+      label="lorem ipsum"
+      hover={false}
+      sdsStyle="rounded"
+      sdsType="secondary"
+    />
+    <Tag label="dollor" hover={false} sdsStyle="rounded" sdsType="secondary" />
+    <Tag
+      label="sit amet"
+      hover={false}
+      sdsStyle="rounded"
+      sdsType="secondary"
+    />
+  </div>,
+  <ButtonIconsGroupBottom key="componentSlotBottom-2">
+    <StyledButtonIcon
+      aria-label="Bar Chart Vertical 4"
+      icon="BarChartVertical4"
+      sdsSize="small"
+      sdsType="tertiary"
+    />
+    <StyledButtonIcon
+      aria-label="Copy"
+      icon="Copy"
+      sdsSize="small"
+      sdsType="tertiary"
+    />
+    <StyledButtonIcon
+      aria-label="Search Lines Horizontal 3"
+      icon="SearchLinesHorizontal3"
+      sdsSize="small"
+      sdsType="tertiary"
+    />
+    <StyledButtonIcon
+      aria-label="Tree Horizontal"
+      icon="TreeHorizontal"
+      sdsSize="small"
+      sdsType="tertiary"
+    />
+    <StyledButtonIcon
+      aria-label="Download"
+      icon="Download"
+      sdsSize="small"
+      sdsType="tertiary"
+    />
+  </ButtonIconsGroupBottom>,
+];
+
+export const CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_LABELS = [
+  "No Component",
+  "Empty Slot",
+  "Tag Group",
+  "Icon Group",
+];
+
+export const CELL_BASIC_TEST_TABLE_CELL_STYLE = {
+  border: "dashed 1px #eee",
+  height: 70,
+  maxWidth: 250,
+  width: 250,
+};
diff --git a/packages/components/src/core/CellBasic/__storybook__/index.stories.tsx b/packages/components/src/core/CellBasic/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..2a01e6fb7
--- /dev/null
+++ b/packages/components/src/core/CellBasic/__storybook__/index.stories.tsx
@@ -0,0 +1,158 @@
+/* eslint-disable no-use-before-define */
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { CellBasic } from "./stories/default";
+import {
+  CELL_BASIC_EXCLUDED_CONTROLS,
+  CELL_BASIC_ICON_LABELS,
+  CELL_BASIC_ICON_OPTIONS,
+  CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_LABELS,
+  CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_OPTIONS,
+  CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_LABELS,
+  CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS,
+} from "./constants";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    horizontalAlign: {
+      control: { type: "select" },
+      defaultValue: { summary: "left" },
+      description: "Horizontal alignment of the cell",
+      options: ["left", "right"],
+    },
+    icon: {
+      control: {
+        labels: CELL_BASIC_ICON_LABELS,
+        type: "select",
+      },
+      defaultValue: { summary: "null" },
+      description: "Icon to be displayed",
+      mapping: CELL_BASIC_ICON_OPTIONS,
+      options: Object.keys(CELL_BASIC_ICON_OPTIONS),
+    },
+    iconVerticalAlign: {
+      control: { type: "select" },
+      defaultValue: { summary: "top" },
+      description: "Vertical alignment of the icon",
+      options: ["top", "center", "bottom"],
+    },
+    primaryText: {
+      control: { type: "text" },
+      description: "Primary text to be displayed",
+    },
+    primaryTextComponentSlotBottom: {
+      control: {
+        labels: CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_LABELS,
+        type: "select",
+      },
+      defaultValue: { summary: "null" },
+      description: `Component slot below primary text. This will only show if 
+        there is no secondary or tertiary text. Remove the default values of 
+        secondary and tertiary text to see this in action.`,
+      mapping: CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_OPTIONS,
+      options: Object.keys(
+        CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_OPTIONS
+      ),
+    },
+    primaryTextComponentSlotRight: {
+      control: {
+        labels: CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_LABELS,
+        type: "select",
+      },
+      defaultValue: { summary: "null" },
+      description: "Component slot to the right of primary text",
+      mapping: CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS,
+      options: Object.keys(
+        CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS
+      ),
+    },
+    primaryTextWrapLineCount: {
+      control: { type: "number" },
+      defaultValue: { summary: "3" },
+      description: "Number of lines to wrap the primary text",
+    },
+    secondaryText: {
+      control: { type: "text" },
+      description: "Secondary text to be displayed",
+    },
+    secondaryTextWrapLineCount: {
+      control: { type: "number" },
+      defaultValue: { summary: "1" },
+      description: "Number of lines to wrap the secondary text",
+    },
+    shouldShowTooltipOnHover: {
+      control: { type: "boolean" },
+      defaultValue: { summary: "true" },
+      description: "Show tooltip on hover",
+    },
+    shouldTextWrap: {
+      control: { type: "boolean" },
+      defaultValue: { summary: "true" },
+      description: "Wrap text",
+    },
+    tertiaryText: {
+      control: { type: "text" },
+      defaultValue: { summary: "null" },
+      description: "Tertiary text to be displayed",
+    },
+    tertiaryTextWrapLineCount: {
+      control: { type: "number" },
+      defaultValue: { summary: "1" },
+      description: "Number of lines to wrap the tertiary text",
+    },
+    tooltipProps: {
+      control: { type: "object" },
+      defaultValue: { summary: "null" },
+      description: "Props for the tooltip",
+    },
+    verticalAlign: {
+      control: { type: "select" },
+      defaultValue: { summary: "top" },
+      description: "Vertical alignment of the cell",
+      options: ["top", "center", "bottom"],
+    },
+  },
+  component: CellBasic,
+  parameters: {
+    badges: [BADGE.BETA],
+    controls: {
+      expanded: true,
+    },
+  },
+  title: "Components/Table/CellBasic [beta]",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    primaryText: "Primary Text",
+    primaryTextWrapLineCount: 3,
+    secondaryText: "Secondary Text",
+    secondaryTextWrapLineCount: 1,
+    shouldShowTooltipOnHover: true,
+    shouldTextWrap: true,
+    tertiaryText: "Tertiary Text",
+    tertiaryTextWrapLineCount: 1,
+    tooltipProps: { sdsStyle: "dark" },
+  },
+};
+
+// Test
+
+export const Test = {
+  args: {
+    primaryText: "Primary text",
+    secondaryText: "Secondary Text",
+  },
+  parameters: {
+    controls: {
+      exclude: CELL_BASIC_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/CellBasic/__storybook__/stories/default.tsx b/packages/components/src/core/CellBasic/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..8062fbad9
--- /dev/null
+++ b/packages/components/src/core/CellBasic/__storybook__/stories/default.tsx
@@ -0,0 +1,24 @@
+import { Args } from "@storybook/react";
+import RawCellBasic from "src/core/CellBasic";
+
+export const CellBasic = (props: Args): JSX.Element => {
+  return (
+    <table>
+      <tbody>
+        <tr
+          style={{
+            display: "block",
+            maxWidth: "400px",
+          }}
+        >
+          <RawCellBasic
+            data-testid="CellBasic"
+            primaryText="Primary Text"
+            tooltipProps={{ sdsStyle: "light" }}
+            {...props}
+          />
+        </tr>
+      </tbody>
+    </table>
+  );
+};
diff --git a/packages/components/src/core/CellBasic/__storybook__/stories/test.tsx b/packages/components/src/core/CellBasic/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..d85d7fdaf
--- /dev/null
+++ b/packages/components/src/core/CellBasic/__storybook__/stories/test.tsx
@@ -0,0 +1,103 @@
+import { SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import RawCellBasic from "src/core/CellBasic";
+import Icon from "src/core/Icon";
+import {
+  CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_OPTIONS,
+  CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS,
+  CELL_BASIC_TEST_TABLE_CELL_STYLE,
+} from "../constants";
+
+export const TestDemo = (): JSX.Element => (
+  <table>
+    <tbody>
+      <tr>
+        <RawCellBasic
+          data-testid="CellBasicVerticalAlignTest"
+          primaryText="Primary Text"
+          secondaryText={SHORT_LOREM_IPSUM}
+          secondaryTextWrapLineCount={2}
+          verticalAlign="bottom"
+          shouldTextWrap
+          shouldShowTooltipOnHover={false}
+          style={CELL_BASIC_TEST_TABLE_CELL_STYLE as React.CSSProperties}
+        />
+        <RawCellBasic
+          primaryText="Primary Text"
+          secondaryText="Secondary Text"
+          horizontalAlign="left"
+          shouldShowTooltipOnHover={false}
+          style={CELL_BASIC_TEST_TABLE_CELL_STYLE as React.CSSProperties}
+        />
+        <RawCellBasic
+          data-testid="CellBasic"
+          primaryText="Primary Text"
+          secondaryText="Secondary Text"
+          tertiaryText="Tertiary Text"
+          horizontalAlign="right"
+          tooltipProps={{ sdsStyle: "dark", title: "testTooltipTitle" }}
+          style={CELL_BASIC_TEST_TABLE_CELL_STYLE as React.CSSProperties}
+        />
+      </tr>
+      <tr>
+        <RawCellBasic
+          data-testid="CellBasicWithIcon"
+          primaryText="Primary Text"
+          secondaryText="Secondary Text"
+          tertiaryText="Tertiary Text"
+          shouldShowTooltipOnHover={false}
+          icon={<Icon sdsSize="l" sdsIcon="Bacteria" sdsType="static" />}
+          style={CELL_BASIC_TEST_TABLE_CELL_STYLE as React.CSSProperties}
+        />
+        <RawCellBasic
+          primaryText="Primary Text"
+          primaryTextComponentSlotRight={
+            CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS[2]
+          }
+          secondaryText="Secondary Text"
+          tertiaryText="Tertiary Text"
+          shouldShowTooltipOnHover={false}
+          style={CELL_BASIC_TEST_TABLE_CELL_STYLE as React.CSSProperties}
+        />
+        <RawCellBasic
+          primaryText="Primary Text"
+          primaryTextComponentSlotRight={
+            CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS[3]
+          }
+          shouldShowTooltipOnHover={false}
+          secondaryText="Secondary Text"
+          tertiaryText="Tertiary Text"
+          style={CELL_BASIC_TEST_TABLE_CELL_STYLE as React.CSSProperties}
+        />
+      </tr>
+      <tr>
+        <RawCellBasic
+          primaryText="Primary Text"
+          primaryTextComponentSlotBottom={
+            CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_OPTIONS[2]
+          }
+          shouldShowTooltipOnHover={false}
+          style={CELL_BASIC_TEST_TABLE_CELL_STYLE as React.CSSProperties}
+        />
+        <RawCellBasic
+          primaryText="Primary Text"
+          primaryTextComponentSlotBottom={
+            CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_OPTIONS[3]
+          }
+          shouldShowTooltipOnHover={false}
+          style={CELL_BASIC_TEST_TABLE_CELL_STYLE as React.CSSProperties}
+        />
+        <RawCellBasic
+          primaryText="Primary Text"
+          primaryTextComponentSlotBottom={
+            CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_BOTTOM_OPTIONS[2]
+          }
+          primaryTextComponentSlotRight={
+            CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS[3]
+          }
+          shouldShowTooltipOnHover={false}
+          style={CELL_BASIC_TEST_TABLE_CELL_STYLE as React.CSSProperties}
+        />
+      </tr>
+    </tbody>
+  </table>
+);
diff --git a/packages/components/src/core/CellBasic/__storybook__/style.ts b/packages/components/src/core/CellBasic/__storybook__/style.ts
new file mode 100644
index 000000000..2093c1477
--- /dev/null
+++ b/packages/components/src/core/CellBasic/__storybook__/style.ts
@@ -0,0 +1,91 @@
+import { styled } from "@mui/material";
+import ButtonIcon from "src/core/ButtonIcon";
+import {
+  CommonThemeProps,
+  fontBodyXxxs,
+  getSemanticComponentColors,
+  getSemanticTextColors,
+  getSpaces,
+} from "src/core/styles";
+
+export const ButtonIconsGroupRight = styled("div")`
+  ${(props: CommonThemeProps) => {
+    const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
+
+    return `
+      align-items: center;
+      display: inline-flex;
+      gap: ${spaces?.xs}px;
+      height: 100%;
+      border-left: solid 1px ${semanticComponentColors?.base?.divider};
+      padding-left: ${spaces?.xs}px;
+    `;
+  }}
+`;
+
+export const ButtonIconsGroupBottom = styled("div")`
+  ${(props: CommonThemeProps) => {
+    const spaces = getSpaces(props);
+
+    return `
+      display: inline-flex;
+      gap: ${spaces?.xs}px;
+    `;
+  }}
+`;
+
+export const StyledButtonIcon = styled(ButtonIcon)`
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+
+export const EmptySlotRight = styled("div")`
+  ${fontBodyXxxs}
+
+  ${(props: CommonThemeProps) => {
+    const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
+
+    return `
+      height: 100%;
+      min-width: 100px;
+      box-shadow: inset 0 0 0 1px ${semanticComponentColors?.base?.divider};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 ${spaces?.l}px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      color: ${semanticTextColors?.base?.disabled};
+      user-select: none;
+    `;
+  }}
+`;
+
+export const EmptySlotBottom = styled("div")`
+  ${fontBodyXxxs}
+
+  ${(props: CommonThemeProps) => {
+    const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
+
+    return `
+      min-height: 20px;
+      width: 100%;
+      box-shadow: inset 0 0 0 1px ${semanticComponentColors?.base?.divider};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 ${spaces?.l}px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      color: ${semanticTextColors?.base?.disabled};
+      user-select: none;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/CellBasic/CellBasic.namespace-test.tsx b/packages/components/src/core/CellBasic/__tests__/CellBasic.namespace-test.tsx
similarity index 88%
rename from packages/components/src/core/CellBasic/CellBasic.namespace-test.tsx
rename to packages/components/src/core/CellBasic/__tests__/CellBasic.namespace-test.tsx
index 208c69a4c..2a2a07db0 100644
--- a/packages/components/src/core/CellBasic/CellBasic.namespace-test.tsx
+++ b/packages/components/src/core/CellBasic/__tests__/CellBasic.namespace-test.tsx
@@ -7,9 +7,9 @@ const CellBasicNameSpaceTest = (props: CellBasicProps) => {
       <tbody>
         <tr>
           <CellBasic
-            horizontalAlign="center"
+            horizontalAlign="left"
             verticalAlign="center"
-            icon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
+            icon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
             iconVerticalAlign="center"
             primaryText="Primary Text"
             primaryTextWrapLineCount={2}
diff --git a/packages/components/src/core/CellBasic/__snapshots__/index.test.tsx.snap b/packages/components/src/core/CellBasic/__tests__/__snapshots__/index.test.tsx.snap
similarity index 67%
rename from packages/components/src/core/CellBasic/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/CellBasic/__tests__/__snapshots__/index.test.tsx.snap
index 9d0a4b8c1..4c07ade6e 100644
--- a/packages/components/src/core/CellBasic/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/CellBasic/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,10 +4,10 @@ exports[`<CellBasic /> Default story renders snapshot 1`] = `
 <table>
   <tbody>
     <tr
-      style="display: block; max-width: 200px;"
+      style="display: block; max-width: 400px;"
     >
       <td
-        class=" css-ms0or8"
+        class=" css-p6nomj"
         data-mui-internal-clone-element="true"
         data-testid="CellBasic"
       >
@@ -17,13 +17,17 @@ exports[`<CellBasic /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary Text
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary Text
+              </div>
+            </div>
             <span
-              class="css-13h2j63"
+              class="css-1xqvcqn"
             >
               Secondary Text
             </span>
diff --git a/packages/components/src/core/CellBasic/index.test.tsx b/packages/components/src/core/CellBasic/__tests__/index.test.tsx
similarity index 96%
rename from packages/components/src/core/CellBasic/index.test.tsx
rename to packages/components/src/core/CellBasic/__tests__/index.test.tsx
index f1c076637..ca339ede5 100644
--- a/packages/components/src/core/CellBasic/index.test.tsx
+++ b/packages/components/src/core/CellBasic/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/CellBasic/index.stories.tsx b/packages/components/src/core/CellBasic/index.stories.tsx
deleted file mode 100644
index 0e40a8182..000000000
--- a/packages/components/src/core/CellBasic/index.stories.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-/* eslint-disable no-use-before-define */
-import { Args, Meta } from "@storybook/react";
-import * as React from "react";
-import Icon from "../Icon";
-import RawCellBasic from "./index";
-
-const CellBasic = (props: Args): JSX.Element => {
-  return (
-    <table>
-      <tbody>
-        <tr
-          style={{
-            display: "block",
-            maxWidth: "200px",
-          }}
-        >
-          <RawCellBasic
-            data-testid="CellBasic"
-            primaryText="Primary Text"
-            tooltipProps={{ sdsStyle: "light" }}
-            {...props}
-          />
-        </tr>
-      </tbody>
-    </table>
-  );
-};
-
-const availableIconOptions = [
-  undefined,
-  <Icon sdsSize="xs" sdsIcon="download" key="download" sdsType="static" />,
-  <Icon sdsSize="s" sdsIcon="lightBulb" key="lightBulb" sdsType="static" />,
-  <Icon sdsSize="l" sdsIcon="bacteria" key="bacteria" sdsType="static" />,
-  <Icon sdsSize="xl" sdsIcon="flask" key="flask" sdsType="static" />,
-];
-
-export default {
-  argTypes: {
-    horizontalAlign: {
-      control: { type: "select" },
-      options: ["left", "center", "right"],
-    },
-    icon: {
-      control: {
-        labels: [
-          "No Icon",
-          "XS Download",
-          "S Light bulb",
-          "L Bacteria",
-          "XL Flask",
-        ],
-        type: "select",
-      },
-      mapping: availableIconOptions,
-      options: Object.keys(availableIconOptions),
-    },
-    iconVerticalAlign: {
-      control: { type: "select" },
-      options: ["top", "center", "bottom"],
-    },
-    primaryText: {
-      control: { type: "text" },
-    },
-    primaryTextWrapLineCount: {
-      control: { type: "number" },
-    },
-    secondaryText: {
-      control: { type: "text" },
-    },
-    secondaryTextWrapLineCount: {
-      control: { type: "number" },
-    },
-    shouldShowTooltipOnHover: {
-      control: { type: "boolean" },
-    },
-    shouldTextWrap: {
-      control: { type: "boolean" },
-    },
-    tertiaryText: {
-      control: { type: "text" },
-    },
-    tertiaryTextWrapLineCount: {
-      control: { type: "number" },
-    },
-    tooltipProps: {
-      control: { type: "object" },
-    },
-    verticalAlign: {
-      control: { type: "select" },
-      options: ["top", "center", "bottom"],
-    },
-  },
-  component: CellBasic,
-  title: "Table/CellBasic",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    primaryText: "Primary Text",
-    primaryTextWrapLineCount: 3,
-    secondaryText: "Secondary Text",
-    secondaryTextWrapLineCount: 1,
-    shouldShowTooltipOnHover: true,
-    shouldTextWrap: true,
-    tertiaryText: "Tertiary Text",
-    tertiaryTextWrapLineCount: 1,
-    tooltipProps: { sdsStyle: "dark" },
-  },
-};
-
-// Test
-
-const TableCellStyle = {
-  border: "dashed 1px #eee",
-  height: 100,
-  maxWidth: 160,
-  width: 160,
-};
-
-const TestDemo = (): JSX.Element => (
-  <table>
-    <tbody>
-      <tr>
-        <RawCellBasic
-          data-testid="CellBasicVerticalAlignTest"
-          primaryText="Primary Text"
-          secondaryText="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-          secondaryTextWrapLineCount={2}
-          shouldTextWrap
-          verticalAlign="bottom"
-          shouldShowTooltipOnHover={false}
-          style={TableCellStyle as React.CSSProperties}
-        />
-        <RawCellBasic
-          data-testid="CellBasicCenterAlignTest"
-          primaryText="Primary Text"
-          secondaryText="Secondary Text"
-          verticalAlign="center"
-          horizontalAlign="center"
-          shouldShowTooltipOnHover={false}
-          style={TableCellStyle as React.CSSProperties}
-        />
-        <RawCellBasic
-          data-testid="CellBasic"
-          primaryText="Primary Text"
-          secondaryText="Secondary Text"
-          tertiaryText="Tertiary Text"
-          horizontalAlign="right"
-          tooltipProps={{ sdsStyle: "dark", title: "testTooltipTitle" }}
-          style={TableCellStyle as React.CSSProperties}
-        />
-        <RawCellBasic
-          data-testid="CellBasicWithIcon"
-          primaryText="Primary Text"
-          secondaryText="Secondary Text"
-          tertiaryText="Tertiary Text"
-          icon={<Icon sdsSize="l" sdsIcon="bacteria" sdsType="static" />}
-          style={TableCellStyle as React.CSSProperties}
-        />
-      </tr>
-    </tbody>
-  </table>
-);
-
-export const Test = {
-  args: {
-    primaryText: "Primary text",
-    secondaryText: "Secondary Text",
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        "icon",
-        "iconVerticalAlign",
-        "primaryText",
-        "primaryTextWrapLineCount",
-        "secondaryText",
-        "secondaryTextWrapLineCount",
-        "tertiaryText",
-        "tertiaryTextWrapLineCount",
-        "shouldShowTooltipOnHover",
-        "shouldTextWrap",
-        "tooltipProps",
-        "horizontalAlign",
-        "verticalAlign",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/CellBasic/index.tsx b/packages/components/src/core/CellBasic/index.tsx
index df7c22fe3..1441e18d8 100644
--- a/packages/components/src/core/CellBasic/index.tsx
+++ b/packages/components/src/core/CellBasic/index.tsx
@@ -1,8 +1,11 @@
 import React, { forwardRef } from "react";
-import Tooltip, { TooltipProps } from "../Tooltip";
+import Tooltip, { TooltipProps } from "src/core/Tooltip";
 import {
   CellBasicExtraProps,
   PrimaryText,
+  PrimaryTextComponentSlotBottomWrapper,
+  PrimaryTextComponentSlotRightWrapper,
+  PrimaryTextWrapper,
   SecondaryText,
   StyledCellContent,
   StyledCellContentWrapper,
@@ -22,6 +25,9 @@ interface CellBasicContentProps
   shouldTextWrap?: boolean;
   icon?: React.ReactElement<CustomSVGProps>;
   iconVerticalAlign?: "top" | "center" | "bottom";
+  primaryTextComponentSlotRight?: React.ReactNode;
+  primaryTextComponentSlotBottom?: React.ReactNode;
+  horizontalAlign?: "left" | "right";
 }
 
 export interface CellBasicRawProps {
@@ -44,6 +50,9 @@ const CellBasicContent = (props: CellBasicContentProps): JSX.Element | null => {
     shouldTextWrap = true,
     icon,
     iconVerticalAlign,
+    primaryTextComponentSlotRight,
+    primaryTextComponentSlotBottom,
+    horizontalAlign = "left",
   } = props;
 
   return (
@@ -54,12 +63,25 @@ const CellBasicContent = (props: CellBasicContentProps): JSX.Element | null => {
         </StyledCellIconWrapper>
       )}
       <StyledCellContentWrapper>
-        <PrimaryText
-          shouldTextWrap={shouldTextWrap}
-          primaryTextWrapLineCount={primaryTextWrapLineCount}
-        >
-          {primaryText}
-        </PrimaryText>
+        <PrimaryTextWrapper horizontalAlign={horizontalAlign}>
+          <PrimaryText
+            shouldTextWrap={shouldTextWrap}
+            primaryTextWrapLineCount={primaryTextWrapLineCount}
+          >
+            {primaryText}
+          </PrimaryText>
+          {primaryTextComponentSlotRight && (
+            <PrimaryTextComponentSlotRightWrapper>
+              {primaryTextComponentSlotRight}
+            </PrimaryTextComponentSlotRightWrapper>
+          )}
+        </PrimaryTextWrapper>
+
+        {!secondaryText && !tertiaryText && primaryTextComponentSlotBottom && (
+          <PrimaryTextComponentSlotBottomWrapper>
+            {primaryTextComponentSlotBottom}
+          </PrimaryTextComponentSlotBottomWrapper>
+        )}
 
         {secondaryText && (
           <SecondaryText
diff --git a/packages/components/src/core/CellBasic/style.ts b/packages/components/src/core/CellBasic/style.ts
index 70bfd9476..0c37da2c4 100644
--- a/packages/components/src/core/CellBasic/style.ts
+++ b/packages/components/src/core/CellBasic/style.ts
@@ -3,14 +3,12 @@ import {
   CommonThemeProps,
   fontBodyS,
   fontBodyXxs,
-  getColors,
-  getPalette,
+  getSemanticTextColors,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface CellBasicExtraProps extends CommonThemeProps {
-  horizontalAlign?: "left" | "center" | "right";
+  horizontalAlign?: "left" | "right";
   verticalAlign?: "top" | "center" | "bottom";
   iconVerticalAlign?: "top" | "center" | "bottom";
   shouldTextWrap?: boolean;
@@ -33,6 +31,8 @@ const doNotForwardProps = [
   "primaryTextWrapLineCount",
   "secondaryTextWrapLineCount",
   "tertiaryTextWrapLineCount",
+  "primaryTextComponentSlotBottom",
+  "primaryTextComponentSlotRight",
 ];
 
 const verticalAlignCSSMap = {
@@ -50,18 +50,18 @@ const verticalAlignToFlexMap = {
 export const StyledTableData = styled("td", {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })`
+  ${fontBodyS}
+
   ${(props: CellBasicExtraProps) => {
     const { horizontalAlign = "left", verticalAlign = "top" } = props;
 
-    const spacings = getSpaces(props);
-    const typography = getTypography(props);
+    const spaces = getSpaces(props);
 
     return `
-        font-family: ${typography?.fontFamily};
-        padding: ${spacings?.l}px ${spacings?.s}px;
+        padding: ${spaces?.l}px ${spaces?.m}px;
         text-align: ${horizontalAlign};
         vertical-align: ${verticalAlignCSSMap[verticalAlign]};
-        width: 96px;
+        // width: 96px;
         overflow: hidden;
     `;
   }}
@@ -97,10 +97,10 @@ export const StyledCellIconWrapper = styled("div", {
 })`
   ${(props: CellBasicExtraProps) => {
     const { iconVerticalAlign = "top" } = props;
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
-      padding-right: ${spacings?.l}px;
+      padding-right: ${spaces?.l}px;
       display: flex;
       flex-direction: column;
       justify-content: ${verticalAlignToFlexMap[iconVerticalAlign]};
@@ -108,7 +108,18 @@ export const StyledCellIconWrapper = styled("div", {
   }}
 `;
 
-export const PrimaryText = styled("span", {
+export const PrimaryTextWrapper = styled("div")`
+  ${(props: CellBasicExtraProps) => {
+    const { horizontalAlign } = props;
+
+    return `
+      display: flex;
+      justify-content: ${horizontalAlign === "left" ? "flex-start" : "flex-end"};
+    `;
+  }}
+`;
+
+export const PrimaryText = styled("div", {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })`
   ${fontBodyS}
@@ -118,7 +129,6 @@ export const PrimaryText = styled("span", {
 
     return `
       display: block;
-      line-height: 20px;
       ${
         props.shouldTextWrap
           ? ShouldWrap(primaryTextWrapLineCount)
@@ -137,11 +147,11 @@ export const SecondaryText = styled("span", {
     const { secondaryTextWrapLineCount = 1 } = props;
 
     const spaces = getSpaces(props);
-    const palette = getPalette(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
       display: block;
-      color: ${palette.text?.secondary};
+      color: ${semanticTextColors?.base?.secondary};
       padding-top: ${spaces?.xxxs}px;
 
       ${
@@ -161,12 +171,12 @@ export const TertiaryText = styled("span", {
   ${(props: CellBasicExtraProps) => {
     const { tertiaryTextWrapLineCount = 1 } = props;
 
-    const colors = getColors(props);
     const spaces = getSpaces(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
       display: block;
-      color: ${colors?.gray[500]};
+      color: ${semanticTextColors?.base?.secondary};
       padding-top: ${spaces?.s}px;
 
       ${
@@ -177,3 +187,23 @@ export const TertiaryText = styled("span", {
     `;
   }}
 `;
+
+export const PrimaryTextComponentSlotBottomWrapper = styled("div")`
+  ${(props) => {
+    const spaces = getSpaces(props);
+
+    return `
+      margin-top: ${spaces?.xxs}px;
+    `;
+  }}
+`;
+
+export const PrimaryTextComponentSlotRightWrapper = styled("div")`
+  ${(props) => {
+    const spaces = getSpaces(props);
+
+    return `
+      margin-left: ${spaces?.xs}px;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/CellComponent/__storybook__/constants.tsx b/packages/components/src/core/CellComponent/__storybook__/constants.tsx
new file mode 100644
index 000000000..dbb071220
--- /dev/null
+++ b/packages/components/src/core/CellComponent/__storybook__/constants.tsx
@@ -0,0 +1,12 @@
+export const CELL_COMPONENT_EXCLUDED_CONTROLS = [
+  "verticalAlign",
+  "horizontalAlign",
+];
+
+export const CELL_COMPONENT_TEST_PLACEMENT_STYLES = {
+  display: "grid",
+  gridColumnGap: "14px",
+  gridRowGap: "0px",
+  gridTemplateColumns: "repeat(2, 200px)",
+  gridTemplateRows: "1fr",
+};
diff --git a/packages/components/src/core/CellComponent/__storybook__/index.stories.tsx b/packages/components/src/core/CellComponent/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..7a06e2ab8
--- /dev/null
+++ b/packages/components/src/core/CellComponent/__storybook__/index.stories.tsx
@@ -0,0 +1,68 @@
+import { Args, Meta } from "@storybook/react";
+import InputToggle from "../../InputToggle";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { CellComponent } from "./stories/default";
+import { CELL_COMPONENT_EXCLUDED_CONTROLS } from "./constants";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    horizontalAlign: {
+      control: { type: "select" },
+      options: ["left", "center", "right"],
+    },
+    verticalAlign: {
+      control: { type: "select" },
+      options: ["top", "center", "bottom"],
+    },
+  },
+  component: CellComponent,
+  parameters: {
+    axe: {
+      disabledRules: [
+        "color-contrast",
+        // Unfortunately the MUI Switch component renders an input field without a label, which
+        // fails an axe check.
+        "label",
+      ],
+    },
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Table/CellComponent",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    horizontalAlign: "left",
+    verticalAlign: "center",
+  },
+  render: (props: Args) => {
+    const { horizontalAlign, verticalAlign } = props;
+
+    return (
+      <CellComponent
+        horizontalAlign={horizontalAlign}
+        verticalAlign={verticalAlign}
+        data-testid="CellComponent"
+        style={{ height: 100, width: 100 }}
+        {...props}
+      >
+        <InputToggle />
+      </CellComponent>
+    );
+  },
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: { exclude: CELL_COMPONENT_EXCLUDED_CONTROLS },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/CellComponent/__storybook__/stories/default.tsx b/packages/components/src/core/CellComponent/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..90f1c5941
--- /dev/null
+++ b/packages/components/src/core/CellComponent/__storybook__/stories/default.tsx
@@ -0,0 +1,29 @@
+import { Args } from "@storybook/react";
+import RawCellComponent from "src/core/CellComponent";
+import TableRow from "src/core/TableRow";
+
+export const CellComponent = (props: Args): JSX.Element => {
+  const { horizontalAlign, verticalAlign, children } = props;
+
+  return (
+    <table>
+      <tbody>
+        <TableRow
+          style={{
+            display: "block",
+            maxWidth: "280px",
+          }}
+        >
+          <RawCellComponent
+            horizontalAlign={horizontalAlign}
+            verticalAlign={verticalAlign}
+            data-testid="CellComponent"
+            {...props}
+          >
+            {children}
+          </RawCellComponent>
+        </TableRow>
+      </tbody>
+    </table>
+  );
+};
diff --git a/packages/components/src/core/CellComponent/__storybook__/stories/test.tsx b/packages/components/src/core/CellComponent/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..78054639b
--- /dev/null
+++ b/packages/components/src/core/CellComponent/__storybook__/stories/test.tsx
@@ -0,0 +1,66 @@
+import { Args } from "@storybook/react";
+import { CellComponent } from "./default";
+import { StyledStoryBody, StyledStoryHeading } from "../style";
+import Tag from "src/core/Tag";
+import { RadioGroup } from "@mui/material";
+import InputRadio from "src/core/InputRadio";
+import { CELL_COMPONENT_TEST_PLACEMENT_STYLES } from "../constants";
+import { SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  return (
+    <div style={CELL_COMPONENT_TEST_PLACEMENT_STYLES as React.CSSProperties}>
+      <div>
+        <CellComponent
+          data-testid="CellComponentA"
+          horizontalAlign="right"
+          verticalAlign="bottom"
+        >
+          <div style={{ display: "block" }}>
+            <StyledStoryHeading data-testid="Child">
+              Lorem ipsum dolor
+            </StyledStoryHeading>
+            <StyledStoryBody data-testid="Child">
+              {SHORT_LOREM_IPSUM}
+            </StyledStoryBody>
+            <Tag
+              color="neutral"
+              data-testid="Child"
+              label="Tertiary"
+              sdsStyle="rounded"
+              sdsType="primary"
+              hover={false}
+              {...props}
+            />
+          </div>
+        </CellComponent>
+      </div>
+      <div>
+        <CellComponent
+          data-testid="CellComponentB"
+          horizontalAlign="left"
+          verticalAlign="top"
+        >
+          <div style={{ display: "block" }}>
+            <StyledStoryHeading
+              data-testid="Child"
+              style={{ paddingBottom: 10 }}
+            >
+              Lorem ipsum dolor
+            </StyledStoryHeading>
+            <RadioGroup
+              aria-labelledby="demo-radio-buttons-group-label"
+              data-testid="Child"
+              defaultValue="1"
+              name="radio-buttons-group"
+            >
+              <InputRadio label="One" caption="Caption I" value="1" />
+              <InputRadio label="Two" caption="Caption II" value="2" />
+              <InputRadio label="Three" caption="Caption III" value="3" />
+            </RadioGroup>
+          </div>
+        </CellComponent>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/CellComponent/__storybook__/style.ts b/packages/components/src/core/CellComponent/__storybook__/style.ts
new file mode 100644
index 000000000..9a5ea4c27
--- /dev/null
+++ b/packages/components/src/core/CellComponent/__storybook__/style.ts
@@ -0,0 +1,33 @@
+import { styled } from "@mui/material";
+import {
+  fontBodyXxs,
+  fontHeaderS,
+  getSemanticTextColors,
+  getSpaces,
+} from "src/core/styles";
+
+const doNotForwardProps = ["horizontalAlign", "verticalAlign"];
+
+export const StyledStoryHeading = styled("span")`
+  ${fontHeaderS}
+
+  line-height: 24px;
+  display: block;
+`;
+
+export const StyledStoryBody = styled("span", {
+  shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
+})`
+  ${fontBodyXxs}
+
+  ${(props) => {
+    const semanticTextColors = getSemanticTextColors(props);
+    const spaces = getSpaces(props);
+
+    return `
+      display: block;
+      color: ${semanticTextColors?.base?.secondary};
+      padding: ${spaces?.s}px 0;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/CellComponent/CellComponent.namespace-test.tsx b/packages/components/src/core/CellComponent/__tests__/CellComponent.namespace-test.tsx
similarity index 85%
rename from packages/components/src/core/CellComponent/CellComponent.namespace-test.tsx
rename to packages/components/src/core/CellComponent/__tests__/CellComponent.namespace-test.tsx
index b632d302c..84d0734b0 100644
--- a/packages/components/src/core/CellComponent/CellComponent.namespace-test.tsx
+++ b/packages/components/src/core/CellComponent/__tests__/CellComponent.namespace-test.tsx
@@ -7,7 +7,7 @@ const CellBasicNameSpaceTest = (props: CellComponentProps) => {
       <tbody>
         <tr>
           <CellComponent horizontalAlign="center" verticalAlign="center">
-            <Icon sdsIcon="download" sdsSize="l" sdsType="button" />
+            <Icon sdsIcon="Download" sdsSize="l" sdsType="button" />
           </CellComponent>
         </tr>
       </tbody>
diff --git a/packages/components/src/core/CellComponent/__snapshots__/index.test.tsx.snap b/packages/components/src/core/CellComponent/__tests__/__snapshots__/index.test.tsx.snap
similarity index 89%
rename from packages/components/src/core/CellComponent/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/CellComponent/__tests__/__snapshots__/index.test.tsx.snap
index cb41b93e0..47595baa3 100644
--- a/packages/components/src/core/CellComponent/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/CellComponent/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,16 +4,16 @@ exports[`<CellComponent /> Default story renders snapshot 1`] = `
 <table>
   <tbody>
     <tr
-      class="css-1te7wvi"
+      class="css-1lvje81"
       style="display: block; max-width: 280px;"
     >
       <td
-        class="cell-component css-1pxuqjo"
+        class="cell-component css-1ssa1s"
         data-testid="CellComponent"
         style="height: 100px; width: 100px;"
       >
         <span
-          class="MuiSwitch-root MuiSwitch-sizeMedium css-1lu0c44-MuiSwitch-root"
+          class="MuiSwitch-root MuiSwitch-sizeMedium css-1r4ynxi-MuiSwitch-root"
         >
           <span
             class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase"
diff --git a/packages/components/src/core/CellComponent/index.test.tsx b/packages/components/src/core/CellComponent/__tests__/index.test.tsx
similarity index 96%
rename from packages/components/src/core/CellComponent/index.test.tsx
rename to packages/components/src/core/CellComponent/__tests__/index.test.tsx
index ab0708e6f..03cfb79e7 100644
--- a/packages/components/src/core/CellComponent/index.test.tsx
+++ b/packages/components/src/core/CellComponent/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/CellComponent/index.stories.tsx b/packages/components/src/core/CellComponent/index.stories.tsx
deleted file mode 100644
index 8d7cee0eb..000000000
--- a/packages/components/src/core/CellComponent/index.stories.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { FormControlLabel, RadioGroup } from "@mui/material";
-import { Args, Meta } from "@storybook/react";
-import * as React from "react";
-import InputRadio from "../InputRadio";
-import InputToggle from "../InputToggle";
-import TableRow from "../TableRow";
-import Tag from "../Tag";
-import RawCellComponent from "./index";
-import { StyledStoryBody, StyledStoryHeading } from "./style";
-
-const CellComponent = (props: Args): JSX.Element => {
-  const { horizontalAlign, verticalAlign, children } = props;
-
-  return (
-    <table>
-      <tbody>
-        <TableRow
-          style={{
-            display: "block",
-            maxWidth: "280px",
-          }}
-        >
-          <RawCellComponent
-            horizontalAlign={horizontalAlign}
-            verticalAlign={verticalAlign}
-            data-testid="CellComponent"
-            {...props}
-          >
-            {children}
-          </RawCellComponent>
-        </TableRow>
-      </tbody>
-    </table>
-  );
-};
-
-export default {
-  argTypes: {
-    fitCellToComponent: {
-      control: { type: "boolean" },
-    },
-    horizontalAlign: {
-      control: { type: "select" },
-      options: ["left", "center", "right"],
-    },
-    verticalAlign: {
-      control: { type: "select" },
-      options: ["top", "center", "bottom"],
-    },
-  },
-  component: CellComponent,
-  parameters: {
-    axe: {
-      disabledRules: [
-        // Unfortunately the MUI Switch component renders an input field without a label, which
-        // fails an axe check.
-        "label",
-      ],
-    },
-  },
-  title: "Table/CellComponent",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    horizontalAlign: "left",
-    verticalAlign: "center",
-  },
-  render: (props: Args) => {
-    const { horizontalAlign, verticalAlign, fitCellToComponent } = props;
-
-    if (fitCellToComponent) {
-      return (
-        <CellComponent
-          horizontalAlign={horizontalAlign}
-          verticalAlign={verticalAlign}
-          data-testid="CellComponent"
-          {...props}
-        >
-          <InputToggle />
-        </CellComponent>
-      );
-    }
-
-    return (
-      <CellComponent
-        horizontalAlign={horizontalAlign}
-        verticalAlign={verticalAlign}
-        data-testid="CellComponent"
-        style={{ height: 100, width: 100 }}
-        {...props}
-      >
-        <InputToggle />
-      </CellComponent>
-    );
-  },
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  const placementStyles = {
-    display: "grid",
-    gridColumnGap: "14px",
-    gridRowGap: "0px",
-    gridTemplateColumns: "112px 50px",
-    gridTemplateRows: "1fr",
-  };
-
-  return (
-    <div style={placementStyles as React.CSSProperties}>
-      <div>
-        <CellComponent
-          data-testid="CellComponentA"
-          horizontalAlign="right"
-          verticalAlign="bottom"
-        >
-          <div style={{ display: "block" }}>
-            <StyledStoryHeading data-testid="Child">
-              Lorem ipsum dolor
-            </StyledStoryHeading>
-            <StyledStoryBody data-testid="Child" style={{ paddingBottom: 10 }}>
-              Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor.
-            </StyledStoryBody>
-            <Tag
-              color="primary"
-              data-testid="Child"
-              label="Tertiary"
-              sdsStyle="rounded"
-              sdsType="primary"
-              {...props}
-            />
-          </div>
-        </CellComponent>
-      </div>
-      <div>
-        <CellComponent
-          data-testid="CellComponentB"
-          horizontalAlign="left"
-          verticalAlign="top"
-        >
-          <div style={{ display: "block" }}>
-            <StyledStoryHeading
-              data-testid="Child"
-              style={{ paddingBottom: 10 }}
-            >
-              Lorem ipsum dolor
-            </StyledStoryHeading>
-            <RadioGroup
-              aria-labelledby="demo-radio-buttons-group-label"
-              data-testid="Child"
-              defaultValue="demo"
-              name="radio-buttons-group"
-            >
-              <FormControlLabel
-                control={<InputRadio stage="checked" {...props} />}
-                label="Label"
-                value="demo"
-              />
-            </RadioGroup>
-          </div>
-        </CellComponent>
-      </div>
-    </div>
-  );
-};
-
-export const Test = {
-  parameters: {
-    controls: { exclude: ["verticalAlign", "horizontalAlign"] },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/CellComponent/style.ts b/packages/components/src/core/CellComponent/style.ts
index e7984bbc4..7edbe1ead 100644
--- a/packages/components/src/core/CellComponent/style.ts
+++ b/packages/components/src/core/CellComponent/style.ts
@@ -1,13 +1,5 @@
 import { styled } from "@mui/material/styles";
-import {
-  CommonThemeProps,
-  fontBodyS,
-  fontBodyXxs,
-  fontHeaderS,
-  getColors,
-  getSpaces,
-  getTypography,
-} from "../styles";
+import { CommonThemeProps, fontBodyS, getSpaces } from "src/core/styles";
 
 export interface CellComponentExtraProps extends CommonThemeProps {
   horizontalAlign?: "left" | "center" | "right";
@@ -22,48 +14,15 @@ export const StyledCellComponentData = styled("td", {
   ${fontBodyS}
 
   ${(props: CellComponentExtraProps) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
     const { horizontalAlign = "left", verticalAlign = "top" } = props;
-    const typography = getTypography(props);
 
     return `
-        font-family: ${typography?.fontFamily};
-        align-items: center;
-        text-align: ${horizontalAlign};
-        vertical-align: ${verticalAlign};
-        overflow: hidden;
-        padding: ${spacings?.l}px ${spacings?.s}px;
+      align-items: center;
+      text-align: ${horizontalAlign};
+      vertical-align: ${verticalAlign};
+      overflow: hidden;
+      padding: ${spaces?.l}px ${spaces?.m}px;
     `;
   }}
 `;
-export const StyledStoryHeading = styled("span", {
-  shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
-})`
-  ${fontHeaderS}
-  ${(props) => {
-    const typography = getTypography(props);
-
-    return `
-        line-height: 24px;
-        font-family: ${typography?.fontFamily};
-        display: block;
-       
-    `;
-  }}
-`;
-
-export const StyledStoryBody = styled("span", {
-  shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
-})`
-  ${fontBodyXxs}
-  ${(props) => {
-    const typography = getTypography(props);
-    const colors = getColors(props);
-
-    return `
-          font-family: ${typography?.fontFamily};
-          display: block;
-          color: ${colors?.gray[600]}
-      `;
-  }}
-`;
diff --git a/packages/components/src/core/CellHeader/__snapshots__/index.test.tsx.snap b/packages/components/src/core/CellHeader/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 20f7769cf..000000000
--- a/packages/components/src/core/CellHeader/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<CellHeader /> Default story renders snapshot 1`] = `
-<table>
-  <tbody>
-    <tr>
-      <th
-        class=" css-cafzim"
-        data-mui-internal-clone-element="true"
-        direction="desc"
-      >
-        <div
-          class="css-rm9mvq"
-        >
-          <span>
-            Header
-          </span>
-          <button
-            aria-label="Change sort direction from descending to ascending"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1tty7jy-MuiButtonBase-root-MuiIconButton-root"
-            icon="chevronDown"
-            tabindex="0"
-            type="button"
-          >
-            <div
-              class="css-1ft6wgl"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-                data-file-name="IconChevronDownSmall"
-                data-testid="IconChevronDownSmall"
-                fillcontrast="white"
-                focusable="false"
-                viewBox="0 0 14 14"
-              />
-            </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </th>
-    </tr>
-  </tbody>
-</table>
-`;
diff --git a/packages/components/src/core/CellHeader/__storybook__/constants.ts b/packages/components/src/core/CellHeader/__storybook__/constants.ts
new file mode 100644
index 000000000..e6e98a9b9
--- /dev/null
+++ b/packages/components/src/core/CellHeader/__storybook__/constants.ts
@@ -0,0 +1,9 @@
+export const CELL_HEADER_EXCLUDED_CONTROLS = [
+  "active",
+  "direction",
+  "hideSortIcon",
+  "horizontalAlign",
+  "shouldShowTooltipOnHover",
+  "tooltipProps",
+  "tooltipText",
+];
diff --git a/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx b/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..4e435cd4b
--- /dev/null
+++ b/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx
@@ -0,0 +1,65 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { CELL_HEADER_EXCLUDED_CONTROLS } from "./constants";
+import { TestDemo } from "./stories/test";
+import { CellHeader } from "./stories/default";
+
+export default {
+  argTypes: {
+    active: {
+      control: { type: "boolean" },
+    },
+    direction: {
+      control: { type: "select" },
+      options: ["asc", "desc"],
+    },
+    hideSortIcon: {
+      control: { type: "boolean" },
+    },
+    horizontalAlign: {
+      control: { type: "select" },
+      options: ["left", "center", "right"],
+    },
+    shouldShowTooltipOnHover: {
+      control: { type: "boolean" },
+    },
+    tooltipProps: {
+      control: { type: "object" },
+    },
+    tooltipText: {
+      control: { type: "text" },
+    },
+  },
+  component: CellHeader,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Table/CellHeader",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    active: false,
+    direction: "desc",
+    hideSortIcon: false,
+    shouldShowTooltipOnHover: true,
+    tooltipProps: { sdsStyle: "dark" },
+    tooltipText: "This is a header cell",
+  },
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: CELL_HEADER_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/CellHeader/__storybook__/stories/default.tsx b/packages/components/src/core/CellHeader/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..d031963ff
--- /dev/null
+++ b/packages/components/src/core/CellHeader/__storybook__/stories/default.tsx
@@ -0,0 +1,30 @@
+import { Args } from "@storybook/react";
+import { useEffect, useState } from "react";
+import RawCellHeader, { CellHeaderDirection } from "src/core/CellHeader";
+
+export const CellHeader = (props: Args): JSX.Element => {
+  const { direction, ...rest } = props;
+  const [sorting, setSorting] = useState<CellHeaderDirection>(direction);
+
+  useEffect(() => {
+    setSorting(direction);
+  }, [direction]);
+
+  const clickHandler = () => {
+    setSorting((prevState) => {
+      return prevState === "asc" ? "desc" : "asc";
+    });
+  };
+
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <RawCellHeader onClick={clickHandler} direction={sorting} {...rest}>
+            Header
+          </RawCellHeader>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
diff --git a/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx b/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..6e85f594b
--- /dev/null
+++ b/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx
@@ -0,0 +1,19 @@
+import RawCellHeader from "src/core/CellHeader";
+
+export const TestDemo = (): JSX.Element => (
+  <table>
+    <tbody>
+      <tr>
+        <RawCellHeader
+          data-testid="CellHeader"
+          horizontalAlign="right"
+          shouldShowTooltipOnHover
+          active
+          tooltipText="testTooltipTitle"
+        >
+          Header
+        </RawCellHeader>
+      </tr>
+    </tbody>
+  </table>
+);
diff --git a/packages/components/src/core/CellHeader/CellHeader.namespace-test.tsx b/packages/components/src/core/CellHeader/__tests__/CellHeader.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/CellHeader/CellHeader.namespace-test.tsx
rename to packages/components/src/core/CellHeader/__tests__/CellHeader.namespace-test.tsx
diff --git a/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..090b5b9ca
--- /dev/null
+++ b/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CellHeader /> Default story renders snapshot 1`] = `
+<table>
+  <tbody>
+    <tr>
+      <th
+        class=" css-5bfdy4"
+        data-mui-internal-clone-element="true"
+        direction="desc"
+      >
+        <div
+          class="css-rm9mvq"
+        >
+          <span>
+            Header
+          </span>
+          <div
+            class="css-1ft6wgl"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-12jh8eh-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+            />
+          </div>
+        </div>
+      </th>
+    </tr>
+  </tbody>
+</table>
+`;
diff --git a/packages/components/src/core/CellHeader/index.test.tsx b/packages/components/src/core/CellHeader/__tests__/index.test.tsx
similarity index 90%
rename from packages/components/src/core/CellHeader/index.test.tsx
rename to packages/components/src/core/CellHeader/__tests__/index.test.tsx
index 60e4c3e50..0459cb089 100644
--- a/packages/components/src/core/CellHeader/index.test.tsx
+++ b/packages/components/src/core/CellHeader/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
@@ -33,7 +33,7 @@ describe("<CellHeader />", () => {
     render(<Test />);
     const headerCellElement = screen.getByTestId("CellHeader");
     const sortIcon =
-      headerCellElement.getElementsByClassName("MuiButtonBase-root")[0];
+      headerCellElement.getElementsByClassName("MuiSvgIcon-root")[0];
     expect(sortIcon).toBeTruthy();
   });
 });
diff --git a/packages/components/src/core/CellHeader/index.stories.tsx b/packages/components/src/core/CellHeader/index.stories.tsx
deleted file mode 100644
index 0306be360..000000000
--- a/packages/components/src/core/CellHeader/index.stories.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/* eslint-disable no-use-before-define */
-import { Args, Meta } from "@storybook/react";
-import * as React from "react";
-import RawCellHeader, { CellHeaderDirection } from "./index";
-
-const CellHeader = (props: Args): JSX.Element => {
-  const { direction, ...rest } = props;
-  const [sorting, setSorting] = React.useState<CellHeaderDirection>(direction);
-
-  React.useEffect(() => {
-    setSorting(direction);
-  }, [direction]);
-
-  const clickHandler = () => {
-    setSorting((prevState) => {
-      return prevState === "asc" ? "desc" : "asc";
-    });
-  };
-
-  return (
-    <table>
-      <tbody>
-        <tr>
-          <RawCellHeader onClick={clickHandler} direction={sorting} {...rest}>
-            Header
-          </RawCellHeader>
-        </tr>
-      </tbody>
-    </table>
-  );
-};
-
-export default {
-  argTypes: {
-    active: {
-      control: { type: "boolean" },
-    },
-    direction: {
-      control: { type: "select" },
-      options: ["asc", "desc"],
-    },
-    hideSortIcon: {
-      control: { type: "boolean" },
-    },
-    horizontalAlign: {
-      control: { type: "select" },
-      options: ["left", "center", "right"],
-    },
-    shouldShowTooltipOnHover: {
-      control: { type: "boolean" },
-    },
-    tooltipProps: {
-      control: { type: "object" },
-    },
-    tooltipText: {
-      control: { type: "text" },
-    },
-  },
-  component: CellHeader,
-  title: "Table/CellHeader",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    active: false,
-    direction: "desc",
-    hideSortIcon: false,
-    shouldShowTooltipOnHover: true,
-    tooltipProps: { sdsStyle: "dark" },
-    tooltipText: "This is a header cell",
-  },
-};
-
-// Test
-
-const TestDemo = (): JSX.Element => (
-  <table>
-    <tbody>
-      <tr>
-        <RawCellHeader
-          data-testid="CellHeader"
-          horizontalAlign="right"
-          shouldShowTooltipOnHover
-          active
-          tooltipText="testTooltipTitle"
-        >
-          Header
-        </RawCellHeader>
-      </tr>
-    </tbody>
-  </table>
-);
-
-export const Test = {
-  parameters: {
-    controls: {
-      exclude: [
-        "active",
-        "direction",
-        "hideSortIcon",
-        "horizontalAlign",
-        "shouldShowTooltipOnHover",
-        "tooltipProps",
-        "tooltipText",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/CellHeader/index.tsx b/packages/components/src/core/CellHeader/index.tsx
index 392969037..91be040a2 100644
--- a/packages/components/src/core/CellHeader/index.tsx
+++ b/packages/components/src/core/CellHeader/index.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { IconNameToSizes } from "../Icon";
-import Tooltip, { TooltipProps } from "../Tooltip";
+import { IconNameToSizes } from "src/core/Icon";
+import Tooltip, { TooltipProps } from "src/core/Tooltip";
 import {
   CellHeaderExtraProps,
   StyledCellHeaderContainer,
@@ -42,7 +42,7 @@ const CellHeaderContent = (
   } = props;
 
   const sdsIconName: keyof IconNameToSizes =
-    direction === "asc" ? "chevronUp" : "chevronDown";
+    direction === "asc" ? "ChevronUp" : "ChevronDown";
 
   const sortIcon = (
     <StyledSortingIcon
@@ -51,10 +51,10 @@ const CellHeaderContent = (
           ? "Change sort direction from ascending to descending"
           : "Change sort direction from descending to ascending"
       }
-      sdsType="tertiary"
-      sdsSize="small"
+      sdsIcon={sdsIconName}
+      sdsType="static"
+      sdsSize="xs"
       active={active}
-      icon={sdsIconName}
     />
   );
 
diff --git a/packages/components/src/core/CellHeader/style.ts b/packages/components/src/core/CellHeader/style.ts
index f171b2515..9d8de9d5c 100644
--- a/packages/components/src/core/CellHeader/style.ts
+++ b/packages/components/src/core/CellHeader/style.ts
@@ -1,13 +1,12 @@
 import { styled } from "@mui/material/styles";
-import ButtonIcon from "../ButtonIcon";
 import {
   CommonThemeProps,
   fontHeaderS,
-  getColors,
-  getPalette,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
+import Icon from "src/core/Icon";
 
 export interface CellHeaderExtraProps extends CommonThemeProps {
   active?: boolean;
@@ -29,19 +28,19 @@ const doNotForwardProps = [
   "hideSortIcon",
 ];
 
-export const StyledSortingIcon = styled(ButtonIcon, {
+export const StyledSortingIcon = styled(Icon, {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })`
   ${(props: CellHeaderExtraProps) => {
     const { active = false } = props;
 
-    const spacings = getSpaces(props);
-    const colors = getColors(props);
+    const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
-      margin-left: ${spacings?.s}px;
-      margin-bottom: 2px;
-      color: ${active ? colors?.primary[400] : colors?.gray[400]};
+      margin-left: ${spaces?.s}px;
+      margin-bottom: ${spaces?.xxs}px;
+      color: ${active ? semanticComponentColors?.accent?.icon : semanticComponentColors?.base?.icon};
       opacity: ${active ? 1 : 0};
       outline: none !important;
     `;
@@ -56,15 +55,13 @@ export const StyledTableHeader = styled("th", {
   ${(props: CellHeaderExtraProps) => {
     const { active = false, horizontalAlign = "left" } = props;
 
-    const spacings = getSpaces(props);
-    const typography = getTypography(props);
-    const colors = getColors(props);
-    const palette = getPalette(props);
+    const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
-      color: ${active ? colors?.primary[400] : palette.text?.secondary};
-      font-family: ${typography?.fontFamily};
-      padding: ${spacings?.l}px ${spacings?.s}px;
+      color: ${active ? semanticComponentColors?.accent?.fill : semanticTextColors?.base?.secondary};
+      padding: ${spaces?.l}px ${spaces?.m}px;
       text-align: ${horizontalAlign};
       min-width: 96px;
       width: 96px;
@@ -76,12 +73,16 @@ export const StyledTableHeader = styled("th", {
       }
 
       &:hover {
-        color: ${active ? colors?.primary[500] : palette.text?.primary};
+        color: ${active ? semanticComponentColors?.accent?.fillHover : semanticTextColors?.base?.primary};
 
         & .MuiButtonBase-root {
-          color: ${active ? colors?.primary[500] : palette.text?.secondary};
+          color: ${active ? semanticComponentColors?.accent?.fillHover : semanticComponentColors?.base?.iconHover};
           opacity: 1;
         }
+
+        & svg {
+          color: ${active ? semanticComponentColors?.accent?.fillHover : semanticTextColors?.base?.primary};
+        }
       }
     `;
   }}
diff --git a/packages/components/src/core/Chip/index.stories.tsx b/packages/components/src/core/Chip/__storybook__/index.stories.tsx
similarity index 87%
rename from packages/components/src/core/Chip/index.stories.tsx
rename to packages/components/src/core/Chip/__storybook__/index.stories.tsx
index 675850ff6..887d275fe 100644
--- a/packages/components/src/core/Chip/index.stories.tsx
+++ b/packages/components/src/core/Chip/__storybook__/index.stories.tsx
@@ -1,7 +1,8 @@
 import { Args, Meta } from "@storybook/react";
 import React from "react";
-import Button from "../Button";
-import Chip from "./index";
+import Button from "../../Button";
+import Chip from "../index";
+import { BADGE } from "../../../common/storybook/storybookBadges";
 
 const Demo = (props: Args): JSX.Element => {
   const { size, isRounded } = props;
@@ -25,7 +26,10 @@ const Demo = (props: Args): JSX.Element => {
 
 export default {
   component: Demo,
-  title: "Chip - To Be Depreciated",
+  parameters: {
+    badges: [BADGE.DEPRECATED],
+  },
+  title: "Deprecated/Chip [deprecated]",
 } as Meta;
 
 export const MediumSquareChip = {
diff --git a/packages/components/src/core/Chip/style.ts b/packages/components/src/core/Chip/style.ts
index 2b7119667..316e5d01e 100644
--- a/packages/components/src/core/Chip/style.ts
+++ b/packages/components/src/core/Chip/style.ts
@@ -8,7 +8,7 @@ import {
   getColors,
   getCorners,
   getSpaces,
-} from "../styles";
+} from "src/core/styles";
 
 export interface ChipExtraProps extends CommonThemeProps {
   size?: "small" | "medium";
@@ -17,11 +17,11 @@ export interface ChipExtraProps extends CommonThemeProps {
 }
 
 const small = (props: ChipExtraProps): SerializedStyles => {
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
 
   return css`
-    height: ${spacings?.l}px;
-    padding: ${spacings?.xxs}px ${spacings?.xs}px;
+    height: ${spaces?.l}px;
+    padding: ${spaces?.xxs}px ${spaces?.xs}px;
 
     .MuiChip-label {
       ${fontCapsXxxxs(props)}
@@ -31,35 +31,35 @@ const small = (props: ChipExtraProps): SerializedStyles => {
 };
 
 const medium = (props: ChipExtraProps): SerializedStyles => {
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
   const colors = getColors(props);
 
   return css`
-    margin: 0 ${spacings?.s}px;
+    margin: 0 ${spaces?.s}px;
     height: 24px;
 
-    background-color: ${colors?.primary[400]};
+    background-color: ${colors?.blue[400]};
 
     &:hover {
-      background-color: ${colors?.primary[500]};
+      background-color: ${colors?.blue[500]};
     }
 
     &:active {
-      background-color: ${colors?.primary[600]};
+      background-color: ${colors?.blue[600]};
     }
 
     .MuiChip-label {
       ${fontHeaderXs(props)}
       color: white;
-      padding-left: ${spacings?.s}px;
+      padding-left: ${spaces?.s}px;
     }
 
     .MuiChip-deleteIcon {
       color: white;
-      padding-right: ${spacings?.xxs}px;
-      margin: 0 0 0 -${spacings?.s}px;
-      height: ${spacings?.l}px;
-      width: ${spacings?.l}px;
+      padding-right: ${spaces?.xxs}px;
+      margin: 0 0 0 -${spaces?.s}px;
+      height: ${spaces?.l}px;
+      width: ${spaces?.l}px;
 
       &:hover,
       &:focus-visible {
@@ -119,28 +119,28 @@ function createStatusCss(
 
   const statusToColors = {
     beta: {
-      dark: colors.beta[600],
-      light: colors.beta[200],
+      dark: colors.purple[600],
+      light: colors.purple[200],
     },
     error: {
-      dark: colors.error[600],
-      light: colors.error[200],
+      dark: colors.red[600],
+      light: colors.red[200],
     },
     info: {
-      dark: colors.info[600],
-      light: colors.info[200],
+      dark: colors.blue[600],
+      light: colors.blue[200],
     },
     pending: {
       dark: colors.gray[600],
       light: colors.gray[200],
     },
     success: {
-      dark: colors.success[600],
-      light: colors.success[200],
+      dark: colors.green[600],
+      light: colors.green[200],
     },
     warning: {
-      dark: colors.warning[600],
-      light: colors.warning[200],
+      dark: colors.yellow[600],
+      light: colors.yellow[200],
     },
   };
 
diff --git a/packages/components/src/core/ComplexFilter/__storybook__/constants.tsx b/packages/components/src/core/ComplexFilter/__storybook__/constants.tsx
new file mode 100644
index 000000000..8bc558c1f
--- /dev/null
+++ b/packages/components/src/core/ComplexFilter/__storybook__/constants.tsx
@@ -0,0 +1,29 @@
+import { noop } from "src/common/utils";
+
+export const COMPLEX_FILTER_EXCLUDED_CONTROLS = [
+  "label",
+  "multiple",
+  "onChange",
+  "search",
+  "keepSearchOnSelect",
+];
+
+export const COMPLEX_FILTER_ON_CHANGE_OPTIONS = [
+  noop,
+  (value: never) => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  },
+];
+
+export const COMPLEX_FILTER_LIVE_PREVIEW_STYLES = {
+  display: "grid",
+  gridColumnGap: 30,
+  gridTemplateColumns: "repeat(3, min-content)",
+};
+
+export const COMPLEX_FILTER_LIVE_PREVIEW_OPTIONS = [
+  { name: "Filter Item 1" },
+  { name: "Filter Item 2" },
+  { name: "Filter Item 3" },
+];
diff --git a/packages/components/src/core/ComplexFilter/__storybook__/index.stories.tsx b/packages/components/src/core/ComplexFilter/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..6b0044b33
--- /dev/null
+++ b/packages/components/src/core/ComplexFilter/__storybook__/index.stories.tsx
@@ -0,0 +1,86 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import {
+  COMPLEX_FILTER_EXCLUDED_CONTROLS,
+  COMPLEX_FILTER_ON_CHANGE_OPTIONS,
+} from "./constants";
+import { ComplexFilter } from "./stories/default";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    label: {
+      control: {
+        type: "text",
+      },
+    },
+    multiple: {
+      control: {
+        type: "boolean",
+      },
+    },
+    onChange: {
+      control: {
+        labels: ["Noop", "console.log(value)"],
+        type: "select",
+      },
+      mapping: COMPLEX_FILTER_ON_CHANGE_OPTIONS,
+      options: Object.keys(COMPLEX_FILTER_ON_CHANGE_OPTIONS),
+    },
+    search: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  component: ComplexFilter,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Dropdowns/ComplexFilter",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    label: "Click Target",
+    multiple: true,
+    onChange: COMPLEX_FILTER_ON_CHANGE_OPTIONS[1],
+    search: true,
+  },
+};
+
+// Live preview
+
+export const LivePreview = {
+  args: {
+    keepSearchOnSelect: true,
+    multiple: false,
+    search: false,
+  },
+  parameters: {
+    controls: {
+      exclude: COMPLEX_FILTER_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: COMPLEX_FILTER_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} data-testid="complex-filter" />,
+};
diff --git a/packages/components/src/core/ComplexFilter/__storybook__/stories/default.tsx b/packages/components/src/core/ComplexFilter/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..3b54298f5
--- /dev/null
+++ b/packages/components/src/core/ComplexFilter/__storybook__/stories/default.tsx
@@ -0,0 +1,22 @@
+import { Args } from "@storybook/react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { noop } from "src/common/utils";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+import RawComplexFilter from "src/core/ComplexFilter";
+
+export const ComplexFilter = <T extends DefaultAutocompleteOption>(
+  props: Args
+): JSX.Element => {
+  return (
+    <RawComplexFilter
+      label="Click Target"
+      onChange={noop}
+      options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
+      DropdownMenuProps={{
+        groupBy: (option: DefaultAutocompleteOption) =>
+          option.section as string,
+      }}
+      {...props}
+    />
+  );
+};
diff --git a/packages/components/src/core/ComplexFilter/__storybook__/stories/livePreview.tsx b/packages/components/src/core/ComplexFilter/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..0d0d27bb5
--- /dev/null
+++ b/packages/components/src/core/ComplexFilter/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,41 @@
+import RawComplexFilter from "src/core/ComplexFilter";
+import { noop } from "src/common/utils";
+import {
+  COMPLEX_FILTER_LIVE_PREVIEW_OPTIONS,
+  COMPLEX_FILTER_LIVE_PREVIEW_STYLES,
+} from "../constants";
+
+export const LivePreviewDemo = (): JSX.Element => {
+  return (
+    <div style={COMPLEX_FILTER_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      <div>
+        <RawComplexFilter
+          DropdownMenuProps={{
+            PopperBaseProps: {
+              sx: { width: 160 },
+            },
+          }}
+          label="Filter Label"
+          multiple={false}
+          search={false}
+          onChange={noop}
+          options={COMPLEX_FILTER_LIVE_PREVIEW_OPTIONS}
+        />
+      </div>
+      <div>
+        <RawComplexFilter
+          DropdownMenuProps={{
+            PopperBaseProps: {
+              sx: { width: 160 },
+            },
+          }}
+          label="Filter Label"
+          multiple
+          search={false}
+          onChange={noop}
+          options={COMPLEX_FILTER_LIVE_PREVIEW_OPTIONS}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/ComplexFilter/__storybook__/stories/test.tsx b/packages/components/src/core/ComplexFilter/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..cf855e459
--- /dev/null
+++ b/packages/components/src/core/ComplexFilter/__storybook__/stories/test.tsx
@@ -0,0 +1,18 @@
+import { Args } from "@storybook/react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { noop } from "src/common/utils";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+import RawComplexFilter from "src/core/ComplexFilter";
+
+export const TestDemo = <T extends DefaultAutocompleteOption>(
+  props: Args
+): JSX.Element => {
+  return (
+    <RawComplexFilter
+      label="Click Target"
+      onChange={noop}
+      options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
+      {...props}
+    />
+  );
+};
diff --git a/packages/components/src/core/ComplexFilter/ComplexFilter.namespace-test.tsx b/packages/components/src/core/ComplexFilter/__tests__/ComplexFilter.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/ComplexFilter/ComplexFilter.namespace-test.tsx
rename to packages/components/src/core/ComplexFilter/__tests__/ComplexFilter.namespace-test.tsx
diff --git a/packages/components/src/core/ComplexFilter/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
similarity index 86%
rename from packages/components/src/core/ComplexFilter/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
index e5334ab24..016242e61 100644
--- a/packages/components/src/core/ComplexFilter/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
   class="css-1x0reya"
 >
   <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-17rutjt-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1yq35rh-MuiButtonBase-root-MuiButton-root"
     label="Click Target"
     tabindex="0"
     type="button"
@@ -14,7 +14,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
       class="css-ae1gg6"
     >
       <span
-        class="styled-label css-mxudk4"
+        class="styled-label css-1ubkbz8"
       >
         Click Target
       </span>
@@ -31,7 +31,9 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
             data-testid="IconChevronDownSmall"
             fillcontrast="white"
             focusable="false"
-            viewBox="0 0 14 14"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
           />
         </div>
       </span>
diff --git a/packages/components/src/core/ComplexFilter/index.test.tsx b/packages/components/src/core/ComplexFilter/__tests__/index.test.tsx
similarity index 89%
rename from packages/components/src/core/ComplexFilter/index.test.tsx
rename to packages/components/src/core/ComplexFilter/__tests__/index.test.tsx
index 08a3e7fc3..39657c47f 100644
--- a/packages/components/src/core/ComplexFilter/index.test.tsx
+++ b/packages/components/src/core/ComplexFilter/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 const { Test } = composeStories(stories);
 
diff --git a/packages/components/src/core/ComplexFilter/index.stories.tsx b/packages/components/src/core/ComplexFilter/index.stories.tsx
deleted file mode 100644
index 514ef2439..000000000
--- a/packages/components/src/core/ComplexFilter/index.stories.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import { noop } from "src/common/utils";
-import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "../../common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
-import { DefaultAutocompleteOption } from "../Autocomplete/components/AutocompleteBase";
-import RawComplexFilter from "./index";
-
-const ComplexFilter = <T extends DefaultAutocompleteOption>(
-  props: Args
-): JSX.Element => {
-  return (
-    <RawComplexFilter
-      label="Click Target"
-      onChange={noop}
-      options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
-      DropdownMenuProps={{
-        groupBy: (option: DefaultAutocompleteOption) =>
-          option.section as string,
-      }}
-      {...props}
-    />
-  );
-};
-
-const onChangeOptions = [
-  noop,
-  (value: never) => {
-    // eslint-disable-next-line no-console
-    console.log(value);
-  },
-];
-
-export default {
-  argTypes: {
-    label: {
-      control: {
-        type: "text",
-      },
-    },
-    multiple: {
-      control: {
-        type: "boolean",
-      },
-    },
-    onChange: {
-      control: {
-        labels: ["Noop", "console.log(value)"],
-        type: "select",
-      },
-      mapping: onChangeOptions,
-      options: Object.keys(onChangeOptions),
-    },
-    search: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-  component: ComplexFilter,
-  title: "ComplexFilter",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    label: "Click Target",
-    multiple: true,
-    onChange: onChangeOptions[1],
-    search: true,
-  },
-};
-
-// Live preview
-
-const livePreviewStyles = {
-  display: "grid",
-  gridColumnGap: 30,
-  gridTemplateColumns: "repeat(3, min-content)",
-};
-
-const LivePreviewDemo = (): JSX.Element => {
-  return (
-    <div style={livePreviewStyles as React.CSSProperties}>
-      <div style={{ gridArea: "1/1/2/2" }}>
-        <RawComplexFilter
-          DropdownMenuProps={{
-            PopperBaseProps: {
-              sx: { width: 160 },
-            },
-          }}
-          label="Filter Label"
-          multiple={false}
-          search={false}
-          onChange={noop}
-          options={LIVE_PREVIEW_OPTIONS}
-        />
-      </div>
-      <div style={{ gridArea: "1/2/2/3" }}>
-        <RawComplexFilter
-          DropdownMenuProps={{
-            PopperBaseProps: {
-              sx: { width: 160 },
-            },
-          }}
-          label="Filter Label"
-          multiple
-          search={false}
-          onChange={noop}
-          options={LIVE_PREVIEW_OPTIONS}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  args: {
-    keepSearchOnSelect: true,
-    multiple: false,
-    search: false,
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-const LIVE_PREVIEW_OPTIONS = [
-  { name: "Filter Item 1" },
-  { name: "Filter Item 2" },
-  { name: "Filter Item 3" },
-];
-
-// Test
-
-const TestDemo = <T extends DefaultAutocompleteOption>(
-  props: Args
-): JSX.Element => {
-  return (
-    <RawComplexFilter
-      label="Click Target"
-      onChange={noop}
-      options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
-      {...props}
-    />
-  );
-};
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  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 ad862f385..5e8ea078a 100644
--- a/packages/components/src/core/ComplexFilter/index.tsx
+++ b/packages/components/src/core/ComplexFilter/index.tsx
@@ -3,12 +3,12 @@ import {
   AutocompleteValue,
 } from "@mui/material/useAutocomplete";
 import React, { ReactNode, useEffect, useState } from "react";
-import { DefaultAutocompleteOption } from "../Autocomplete/components/AutocompleteBase";
-import DropdownMenu from "../DropdownMenu";
-import { StyledPopper } from "../DropdownMenu/style";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
+import DropdownMenu from "src/core/DropdownMenu";
+import { StyledPopper } from "src/core/DropdownMenu/style";
 import InputDropdown, {
   InputDropdownProps as InputDropdownPropsType,
-} from "../InputDropdown";
+} from "src/core/InputDropdown";
 import Chips from "./components/Chips";
 import { StyledChipsWrapper, Wrapper } from "./style";
 
diff --git a/packages/components/src/core/ComplexFilter/style.ts b/packages/components/src/core/ComplexFilter/style.ts
index c702bd44b..b142f43b7 100644
--- a/packages/components/src/core/ComplexFilter/style.ts
+++ b/packages/components/src/core/ComplexFilter/style.ts
@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { getSpaces } from "../styles";
+import { getSpaces } from "src/core/styles";
 
 export const Wrapper = styled("div")`
   min-width: 150px;
@@ -7,10 +7,10 @@ export const Wrapper = styled("div")`
 
 export const StyledChipsWrapper = styled("div")`
   ${(props) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
-      margin-top: ${spacings?.s}px;
+      margin-top: ${spaces?.s}px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/Dialog/__storybook__/constants.tsx b/packages/components/src/core/Dialog/__storybook__/constants.tsx
new file mode 100644
index 000000000..bb8709279
--- /dev/null
+++ b/packages/components/src/core/Dialog/__storybook__/constants.tsx
@@ -0,0 +1,7 @@
+export const DIALOG_EXCLUDED_CONTROLS = [
+  "canClickOutsideClose",
+  "buttonPosition",
+  "longContent",
+  "titleOnClose",
+  "sdsSize",
+];
diff --git a/packages/components/src/core/Dialog/__storybook__/index.stories.tsx b/packages/components/src/core/Dialog/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..0ba367b54
--- /dev/null
+++ b/packages/components/src/core/Dialog/__storybook__/index.stories.tsx
@@ -0,0 +1,115 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Dialog } from "./stories/default";
+import { DIALOG_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { TestDemo } from "./stories/test";
+import { TestNoTitleOnCloseDemo } from "./stories/testNoTitleOnClose";
+import { TestButtonPositionLeftDemo } from "./stories/testButtonPositionLeft";
+
+export default {
+  argTypes: {
+    buttonPosition: {
+      control: {
+        type: "radio",
+      },
+      options: ["left", "right"],
+    },
+    canClickOutsideClose: {
+      control: {
+        type: "boolean",
+      },
+    },
+    longContent: {
+      control: {
+        type: "boolean",
+      },
+    },
+    sdsSize: {
+      control: {
+        type: "radio",
+      },
+      options: ["xs", "s", "m", "l"],
+    },
+    titleOnClose: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  component: Dialog,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Dialog",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    buttonPosition: "right",
+    longContent: true,
+    sdsSize: "m",
+    titleOnClose: false,
+  },
+};
+
+// LivePreview
+
+export const LivePreview = {
+  args: {
+    titleOnClose: false,
+  },
+  parameters: {
+    controls: {
+      exclude: DIALOG_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: DIALOG_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
+
+// Test No Title On Close
+
+export const TestNoTitleOnClose = {
+  parameters: {
+    controls: {
+      exclude: DIALOG_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestNoTitleOnCloseDemo {...args} />,
+};
+
+// Test Button Position Left
+
+export const TestButtonPositionLeft = {
+  parameters: {
+    controls: {
+      exclude: DIALOG_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestButtonPositionLeftDemo {...args} />,
+};
diff --git a/packages/components/src/core/Dialog/__storybook__/stories/default.tsx b/packages/components/src/core/Dialog/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..b74f50e68
--- /dev/null
+++ b/packages/components/src/core/Dialog/__storybook__/stories/default.tsx
@@ -0,0 +1,80 @@
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import Button from "src/core/Button";
+import RawDialog from "src/core/Dialog";
+import DialogTitle from "src/core/Dialog/components/DialogTitle";
+import DialogContent from "src/core/Dialog/components/DialogContent";
+import DialogActions from "src/core/Dialog/components/DialogActions";
+import { EXTRA_LONG_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+
+export const Dialog = (props: Args): JSX.Element => {
+  const {
+    buttonPosition,
+    longContent = false,
+    isOpen: propsIsOpen = false,
+    titleOnClose,
+    ...rest
+  } = props;
+
+  const [isOpen, setIsOpen] = useState(propsIsOpen);
+
+  return (
+    <>
+      <Button sdsStyle="minimal" sdsType="primary" onClick={handleClick}>
+        Open {rest.sdsSize}
+      </Button>
+      <RawDialog onClose={handleClose} open={isOpen} {...rest}>
+        <DialogTitle
+          title="Title"
+          subtitle="Optional Subtitle"
+          overline="Optional Overline"
+          onClose={titleOnClose ? handleClose : undefined}
+          data-testid="dialog-title"
+        />
+        <DialogContent data-testid="dialog-content">
+          {longContent ? EXTRA_LONG_LOREM_IPSUM : "Content Module"}
+        </DialogContent>
+        <DialogActions
+          data-testid="dialog-actions"
+          buttonPosition={buttonPosition}
+        >
+          <Buttons />
+        </DialogActions>
+      </RawDialog>
+    </>
+  );
+
+  function Buttons(): JSX.Element {
+    if (buttonPosition === "left") {
+      return (
+        <>
+          <Button sdsStyle="square" sdsType="primary" onClick={handleClose}>
+            Primary Action
+          </Button>
+          <Button sdsStyle="square" sdsType="secondary" onClick={handleClose}>
+            Secondary Action
+          </Button>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <Button sdsStyle="square" sdsType="secondary" onClick={handleClose}>
+          Secondary Action
+        </Button>
+        <Button sdsStyle="square" sdsType="primary" onClick={handleClose}>
+          Primary Action
+        </Button>
+      </>
+    );
+  }
+
+  function handleClick() {
+    setIsOpen(true);
+  }
+
+  function handleClose() {
+    setIsOpen(false);
+  }
+};
diff --git a/packages/components/src/core/Dialog/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Dialog/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..27cdff066
--- /dev/null
+++ b/packages/components/src/core/Dialog/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,13 @@
+import { Args } from "@storybook/react";
+import { Dialog } from "./default";
+
+export function LivePreviewDemo(props: Args): JSX.Element {
+  return (
+    <>
+      <Dialog sdsSize="xs" {...props} />
+      <Dialog sdsSize="s" {...props} />
+      <Dialog sdsSize="m" {...props} />
+      <Dialog sdsSize="l" {...props} />
+    </>
+  );
+}
diff --git a/packages/components/src/core/Dialog/__storybook__/stories/test.tsx b/packages/components/src/core/Dialog/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..77e6c907d
--- /dev/null
+++ b/packages/components/src/core/Dialog/__storybook__/stories/test.tsx
@@ -0,0 +1,15 @@
+import { Args } from "@storybook/react";
+import { Dialog } from "./default";
+
+export function TestDemo(props: Args): JSX.Element {
+  const defaultProps = { ...props, isOpen: true, titleOnClose: true };
+
+  return (
+    <>
+      <Dialog sdsSize="xs" {...defaultProps} />
+      <Dialog sdsSize="s" {...defaultProps} />
+      <Dialog sdsSize="m" {...defaultProps} />
+      <Dialog sdsSize="l" {...defaultProps} />
+    </>
+  );
+}
diff --git a/packages/components/src/core/Dialog/__storybook__/stories/testButtonPositionLeft.tsx b/packages/components/src/core/Dialog/__storybook__/stories/testButtonPositionLeft.tsx
new file mode 100644
index 000000000..bc8f41140
--- /dev/null
+++ b/packages/components/src/core/Dialog/__storybook__/stories/testButtonPositionLeft.tsx
@@ -0,0 +1,6 @@
+import { Args } from "@storybook/react";
+import { Dialog } from "./default";
+
+export function TestButtonPositionLeftDemo(props: Args): JSX.Element {
+  return <Dialog sdsSize="xs" {...props} isOpen buttonPosition="left" />;
+}
diff --git a/packages/components/src/core/Dialog/__storybook__/stories/testNoTitleOnClose.tsx b/packages/components/src/core/Dialog/__storybook__/stories/testNoTitleOnClose.tsx
new file mode 100644
index 000000000..c95dc82cf
--- /dev/null
+++ b/packages/components/src/core/Dialog/__storybook__/stories/testNoTitleOnClose.tsx
@@ -0,0 +1,6 @@
+import { Args } from "@storybook/react";
+import { Dialog } from "./default";
+
+export function TestNoTitleOnCloseDemo(props: Args): JSX.Element {
+  return <Dialog sdsSize="xs" {...props} isOpen />;
+}
diff --git a/packages/components/src/core/Dialog/Dialog.namespace-test.tsx b/packages/components/src/core/Dialog/__tests__/Dialog.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Dialog/Dialog.namespace-test.tsx
rename to packages/components/src/core/Dialog/__tests__/Dialog.namespace-test.tsx
diff --git a/packages/components/src/core/Dialog/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
similarity index 81%
rename from packages/components/src/core/Dialog/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
index ff743209e..9580b237c 100644
--- a/packages/components/src/core/Dialog/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Dialog /> 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-1q1lhqz-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1q5arjd-MuiButtonBase-root-MuiButton-root"
   tabindex="0"
   type="button"
 >
@@ -22,8 +22,8 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1sghtpe-MuiButtonBase-root-MuiIconButton-root"
-    icon="xMark"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1t24kd3-MuiButtonBase-root-MuiIconButton-root"
+    icon="XMark"
     tabindex="0"
     type="button"
   >
@@ -37,13 +37,20 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
         data-testid="IconXMarkSmall"
         fillcontrast="white"
         focusable="false"
-        viewBox="0 0 14 14"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
       />
     </div>
     <span
       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />
   </button>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-lr0kx2-MuiTypography-root"
+  >
+    Optional Overline
+  </p>
   <p
     class="MuiTypography-root MuiTypography-body1 css-1s4wytx-MuiTypography-root"
   >
@@ -52,14 +59,14 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
   <p
     class="MuiTypography-root MuiTypography-body1 css-mqftut-MuiTypography-root"
   >
-    Optional subtitle
+    Optional Subtitle
   </p>
 </h2>
 `;
 
 exports[`<Dialog /> Dialog all sizes match the snapshots 2`] = `
 <div
-  class="MuiDialogContent-root css-1sec6bs-MuiDialogContent-root"
+  class="MuiDialogContent-root css-loe64q-MuiDialogContent-root"
   data-testid="dialog-content"
 >
   Content Module
@@ -72,7 +79,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 3`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-91swi7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1d7enxa-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -82,7 +89,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 3`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-81bzv7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-u3s4xc-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -102,8 +109,8 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-fre2k7-MuiButtonBase-root-MuiIconButton-root"
-    icon="xMark"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-13e5vfk-MuiButtonBase-root-MuiIconButton-root"
+    icon="XMark"
     tabindex="0"
     type="button"
   >
@@ -117,13 +124,20 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
         data-testid="IconXMarkLarge"
         fillcontrast="white"
         focusable="false"
-        viewBox="0 0 22 22"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
       />
     </div>
     <span
       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />
   </button>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-lr0kx2-MuiTypography-root"
+  >
+    Optional Overline
+  </p>
   <p
     class="MuiTypography-root MuiTypography-body1 css-1s4wytx-MuiTypography-root"
   >
@@ -132,14 +146,14 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
   <p
     class="MuiTypography-root MuiTypography-body1 css-mqftut-MuiTypography-root"
   >
-    Optional subtitle
+    Optional Subtitle
   </p>
 </h2>
 `;
 
 exports[`<Dialog /> Dialog all sizes match the snapshots 5`] = `
 <div
-  class="MuiDialogContent-root css-1sec6bs-MuiDialogContent-root"
+  class="MuiDialogContent-root css-loe64q-MuiDialogContent-root"
   data-testid="dialog-content"
 >
   Content Module
@@ -152,7 +166,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 6`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-91swi7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1d7enxa-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -162,7 +176,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 6`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-81bzv7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-u3s4xc-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -182,8 +196,8 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1f22o7g-MuiButtonBase-root-MuiIconButton-root"
-    icon="xMark"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-d61xrp-MuiButtonBase-root-MuiIconButton-root"
+    icon="XMark"
     tabindex="0"
     type="button"
   >
@@ -197,13 +211,20 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
         data-testid="IconXMarkLarge"
         fillcontrast="white"
         focusable="false"
-        viewBox="0 0 22 22"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
       />
     </div>
     <span
       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />
   </button>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-lr0kx2-MuiTypography-root"
+  >
+    Optional Overline
+  </p>
   <p
     class="MuiTypography-root MuiTypography-body1 css-1s4wytx-MuiTypography-root"
   >
@@ -212,14 +233,14 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
   <p
     class="MuiTypography-root MuiTypography-body1 css-mqftut-MuiTypography-root"
   >
-    Optional subtitle
+    Optional Subtitle
   </p>
 </h2>
 `;
 
 exports[`<Dialog /> Dialog all sizes match the snapshots 8`] = `
 <div
-  class="MuiDialogContent-root css-1sec6bs-MuiDialogContent-root"
+  class="MuiDialogContent-root css-loe64q-MuiDialogContent-root"
   data-testid="dialog-content"
 >
   Content Module
@@ -232,7 +253,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 9`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-91swi7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1d7enxa-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -242,7 +263,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 9`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-81bzv7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-u3s4xc-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -262,8 +283,8 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1f22o7g-MuiButtonBase-root-MuiIconButton-root"
-    icon="xMark"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-d61xrp-MuiButtonBase-root-MuiIconButton-root"
+    icon="XMark"
     tabindex="0"
     type="button"
   >
@@ -277,13 +298,20 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
         data-testid="IconXMarkLarge"
         fillcontrast="white"
         focusable="false"
-        viewBox="0 0 22 22"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
       />
     </div>
     <span
       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />
   </button>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-lr0kx2-MuiTypography-root"
+  >
+    Optional Overline
+  </p>
   <p
     class="MuiTypography-root MuiTypography-body1 css-1s4wytx-MuiTypography-root"
   >
@@ -292,14 +320,14 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
   <p
     class="MuiTypography-root MuiTypography-body1 css-mqftut-MuiTypography-root"
   >
-    Optional subtitle
+    Optional Subtitle
   </p>
 </h2>
 `;
 
 exports[`<Dialog /> Dialog all sizes match the snapshots 11`] = `
 <div
-  class="MuiDialogContent-root css-1sec6bs-MuiDialogContent-root"
+  class="MuiDialogContent-root css-loe64q-MuiDialogContent-root"
   data-testid="dialog-content"
 >
   Content Module
@@ -312,7 +340,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 12`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-91swi7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1d7enxa-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -322,7 +350,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 12`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-81bzv7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-u3s4xc-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -340,7 +368,7 @@ exports[`<Dialog /> renders Dialog left positioned buttons 1`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-81bzv7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-u3s4xc-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -350,7 +378,7 @@ exports[`<Dialog /> renders Dialog left positioned buttons 1`] = `
     />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-91swi7-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1d7enxa-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
@@ -368,6 +396,11 @@ exports[`<Dialog /> renders Dialog without title X button 1`] = `
   data-testid="dialog-title"
   id=":r5:"
 >
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-lr0kx2-MuiTypography-root"
+  >
+    Optional Overline
+  </p>
   <p
     class="MuiTypography-root MuiTypography-body1 css-1s4wytx-MuiTypography-root"
   >
@@ -376,7 +409,7 @@ exports[`<Dialog /> renders Dialog without title X button 1`] = `
   <p
     class="MuiTypography-root MuiTypography-body1 css-mqftut-MuiTypography-root"
   >
-    Optional subtitle
+    Optional Subtitle
   </p>
 </h2>
 `;
diff --git a/packages/components/src/core/Dialog/index.test.tsx b/packages/components/src/core/Dialog/__tests__/index.test.tsx
similarity index 96%
rename from packages/components/src/core/Dialog/index.test.tsx
rename to packages/components/src/core/Dialog/__tests__/index.test.tsx
index c8cad10f6..34cc5198d 100644
--- a/packages/components/src/core/Dialog/index.test.tsx
+++ b/packages/components/src/core/Dialog/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 const DIALOG_TITLE_TEST_ID = "dialog-title";
 const DIALOG_CONTENT_TEST_ID = "dialog-content";
diff --git a/packages/components/src/core/DialogActions/index.tsx b/packages/components/src/core/Dialog/components/DialogActions/index.tsx
similarity index 100%
rename from packages/components/src/core/DialogActions/index.tsx
rename to packages/components/src/core/Dialog/components/DialogActions/index.tsx
diff --git a/packages/components/src/core/DialogActions/style.ts b/packages/components/src/core/Dialog/components/DialogActions/style.ts
similarity index 79%
rename from packages/components/src/core/DialogActions/style.ts
rename to packages/components/src/core/Dialog/components/DialogActions/style.ts
index 5030bd716..075aea086 100644
--- a/packages/components/src/core/DialogActions/style.ts
+++ b/packages/components/src/core/Dialog/components/DialogActions/style.ts
@@ -1,6 +1,6 @@
-import { DialogActions } from "@mui/material";
+import { DialogActions, dialogActionsClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { CommonThemeProps, getSpaces } from "../styles";
+import { CommonThemeProps, getSpaces } from "src/core/styles";
 
 export interface DialogActionsExtraProps extends CommonThemeProps {
   buttonPosition?: "left" | "right";
@@ -25,7 +25,7 @@ export const StyledDialogActions = styled(DialogActions, {
 
       margin-top: ${spaces?.xxl}px;
 
-      &.MuiDialogActions-spacing > :not(:first-of-type) {
+      &.${dialogActionsClasses.spacing} > :not(:first-of-type) {
         margin-left: ${spaces?.m}px;
       }
   `;
diff --git a/packages/components/src/core/DialogContent/index.tsx b/packages/components/src/core/Dialog/components/DialogContent/index.tsx
similarity index 100%
rename from packages/components/src/core/DialogContent/index.tsx
rename to packages/components/src/core/Dialog/components/DialogContent/index.tsx
diff --git a/packages/components/src/core/DialogContent/style.ts b/packages/components/src/core/Dialog/components/DialogContent/style.ts
similarity index 73%
rename from packages/components/src/core/DialogContent/style.ts
rename to packages/components/src/core/Dialog/components/DialogContent/style.ts
index 8756711db..2e2e6d49a 100644
--- a/packages/components/src/core/DialogContent/style.ts
+++ b/packages/components/src/core/Dialog/components/DialogContent/style.ts
@@ -1,6 +1,8 @@
 import { DialogContent } from "@mui/material";
 import { styled } from "@mui/material/styles";
+import { fontBodyS } from "src/core/styles";
 
 export const StyledDialogContent = styled(DialogContent)`
+  ${fontBodyS}
   padding: 0;
 `;
diff --git a/packages/components/src/core/DialogPaper/index.tsx b/packages/components/src/core/Dialog/components/DialogPaper/index.tsx
similarity index 90%
rename from packages/components/src/core/DialogPaper/index.tsx
rename to packages/components/src/core/Dialog/components/DialogPaper/index.tsx
index ed92cf267..6a7e41987 100644
--- a/packages/components/src/core/DialogPaper/index.tsx
+++ b/packages/components/src/core/Dialog/components/DialogPaper/index.tsx
@@ -1,6 +1,6 @@
 import { PaperProps } from "@mui/material";
 import { forwardRef } from "react";
-import { DialogContext } from "../Dialog/components/common";
+import { DialogContext } from "../common";
 import { StyledPaper } from "./style";
 
 export type DialogPaperProps = PaperProps;
diff --git a/packages/components/src/core/DialogPaper/style.ts b/packages/components/src/core/Dialog/components/DialogPaper/style.ts
similarity index 86%
rename from packages/components/src/core/DialogPaper/style.ts
rename to packages/components/src/core/Dialog/components/DialogPaper/style.ts
index a2eb3d310..21413ca57 100644
--- a/packages/components/src/core/DialogPaper/style.ts
+++ b/packages/components/src/core/Dialog/components/DialogPaper/style.ts
@@ -1,7 +1,11 @@
 import { Paper, PaperProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { CommonThemeProps, getCorners, getSpaces } from "src/core/styles";
-import { BoxShadows } from "../styles/common/constants/boxShadows";
+import {
+  CommonThemeProps,
+  getCorners,
+  getShadows,
+  getSpaces,
+} from "src/core/styles";
 
 export interface StyledPaperProps extends CommonThemeProps, PaperProps {
   sdsSize: "xs" | "s" | "m" | "l";
@@ -14,15 +18,15 @@ export const StyledPaper = styled(Paper, {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })<StyledPaperProps>`
   & {
-    box-shadow: ${BoxShadows.L};
-
     ${paperDimensions}
 
     ${(props) => {
       const spaces = getSpaces(props);
       const corners = getCorners(props);
+      const shadows = getShadows(props);
 
       return `
+        box-shadow: ${shadows?.l};
         max-height: calc(100vh - ${2 * (spaces?.xxl || 0)}px);
         border-radius: ${corners?.m || 0}px;
         padding: ${spaces?.xxl || 0}px;
@@ -59,5 +63,6 @@ function paperDimensions(props: StyledPaperProps) {
     width: ${width};
     min-height: ${minHeight};
     max-width: revert;
+    box-sizing: border-box;
   `;
 }
diff --git a/packages/components/src/core/DialogTitle/components/CloseButton/index.tsx b/packages/components/src/core/Dialog/components/DialogTitle/components/CloseButton/index.tsx
similarity index 97%
rename from packages/components/src/core/DialogTitle/components/CloseButton/index.tsx
rename to packages/components/src/core/Dialog/components/DialogTitle/components/CloseButton/index.tsx
index ca4092373..622fa2fd5 100644
--- a/packages/components/src/core/DialogTitle/components/CloseButton/index.tsx
+++ b/packages/components/src/core/Dialog/components/DialogTitle/components/CloseButton/index.tsx
@@ -32,7 +32,7 @@ const CloseButton = forwardRef(function CloseButton<
             sdsType="tertiary"
             sdsSize={size}
             {...props}
-            icon="xMark"
+            icon="XMark"
           />
         );
       }}
diff --git a/packages/components/src/core/DialogTitle/components/CloseButton/style.ts b/packages/components/src/core/Dialog/components/DialogTitle/components/CloseButton/style.ts
similarity index 81%
rename from packages/components/src/core/DialogTitle/components/CloseButton/style.ts
rename to packages/components/src/core/Dialog/components/DialogTitle/components/CloseButton/style.ts
index dc50c4073..f729e6a82 100644
--- a/packages/components/src/core/DialogTitle/components/CloseButton/style.ts
+++ b/packages/components/src/core/Dialog/components/DialogTitle/components/CloseButton/style.ts
@@ -9,8 +9,7 @@ export const StyledButtonIcon = styled(ButtonIcon)`
     const spaces = getSpaces(props);
 
     return `
-      top: ${spaces?.xl || 0}px;
-      right: ${spaces?.xl || 0}px;
+      right: ${spaces?.xxl}px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/DialogTitle/index.tsx b/packages/components/src/core/Dialog/components/DialogTitle/index.tsx
similarity index 73%
rename from packages/components/src/core/DialogTitle/index.tsx
rename to packages/components/src/core/Dialog/components/DialogTitle/index.tsx
index 75a00e57c..741edeefd 100644
--- a/packages/components/src/core/DialogTitle/index.tsx
+++ b/packages/components/src/core/Dialog/components/DialogTitle/index.tsx
@@ -6,15 +6,21 @@ import {
   StyledDialogTitle,
   Subtitle,
   Title,
+  Overline,
 } from "./style";
 
-export { Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle };
+export {
+  Subtitle as DialogTitleSubtitle,
+  Title as DialogTitleTitle,
+  Overline as DialogTitleOverline,
+};
 
 export interface DialogTitleProps
   extends DialogTitleExtraProps,
     RawDialogTitleProps {
   title?: string;
   subtitle?: string;
+  overline?: string;
   onClose?: () => void;
 }
 
@@ -23,13 +29,14 @@ export interface DialogTitleProps
  */
 const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   function DialogTitle(props: DialogTitleProps, ref): JSX.Element {
-    const { children, title, subtitle, onClose, ...rest } = props;
+    const { children, title, subtitle, overline, onClose, ...rest } = props;
 
     return (
       <StyledDialogTitle ref={ref} {...rest}>
         {children || (
           <>
-            {onClose && <CloseButton icon="xMark" onClick={onClose} />}
+            {onClose && <CloseButton icon="XMark" onClick={onClose} />}
+            <Overline>{overline}</Overline>
             <Title>{title}</Title>
             <Subtitle>{subtitle}</Subtitle>
           </>
diff --git a/packages/components/src/core/DialogTitle/style.ts b/packages/components/src/core/Dialog/components/DialogTitle/style.ts
similarity index 75%
rename from packages/components/src/core/DialogTitle/style.ts
rename to packages/components/src/core/Dialog/components/DialogTitle/style.ts
index 1f0302ccc..d21183f0f 100644
--- a/packages/components/src/core/DialogTitle/style.ts
+++ b/packages/components/src/core/Dialog/components/DialogTitle/style.ts
@@ -2,6 +2,7 @@ import { DialogTitle, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps as DialogTitleExtraProps,
+  fontBodyS,
   fontBodyXs,
   fontHeaderXl,
   getPalette,
@@ -44,3 +45,17 @@ export const Subtitle = styled(Typography)`
     `;
   }}
 `;
+
+export const Overline = styled(Typography)`
+  ${fontBodyS}
+
+  ${(props) => {
+    const palette = getPalette(props);
+    const spaces = getSpaces(props);
+
+    return `
+      color: ${palette?.text?.secondary};
+      padding-bottom: ${spaces?.xxxs}px;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Dialog/index.stories.tsx b/packages/components/src/core/Dialog/index.stories.tsx
deleted file mode 100644
index 7d8fa302c..000000000
--- a/packages/components/src/core/Dialog/index.stories.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { Args, Meta } from "@storybook/react";
-import { useState } from "react";
-import Button from "../Button";
-import DialogActions from "../DialogActions";
-import DialogContent from "../DialogContent";
-import DialogTitle from "../DialogTitle";
-import RawDialog from "./index";
-
-const LONG_TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus feugiat turpis vitae odio posuere mattis. Duis tincidunt felis nibh, eget posuere diam sagittis ut. Mauris eleifend neque nec lacinia efficitur. Donec vitae diam ac massa tempus facilisis nec in mauris. Etiam id dignissim odio. Nam risus nibh, tempor ut sem quis, consequat condimentum diam. In risus leo, lacinia eget porttitor eget, viverra vel nulla. Vivamus et nibh sit amet tellus pharetra dictum ut nec ante. Nunc malesuada consequat quam, non fringilla nunc convallis et. Curabitur facilisis tristique est. Curabitur auctor pulvinar diam, ut pretium ante. Etiam a finibus elit. Cras in augue malesuada, cursus turpis posuere, volutpat ex. Sed sagittis suscipit congue. Aliquam et erat nec lacus vulputate mattis. Sed commodo purus ac dignissim sagittis. Donec nisi erat, gravida eget malesuada non, gravida quis nisl. In iaculis ipsum et varius finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar enim a eros condimentum, ac viverra magna volutpat. Proin sed cursus mauris. Curabitur condimentum lobortis placerat. Proin semper mauris id velit elementum, sed pellentesque arcu pulvinar. Curabitur hendrerit enim sit amet ante imperdiet porta. Ut semper neque et faucibus lacinia. Sed auctor ut ex ut ullamcorper. Integer nunc eros, efficitur vitae sapien at, imperdiet dictum magna. Mauris eget bibendum libero, in bibendum sem. Nulla convallis eu eros ac efficitur. Fusce porttitor, ante scelerisque dignissim sollicitudin, tortor lectus volutpat sapien, nec viverra lectus ipsum non libero. Donec aliquet quam sit amet turpis sodales condimentum. Nunc vehicula iaculis nulla. Etiam tempor dui non ullamcorper facilisis. Nam ut fermentum arcu. Etiam porttitor elementum leo a tempus. Sed posuere feugiat est sollicitudin lacinia. Vivamus vel lectus laoreet, rutrum sem sed, blandit libero. Sed pulvinar urna consectetur risus eleifend, in iaculis purus eleifend. Donec quis maximus dui. Suspendisse sit amet ultricies mi. Etiam malesuada odio eget felis posuere pulvinar. Aliquam nec pellentesque risus, in scelerisque sapien. Vivamus vel lobortis mi, id consequat diam. Quisque aliquam dignissim sem.`;
-
-const Dialog = (props: Args): JSX.Element => {
-  const {
-    buttonPosition,
-    longContent = false,
-    isOpen: propsIsOpen = false,
-    titleOnClose,
-    ...rest
-  } = props;
-
-  const [isOpen, setIsOpen] = useState(propsIsOpen);
-
-  return (
-    <>
-      <Button sdsStyle="minimal" sdsType="primary" onClick={handleClick}>
-        Open {rest.sdsSize}
-      </Button>
-      <RawDialog onClose={handleClose} open={isOpen} {...rest}>
-        <DialogTitle
-          title="Title"
-          subtitle="Optional subtitle"
-          onClose={titleOnClose ? handleClose : undefined}
-          data-testid="dialog-title"
-        />
-        <DialogContent data-testid="dialog-content">
-          {longContent ? LONG_TEXT : "Content Module"}
-        </DialogContent>
-        <DialogActions
-          data-testid="dialog-actions"
-          buttonPosition={buttonPosition}
-        >
-          <Buttons />
-        </DialogActions>
-      </RawDialog>
-    </>
-  );
-
-  function Buttons(): JSX.Element {
-    if (buttonPosition === "left") {
-      return (
-        <>
-          <Button sdsStyle="square" sdsType="primary" onClick={handleClose}>
-            Primary Action
-          </Button>
-          <Button sdsStyle="square" sdsType="secondary" onClick={handleClose}>
-            Secondary Action
-          </Button>
-        </>
-      );
-    }
-
-    return (
-      <>
-        <Button sdsStyle="square" sdsType="secondary" onClick={handleClose}>
-          Secondary Action
-        </Button>
-        <Button sdsStyle="square" sdsType="primary" onClick={handleClose}>
-          Primary Action
-        </Button>
-      </>
-    );
-  }
-
-  function handleClick() {
-    setIsOpen(true);
-  }
-
-  function handleClose() {
-    setIsOpen(false);
-  }
-};
-
-export default {
-  argTypes: {
-    buttonPosition: {
-      control: {
-        type: "radio",
-      },
-      options: ["left", "right"],
-    },
-    canClickOutsideClose: {
-      control: {
-        type: "boolean",
-      },
-    },
-    longContent: {
-      control: {
-        type: "boolean",
-      },
-    },
-    sdsSize: {
-      control: {
-        type: "radio",
-      },
-      options: ["xs", "s", "m", "l"],
-    },
-    titleOnClose: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-  component: Dialog,
-  title: "Dialog",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    buttonPosition: "right",
-    longContent: true,
-    sdsSize: "m",
-    titleOnClose: false,
-  },
-};
-
-// LivePreview
-
-function LivePreviewDemo(props: Args): JSX.Element {
-  return (
-    <>
-      <Dialog sdsSize="xs" {...props} />
-      <Dialog sdsSize="s" {...props} />
-      <Dialog sdsSize="m" {...props} />
-      <Dialog sdsSize="l" {...props} />
-    </>
-  );
-}
-
-export const LivePreview = {
-  args: {
-    titleOnClose: false,
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-function TestDemo(props: Args): JSX.Element {
-  const defaultProps = { ...props, isOpen: true, titleOnClose: true };
-
-  return (
-    <>
-      <Dialog sdsSize="xs" {...defaultProps} />
-      <Dialog sdsSize="s" {...defaultProps} />
-      <Dialog sdsSize="m" {...defaultProps} />
-      <Dialog sdsSize="l" {...defaultProps} />
-    </>
-  );
-}
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
-
-// Test No Title On Close
-
-function TestNoTitleOnCloseDemo(props: Args): JSX.Element {
-  return <Dialog sdsSize="xs" {...props} isOpen />;
-}
-
-export const TestNoTitleOnClose = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestNoTitleOnCloseDemo {...args} />,
-};
-
-// Test Button Position Left
-
-function TestButtonPositionLeftDemo(props: Args): JSX.Element {
-  return <Dialog sdsSize="xs" {...props} isOpen buttonPosition="left" />;
-}
-
-export const TestButtonPositionLeft = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestButtonPositionLeftDemo {...args} />,
-};
diff --git a/packages/components/src/core/Dialog/index.tsx b/packages/components/src/core/Dialog/index.tsx
index e1ab5bc53..6a0f930c5 100644
--- a/packages/components/src/core/Dialog/index.tsx
+++ b/packages/components/src/core/Dialog/index.tsx
@@ -3,7 +3,7 @@ import {
   DialogProps as RawDialogProps,
 } from "@mui/material";
 import React, { ComponentType, forwardRef, useMemo } from "react";
-import DialogPaper, { DialogPaperProps } from "../DialogPaper";
+import DialogPaper, { DialogPaperProps } from "./components/DialogPaper";
 import { DialogContext } from "./components/common";
 
 export { DialogContext };
diff --git a/packages/components/src/core/Dropdown/__storybook__/constants.tsx b/packages/components/src/core/Dropdown/__storybook__/constants.tsx
new file mode 100644
index 000000000..67a857c94
--- /dev/null
+++ b/packages/components/src/core/Dropdown/__storybook__/constants.tsx
@@ -0,0 +1,44 @@
+import { AUTOCOMPLETE_MULTI_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { noop } from "src/common/utils";
+
+export const DROPDOWN_EXCLUDED_CONTROLS = [
+  "buttonPosition",
+  "label",
+  "onChange",
+  "DropdownMenuProps",
+  "buttons",
+  "closeOnBlur",
+  "disabled",
+  "multiple",
+  "onClose",
+  "options",
+  "search",
+  "isTriggerChangeOnOptionClick",
+];
+
+export const DROPDOWN_ON_CHANGE_OPTIONS = [
+  noop,
+  (value: never) => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  },
+];
+export const DROPDOWN_ON_CLOSE_OPTIONS = [
+  noop,
+  () => {
+    // eslint-disable-next-line no-console
+    console.log("Closed!");
+  },
+];
+export const DROPDOWN_BUTTON_POSITION_OPTIONS = ["left", "right"];
+export const DROPDOWN_DATA_OPTIONS = [
+  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],
+  ],
+];
+export const DROPDOWN_LABEL = "Click Target";
diff --git a/packages/components/src/core/Dropdown/__storybook__/index.stories.tsx b/packages/components/src/core/Dropdown/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..988f4ce86
--- /dev/null
+++ b/packages/components/src/core/Dropdown/__storybook__/index.stories.tsx
@@ -0,0 +1,196 @@
+import { Args, Meta } from "@storybook/react";
+import LoadingIndicator from "src/core/LoadingIndicator";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Dropdown } from "./stories/default";
+import {
+  DROPDOWN_BUTTON_POSITION_OPTIONS,
+  DROPDOWN_DATA_OPTIONS,
+  DROPDOWN_EXCLUDED_CONTROLS,
+  DROPDOWN_LABEL,
+  DROPDOWN_ON_CHANGE_OPTIONS,
+  DROPDOWN_ON_CLOSE_OPTIONS,
+} from "./constants";
+import { ControlledDropdownDemo } from "./stories/controlledDropdown";
+import { TestDemo } from "./stories/test";
+import { InsideModalDemo } from "./stories/insideModal";
+
+export default {
+  argTypes: {
+    DropdownMenuProps: { control: { type: "object" } },
+    buttonPosition: {
+      control: {
+        labels: ["left", "right"],
+        type: "select",
+      },
+      mapping: DROPDOWN_BUTTON_POSITION_OPTIONS,
+      options: Object.keys(DROPDOWN_BUTTON_POSITION_OPTIONS),
+    },
+    buttons: {
+      control: {
+        type: "boolean",
+      },
+    },
+    closeOnBlur: {
+      control: {
+        type: "boolean",
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+    label: { control: { type: "text" } },
+    multiple: {
+      control: {
+        type: "boolean",
+      },
+    },
+    onChange: {
+      control: {
+        labels: ["NOOP", "Log value on change"],
+        type: "select",
+      },
+      mapping: DROPDOWN_ON_CHANGE_OPTIONS,
+      options: Object.keys(DROPDOWN_ON_CHANGE_OPTIONS),
+    },
+    onClose: {
+      control: {
+        labels: ["NOOP", "console.log('Closed!')"],
+        type: "select",
+      },
+      mapping: DROPDOWN_ON_CLOSE_OPTIONS,
+      options: Object.keys(DROPDOWN_ON_CLOSE_OPTIONS),
+    },
+    options: {
+      control: {
+        labels: ["One Column", "Two Columns", "Three Columns"],
+        type: "select",
+      },
+      mapping: DROPDOWN_DATA_OPTIONS,
+      options: Object.keys(DROPDOWN_DATA_OPTIONS),
+    },
+    search: {
+      control: {
+        type: "boolean",
+      },
+      defaultValue: true,
+    },
+  },
+  component: Dropdown,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Dropdowns/Dropdown",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    buttonPosition: "left",
+    buttons: false,
+    closeOnBlur: true,
+    disabled: false,
+    isTriggerChangeOnOptionClick: false,
+    label: DROPDOWN_LABEL,
+    multiple: true,
+    options: DROPDOWN_DATA_OPTIONS[0],
+    search: true,
+  },
+};
+
+// Multi Column
+
+export const MultiColumnWithButtons = {
+  args: {
+    buttonPosition: "left",
+    buttons: true,
+    closeOnBlur: true,
+    disabled: false,
+    isTriggerChangeOnOptionClick: false,
+    label: DROPDOWN_LABEL,
+    multiple: true,
+    options: DROPDOWN_DATA_OPTIONS[2],
+    search: true,
+  },
+  parameters: {
+    controls: {
+      exclude: DROPDOWN_EXCLUDED_CONTROLS,
+    },
+  },
+  render: (args: Args) => <Dropdown {...args} />,
+};
+
+// Loading Indicator
+
+export const LoadingResultsIndicator = {
+  args: {
+    DropdownMenuProps: {
+      loading: true,
+      loadingText: <LoadingIndicator sdsStyle="minimal" />,
+    },
+    label: DROPDOWN_LABEL,
+    options: [],
+  },
+  parameters: {
+    controls: {
+      exclude: DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+};
+
+// Inside Modal
+
+export const InsideModal = {
+  parameters: {
+    axe: {
+      disabledRules: ["aria-dialog-name"],
+    },
+    controls: {
+      exclude: DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <InsideModalDemo {...args} />,
+};
+
+// Controlled Dropdown
+
+export const ControlledDropdown = {
+  args: {
+    label: DROPDOWN_LABEL,
+  },
+  parameters: {
+    controls: {
+      exclude: DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <ControlledDropdownDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    buttonPosition: "left",
+    label: DROPDOWN_LABEL,
+  },
+  parameters: {
+    controls: {
+      exclude: DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/Dropdown/__storybook__/stories/controlledDropdown.tsx b/packages/components/src/core/Dropdown/__storybook__/stories/controlledDropdown.tsx
new file mode 100644
index 000000000..2ac621cfc
--- /dev/null
+++ b/packages/components/src/core/Dropdown/__storybook__/stories/controlledDropdown.tsx
@@ -0,0 +1,68 @@
+import { AutocompleteValue } from "@mui/base";
+import { styled } from "@mui/material";
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+import Button from "src/core/Button";
+import RawDropdown from "src/core/Dropdown";
+
+export 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 {
+      outline: none;
+    }
+
+    margin: 0 0 24px 8px;
+  `;
+
+  return (
+    <>
+      <StyledButton onClick={handleClick} sdsStyle="minimal" sdsType="primary">
+        Click here to select the first three options
+      </StyledButton>
+      <br />
+      <RawDropdown<T, Multiple, DisableClearable, FreeSolo>
+        label="Click Target"
+        {...props}
+        options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
+        value={value}
+        onChange={handleChange}
+        data-testid="dropdown"
+        DropdownMenuProps={{
+          groupBy: (option: DefaultAutocompleteOption) =>
+            option.section as string,
+          title: "Github Labels",
+          width: 300,
+        }}
+        multiple={true as Multiple}
+      />
+    </>
+  );
+
+  function handleClick() {
+    setValue([
+      ...AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.slice(0, 3),
+    ] as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
+  }
+
+  function handleChange(
+    event: React.SyntheticEvent,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    setValue(newValue);
+  }
+};
diff --git a/packages/components/src/core/Dropdown/__storybook__/stories/default.tsx b/packages/components/src/core/Dropdown/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..9b1239b06
--- /dev/null
+++ b/packages/components/src/core/Dropdown/__storybook__/stories/default.tsx
@@ -0,0 +1,50 @@
+import { AutocompleteValue } from "@mui/material";
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
+import RawDropdown from "src/core/Dropdown";
+
+export 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);
+  }
+};
diff --git a/packages/components/src/core/Dropdown/__storybook__/stories/insideModal.tsx b/packages/components/src/core/Dropdown/__storybook__/stories/insideModal.tsx
new file mode 100644
index 000000000..49a269ef7
--- /dev/null
+++ b/packages/components/src/core/Dropdown/__storybook__/stories/insideModal.tsx
@@ -0,0 +1,30 @@
+import { Args } from "@storybook/react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+import Dialog from "src/core/Dialog";
+import { Dropdown } from "./default";
+import { Paper, styled } from "@mui/material";
+
+const StyledPaper = styled(Paper)`
+  width: 200px;
+  padding: 50px;
+`;
+
+export function InsideModalDemo<
+  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}>
+      <Dropdown<T, Multiple, DisableClearable, FreeSolo>
+        label="Dropdown"
+        options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
+        multiple
+        InputDropdownProps={{ sdsStyle: "square" }}
+        {...props}
+      />
+    </Dialog>
+  );
+}
diff --git a/packages/components/src/core/Dropdown/__storybook__/stories/test.tsx b/packages/components/src/core/Dropdown/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..3f8c706ae
--- /dev/null
+++ b/packages/components/src/core/Dropdown/__storybook__/stories/test.tsx
@@ -0,0 +1,26 @@
+import { Args } from "@storybook/react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { noop } from "src/common/utils";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+import RawDropdown from "src/core/Dropdown";
+
+export const TestDemo = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+>(
+  props: Args
+): JSX.Element => {
+  return (
+    <RawDropdown<T, Multiple, DisableClearable, FreeSolo>
+      label="Click Target"
+      onChange={noop}
+      options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
+      DropdownMenuProps={{
+        width: 300,
+      }}
+      {...props}
+    />
+  );
+};
diff --git a/packages/components/src/core/Dropdown/Dropdown.namespace-test.tsx b/packages/components/src/core/Dropdown/__tests__/Dropdown.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Dropdown/Dropdown.namespace-test.tsx
rename to packages/components/src/core/Dropdown/__tests__/Dropdown.namespace-test.tsx
diff --git a/packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
similarity index 85%
rename from packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
index f478aeb62..cc3cf26a5 100644
--- a/packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 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-17rutjt-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1yq35rh-MuiButtonBase-root-MuiButton-root"
   data-testid="dropdown"
   label="Click Target"
   tabindex="0"
@@ -12,7 +12,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
     class="css-ae1gg6"
   >
     <span
-      class="styled-label css-mxudk4"
+      class="styled-label css-1ubkbz8"
     >
       Click Target
     </span>
@@ -29,7 +29,9 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
           focusable="false"
-          viewBox="0 0 14 14"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         />
       </div>
     </span>
@@ -45,7 +47,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
 
 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-17rutjt-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1yq35rh-MuiButtonBase-root-MuiButton-root"
   data-testid="dropdown"
   label="Click Target"
   tabindex="0"
@@ -55,7 +57,7 @@ exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
     class="css-ae1gg6"
   >
     <span
-      class="styled-label css-mxudk4"
+      class="styled-label css-1ubkbz8"
     >
       Click Target
     </span>
@@ -72,7 +74,9 @@ exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
           focusable="false"
-          viewBox="0 0 14 14"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         />
       </div>
     </span>
diff --git a/packages/components/src/core/Dropdown/index.test.tsx b/packages/components/src/core/Dropdown/__tests__/index.test.tsx
similarity index 97%
rename from packages/components/src/core/Dropdown/index.test.tsx
rename to packages/components/src/core/Dropdown/__tests__/index.test.tsx
index c02bc2737..da9dcd09b 100644
--- a/packages/components/src/core/Dropdown/index.test.tsx
+++ b/packages/components/src/core/Dropdown/__tests__/index.test.tsx
@@ -1,9 +1,9 @@
 import { generateSnapshots, wait } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import LoadingIndicator from "../LoadingIndicator";
-import * as stories from "./index.stories";
+import { userEvent } from "@testing-library/user-event";
+import LoadingIndicator from "../../LoadingIndicator";
+import * as stories from "../__storybook__/index.stories";
 
 const { Test } = composeStories(stories);
 
diff --git a/packages/components/src/core/Dropdown/index.stories.tsx b/packages/components/src/core/Dropdown/index.stories.tsx
deleted file mode 100644
index b1a6c513d..000000000
--- a/packages/components/src/core/Dropdown/index.stories.tsx
+++ /dev/null
@@ -1,404 +0,0 @@
-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 LoadingIndicator from "../LoadingIndicator";
-import RawDropdown from "./index";
-
-const onChangeOptions = [
-  noop,
-  (value: never) => {
-    // eslint-disable-next-line no-console
-    console.log(value);
-  },
-];
-const onCloseOptions = [
-  noop,
-  () => {
-    // eslint-disable-next-line no-console
-    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" } },
-    buttonPosition: {
-      control: {
-        labels: ["left", "right"],
-        type: "select",
-      },
-      mapping: buttonPositionOptions,
-      options: Object.keys(buttonPositionOptions),
-    },
-    buttons: {
-      control: {
-        type: "boolean",
-      },
-    },
-    closeOnBlur: {
-      control: {
-        type: "boolean",
-      },
-    },
-    disabled: {
-      control: {
-        type: "boolean",
-      },
-    },
-    label: { control: { type: "text" } },
-    multiple: {
-      control: {
-        type: "boolean",
-      },
-    },
-    onChange: {
-      control: {
-        labels: ["NOOP", "Log value on change"],
-        type: "select",
-      },
-      mapping: onChangeOptions,
-      options: Object.keys(onChangeOptions),
-    },
-    onClose: {
-      control: {
-        labels: ["NOOP", "console.log('Closed!')"],
-        type: "select",
-      },
-      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",
-      },
-      defaultValue: true,
-    },
-  },
-  component: Dropdown,
-  title: "Dropdowns/Dropdown",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    buttonPosition: "left",
-    buttons: false,
-    closeOnBlur: true,
-    disabled: false,
-    isTriggerChangeOnOptionClick: false,
-    label: LABEL,
-    multiple: true,
-    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: {
-      loading: true,
-      loadingText: <LoadingIndicator sdsStyle="minimal" />,
-    },
-    label: LABEL,
-    options: [],
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        "buttonPosition",
-        "label",
-        "onChange",
-        "DropdownMenuProps",
-        "buttons",
-        "closeOnBlur",
-        "disabled",
-        "multiple",
-        "onClose",
-        "options",
-        "search",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-};
-
-// Inside Modal
-
-const StyledPaper = styled(Paper)`
-  width: 200px;
-  padding: 50px;
-`;
-
-export const InsideModal = {
-  parameters: {
-    axe: {
-      disabledRules: ["aria-dialog-name"],
-    },
-    controls: {
-      exclude: [
-        "buttonPosition",
-        "label",
-        "onChange",
-        "DropdownMenuProps",
-        "buttons",
-        "closeOnBlur",
-        "disabled",
-        "multiple",
-        "onClose",
-        "options",
-        "search",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  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}>
-        <Dropdown<T, Multiple, DisableClearable, FreeSolo>
-          label="Dropdown"
-          options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
-          multiple
-          InputDropdownProps={{ sdsStyle: "square" }}
-          {...props}
-        />
-      </Dialog>
-    );
-  },
-};
-
-// Controlled Dropdown
-
-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 {
-      outline: none;
-    }
-
-    margin: 0 0 24px 8px;
-  `;
-
-  return (
-    <>
-      <StyledButton onClick={handleClick} sdsStyle="minimal" sdsType="primary">
-        Click here to select the first three options
-      </StyledButton>
-      <br />
-      <RawDropdown<T, Multiple, DisableClearable, FreeSolo>
-        label="Click Target"
-        {...props}
-        options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
-        value={value}
-        onChange={handleChange}
-        data-testid="dropdown"
-        DropdownMenuProps={{
-          groupBy: (option: DefaultAutocompleteOption) =>
-            option.section as string,
-          title: "Github Labels",
-          width: 300,
-        }}
-        multiple={true as Multiple}
-      />
-    </>
-  );
-
-  function handleClick() {
-    setValue([
-      ...AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.slice(0, 3),
-    ] as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
-  }
-
-  function handleChange(
-    event: React.SyntheticEvent,
-    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  ) {
-    setValue(newValue);
-  }
-};
-
-export const ControlledDropdown = {
-  args: {
-    label: LABEL,
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        "buttonPosition",
-        "label",
-        "onChange",
-        "DropdownMenuProps",
-        "buttons",
-        "closeOnBlur",
-        "disabled",
-        "multiple",
-        "onClose",
-        "options",
-        "search",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <ControlledDropdownDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = <
-  T extends DefaultAutocompleteOption,
-  Multiple extends boolean | undefined,
-  DisableClearable extends boolean | undefined,
-  FreeSolo extends boolean | undefined,
->(
-  props: Args
-): JSX.Element => {
-  return (
-    <RawDropdown<T, Multiple, DisableClearable, FreeSolo>
-      label="Click Target"
-      onChange={noop}
-      options={AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS as T[]}
-      DropdownMenuProps={{
-        width: 300,
-      }}
-      {...props}
-    />
-  );
-};
-
-export const Test = {
-  args: {
-    buttonPosition: "left",
-    label: LABEL,
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        "buttonPosition",
-        "label",
-        "onChange",
-        "DropdownMenuProps",
-        "buttons",
-        "closeOnBlur",
-        "disabled",
-        "multiple",
-        "onClose",
-        "options",
-        "search",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/Dropdown/index.tsx b/packages/components/src/core/Dropdown/index.tsx
index d414a443d..99a19d0db 100644
--- a/packages/components/src/core/Dropdown/index.tsx
+++ b/packages/components/src/core/Dropdown/index.tsx
@@ -11,14 +11,14 @@ import {
   AutocompleteMultiColumnOption,
   AutocompleteSingleColumnOption,
   DefaultAutocompleteOption,
-} from "../Autocomplete";
+} from "src/core/Autocomplete";
 import DropdownMenu, {
   DropdownMenuProps as SdsDropdownMenuProps,
-} from "../DropdownMenu";
-import { StyledPaper, StyledPopper } from "../DropdownMenu/style";
+} from "src/core/DropdownMenu";
+import { StyledPaper, StyledPopper } from "src/core/DropdownMenu/style";
 import InputDropdown, {
   InputDropdownProps as InputDropdownPropsType,
-} from "../InputDropdown";
+} from "src/core/InputDropdown";
 import { StyledButton, StyledButtonsWrapper } from "./style";
 
 export {
diff --git a/packages/components/src/core/Dropdown/style.ts b/packages/components/src/core/Dropdown/style.ts
index e4b6cb7ba..de9428a4c 100644
--- a/packages/components/src/core/Dropdown/style.ts
+++ b/packages/components/src/core/Dropdown/style.ts
@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
-import Button from "../Button";
-import { CommonThemeProps, getSpaces } from "../styles";
+import Button from "src/core/Button";
+import { CommonThemeProps, getSpaces } from "src/core/styles";
 
 interface StyleProps extends CommonThemeProps {
   buttonPosition: "left" | "right";
@@ -25,11 +25,11 @@ export const StyledButton = styled(Button, {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
   ${(props) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
-      margin-top: ${spacings?.l}px;
-      margin-right: ${spacings?.m}px;
+      margin-top: ${spaces?.l}px;
+      margin-right: ${spaces?.m}px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/DropdownMenu/__storybook__/constants.tsx b/packages/components/src/core/DropdownMenu/__storybook__/constants.tsx
new file mode 100644
index 000000000..7cf1f4d45
--- /dev/null
+++ b/packages/components/src/core/DropdownMenu/__storybook__/constants.tsx
@@ -0,0 +1,72 @@
+import { AUTOCOMPLETE_MULTI_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+
+export const DROPDOWN_MENU_EXCLUDED_CONTROLS = [
+  "keepSearchOnSelect",
+  "ClickAwayListenerProps",
+  "search",
+  "multiple",
+  "label",
+  "groupBy",
+  "open",
+  "options",
+  "title",
+  "width",
+];
+
+export const DROPDOWN_MENU_LABEL = "Github Labels";
+
+export const DROPDOWN_MENU_POPPER_POSITION = "bottom-start";
+
+export const DROPDOWN_MENU_POPPER_WIDTH = 160;
+
+export const DROPDOWN_MENU_GROUP_BY_OPTIONS = [
+  undefined,
+  (option: DefaultAutocompleteOption) => option.section as string,
+];
+
+export const DROPDOWN_MENU_DATA_OPTIONS = [
+  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],
+  ],
+];
+
+export const DROPDOWN_MENU_LIVE_PREVIEW_ROW_STYLES = {
+  display: "grid",
+  gridColumnGap: 24,
+  gridRowGap: 8,
+  gridTemplateColumns: "repeat(4, 160px)",
+  gridTemplateRows: "repeat(2, auto)",
+};
+
+export const DROPDOWN_MENU_LIVE_PREVIEW_LABELS = [
+  {
+    name: "Menu Item 1",
+    section: "Section 1",
+  },
+  {
+    name: "Menu Item 2",
+    section: "Section 1",
+  },
+  {
+    name: "Menu Item 3",
+    section: "Section 1",
+  },
+  {
+    name: "Menu Item 4",
+    section: "Section 2",
+  },
+  {
+    name: "Menu Item 5",
+    section: "Section 2",
+  },
+  {
+    name: "Menu Item 6",
+    section: "Section 2",
+  },
+];
diff --git a/packages/components/src/core/DropdownMenu/__storybook__/index.stories.tsx b/packages/components/src/core/DropdownMenu/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..f908e8148
--- /dev/null
+++ b/packages/components/src/core/DropdownMenu/__storybook__/index.stories.tsx
@@ -0,0 +1,172 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import {
+  DROPDOWN_MENU_DATA_OPTIONS,
+  DROPDOWN_MENU_EXCLUDED_CONTROLS,
+  DROPDOWN_MENU_GROUP_BY_OPTIONS,
+  DROPDOWN_MENU_LABEL,
+} from "./constants";
+import { DropdownMenu } from "./stories/default";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { ScreenshotTestDemo } from "./stories/screenshot";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    ClickAwayListenerProps: {
+      control: { type: "object" },
+    },
+    groupBy: {
+      control: {
+        labels: ["No group by", "Group by section names"],
+        type: "select",
+      },
+      mapping: DROPDOWN_MENU_GROUP_BY_OPTIONS,
+      options: Object.keys(DROPDOWN_MENU_GROUP_BY_OPTIONS),
+    },
+    keepSearchOnSelect: {
+      control: { type: "boolean" },
+    },
+    label: {
+      control: { type: "text" },
+      require: true,
+    },
+    multiple: {
+      control: { type: "boolean" },
+    },
+    open: {
+      control: {
+        type: "boolean",
+      },
+    },
+    options: {
+      control: {
+        labels: ["One Column", "Two Columns", "Three Columns"],
+        type: "select",
+      },
+      mapping: DROPDOWN_MENU_DATA_OPTIONS,
+      options: Object.keys(DROPDOWN_MENU_DATA_OPTIONS),
+    },
+    search: {
+      control: { type: "boolean" },
+    },
+    title: {
+      control: { type: "text" },
+    },
+    width: {
+      control: { type: "number" },
+    },
+  },
+  component: DropdownMenu,
+  // (masoudmanson) For the purpose of storybook, the button is removed
+  // from the dropdown menu 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
+  // accessibility rules have been temporarily disabled in the tests
+  parameters: {
+    axe: {
+      disabledRules: [
+        "aria-input-field-name",
+        "aria-required-children",
+        "aria-required-parent",
+        "button-name",
+        "list",
+        "listitem",
+      ],
+    },
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Dropdowns/DropdownMenu",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    groupBy: DROPDOWN_MENU_GROUP_BY_OPTIONS[1],
+    keepSearchOnSelect: true,
+    multiple: true,
+    open: true,
+    options: DROPDOWN_MENU_DATA_OPTIONS[0],
+    search: true,
+    title: DROPDOWN_MENU_LABEL,
+    width: 300,
+  },
+};
+
+// Multi Column
+
+export const MultiColumn = {
+  args: {
+    groupBy: DROPDOWN_MENU_GROUP_BY_OPTIONS[1],
+    keepSearchOnSelect: true,
+    multiple: true,
+    open: true,
+    options: DROPDOWN_MENU_DATA_OPTIONS[2],
+    search: true,
+    title: DROPDOWN_MENU_LABEL,
+  },
+  parameters: {
+    controls: {
+      exclude: DROPDOWN_MENU_EXCLUDED_CONTROLS,
+    },
+  },
+  render: (args: Args) => <DropdownMenu {...args} />,
+};
+
+// Live Preview
+
+export const LivePreview = {
+  args: {
+    keepSearchOnSelect: true,
+    multiple: false,
+    search: false,
+  },
+  parameters: {
+    controls: {
+      exclude: DROPDOWN_MENU_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Screenshot test
+
+export const ScreenshotTest = {
+  parameters: {
+    axe: {
+      timeout: 10 * 1000,
+    },
+    controls: {
+      exclude: DROPDOWN_MENU_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <ScreenshotTestDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    keepSearchOnSelect: false,
+    multiple: true,
+    search: true,
+    title: DROPDOWN_MENU_LABEL,
+  },
+  parameters: {
+    controls: {
+      exclude: DROPDOWN_MENU_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo data-testid="dropdown-menu" {...args} />,
+};
diff --git a/packages/components/src/core/DropdownMenu/__storybook__/stories/default.tsx b/packages/components/src/core/DropdownMenu/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..2fe4a06f7
--- /dev/null
+++ b/packages/components/src/core/DropdownMenu/__storybook__/stories/default.tsx
@@ -0,0 +1,55 @@
+import { Args } from "@storybook/react";
+import React, { useEffect, useRef } from "react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
+import RawDropdownMenu from "src/core/DropdownMenu";
+import { DROPDOWN_MENU_POPPER_POSITION } from "../constants";
+
+export 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 = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
+    search,
+    title,
+  } = props;
+  const anchorRef = useRef(null);
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setAnchorEl(anchorRef.current);
+    }, 1);
+  }, [anchorRef]);
+
+  return (
+    <div style={{ margin: "16px 0 0 24px" }} ref={anchorRef}>
+      {anchorEl ? (
+        <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+          label={label}
+          anchorEl={anchorEl}
+          disableCloseOnSelect={false}
+          multiple={multiple}
+          options={options}
+          PopperBaseProps={{
+            disablePortal: false,
+            placement: DROPDOWN_MENU_POPPER_POSITION,
+          }}
+          search={search}
+          title={title}
+          getOptionDisabled={(option: T) => {
+            return option.name === "Type: feature request";
+          }}
+          {...props}
+        />
+      ) : null}
+    </div>
+  );
+};
diff --git a/packages/components/src/core/DropdownMenu/__storybook__/stories/livePreview.tsx b/packages/components/src/core/DropdownMenu/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..aed82bb5a
--- /dev/null
+++ b/packages/components/src/core/DropdownMenu/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,302 @@
+import { AutocompleteValue } from "@mui/base";
+import { useState } from "react";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
+import { StyledInputDropdownLive1, StyledInputDropdownLive3 } from "../style";
+import {
+  DROPDOWN_MENU_LIVE_PREVIEW_LABELS,
+  DROPDOWN_MENU_LIVE_PREVIEW_ROW_STYLES,
+  DROPDOWN_MENU_POPPER_POSITION,
+  DROPDOWN_MENU_POPPER_WIDTH,
+} from "../constants";
+import RawDropdownMenu from "src/core/DropdownMenu";
+import ButtonIcon from "src/core/ButtonIcon";
+
+export const LivePreviewDemo = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+>(): JSX.Element => {
+  const options = DROPDOWN_MENU_LIVE_PREVIEW_LABELS;
+
+  const [anchorEl1, setAnchorEl1] = useState<HTMLElement | null>(null);
+  const [anchorEl2, setAnchorEl2] = useState<HTMLElement | null>(null);
+  const [anchorEl3, setAnchorEl3] = useState<HTMLElement | null>(null);
+  const [anchorEl4, setAnchorEl4] = useState<HTMLElement | null>(null);
+
+  const [open1, setOpen1] = useState(false);
+  const [open2, setOpen2] = useState(false);
+  const [open3, setOpen3] = useState(false);
+  const [open4, setOpen4] = useState(false);
+
+  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<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(true));
+  const [pendingValue4, setPendingValue4] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(true));
+
+  return (
+    <div style={DROPDOWN_MENU_LIVE_PREVIEW_ROW_STYLES as React.CSSProperties}>
+      <div style={{ alignSelf: "end" }}>
+        <StyledInputDropdownLive1
+          aria-describedby="live1"
+          onClick={handleClick1}
+          label="Click Target"
+          sdsStage={open1 ? "userInput" : "default"}
+          sdsType="label"
+          multiple={false}
+          sdsStyle="minimal"
+        />
+
+        {anchorEl1 ? (
+          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+            label="Search"
+            anchorEl={anchorEl1}
+            open={!!open1}
+            onChange={handleChange1}
+            disableCloseOnSelect={false}
+            options={options.slice(0, 3) as T[]}
+            PopperBaseProps={{
+              placement: DROPDOWN_MENU_POPPER_POSITION,
+            }}
+            search={false}
+            multiple={false as Multiple}
+            value={value1}
+            onClickAway={handleClickAway1}
+            width={DROPDOWN_MENU_POPPER_WIDTH}
+          />
+        ) : null}
+      </div>
+
+      <div>
+        <ButtonIcon
+          aria-describedby="live2"
+          aria-label="Open menu"
+          onClick={handleClick2}
+          on={false}
+          sdsSize="large"
+          sdsType="secondary"
+          icon="InfoSpeechBubble"
+        />
+
+        {anchorEl2 ? (
+          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+            label="Search"
+            anchorEl={anchorEl2}
+            open={!!open2}
+            search={false}
+            multiple={false as Multiple}
+            onChange={handleChange2}
+            disableCloseOnSelect={false}
+            options={options.slice(0, 3) as T[]}
+            PopperBaseProps={{
+              placement: DROPDOWN_MENU_POPPER_POSITION,
+            }}
+            value={value2}
+            title="Title Lorem Ipsum"
+            onClickAway={handleClickAway2}
+            width={DROPDOWN_MENU_POPPER_WIDTH}
+          />
+        ) : null}
+      </div>
+
+      <div>
+        <StyledInputDropdownLive3
+          aria-describedby="live3"
+          onClick={handleClick3}
+          label="Click Target"
+          sdsStage={open3 ? "userInput" : "default"}
+          sdsType="label"
+          multiple
+          sdsStyle="rounded"
+        />
+
+        {anchorEl3 ? (
+          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+            label="Search"
+            anchorEl={anchorEl3}
+            open={!!open3}
+            search
+            multiple={true as Multiple}
+            onChange={handleChange3}
+            disableCloseOnSelect
+            options={options as T[]}
+            PopperBaseProps={{
+              placement: DROPDOWN_MENU_POPPER_POSITION,
+            }}
+            value={pendingValue3}
+            onClickAway={handleClickAway3}
+            width={DROPDOWN_MENU_POPPER_WIDTH}
+          />
+        ) : null}
+      </div>
+
+      <div>
+        <StyledInputDropdownLive3
+          aria-describedby="live4"
+          onClick={handleClick4}
+          label="Click Target"
+          sdsStage={open4 ? "userInput" : "default"}
+          sdsType="label"
+          multiple
+          sdsStyle="square"
+        />
+
+        {anchorEl4 ? (
+          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+            label="Search"
+            anchorEl={anchorEl4}
+            open={!!open4}
+            search={false}
+            multiple={true as Multiple}
+            groupBy={(option) => option.section as string}
+            onChange={handleChange4}
+            disableCloseOnSelect
+            options={options as T[]}
+            PopperBaseProps={{
+              placement: DROPDOWN_MENU_POPPER_POSITION,
+            }}
+            value={pendingValue4}
+            onClickAway={handleClickAway4}
+            width={DROPDOWN_MENU_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() {
+    setOpen1(false);
+  }
+
+  function handleClick1(event: React.MouseEvent<HTMLElement>) {
+    if (open1) {
+      setOpen1(false);
+
+      if (anchorEl1) {
+        anchorEl1.focus();
+      }
+
+      setAnchorEl1(null);
+    } else {
+      setAnchorEl1(event.currentTarget);
+      setOpen1(true);
+    }
+  }
+
+  function handleChange1(
+    _: React.SyntheticEvent<Element, Event>,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    setOpen1(false);
+    setValue1(
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    );
+  }
+
+  function handleClickAway2() {
+    setOpen2(false);
+  }
+
+  function handleClick2(event: React.MouseEvent<HTMLElement>) {
+    if (open2) {
+      setOpen2(false);
+
+      if (anchorEl2) {
+        anchorEl2.focus();
+      }
+
+      setAnchorEl2(null);
+    } else {
+      setAnchorEl2(event.currentTarget);
+      setOpen2(true);
+    }
+  }
+
+  function handleChange2(
+    _: React.SyntheticEvent<Element, Event>,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    setOpen2(false);
+    setValue2(
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    );
+  }
+
+  function handleClickAway3() {
+    setOpen3(false);
+  }
+
+  function handleClick3(event: React.MouseEvent<HTMLElement>) {
+    if (open3) {
+      setOpen3(false);
+
+      if (anchorEl3) {
+        anchorEl3.focus();
+      }
+
+      setAnchorEl3(null);
+    } else {
+      setAnchorEl3(event.currentTarget);
+      setOpen3(true);
+    }
+  }
+
+  function handleChange3(
+    _: React.SyntheticEvent<Element, Event>,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    return setPendingValue3(
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    );
+  }
+
+  function handleClickAway4() {
+    setOpen4(false);
+  }
+
+  function handleClick4(event: React.MouseEvent<HTMLElement>) {
+    if (open4) {
+      setOpen4(false);
+
+      if (anchorEl4) {
+        anchorEl4.focus();
+      }
+
+      setAnchorEl4(null);
+    } else {
+      setAnchorEl4(event.currentTarget);
+      setOpen4(true);
+    }
+  }
+
+  function handleChange4(
+    _: React.SyntheticEvent<Element, Event>,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    return setPendingValue4(
+      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+    );
+  }
+};
diff --git a/packages/components/src/core/DropdownMenu/__storybook__/stories/screenshot.tsx b/packages/components/src/core/DropdownMenu/__storybook__/stories/screenshot.tsx
new file mode 100644
index 000000000..7a5d33070
--- /dev/null
+++ b/packages/components/src/core/DropdownMenu/__storybook__/stories/screenshot.tsx
@@ -0,0 +1,153 @@
+import { Args } from "@storybook/react";
+import Tag from "src/core/Tag";
+import { DROPDOWN_MENU_LIVE_PREVIEW_LABELS } from "../constants";
+import { DropdownMenu } from "./default";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+
+export const ScreenshotTestDemo = (props: Args): JSX.Element => {
+  const TITLE_OPTIONS = [undefined, "Sample title text"];
+  const SEARCH_OPTIONS = [false, true];
+  const GROUP_BY_OPTIONS = [false, true];
+  const SCREENSHOT_TEST_TAG_COMPONENT = {
+    component: (
+      <div>
+        Available Labels:
+        <div style={{ marginTop: 10 }}>
+          <Tag
+            label="bug"
+            sdsStyle="rounded"
+            sdsType="secondary"
+            color="negative"
+          />
+          <Tag
+            label="feature"
+            sdsStyle="rounded"
+            sdsType="secondary"
+            color="notice"
+          />
+          <Tag
+            label="refactor"
+            sdsStyle="rounded"
+            sdsType="secondary"
+            color="neutral"
+          />
+        </div>
+      </div>
+    ),
+    name: "custom 2",
+    section: "custom component",
+  };
+  const SCREENSHOT_TEST_OPTIONS = DROPDOWN_MENU_LIVE_PREVIEW_LABELS.concat(
+    SCREENSHOT_TEST_TAG_COMPONENT
+  );
+
+  const DISPLAY_CONTENTS: React.CSSProperties = {
+    display: "contents",
+  };
+  const MID_LABEL: React.CSSProperties = {
+    borderStyle: "solid none none none",
+    gridColumn: "1 / 3",
+    justifySelf: "stretch",
+    paddingTop: 10,
+  };
+
+  // loop through all TITLE_OPTIONS
+  return (
+    <>
+      {TITLE_OPTIONS.map((title, index) => {
+        return <DropdownMenuTitle title={title} key={String(title) + index} />;
+      })}
+    </>
+  );
+
+  // loop through all SEARCH_OPTIONS + create headers for TITLE_OPTIONS
+  function DropdownMenuTitle({
+    title,
+  }: {
+    title: (typeof TITLE_OPTIONS)[number];
+  }) {
+    const LEVEL_STYLE: React.CSSProperties = {
+      columnGap: "25px",
+      display: "inline-grid",
+      fontFamily: "sans-serif",
+      marginLeft: "50px",
+    };
+    const LABEL_STYLE: React.CSSProperties = {
+      fontSize: "2em",
+      gridColumn: "1 / 3",
+      marginBottom: 10,
+    };
+    return (
+      <div style={LEVEL_STYLE}>
+        <p style={LABEL_STYLE}>
+          Title: <b>{title ? "yes" : "no"}</b>
+        </p>
+        {SEARCH_OPTIONS.map((search) => {
+          return (
+            <DropdownMenuSearch
+              title={title}
+              search={search}
+              key={String(search)}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  function DropdownMenuSearch({
+    title,
+    search,
+  }: {
+    title: (typeof TITLE_OPTIONS)[number];
+    search: (typeof SEARCH_OPTIONS)[number];
+  }) {
+    const SEARCH_LABEL: React.CSSProperties = {
+      ...MID_LABEL,
+      borderWidth: "2px",
+      fontSize: "1.17em",
+      margin: 0,
+    };
+    const LEVEL_STYLE: React.CSSProperties = {
+      margin: "0 300px 475px 0",
+    };
+    const GROUP_BY_LABEL: React.CSSProperties = {
+      fontSize: "0.67em",
+      margin: "10px 0 475px",
+    };
+    return (
+      <div style={DISPLAY_CONTENTS}>
+        <p style={SEARCH_LABEL}>
+          Search: <b>{search ? "yes" : "no"}</b>
+        </p>
+        {GROUP_BY_OPTIONS.map((groupBy, index) => {
+          const groupByFinal = groupBy
+            ? (option: (typeof SCREENSHOT_TEST_OPTIONS)[number]) =>
+                option.section as string
+            : undefined;
+          return (
+            <div style={LEVEL_STYLE} key={`level-${index})}`}>
+              <>
+                <p style={GROUP_BY_LABEL}>
+                  Grouped: <b>{groupBy ? "yes" : "no"}</b>
+                </p>
+                <DropdownMenu
+                  {...props}
+                  groupBy={groupByFinal}
+                  options={
+                    SCREENSHOT_TEST_OPTIONS as DefaultAutocompleteOption[]
+                  }
+                  title={title}
+                  search={search}
+                  key={String(groupBy)}
+                  open
+                  width={250}
+                />
+              </>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+};
diff --git a/packages/components/src/core/DropdownMenu/__storybook__/stories/test.tsx b/packages/components/src/core/DropdownMenu/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..833048ab8
--- /dev/null
+++ b/packages/components/src/core/DropdownMenu/__storybook__/stories/test.tsx
@@ -0,0 +1,91 @@
+import { AutocompleteValue } from "@mui/base";
+import { Args } from "@storybook/react";
+import { useEffect, useRef, useState } from "react";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+import RawDropdownMenu from "src/core/DropdownMenu";
+
+export 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<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(false));
+
+  const [pendingValue, setPendingValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(getInitialValue(true));
+
+  useEffect(() => {
+    setAnchorEl(anchorRef.current);
+  }, []);
+
+  return (
+    <div style={{ margin: "16px 0 0 24px" }} ref={anchorRef}>
+      {anchorEl ? (
+        <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
+          label="Search"
+          anchorEl={anchorEl}
+          open
+          search={search}
+          multiple={multiple}
+          value={multiple ? pendingValue : value}
+          onChange={handleChange}
+          disableCloseOnSelect={multiple}
+          options={options}
+          onClickAway={handleClickAway}
+          groupBy={(option: T) => option.section as string}
+          width={300}
+          {...props}
+        />
+      ) : null}
+    </div>
+  );
+
+  function handleClickAway() {
+    return multiple && setValue(pendingValue);
+  }
+
+  function handleChange(
+    _: React.ChangeEvent<unknown>,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    if (!multiple) {
+      setValue(
+        newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+      );
+    }
+
+    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>);
+  }
+};
diff --git a/packages/components/src/core/DropdownMenu/__storybook__/style.ts b/packages/components/src/core/DropdownMenu/__storybook__/style.ts
new file mode 100644
index 000000000..3756389b2
--- /dev/null
+++ b/packages/components/src/core/DropdownMenu/__storybook__/style.ts
@@ -0,0 +1,26 @@
+import { styled } from "@mui/material";
+import InputDropdown from "src/core/InputDropdown";
+
+export const StyledInputDropdownLive1 = styled(InputDropdown)`
+  position: relative !important;
+  min-width: unset;
+  &.MuiButtonBase-root {
+    margin: 0 !important;
+
+    & > span {
+      font-size: 13px;
+    }
+  }
+`;
+
+export const StyledInputDropdownLive3 = styled(InputDropdown)`
+  position: relative !important;
+  min-width: 160px;
+  &.MuiButtonBase-root {
+    margin: 0 !important;
+
+    & > span {
+      font-size: 13px;
+    }
+  }
+`;
diff --git a/packages/components/src/core/DropdownMenu/DropdownMenu.namespace-test.tsx b/packages/components/src/core/DropdownMenu/__tests__/DropdownMenu.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/DropdownMenu/DropdownMenu.namespace-test.tsx
rename to packages/components/src/core/DropdownMenu/__tests__/DropdownMenu.namespace-test.tsx
diff --git a/packages/components/src/core/DropdownMenu/__snapshots__/index.test.tsx.snap b/packages/components/src/core/DropdownMenu/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from packages/components/src/core/DropdownMenu/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/DropdownMenu/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/packages/components/src/core/DropdownMenu/index.test.tsx b/packages/components/src/core/DropdownMenu/__tests__/index.test.tsx
similarity index 89%
rename from packages/components/src/core/DropdownMenu/index.test.tsx
rename to packages/components/src/core/DropdownMenu/__tests__/index.test.tsx
index a24550185..91ccd36be 100644
--- a/packages/components/src/core/DropdownMenu/index.test.tsx
+++ b/packages/components/src/core/DropdownMenu/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 const { Test } = composeStories(stories);
 
diff --git a/packages/components/src/core/DropdownMenu/index.stories.tsx b/packages/components/src/core/DropdownMenu/index.stories.tsx
deleted file mode 100644
index 2e52d5fcb..000000000
--- a/packages/components/src/core/DropdownMenu/index.stories.tsx
+++ /dev/null
@@ -1,846 +0,0 @@
-import { AutocompleteValue, styled } from "@mui/material";
-import { Args, Meta } from "@storybook/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 InputDropdown from "../InputDropdown";
-import Tag from "../Tag";
-import RawDropdownMenu from "./index";
-
-const LABEL = "Github Labels";
-const POPPER_POSITION = "bottom-start";
-const POPPER_WIDTH = 160;
-const groupByOptions = [
-  undefined,
-  (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 = <
-  T extends DefaultAutocompleteOption,
-  Multiple extends boolean | undefined,
-  DisableClearable extends boolean | undefined,
-  FreeSolo extends boolean | undefined,
->(
-  props: Args
-): JSX.Element => {
-  const {
-    label,
-    multiple,
-    options = AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS,
-    search,
-    title,
-  } = props;
-  const anchorRef = useRef(null);
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setAnchorEl(anchorRef.current);
-    }, 1);
-  }, [anchorRef]);
-
-  return (
-    <div style={{ margin: "16px 0 0 24px" }} ref={anchorRef}>
-      {anchorEl ? (
-        <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
-          label={label}
-          anchorEl={anchorEl}
-          disableCloseOnSelect={false}
-          multiple={multiple}
-          options={options}
-          PopperBaseProps={{
-            disablePortal: false,
-            placement: POPPER_POSITION,
-          }}
-          search={search}
-          title={title}
-          getOptionDisabled={(option: T) => {
-            return option.name === "Type: feature request";
-          }}
-          {...props}
-        />
-      ) : null}
-    </div>
-  );
-};
-
-export default {
-  argTypes: {
-    ClickAwayListenerProps: {
-      control: { type: "object" },
-    },
-    groupBy: {
-      control: {
-        labels: ["No group by", "Group by section names"],
-        type: "select",
-      },
-      mapping: groupByOptions,
-      options: Object.keys(groupByOptions),
-    },
-    keepSearchOnSelect: {
-      control: { type: "boolean" },
-    },
-    label: {
-      control: { type: "text" },
-      require: true,
-    },
-    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
-  // from the dropdown menu 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
-  // accessibility rules have been temporarily disabled in the tests
-  parameters: {
-    axe: {
-      disabledRules: [
-        "aria-input-field-name",
-        "aria-required-children",
-        "aria-required-parent",
-        "button-name",
-        "list",
-        "listitem",
-      ],
-    },
-  },
-  title: "Dropdowns/DropdownMenu",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    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: LABEL,
-  },
-  render: (args: Args) => <DropdownMenu {...args} />,
-};
-
-// Live Preview
-
-const storyRow = {
-  display: "grid",
-  gridColumnGap: 24,
-  gridRowGap: 8,
-  gridTemplateColumns: "repeat(4, 160px)",
-  gridTemplateRows: "repeat(2, auto)",
-};
-
-const StyledInputDropdownLive1 = styled(InputDropdown)`
-  position: relative !important;
-  min-width: unset;
-  &.MuiButtonBase-root {
-    margin: 0 !important;
-
-    & > span {
-      font-size: 13px;
-    }
-  }
-`;
-
-const StyledInputDropdownLive3 = styled(InputDropdown)`
-  position: relative !important;
-  min-width: 160px;
-  &.MuiButtonBase-root {
-    margin: 0 !important;
-
-    & > span {
-      font-size: 13px;
-    }
-  }
-`;
-
-const LIVE_PREVIEW_LABELS = [
-  {
-    name: "Menu Item 1",
-    section: "Section 1",
-  },
-  {
-    name: "Menu Item 2",
-    section: "Section 1",
-  },
-  {
-    name: "Menu Item 3",
-    section: "Section 1",
-  },
-  {
-    name: "Menu Item 4",
-    section: "Section 2",
-  },
-  {
-    name: "Menu Item 5",
-    section: "Section 2",
-  },
-  {
-    name: "Menu Item 6",
-    section: "Section 2",
-  },
-];
-
-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);
-  const [anchorEl2, setAnchorEl2] = useState<HTMLElement | null>(null);
-  const [anchorEl3, setAnchorEl3] = useState<HTMLElement | null>(null);
-  const [anchorEl4, setAnchorEl4] = useState<HTMLElement | null>(null);
-
-  const [open1, setOpen1] = useState(false);
-  const [open2, setOpen2] = useState(false);
-  const [open3, setOpen3] = useState(false);
-  const [open4, setOpen4] = useState(false);
-
-  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<
-    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  >(getInitialValue(true));
-  const [pendingValue4, setPendingValue4] = useState<
-    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  >(getInitialValue(true));
-
-  return (
-    <div style={storyRow as React.CSSProperties}>
-      <div style={{ alignSelf: "end", gridArea: "1/1/2/2" }}>
-        <StyledInputDropdownLive1
-          aria-describedby="live1"
-          onClick={handleClick1}
-          label="Click Target"
-          sdsStage={open1 ? "userInput" : "default"}
-          sdsType="label"
-          multiple={false}
-          sdsStyle="minimal"
-        />
-
-        {anchorEl1 ? (
-          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
-            label="Search"
-            anchorEl={anchorEl1}
-            open={!!open1}
-            onChange={handleChange1}
-            disableCloseOnSelect={false}
-            options={options.slice(0, 3) as T[]}
-            PopperBaseProps={{
-              placement: POPPER_POSITION,
-            }}
-            search={false}
-            multiple={false as Multiple}
-            value={value1}
-            onClickAway={handleClickAway1}
-            width={POPPER_WIDTH}
-          />
-        ) : null}
-      </div>
-
-      <div style={{ gridArea: "1/2/2/3" }}>
-        <ButtonIcon
-          aria-describedby="live2"
-          aria-label="Open menu"
-          onClick={handleClick2}
-          on={false}
-          sdsSize="large"
-          sdsType="secondary"
-          icon="infoSpeechBubble"
-        />
-
-        {anchorEl2 ? (
-          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
-            label="Search"
-            anchorEl={anchorEl2}
-            open={!!open2}
-            search={false}
-            multiple={false as Multiple}
-            onChange={handleChange2}
-            disableCloseOnSelect={false}
-            options={options.slice(0, 3) as T[]}
-            PopperBaseProps={{
-              placement: POPPER_POSITION,
-            }}
-            value={value2}
-            title="Title Lorem Ipsum"
-            onClickAway={handleClickAway2}
-            width={POPPER_WIDTH}
-          />
-        ) : null}
-      </div>
-
-      <div style={{ gridArea: "1/3/2/4" }}>
-        <StyledInputDropdownLive3
-          aria-describedby="live3"
-          onClick={handleClick3}
-          label="Click Target"
-          sdsStage={open3 ? "userInput" : "default"}
-          sdsType="label"
-          multiple
-          sdsStyle="rounded"
-        />
-
-        {anchorEl3 ? (
-          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
-            label="Search"
-            anchorEl={anchorEl3}
-            open={!!open3}
-            search
-            multiple={true as Multiple}
-            onChange={handleChange3}
-            disableCloseOnSelect
-            options={options as T[]}
-            PopperBaseProps={{
-              placement: POPPER_POSITION,
-            }}
-            value={pendingValue3}
-            onClickAway={handleClickAway3}
-            width={POPPER_WIDTH}
-          />
-        ) : null}
-      </div>
-
-      <div style={{ gridArea: "1/4/2/5" }}>
-        <StyledInputDropdownLive3
-          aria-describedby="live4"
-          onClick={handleClick4}
-          label="Click Target"
-          sdsStage={open4 ? "userInput" : "default"}
-          sdsType="label"
-          multiple
-          sdsStyle="square"
-        />
-
-        {anchorEl4 ? (
-          <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
-            label="Search"
-            anchorEl={anchorEl4}
-            open={!!open4}
-            search={false}
-            multiple={true as Multiple}
-            groupBy={(option) => option.section as string}
-            onChange={handleChange4}
-            disableCloseOnSelect
-            options={options as T[]}
-            PopperBaseProps={{
-              placement: POPPER_POSITION,
-            }}
-            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() {
-    setOpen1(false);
-  }
-
-  function handleClick1(event: React.MouseEvent<HTMLElement>) {
-    if (open1) {
-      setOpen1(false);
-
-      if (anchorEl1) {
-        anchorEl1.focus();
-      }
-
-      setAnchorEl1(null);
-    } else {
-      setAnchorEl1(event.currentTarget);
-      setOpen1(true);
-    }
-  }
-
-  function handleChange1(
-    _: React.SyntheticEvent<Element, Event>,
-    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  ) {
-    setOpen1(false);
-    setValue1(
-      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-    );
-  }
-
-  function handleClickAway2() {
-    setOpen2(false);
-  }
-
-  function handleClick2(event: React.MouseEvent<HTMLElement>) {
-    if (open2) {
-      setOpen2(false);
-
-      if (anchorEl2) {
-        anchorEl2.focus();
-      }
-
-      setAnchorEl2(null);
-    } else {
-      setAnchorEl2(event.currentTarget);
-      setOpen2(true);
-    }
-  }
-
-  function handleChange2(
-    _: React.SyntheticEvent<Element, Event>,
-    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  ) {
-    setOpen2(false);
-    setValue2(
-      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-    );
-  }
-
-  function handleClickAway3() {
-    setOpen3(false);
-  }
-
-  function handleClick3(event: React.MouseEvent<HTMLElement>) {
-    if (open3) {
-      setOpen3(false);
-
-      if (anchorEl3) {
-        anchorEl3.focus();
-      }
-
-      setAnchorEl3(null);
-    } else {
-      setAnchorEl3(event.currentTarget);
-      setOpen3(true);
-    }
-  }
-
-  function handleChange3(
-    _: React.SyntheticEvent<Element, Event>,
-    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  ) {
-    return setPendingValue3(
-      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-    );
-  }
-
-  function handleClickAway4() {
-    setOpen4(false);
-  }
-
-  function handleClick4(event: React.MouseEvent<HTMLElement>) {
-    if (open4) {
-      setOpen4(false);
-
-      if (anchorEl4) {
-        anchorEl4.focus();
-      }
-
-      setAnchorEl4(null);
-    } else {
-      setAnchorEl4(event.currentTarget);
-      setOpen4(true);
-    }
-  }
-
-  function handleChange4(
-    _: React.SyntheticEvent<Element, Event>,
-    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  ) {
-    return setPendingValue4(
-      newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-    );
-  }
-};
-
-export const LivePreview = {
-  args: {
-    keepSearchOnSelect: true,
-    multiple: false,
-    search: false,
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        "keepSearchOnSelect",
-        "ClickAwayListenerProps",
-        "search",
-        "multiple",
-        "label",
-        "groupBy",
-        "open",
-        "options",
-        "title",
-        "width",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Screenshot test
-
-const ScreenshotTestDemo = (props: Args): JSX.Element => {
-  const TITLE_OPTIONS = [undefined, "Sample title text"];
-  const SEARCH_OPTIONS = [false, true];
-  const GROUP_BY_OPTIONS = [false, true];
-  const SCREENSHOT_TEST_TAG_COMPONENT = {
-    component: (
-      <div>
-        Available Labels:
-        <div style={{ marginTop: 10 }}>
-          <Tag
-            label="bug"
-            sdsStyle="rounded"
-            sdsType="secondary"
-            color="error"
-          />
-          <Tag
-            label="feature"
-            sdsStyle="rounded"
-            sdsType="secondary"
-            color="warning"
-          />
-          <Tag
-            label="refactor"
-            sdsStyle="rounded"
-            sdsType="secondary"
-            color="gray"
-          />
-        </div>
-      </div>
-    ),
-    name: "custom 2",
-    section: "custom component",
-  };
-  const SCREENSHOT_TEST_OPTIONS = LIVE_PREVIEW_LABELS.concat(
-    SCREENSHOT_TEST_TAG_COMPONENT
-  );
-
-  const DISPLAY_CONTENTS: React.CSSProperties = {
-    display: "contents",
-  };
-  const MID_LABEL: React.CSSProperties = {
-    borderStyle: "solid none none none",
-    gridColumn: "1 / 3",
-    justifySelf: "stretch",
-    paddingTop: 10,
-  };
-
-  // loop through all TITLE_OPTIONS
-  return (
-    <>
-      {TITLE_OPTIONS.map((title) => {
-        return <DropdownMenuTitle title={title} key={title} />;
-      })}
-    </>
-  );
-
-  // loop through all SEARCH_OPTIONS + create headers for TITLE_OPTIONS
-  function DropdownMenuTitle({
-    title,
-  }: {
-    title: (typeof TITLE_OPTIONS)[number];
-  }) {
-    const LEVEL_STYLE: React.CSSProperties = {
-      columnGap: "25px",
-      display: "inline-grid",
-      fontFamily: "sans-serif",
-      marginLeft: "50px",
-    };
-    const LABEL_STYLE: React.CSSProperties = {
-      fontSize: "2em",
-      gridColumn: "1 / 3",
-      marginBottom: 10,
-    };
-    return (
-      <div style={LEVEL_STYLE}>
-        <p style={LABEL_STYLE}>
-          Title: <b>{title ? "yes" : "no"}</b>
-        </p>
-        {SEARCH_OPTIONS.map((search) => {
-          return (
-            <DropdownMenuSearch
-              title={title}
-              search={search}
-              key={String(search)}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-
-  function DropdownMenuSearch({
-    title,
-    search,
-  }: {
-    title: (typeof TITLE_OPTIONS)[number];
-    search: (typeof SEARCH_OPTIONS)[number];
-  }) {
-    const SEARCH_LABEL: React.CSSProperties = {
-      ...MID_LABEL,
-      borderWidth: "2px",
-      fontSize: "1.17em",
-      margin: 0,
-    };
-    const LEVEL_STYLE: React.CSSProperties = {
-      margin: "0 300px 475px 0",
-    };
-    const GROUP_BY_LABEL: React.CSSProperties = {
-      fontSize: "0.67em",
-      margin: "10px 0 475px",
-    };
-    return (
-      <div style={DISPLAY_CONTENTS}>
-        <p style={SEARCH_LABEL}>
-          Search: <b>{search ? "yes" : "no"}</b>
-        </p>
-        {GROUP_BY_OPTIONS.map((groupBy) => {
-          return (
-            <div style={LEVEL_STYLE} key={`level-${String(groupBy)}`}>
-              <>
-                <p style={GROUP_BY_LABEL}>
-                  Grouped: <b>{groupBy ? "yes" : "no"}</b>
-                </p>
-                <DropdownMenu
-                  {...props}
-                  groupBy={
-                    groupBy &&
-                    ((option: (typeof SCREENSHOT_TEST_OPTIONS)[number]) =>
-                      option.section as string)
-                  }
-                  options={
-                    SCREENSHOT_TEST_OPTIONS as DefaultAutocompleteOption[]
-                  }
-                  title={title}
-                  search={search}
-                  key={String(groupBy)}
-                  open
-                  width={250}
-                />
-              </>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}; // close ScreenShotTestDemo
-
-export const ScreenshotTest = {
-  parameters: {
-    axe: {
-      timeout: 10 * 1000,
-    },
-    controls: {
-      exclude: [
-        "keepSearchOnSelect",
-        "ClickAwayListenerProps",
-        "search",
-        "multiple",
-        "label",
-        "groupBy",
-        "open",
-        "options",
-        "title",
-        "width",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <ScreenshotTestDemo {...args} />,
-};
-
-// Test
-
-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<
-    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  >(getInitialValue(false));
-
-  const [pendingValue, setPendingValue] = useState<
-    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  >(getInitialValue(true));
-
-  useEffect(() => {
-    setAnchorEl(anchorRef.current);
-  }, []);
-
-  return (
-    <div style={{ margin: "16px 0 0 24px" }} ref={anchorRef}>
-      {anchorEl ? (
-        <RawDropdownMenu<T, Multiple, DisableClearable, FreeSolo>
-          label="Search"
-          anchorEl={anchorEl}
-          open
-          search={search}
-          multiple={multiple}
-          value={multiple ? pendingValue : value}
-          onChange={handleChange}
-          disableCloseOnSelect={multiple}
-          options={options}
-          onClickAway={handleClickAway}
-          groupBy={(option: T) => option.section as string}
-          width={300}
-          {...props}
-        />
-      ) : null}
-    </div>
-  );
-
-  function handleClickAway() {
-    return multiple && setValue(pendingValue);
-  }
-
-  function handleChange(
-    _: React.ChangeEvent<unknown>,
-    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  ) {
-    if (!multiple) {
-      setValue(
-        newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-      );
-    }
-
-    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>);
-  }
-};
-
-export const Test = {
-  args: {
-    keepSearchOnSelect: false,
-    multiple: true,
-    search: true,
-    title: LABEL,
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        "keepSearchOnSelect",
-        "ClickAwayListenerProps",
-        "search",
-        "multiple",
-        "label",
-        "groupBy",
-        "open",
-        "options",
-        "title",
-        "width",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo data-testid="dropdown-menu" {...args} />,
-};
diff --git a/packages/components/src/core/DropdownMenu/index.tsx b/packages/components/src/core/DropdownMenu/index.tsx
index abb4c7ce9..cb55374eb 100644
--- a/packages/components/src/core/DropdownMenu/index.tsx
+++ b/packages/components/src/core/DropdownMenu/index.tsx
@@ -9,10 +9,10 @@ import {
 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 Autocomplete, { AutocompleteProps } from "src/core/Autocomplete";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
+import { InputSearchProps } from "src/core/InputSearch";
+import { SDSTheme } from "src/core/styles";
 import {
   StyleProps,
   StyledDropdownMenuAutocompleteWrapper,
diff --git a/packages/components/src/core/DropdownMenu/style.ts b/packages/components/src/core/DropdownMenu/style.ts
index 47dbb5460..b6193c947 100644
--- a/packages/components/src/core/DropdownMenu/style.ts
+++ b/packages/components/src/core/DropdownMenu/style.ts
@@ -6,10 +6,10 @@ import {
   fontHeaderXs,
   getBorders,
   getCorners,
+  getSemanticComponentColors,
   getShadows,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface StyleProps extends CommonThemeProps {
   count?: number;
@@ -41,19 +41,18 @@ export const StyledHeaderTitle = styled("div", {
   ${(props) => {
     const { search } = props;
 
-    const typography = getTypography(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
-      font-family: ${typography?.fontFamily};
-      padding-right: ${spacings?.m}px;
-      margin-bottom: ${search ? spacings?.s : spacings?.m}px;
+      padding-right: ${spaces?.m}px;
+      margin-bottom: ${search ? spaces?.s : spaces?.m}px;
     `;
   }}
 `;
 
 export const StyledDropdownMenuAutocompleteWrapper = styled("div")`
-  & .${autocompleteClasses.popper}, & .MuiPopper-root {
+  & .${autocompleteClasses.popper}, & .MuiPopper-root,
+  .base-Popper-root {
     position: relative !important;
     transform: none !important;
     width: 100% !important;
@@ -79,10 +78,11 @@ export const StyledPopper = styled(Popper, {
     const borders = getBorders(props);
     const corners = getCorners(props);
     const shadows = getShadows(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
-      background-color: white;
-      border: ${borders?.gray[100]};
+      background-color: ${semanticComponentColors?.base?.surface};
+      border: ${borders?.none};
       border-radius: ${corners?.m}px;
       box-shadow: ${shadows?.m};
       box-sizing: border-box;
@@ -95,18 +95,19 @@ export const StyledPaper = styled(Paper, {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
   ${(props: StyleProps) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
+    const borders = getBorders(props);
+    const shadows = getShadows(props);
 
     return `
-      box-shadow: none !important;
-      border: none !important;
-      border-radius: 0;
+      box-shadow: ${shadows?.none} !important;
+      border: ${borders?.none};
       margin: 0;
-      padding: ${spacings?.l}px ${spacings?.xxs}px ${spacings?.l}px ${spacings?.l}px;
+      padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px;
 
       .MuiFormControl-root.MuiTextField-root {
-        margin-bottom: ${spacings?.m}px;
-        margin-right: ${spacings?.m}px;
+        margin-bottom: ${spaces?.m}px;
+        margin-right: ${spaces?.m}px;
       }
     `;
   }}
diff --git a/packages/components/src/core/Icon/Icon.namespace-test.tsx b/packages/components/src/core/Icon/Icon.namespace-test.tsx
deleted file mode 100644
index 5eccb9290..000000000
--- a/packages/components/src/core/Icon/Icon.namespace-test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Icon } from "@czi-sds/components";
-import React from "react";
-
-const IconNameSpaceTest = () => {
-  return (
-    <Icon
-      color="primary"
-      shade={400}
-      sdsIcon="bacteria"
-      sdsSize="xl"
-      sdsType="static"
-    />
-  );
-};
diff --git a/packages/components/src/core/Icon/__storybook__/index.stories.tsx b/packages/components/src/core/Icon/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..c45f78659
--- /dev/null
+++ b/packages/components/src/core/Icon/__storybook__/index.stories.tsx
@@ -0,0 +1,98 @@
+import { Args, Meta } from "@storybook/react";
+import RawIcon from "src/core/Icon";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Icon } from "./stories/default";
+import { IconBankDemo } from "./stories/iconBank";
+
+export default {
+  argTypes: {
+    color: {
+      control: {
+        type: "select",
+      },
+      options: ["blue", "gray", "green", "purple", "red", "yellow"],
+    },
+    sdsIcon: {
+      control: {
+        type: "select",
+      },
+      options: [
+        "CheckCircle",
+        "Copy",
+        "Edit",
+        "LightBulb",
+        "LinesHorizontal",
+        "Loading",
+        "XMark",
+      ],
+    },
+    sdsSize: {
+      control: { type: "select" },
+      options: ["xs", "s", "l", "xl"],
+    },
+    sdsType: {
+      control: { type: "select" },
+      options: ["iconButton", "interactive", "static", "button"],
+    },
+    shade: {
+      control: {
+        type: "select",
+      },
+      options: [100, 200, 300, 400, 500, 600],
+    },
+  },
+  component: Icon,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Icon",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    color: "blue",
+    sdsIcon: "CheckCircle",
+    sdsSize: "xl",
+    sdsType: "static",
+    shade: 400,
+  },
+};
+
+// Icon Bank
+
+export const IconBank = {
+  args: {
+    color: "blue",
+  },
+  parameters: {
+    controls: {
+      exclude: ["sdsIcon", "sdsSize", "sdsType", "shade"],
+    },
+  },
+  render: (args: Args) => <IconBankDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: ["color", "sdsIcon", "sdsSize", "sdsType", "shade"],
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => (
+    <RawIcon
+      sdsIcon="CheckCircle"
+      sdsSize="l"
+      sdsType="static"
+      color="blue"
+      data-testid="icon"
+      {...args}
+    />
+  ),
+};
diff --git a/packages/components/src/core/Icon/__storybook__/stories/default.tsx b/packages/components/src/core/Icon/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..33002d983
--- /dev/null
+++ b/packages/components/src/core/Icon/__storybook__/stories/default.tsx
@@ -0,0 +1,10 @@
+import { Args } from "@storybook/react";
+import RawIcon from "src/core/Icon";
+
+export const Icon = (props: Args): JSX.Element => {
+  const { sdsIcon, sdsSize, sdsType, ...rest } = props;
+
+  return (
+    <RawIcon sdsIcon={sdsIcon} sdsSize={sdsSize} sdsType={sdsType} {...rest} />
+  );
+};
diff --git a/packages/components/src/core/Icon/index.stories.tsx b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
similarity index 61%
rename from packages/components/src/core/Icon/index.stories.tsx
rename to packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
index 4e912748c..08d9f8841 100644
--- a/packages/components/src/core/Icon/index.stories.tsx
+++ b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx
@@ -1,115 +1,46 @@
-import styled from "@emotion/styled";
-import { Args, Meta } from "@storybook/react";
-import React, { FC, useState } from "react";
-import Callout from "../Callout";
-import InputSearch from "../InputSearch";
+import { styled } from "@mui/material";
+import { Args } from "@storybook/react";
+import { FC, useState } from "react";
+import Callout from "src/core/Callout";
+import RawIcon, { IconNameToSizes, SdsIconWithColor } from "src/core/Icon";
 import {
   CommonThemeProps,
+  fontBodyXs,
   getColors,
   getSpaces,
   getTypography,
-} from "../styles";
-import RawIcon, { SdsIconWithColor } from "./index";
-import { IconNameToSizes, iconMap } from "./map";
-
-const Icon = (props: Args): JSX.Element => {
-  const { sdsIcon, sdsSize, sdsType, ...rest } = props;
-
-  return (
-    <RawIcon sdsIcon={sdsIcon} sdsSize={sdsSize} sdsType={sdsType} {...rest} />
-  );
-};
-
-export default {
-  argTypes: {
-    color: {
-      control: {
-        type: "select",
-      },
-      options: [
-        "beta",
-        "gray",
-        "primary",
-        "secondary",
-        "error",
-        "info",
-        "success",
-        "warning",
-      ],
-    },
-    sdsIcon: {
-      control: {
-        type: "select",
-      },
-      options: [
-        "checkCircle",
-        "copy",
-        "edit",
-        "lightBulb",
-        "linesHorizontal",
-        "loading",
-        "xMark",
-      ],
-    },
-    sdsSize: {
-      control: { type: "select" },
-      options: ["xs", "s", "l", "xl"],
-    },
-    sdsType: {
-      control: { type: "select" },
-      options: ["iconButton", "interactive", "static", "button"],
-    },
-    shade: {
-      control: {
-        type: "select",
-      },
-      options: [100, 200, 300, 400, 500, 600],
-    },
-  },
-  component: Icon,
-  title: "Icon",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    color: "primary",
-    sdsIcon: "checkCircle",
-    sdsSize: "xl",
-    sdsType: "static",
-    shade: 400,
-  },
-};
-
-// Icon Bank
+} from "src/core/styles";
+import { iconMap } from "src/core/Icon/map";
+import InputSearch from "src/core/InputSearch";
 
 const IconBankWrapper = styled("div")`
   ${(props: CommonThemeProps) => {
     const typography = getTypography(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
       font-family: ${typography?.fontFamily};
       display: grid;
-      grid-gap: ${spacings?.s}px;
+      grid-gap: ${spaces?.s}px;
       margin: 0 auto;
       grid-template-columns: repeat(auto-fit, 210px);
-      margin-top: ${spacings?.m}px;
+      margin-top: ${spaces?.m}px;
     `;
   }}
 `;
 
 const IconWrapper = styled("div")`
+  ${fontBodyXs}
+
   ${(props: CommonThemeProps & SdsIconWithColor) => {
     const colors = getColors(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
-    const { color = "primary", shade = 400 } = props;
+    const { color = "blue", shade = 400 } = props;
 
     return `
       align-items: center;
-      border: 1px solid #eee;
+      border: 1px solid ${colors?.gray[200]};
       border-radius: 2px;
       display: flex;
       flex-direction: column;
@@ -120,7 +51,7 @@ const IconWrapper = styled("div")`
       transition: all .2s;
 
       p {
-        margin: ${spacings?.m}px 0 0 0;
+        margin: ${spaces?.m}px 0 0 0;
         text-align: center;
         font-size: 13px;
         background-color: transparent;
@@ -141,8 +72,8 @@ const IconWrapper = styled("div")`
 
       &:hover {
         border-radius: 2px;
-        background-color: ${colors?.[color][shade]};
-        border-color: ${colors?.[color][shade]};
+        background-color: ${colors?.[color]?.[shade]};
+        border-color: ${colors?.[color]?.[shade]};
         color: white;
 
         p {
@@ -195,7 +126,7 @@ type IconItemProps = {
 } & SdsIconWithColor;
 
 const IconItem = (props: IconItemProps) => {
-  const { sdsIcon, innerIcon, color, shade } = props;
+  const { sdsIcon, innerIcon, color } = props;
 
   const [copied, setCopied] = useState(false);
 
@@ -215,14 +146,12 @@ const IconItem = (props: IconItemProps) => {
   return (
     <IconWrapper
       color={color}
-      shade={shade}
       key={sdsIcon + sdsSize}
       onClick={() => copyIconNameHandler(sdsIcon)}
     >
       <div className="icon">
         <RawIcon
           color={color}
-          shade={shade}
           sdsSize={sdsSize}
           sdsIcon={sdsIcon as keyof IconNameToSizes}
           sdsType="static"
@@ -247,7 +176,6 @@ const IconItem = (props: IconItemProps) => {
         <div className="notification">
           <RawIcon
             color={color}
-            shade={shade}
             sdsSize={sdsSize}
             sdsIcon={sdsIcon as keyof IconNameToSizes}
             sdsType="static"
@@ -256,9 +184,8 @@ const IconItem = (props: IconItemProps) => {
           <span>
             <RawIcon
               color={color}
-              shade={shade}
               sdsSize="xs"
-              sdsIcon="check"
+              sdsIcon="Check"
               sdsType="static"
             />
           </span>
@@ -268,8 +195,8 @@ const IconItem = (props: IconItemProps) => {
   );
 };
 
-const IconBankDemo = (props: Args): JSX.Element => {
-  const { color, shade } = props;
+export const IconBankDemo = (props: Args): JSX.Element => {
+  const { color } = props;
 
   const initialIcons = Object.entries(iconMap);
 
@@ -300,7 +227,6 @@ const IconBankDemo = (props: Args): JSX.Element => {
             return Object.entries(icon).map((innerIcon) => (
               <IconItem
                 color={color}
-                shade={shade}
                 key={sdsIcon + innerIcon[0]}
                 innerIcon={innerIcon}
                 sdsIcon={sdsIcon}
@@ -310,9 +236,9 @@ const IconBankDemo = (props: Args): JSX.Element => {
         </IconBankWrapper>
       ) : (
         <Callout
-          intent="warning"
+          intent="notice"
           icon={
-            <RawIcon sdsSize="l" sdsIcon="infoSpeechBubble" sdsType="static" />
+            <RawIcon sdsSize="l" sdsIcon="InfoSpeechBubble" sdsType="static" />
           }
         >
           Sorry, there are no matches for your search!
@@ -321,38 +247,3 @@ const IconBankDemo = (props: Args): JSX.Element => {
     </>
   );
 };
-
-export const IconBank = {
-  args: {
-    color: "primary",
-  },
-  parameters: {
-    controls: {
-      exclude: ["sdsIcon", "sdsSize", "sdsType", "shade"],
-    },
-  },
-  render: (args: Args) => <IconBankDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  parameters: {
-    controls: {
-      exclude: ["color", "sdsIcon", "sdsSize", "sdsType", "shade"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => (
-    <RawIcon
-      sdsIcon="checkCircle"
-      sdsSize="l"
-      sdsType="static"
-      color="success"
-      data-testid="icon"
-      {...args}
-    />
-  ),
-};
diff --git a/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx b/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx
new file mode 100644
index 000000000..3049248b5
--- /dev/null
+++ b/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx
@@ -0,0 +1,6 @@
+import { Icon } from "@czi-sds/components";
+import React from "react";
+
+const IconNameSpaceTest = () => {
+  return <Icon color="blue" sdsIcon="Bacteria" sdsSize="xl" sdsType="static" />;
+};
diff --git a/packages/components/src/core/Icon/index.tsx b/packages/components/src/core/Icon/index.tsx
index 5745976bc..0f6139e68 100644
--- a/packages/components/src/core/Icon/index.tsx
+++ b/packages/components/src/core/Icon/index.tsx
@@ -35,7 +35,9 @@ const Icon = forwardRef(function Icon<IconName extends keyof IconNameToSizes>(
           shade={shade}
           className={className}
           fillcontrast="white"
-          viewBox="0 0 14 14"
+          viewBox="0 0 16 16"
+          width={16}
+          height={16}
           component={smallIcon}
           sdsSize={sdsSize}
           sdsType={sdsType}
@@ -52,7 +54,9 @@ const Icon = forwardRef(function Icon<IconName extends keyof IconNameToSizes>(
           shade={shade}
           className={className}
           fillcontrast="white"
-          viewBox="0 0 22 22"
+          viewBox="0 0 24 24"
+          width={24}
+          height={24}
           component={largeIcon}
           sdsSize={sdsSize}
           sdsType={sdsType}
diff --git a/packages/components/src/core/Icon/map.ts b/packages/components/src/core/Icon/map.ts
index 07022d98b..da983b51a 100644
--- a/packages/components/src/core/Icon/map.ts
+++ b/packages/components/src/core/Icon/map.ts
@@ -1,238 +1,241 @@
 import { FC } from "react";
-import { ReactComponent as IconBacteriaLarge } from "../../common/svgs/IconBacteriaLarge.svg";
-import { ReactComponent as IconBacteriaSmall } from "../../common/svgs/IconBacteriaSmall.svg";
-import { ReactComponent as IconBarChartHorizontal3Small } from "../../common/svgs/IconBarChartHorizontal3Small.svg";
-import { ReactComponent as IconBarChartVertical3Small } from "../../common/svgs/IconBarChartVertical3Small.svg";
-import { ReactComponent as IconBarChartVertical4Small } from "../../common/svgs/IconBarChartVertical4Small.svg";
-import { ReactComponent as IconBookLarge } from "../../common/svgs/IconBookLarge.svg";
-import { ReactComponent as IconCheckCircleLarge } from "../../common/svgs/IconCheckCircleLarge.svg";
-import { ReactComponent as IconCheckCircleSmall } from "../../common/svgs/IconCheckCircleSmall.svg";
-import { ReactComponent as IconCheckSmall } from "../../common/svgs/IconCheckSmall.svg";
-import { ReactComponent as IconChevronDownLarge } from "../../common/svgs/IconChevronDownLarge.svg";
-import { ReactComponent as IconChevronDownSmall } from "../../common/svgs/IconChevronDownSmall.svg";
-import { ReactComponent as IconChevronDown2Small } from "../../common/svgs/IconChevronDown2Small.svg";
-import { ReactComponent as IconChevronLeft2Small } from "../../common/svgs/IconChevronLeft2Small.svg";
-import { ReactComponent as IconChevronLeftLarge } from "../../common/svgs/IconChevronLeftLarge.svg";
-import { ReactComponent as IconChevronLeftSmall } from "../../common/svgs/IconChevronLeftSmall.svg";
-import { ReactComponent as IconChevronRight2Small } from "../../common/svgs/IconChevronRight2Small.svg";
-import { ReactComponent as IconChevronRightLarge } from "../../common/svgs/IconChevronRightLarge.svg";
-import { ReactComponent as IconChevronRightSmall } from "../../common/svgs/IconChevronRightSmall.svg";
-import { ReactComponent as IconChevronUpLarge } from "../../common/svgs/IconChevronUpLarge.svg";
-import { ReactComponent as IconChevronUpSmall } from "../../common/svgs/IconChevronUpSmall.svg";
-import { ReactComponent as IconChevronUp2Small } from "../../common/svgs/IconChevronUp2Small.svg";
-import { ReactComponent as IconCirclesOverlapLarge } from "../../common/svgs/IconCirclesOverlapLarge.svg";
-import { ReactComponent as IconCirclesOverlapSmall } from "../../common/svgs/IconCirclesOverlapSmall.svg";
-import { ReactComponent as IconCodeLarge } from "../../common/svgs/IconCodeLarge.svg";
-import { ReactComponent as IconCompassLarge } from "../../common/svgs/IconCompassLarge.svg";
-import { ReactComponent as IconCopyLarge } from "../../common/svgs/IconCopyLarge.svg";
-import { ReactComponent as IconCopySmall } from "../../common/svgs/IconCopySmall.svg";
-import { ReactComponent as IconCubeLarge } from "../../common/svgs/IconCubeLarge.svg";
-import { ReactComponent as IconDnaLarge } from "../../common/svgs/IconDnaLarge.svg";
-import { ReactComponent as IconDocumentSmall } from "../../common/svgs/IconDocumentSmall.svg";
-import { ReactComponent as IconDotsHorizontal3Large } from "../../common/svgs/IconDotsHorizontal3Large.svg";
-import { ReactComponent as IconDotsHorizontal3Small } from "../../common/svgs/IconDotsHorizontal3Small.svg";
-import { ReactComponent as IconDownloadLarge } from "../../common/svgs/IconDownloadLarge.svg";
-import { ReactComponent as IconDownloadSmall } from "../../common/svgs/IconDownloadSmall.svg";
-import { ReactComponent as IconEditLarge } from "../../common/svgs/IconEditLarge.svg";
-import { ReactComponent as IconEditSmall } from "../../common/svgs/IconEditSmall.svg";
-import { ReactComponent as IconEnvelopeSmall } from "../../common/svgs/IconEnvelopeSmall.svg";
-import { ReactComponent as IconExclamationMarkCircleLarge } from "../../common/svgs/IconExclamationMarkCircleLarge.svg";
-import { ReactComponent as IconExclamationMarkCircleSmall } from "../../common/svgs/IconExclamationMarkCircleSmall.svg";
-import { ReactComponent as IconExclamationMarkSpeechBubbleLarge } from "../../common/svgs/IconExclamationmarkSpeechBubbleLarge.svg";
-import { ReactComponent as IconEyeClosedSmall } from "../../common/svgs/IconEyeClosedSmall.svg";
-import { ReactComponent as IconEyeOpenSmall } from "../../common/svgs/IconEyeOpenSmall.svg";
-import { ReactComponent as IconFilterSmall } from "../../common/svgs/IconFilterSmall.svg";
-import { ReactComponent as IconFlagCheckSmall } from "../../common/svgs/IconFlagCheckSmall.svg";
-import { ReactComponent as IconFlagOutlineSmall } from "../../common/svgs/IconFlagOutlineSmall.svg";
-import { ReactComponent as IconFlagQuestionmarkSmall } from "../../common/svgs/IconFlagQuestionmarkSmall.svg";
-import { ReactComponent as IconFlagXmarkSmall } from "../../common/svgs/IconFlagXmarkSmall.svg";
-import { ReactComponent as IconFlaskLarge } from "../../common/svgs/IconFlaskLarge.svg";
-import { ReactComponent as IconFlaskPrivateLarge } from "../../common/svgs/IconFlaskPrivateLarge.svg";
-import { ReactComponent as IconFlaskPublicLarge } from "../../common/svgs/IconFlaskPublicLarge.svg";
-import { ReactComponent as IconGearSmall } from "../../common/svgs/IconGearSmall.svg";
-import { ReactComponent as IconGlobeBasicLarge } from "../../common/svgs/IconGlobeBasicLarge.svg";
-import { ReactComponent as IconGlobeSmall } from "../../common/svgs/IconGlobeSmall.svg";
-import { ReactComponent as IconGridLarge } from "../../common/svgs/IconGridLarge.svg";
-import { ReactComponent as IconGridPrivateLarge } from "../../common/svgs/IconGridPrivateLarge.svg";
-import { ReactComponent as IconGridPublicLarge } from "../../common/svgs/IconGridPublicLarge.svg";
-import { ReactComponent as IconGridThreeDotsLarge } from "../../common/svgs/IconGridThreeDotsLarge.svg";
-import { ReactComponent as IconHouseSmall } from "../../common/svgs/IconHouseSmall.svg";
-import { ReactComponent as IconInfoCircleLarge } from "../../common/svgs/IconInfoCircleLarge.svg";
-import { ReactComponent as IconInfoCircleSmall } from "../../common/svgs/IconInfoCircleSmall.svg";
-import { ReactComponent as IconInfoSpeechBubbleLarge } from "../../common/svgs/IconInfoSpeechBubbleLarge.svg";
-import { ReactComponent as IconLifeRingSmall } from "../../common/svgs/IconLifeRingSmall.svg";
-import { ReactComponent as IconLightBulbLarge } from "../../common/svgs/IconLightBulbLarge.svg";
-import { ReactComponent as IconLightBulbSmall } from "../../common/svgs/IconLightBulbSmall.svg";
-import { ReactComponent as IconLinesDashed3Solid1Small } from "../../common/svgs/IconLinesDashed3Solid1Small.svg";
-import { ReactComponent as IconLinesHorizontalLarge } from "../../common/svgs/IconLinesHorizontalLarge.svg";
-import { ReactComponent as IconLinesHorizontalSmall } from "../../common/svgs/IconLinesHorizontalSmall.svg";
-import { ReactComponent as IconLinkSmall } from "../../common/svgs/IconLinkSmall.svg";
-import { ReactComponent as IconListSmall } from "../../common/svgs/IconListSmall.svg";
-import { ReactComponent as IconLoadingLarge } from "../../common/svgs/IconLoadingLarge.svg";
-import { ReactComponent as IconLoadingSmall } from "../../common/svgs/IconLoadingSmall.svg";
-import { ReactComponent as IconLockCircleSmall } from "../../common/svgs/IconLockCircleSmall.svg";
-import { ReactComponent as IconLockLarge } from "../../common/svgs/IconLockLarge.svg";
-import { ReactComponent as IconLockSmall } from "../../common/svgs/IconLockSmall.svg";
-import { ReactComponent as IconMinusSmall } from "../../common/svgs/IconMinusSmall.svg";
-import { ReactComponent as IconOpenSmall } from "../../common/svgs/IconOpenSmall.svg";
-import { ReactComponent as IconPeopleLarge } from "../../common/svgs/IconPeopleLarge.svg";
-import { ReactComponent as IconPeopleSmall } from "../../common/svgs/IconPeopleSmall.svg";
-import { ReactComponent as IconPercentageSmall } from "../../common/svgs/IconPercentageSmall.svg";
-import { ReactComponent as IconPersonLarge } from "../../common/svgs/IconPersonLarge.svg";
-import { ReactComponent as IconPersonSmall } from "../../common/svgs/IconPersonSmall.svg";
-import { ReactComponent as IconPinLocationSmall } from "../../common/svgs/IconPinLocationSmall.svg";
-import { ReactComponent as IconPinSmall } from "../../common/svgs/IconPinSmall.svg";
-import { ReactComponent as IconPlayLarge } from "../../common/svgs/IconPlayLarge.svg";
-import { ReactComponent as IconPlusCircleSmall } from "../../common/svgs/IconPlusCircleSmall.svg";
-import { ReactComponent as IconPlusSmall } from "../../common/svgs/IconPlusSmall.svg";
-import { ReactComponent as IconProjectPrivateLarge } from "../../common/svgs/IconProjectPrivateLarge.svg";
-import { ReactComponent as IconProjectPublicLarge } from "../../common/svgs/IconProjectPublicLarge.svg";
-import { ReactComponent as IconPuzzlePieceSmall } from "../../common/svgs/IconPuzzlePieceSmall.svg";
-import { ReactComponent as IconQuestionMarkLarge } from "../../common/svgs/IconQuestionMarkLarge.svg";
-import { ReactComponent as IconQuoteLarge } from "../../common/svgs/IconQuoteLarge.svg";
-import { ReactComponent as IconReadLarge } from "../../common/svgs/IconReadLarge.svg";
-import { ReactComponent as IconRefreshLarge } from "../../common/svgs/IconRefreshLarge.svg";
-import { ReactComponent as IconRefreshSmall } from "../../common/svgs/IconRefreshSmall.svg";
-import { ReactComponent as IconRocketLarge } from "../../common/svgs/IconRocketLarge.svg";
-import { ReactComponent as IconSaveLarge } from "../../common/svgs/IconSaveLarge.svg";
-import { ReactComponent as IconSearchLarge } from "../../common/svgs/IconSearchLarge.svg";
-import { ReactComponent as IconSearchLinesHorizontalLarge } from "../../common/svgs/IconSearchLinesHorizontalLarge.svg";
-import { ReactComponent as IconSearchLinesHorizontalSmall } from "../../common/svgs/IconSearchLinesHorizontalSmall.svg";
-import { ReactComponent as IconSearchSmall } from "../../common/svgs/IconSearchSmall.svg";
-import { ReactComponent as IconShareLarge } from "../../common/svgs/IconShareLarge.svg";
-import { ReactComponent as IconSlidersHorizontalLarge } from "../../common/svgs/IconSlidersHorizontalLarge.svg";
-import { ReactComponent as IconSpeechBubblesLarge } from "../../common/svgs/IconSpeechBubblesLarge.svg";
-import { ReactComponent as IconSquareOnDashedSquareLarge } from "../../common/svgs/IconSquareOnDashedSquareLarge.svg";
-import { ReactComponent as IconStarburstSmall } from "../../common/svgs/IconStarburstSmall.svg";
-import { ReactComponent as IconStarLarge } from "../../common/svgs/IconStarLarge.svg";
-import { ReactComponent as IconTableSmall } from "../../common/svgs/IconTableSmall.svg";
-import { ReactComponent as IconTrashCanLarge } from "../../common/svgs/IconTrashCanLarge.svg";
-import { ReactComponent as IconTrashCanSmall } from "../../common/svgs/IconTrashCanSmall.svg";
-import { ReactComponent as IconTreeDendogramLarge } from "../../common/svgs/IconTreeDendogramLarge.svg";
-import { ReactComponent as IconTreeHorizontalLarge } from "../../common/svgs/IconTreeHorizontalLarge.svg";
-import { ReactComponent as IconTreeHorizontalPrivateLarge } from "../../common/svgs/IconTreeHorizontalPrivateLarge.svg";
-import { ReactComponent as IconTreeHorizontalPublicLarge } from "../../common/svgs/IconTreeHorizontalPublicLarge.svg";
-import { ReactComponent as IconTreeHorizontalSmall } from "../../common/svgs/IconTreeHorizontalSmall.svg";
-import { ReactComponent as IconTreeHorizontalTopRightFilledLarge } from "../../common/svgs/IconTreeHorizontalTopRightFilledLarge.svg";
-import { ReactComponent as IconTreeVerticalSmall } from "../../common/svgs/IconTreeVerticalSmall.svg";
-import { ReactComponent as IconTriangleDownSmall } from "../../common/svgs/IconTriangleDownSmall.svg";
-import { ReactComponent as IconTriangleLeftSmall } from "../../common/svgs/IconTriangleLeftSmall.svg";
-import { ReactComponent as IconTriangleRightSmall } from "../../common/svgs/IconTriangleRightSmall.svg";
-import { ReactComponent as IconTriangleUpSmall } from "../../common/svgs/IconTriangleUpSmall.svg";
-import { ReactComponent as IconUpdatedLarge } from "../../common/svgs/IconUpdatedLarge.svg";
-import { ReactComponent as IconUploadLarge } from "../../common/svgs/IconUploadLarge.svg";
-import { ReactComponent as IconUploadSmall } from "../../common/svgs/IconUploadSmall.svg";
-import { ReactComponent as IconVirusCircleSLarge } from "../../common/svgs/IconVirusCircleSLarge.svg";
-import { ReactComponent as IconVirusLarge } from "../../common/svgs/IconVirusLarge.svg";
-import { ReactComponent as IconWidgetLarge } from "../../common/svgs/IconWidgetLarge.svg";
-import { ReactComponent as IconXMarkCircleSmall } from "../../common/svgs/IconXMarkCircleSmall.svg";
-import { ReactComponent as IconXMarkLarge } from "../../common/svgs/IconXMarkLarge.svg";
-import { ReactComponent as IconXMarkSmall } from "../../common/svgs/IconXMarkSmall.svg";
+import { ReactComponent as IconBacteriaLarge } from "src/common/svgs/IconBacteriaLarge.svg";
+import { ReactComponent as IconBacteriaSmall } from "src/common/svgs/IconBacteriaSmall.svg";
+import { ReactComponent as IconBarChartHorizontal3Small } from "src/common/svgs/IconBarChartHorizontal3Small.svg";
+import { ReactComponent as IconBarChartVertical3Small } from "src/common/svgs/IconBarChartVertical3Small.svg";
+import { ReactComponent as IconBarChartVertical4Small } from "src/common/svgs/IconBarChartVertical4Small.svg";
+import { ReactComponent as IconBookLarge } from "src/common/svgs/IconBookLarge.svg";
+import { ReactComponent as IconCheckCircleLarge } from "src/common/svgs/IconCheckCircleLarge.svg";
+import { ReactComponent as IconCheckCircleSmall } from "src/common/svgs/IconCheckCircleSmall.svg";
+import { ReactComponent as IconCheckSmall } from "src/common/svgs/IconCheckSmall.svg";
+import { ReactComponent as IconChevronDownLarge } from "src/common/svgs/IconChevronDownLarge.svg";
+import { ReactComponent as IconChevronDownSmall } from "src/common/svgs/IconChevronDownSmall.svg";
+import { ReactComponent as IconChevronDown2Small } from "src/common/svgs/IconChevronDown2Small.svg";
+import { ReactComponent as IconChevronLeft2Small } from "src/common/svgs/IconChevronLeft2Small.svg";
+import { ReactComponent as IconChevronLeftLarge } from "src/common/svgs/IconChevronLeftLarge.svg";
+import { ReactComponent as IconChevronLeftSmall } from "src/common/svgs/IconChevronLeftSmall.svg";
+import { ReactComponent as IconChevronRight2Small } from "src/common/svgs/IconChevronRight2Small.svg";
+import { ReactComponent as IconChevronRightLarge } from "src/common/svgs/IconChevronRightLarge.svg";
+import { ReactComponent as IconChevronRightSmall } from "src/common/svgs/IconChevronRightSmall.svg";
+import { ReactComponent as IconChevronUpLarge } from "src/common/svgs/IconChevronUpLarge.svg";
+import { ReactComponent as IconChevronUpSmall } from "src/common/svgs/IconChevronUpSmall.svg";
+import { ReactComponent as IconChevronUp2Small } from "src/common/svgs/IconChevronUp2Small.svg";
+import { ReactComponent as IconCirclesOverlap2Large } from "src/common/svgs/IconCirclesOverlap2Large.svg";
+import { ReactComponent as IconCirclesOverlap2Small } from "src/common/svgs/IconCirclesOverlap2Small.svg";
+import { ReactComponent as IconCodeLarge } from "src/common/svgs/IconCodeLarge.svg";
+import { ReactComponent as IconCompassLarge } from "src/common/svgs/IconCompassLarge.svg";
+import { ReactComponent as IconCopyLarge } from "src/common/svgs/IconCopyLarge.svg";
+import { ReactComponent as IconCopySmall } from "src/common/svgs/IconCopySmall.svg";
+import { ReactComponent as IconCubeLarge } from "src/common/svgs/IconCubeLarge.svg";
+import { ReactComponent as IconCubeSmall } from "src/common/svgs/IconCubeSmall.svg";
+import { ReactComponent as IconDNALarge } from "src/common/svgs/IconDNALarge.svg";
+import { ReactComponent as IconDocumentSmall } from "src/common/svgs/IconDocumentSmall.svg";
+import { ReactComponent as IconDotsHorizontal3Large } from "src/common/svgs/IconDotsHorizontal3Large.svg";
+import { ReactComponent as IconDotsHorizontal3Small } from "src/common/svgs/IconDotsHorizontal3Small.svg";
+import { ReactComponent as IconDownloadLarge } from "src/common/svgs/IconDownloadLarge.svg";
+import { ReactComponent as IconDownloadSmall } from "src/common/svgs/IconDownloadSmall.svg";
+import { ReactComponent as IconEditLarge } from "src/common/svgs/IconEditLarge.svg";
+import { ReactComponent as IconEditSmall } from "src/common/svgs/IconEditSmall.svg";
+import { ReactComponent as IconEnvelopeSmall } from "src/common/svgs/IconEnvelopeSmall.svg";
+import { ReactComponent as IconExclamationMarkCircleLarge } from "src/common/svgs/IconExclamationMarkCircleLarge.svg";
+import { ReactComponent as IconExclamationMarkCircleSmall } from "src/common/svgs/IconExclamationMarkCircleSmall.svg";
+import { ReactComponent as IconExclamationMarkSpeechBubbleLarge } from "src/common/svgs/IconExclamationMarkSpeechBubbleLarge.svg";
+import { ReactComponent as IconEyeClosedSmall } from "src/common/svgs/IconEyeClosedSmall.svg";
+import { ReactComponent as IconEyeOpenSmall } from "src/common/svgs/IconEyeOpenSmall.svg";
+import { ReactComponent as IconFilterSmall } from "src/common/svgs/IconFilterSmall.svg";
+import { ReactComponent as IconFlagCheckSmall } from "src/common/svgs/IconFlagCheckSmall.svg";
+import { ReactComponent as IconFlagOutlineSmall } from "src/common/svgs/IconFlagOutlineSmall.svg";
+import { ReactComponent as IconFlagQuestionMarkSmall } from "src/common/svgs/IconFlagQuestionMarkSmall.svg";
+import { ReactComponent as IconFlagXMarkSmall } from "src/common/svgs/IconFlagXMarkSmall.svg";
+import { ReactComponent as IconFlaskLarge } from "src/common/svgs/IconFlaskLarge.svg";
+import { ReactComponent as IconFlaskPrivateLarge } from "src/common/svgs/IconFlaskPrivateLarge.svg";
+import { ReactComponent as IconFlaskPublicLarge } from "src/common/svgs/IconFlaskPublicLarge.svg";
+import { ReactComponent as IconGearSmall } from "src/common/svgs/IconGearSmall.svg";
+import { ReactComponent as IconGlobeBasicLarge } from "src/common/svgs/IconGlobeBasicLarge.svg";
+import { ReactComponent as IconGlobeSmall } from "src/common/svgs/IconGlobeSmall.svg";
+import { ReactComponent as IconGridLarge } from "src/common/svgs/IconGridLarge.svg";
+import { ReactComponent as IconGridPrivateLarge } from "src/common/svgs/IconGridPrivateLarge.svg";
+import { ReactComponent as IconGridPublicLarge } from "src/common/svgs/IconGridPublicLarge.svg";
+import { ReactComponent as IconGridDots3Large } from "src/common/svgs/IconGridDots3Large.svg";
+import { ReactComponent as IconHouseSmall } from "src/common/svgs/IconHouseSmall.svg";
+import { ReactComponent as IconInfoCircleLarge } from "src/common/svgs/IconInfoCircleLarge.svg";
+import { ReactComponent as IconInfoCircleSmall } from "src/common/svgs/IconInfoCircleSmall.svg";
+import { ReactComponent as IconInfoSpeechBubbleLarge } from "src/common/svgs/IconInfoSpeechBubbleLarge.svg";
+import { ReactComponent as IconLifeRingSmall } from "src/common/svgs/IconLifeRingSmall.svg";
+import { ReactComponent as IconLightBulbLarge } from "src/common/svgs/IconLightBulbLarge.svg";
+import { ReactComponent as IconLightBulbSmall } from "src/common/svgs/IconLightBulbSmall.svg";
+import { ReactComponent as IconLinesDashed3Solid1Small } from "src/common/svgs/IconLinesDashed3Solid1Small.svg";
+import { ReactComponent as IconLinesHorizontal3Large } from "src/common/svgs/IconLinesHorizontal3Large.svg";
+import { ReactComponent as IconLinesHorizontal3Small } from "src/common/svgs/IconLinesHorizontal3Small.svg";
+import { ReactComponent as IconLinkSmall } from "src/common/svgs/IconLinkSmall.svg";
+import { ReactComponent as IconListSmall } from "src/common/svgs/IconListSmall.svg";
+import { ReactComponent as IconLoadingLarge } from "src/common/svgs/IconLoadingLarge.svg";
+import { ReactComponent as IconLoadingSmall } from "src/common/svgs/IconLoadingSmall.svg";
+import { ReactComponent as IconLockCircleSmall } from "src/common/svgs/IconLockCircleSmall.svg";
+import { ReactComponent as IconLockLarge } from "src/common/svgs/IconLockLarge.svg";
+import { ReactComponent as IconLockSmall } from "src/common/svgs/IconLockSmall.svg";
+import { ReactComponent as IconMinusSmall } from "src/common/svgs/IconMinusSmall.svg";
+import { ReactComponent as IconOpenSmall } from "src/common/svgs/IconOpenSmall.svg";
+import { ReactComponent as IconPeopleLarge } from "src/common/svgs/IconPeopleLarge.svg";
+import { ReactComponent as IconPeopleSmall } from "src/common/svgs/IconPeopleSmall.svg";
+import { ReactComponent as IconPercentageSmall } from "src/common/svgs/IconPercentageSmall.svg";
+import { ReactComponent as IconPersonLarge } from "src/common/svgs/IconPersonLarge.svg";
+import { ReactComponent as IconPersonSmall } from "src/common/svgs/IconPersonSmall.svg";
+import { ReactComponent as IconPinLocationSmall } from "src/common/svgs/IconPinLocationSmall.svg";
+import { ReactComponent as IconPinSmall } from "src/common/svgs/IconPinSmall.svg";
+import { ReactComponent as IconPlayLarge } from "src/common/svgs/IconPlayLarge.svg";
+import { ReactComponent as IconPlusCircleSmall } from "src/common/svgs/IconPlusCircleSmall.svg";
+import { ReactComponent as IconPlusSmall } from "src/common/svgs/IconPlusSmall.svg";
+import { ReactComponent as IconProjectPrivateLarge } from "src/common/svgs/IconProjectPrivateLarge.svg";
+import { ReactComponent as IconProjectPublicLarge } from "src/common/svgs/IconProjectPublicLarge.svg";
+import { ReactComponent as IconPuzzlePieceSmall } from "src/common/svgs/IconPuzzlePieceSmall.svg";
+import { ReactComponent as IconQuestionMarkLarge } from "src/common/svgs/IconQuestionMarkLarge.svg";
+import { ReactComponent as IconQuoteLarge } from "src/common/svgs/IconQuoteLarge.svg";
+import { ReactComponent as IconReadLarge } from "src/common/svgs/IconReadLarge.svg";
+import { ReactComponent as IconRefreshLarge } from "src/common/svgs/IconRefreshLarge.svg";
+import { ReactComponent as IconRefreshSmall } from "src/common/svgs/IconRefreshSmall.svg";
+import { ReactComponent as IconReportLarge } from "src/common/svgs/IconReportLarge.svg";
+import { ReactComponent as IconRocketLarge } from "src/common/svgs/IconRocketLarge.svg";
+import { ReactComponent as IconSaveLarge } from "src/common/svgs/IconSaveLarge.svg";
+import { ReactComponent as IconSearchLarge } from "src/common/svgs/IconSearchLarge.svg";
+import { ReactComponent as IconSearchLinesHorizontal3Large } from "src/common/svgs/IconSearchLinesHorizontal3Large.svg";
+import { ReactComponent as IconSearchLinesHorizontal3Small } from "src/common/svgs/IconSearchLinesHorizontal3Small.svg";
+import { ReactComponent as IconSearchSmall } from "src/common/svgs/IconSearchSmall.svg";
+import { ReactComponent as IconShareLarge } from "src/common/svgs/IconShareLarge.svg";
+import { ReactComponent as IconSlidersHorizontalLarge } from "src/common/svgs/IconSlidersHorizontalLarge.svg";
+import { ReactComponent as IconSpeechBubblesLarge } from "src/common/svgs/IconSpeechBubblesLarge.svg";
+import { ReactComponent as IconSquareOnDashedSquareLarge } from "src/common/svgs/IconSquareOnDashedSquareLarge.svg";
+import { ReactComponent as IconStarburstSmall } from "src/common/svgs/IconStarburstSmall.svg";
+import { ReactComponent as IconStarLarge } from "src/common/svgs/IconStarLarge.svg";
+import { ReactComponent as IconTableSmall } from "src/common/svgs/IconTableSmall.svg";
+import { ReactComponent as IconTrashCanLarge } from "src/common/svgs/IconTrashCanLarge.svg";
+import { ReactComponent as IconTrashCanSmall } from "src/common/svgs/IconTrashCanSmall.svg";
+import { ReactComponent as IconTreeDendogramLarge } from "src/common/svgs/IconTreeDendogramLarge.svg";
+import { ReactComponent as IconTreeHorizontalLarge } from "src/common/svgs/IconTreeHorizontalLarge.svg";
+import { ReactComponent as IconTreeHorizontalPrivateLarge } from "src/common/svgs/IconTreeHorizontalPrivateLarge.svg";
+import { ReactComponent as IconTreeHorizontalPublicLarge } from "src/common/svgs/IconTreeHorizontalPublicLarge.svg";
+import { ReactComponent as IconTreeHorizontalSmall } from "src/common/svgs/IconTreeHorizontalSmall.svg";
+import { ReactComponent as IconTreeHorizontalTopRightFilledLarge } from "src/common/svgs/IconTreeHorizontalTopRightFilledLarge.svg";
+import { ReactComponent as IconTreeVerticalSmall } from "src/common/svgs/IconTreeVerticalSmall.svg";
+import { ReactComponent as IconTriangleDownSmall } from "src/common/svgs/IconTriangleDownSmall.svg";
+import { ReactComponent as IconTriangleLeftSmall } from "src/common/svgs/IconTriangleLeftSmall.svg";
+import { ReactComponent as IconTriangleRightSmall } from "src/common/svgs/IconTriangleRightSmall.svg";
+import { ReactComponent as IconTriangleUpSmall } from "src/common/svgs/IconTriangleUpSmall.svg";
+import { ReactComponent as IconUpdateLarge } from "src/common/svgs/IconUpdateLarge.svg";
+import { ReactComponent as IconUploadLarge } from "src/common/svgs/IconUploadLarge.svg";
+import { ReactComponent as IconUploadSmall } from "src/common/svgs/IconUploadSmall.svg";
+import { ReactComponent as IconVirusCircleSLarge } from "src/common/svgs/IconVirusCircleSLarge.svg";
+import { ReactComponent as IconVirusLarge } from "src/common/svgs/IconVirusLarge.svg";
+import { ReactComponent as IconWidgetLarge } from "src/common/svgs/IconWidgetLarge.svg";
+import { ReactComponent as IconXMarkCircleSmall } from "src/common/svgs/IconXMarkCircleSmall.svg";
+import { ReactComponent as IconXMarkLarge } from "src/common/svgs/IconXMarkLarge.svg";
+import { ReactComponent as IconXMarkSmall } from "src/common/svgs/IconXMarkSmall.svg";
 
 export interface IconNameToSizes {
-  bacteria: "xs" | "s" | "l" | "xl";
-  barChartHorizontal3: "xs" | "s";
-  barChartVertical3: "xs" | "s";
-  barChartVertical4: "xs" | "s";
-  book: "l" | "xl";
-  check: "xs" | "s";
-  checkCircle: "xs" | "s" | "l" | "xl";
-  chevronDown: "xs" | "s" | "l" | "xl";
-  chevronDown2: "xs" | "s";
-  chevronLeft2: "xs" | "s";
-  chevronLeft: "xs" | "s" | "l" | "xl";
-  chevronRight2: "xs" | "s";
-  chevronRight: "xs" | "s" | "l" | "xl";
-  chevronUp: "xs" | "s" | "l" | "xl";
-  chevronUp2: "xs" | "s";
-  circlesOverlap: "xs" | "s" | "l" | "xl";
-  code: "l" | "xl";
-  compass: "l" | "xl";
-  copy: "xs" | "s" | "l" | "xl";
-  cube: "l" | "xl";
-  dna: "l" | "xl";
-  document: "xs" | "s";
-  dotsHorizontal: "xs" | "s" | "l" | "xl";
-  download: "xs" | "s" | "l" | "xl";
-  edit: "xs" | "s" | "l" | "xl";
-  envelope: "xs" | "s";
-  exclamationMarkCircle: "xs" | "s" | "l" | "xl";
-  exclamationMarkSpeechBubble: "l" | "xl";
-  eyeClosed: "xs" | "s";
-  eyeOpen: "xs" | "s";
-  filter: "xs" | "s";
-  flagCheck: "xs" | "s";
-  flagOutline: "xs" | "s";
-  flagQuestionmark: "xs" | "s";
-  flagXmark: "xs" | "s";
-  flask: "l" | "xl";
-  flaskPrivate: "l" | "xl";
-  flaskPublic: "l" | "xl";
-  gear: "xs" | "s";
-  globe: "xs" | "s";
-  globeBasic: "l" | "xl";
-  grid: "l" | "xl";
-  gridPrivate: "l" | "xl";
-  gridPublic: "l" | "xl";
-  gridThreeDots: "l" | "xl";
-  house: "xs" | "s";
-  infoCircle: "xs" | "s" | "l" | "xl";
-  infoSpeechBubble: "l" | "xl";
-  lifeRing: "xs" | "s";
-  lightBulb: "xs" | "s" | "l" | "xl";
-  linesDashed3Solid1: "xs" | "s";
-  linesHorizontal: "xs" | "s" | "l" | "xl";
-  link: "xs" | "s";
-  list: "xs" | "s";
-  loading: "xs" | "s" | "l" | "xl";
-  lock: "xs" | "s" | "l" | "xl";
-  lockCircle: "xs" | "s";
-  minus: "xs" | "s";
-  open: "xs" | "s";
-  people: "xs" | "s" | "l" | "xl";
-  percentage: "xs" | "s";
-  person: "xs" | "s" | "l" | "xl";
-  pin: "xs" | "s";
-  pinLocation: "xs" | "s";
-  play: "l" | "xl";
-  plus: "xs" | "s";
-  plusCircle: "xs" | "s";
-  projectPrivate: "l" | "xl";
-  projectPublic: "l" | "xl";
-  puzzlePiece: "xs" | "s";
-  questionMark: "l" | "xl";
-  quote: "l" | "xl";
-  read: "l" | "xl";
-  refresh: "xs" | "s" | "l" | "xl";
-  rocket: "l" | "xl";
-  save: "l" | "xl";
-  search: "xs" | "s" | "l" | "xl";
-  searchLinesHorizontal: "xs" | "s" | "l" | "xl";
-  share: "l" | "xl";
-  slidersHorizontal: "l" | "xl";
-  speechBubbles: "l" | "xl";
-  squareOnDashedSquare: "l" | "xl";
-  starburst: "xs" | "s";
-  star: "l" | "xl";
-  table: "xs" | "s";
-  trashCan: "xs" | "s" | "l" | "xl";
-  treeDendogram: "l" | "xl";
-  treeHorizontal: "xs" | "s" | "l" | "xl";
-  treeHorizontalPrivate: "l" | "xl";
-  treeHorizontalPublic: "l" | "xl";
-  treeHorizontalTopRightFilled: "l" | "xl";
-  treeVertical: "xs" | "s";
-  triangleDown: "xs" | "s";
-  triangleLeft: "xs" | "s";
-  triangleRight: "xs" | "s";
-  triangleUp: "xs" | "s";
-  updated: "l" | "xl";
-  upload: "l" | "xl";
-  virus: "l" | "xl";
-  virusCircleS: "l" | "xl";
-  widget: "l" | "xl";
-  xMark: "xs" | "s" | "l" | "xl";
-  xMarkCircle: "xs" | "s";
+  Bacteria: "xs" | "s" | "l" | "xl";
+  BarChartHorizontal3: "xs" | "s";
+  BarChartVertical3: "xs" | "s";
+  BarChartVertical4: "xs" | "s";
+  Book: "l" | "xl";
+  Check: "xs" | "s";
+  CheckCircle: "xs" | "s" | "l" | "xl";
+  ChevronDown: "xs" | "s" | "l" | "xl";
+  ChevronDown2: "xs" | "s";
+  ChevronLeft2: "xs" | "s";
+  ChevronLeft: "xs" | "s" | "l" | "xl";
+  ChevronRight2: "xs" | "s";
+  ChevronRight: "xs" | "s" | "l" | "xl";
+  ChevronUp: "xs" | "s" | "l" | "xl";
+  ChevronUp2: "xs" | "s";
+  CirclesOverlap2: "xs" | "s" | "l" | "xl";
+  Code: "l" | "xl";
+  Compass: "l" | "xl";
+  Copy: "xs" | "s" | "l" | "xl";
+  Cube: "xs" | "s" | "l" | "xl";
+  DNA: "l" | "xl";
+  Document: "xs" | "s";
+  DotsHorizontal: "xs" | "s" | "l" | "xl";
+  Download: "xs" | "s" | "l" | "xl";
+  Edit: "xs" | "s" | "l" | "xl";
+  Envelope: "xs" | "s";
+  ExclamationMarkCircle: "xs" | "s" | "l" | "xl";
+  ExclamationMarkSpeechBubble: "l" | "xl";
+  EyeClosed: "xs" | "s";
+  EyeOpen: "xs" | "s";
+  Filter: "xs" | "s";
+  FlagCheck: "xs" | "s";
+  FlagOutline: "xs" | "s";
+  FlagQuestionMark: "xs" | "s";
+  FlagXMark: "xs" | "s";
+  Flask: "l" | "xl";
+  FlaskPrivate: "l" | "xl";
+  FlaskPublic: "l" | "xl";
+  Gear: "xs" | "s";
+  Globe: "xs" | "s";
+  GlobeBasic: "l" | "xl";
+  Grid: "l" | "xl";
+  GridDots3: "l" | "xl";
+  GridPrivate: "l" | "xl";
+  GridPublic: "l" | "xl";
+  House: "xs" | "s";
+  InfoCircle: "xs" | "s" | "l" | "xl";
+  InfoSpeechBubble: "l" | "xl";
+  LifeRing: "xs" | "s";
+  LightBulb: "xs" | "s" | "l" | "xl";
+  LinesDashed3Solid1: "xs" | "s";
+  LinesHorizontal3: "xs" | "s" | "l" | "xl";
+  Link: "xs" | "s";
+  List: "xs" | "s";
+  Loading: "xs" | "s" | "l" | "xl";
+  Lock: "xs" | "s" | "l" | "xl";
+  LockCircle: "xs" | "s";
+  Minus: "xs" | "s";
+  Open: "xs" | "s";
+  People: "xs" | "s" | "l" | "xl";
+  Percentage: "xs" | "s";
+  Person: "xs" | "s" | "l" | "xl";
+  Pin: "xs" | "s";
+  PinLocation: "xs" | "s";
+  Play: "l" | "xl";
+  Plus: "xs" | "s";
+  PlusCircle: "xs" | "s";
+  ProjectPrivate: "l" | "xl";
+  ProjectPublic: "l" | "xl";
+  PuzzlePiece: "xs" | "s";
+  QuestionMark: "l" | "xl";
+  Quote: "l" | "xl";
+  Read: "l" | "xl";
+  Refresh: "xs" | "s" | "l" | "xl";
+  Report: "l" | "xl";
+  Rocket: "l" | "xl";
+  Save: "l" | "xl";
+  Search: "xs" | "s" | "l" | "xl";
+  SearchLinesHorizontal3: "xs" | "s" | "l" | "xl";
+  Share: "l" | "xl";
+  SlidersHorizontal: "l" | "xl";
+  SpeechBubbles: "l" | "xl";
+  SquareOnDashedSquare: "l" | "xl";
+  Starburst: "xs" | "s";
+  Star: "l" | "xl";
+  Table: "xs" | "s";
+  TrashCan: "xs" | "s" | "l" | "xl";
+  TreeDendogram: "l" | "xl";
+  TreeHorizontal: "xs" | "s" | "l" | "xl";
+  TreeHorizontalPrivate: "l" | "xl";
+  TreeHorizontalPublic: "l" | "xl";
+  TreeHorizontalTopRightFilled: "l" | "xl";
+  TreeVertical: "xs" | "s";
+  TriangleDown: "xs" | "s";
+  TriangleLeft: "xs" | "s";
+  TriangleRight: "xs" | "s";
+  TriangleUp: "xs" | "s";
+  Update: "l" | "xl";
+  Upload: "l" | "xl";
+  Virus: "l" | "xl";
+  VirusCircleS: "l" | "xl";
+  Widget: "l" | "xl";
+  XMark: "xs" | "s" | "l" | "xl";
+  XMarkCircle: "xs" | "s";
 }
 
 type Props = Record<
@@ -244,415 +247,419 @@ type Props = Record<
 >;
 
 export const iconMap: Props = {
-  bacteria: {
+  Bacteria: {
     largeIcon: IconBacteriaLarge,
     smallIcon: IconBacteriaSmall,
   },
-  barChartHorizontal3: {
+  BarChartHorizontal3: {
     largeIcon: null,
     smallIcon: IconBarChartHorizontal3Small,
   },
-  barChartVertical3: {
+  BarChartVertical3: {
     largeIcon: null,
     smallIcon: IconBarChartVertical3Small,
   },
-  barChartVertical4: {
+  BarChartVertical4: {
     largeIcon: null,
     smallIcon: IconBarChartVertical4Small,
   },
-  book: {
+  Book: {
     largeIcon: IconBookLarge,
     smallIcon: null,
   },
-  check: {
+  Check: {
     largeIcon: null,
     smallIcon: IconCheckSmall,
   },
-  checkCircle: {
+  CheckCircle: {
     largeIcon: IconCheckCircleLarge,
     smallIcon: IconCheckCircleSmall,
   },
-  chevronDown: {
+  ChevronDown: {
     largeIcon: IconChevronDownLarge,
     smallIcon: IconChevronDownSmall,
   },
-  chevronDown2: {
+  ChevronDown2: {
     largeIcon: null,
     smallIcon: IconChevronDown2Small,
   },
-  chevronLeft: {
+  ChevronLeft: {
     largeIcon: IconChevronLeftLarge,
     smallIcon: IconChevronLeftSmall,
   },
-  chevronLeft2: {
+  ChevronLeft2: {
     largeIcon: null,
     smallIcon: IconChevronLeft2Small,
   },
-  chevronRight: {
+  ChevronRight: {
     largeIcon: IconChevronRightLarge,
     smallIcon: IconChevronRightSmall,
   },
-  chevronRight2: {
+  ChevronRight2: {
     largeIcon: null,
     smallIcon: IconChevronRight2Small,
   },
-  chevronUp: {
+  ChevronUp: {
     largeIcon: IconChevronUpLarge,
     smallIcon: IconChevronUpSmall,
   },
-  chevronUp2: {
+  ChevronUp2: {
     largeIcon: null,
     smallIcon: IconChevronUp2Small,
   },
-  circlesOverlap: {
-    largeIcon: IconCirclesOverlapLarge,
-    smallIcon: IconCirclesOverlapSmall,
+  CirclesOverlap2: {
+    largeIcon: IconCirclesOverlap2Large,
+    smallIcon: IconCirclesOverlap2Small,
   },
-  code: {
+  Code: {
     largeIcon: IconCodeLarge,
     smallIcon: null,
   },
-  compass: {
+  Compass: {
     largeIcon: IconCompassLarge,
     smallIcon: null,
   },
-  copy: {
+  Copy: {
     largeIcon: IconCopyLarge,
     smallIcon: IconCopySmall,
   },
-  cube: {
+  Cube: {
     largeIcon: IconCubeLarge,
-    smallIcon: null,
+    smallIcon: IconCubeSmall,
   },
-  dna: {
-    largeIcon: IconDnaLarge,
+  DNA: {
+    largeIcon: IconDNALarge,
     smallIcon: null,
   },
-  document: {
+  Document: {
     largeIcon: null,
     smallIcon: IconDocumentSmall,
   },
-  dotsHorizontal: {
+  DotsHorizontal: {
     largeIcon: IconDotsHorizontal3Large,
     smallIcon: IconDotsHorizontal3Small,
   },
-  download: {
+  Download: {
     largeIcon: IconDownloadLarge,
     smallIcon: IconDownloadSmall,
   },
-  edit: {
+  Edit: {
     largeIcon: IconEditLarge,
     smallIcon: IconEditSmall,
   },
-  envelope: {
+  Envelope: {
     largeIcon: null,
     smallIcon: IconEnvelopeSmall,
   },
-  exclamationMarkCircle: {
+  ExclamationMarkCircle: {
     largeIcon: IconExclamationMarkCircleLarge,
     smallIcon: IconExclamationMarkCircleSmall,
   },
-  exclamationMarkSpeechBubble: {
+  ExclamationMarkSpeechBubble: {
     largeIcon: IconExclamationMarkSpeechBubbleLarge,
     smallIcon: null,
   },
-  eyeClosed: {
+  EyeClosed: {
     largeIcon: null,
     smallIcon: IconEyeClosedSmall,
   },
-  eyeOpen: {
+  EyeOpen: {
     largeIcon: null,
     smallIcon: IconEyeOpenSmall,
   },
-  filter: {
+  Filter: {
     largeIcon: null,
     smallIcon: IconFilterSmall,
   },
-  flagCheck: {
+  FlagCheck: {
     largeIcon: null,
     smallIcon: IconFlagCheckSmall,
   },
-  flagOutline: {
+  FlagOutline: {
     largeIcon: null,
     smallIcon: IconFlagOutlineSmall,
   },
-  flagQuestionmark: {
+  FlagQuestionMark: {
     largeIcon: null,
-    smallIcon: IconFlagQuestionmarkSmall,
+    smallIcon: IconFlagQuestionMarkSmall,
   },
-  flagXmark: {
+  FlagXMark: {
     largeIcon: null,
-    smallIcon: IconFlagXmarkSmall,
+    smallIcon: IconFlagXMarkSmall,
   },
-  flask: {
+  Flask: {
     largeIcon: IconFlaskLarge,
     smallIcon: null,
   },
-  flaskPrivate: {
+  FlaskPrivate: {
     largeIcon: IconFlaskPrivateLarge,
     smallIcon: null,
   },
-  flaskPublic: {
+  FlaskPublic: {
     largeIcon: IconFlaskPublicLarge,
     smallIcon: null,
   },
-  gear: {
+  Gear: {
     largeIcon: null,
     smallIcon: IconGearSmall,
   },
-  globe: {
+  Globe: {
     largeIcon: null,
     smallIcon: IconGlobeSmall,
   },
-  globeBasic: {
+  GlobeBasic: {
     largeIcon: IconGlobeBasicLarge,
     smallIcon: null,
   },
-  grid: {
+  Grid: {
     largeIcon: IconGridLarge,
     smallIcon: null,
   },
-  gridPrivate: {
-    largeIcon: IconGridPrivateLarge,
+  GridDots3: {
+    largeIcon: IconGridDots3Large,
     smallIcon: null,
   },
-  gridPublic: {
-    largeIcon: IconGridPublicLarge,
+  GridPrivate: {
+    largeIcon: IconGridPrivateLarge,
     smallIcon: null,
   },
-  gridThreeDots: {
-    largeIcon: IconGridThreeDotsLarge,
+  GridPublic: {
+    largeIcon: IconGridPublicLarge,
     smallIcon: null,
   },
-  house: {
+  House: {
     largeIcon: null,
     smallIcon: IconHouseSmall,
   },
-  infoCircle: {
+  InfoCircle: {
     largeIcon: IconInfoCircleLarge,
     smallIcon: IconInfoCircleSmall,
   },
-  infoSpeechBubble: {
+  InfoSpeechBubble: {
     largeIcon: IconInfoSpeechBubbleLarge,
     smallIcon: null,
   },
-  lifeRing: {
+  LifeRing: {
     largeIcon: null,
     smallIcon: IconLifeRingSmall,
   },
-  lightBulb: {
+  LightBulb: {
     largeIcon: IconLightBulbLarge,
     smallIcon: IconLightBulbSmall,
   },
-  linesDashed3Solid1: {
+  LinesDashed3Solid1: {
     largeIcon: null,
     smallIcon: IconLinesDashed3Solid1Small,
   },
-  linesHorizontal: {
-    largeIcon: IconLinesHorizontalLarge,
-    smallIcon: IconLinesHorizontalSmall,
+  LinesHorizontal3: {
+    largeIcon: IconLinesHorizontal3Large,
+    smallIcon: IconLinesHorizontal3Small,
   },
-  link: {
+  Link: {
     largeIcon: null,
     smallIcon: IconLinkSmall,
   },
-  list: {
+  List: {
     largeIcon: null,
     smallIcon: IconListSmall,
   },
-  loading: {
+  Loading: {
     largeIcon: IconLoadingLarge,
     smallIcon: IconLoadingSmall,
   },
-  lock: {
+  Lock: {
     largeIcon: IconLockLarge,
     smallIcon: IconLockSmall,
   },
-  lockCircle: {
+  LockCircle: {
     largeIcon: null,
     smallIcon: IconLockCircleSmall,
   },
-  minus: {
+  Minus: {
     largeIcon: null,
     smallIcon: IconMinusSmall,
   },
-  open: {
+  Open: {
     largeIcon: null,
     smallIcon: IconOpenSmall,
   },
-  people: {
+  People: {
     largeIcon: IconPeopleLarge,
     smallIcon: IconPeopleSmall,
   },
-  percentage: {
+  Percentage: {
     largeIcon: null,
     smallIcon: IconPercentageSmall,
   },
-  person: {
+  Person: {
     largeIcon: IconPersonLarge,
     smallIcon: IconPersonSmall,
   },
-  pin: {
+  Pin: {
     largeIcon: null,
     smallIcon: IconPinSmall,
   },
-  pinLocation: {
+  PinLocation: {
     largeIcon: null,
     smallIcon: IconPinLocationSmall,
   },
-  play: {
+  Play: {
     largeIcon: IconPlayLarge,
     smallIcon: null,
   },
-  plus: {
+  Plus: {
     largeIcon: null,
     smallIcon: IconPlusSmall,
   },
-  plusCircle: {
+  PlusCircle: {
     largeIcon: null,
     smallIcon: IconPlusCircleSmall,
   },
-  projectPrivate: {
+  ProjectPrivate: {
     largeIcon: IconProjectPrivateLarge,
     smallIcon: null,
   },
-  projectPublic: {
+  ProjectPublic: {
     largeIcon: IconProjectPublicLarge,
     smallIcon: null,
   },
-  puzzlePiece: {
+  PuzzlePiece: {
     largeIcon: null,
     smallIcon: IconPuzzlePieceSmall,
   },
-  questionMark: {
+  QuestionMark: {
     largeIcon: IconQuestionMarkLarge,
     smallIcon: null,
   },
-  quote: {
+  Quote: {
     largeIcon: IconQuoteLarge,
     smallIcon: null,
   },
-  read: {
+  Read: {
     largeIcon: IconReadLarge,
     smallIcon: null,
   },
-  refresh: {
+  Refresh: {
     largeIcon: IconRefreshLarge,
     smallIcon: IconRefreshSmall,
   },
-  rocket: {
+  Report: {
+    largeIcon: IconReportLarge,
+    smallIcon: null,
+  },
+  Rocket: {
     largeIcon: IconRocketLarge,
     smallIcon: null,
   },
-  save: {
+  Save: {
     largeIcon: IconSaveLarge,
     smallIcon: null,
   },
-  search: {
+  Search: {
     largeIcon: IconSearchLarge,
     smallIcon: IconSearchSmall,
   },
-  searchLinesHorizontal: {
-    largeIcon: IconSearchLinesHorizontalLarge,
-    smallIcon: IconSearchLinesHorizontalSmall,
+  SearchLinesHorizontal3: {
+    largeIcon: IconSearchLinesHorizontal3Large,
+    smallIcon: IconSearchLinesHorizontal3Small,
   },
-  share: {
+  Share: {
     largeIcon: IconShareLarge,
     smallIcon: null,
   },
-  slidersHorizontal: {
+  SlidersHorizontal: {
     largeIcon: IconSlidersHorizontalLarge,
     smallIcon: null,
   },
-  speechBubbles: {
+  SpeechBubbles: {
     largeIcon: IconSpeechBubblesLarge,
     smallIcon: null,
   },
-  squareOnDashedSquare: {
+  SquareOnDashedSquare: {
     largeIcon: IconSquareOnDashedSquareLarge,
     smallIcon: null,
   },
-  star: {
+  Star: {
     largeIcon: IconStarLarge,
     smallIcon: null,
   },
-  starburst: {
+  Starburst: {
     largeIcon: null,
     smallIcon: IconStarburstSmall,
   },
-  table: {
+  Table: {
     largeIcon: null,
     smallIcon: IconTableSmall,
   },
-  trashCan: {
+  TrashCan: {
     largeIcon: IconTrashCanLarge,
     smallIcon: IconTrashCanSmall,
   },
-  treeDendogram: {
+  TreeDendogram: {
     largeIcon: IconTreeDendogramLarge,
     smallIcon: null,
   },
-  treeHorizontal: {
+  TreeHorizontal: {
     largeIcon: IconTreeHorizontalLarge,
     smallIcon: IconTreeHorizontalSmall,
   },
-  treeHorizontalPrivate: {
+  TreeHorizontalPrivate: {
     largeIcon: IconTreeHorizontalPrivateLarge,
     smallIcon: null,
   },
-  treeHorizontalPublic: {
+  TreeHorizontalPublic: {
     largeIcon: IconTreeHorizontalPublicLarge,
     smallIcon: null,
   },
-  treeHorizontalTopRightFilled: {
+  TreeHorizontalTopRightFilled: {
     largeIcon: IconTreeHorizontalTopRightFilledLarge,
     smallIcon: null,
   },
-  treeVertical: {
+  TreeVertical: {
     largeIcon: null,
     smallIcon: IconTreeVerticalSmall,
   },
-  triangleDown: {
+  TriangleDown: {
     largeIcon: null,
     smallIcon: IconTriangleDownSmall,
   },
-  triangleLeft: {
+  TriangleLeft: {
     largeIcon: null,
     smallIcon: IconTriangleLeftSmall,
   },
-  triangleRight: {
+  TriangleRight: {
     largeIcon: null,
     smallIcon: IconTriangleRightSmall,
   },
-  triangleUp: {
+  TriangleUp: {
     largeIcon: null,
     smallIcon: IconTriangleUpSmall,
   },
-  updated: {
-    largeIcon: IconUpdatedLarge,
+  Update: {
+    largeIcon: IconUpdateLarge,
     smallIcon: null,
   },
-  upload: {
+  Upload: {
     largeIcon: IconUploadLarge,
     smallIcon: IconUploadSmall,
   },
-  virus: {
+  Virus: {
     largeIcon: IconVirusLarge,
     smallIcon: null,
   },
-  virusCircleS: {
+  VirusCircleS: {
     largeIcon: IconVirusCircleSLarge,
     smallIcon: null,
   },
-  widget: {
+  Widget: {
     largeIcon: IconWidgetLarge,
     smallIcon: null,
   },
-  xMark: {
+  XMark: {
     largeIcon: IconXMarkLarge,
     smallIcon: IconXMarkSmall,
   },
-  xMarkCircle: {
+  XMarkCircle: {
     largeIcon: null,
     smallIcon: IconXMarkCircleSmall,
   },
diff --git a/packages/components/src/core/Icon/style.ts b/packages/components/src/core/Icon/style.ts
index 3ef10d2aa..87618e0b2 100644
--- a/packages/components/src/core/Icon/style.ts
+++ b/packages/components/src/core/Icon/style.ts
@@ -2,7 +2,12 @@ import { css, SerializedStyles } from "@emotion/react";
 import { SvgIcon, SvgIconProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { FC } from "react";
-import { CommonThemeProps, getColors, getIconSizes } from "../styles";
+import {
+  CommonThemeProps,
+  getColors,
+  getIconSizes,
+  getSemanticComponentColors,
+} from "src/core/styles";
 import { IconNameToSizes } from "./map";
 
 export interface IconExtraProps<IconName extends keyof IconNameToSizes>
@@ -14,14 +19,12 @@ export interface IconExtraProps<IconName extends keyof IconNameToSizes>
 }
 
 export type SdsIconColorType =
-  | "beta"
+  | "blue"
   | "gray"
-  | "primary"
-  | "secondary"
-  | "info"
-  | "success"
-  | "warning"
-  | "error";
+  | "green"
+  | "purple"
+  | "red"
+  | "yellow";
 
 interface SdsIconWithColor {
   iconColor?: SdsIconColorType;
@@ -58,33 +61,36 @@ function buttonStyle(): SerializedStyles {
 function staticStyle<IconName extends keyof IconNameToSizes>(
   props: StyledSvgIconProps<IconName>
 ): SerializedStyles {
-  const { iconColor = "primary", shade = 400 } = props;
+  const { iconColor = "blue", shade = 400 } = props;
+
   const colors = getColors(props);
 
   return css`
-    color: ${colors?.[iconColor][shade]};
+    color: ${colors?.[iconColor]?.[shade]};
   `;
 }
 
 function interactive<IconName extends keyof IconNameToSizes>(
   props: StyledSvgIconProps<IconName>
 ): SerializedStyles {
+  const { iconColor = "blue", shade = 400 } = props;
+
   const colors = getColors(props);
-  const { iconColor = "primary", shade = 400 } = props;
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
-    color: ${colors?.gray[500]};
+    color: ${semanticComponentColors?.base?.icon};
 
     &:hover {
-      color: ${colors?.gray[600]};
+      color: ${semanticComponentColors?.base?.iconHover};
     }
 
     &:active {
-      color: ${colors?.[iconColor][shade]};
+      color: ${colors?.[iconColor]?.[shade]};
     }
 
     &:disabled {
-      color: ${colors?.gray[300]};
+      color: ${semanticComponentColors?.base?.iconDisabled};
     }
   `;
 }
diff --git a/packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 008afa5a6..000000000
--- a/packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<InputCheckbox /> Default story renders snapshot 1`] = `
-<div>
-  <label
-    caption="Caption"
-    class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-n82mu-MuiFormControlLabel-root"
-  >
-    <span
-      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium css-pdae7e-MuiButtonBase-root-MuiCheckbox-root"
-    >
-      <input
-        class="PrivateSwitchBase-input css-1m9pwf3"
-        data-indeterminate="false"
-        type="checkbox"
-      />
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-file-name="IconCheckboxUnchecked"
-        data-testid="IconCheckboxUnchecked"
-        fillcontrast="white"
-        focusable="false"
-        viewBox="0 0 16 16"
-      />
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </span>
-    <span
-      class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
-    >
-      Label
-    </span>
-  </label>
-</div>
-`;
diff --git a/packages/components/src/core/InputCheckbox/__storybook__/constants.ts b/packages/components/src/core/InputCheckbox/__storybook__/constants.ts
new file mode 100644
index 000000000..942773698
--- /dev/null
+++ b/packages/components/src/core/InputCheckbox/__storybook__/constants.ts
@@ -0,0 +1,24 @@
+export const INPUT_CHECKBOX_EXCLUDED_CONTROLS = [
+  "caption",
+  "label",
+  "stage",
+  "disabled",
+  "intent",
+];
+
+export const INPUT_CHECKBOX_TEST_ID = "test-story";
+
+export const INPUT_CHECKBOX_LIVE_PREVIEW_STYLES = {
+  display: "grid",
+  gridColumnGap: "24px",
+  gridRowGap: "50px",
+  gridTemplateColumns: "repeat(4, 180px)",
+};
+
+export const INPUT_CHECKBOX_TEST_STYLES = {
+  display: "grid",
+  gridColumnGap: "10px",
+  gridRowGap: "0px",
+  gridTemplateColumns: "repeat(2, 100px)",
+  gridTemplateRows: "1fr",
+};
diff --git a/packages/components/src/core/InputCheckbox/__storybook__/index.stories.tsx b/packages/components/src/core/InputCheckbox/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..ab687d36e
--- /dev/null
+++ b/packages/components/src/core/InputCheckbox/__storybook__/index.stories.tsx
@@ -0,0 +1,80 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { InputCheckbox } from "./stories/default";
+import {
+  INPUT_CHECKBOX_EXCLUDED_CONTROLS,
+  INPUT_CHECKBOX_TEST_ID,
+} from "./constants";
+import { TestDemo } from "./stories/test";
+import { LivePreviewDemo } from "./stories/livePreview";
+
+export default {
+  argTypes: {
+    caption: {
+      control: { type: "text" },
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    intent: {
+      control: { type: "radio" },
+      options: ["default", "error", "warning"],
+    },
+    label: {
+      control: { type: "text" },
+    },
+    stage: {
+      control: {
+        type: "radio",
+      },
+      options: ["checked", "unchecked", "indeterminate"],
+    },
+  },
+  component: InputCheckbox,
+  parameters: {
+    badges: [BADGE.BETA],
+  },
+  title: "Components/Inputs/InputCheckbox [beta]",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    caption: "Caption",
+    intent: "default",
+    label: "Label",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    axe: {
+      disabledRules: ["label"],
+    },
+    controls: { exclude: INPUT_CHECKBOX_EXCLUDED_CONTROLS },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    id: INPUT_CHECKBOX_TEST_ID,
+  },
+  parameters: {
+    controls: {
+      exclude: INPUT_CHECKBOX_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} data-testid="input-checkbox" />,
+};
diff --git a/packages/components/src/core/InputCheckbox/__storybook__/stories/default.tsx b/packages/components/src/core/InputCheckbox/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..bb63119f2
--- /dev/null
+++ b/packages/components/src/core/InputCheckbox/__storybook__/stories/default.tsx
@@ -0,0 +1,19 @@
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import RawInputCheckbox from "src/core/InputCheckbox";
+
+export const InputCheckbox = (props: Args): JSX.Element => {
+  const { disabled } = props;
+  const [checked, setChecked] = useState(true);
+
+  const handleChange = () => setChecked((prevState) => !prevState);
+
+  return (
+    <RawInputCheckbox
+      disabled={disabled}
+      onChange={handleChange}
+      stage={checked ? "unchecked" : "checked"}
+      {...props}
+    />
+  );
+};
diff --git a/packages/components/src/core/InputCheckbox/__storybook__/stories/livePreview.tsx b/packages/components/src/core/InputCheckbox/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..4cb19e54c
--- /dev/null
+++ b/packages/components/src/core/InputCheckbox/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,121 @@
+import { Args } from "@storybook/react";
+import { INPUT_CHECKBOX_LIVE_PREVIEW_STYLES } from "../constants";
+import { FormControl, FormGroup, FormLabel } from "@mui/material";
+import RawInputCheckbox from "src/core/InputCheckbox";
+import { useState } from "react";
+
+const CustomFormLabel = (props: Args): JSX.Element => {
+  const { children } = props;
+
+  return <FormLabel sx={{ mb: "12px" }}>{children}</FormLabel>;
+};
+
+const IndeterminateDemo = (): JSX.Element => {
+  const [checked, setChecked] = useState([true, false]);
+
+  const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([event.target.checked, event.target.checked]);
+  };
+
+  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([event.target.checked, checked[1]]);
+  };
+
+  const handleChange3 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([checked[0], event.target.checked]);
+  };
+
+  const children = (
+    <FormControl sx={{ ml: 5 }}>
+      <FormGroup aria-labelledby="indeterminate-checkboxes-children">
+        <RawInputCheckbox
+          label="Child 1"
+          checkboxProps={{
+            checked: checked[0],
+            onChange: handleChange2,
+          }}
+        />
+        <RawInputCheckbox
+          label="Child 2"
+          caption="Caption"
+          checkboxProps={{
+            checked: checked[1],
+            onChange: handleChange3,
+          }}
+        />
+      </FormGroup>
+    </FormControl>
+  );
+
+  return (
+    <FormControl>
+      <CustomFormLabel>Indeterminate Checkboxes</CustomFormLabel>
+      <FormGroup aria-labelledby="indeterminate-checkboxes">
+        <RawInputCheckbox
+          label="Parent"
+          checkboxProps={{
+            checked: checked[0] && checked[1],
+            indeterminate: checked[0] !== checked[1],
+            onChange: handleChange1,
+          }}
+        />
+        {children}
+      </FormGroup>
+    </FormControl>
+  );
+};
+
+export const LivePreviewDemo = (): JSX.Element => {
+  return (
+    <div style={INPUT_CHECKBOX_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      <FormControl>
+        <CustomFormLabel>No Labels or Captions</CustomFormLabel>
+        <FormGroup>
+          <RawInputCheckbox value="1" />
+          <RawInputCheckbox value="2" intent="warning" />
+          <RawInputCheckbox value="3" intent="error" />
+          <RawInputCheckbox value="4" disabled />
+        </FormGroup>
+      </FormControl>
+
+      <FormControl>
+        <CustomFormLabel>With Labels</CustomFormLabel>
+        <FormGroup aria-labelledby="checkbox-group-with-labels">
+          <RawInputCheckbox label="Default" value="1" />
+          <RawInputCheckbox label="Warning" value="2" intent="warning" />
+          <RawInputCheckbox label="Error" value="3" intent="error" />
+          <RawInputCheckbox label="Disabled" value="4" disabled />
+        </FormGroup>
+      </FormControl>
+
+      <FormControl>
+        <CustomFormLabel>With Labels and Captions</CustomFormLabel>
+        <FormGroup aria-labelledby="checkbox-group-with-labels-and-captions">
+          <RawInputCheckbox label="Default" caption="Caption I" value="1" />
+          <RawInputCheckbox
+            label="Warning"
+            caption="Caption II"
+            value="2"
+            intent="warning"
+          />
+          <RawInputCheckbox
+            label="Error"
+            caption="Caption III"
+            value="3"
+            intent="error"
+          />
+          <RawInputCheckbox
+            disabled
+            label="Disabled"
+            caption="Caption IV"
+            value="4"
+          />
+        </FormGroup>
+      </FormControl>
+
+      <div>
+        <IndeterminateDemo />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputCheckbox/__storybook__/stories/test.tsx b/packages/components/src/core/InputCheckbox/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..343a576a9
--- /dev/null
+++ b/packages/components/src/core/InputCheckbox/__storybook__/stories/test.tsx
@@ -0,0 +1,37 @@
+import { Args } from "@storybook/react";
+import { INPUT_CHECKBOX_TEST_STYLES } from "../constants";
+import { InputCheckbox } from "./default";
+import RawInputCheckbox from "src/core/InputCheckbox";
+
+const CheckboxLabelDemo = (props: Args): JSX.Element => {
+  const { caption, label, disabled } = props;
+  return (
+    <div>
+      <RawInputCheckbox
+        caption={caption}
+        label={label}
+        disabled={disabled}
+        value="Demo"
+        {...props}
+      />
+    </div>
+  );
+};
+
+export const TestDemo = (): JSX.Element => {
+  return (
+    <div style={INPUT_CHECKBOX_TEST_STYLES as React.CSSProperties}>
+      <div>
+        <CheckboxLabelDemo
+          caption="Caption"
+          label="Label A"
+          disabled={false}
+          data-testid="labelCheckbox"
+        />
+      </div>
+      <div>
+        <InputCheckbox data-testid="checkbox" label="Label" />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputCheckbox/InputCheckbox.namespace-test.tsx b/packages/components/src/core/InputCheckbox/__tests__/InputCheckbox.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/InputCheckbox/InputCheckbox.namespace-test.tsx
rename to packages/components/src/core/InputCheckbox/__tests__/InputCheckbox.namespace-test.tsx
diff --git a/packages/components/src/core/InputCheckbox/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputCheckbox/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..69828ce69
--- /dev/null
+++ b/packages/components/src/core/InputCheckbox/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<InputCheckbox /> Default story renders snapshot 1`] = `
+<label
+  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-c4vnp1-MuiFormControlLabel-root"
+>
+  <span
+    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium css-4qmxpf-MuiButtonBase-root-MuiCheckbox-root"
+    intent="default"
+  >
+    <input
+      class="PrivateSwitchBase-input css-1m9pwf3"
+      data-indeterminate="false"
+      type="checkbox"
+    />
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+      data-file-name="IconCheckboxUnchecked"
+      data-testid="IconCheckboxUnchecked"
+      fillcontrast="white"
+      focusable="false"
+      viewBox="0 0 16 16"
+    />
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </span>
+  <span
+    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
+  >
+    <span
+      class="css-1ddu512"
+    >
+      <span
+        class="css-1dr5e88"
+      >
+        Label
+      </span>
+      <span
+        class="css-1mg4zid"
+      >
+        Caption
+      </span>
+    </span>
+  </span>
+</label>
+`;
diff --git a/packages/components/src/core/InputCheckbox/index.test.tsx b/packages/components/src/core/InputCheckbox/__tests__/index.test.tsx
similarity index 94%
rename from packages/components/src/core/InputCheckbox/index.test.tsx
rename to packages/components/src/core/InputCheckbox/__tests__/index.test.tsx
index 9c9d6d786..a99582924 100644
--- a/packages/components/src/core/InputCheckbox/index.test.tsx
+++ b/packages/components/src/core/InputCheckbox/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/InputCheckbox/index.stories.tsx b/packages/components/src/core/InputCheckbox/index.stories.tsx
deleted file mode 100644
index 7f5c3f7a6..000000000
--- a/packages/components/src/core/InputCheckbox/index.stories.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { Box } from "@mui/material";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import RawInputCheckbox from "./index";
-
-const testId = "test-story";
-
-const InputCheckbox = (props: Args): JSX.Element => {
-  const { disabled } = props;
-  const [checked, setChecked] = React.useState(true);
-
-  const handleChange = () => setChecked((prevState) => !prevState);
-
-  return (
-    <div>
-      <RawInputCheckbox
-        disabled={disabled}
-        onChange={handleChange}
-        stage={checked ? "unchecked" : "checked"}
-        {...props}
-      />
-    </div>
-  );
-};
-
-export default {
-  argTypes: {
-    caption: {
-      control: { type: "text" },
-    },
-    label: {
-      control: { type: "text" },
-    },
-    stage: {
-      control: {
-        type: "radio",
-      },
-      options: ["checked", "unchecked", "indeterminate"],
-    },
-  },
-  component: InputCheckbox,
-  title: "Inputs/InputCheckbox",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    caption: "Caption",
-    label: "Label",
-  },
-};
-
-const CheckboxLabelDemo = (props: Args): JSX.Element => {
-  const { caption, label, disabled } = props;
-  return (
-    <div>
-      <RawInputCheckbox
-        caption={caption}
-        label={label}
-        disabled={disabled}
-        value="Demo"
-        {...props}
-      />
-    </div>
-  );
-};
-
-const IndeterminateDemo = (): JSX.Element => {
-  const [checked, setChecked] = React.useState([true, false]);
-
-  const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked([event.target.checked, event.target.checked]);
-  };
-
-  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked([event.target.checked, checked[1]]);
-  };
-
-  const handleChange3 = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked([checked[0], event.target.checked]);
-  };
-
-  const children = (
-    <Box sx={{ display: "flex", flexDirection: "column", ml: 3 }}>
-      <RawInputCheckbox
-        label="Child 1"
-        checkboxProps={{
-          checked: checked[0],
-          onChange: handleChange2,
-        }}
-      />
-      <RawInputCheckbox
-        label="Child 2"
-        checkboxProps={{
-          checked: checked[1],
-          onChange: handleChange3,
-        }}
-      />
-    </Box>
-  );
-
-  return (
-    <div>
-      <RawInputCheckbox
-        label="Parent"
-        checkboxProps={{
-          checked: checked[0] && checked[1],
-          indeterminate: checked[0] !== checked[1],
-          onChange: handleChange1,
-        }}
-      />
-      {children}
-    </div>
-  );
-};
-
-// Live Preview
-
-const LivePreviewDemo = (): JSX.Element => {
-  const livePreviewStyles = {
-    display: "grid",
-    gridColumnGap: "24px",
-    gridRowGap: "0px",
-    gridTemplateColumns: "repeat(3, 70px)",
-    gridTemplateRows: "1fr",
-  };
-
-  return (
-    <div style={livePreviewStyles as React.CSSProperties}>
-      <div style={{ gridArea: "1 / 1 / 1 / 2" }}>
-        <CheckboxLabelDemo label="Label" disabled={false} />
-      </div>
-      <div style={{ gridArea: "1 / 2 / 1 / 2" }}>
-        <InputCheckbox disabled label="Label" />
-      </div>
-      <div style={{ gridArea: "1 / 3 / 1 / 3" }}>
-        <IndeterminateDemo />
-      </div>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  parameters: {
-    controls: { exclude: ["caption", "label", "stage"] },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (): JSX.Element => {
-  const testStyles = {
-    display: "grid",
-    gridColumnGap: "10px",
-    gridRowGap: "0px",
-    gridTemplateColumns: "repeat(2, 100px)",
-    gridTemplateRows: "1fr",
-  };
-
-  return (
-    <div style={testStyles as React.CSSProperties}>
-      <div style={{ gridArea: "1 / 1 / 1 / 2" }}>
-        <CheckboxLabelDemo
-          caption="Caption"
-          label="Lable A"
-          disabled={false}
-          data-testid="labelCheckbox"
-        />
-      </div>
-      <div style={{ gridArea: "1 / 2 / 1 / 2" }}>
-        <InputCheckbox data-testid="checkbox" label="Label" />
-      </div>
-    </div>
-  );
-};
-
-export const Test = {
-  args: {
-    id: testId,
-  },
-  parameters: {
-    controls: { exclude: ["caption", "label", "id", "stage"] },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} data-testid="input-checkbox" />,
-};
diff --git a/packages/components/src/core/InputCheckbox/index.tsx b/packages/components/src/core/InputCheckbox/index.tsx
index b58539694..8c647c479 100644
--- a/packages/components/src/core/InputCheckbox/index.tsx
+++ b/packages/components/src/core/InputCheckbox/index.tsx
@@ -1,17 +1,22 @@
 import { CheckboxProps as MUICheckboxProps, SvgIcon } from "@mui/material";
-import { ReactComponent as IconCheckboxChecked } from "../../common/svgs/IconCheckboxChecked.svg";
-import { ReactComponent as IconCheckboxIndeterminate } from "../../common/svgs/IconCheckboxIndeterminate.svg";
-import { ReactComponent as IconCheckboxUnchecked } from "../../common/svgs/IconCheckboxUnchecked.svg";
+import { ReactComponent as IconCheckboxChecked } from "src/common/svgs/IconCheckboxChecked.svg";
+import { ReactComponent as IconCheckboxIndeterminate } from "src/common/svgs/IconCheckboxIndeterminate.svg";
+import { ReactComponent as IconCheckboxUnchecked } from "src/common/svgs/IconCheckboxUnchecked.svg";
 import {
   CheckboxExtraProps,
   StyledCheckbox,
+  StyledCheckboxCaption,
+  StyledCheckboxLabel,
   StyledFormControlLabel,
+  StyledLabelContainer,
 } from "./styles";
 
 interface CheckboxContentProps
   extends Omit<MUICheckboxProps, "color" | "defaultChecked" | "indeterminate"> {
+  caption?: string;
   checkboxProps?: Partial<MUICheckboxProps>;
-  label?: string;
+  intent?: "default" | "error" | "warning";
+  label?: React.ReactNode;
   stage?: "checked" | "unchecked" | "indeterminate";
 }
 
@@ -21,8 +26,16 @@ export type CheckboxProps = CheckboxContentProps & CheckboxExtraProps;
  * @see https://mui.com/material-ui/react-checkbox/
  */
 const InputCheckbox = (props: CheckboxProps): JSX.Element => {
-  const { caption, checkboxProps, disabled, label, stage, value, ...rest } =
-    props;
+  const {
+    caption,
+    checkboxProps,
+    disabled,
+    intent = "default",
+    label,
+    stage,
+    value,
+    ...rest
+  } = props;
 
   let newProps: MUICheckboxProps;
   switch (stage) {
@@ -52,9 +65,21 @@ const InputCheckbox = (props: CheckboxProps): JSX.Element => {
       newProps = rest;
   }
 
+  const finalLabel = caption ? (
+    <StyledLabelContainer>
+      <StyledCheckboxLabel>{label}</StyledCheckboxLabel>
+      <StyledCheckboxCaption disabled={disabled}>
+        {caption}
+      </StyledCheckboxCaption>
+    </StyledLabelContainer>
+  ) : (
+    <StyledLabelContainer>
+      <StyledCheckboxLabel>{label}</StyledCheckboxLabel>
+    </StyledLabelContainer>
+  );
+
   return (
     <StyledFormControlLabel
-      caption={caption}
       control={
         <StyledCheckbox
           disabled={disabled}
@@ -79,11 +104,13 @@ const InputCheckbox = (props: CheckboxProps): JSX.Element => {
               viewBox="0 0 16 16"
             />
           }
+          intent={intent}
           {...checkboxProps}
           {...newProps}
         />
       }
-      label={label}
+      disabled={disabled}
+      label={finalLabel}
       value={value}
     />
   );
diff --git a/packages/components/src/core/InputCheckbox/styles.ts b/packages/components/src/core/InputCheckbox/styles.ts
index 88af8960e..34ffc2528 100644
--- a/packages/components/src/core/InputCheckbox/styles.ts
+++ b/packages/components/src/core/InputCheckbox/styles.ts
@@ -1,85 +1,122 @@
 import {
+  FormControlLabel,
   Checkbox as RawCheckbox,
-  FormControlLabel as RawFormControlLabel,
+  checkboxClasses,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { fontBodyXxs } from "../styles";
-import { focusVisibleA11yStyle } from "../styles/common/mixins/a11y";
+import { focusVisibleA11yStyle } from "src/core/styles/common/mixins/a11y";
 import {
   CommonThemeProps,
-  getColors,
-  getCorners,
   getIconSizes,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-  getTypography,
-} from "../styles/common/selectors/theme";
+} from "src/core/styles";
+import { SemanticComponentColors, fontBodyXs, fontBodyXxs } from "../styles";
 
 export interface CheckboxExtraProps extends CommonThemeProps {
-  caption?: string;
+  intent?: "default" | "error" | "warning";
+  disabled?: boolean;
 }
 
-export const StyledFormControlLabel = styled(RawFormControlLabel)`
-  position: relative;
-  z-index: 0;
-
-  &:after {
-    ${fontBodyXxs}
-    left:34px;
-    position: absolute;
-    top: 30px;
-    z-index: -1;
-
-    ${(props: CheckboxExtraProps) => {
-      const { caption } = props;
-      const content = caption !== undefined ? caption : "";
-      const typography = getTypography(props);
-      const colors = getColors(props);
-      return `
-        content: "${content}";
-        font-family: ${typography?.fontFamily};
-        color: ${colors?.gray[500]};
-      `;
-    }}
-  }
-`;
-
 export const StyledCheckbox = styled(RawCheckbox)`
-  ${(props) => {
-    const colors = getColors(props);
-    const corners = getCorners(props);
+  ${(props: CheckboxExtraProps) => {
+    const { intent = "default" } = props;
+
     const iconSizes = getIconSizes(props);
     const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
+
+    const intentToColor = {
+      default: "base",
+      error: "negative",
+      warning: "notice",
+    };
+
+    const checkboxColor = intentToColor[
+      intent
+    ] as keyof SemanticComponentColors;
+
     return `
-      color: ${colors?.gray[400]};
+      color: ${semanticComponentColors?.[checkboxColor]?.border};
+
       &:hover {
-        color: ${colors?.gray[500]};
+        color: ${semanticComponentColors?.base?.borderHover};
         background-color: transparent;
       }
-      &.Mui-disabled {
-        color: ${colors?.gray[300]};
+
+      &.${checkboxClasses.disabled} {
+        color: ${semanticComponentColors?.base?.borderDisabled};
       }
-      &.Mui-checked {
-        color: ${colors?.primary[400]};
+
+      &.${checkboxClasses.checked} {
+        color: ${semanticComponentColors?.accent?.border};
+
         &:hover {
-          color: ${colors?.primary[500]};
+          color: ${semanticComponentColors?.accent?.borderHover};
           background-color: transparent;
         }
-        &.Mui-disabled {
-          color: ${colors?.primary[300]}
+
+        &.${checkboxClasses.disabled} {
+          color: ${semanticComponentColors?.accent?.borderDisabled};
         }
       }
 
-      &.MuiCheckbox-root {
+      &.${checkboxClasses.root} {
         ${focusVisibleA11yStyle()}
-        border-radius: ${corners?.s}px;        
-        padding: ${spaces?.xxs}px;
-        margin: 3px;
+        padding: 0;
+        padding-right: ${spaces?.s}px;
       }
 
       .MuiSvgIcon-root {
-        height: ${iconSizes?.input.height}px;
-        width: ${iconSizes?.input.width}px;
+        height: ${iconSizes?.s.height}px;
+        width: ${iconSizes?.s.width}px;
       }
     `;
   }}
 `;
+
+export const StyledFormControlLabel = styled(FormControlLabel)`
+  ${(props) => {
+    const spaces = getSpaces(props);
+
+    return `
+      align-items: start;
+      margin-bottom: ${spaces?.l}px;
+      margin-left: 0;
+      margin-right: 0;
+      width: fit-content;
+    `;
+  }}
+`;
+
+export const StyledLabelContainer = styled("span")`
+  display: flex;
+  justify-content: start;
+  flex-direction: column;
+`;
+
+export const StyledCheckboxLabel = styled("span")`
+  ${fontBodyXs}
+
+  ${(props: CheckboxExtraProps) => {
+    const spaces = getSpaces(props);
+
+    return `
+      margin-top: -${spaces?.xxxs}px !important;
+    `;
+  }}
+`;
+
+export const StyledCheckboxCaption = styled("span")`
+  ${fontBodyXxs}
+
+  ${(props: CheckboxExtraProps) => {
+    const { disabled } = props;
+    const semanticTextColors = getSemanticTextColors(props);
+
+    return `
+      color: ${disabled ? semanticTextColors?.base?.disabled : semanticTextColors?.base?.secondary};
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/InputDropdown/__storybook__/constants.ts b/packages/components/src/core/InputDropdown/__storybook__/constants.ts
new file mode 100644
index 000000000..9fadaeaa6
--- /dev/null
+++ b/packages/components/src/core/InputDropdown/__storybook__/constants.ts
@@ -0,0 +1,21 @@
+export const INPUT_DROPDOWN_EXCLUDED_CONTROLS = [
+  "fullWidth",
+  "counter",
+  "details",
+  "disabled",
+  "intent",
+  "label",
+  "multiple",
+  "sdsStage",
+  "sdsStyle",
+  "sdsType",
+  "shouldPutAColonAfterLabel",
+  "shouldTruncateMinimalDetails",
+  "width",
+];
+
+export const INPUT_DROPDOWN_LIVE_PREVIEW_ROW_STYLES = {
+  // lprins: This prevents InputDropdown component from stretching height in grid
+  alignItems: "start",
+  display: "flex",
+};
diff --git a/packages/components/src/core/InputDropdown/__storybook__/index.stories.tsx b/packages/components/src/core/InputDropdown/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..a515432b8
--- /dev/null
+++ b/packages/components/src/core/InputDropdown/__storybook__/index.stories.tsx
@@ -0,0 +1,163 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { InputDropdown } from "./stories/default";
+import { INPUT_DROPDOWN_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { MinimalLivePreviewDemo } from "./stories/minimal";
+
+export default {
+  argTypes: {
+    counter: {
+      control: {
+        type: "number",
+      },
+    },
+    details: {
+      control: {
+        type: "text",
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+    intent: {
+      control: {
+        type: "radio",
+      },
+      options: ["default", "error", "warning"],
+    },
+    label: {
+      control: {
+        type: "text",
+      },
+    },
+    multiple: {
+      control: {
+        type: "boolean",
+      },
+    },
+    sdsStage: {
+      control: {
+        type: "radio",
+      },
+      options: ["default", "userInput"],
+    },
+    sdsStyle: {
+      control: {
+        type: "select",
+      },
+      options: ["square", "rounded", "minimal"],
+    },
+    sdsType: {
+      control: {
+        type: "radio",
+      },
+      options: ["label", "value"],
+    },
+    shouldPutAColonAfterLabel: {
+      control: {
+        type: "boolean",
+      },
+    },
+    shouldTruncateMinimalDetails: {
+      control: {
+        type: "boolean",
+      },
+    },
+    width: {
+      control: {
+        type: "number",
+      },
+    },
+  },
+  component: InputDropdown,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Inputs/InputDropdown",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    disabled: false,
+    label: "Label",
+    sdsStyle: "square",
+  },
+};
+
+// Rounded Live Preview
+
+export const RoundLivePreview = {
+  args: {
+    fullWidth: true,
+    sdsStyle: "rounded",
+  },
+  parameters: {
+    controls: {
+      exclude: INPUT_DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Square Live Preview
+
+export const SquareLivePreview = {
+  args: {
+    fullWidth: true,
+    sdsStyle: "square",
+  },
+  parameters: {
+    controls: {
+      exclude: INPUT_DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Minimal Live Preview
+
+export const MinimalLivePreview = {
+  args: {
+    sdsStyle: "minimal",
+  },
+  parameters: {
+    controls: {
+      exclude: INPUT_DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <MinimalLivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    disabled: false,
+    label: "Label",
+    multiple: false,
+    sdsStyle: "square",
+  },
+  parameters: {
+    controls: {
+      exclude: INPUT_DROPDOWN_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <InputDropdown {...args} />,
+};
diff --git a/packages/components/src/core/InputDropdown/__storybook__/stories/default.tsx b/packages/components/src/core/InputDropdown/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..af9c50161
--- /dev/null
+++ b/packages/components/src/core/InputDropdown/__storybook__/stories/default.tsx
@@ -0,0 +1,176 @@
+import { AutocompleteValue } from "@mui/base";
+import { Args } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { DefaultAutocompleteOption } from "src/core/Autocomplete";
+import Callout from "src/core/Callout";
+import CalloutTitle from "src/core/Callout/components/CalloutTitle";
+import DropdownMenu from "src/core/DropdownMenu";
+import { InputDropdownProps } from "src/core/InputDropdown";
+import { StyledInputDropdown } from "../style";
+
+type DisableClearable = false;
+type FreeSolo = false;
+
+export const InputDropdown = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+>(
+  props: Args
+): JSX.Element => {
+  const {
+    disabled,
+    label,
+    sdsStyle,
+    multiple,
+    value: propValue,
+    sdsType,
+    ...rest
+  } = props;
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const [sdsStage, setSdsStage] =
+    useState<InputDropdownProps["sdsStage"]>("default");
+  const [details, setDetails] = useState<string>();
+  const [counter, setCounter] = useState<string>();
+  const [inputDropdownValue, setInputDropdownValue] = useState<string>();
+  const [invalid, setInvalid] = useState(false);
+  const [storybookLabel, setStorybookLabel] = useState("Label");
+
+  const [value, setValue] = useState<
+    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  >(null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
+
+  const isControlled = propValue !== undefined;
+
+  useEffect(() => {
+    if (isControlled) {
+      setValue(propValue);
+    }
+  }, [propValue, isControlled]);
+
+  useEffect(() => {
+    if (sdsType === "value" && multiple) {
+      setInvalid(true);
+    } else {
+      setInvalid(false);
+    }
+  }, [multiple, sdsType]);
+
+  useEffect(() => {
+    if (sdsType === "value") {
+      setStorybookLabel("Value");
+    } else {
+      setStorybookLabel(label);
+    }
+  }, [label, sdsType]);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setSdsStage("userInput");
+
+    if (open) {
+      setOpen(false);
+
+      if (anchorEl) {
+        anchorEl.focus();
+      }
+
+      setAnchorEl(null);
+    } else {
+      setAnchorEl(event.currentTarget);
+      setOpen(true);
+    }
+  };
+
+  const handleChange = (
+    _: React.SyntheticEvent<Element, Event>,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) => {
+    if (!multiple) {
+      setOpen(false);
+      setValue(newValue);
+      setCounter(undefined);
+
+      if (newValue && !Array.isArray(newValue)) {
+        setInputDropdownValue(newValue.name);
+
+        if (newValue?.details) setDetails(newValue?.details);
+        else setDetails(undefined);
+      } else {
+        setDetails(undefined);
+        setInputDropdownValue(undefined);
+      }
+    } else {
+      setValue(newValue);
+      setCounter((newValue as T[])?.length.toString());
+    }
+  };
+
+  const handleClose = () => {};
+
+  const handleClickAway = () => {
+    if (open) {
+      setOpen(false);
+      if (!value || (Array.isArray(value) && value.length === 0)) {
+        setSdsStage("default");
+      }
+    }
+  };
+
+  const options = [
+    {
+      details: "Details",
+      name: "Menu Item 1",
+    },
+    {
+      details: "A very long Details for the second Menu Item",
+      name: "Menu Item 2",
+    },
+    {
+      name: "Menu Item 3",
+    },
+  ];
+
+  return (
+    <div>
+      {invalid ? (
+        <Callout autoDismiss={false} intent="negative">
+          <CalloutTitle>Invalid props!</CalloutTitle>
+          When using the InputDropdown component, please note that the
+          combination of setting the sdsType prop to &quot;value&quot; and the
+          multiple prop to &quot;true&quot; is not allowed.
+        </Callout>
+      ) : (
+        <StyledInputDropdown
+          disabled={disabled}
+          label={storybookLabel}
+          onClick={handleClick}
+          state={open ? "open" : "default"}
+          sdsStage={sdsStage}
+          sdsStyle={sdsStyle}
+          sdsType={sdsType}
+          multiple={multiple}
+          details={details}
+          value={inputDropdownValue}
+          counter={counter}
+          data-testid="InputDropdown"
+          {...rest}
+        />
+      )}
+
+      <DropdownMenu
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        onChange={handleChange}
+        search={false}
+        multiple={multiple}
+        disableCloseOnSelect={multiple}
+        options={options as T[]}
+        value={value}
+        onClickAway={handleClickAway}
+        width={300}
+      />
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputDropdown/__storybook__/stories/livePreview.tsx b/packages/components/src/core/InputDropdown/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..afa57b3be
--- /dev/null
+++ b/packages/components/src/core/InputDropdown/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,50 @@
+import { noop } from "src/common/utils";
+import { StyledInputDropdown } from "../style";
+import { Args } from "@storybook/react";
+import { INPUT_DROPDOWN_LIVE_PREVIEW_ROW_STYLES } from "../constants";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  const { sdsStyle } = props;
+
+  return (
+    <div style={INPUT_DROPDOWN_LIVE_PREVIEW_ROW_STYLES as React.CSSProperties}>
+      <StyledInputDropdown
+        disabled={false}
+        label="Label"
+        onClick={noop}
+        sdsStage="default"
+        sdsStyle={sdsStyle}
+        sdsType="label"
+        multiple={false}
+        data-testid="InputDropdown"
+      />
+
+      <StyledInputDropdown
+        disabled={false}
+        label="Label"
+        onClick={noop}
+        sdsStage="default"
+        sdsStyle={sdsStyle}
+        sdsType="value"
+        value="Value"
+        multiple={false}
+        data-testid="InputDropdown"
+        style={{ marginLeft: 80, marginRight: 16 }}
+      />
+
+      <StyledInputDropdown
+        disabled={false}
+        label="Label"
+        onClick={noop}
+        sdsStage="default"
+        sdsStyle={sdsStyle}
+        sdsType="value"
+        value="Value"
+        details="Details"
+        shouldPutAColonAfterLabel={false}
+        multiple={false}
+        data-testid="InputDropdown"
+      />
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputDropdown/__storybook__/stories/minimal.tsx b/packages/components/src/core/InputDropdown/__storybook__/stories/minimal.tsx
new file mode 100644
index 000000000..27cff7054
--- /dev/null
+++ b/packages/components/src/core/InputDropdown/__storybook__/stories/minimal.tsx
@@ -0,0 +1,33 @@
+import { noop } from "src/common/utils";
+import { StyledInputDropdown } from "../style";
+import { INPUT_CHECKBOX_LIVE_PREVIEW_STYLES } from "src/core/InputCheckbox/__storybook__/constants";
+
+export const MinimalLivePreviewDemo = (): JSX.Element => {
+  return (
+    <div style={INPUT_CHECKBOX_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      <StyledInputDropdown
+        disabled={false}
+        label="Label"
+        onClick={noop}
+        sdsStage="default"
+        sdsStyle="minimal"
+        sdsType="label"
+        multiple={false}
+        data-testid="InputDropdown"
+      />
+
+      <StyledInputDropdown
+        disabled={false}
+        label="Label"
+        onClick={noop}
+        sdsStage="default"
+        sdsStyle="minimal"
+        sdsType="value"
+        value="Value"
+        multiple={false}
+        data-testid="InputDropdown"
+        style={{ marginLeft: 80, marginRight: 16 }}
+      />
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputDropdown/__storybook__/style.ts b/packages/components/src/core/InputDropdown/__storybook__/style.ts
new file mode 100644
index 000000000..5a6165aab
--- /dev/null
+++ b/packages/components/src/core/InputDropdown/__storybook__/style.ts
@@ -0,0 +1,12 @@
+import { styled } from "@mui/material";
+import { Args } from "@storybook/react";
+import RawInputDropdown from "src/core/InputDropdown";
+
+export const StyledInputDropdown = styled(RawInputDropdown)`
+  ${({ width }: Args) => {
+    return `
+      width: fit-content;
+      max-width: ${width || 250}px;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/InputDropdown/InputDropdown.namespace-test.tsx b/packages/components/src/core/InputDropdown/__tests__/InputDropdown.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/InputDropdown/InputDropdown.namespace-test.tsx
rename to packages/components/src/core/InputDropdown/__tests__/InputDropdown.namespace-test.tsx
diff --git a/packages/components/src/core/InputDropdown/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
similarity index 84%
rename from packages/components/src/core/InputDropdown/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
index eb2b8c7d7..bd8bdaa99 100644
--- a/packages/components/src/core/InputDropdown/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<InputDropdown /> Default story renders snapshot 1`] = `
 <div>
   <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-1vbittq-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-js7z7h-MuiButtonBase-root-MuiButton-root"
     data-testid="InputDropdown"
     label="Label"
     tabindex="0"
@@ -13,7 +13,7 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
       class="css-18dv0oe"
     >
       <span
-        class="styled-label css-mxudk4"
+        class="styled-label css-1ubkbz8"
       >
         Label
       </span>
@@ -30,7 +30,9 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
             data-testid="IconChevronDownSmall"
             fillcontrast="white"
             focusable="false"
-            viewBox="0 0 14 14"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
           />
         </div>
       </span>
diff --git a/packages/components/src/core/InputDropdown/index.test.tsx b/packages/components/src/core/InputDropdown/__tests__/index.test.tsx
similarity index 93%
rename from packages/components/src/core/InputDropdown/index.test.tsx
rename to packages/components/src/core/InputDropdown/__tests__/index.test.tsx
index 7ceef6835..297c2d649 100644
--- a/packages/components/src/core/InputDropdown/index.test.tsx
+++ b/packages/components/src/core/InputDropdown/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/InputDropdown/index.stories.tsx b/packages/components/src/core/InputDropdown/index.stories.tsx
deleted file mode 100644
index 983e4ce8d..000000000
--- a/packages/components/src/core/InputDropdown/index.stories.tsx
+++ /dev/null
@@ -1,406 +0,0 @@
-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 from "../DropdownMenu";
-import RawInputDropdown, { InputDropdownProps } from "./index";
-
-const StyledInputDropdown = styled(RawInputDropdown)`
-  ${({ width }: Args) => {
-    return `
-      width: fit-content;
-      max-width: ${width || 250}px;
-    `;
-  }}
-`;
-
-type DisableClearable = false;
-type FreeSolo = false;
-
-const InputDropdown = <
-  T extends DefaultAutocompleteOption,
-  Multiple extends boolean | undefined,
->(
-  props: Args
-): JSX.Element => {
-  const {
-    disabled,
-    label,
-    sdsStyle,
-    multiple,
-    value: propValue,
-    sdsType,
-    ...rest
-  } = props;
-
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const [open, setOpen] = useState(false);
-  const [sdsStage, setSdsStage] =
-    useState<InputDropdownProps["sdsStage"]>("default");
-  const [details, setDetails] = useState<string>();
-  const [counter, setCounter] = useState<string>();
-  const [inputDropdownValue, setInputDropdownValue] = useState<string>();
-  const [invalid, setInvalid] = useState(false);
-  const [storybookLabel, setStorybookLabel] = useState("Label");
-
-  const [value, setValue] = useState<
-    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  >(null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
-
-  const isControlled = propValue !== undefined;
-
-  useEffect(() => {
-    if (isControlled) {
-      setValue(propValue);
-    }
-  }, [propValue, isControlled]);
-
-  useEffect(() => {
-    if (sdsType === "value" && multiple) {
-      setInvalid(true);
-    } else {
-      setInvalid(false);
-    }
-  }, [multiple, sdsType]);
-
-  useEffect(() => {
-    if (sdsType === "value") {
-      setStorybookLabel("Value");
-    } else {
-      setStorybookLabel(label);
-    }
-  }, [label, sdsType]);
-
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setSdsStage("userInput");
-
-    if (open) {
-      setOpen(false);
-
-      if (anchorEl) {
-        anchorEl.focus();
-      }
-
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
-      setOpen(true);
-    }
-  };
-
-  const handleChange = (
-    _: React.SyntheticEvent<Element, Event>,
-    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  ) => {
-    if (!multiple) {
-      setOpen(false);
-      setValue(newValue);
-      setCounter(undefined);
-
-      if (newValue && !Array.isArray(newValue)) {
-        setInputDropdownValue(newValue.name);
-
-        if (newValue?.details) setDetails(newValue?.details);
-        else setDetails(undefined);
-      } else {
-        setDetails(undefined);
-        setInputDropdownValue(undefined);
-      }
-    } else {
-      setValue(newValue);
-      setCounter((newValue as T[])?.length.toString());
-    }
-  };
-
-  const handleClose = () => {};
-
-  const handleClickAway = () => {
-    if (open) {
-      setOpen(false);
-      if (!value || (Array.isArray(value) && value.length === 0)) {
-        setSdsStage("default");
-      }
-    }
-  };
-
-  const options = [
-    {
-      details: "Details",
-      name: "Menu Item 1",
-    },
-    {
-      details: "A very long Details for the second Menu Item",
-      name: "Menu Item 2",
-    },
-    {
-      name: "Menu Item 3",
-    },
-  ];
-
-  return (
-    <div>
-      {invalid ? (
-        <Callout autoDismiss={false} intent="error">
-          <CalloutTitle>Invalid props!</CalloutTitle>
-          When using the InputDropdown component, please note that the
-          combination of setting the sdsType prop to &quot;value&quot; and the
-          multiple prop to &quot;true&quot; is not allowed.
-        </Callout>
-      ) : (
-        <StyledInputDropdown
-          disabled={disabled}
-          label={storybookLabel}
-          onClick={handleClick}
-          state={open ? "open" : "default"}
-          sdsStage={sdsStage}
-          sdsStyle={sdsStyle}
-          sdsType={sdsType}
-          multiple={multiple}
-          details={details}
-          value={inputDropdownValue}
-          counter={counter}
-          data-testid="InputDropdown"
-          {...rest}
-        />
-      )}
-
-      <DropdownMenu
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        onChange={handleChange}
-        search={false}
-        multiple={multiple}
-        disableCloseOnSelect={multiple}
-        options={options as T[]}
-        value={value}
-        onClickAway={handleClickAway}
-        width={300}
-      />
-    </div>
-  );
-};
-
-export default {
-  argTypes: {
-    counter: {
-      control: {
-        type: "number",
-      },
-    },
-    details: {
-      control: {
-        type: "text",
-      },
-    },
-    disabled: {
-      control: {
-        type: "boolean",
-      },
-    },
-    intent: {
-      control: {
-        type: "radio",
-      },
-      options: ["default", "error", "warning"],
-    },
-    label: {
-      control: {
-        type: "text",
-      },
-    },
-    multiple: {
-      control: {
-        type: "boolean",
-      },
-    },
-    sdsStage: {
-      control: {
-        type: "radio",
-      },
-      options: ["default", "userInput"],
-    },
-    sdsStyle: {
-      control: {
-        type: "select",
-      },
-      options: ["square", "rounded", "minimal"],
-    },
-    sdsType: {
-      control: {
-        type: "radio",
-      },
-      options: ["label", "value"],
-    },
-    shouldPutAColonAfterLabel: {
-      control: {
-        type: "boolean",
-      },
-    },
-    shouldTruncateMinimalDetails: {
-      control: {
-        type: "boolean",
-      },
-    },
-    width: {
-      control: {
-        type: "number",
-      },
-    },
-  },
-  component: InputDropdown,
-  title: "Inputs/InputDropdown",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    disabled: false,
-    label: "Label",
-    sdsStyle: "square",
-  },
-};
-
-// Live Preview
-
-const storyRow = {
-  // lprins: This prevents InputDropdown component from stretching height in grid
-  alignItems: "start",
-  display: "flex",
-};
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  const { sdsStyle } = props;
-
-  return (
-    <div style={storyRow as React.CSSProperties}>
-      <StyledInputDropdown
-        disabled={false}
-        label="Label"
-        onClick={noop}
-        sdsStage="default"
-        sdsStyle={sdsStyle}
-        sdsType="label"
-        multiple={false}
-        data-testid="InputDropdown"
-      />
-
-      <StyledInputDropdown
-        disabled={false}
-        label="Label"
-        onClick={noop}
-        sdsStage="default"
-        sdsStyle={sdsStyle}
-        sdsType="value"
-        value="Value"
-        multiple={false}
-        data-testid="InputDropdown"
-        style={{ marginLeft: 80, marginRight: 16 }}
-      />
-
-      <StyledInputDropdown
-        disabled={false}
-        label="Label"
-        onClick={noop}
-        sdsStage="default"
-        sdsStyle={sdsStyle}
-        sdsType="value"
-        value="Value"
-        details="Details"
-        shouldPutAColonAfterLabel={false}
-        multiple={false}
-        data-testid="InputDropdown"
-      />
-    </div>
-  );
-};
-
-export const RoundLivePreview = {
-  args: {
-    fullWidth: true,
-    sdsStyle: "rounded",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-export const SquareLivePreview = {
-  args: {
-    fullWidth: true,
-    sdsStyle: "square",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-const MinimalLivePreviewDemo = (): JSX.Element => {
-  return (
-    <div style={storyRow as React.CSSProperties}>
-      <StyledInputDropdown
-        disabled={false}
-        label="Label"
-        onClick={noop}
-        sdsStage="default"
-        sdsStyle="minimal"
-        sdsType="label"
-        multiple={false}
-        data-testid="InputDropdown"
-      />
-
-      <StyledInputDropdown
-        disabled={false}
-        label="Label"
-        onClick={noop}
-        sdsStage="default"
-        sdsStyle="minimal"
-        sdsType="value"
-        value="Value"
-        multiple={false}
-        data-testid="InputDropdown"
-        style={{ marginLeft: 80, marginRight: 16 }}
-      />
-    </div>
-  );
-};
-
-export const MinimalLivePreview = {
-  args: {
-    sdsStyle: "minimal",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <MinimalLivePreviewDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  args: {
-    disabled: false,
-    label: "Label",
-    multiple: false,
-    sdsStyle: "square",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <InputDropdown {...args} />,
-};
diff --git a/packages/components/src/core/InputDropdown/index.tsx b/packages/components/src/core/InputDropdown/index.tsx
index 9ae6389a7..d64b731d5 100644
--- a/packages/components/src/core/InputDropdown/index.tsx
+++ b/packages/components/src/core/InputDropdown/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "../Icon";
+import Icon from "src/core/Icon";
 import {
   IconWrapper,
   LabelWrapper,
@@ -71,7 +71,7 @@ const InputDropdown = (props: InputDropdownProps): JSX.Element => {
         )}
         {shouldRenderCounter && <StyledCounter>{counter}</StyledCounter>}
         <IconWrapper>
-          <Icon sdsIcon="chevronDown" sdsSize="s" sdsType="interactive" />
+          <Icon sdsIcon="ChevronDown" sdsSize="xs" sdsType="interactive" />
         </IconWrapper>
       </LabelWrapper>
 
diff --git a/packages/components/src/core/InputDropdown/style.ts b/packages/components/src/core/InputDropdown/style.ts
index f1e0dcb41..562f462f8 100644
--- a/packages/components/src/core/InputDropdown/style.ts
+++ b/packages/components/src/core/InputDropdown/style.ts
@@ -1,7 +1,7 @@
 import { css, SerializedStyles } from "@emotion/react";
 import { styled } from "@mui/material/styles";
 import { ReactNode } from "react";
-import Button from "../Button";
+import Button from "src/core/Button";
 import {
   CommonThemeProps,
   focusVisibleA11yStyle,
@@ -10,9 +10,10 @@ import {
   getColors,
   getCorners,
   getFontWeights,
-  getPalette,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-} from "../styles";
+} from "src/core/styles";
 
 export interface InputDropdownProps extends CommonThemeProps {
   disabled?: boolean;
@@ -31,66 +32,72 @@ export interface InputDropdownProps extends CommonThemeProps {
   shouldPutAColonAfterLabel?: boolean;
 }
 
-const labelFontBodyS = fontBody("s");
-const labelFontBodyXs = fontBody("xs");
+const labelFontBodyS = fontBody("s", "regular");
+const labelFontBodyXs = fontBody("xs", "regular");
 
 const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
-  const colors = getColors(props);
-  const palette = getPalette(props);
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
   const borders = getBorders(props);
+  const semanticTextColors = getSemanticTextColors(props);
+  const semanticCommonColors = getSemanticComponentColors(props);
+
+  /**
+   * (masoudmanson)
+   * The top/bottom padding is set to 1px less than the actual value to account for the border.
+   */
+  const padding = `${(spaces?.xs ?? 6) - 1}px ${spaces?.xs}px`;
 
   return css`
     ${labelStyle(props)}
 
-    border: ${borders?.gray[400]};
-    color: ${palette?.text?.primary};
+    border: ${borders?.base?.default};
+    color: ${semanticTextColors?.base?.primary};
     cursor: pointer;
-    padding: ${spacings?.xs}px;
+    padding: ${padding};
     justify-content: start;
 
     &.MuiButton-text {
       &:hover {
-        color: #000;
+        color: ${semanticTextColors?.base?.primary};
       }
 
       .styled-label {
-        margin-left: ${spacings?.s}px;
+        margin-left: ${spaces?.s}px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
 
       svg {
-        margin-right: ${spacings?.s}px;
-        margin-left: ${spacings?.l}px;
+        margin-right: ${spaces?.s}px;
+        margin-left: ${spaces?.l}px;
       }
     }
 
     path {
-      fill: ${colors?.gray[500]};
+      fill: ${semanticCommonColors?.base?.icon};
     }
 
     &:hover {
       background-color: unset;
       border-color: black;
-      color: ${palette?.text?.primary};
+      color: ${semanticTextColors?.base?.primary};
 
       path {
-        fill: black;
+        fill: ${semanticCommonColors?.base?.iconHover};
       }
 
       .styled-label {
-        color: #000;
+        color: ${semanticTextColors?.base?.primary};
       }
     }
 
     &:active {
-      border: ${borders?.primary[400]};
-      color: ${palette?.text?.primary};
+      border: ${borders?.accent?.default};
+      color: ${semanticTextColors?.base?.primary};
 
       path {
-        fill: ${colors?.primary[400]};
+        fill: ${semanticCommonColors?.accent?.icon};
       }
     }
 
@@ -101,9 +108,9 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
 };
 
 const minimal = (props: InputDropdownProps): SerializedStyles => {
-  const colors = getColors(props);
-  const spacings = getSpaces(props);
-  const palette = getPalette(props);
+  const spaces = getSpaces(props);
+  const semanticTextColors = getSemanticTextColors(props);
+  const semanticCommonColors = getSemanticComponentColors(props);
 
   return css`
     ${labelStyle(props)}
@@ -113,7 +120,7 @@ const minimal = (props: InputDropdownProps): SerializedStyles => {
     align-items: flex-start;
     border: none;
     flex-direction: column;
-    padding: ${spacings?.xs}px ${spacings?.s}px;
+    padding: ${spaces?.xs}px ${spaces?.s}px;
 
     /* Nesting to increase CSS specificity for style override */
     &.MuiButton-text {
@@ -123,29 +130,29 @@ const minimal = (props: InputDropdownProps): SerializedStyles => {
     }
 
     span {
-      color: ${palette?.text?.secondary};
+      color: ${semanticTextColors?.base?.secondary};
     }
 
     path {
-      fill: ${colors?.gray[500]};
+      fill: ${semanticCommonColors?.base?.icon};
     }
 
     &:hover {
-      background-color: ${colors?.gray[100]};
+      background-color: ${semanticCommonColors?.base?.fillHover};
       border: none;
-      color: ${palette?.text?.primary};
+      color: ${semanticTextColors?.base?.primary};
 
       path {
-        fill: black;
+        fill: ${semanticCommonColors?.base?.iconHover};
       }
 
       .styled-label {
-        color: #000;
+        color: ${semanticTextColors?.base?.primary};
       }
     }
 
     &:active {
-      background-color: ${colors?.gray[100]};
+      background-color: ${semanticCommonColors?.base?.fillHover};
       border: none;
     }
 
@@ -159,7 +166,7 @@ const minimal = (props: InputDropdownProps): SerializedStyles => {
     }
 
     &.MuiButton-root.MuiButton-text svg {
-      margin-left: ${spacings?.xs}px;
+      margin-left: ${spaces?.xs}px;
       margin-right: 0;
     }
   `;
@@ -184,16 +191,16 @@ const rounded = (props: InputDropdownProps): SerializedStyles => {
 };
 
 const userInput = (props: InputDropdownProps): SerializedStyles => {
-  const palette = getPalette(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return css`
     & .styled-label {
-      color: ${palette?.text?.primary};
+      color: ${semanticTextColors?.base?.primary};
     }
 
     &.MuiButton-text {
       .styled-label {
-        color: ${palette?.text?.primary};
+        color: ${semanticTextColors?.base?.primary};
       }
     }
   `;
@@ -201,32 +208,34 @@ const userInput = (props: InputDropdownProps): SerializedStyles => {
 
 const isOpen = (props: InputDropdownProps): SerializedStyles => {
   const colors = getColors(props);
-  const palette = getPalette(props);
+  const semanticTextColors = getSemanticTextColors(props);
+  const semanticCommonColors = getSemanticComponentColors(props);
 
   return css`
     ${props.sdsStyle === "minimal"
-      ? `& > span, &:hover > span { color: ${palette?.text?.primary}; }`
+      ? `& > span, &:hover > span { color: ${semanticTextColors?.base?.primary}; }`
       : ""}
 
     path {
-      fill: ${colors?.primary[400]};
+      fill: ${semanticCommonColors?.accent?.icon};
     }
 
-    border-color: ${colors?.primary[400]};
+    border-color: ${colors?.blue[400]};
 
     &:hover {
       path {
-        fill: ${colors?.primary[400]};
+        fill: ${colors?.blue[400]};
       }
 
-      border-color: ${colors?.primary[400]};
+      border-color: ${colors?.blue[400]};
     }
   `;
 };
 
 const warning = (props: InputDropdownProps): SerializedStyles => {
   const colors = getColors(props);
-  const yellow = colors?.warning[400];
+  const yellow = colors?.yellow[400];
+
   return css`
     border-color: ${yellow};
 
@@ -242,7 +251,8 @@ const warning = (props: InputDropdownProps): SerializedStyles => {
 
 const error = (props: InputDropdownProps): SerializedStyles => {
   const colors = getColors(props);
-  const red = colors?.error[400];
+  const red = colors?.red[400];
+
   return css`
     border-color: ${red};
 
@@ -257,25 +267,25 @@ const error = (props: InputDropdownProps): SerializedStyles => {
 };
 
 const isDisabled = (props: InputDropdownProps): SerializedStyles => {
-  const colors = getColors(props);
-  const palette = getPalette(props);
+  const semanticTextColors = getSemanticTextColors(props);
+  const semanticCommonColors = getSemanticComponentColors(props);
 
   return css`
     cursor: default;
-    border-color: ${colors?.gray[300]};
+    border-color: ${semanticCommonColors?.base?.borderDisabled};
 
     span {
-      color: ${palette?.text?.disabled};
+      color: ${semanticTextColors?.base?.disabled};
     }
 
     &.MuiButton-text {
       .styled-label {
-        color: ${palette?.text?.disabled};
+        color: ${semanticTextColors?.base?.disabled};
       }
     }
 
     path {
-      fill: ${colors?.gray[300]};
+      fill: ${semanticCommonColors?.base?.fillDisabled};
     }
   `;
 };
@@ -323,11 +333,11 @@ export const StyledDetail = styled("span", {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
   ${(props: CommonThemeProps) => {
-    const palette = getPalette(props);
     const spaces = getSpaces(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
-      color: ${palette?.text?.secondary};
+      color: ${semanticTextColors?.base?.secondary};
       margin-left: ${spaces?.xs}px;
       overflow: hidden;
       white-space: nowrap;
@@ -348,13 +358,13 @@ export const StyledLabel = styled("span", {
   ${(props: DetailsAndCounter) => {
     const { details, counter, sdsType } = props;
 
-    const palette = getPalette(props);
     const fontWeights = getFontWeights(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     const labelColor =
       details || counter !== undefined
-        ? palette?.text?.primary
-        : palette?.text?.secondary;
+        ? semanticTextColors?.base?.primary
+        : semanticTextColors?.base?.secondary;
 
     return `
       color: ${labelColor};
@@ -370,16 +380,17 @@ export const StyledCounter = styled("span", {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
   ${(props: CommonThemeProps) => {
-    const colors = getColors(props);
     const corners = getCorners(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
+    const semanticCommonColors = getSemanticComponentColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
-      background-color: ${colors?.gray[200]};
-      color: ${colors?.primary[400]};
+      background-color: ${semanticCommonColors?.base?.surfaceTertiary};
+      color: ${semanticTextColors?.base?.accent};
       border-radius: ${corners?.l}px;
-      padding: 0 ${spacings?.xs}px;
-      margin-left: ${spacings?.xs}px;
+      padding: 0 ${spaces?.xs}px;
+      margin-left: ${spaces?.xs}px;
     `;
   }}
 `;
@@ -428,11 +439,11 @@ export const IconWrapper = styled("span", {
 `;
 
 function labelStyle(props: InputDropdownProps): SerializedStyles {
-  const palette = getPalette(props);
+  const semanticTextColors = getSemanticTextColors(props);
   const labelColor =
     props.sdsType === "value"
-      ? palette?.text?.primary
-      : palette?.text?.secondary;
+      ? semanticTextColors?.base?.primary
+      : semanticTextColors?.base?.secondary;
 
   return css`
     &.MuiButton-text {
diff --git a/packages/components/src/core/InputRadio/__storybook__/constants.ts b/packages/components/src/core/InputRadio/__storybook__/constants.ts
new file mode 100644
index 000000000..c3572f94a
--- /dev/null
+++ b/packages/components/src/core/InputRadio/__storybook__/constants.ts
@@ -0,0 +1,14 @@
+export const INPUT_RADIO_EXCLUDED_CONTROLS = [
+  "label",
+  "caption",
+  "disabled",
+  "intent",
+  "stage",
+];
+
+export const INPUT_RADIO_LIVE_PREVIEW_STYLES = {
+  display: "grid",
+  gridColumnGap: "24px",
+  gridRowGap: "50px",
+  gridTemplateColumns: "repeat(3, 180px)",
+};
diff --git a/packages/components/src/core/InputRadio/__storybook__/index.stories.tsx b/packages/components/src/core/InputRadio/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..8318a1977
--- /dev/null
+++ b/packages/components/src/core/InputRadio/__storybook__/index.stories.tsx
@@ -0,0 +1,83 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { InputRadio } from "./stories/default";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { TestDemo } from "./stories/test";
+import { INPUT_RADIO_EXCLUDED_CONTROLS } from "./constants";
+
+export default {
+  argTypes: {
+    caption: {
+      control: { type: "text" },
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    intent: {
+      control: { type: "radio" },
+      options: ["default", "error", "warning"],
+    },
+    label: {
+      control: { type: "text" },
+    },
+    stage: {
+      control: {
+        type: "radio",
+      },
+      options: ["checked", "unchecked"],
+    },
+  },
+  component: InputRadio,
+  parameters: {
+    badges: [BADGE.BETA],
+  },
+  title: "Components/Inputs/InputRadio [beta]",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    caption: "Caption",
+    disabled: false,
+    intent: "default",
+    label: "Label",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    axe: {
+      disabledRules: ["label"],
+    },
+    controls: {
+      exclude: INPUT_RADIO_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    label: "Test Label",
+  },
+  parameters: {
+    controls: {
+      exclude: INPUT_RADIO_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/InputRadio/__storybook__/stories/default.tsx b/packages/components/src/core/InputRadio/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..2c86b6026
--- /dev/null
+++ b/packages/components/src/core/InputRadio/__storybook__/stories/default.tsx
@@ -0,0 +1,17 @@
+import { RadioGroup } from "@mui/material";
+import { Args } from "@storybook/react";
+import RawInputRadio from "src/core/InputRadio";
+
+export const InputRadio = (props: Args): JSX.Element => {
+  const { caption, label, ...rest } = props;
+
+  return (
+    <RadioGroup
+      aria-labelledby="demo-radio-buttons-group-label"
+      defaultValue="demo"
+      name="radio-buttons-group"
+    >
+      <RawInputRadio caption={caption} label={label} value="demo" {...rest} />
+    </RadioGroup>
+  );
+};
diff --git a/packages/components/src/core/InputRadio/__storybook__/stories/livePreview.tsx b/packages/components/src/core/InputRadio/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..314683a69
--- /dev/null
+++ b/packages/components/src/core/InputRadio/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,71 @@
+import { FormControl, FormLabel, RadioGroup } from "@mui/material";
+import { Args } from "@storybook/react";
+import { INPUT_RADIO_LIVE_PREVIEW_STYLES } from "../constants";
+import RawInputRadio from "src/core/InputRadio";
+
+const CustomFormLabel = (props: Args): JSX.Element => {
+  const { children } = props;
+
+  return <FormLabel sx={{ mb: "12px" }}>{children}</FormLabel>;
+};
+
+export const LivePreviewDemo = (): JSX.Element => {
+  return (
+    <div style={INPUT_RADIO_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      <FormControl>
+        <CustomFormLabel>No Labels or Captions</CustomFormLabel>
+        <RadioGroup name="input-radio-group-no-labels" defaultValue={1}>
+          <RawInputRadio value="1" />
+          <RawInputRadio value="2" intent="warning" />
+          <RawInputRadio value="3" intent="error" />
+          <RawInputRadio value="4" disabled />
+        </RadioGroup>
+      </FormControl>
+
+      <FormControl>
+        <CustomFormLabel>With Labels</CustomFormLabel>
+        <RadioGroup
+          title="With Labels/Captions"
+          aria-labelledby="demo-input-radio-group-labels"
+          defaultValue="demo1"
+          name="input-radio-group"
+        >
+          <RawInputRadio label="Default" value="1" />
+          <RawInputRadio label="Warning" value="2" intent="warning" />
+          <RawInputRadio label="Error" value="3" intent="error" />
+          <RawInputRadio label="Disabled" value="4" disabled />
+        </RadioGroup>
+      </FormControl>
+
+      <FormControl>
+        <CustomFormLabel>With Labels and Captions</CustomFormLabel>
+        <RadioGroup
+          title="With Labels/Captions"
+          aria-labelledby="demo-input-radio-group-labels-captions"
+          defaultValue="demo1"
+          name="input-radio-group"
+        >
+          <RawInputRadio label="Default" caption="Caption I" value="1" />
+          <RawInputRadio
+            label="Warning"
+            caption="Caption II"
+            value="2"
+            intent="warning"
+          />
+          <RawInputRadio
+            label="Error"
+            caption="Caption III"
+            value="3"
+            intent="error"
+          />
+          <RawInputRadio
+            disabled
+            label="Disabled"
+            caption="Caption IV"
+            value="4"
+          />
+        </RadioGroup>
+      </FormControl>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputRadio/__storybook__/stories/test.tsx b/packages/components/src/core/InputRadio/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..e010e5f76
--- /dev/null
+++ b/packages/components/src/core/InputRadio/__storybook__/stories/test.tsx
@@ -0,0 +1,32 @@
+import { RadioGroup } from "@mui/material";
+import { Args } from "@storybook/react";
+import RawInputRadio from "src/core/InputRadio";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  const { label } = props;
+
+  return (
+    <div>
+      <RadioGroup
+        aria-labelledby="demo-input-radio-group-label"
+        defaultValue="demo1"
+        name="input-radio-group"
+        data-testid="radioButtonGroup"
+      >
+        <RawInputRadio data-testid="inputRadio" label={label} value="demo1" />
+        <RawInputRadio
+          caption="Caption"
+          data-testid="inputRadio"
+          label={label}
+          value="demo2"
+        />
+        <RawInputRadio
+          caption="Caption"
+          data-testid="inputRadio"
+          label={label}
+          value="demo3"
+        />
+      </RadioGroup>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputRadio/InputRadio.namespace-test.tsx b/packages/components/src/core/InputRadio/__tests__/InputRadio.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/InputRadio/InputRadio.namespace-test.tsx
rename to packages/components/src/core/InputRadio/__tests__/InputRadio.namespace-test.tsx
diff --git a/packages/components/src/core/InputRadio/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputRadio/__tests__/__snapshots__/index.test.tsx.snap
similarity index 77%
rename from packages/components/src/core/InputRadio/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/InputRadio/__tests__/__snapshots__/index.test.tsx.snap
index 583b565a0..dd98de263 100644
--- a/packages/components/src/core/InputRadio/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputRadio/__tests__/__snapshots__/index.test.tsx.snap
@@ -7,12 +7,12 @@ exports[`<InputRadio /> Default story renders snapshot 1`] = `
   role="radiogroup"
 >
   <label
-    caption="Caption"
-    class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-krj95y-MuiFormControlLabel-root"
+    class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-c4vnp1-MuiFormControlLabel-root"
   >
     <span
       caption="Caption"
-      class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary css-b0a55y-MuiButtonBase-root-MuiRadio-root"
+      class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary css-4m8g7g-MuiButtonBase-root-MuiRadio-root"
+      intent="default"
       label="Label"
     >
       <input
@@ -38,7 +38,20 @@ exports[`<InputRadio /> Default story renders snapshot 1`] = `
     <span
       class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
     >
-      Label
+      <span
+        class="css-1ddu512"
+      >
+        <span
+          class="css-1dr5e88"
+        >
+          Label
+        </span>
+        <span
+          class="css-1mg4zid"
+        >
+          Caption
+        </span>
+      </span>
     </span>
   </label>
 </div>
diff --git a/packages/components/src/core/InputRadio/index.test.tsx b/packages/components/src/core/InputRadio/__tests__/index.test.tsx
similarity index 90%
rename from packages/components/src/core/InputRadio/index.test.tsx
rename to packages/components/src/core/InputRadio/__tests__/index.test.tsx
index 121821258..29f583ae9 100644
--- a/packages/components/src/core/InputRadio/index.test.tsx
+++ b/packages/components/src/core/InputRadio/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/InputRadio/index.stories.tsx b/packages/components/src/core/InputRadio/index.stories.tsx
deleted file mode 100644
index 6cbab35f6..000000000
--- a/packages/components/src/core/InputRadio/index.stories.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { RadioGroup } from "@mui/material";
-import { Args, Meta } from "@storybook/react";
-import RawInputRadio from "./index";
-
-const InputRadio = (props: Args): JSX.Element => {
-  const { caption, label } = props;
-
-  return (
-    <RadioGroup
-      aria-labelledby="demo-radio-buttons-group-label"
-      defaultValue="demo"
-      name="radio-buttons-group"
-    >
-      <RawInputRadio caption={caption} label={label} value="demo" {...props} />
-    </RadioGroup>
-  );
-};
-
-export default {
-  component: InputRadio,
-  title: "Inputs/InputRadio",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    caption: "Caption",
-    disabled: false,
-    label: "Label",
-  },
-};
-
-// Live Preview
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  const { label } = props;
-
-  return (
-    <div>
-      <RadioGroup
-        aria-labelledby="demo-input-radio-group-label"
-        defaultValue="demo1"
-        name="input-radio-group"
-        data-testid="radioButtonGroup"
-      >
-        <RawInputRadio data-testid="inputRadio" label={label} value="demo1" />
-        <RawInputRadio
-          caption="Caption"
-          data-testid="inputRadio"
-          label={label}
-          value="demo2"
-        />
-        <RawInputRadio
-          caption="Caption"
-          data-testid="inputRadio"
-          label={label}
-          value="demo3"
-        />
-      </RadioGroup>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  args: {
-    label: "Test Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
diff --git a/packages/components/src/core/InputRadio/index.tsx b/packages/components/src/core/InputRadio/index.tsx
index 4e4151771..dbfa7d0bf 100644
--- a/packages/components/src/core/InputRadio/index.tsx
+++ b/packages/components/src/core/InputRadio/index.tsx
@@ -1,15 +1,21 @@
 import { RadioProps as MUIRadioProps, SvgIcon } from "@mui/material";
-import { ReactComponent as IconRadioChecked } from "../../common/svgs/IconRadioChecked.svg";
-import { ReactComponent as IconRadioUnChecked } from "../../common/svgs/IconRadioUnchecked.svg";
+import { ReactComponent as IconRadioChecked } from "src/common/svgs/IconRadioChecked.svg";
+import { ReactComponent as IconRadioUnChecked } from "src/common/svgs/IconRadioUnchecked.svg";
 import {
   RadioExtraProps,
   StyledFormControlLabel,
+  StyledLabelContainer,
   StyledRadioButton,
+  StyledRadioCaption,
+  StyledRadioLabel,
 } from "./style";
+import React from "react";
 
 export interface RadioContentProps
   extends Omit<MUIRadioProps, "color" | "defaultChecked"> {
-  label?: string;
+  caption?: string;
+  intent?: "default" | "error" | "warning";
+  label?: React.ReactNode;
   radioProps?: Partial<MUIRadioProps>;
   stage?: "checked" | "unchecked";
   value?: string;
@@ -21,54 +27,52 @@ export type RadioProps = RadioContentProps & RadioExtraProps;
  * @see https://mui.com/material-ui/react-radio-button/
  */
 const InputRadio = (props: RadioProps): JSX.Element => {
-  const { label, caption, radioProps, stage, value } = props;
-  if (label === undefined || stage !== undefined) {
-    let newProps: MUIRadioProps;
-    switch (stage) {
-      case "checked":
-        newProps = {
-          ...props,
-          checked: true,
-          color: "primary",
-        };
-        break;
-      case "unchecked":
-        newProps = {
-          ...props,
-          checked: false,
-          color: "default",
-        };
-        break;
-      default:
-        newProps = props;
-    }
+  const {
+    label,
+    caption,
+    disabled,
+    intent = "default",
+    radioProps,
+    stage,
+    value,
+  } = props;
 
-    return (
-      <StyledRadioButton
-        {...newProps}
-        checkedIcon={
-          <SvgIcon
-            fillcontrast="white"
-            component={IconRadioChecked}
-            viewBox="0 0 16 16"
-          />
-        }
-        icon={
-          <SvgIcon
-            fillcontrast="white"
-            component={IconRadioUnChecked}
-            viewBox="0 0 16 16"
-          />
-        }
-      />
-    );
+  let newProps: MUIRadioProps;
+  switch (stage) {
+    case "checked":
+      newProps = {
+        ...props,
+        checked: true,
+        color: "primary",
+      };
+      break;
+    case "unchecked":
+      newProps = {
+        ...props,
+        checked: false,
+        color: "default",
+      };
+      break;
+    default:
+      newProps = props;
   }
+
+  const finalLabel = caption ? (
+    <StyledLabelContainer>
+      <StyledRadioLabel>{label}</StyledRadioLabel>
+      <StyledRadioCaption disabled={disabled}>{caption}</StyledRadioCaption>
+    </StyledLabelContainer>
+  ) : (
+    <StyledLabelContainer>
+      <StyledRadioLabel>{label}</StyledRadioLabel>
+    </StyledLabelContainer>
+  );
+
   return (
     <StyledFormControlLabel
-      caption={caption}
       control={
         <StyledRadioButton
-          {...props}
+          disabled={disabled}
           checkedIcon={
             <SvgIcon
               fillcontrast="white"
@@ -83,10 +87,13 @@ const InputRadio = (props: RadioProps): JSX.Element => {
               viewBox="0 0 16 16"
             />
           }
+          intent={intent}
           {...radioProps}
+          {...newProps}
         />
       }
-      label={label}
+      disabled={disabled}
+      label={finalLabel}
       value={value}
     />
   );
diff --git a/packages/components/src/core/InputRadio/style.ts b/packages/components/src/core/InputRadio/style.ts
index fcf38e266..fa155e2ca 100644
--- a/packages/components/src/core/InputRadio/style.ts
+++ b/packages/components/src/core/InputRadio/style.ts
@@ -1,78 +1,122 @@
 import {
-  FormControlLabel as RawFormControlLabel,
+  FormControlLabel,
   Radio as RawRadio,
+  radioClasses,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
+import { focusVisibleA11yStyle } from "src/core/styles/common/mixins/a11y";
 import {
   CommonThemeProps,
+  SemanticComponentColors,
+  fontBodyXs,
   fontBodyXxs,
-  getColors,
   getIconSizes,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface RadioExtraProps extends CommonThemeProps {
-  caption?: string;
+  intent?: "default" | "error" | "warning";
+  disabled?: boolean;
 }
 
-export const StyledFormControlLabel = styled(RawFormControlLabel)`
+export const StyledRadioButton = styled(RawRadio)`
   ${(props: RadioExtraProps) => {
-    const { caption } = props;
-    const content = caption === undefined ? "" : caption;
-    const typography = getTypography(props);
-    const colors = getColors(props);
+    const { intent = "default" } = props;
+
     const spaces = getSpaces(props);
+    const iconSizes = getIconSizes(props);
 
-    return `
-      position: relative;
-      z-index: 0;
-      padding-bottom: ${caption === undefined ? 0 : spaces?.xl}px;
-      
-      &:after {
-        ${fontBodyXxs}
-        font-size: 12px;
-        left: 34px;
-        position: absolute;
-        top: 30px;
-        z-index: -1;
-        content: "${content}";
-        font-family: ${typography?.fontFamily};
-        color: ${colors?.gray[500]}; 
-        
-      }
-    `;
-  }}
-`;
+    const semanticComponentColors = getSemanticComponentColors(props);
+
+    const intentToColor = {
+      default: "base",
+      error: "negative",
+      warning: "notice",
+    };
+
+    const radioColor = intentToColor[intent] as keyof SemanticComponentColors;
 
-export const StyledRadioButton = styled(RawRadio)`
-  ${(props) => {
-    const colors = getColors(props);
-    const iconSizes = getIconSizes(props);
     return `
-      color: ${colors?.gray[400]};
+      color: ${semanticComponentColors?.[radioColor]?.border};
+
       &:hover {
-        color: ${colors?.gray[500]};
+        color: ${semanticComponentColors?.base?.borderHover};
         background-color: transparent;
       }
-      &.Mui-disabled {
-        color: ${colors?.gray[300]};
+
+      &.${radioClasses.disabled} {
+        color: ${semanticComponentColors?.base?.borderDisabled};
       }
-      &.Mui-checked {
-        color: ${colors?.primary[400]};
+
+      &.${radioClasses.checked} {
+        color: ${semanticComponentColors?.accent?.border};
+
         &:hover {
-          color: ${colors?.primary[500]};
+          color: ${semanticComponentColors?.accent?.borderHover};
           background-color: transparent;
         }
-        &.Mui-disabled {
-          color: ${colors?.primary[300]}
+
+        &.${radioClasses.disabled} {
+          color: ${semanticComponentColors?.accent?.borderDisabled};
         }
       }
 
+      &.${radioClasses.root} {
+        ${focusVisibleA11yStyle()}
+        padding: 0 ${spaces?.s}px 0 0;
+      }
+
       .MuiSvgIcon-root {
-        height: ${iconSizes?.input.height}px;
-        width: ${iconSizes?.input.width}px;
+        height: ${iconSizes?.s.height}px;
+        width: ${iconSizes?.s.width}px;
       }
     `;
   }}
 `;
+
+export const StyledFormControlLabel = styled(FormControlLabel)`
+  ${(props) => {
+    const spaces = getSpaces(props);
+
+    return `
+      align-items: start;
+      margin-bottom: ${spaces?.l}px;
+      margin-left: 0;
+      margin-right: 0;
+      width: fit-content;
+    `;
+  }}
+`;
+
+export const StyledLabelContainer = styled("span")`
+  display: flex;
+  justify-content: start;
+  flex-direction: column;
+`;
+
+export const StyledRadioLabel = styled("span")`
+  ${fontBodyXs}
+
+  ${(props: RadioExtraProps) => {
+    const spaces = getSpaces(props);
+
+    return `
+      margin-top: -${spaces?.xxxs}px !important;
+    `;
+  }}
+`;
+
+export const StyledRadioCaption = styled("span")`
+  ${fontBodyXxs}
+
+  ${(props: RadioExtraProps) => {
+    const { disabled } = props;
+    const semanticTextColors = getSemanticTextColors(props);
+
+    return `
+      color: ${disabled ? semanticTextColors?.base?.disabled : semanticTextColors?.base?.secondary};
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/InputSearch/__storybook__/constants.ts b/packages/components/src/core/InputSearch/__storybook__/constants.ts
new file mode 100644
index 000000000..6219c26d5
--- /dev/null
+++ b/packages/components/src/core/InputSearch/__storybook__/constants.ts
@@ -0,0 +1,9 @@
+export const INPUT_SEARCH_EXCLUDED_CONTROLS = [
+  "disabled",
+  "id",
+  "intent",
+  "label",
+  "placeholder",
+  "sdsStage",
+  "sdsStyle",
+];
diff --git a/packages/components/src/core/InputSearch/__storybook__/index.stories.tsx b/packages/components/src/core/InputSearch/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..becef300b
--- /dev/null
+++ b/packages/components/src/core/InputSearch/__storybook__/index.stories.tsx
@@ -0,0 +1,96 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { INPUT_SEARCH_EXCLUDED_CONTROLS } from "./constants";
+import { InputSearch } from "./stories/default";
+import { RoundLivePreviewDemo } from "./stories/roundLivePreview";
+import { SquareLivePreviewDemo } from "./stories/squareLivePreview";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    disabled: {
+      control: { type: "boolean" },
+    },
+    id: {
+      control: { type: "text" },
+      required: true,
+    },
+    intent: {
+      control: { type: "radio" },
+      options: ["default", "error", "warning"],
+    },
+    label: {
+      control: { type: "text" },
+      required: true,
+    },
+    placeholder: {
+      control: { type: "text" },
+    },
+    sdsStage: {
+      control: { type: "radio" },
+      options: ["default", "userInput"],
+    },
+    sdsStyle: {
+      control: { type: "radio" },
+      options: ["rounded", "square"],
+    },
+  },
+  component: InputSearch,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Inputs/InputSearch",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    disabled: false,
+    id: "Test",
+    label: "Search",
+    placeholder: "Search",
+  },
+};
+
+// Round Live Preview
+
+export const RoundLivePreview = {
+  parameters: {
+    controls: {
+      exclude: INPUT_SEARCH_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <RoundLivePreviewDemo {...args} />,
+};
+
+// Square Live Preview
+
+export const SquareLivePreview = {
+  parameters: {
+    controls: {
+      exclude: INPUT_SEARCH_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <SquareLivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: INPUT_SEARCH_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx b/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..7d4520406
--- /dev/null
+++ b/packages/components/src/core/InputSearch/__storybook__/stories/default.tsx
@@ -0,0 +1,24 @@
+import { Args } from "@storybook/react";
+import RawInputSearch from "src/core/InputSearch";
+
+export const InputSearch = (props: Args): JSX.Element => {
+  const { id, placeholder, label, disabled, sdsStyle, sdsStage, intent } =
+    props;
+  const handleSubmit = (value: string) => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+  return (
+    <RawInputSearch
+      id={id}
+      placeholder={placeholder}
+      label={label}
+      disabled={disabled}
+      sdsStyle={sdsStyle}
+      sdsStage={sdsStage}
+      intent={intent}
+      handleSubmit={handleSubmit}
+      name="input-search-name"
+    />
+  );
+};
diff --git a/packages/components/src/core/InputSearch/__storybook__/stories/roundLivePreview.tsx b/packages/components/src/core/InputSearch/__storybook__/stories/roundLivePreview.tsx
new file mode 100644
index 000000000..423359374
--- /dev/null
+++ b/packages/components/src/core/InputSearch/__storybook__/stories/roundLivePreview.tsx
@@ -0,0 +1,17 @@
+import { action } from "@storybook/addon-actions";
+import { Args } from "@storybook/react";
+import RawInputSearch from "src/core/InputSearch";
+
+export const RoundLivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <RawInputSearch
+      {...props}
+      id="squareSearchPreview"
+      label="Search"
+      sdsStyle="rounded"
+      placeholder="Search"
+      handleSubmit={action("onSubmit")}
+      name="round-input-search"
+    />
+  );
+};
diff --git a/packages/components/src/core/InputSearch/__storybook__/stories/squareLivePreview.tsx b/packages/components/src/core/InputSearch/__storybook__/stories/squareLivePreview.tsx
new file mode 100644
index 000000000..580b9d2f6
--- /dev/null
+++ b/packages/components/src/core/InputSearch/__storybook__/stories/squareLivePreview.tsx
@@ -0,0 +1,17 @@
+import { action } from "@storybook/addon-actions";
+import { Args } from "@storybook/react";
+import RawInputSearch from "src/core/InputSearch";
+
+export const SquareLivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <RawInputSearch
+      {...props}
+      id="squareSearchPreview"
+      label="Search"
+      sdsStyle="square"
+      placeholder="Search"
+      handleSubmit={action("onSubmit")}
+      name="square-input-search"
+    />
+  );
+};
diff --git a/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx b/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..c5929e7f2
--- /dev/null
+++ b/packages/components/src/core/InputSearch/__storybook__/stories/test.tsx
@@ -0,0 +1,38 @@
+import { action } from "@storybook/addon-actions";
+import { Args } from "@storybook/react";
+import RawInputSearch from "src/core/InputSearch";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  return (
+    <>
+      <RawInputSearch
+        id="test-round"
+        sdsStyle="rounded"
+        label="Round Search"
+        placeholder="Search"
+        data-testid="inputSearchRound"
+        handleSubmit={action("onSubmit")}
+        name="round-search"
+        {...props}
+      />
+      <RawInputSearch
+        id="test-square"
+        sdsStyle="square"
+        label="Square Search"
+        placeholder="Search"
+        data-testid="inputSearchSquare"
+        handleSubmit={action("onSubmit")}
+        name="square-search"
+        {...props}
+      />
+      {/* @ts-expect-error testing fail state */}
+      <RawInputSearch
+        sdsStyle="square"
+        placeholder="Search"
+        data-testid="inputSearchFail"
+        handleSubmit={action("onSubmit")}
+        name="with-error"
+      />
+    </>
+  );
+};
diff --git a/packages/components/src/core/InputSearch/InputSearch.namespace-test.tsx b/packages/components/src/core/InputSearch/__tests__/InputSearch.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/InputSearch/InputSearch.namespace-test.tsx
rename to packages/components/src/core/InputSearch/__tests__/InputSearch.namespace-test.tsx
diff --git a/packages/components/src/core/InputSearch/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap
similarity index 87%
rename from packages/components/src/core/InputSearch/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap
index 32d19a781..1b604ded8 100644
--- a/packages/components/src/core/InputSearch/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<InputSearch /> Default story renders snapshot 1`] = `
 <label
-  class="css-1xrxdra"
+  class="css-l5xdrx"
   for="Test"
 >
   Search
diff --git a/packages/components/src/core/InputSearch/index.test.tsx b/packages/components/src/core/InputSearch/__tests__/index.test.tsx
similarity index 96%
rename from packages/components/src/core/InputSearch/index.test.tsx
rename to packages/components/src/core/InputSearch/__tests__/index.test.tsx
index 86ba2c1b8..c4dac2582 100644
--- a/packages/components/src/core/InputSearch/index.test.tsx
+++ b/packages/components/src/core/InputSearch/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/InputSearch/index.stories.tsx b/packages/components/src/core/InputSearch/index.stories.tsx
deleted file mode 100644
index a22e77f76..000000000
--- a/packages/components/src/core/InputSearch/index.stories.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import { Args, Meta } from "@storybook/react";
-import RawInputSearch from "./index";
-
-const InputSearch = (props: Args): JSX.Element => {
-  const { id, placeholder, label, disabled, sdsStyle, sdsStage, intent } =
-    props;
-  const handleSubmit = (value: string) => {
-    // eslint-disable-next-line no-console
-    console.log(value);
-  };
-  return (
-    <RawInputSearch
-      id={id}
-      placeholder={placeholder}
-      label={label}
-      disabled={disabled}
-      sdsStyle={sdsStyle}
-      sdsStage={sdsStage}
-      intent={intent}
-      handleSubmit={handleSubmit}
-      name="input-search-name"
-    />
-  );
-};
-
-export default {
-  argTypes: {
-    disabled: {
-      control: { type: "boolean" },
-    },
-    id: {
-      control: { type: "text" },
-      required: true,
-    },
-    intent: {
-      control: { type: "radio" },
-      options: ["default", "error", "warning"],
-    },
-    label: {
-      control: { type: "text" },
-      required: true,
-    },
-    placeholder: {
-      control: { type: "text" },
-    },
-    sdsStage: {
-      control: { type: "radio" },
-      options: ["default", "userInput"],
-    },
-    sdsStyle: {
-      control: { type: "radio" },
-      options: ["rounded", "square"],
-    },
-  },
-  component: InputSearch,
-  title: "Inputs/InputSearch",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    disabled: false,
-    id: "Test",
-    label: "Search",
-    placeholder: "Search",
-  },
-};
-
-// Live Preview
-
-const RoundLivePreviewDemo = (props: Args): JSX.Element => {
-  return (
-    <RawInputSearch
-      {...props}
-      id="squareSearchPreview"
-      label="Search"
-      sdsStyle="rounded"
-      placeholder="Search"
-      handleSubmit={action("onSubmit")}
-      name="round-input-search"
-    />
-  );
-};
-
-export const RoundLivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <RoundLivePreviewDemo {...args} />,
-};
-
-const SquareLivePreviewDemo = (props: Args): JSX.Element => {
-  return (
-    <RawInputSearch
-      {...props}
-      id="squareSearchPreview"
-      label="Search"
-      sdsStyle="square"
-      placeholder="Search"
-      handleSubmit={action("onSubmit")}
-      name="square-input-search"
-    />
-  );
-};
-
-export const SquareLivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <SquareLivePreviewDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  return (
-    <>
-      <RawInputSearch
-        id="test-round"
-        sdsStyle="rounded"
-        label="Round Search"
-        placeholder="Search"
-        data-testid="inputSearchRound"
-        handleSubmit={action("onSubmit")}
-        name="round-search"
-        {...props}
-      />
-      <RawInputSearch
-        id="test-square"
-        sdsStyle="square"
-        label="Square Search"
-        placeholder="Search"
-        data-testid="inputSearchSquare"
-        handleSubmit={action("onSubmit")}
-        name="square-search"
-        {...props}
-      />
-      {/* @ts-expect-error testing fail state */}
-      <RawInputSearch
-        sdsStyle="square"
-        placeholder="Search"
-        data-testid="inputSearchFail"
-        handleSubmit={action("onSubmit")}
-        name="with-error"
-      />
-    </>
-  );
-};
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/InputSearch/index.tsx b/packages/components/src/core/InputSearch/index.tsx
index c2ec69694..48749c3ff 100644
--- a/packages/components/src/core/InputSearch/index.tsx
+++ b/packages/components/src/core/InputSearch/index.tsx
@@ -1,6 +1,6 @@
 import { TextFieldProps as RawTextFieldSearchProps } from "@mui/material";
 import React, { forwardRef, useState } from "react";
-import ButtonIcon from "../ButtonIcon";
+import ButtonIcon from "src/core/ButtonIcon";
 import {
   InputSearchExtraProps,
   StyledInputAdornment,
@@ -103,8 +103,12 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
                   sdsIconProps={{
                     sdsType: "iconButton",
                   }}
-                  icon="xMark"
+                  icon="XMarkCircle"
                 />
+              </StyledInputAdornment>
+            ),
+            startAdornment: (
+              <StyledInputAdornment position="start">
                 <ButtonIcon
                   aria-label="search-button"
                   onClick={localHandleSubmit}
@@ -113,7 +117,7 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
                   sdsIconProps={{
                     sdsType: "interactive",
                   }}
-                  icon="search"
+                  icon="Search"
                 />
               </StyledInputAdornment>
             ),
diff --git a/packages/components/src/core/InputSearch/style.ts b/packages/components/src/core/InputSearch/style.ts
index 289787635..135e9b99a 100644
--- a/packages/components/src/core/InputSearch/style.ts
+++ b/packages/components/src/core/InputSearch/style.ts
@@ -11,12 +11,13 @@ import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
   fontBodyM,
-  getBorders,
+  fontBodyXs,
   getColors,
   getCorners,
+  getIconSizes,
+  getSemanticComponentColors,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface InputSearchExtraProps extends CommonThemeProps {
   disabled?: boolean;
@@ -30,39 +31,42 @@ const sdsPropNames = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
 
 const rounded = (props: InputSearchExtraProps): SerializedStyles => {
   const corners = getCorners(props);
-  const borders = getBorders(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
-    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
+    .${outlinedInputClasses.root} {
       border-radius: ${corners?.l}px;
-      border: ${borders?.gray[400]};
+
+      .${outlinedInputClasses.notchedOutline} {
+        border-radius: ${corners?.l}px;
+        border: 1px solid ${semanticComponentColors?.base?.border};
+      }
     }
   `;
 };
 
 const error = (props: InputSearchExtraProps): SerializedStyles => {
-  const borders = getBorders(props);
-  const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.error[400]};
+      border: 1px solid ${semanticComponentColors?.negative?.border};
     }
 
     .${outlinedInputClasses.root}:hover
       .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.error[400]};
+      border: 1px solid ${semanticComponentColors?.negative?.border};
     }
 
     .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
       .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.error[400]};
+        border: 1px solid ${semanticComponentColors?.negative?.border};
       }
 
       .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
         cursor: default;
         svg {
-          color: ${colors?.gray[500]};
+          color: ${semanticComponentColors?.base?.icon};
         }
       }
     }
@@ -70,28 +74,27 @@ const error = (props: InputSearchExtraProps): SerializedStyles => {
 };
 
 const warning = (props: InputSearchExtraProps): SerializedStyles => {
-  const borders = getBorders(props);
-  const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.warning[400]};
+      border: 1px solid ${semanticComponentColors?.notice?.border};
     }
 
     .${outlinedInputClasses.root}:hover
       .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.warning[400]};
+      border: 1px solid ${semanticComponentColors?.notice?.border};
     }
 
     .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
       .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.warning[400]};
+        border: 1px solid ${semanticComponentColors?.notice?.border};
       }
 
       .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
         cursor: default;
         svg {
-          color: ${colors?.gray[500]};
+          color: ${semanticComponentColors?.base?.icon};
         }
       }
     }
@@ -100,26 +103,28 @@ const warning = (props: InputSearchExtraProps): SerializedStyles => {
 
 const userInput = (props: InputSearchExtraProps): SerializedStyles => {
   const { intent } = props;
-  const colors = getColors(props);
-  const borders = getBorders(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   const border =
     intent === "error"
-      ? borders?.error[400]
+      ? semanticComponentColors?.negative?.border
       : intent === "warning"
-        ? borders?.warning[400]
-        : borders?.primary[400];
+        ? semanticComponentColors?.notice?.border
+        : semanticComponentColors?.accent?.border;
 
-  const color = intent === "default" ? colors?.primary[400] : colors?.gray[500];
+  const color =
+    intent === "default"
+      ? semanticComponentColors?.accent?.icon
+      : semanticComponentColors?.base?.icon;
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: ${border};
+      border: 1px solid ${border};
     }
 
     .${outlinedInputClasses.root}:hover
       .${outlinedInputClasses.notchedOutline} {
-      border: ${border};
+      border: 1px solid ${border};
     }
 
     .${inputAdornmentClasses.root} svg {
@@ -129,21 +134,21 @@ const userInput = (props: InputSearchExtraProps): SerializedStyles => {
 };
 
 const disabledStyled = (props: InputSearchExtraProps): SerializedStyles => {
-  const borders = getBorders(props);
   const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
     .${outlinedInputClasses.disabled} {
       .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.gray[300]};
+        border: 1px solid ${semanticComponentColors?.base?.borderDisabled};
       }
 
       .${inputAdornmentClasses.root} svg {
-        color: ${colors?.gray[300]};
+        color: ${semanticComponentColors?.base?.iconDisabled};
       }
 
       &:hover .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.gray[300]};
+        border: 1px solid ${semanticComponentColors?.base?.borderDisabled};
       }
 
       &::placeholder {
@@ -157,12 +162,10 @@ const disabledStyled = (props: InputSearchExtraProps): SerializedStyles => {
 export const StyledLabel = styled("label")`
   ${fontBodyM}
   ${(props) => {
-    const typography = getTypography(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
-      font-family: ${typography?.fontFamily};
-      margin-bottom: ${spacings?.xxs}px;
+      margin-bottom: ${spaces?.xxs}px;
       position: absolute;
       overflow: hidden;
       clip: rect(0 0 0 0);
@@ -182,14 +185,15 @@ export const StyledSearchBase = styled(TextField, {
 })`
   ${(props: InputSearchExtraProps) => {
     const { intent, disabled, sdsStyle, sdsStage, value } = props;
-    const spacings = getSpaces(props);
-    const borders = getBorders(props);
-    const colors = getColors(props);
+
+    const spaces = getSpaces(props);
+    const iconSizes = getIconSizes(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return css`
-      margin-top: ${spacings?.m}px;
-      margin-bottom: ${spacings?.m}px;
-      margin-right: ${spacings?.xl}px;
+      margin-top: ${spaces?.m}px;
+      margin-bottom: ${spaces?.m}px;
+      margin-right: ${spaces?.xl}px;
       min-width: 120px;
       display: block;
 
@@ -200,41 +204,66 @@ export const StyledSearchBase = styled(TextField, {
 
       & .input-search-clear-icon {
         opacity: 0;
-        margin-right: ${spacings?.s}px;
+        cursor: pointer;
+
+        svg {
+          height: ${iconSizes?.xs?.height}px;
+          width: ${iconSizes?.xs?.width}px;
+        }
       }
 
       .${outlinedInputClasses.root} {
+        padding: 0 ${spaces?.m}px;
+        background-color: ${semanticComponentColors?.base?.surface};
+
         .${outlinedInputClasses.notchedOutline} {
-          border: ${borders?.gray[400]};
+          border: 1px solid ${semanticComponentColors?.base?.border};
         }
 
         &:hover .input-search-clear-icon,
         &:focus-within .input-search-clear-icon {
           opacity: ${value ? 1 : 0};
+
+          svg {
+            color: ${semanticComponentColors?.base?.icon} !important;
+          }
+
+          &:hover {
+            svg {
+              color: ${semanticComponentColors?.accent?.fillHover} !important;
+            }
+          }
+
+          &:active {
+            svg {
+              color: ${semanticComponentColors?.accent?.fillPressed} !important;
+            }
+          }
         }
       }
 
       .${inputBaseClasses.inputSizeSmall} {
-        padding: ${spacings?.xs}px ${spacings?.l}px;
-        height: 34px;
+        ${fontBodyXs(props)}
+        padding: ${spaces?.xs}px ${spaces?.s}px;
+        height: unset;
         box-sizing: border-box;
-        background-color: #fff;
+        background-color: ${semanticComponentColors?.base?.surface};
       }
 
       .${outlinedInputClasses.root}:hover
         .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.gray[500]};
+        border: 1px solid ${semanticComponentColors?.base?.borderHover};
       }
 
       .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
         .${outlinedInputClasses.notchedOutline} {
-          border: ${borders?.primary[400]};
+          border: 1px solid ${semanticComponentColors?.accent?.border};
         }
 
         .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
           cursor: default;
           svg {
-            color: ${colors?.primary[400]};
+            color: ${semanticComponentColors?.accent?.icon};
           }
         }
       }
@@ -250,4 +279,6 @@ export const StyledSearchBase = styled(TextField, {
 
 export const StyledInputAdornment = styled(InputAdornment)`
   position: relative;
+  height: unset;
+  margin: 0;
 `;
diff --git a/packages/components/src/core/InputSlider/__storybook__/constants.tsx b/packages/components/src/core/InputSlider/__storybook__/constants.tsx
new file mode 100644
index 000000000..462c96c34
--- /dev/null
+++ b/packages/components/src/core/InputSlider/__storybook__/constants.tsx
@@ -0,0 +1,43 @@
+export const INPUT_SLIDER_EXCLUDED_CONTROLS = [
+  "defaultValue",
+  "disabled",
+  "marks",
+  "max",
+  "min",
+  "step",
+  "valueLabelDisplay",
+];
+
+export const INPUT_SLIDER_GENERATE_CUSTOM_MARKS = (
+  min: number,
+  max: number
+) => {
+  return [
+    {
+      label: min,
+      value: min,
+    },
+    {
+      label: ((max - min) / 2 + min).toFixed(0),
+      value: (max - min) / 2 + min,
+    },
+    {
+      label: max,
+      value: max,
+    },
+  ];
+};
+
+export const INPUT_SLIDER_DEMO_WRAPPER_STYLES = {
+  height: 180,
+  marginLeft: 20,
+  marginTop: 15,
+  width: 180,
+};
+
+export const INPUT_SLIDER_LIVE_PREVIEW_ROW_STYLES = {
+  display: "grid",
+  gridColumnGap: 40,
+  gridTemplateColumns: "repeat(2, 180px)",
+  margin: "15px 0 0 20px",
+};
diff --git a/packages/components/src/core/InputSlider/__storybook__/index.stories.tsx b/packages/components/src/core/InputSlider/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..6b8b73ad0
--- /dev/null
+++ b/packages/components/src/core/InputSlider/__storybook__/index.stories.tsx
@@ -0,0 +1,111 @@
+import { Args, Meta } from "@storybook/react";
+import { InputSlider } from "./stories/default";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { TestDemo } from "./stories/test";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { INPUT_SLIDER_EXCLUDED_CONTROLS } from "./constants";
+
+export default {
+  argTypes: {
+    defaultValue: {
+      control: {
+        type: "number",
+      },
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    marks: {
+      control: {
+        type: "boolean",
+      },
+    },
+    max: {
+      control: {
+        type: "number",
+      },
+    },
+    min: {
+      control: {
+        type: "number",
+      },
+    },
+    step: {
+      control: {
+        type: "number",
+      },
+    },
+    valueLabelDisplay: {
+      control: {
+        labels: ["auto", "off", "on"],
+        type: "select",
+      },
+      options: ["auto", "off", "on"],
+    },
+  },
+  component: InputSlider,
+  parameters: {
+    axe: {
+      disabledRules: [
+        // FIXME - inputs should have labels
+        "label",
+      ],
+    },
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Inputs/InputSlider",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    defaultValue: [15, 85],
+    disabled: false,
+    marks: true,
+    max: 100,
+    min: 0,
+    step: 5,
+    valueLabelDisplay: "on",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  args: {
+    defaultValue: [15, 85],
+    disabled: false,
+    marks: true,
+    max: 100,
+    min: 0,
+  },
+  parameters: {
+    controls: {
+      exclude: INPUT_SLIDER_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    defaultValue: 15,
+    max: 100,
+    min: 0,
+  },
+  parameters: {
+    controls: {
+      exclude: INPUT_SLIDER_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} data-testid="input-slider" />,
+};
diff --git a/packages/components/src/core/InputSlider/__storybook__/stories/default.tsx b/packages/components/src/core/InputSlider/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..d6c41cfb2
--- /dev/null
+++ b/packages/components/src/core/InputSlider/__storybook__/stories/default.tsx
@@ -0,0 +1,18 @@
+import { Args } from "@storybook/react";
+import RawInputSlider from "src/core/InputSlider";
+import {
+  INPUT_SLIDER_DEMO_WRAPPER_STYLES,
+  INPUT_SLIDER_GENERATE_CUSTOM_MARKS,
+} from "../constants";
+
+export const InputSlider = (props: Args): JSX.Element => {
+  const { marks, max, min } = props;
+
+  const customMarks = INPUT_SLIDER_GENERATE_CUSTOM_MARKS(min, max);
+
+  return (
+    <div style={INPUT_SLIDER_DEMO_WRAPPER_STYLES as React.CSSProperties}>
+      <RawInputSlider {...props} marks={marks ? customMarks : false} />
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputSlider/__storybook__/stories/livePreview.tsx b/packages/components/src/core/InputSlider/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..134436eae
--- /dev/null
+++ b/packages/components/src/core/InputSlider/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,37 @@
+import { Args } from "@storybook/react";
+import RawInputSlider from "src/core/InputSlider";
+import {
+  INPUT_SLIDER_GENERATE_CUSTOM_MARKS,
+  INPUT_SLIDER_LIVE_PREVIEW_ROW_STYLES,
+} from "../constants";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  const { marks, max, min } = props;
+
+  const customMarks = INPUT_SLIDER_GENERATE_CUSTOM_MARKS(min, max);
+
+  return (
+    <div style={INPUT_SLIDER_LIVE_PREVIEW_ROW_STYLES as React.CSSProperties}>
+      <div>
+        <RawInputSlider
+          step={5}
+          valueLabelDisplay="on"
+          {...props}
+          defaultValue={85}
+          marks={marks ? customMarks : false}
+          orientation="horizontal"
+        />
+      </div>
+
+      <div>
+        <RawInputSlider
+          step={5}
+          valueLabelDisplay="on"
+          {...props}
+          marks={marks ? customMarks : false}
+          orientation="horizontal"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputSlider/__storybook__/stories/test.tsx b/packages/components/src/core/InputSlider/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..c63ebb713
--- /dev/null
+++ b/packages/components/src/core/InputSlider/__storybook__/stories/test.tsx
@@ -0,0 +1,22 @@
+import { Args } from "@storybook/react";
+import RawInputSlider from "src/core/InputSlider";
+import {
+  INPUT_SLIDER_GENERATE_CUSTOM_MARKS,
+  INPUT_SLIDER_LIVE_PREVIEW_ROW_STYLES,
+} from "../constants";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  const { marks, max, min } = props;
+
+  const customMarks = INPUT_SLIDER_GENERATE_CUSTOM_MARKS(min, max);
+
+  return (
+    <div style={INPUT_SLIDER_LIVE_PREVIEW_ROW_STYLES as React.CSSProperties}>
+      <RawInputSlider
+        {...props}
+        data-testid="test-input-slider"
+        marks={marks ? customMarks : false}
+      />
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputSlider/InputSlider.namespace-test.tsx b/packages/components/src/core/InputSlider/__tests__/InputSlider.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/InputSlider/InputSlider.namespace-test.tsx
rename to packages/components/src/core/InputSlider/__tests__/InputSlider.namespace-test.tsx
diff --git a/packages/components/src/core/InputSlider/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputSlider/__tests__/__snapshots__/index.test.tsx.snap
similarity index 98%
rename from packages/components/src/core/InputSlider/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/InputSlider/__tests__/__snapshots__/index.test.tsx.snap
index 5835fc0b6..4f38a978b 100644
--- a/packages/components/src/core/InputSlider/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputSlider/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<InputSlider /> Default story renders snapshot 1`] = `
   style="height: 180px; margin-left: 20px; margin-top: 15px; width: 180px;"
 >
   <span
-    class="MuiSlider-root MuiSlider-marked MuiSlider-colorPrimary MuiSlider-sizeMedium css-dd909t-MuiSlider-root"
+    class="MuiSlider-root MuiSlider-marked MuiSlider-colorPrimary MuiSlider-sizeMedium css-4b79pz-MuiSlider-root"
   >
     <span
       class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
diff --git a/packages/components/src/core/InputSlider/index.test.tsx b/packages/components/src/core/InputSlider/__tests__/index.test.tsx
similarity index 91%
rename from packages/components/src/core/InputSlider/index.test.tsx
rename to packages/components/src/core/InputSlider/__tests__/index.test.tsx
index 454770a43..efeaa4dbd 100644
--- a/packages/components/src/core/InputSlider/index.test.tsx
+++ b/packages/components/src/core/InputSlider/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/InputSlider/index.stories.tsx b/packages/components/src/core/InputSlider/index.stories.tsx
deleted file mode 100644
index 9790565c4..000000000
--- a/packages/components/src/core/InputSlider/index.stories.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import RawInputSlider from "./index";
-
-const generateCustomMarks = (min: number, max: number) => {
-  return [
-    {
-      label: min,
-      value: min,
-    },
-    {
-      label: ((max - min) / 2 + min).toFixed(0),
-      value: (max - min) / 2 + min,
-    },
-    {
-      label: max,
-      value: max,
-    },
-  ];
-};
-
-const DemoWrapperStyles = {
-  height: 180,
-  marginLeft: 20,
-  marginTop: 15,
-  width: 180,
-};
-
-const InputSlider = (props: Args): JSX.Element => {
-  const { marks, max, min } = props;
-
-  const customMarks = generateCustomMarks(min, max);
-
-  return (
-    <div style={DemoWrapperStyles as React.CSSProperties}>
-      <RawInputSlider {...props} marks={marks ? customMarks : false} />
-    </div>
-  );
-};
-
-export default {
-  argTypes: {
-    defaultValue: {
-      control: {
-        type: "number",
-      },
-    },
-    disabled: {
-      control: { type: "boolean" },
-    },
-    marks: {
-      control: {
-        type: "boolean",
-      },
-    },
-    max: {
-      control: {
-        type: "number",
-      },
-    },
-    min: {
-      control: {
-        type: "number",
-      },
-    },
-    orientation: {
-      control: {
-        type: "radio",
-      },
-      options: ["horizontal", "vertical"],
-    },
-    step: {
-      control: {
-        type: "number",
-      },
-    },
-    valueLabelDisplay: {
-      control: {
-        labels: ["auto", "off", "on"],
-        type: "select",
-      },
-      options: ["auto", "off", "on"],
-    },
-  },
-  component: InputSlider,
-  parameters: {
-    axe: {
-      disabledRules: [
-        // FIXME - inputs should have labels
-        "label",
-      ],
-    },
-  },
-  title: "Inputs/InputSlider",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    defaultValue: [15, 85],
-    disabled: false,
-    marks: true,
-    max: 100,
-    min: 0,
-    orientation: "horizontal",
-    step: 5,
-    valueLabelDisplay: "on",
-  },
-};
-
-// Live Preview
-
-const storyRow = {
-  display: "grid",
-  gridColumnGap: 40,
-  gridTemplateColumns: "repeat(2, 180px)",
-  margin: "15px 0 0 20px",
-};
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  const { marks, max, min } = props;
-
-  const customMarks = generateCustomMarks(min, max);
-
-  return (
-    <div style={storyRow as React.CSSProperties}>
-      <div style={{ gridArea: "1/1/2/2" }}>
-        <RawInputSlider
-          step={5}
-          valueLabelDisplay="on"
-          {...props}
-          defaultValue={85}
-          marks={marks ? customMarks : false}
-          orientation="horizontal"
-        />
-      </div>
-
-      <div style={{ gridArea: "1/2/2/3" }}>
-        <RawInputSlider
-          step={5}
-          valueLabelDisplay="on"
-          {...props}
-          marks={marks ? customMarks : false}
-          orientation="horizontal"
-        />
-      </div>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  args: {
-    defaultValue: [15, 85],
-    disabled: false,
-    marks: true,
-    max: 100,
-    min: 0,
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  const { marks, max, min } = props;
-
-  const customMarks = generateCustomMarks(min, max);
-
-  return (
-    <div style={DemoWrapperStyles as React.CSSProperties}>
-      <RawInputSlider
-        {...props}
-        data-testid="test-input-slider"
-        marks={marks ? customMarks : false}
-      />
-    </div>
-  );
-};
-
-export const Test = {
-  args: {
-    defaultValue: 15,
-    max: 100,
-    min: 0,
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} data-testid="input-slider" />,
-};
diff --git a/packages/components/src/core/InputSlider/index.tsx b/packages/components/src/core/InputSlider/index.tsx
index b87da9e70..777a7a161 100644
--- a/packages/components/src/core/InputSlider/index.tsx
+++ b/packages/components/src/core/InputSlider/index.tsx
@@ -8,7 +8,7 @@ export type InputSliderProps = InputSliderExtraProps;
  */
 const InputSlider = forwardRef<HTMLSpanElement, InputSliderExtraProps>(
   (props, ref) => {
-    return <StyledSlider ref={ref} {...props} />;
+    return <StyledSlider ref={ref} {...props} orientation="horizontal" />;
   }
 );
 
diff --git a/packages/components/src/core/InputSlider/style.ts b/packages/components/src/core/InputSlider/style.ts
index 6b6b318bd..46a3434a1 100644
--- a/packages/components/src/core/InputSlider/style.ts
+++ b/packages/components/src/core/InputSlider/style.ts
@@ -1,97 +1,103 @@
-import { Slider, SliderProps } from "@mui/material";
+import { Slider, SliderProps, sliderClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
   fontBodyXxs,
+  fontBodyXxxs,
   getColors,
   getCorners,
-} from "../styles";
+  getSemanticComponentColors,
+  getSemanticTextColors,
+  getShadows,
+} from "src/core/styles";
 
-export interface InputSliderExtraProps
-  extends Omit<SliderProps, "nonce" | "rev" | "rel" | "autoFocus" | "content">,
-    CommonThemeProps {}
+export interface InputSliderExtraProps extends SliderProps, CommonThemeProps {}
 
 const inputSlider = (props: InputSliderExtraProps) => {
   const corners = getCorners(props);
   const colors = getColors(props);
+  const shadows = getShadows(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return `
-  position: relative;
-
-  .MuiSlider-rail,
-  .MuiSlider-track {
-    border-radius: 2px;
-  }
-
-  .MuiSlider-rail {
-    background-color: ${colors?.gray[200]};
-  }
-  
-  .MuiSlider-track {
-    background-color: ${colors?.primary[400]};
-  }
-
-  .MuiSlider-thumb {
-    height: 14px;
-    width: 14px;
-    background-color: ${colors?.primary[400]};
-
-    &.Mui-focusVisible, &:hover, &:focus, &:active {
-      box-shadow: none;
-    }
-  }
-
-  .MuiSlider-thumb::before {
-    display: none;
-  }
-
-  .MuiSlider-thumb::after {
-    background-color: white !important;
-    height: 6px !important;
-    width: 6px !important;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .MuiSlider-valueLabel {
-    padding: 2px 4px;
-    color: black;
-    background-color: ${colors?.primary[200]};
-    border-radius: ${corners?.m}px;
-    left: unset; 
-    top: -3px;
-
-    &::before {
+    position: relative;
+
+    .${sliderClasses.rail},
+    .${sliderClasses.track} {
+      border-radius: 2px;
+    }
+
+    .${sliderClasses.rail} {
+      background-color: ${semanticComponentColors?.base?.surfaceTertiary};
+    }
+    
+    .${sliderClasses.track} {
+      background-color: ${semanticComponentColors?.accent?.fill};
+    }
+
+    .${sliderClasses.thumb} {
+      height: 14px;
+      width: 14px;
+      background-color: ${semanticComponentColors?.accent?.fill};
+
+      &.${sliderClasses.focusVisible}, &:hover, &:focus, &:active {
+        box-shadow: ${shadows?.none};
+      }
+    }
+
+    .${sliderClasses.thumb}::before {
       display: none;
     }
 
-    & * {
-      background: transparent;
+    .${sliderClasses.thumb}::after {
+      background-color: ${semanticComponentColors?.base?.surface} !important;
+      height: 6px !important;
+      width: 6px !important;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .${sliderClasses.valueLabel} {
+      padding: 2px 4px;
       color: black;
-      transform: none;
-      width: unset;
-      height: unset;
+      background-color: ${semanticComponentColors?.accent?.surface};
+      border-radius: ${corners?.m}px;
+      left: unset; 
+      top: -3px;
+
+      &::before {
+        display: none;
+      }
+
+      & * {
+        background: transparent;
+        color: ${semanticTextColors?.base?.primary};
+        transform: none;
+        width: unset;
+        height: unset;
+      }
     }
-  }
 
-  .MuiSlider-mark {
-    background-color: ${colors?.gray[400]};
-    opacity: 1;
-  }
+    .${sliderClasses.mark} {
+      background-color: ${colors?.gray[400]};
+      opacity: 1;
+    }
 
-  .MuiSlider-mark.MuiSlider-markActive {
-    background-color: white;
-  }
+    .${sliderClasses.mark}.${sliderClasses.markActive} {
+      background-color: ${semanticComponentColors?.base?.surface};
+    }
 
-  .MuiSlider-markLabel {
-    color: ${colors?.gray[500]}
-  }
+    .${sliderClasses.markLabel} {
+      ${fontBodyXxxs(props)?.styles}
+      color: ${colors?.gray[500]};
+    }
 
-  .MuiSlider-markLabelActive {
-    color: black;
-  }
+    .${sliderClasses.markLabelActive} {
+      color: ${semanticTextColors?.base?.primary};
+    }
   `;
 };
 
@@ -100,86 +106,61 @@ const horizontal = (props: InputSliderExtraProps) => {
   const lastMarkIndex = Array.isArray(marks) ? marks.length - 1 : null;
 
   return `
-    .MuiSlider-rail,
-    .MuiSlider-track {
+    .${sliderClasses.rail},
+    .${sliderClasses.track} {
       border: none;
       height: 4px;
     }
 
     // Adjust the position of the first mark by moving it 2px to the right to fit it inside the track
-    span[data-index="0"].MuiSlider-mark {
+    span[data-index="0"].${sliderClasses.mark} {
       left: 2px !important;
     }
 
     // Adjust the position of the last mark by moving it 2px to the left to fit it inside the track
-    span[data-index="${lastMarkIndex}"].MuiSlider-mark {
+    span[data-index="${lastMarkIndex}"].${sliderClasses.mark} {
       left: calc(100% - 2px) !important;
     }
     
-    .MuiSlider-markLabel {
+    .${sliderClasses.markLabel} {
       top: 26px;
     }
 
-    .Mui-disabled .MuiSlider-track {
-      border: none;
-    }
-  `;
-};
-
-const vertical = (props: InputSliderExtraProps) => {
-  const { marks } = props;
-  const lastMarkIndex = Array.isArray(marks) ? marks.length - 1 : null;
-
-  return `  
-    .MuiSlider-rail,
-    .MuiSlider-track {
+    .${sliderClasses.disabled} .${sliderClasses.track} {
       border: none;
-      width: 4px;
-    }
-
-    // Adjust the position of the first mark by moving it 2px up to fit it inside the track.
-    span[data-index="0"].MuiSlider-mark {
-      bottom: 2px !important;
-    }
-
-    // Adjust the position of the last mark by moving it 2px down to fit it inside the track.
-    span[data-index="${lastMarkIndex}"].MuiSlider-mark {
-      bottom: calc(100% - 2px) !important;
-    }
-
-    .MuiSlider-markLabel {
-      left: 26px;
     }
   `;
 };
 
 const disabledSlider = (props: InputSliderExtraProps) => {
   const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return `
-    .MuiSlider-track {
-      background-color: ${colors?.gray[300]};
+    .${sliderClasses.track} {
+      background-color: ${semanticComponentColors?.base?.fillDisabled};
     }
 
-    .MuiSlider-thumb.Mui-disabled {
-      background-color: ${colors?.gray[300]};
+    .${sliderClasses.thumb}.${sliderClasses.disabled} {
+      background-color: ${semanticComponentColors?.base?.fillDisabled};
     }
 
-    .MuiSlider-valueLabel {
+    .${sliderClasses.valueLabel} {
       color: ${colors?.gray[300]};
-      background-color: ${colors?.gray[100]};
+      background-color: ${semanticComponentColors?.base?.surfaceSecondary};
       
       & * {
-        color: ${colors?.gray[300]};
+        color: ${semanticTextColors?.base?.disabled};
       }
     }
 
-    .MuiSlider-markLabel {
-      color: ${colors?.gray[300]}
+    .${sliderClasses.markLabel} {
+      color: ${semanticTextColors?.base?.disabled}
     }
 
-    .MuiSlider-mark {
-      background-color: ${colors?.gray[300]};
+    .${sliderClasses.mark} {
+      background-color: ${semanticComponentColors?.base?.fillDisabled};
     }
   `;
 };
@@ -188,11 +169,11 @@ export const StyledSlider = styled(Slider)`
   ${fontBodyXxs}
 
   ${(props: InputSliderExtraProps) => {
-    const { orientation, disabled } = props;
+    const { disabled } = props;
 
     return `
       ${inputSlider(props)}
-      ${orientation === "vertical" ? vertical(props) : horizontal(props)}
+      ${horizontal(props)}
       ${disabled ? disabledSlider(props) : ""}
     `;
   }}
diff --git a/packages/components/src/core/InputText/__storybook__/constants.ts b/packages/components/src/core/InputText/__storybook__/constants.ts
new file mode 100644
index 000000000..91417ba0a
--- /dev/null
+++ b/packages/components/src/core/InputText/__storybook__/constants.ts
@@ -0,0 +1,17 @@
+export const INPUT_TEXT_EXCLUDED_CONTROLS = [
+  "disabled",
+  "hideLabel",
+  "id",
+  "intent",
+  "label",
+  "placeholder",
+  "sdsStage",
+  "sdsType",
+];
+
+export const INPUT_TEXT_LIVE_PREVIEW_ROW_STYLES = {
+  alignItems: "flex-start",
+  display: "flex",
+  flexDirection: "row",
+  gap: "24px",
+};
diff --git a/packages/components/src/core/InputText/__storybook__/index.stories.tsx b/packages/components/src/core/InputText/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..ed4a92c10
--- /dev/null
+++ b/packages/components/src/core/InputText/__storybook__/index.stories.tsx
@@ -0,0 +1,85 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { InputText } from "./stories/default";
+import { INPUT_TEXT_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    disabled: {
+      control: { type: "boolean" },
+    },
+    hideLabel: {
+      control: { type: "boolean" },
+    },
+    id: {
+      control: { type: "text" },
+      required: true,
+    },
+    intent: {
+      control: { type: "radio" },
+      options: ["default", "error", "warning"],
+    },
+    label: {
+      control: { type: "text" },
+    },
+    placeholder: {
+      control: { type: "text" },
+    },
+    sdsStage: {
+      control: { type: "radio" },
+      options: ["default", "userInput"],
+    },
+    sdsType: {
+      control: { type: "radio" },
+      options: ["textField", "textArea"],
+    },
+  },
+  component: InputText,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Inputs/InputText",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    disabled: false,
+    hideLabel: false,
+    id: "Test",
+    label: "Label",
+    placeholder: "Value",
+    sdsType: "textField",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: INPUT_TEXT_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: INPUT_TEXT_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/InputText/__storybook__/stories/default.tsx b/packages/components/src/core/InputText/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..d4250e8f1
--- /dev/null
+++ b/packages/components/src/core/InputText/__storybook__/stories/default.tsx
@@ -0,0 +1,29 @@
+import { Args } from "@storybook/react";
+import RawInputText from "src/core/InputText";
+
+export const InputText = (props: Args): JSX.Element => {
+  const {
+    id,
+    intent,
+    disabled,
+    hideLabel,
+    placeholder,
+    label,
+    sdsType,
+    sdsStage,
+  } = props;
+  return (
+    <RawInputText
+      id={id}
+      sdsType={sdsType}
+      sdsStage={sdsStage}
+      label={label}
+      placeholder={placeholder}
+      intent={intent}
+      hideLabel={hideLabel}
+      disabled={disabled}
+      name="input-text-name"
+      autoComplete="off"
+    />
+  );
+};
diff --git a/packages/components/src/core/InputText/__storybook__/stories/livePreview.tsx b/packages/components/src/core/InputText/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..a4cfa25ee
--- /dev/null
+++ b/packages/components/src/core/InputText/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,29 @@
+import { Args } from "@storybook/react";
+import RawInputText from "src/core/InputText";
+import { INPUT_TEXT_LIVE_PREVIEW_ROW_STYLES } from "../constants";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <div style={INPUT_TEXT_LIVE_PREVIEW_ROW_STYLES as React.CSSProperties}>
+      <RawInputText
+        id="textFieldPreview"
+        label="Label"
+        {...props}
+        sdsType="textField"
+        hideLabel
+        placeholder="Value"
+        style={{ width: "200px" }}
+      />
+      <RawInputText
+        id="textAreaPreview"
+        label="Label"
+        {...props}
+        sdsType="textArea"
+        hideLabel
+        placeholder="Value"
+        style={{ minWidth: "200px" }}
+        inputProps={{ style: { minWidth: "200px" } }}
+      />
+    </div>
+  );
+};
diff --git a/packages/components/src/core/InputText/__storybook__/stories/test.tsx b/packages/components/src/core/InputText/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..76eed8294
--- /dev/null
+++ b/packages/components/src/core/InputText/__storybook__/stories/test.tsx
@@ -0,0 +1,43 @@
+import { FormControl } from "@mui/material";
+import { Args } from "@storybook/react";
+import RawInputText from "src/core/InputText";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  return (
+    <FormControl>
+      <RawInputText
+        {...props}
+        id="test-textField"
+        sdsType="textField"
+        label="Label"
+        hideLabel={false}
+        placeholder="Value"
+        data-testid="inputTextBase"
+      />
+
+      {/* @ts-expect-error testing fail state */}
+      <RawInputText
+        sdsType="textField"
+        hideLabel={false}
+        data-testid="inputTextFail"
+      />
+
+      <RawInputText
+        id="test-hide-label"
+        sdsType="textField"
+        label="Hidden Label"
+        hideLabel
+        data-testid="inputTextHideLabel"
+      />
+
+      <RawInputText
+        id="test-textArea"
+        sdsType="textArea"
+        label="Label"
+        hideLabel={false}
+        placeholder="Value"
+        data-testid="inputTextArea"
+      />
+    </FormControl>
+  );
+};
diff --git a/packages/components/src/core/InputText/InputText.namespace-test.tsx b/packages/components/src/core/InputText/__tests__/InputText.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/InputText/InputText.namespace-test.tsx
rename to packages/components/src/core/InputText/__tests__/InputText.namespace-test.tsx
diff --git a/packages/components/src/core/InputText/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputText/__tests__/__snapshots__/index.test.tsx.snap
similarity index 87%
rename from packages/components/src/core/InputText/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/InputText/__tests__/__snapshots__/index.test.tsx.snap
index 51a0e6c4d..838935ecc 100644
--- a/packages/components/src/core/InputText/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputText/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<InputText /> Default story renders snapshot 1`] = `
 <label
-  class="css-19c61dz"
+  class="css-1n9rsuo"
   for="Test"
 >
   Label
diff --git a/packages/components/src/core/InputText/index.test.tsx b/packages/components/src/core/InputText/__tests__/index.test.tsx
similarity index 95%
rename from packages/components/src/core/InputText/index.test.tsx
rename to packages/components/src/core/InputText/__tests__/index.test.tsx
index 283b1caa3..642866b2a 100644
--- a/packages/components/src/core/InputText/index.test.tsx
+++ b/packages/components/src/core/InputText/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/InputText/index.stories.tsx b/packages/components/src/core/InputText/index.stories.tsx
deleted file mode 100644
index 6e31e732d..000000000
--- a/packages/components/src/core/InputText/index.stories.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { FormControl } from "@mui/material";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import RawInputText from "./index";
-
-const InputText = (props: Args): JSX.Element => {
-  const {
-    id,
-    intent,
-    disabled,
-    hideLabel,
-    placeholder,
-    label,
-    sdsType,
-    sdsStage,
-  } = props;
-  return (
-    <RawInputText
-      id={id}
-      sdsType={sdsType}
-      sdsStage={sdsStage}
-      label={label}
-      placeholder={placeholder}
-      intent={intent}
-      hideLabel={hideLabel}
-      disabled={disabled}
-      name="input-text-name"
-      autoComplete="off"
-    />
-  );
-};
-
-export default {
-  argTypes: {
-    disabled: {
-      control: { type: "boolean" },
-    },
-    hideLabel: {
-      control: { type: "boolean" },
-    },
-    id: {
-      control: { type: "text" },
-      required: true,
-    },
-    intent: {
-      control: { type: "radio" },
-      options: ["default", "error", "warning"],
-    },
-    label: {
-      control: { type: "text" },
-      required: true,
-    },
-    placeholder: {
-      control: { type: "text" },
-    },
-    sdsStage: {
-      control: { type: "radio" },
-      options: ["default", "userInput"],
-    },
-    sdsType: {
-      control: { type: "radio" },
-      options: ["textField", "textArea"],
-    },
-  },
-  component: InputText,
-  title: "Inputs/InputText",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    disabled: false,
-    hideLabel: false,
-    id: "Test",
-    label: "Label",
-    placeholder: "Value",
-    sdsType: "textField",
-  },
-};
-
-// Live Preview
-
-const storyRow = {
-  alignItems: "flex-start",
-  display: "flex",
-  flexDirection: "row",
-  gap: "24px",
-};
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  return (
-    <div style={storyRow as React.CSSProperties}>
-      <RawInputText
-        {...props}
-        id="textFieldPreview"
-        sdsType="textField"
-        label="Label"
-        hideLabel
-        placeholder="Value"
-        style={{ width: "200px" }}
-      />
-      <RawInputText
-        {...props}
-        id="textAreaPreview"
-        sdsType="textArea"
-        label="Label"
-        hideLabel
-        placeholder="Value"
-        style={{ minWidth: "200px" }}
-        inputProps={{ style: { minWidth: "200px" } }}
-      />
-    </div>
-  );
-};
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  return (
-    <FormControl>
-      <RawInputText
-        {...props}
-        id="test-textField"
-        sdsType="textField"
-        label="Label"
-        hideLabel={false}
-        placeholder="Value"
-        data-testid="inputTextBase"
-      />
-
-      {/* @ts-expect-error testing fail state */}
-      <RawInputText
-        sdsType="textField"
-        hideLabel={false}
-        data-testid="inputTextFail"
-      />
-
-      <RawInputText
-        id="test-hide-label"
-        sdsType="textField"
-        label="Hidden Label"
-        hideLabel
-        data-testid="inputTextHideLabel"
-      />
-
-      <RawInputText
-        id="test-textArea"
-        sdsType="textArea"
-        label="Label"
-        hideLabel={false}
-        placeholder="Value"
-        data-testid="inputTextArea"
-      />
-    </FormControl>
-  );
-};
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/InputText/index.tsx b/packages/components/src/core/InputText/index.tsx
index 67af89421..c68db1d62 100644
--- a/packages/components/src/core/InputText/index.tsx
+++ b/packages/components/src/core/InputText/index.tsx
@@ -3,7 +3,7 @@ import { forwardRef, useState } from "react";
 import { InputTextExtraProps, StyledInputBase, StyledLabel } from "./style";
 
 interface AccessibleInputTextProps {
-  label: string;
+  label: React.ReactNode;
   placeholder?: string;
   id: string;
 }
@@ -49,9 +49,16 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       return <></>;
     }
 
+    const finalLabel =
+      typeof label === "string" ? (
+        <StyledLabel htmlFor={id}>{label}</StyledLabel>
+      ) : (
+        label
+      );
+
     return (
       <>
-        {!hideLabel && <StyledLabel htmlFor={id}>{label}</StyledLabel>}
+        {!hideLabel && finalLabel}
         <StyledInputBase
           ref={ref}
           inputProps={inputProps}
diff --git a/packages/components/src/core/InputText/style.ts b/packages/components/src/core/InputText/style.ts
index 4b4875cf6..478f48116 100644
--- a/packages/components/src/core/InputText/style.ts
+++ b/packages/components/src/core/InputText/style.ts
@@ -9,12 +9,13 @@ import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
   fontBodyS,
+  fontBodyXs,
   getBorders,
   getColors,
   getCorners,
+  getSemanticComponentColors,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface InputTextExtraProps extends CommonThemeProps {
   disabled?: boolean;
@@ -28,27 +29,27 @@ const sdsPropNames = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
 
 const error = (props: InputTextExtraProps): SerializedStyles => {
   const borders = getBorders(props);
-  const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.error[400]};
+      border: ${borders?.negative?.default};
     }
 
     .${outlinedInputClasses.root}:hover
       .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.error[400]};
+      border: ${borders?.negative?.default};
     }
 
     .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
       .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.error[400]};
+        border: ${borders?.negative?.default};
       }
 
       .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
         cursor: default;
         svg {
-          color: ${colors?.gray[500]};
+          color: ${semanticComponentColors?.base?.icon};
         }
       }
     }
@@ -57,27 +58,27 @@ const error = (props: InputTextExtraProps): SerializedStyles => {
 
 const warning = (props: InputTextExtraProps): SerializedStyles => {
   const borders = getBorders(props);
-  const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.warning[400]};
+      border: ${borders?.notice?.default};
     }
 
     .${outlinedInputClasses.root}:hover
       .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.warning[400]};
+      border: ${borders?.notice?.default};
     }
 
     .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
       .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.warning[400]};
+        border: ${borders?.notice?.default};
       }
 
       .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
         cursor: default;
         svg {
-          color: ${colors?.gray[500]};
+          color: ${semanticComponentColors?.base?.icon};
         }
       }
     }
@@ -91,11 +92,11 @@ const disabledStyled = (props: InputTextExtraProps): SerializedStyles => {
   return css`
     .${outlinedInputClasses.disabled} {
       .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.gray[300]};
+        border: ${borders?.base?.disabled};
       }
 
       &:hover .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.gray[300]};
+        border: ${borders?.base?.disabled};
       }
 
       &::placeholder {
@@ -107,14 +108,14 @@ const disabledStyled = (props: InputTextExtraProps): SerializedStyles => {
 };
 
 const textArea = (props: InputTextExtraProps): SerializedStyles => {
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
 
   return css`
     .${outlinedInputClasses.multiline} {
-      padding: ${spacings?.xxs}px;
+      padding: ${spaces?.xxs}px;
 
       > .${outlinedInputClasses.inputMultiline} {
-        padding: ${spacings?.xxs}px ${spacings?.m}px ${spacings?.m}px;
+        padding: ${spaces?.xxs}px ${spaces?.m}px ${spaces?.m}px;
         resize: both;
       }
     }
@@ -127,10 +128,10 @@ const userInput = (props: InputTextExtraProps): SerializedStyles => {
 
   const border =
     intent === "error"
-      ? borders?.error[400]
+      ? borders?.negative?.default
       : intent === "warning"
-        ? borders?.warning[400]
-        : borders?.primary[400];
+        ? borders?.notice?.default
+        : borders?.accent?.default;
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
@@ -149,12 +150,10 @@ export const StyledLabel = styled("label")`
   ${fontBodyS}
 
   ${(props) => {
-    const typography = getTypography(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
-      font-family: ${typography?.fontFamily};
-      margin-bottom: ${spacings?.xxs}px;
+      margin-bottom: ${spaces?.xxs}px;
     `;
   }}
 `;
@@ -167,36 +166,38 @@ export const StyledInputBase = styled(TextField, {
   ${(props: InputTextExtraProps) => {
     const { intent, sdsType, sdsStage, disabled } = props;
 
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
     const borders = getBorders(props);
     const corners = getCorners(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return css`
-      margin-bottom: ${spacings?.l}px;
-      margin-right: ${spacings?.m}px;
+      margin-bottom: ${spaces?.l}px;
+      margin-right: ${spaces?.m}px;
       min-width: 160px;
       display: block;
 
       .${outlinedInputClasses.inputSizeSmall} {
-        padding: ${spacings?.xs}px ${spacings?.l}px;
-        height: 34px;
+        ${fontBodyXs(props)}
+        padding: ${spaces?.xs}px ${spaces?.m}px;
+        height: unset;
         box-sizing: border-box;
-        background-color: #fff;
+        background-color: ${semanticComponentColors?.base?.surfacePrimary};
+      }
 
-        .${outlinedInputClasses.notchedOutline} {
-          border-radius: ${corners?.m}px;
-          border: ${borders?.gray[400]};
-        }
+      .${outlinedInputClasses.notchedOutline} {
+        border-radius: ${corners?.m}px;
+        border: ${borders?.base?.default};
       }
 
       .${outlinedInputClasses.root}:hover
         .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.gray[500]};
+        border-color: ${semanticComponentColors?.base?.borderHover};
       }
 
       .${outlinedInputClasses.root}.${outlinedInputClasses.focused}
         .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.primary[400]};
+        border: ${borders?.accent?.default};
       }
 
       ${sdsType === "textArea" && textArea(props)}
diff --git a/packages/components/src/core/InputToggle/__storybook__/constants.ts b/packages/components/src/core/InputToggle/__storybook__/constants.ts
new file mode 100644
index 000000000..a2f154990
--- /dev/null
+++ b/packages/components/src/core/InputToggle/__storybook__/constants.ts
@@ -0,0 +1 @@
+export const INPUT_TOGGLE_EXCLUDED_CONTROLS = ["disabled"];
diff --git a/packages/components/src/core/InputToggle/index.stories.tsx b/packages/components/src/core/InputToggle/__storybook__/index.stories.tsx
similarity index 62%
rename from packages/components/src/core/InputToggle/index.stories.tsx
rename to packages/components/src/core/InputToggle/__storybook__/index.stories.tsx
index ce2ea4672..f6ff375cf 100644
--- a/packages/components/src/core/InputToggle/index.stories.tsx
+++ b/packages/components/src/core/InputToggle/__storybook__/index.stories.tsx
@@ -1,9 +1,9 @@
 import { Args, Meta } from "@storybook/react";
-import RawInputToggle from "./index";
-
-const InputToggle = (props: Args): JSX.Element => {
-  return <RawInputToggle {...props} />;
-};
+import RawInputToggle from "../index";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { InputToggle } from "./stories/default";
+import { INPUT_TOGGLE_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
 
 export default {
   argTypes: {
@@ -20,8 +20,9 @@ export default {
         "label",
       ],
     },
+    badges: [BADGE.STABLE],
   },
-  title: "Inputs/InputToggle",
+  title: "Components/Inputs/InputToggle",
 } as Meta;
 
 // Default
@@ -30,12 +31,11 @@ export const Default = {};
 
 // Live Preview
 
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  return <RawInputToggle {...props} id="togglePreview" />;
-};
-
 export const LivePreview = {
   parameters: {
+    controls: {
+      exclude: INPUT_TOGGLE_EXCLUDED_CONTROLS,
+    },
     snapshot: {
       skip: true,
     },
@@ -47,6 +47,9 @@ export const LivePreview = {
 
 export const Test = {
   parameters: {
+    controls: {
+      exclude: INPUT_TOGGLE_EXCLUDED_CONTROLS,
+    },
     snapshot: {
       skip: true,
     },
diff --git a/packages/components/src/core/InputToggle/__storybook__/stories/default.tsx b/packages/components/src/core/InputToggle/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..c33daa274
--- /dev/null
+++ b/packages/components/src/core/InputToggle/__storybook__/stories/default.tsx
@@ -0,0 +1,6 @@
+import { Args } from "@storybook/react";
+import RawInputToggle from "src/core/InputToggle";
+
+export const InputToggle = (props: Args): JSX.Element => {
+  return <RawInputToggle {...props} />;
+};
diff --git a/packages/components/src/core/InputToggle/__storybook__/stories/livePreview.tsx b/packages/components/src/core/InputToggle/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..f0253d7e7
--- /dev/null
+++ b/packages/components/src/core/InputToggle/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,6 @@
+import { Args } from "@storybook/react";
+import RawInputToggle from "src/core/InputToggle";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  return <RawInputToggle {...props} id="togglePreview" />;
+};
diff --git a/packages/components/src/core/InputToggle/InputToggle.namespace-test.tsx b/packages/components/src/core/InputToggle/__tests__/InputToggle.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/InputToggle/InputToggle.namespace-test.tsx
rename to packages/components/src/core/InputToggle/__tests__/InputToggle.namespace-test.tsx
diff --git a/packages/components/src/core/InputToggle/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputToggle/__tests__/__snapshots__/index.test.tsx.snap
similarity index 91%
rename from packages/components/src/core/InputToggle/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/InputToggle/__tests__/__snapshots__/index.test.tsx.snap
index e2dad4459..d9ae17542 100644
--- a/packages/components/src/core/InputToggle/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputToggle/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<InputToggle /> Default story renders snapshot 1`] = `
 <span
-  class="MuiSwitch-root MuiSwitch-sizeMedium css-1lu0c44-MuiSwitch-root"
+  class="MuiSwitch-root MuiSwitch-sizeMedium css-1r4ynxi-MuiSwitch-root"
 >
   <span
     class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase"
diff --git a/packages/components/src/core/InputToggle/index.test.tsx b/packages/components/src/core/InputToggle/__tests__/index.test.tsx
similarity index 90%
rename from packages/components/src/core/InputToggle/index.test.tsx
rename to packages/components/src/core/InputToggle/__tests__/index.test.tsx
index 3a8546d15..577010495 100644
--- a/packages/components/src/core/InputToggle/index.test.tsx
+++ b/packages/components/src/core/InputToggle/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/InputToggle/style.ts b/packages/components/src/core/InputToggle/style.ts
index 2d5d060f2..d35e8b696 100644
--- a/packages/components/src/core/InputToggle/style.ts
+++ b/packages/components/src/core/InputToggle/style.ts
@@ -1,4 +1,4 @@
-import { Switch, SwitchProps } from "@mui/material";
+import { Switch, SwitchProps, switchClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
@@ -6,9 +6,11 @@ import {
   getBorders,
   getColors,
   getCorners,
+  getSemanticComponentColors,
+  getSemanticTextColors,
+  getShadows,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface InputToggleExtraProps extends SwitchProps, CommonThemeProps {
   offLabel?: string;
@@ -20,6 +22,9 @@ const toggle = (props: InputToggleExtraProps) => {
   const { disabled } = props;
   const corners = getCorners(props);
   const spaces = getSpaces(props);
+  const shadows = getShadows(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+
   const TOGGLE_HEIGHT = 18;
 
   return `
@@ -30,7 +35,7 @@ const toggle = (props: InputToggleExtraProps) => {
     line-height: 18px;
     padding: ${spaces?.xxs}px;
 
-    .MuiSwitch-switchBase {
+    .${switchClasses.switchBase} {
       font: inherit;
       margin: ${spaces?.xxs}px;
       padding: 0;
@@ -41,14 +46,14 @@ const toggle = (props: InputToggleExtraProps) => {
       }
     }
 
-    .MuiSwitch-thumb {
+    .${switchClasses.thumb} {
       height: ${TOGGLE_HEIGHT}px;
       width: ${TOGGLE_HEIGHT}px;
-      box-shadow: none;
+      box-shadow: ${shadows?.none};
     }
 
-    .MuiSwitch-track {
-      background-color: white;
+    .${switchClasses.track} {
+      background-color: ${semanticComponentColors?.base?.surfacePrimary};
       width: unset;
     }
   `;
@@ -59,17 +64,18 @@ const toggleOn = (props: InputToggleExtraProps) => {
   const borders = getBorders(props);
   const colors = getColors(props);
   const spaces = getSpaces(props);
-  const typography = getTypography(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return `
-    outline: ${disabled ? borders?.primary[300] : borders?.primary[400]};
+    outline: ${disabled ? borders?.accent?.disabled : borders?.accent?.default};
 
-    .MuiSwitch-thumb {
-      color: ${disabled ? colors?.primary[300] : colors?.primary[400]};
+    .${switchClasses.thumb} {
+      color: ${disabled ? semanticComponentColors?.accent?.borderDisabled : semanticComponentColors?.accent?.border};
       margin-left: ${spaces?.s}px;
     }
 
-    .MuiSwitch-switchBase {
+    .${switchClasses.switchBase} {
       left: unset;
       right: 0;
       transform: unset;
@@ -79,20 +85,18 @@ const toggleOn = (props: InputToggleExtraProps) => {
       }
 
       &:before {
-        color: ${disabled ? colors?.gray[300] : colors?.gray[600]};
+        color: ${disabled ? semanticTextColors?.base?.disabled : semanticTextColors?.base?.primary};
         content: "${value}";
-        font: inherit;
-        font-family: ${typography?.fontFamily};
       }
     }
 
     ${
       !disabled &&
       `&:hover {
-        outline: ${borders?.primary[500]};
+        outline: ${borders?.accent?.hover};
 
-        .MuiSwitch-thumb {
-          color: ${colors?.primary[500]};
+        .${switchClasses.thumb} {
+          color: ${colors?.blue[500]};
         }
       }`
     }
@@ -102,21 +106,25 @@ const toggleOn = (props: InputToggleExtraProps) => {
 const toggleOff = (props: InputToggleExtraProps) => {
   const { disabled, value } = props;
   const borders = getBorders(props);
-  const colors = getColors(props);
   const spaces = getSpaces(props);
-  const typography = getTypography(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return `
     & {
-      outline: ${disabled ? borders?.gray[300] : borders?.gray[400]};
+      outline: ${disabled ? borders?.base?.disabled : borders?.base?.default};
     }
 
-    .MuiSwitch-thumb {
-      color: ${disabled ? colors?.gray[300] : colors?.gray[400]};
+    .${switchClasses.thumb} {
+      color: ${
+        disabled
+          ? semanticComponentColors?.base?.borderDisabled
+          : semanticComponentColors?.base?.border
+      };
       margin-right: ${spaces?.s}px;
     }
 
-    .MuiSwitch-switchBase {
+    .${switchClasses.switchBase} {
       right: unset;
       left: 0;
       transform: unset;
@@ -126,20 +134,18 @@ const toggleOff = (props: InputToggleExtraProps) => {
       }
 
       &:after {
-        color: ${disabled ? colors?.gray[300] : colors?.gray[500]};
+        color: ${disabled ? semanticTextColors?.base?.disabled : semanticTextColors?.base?.primary};
         content: "${value}";
-        font: inherit;
-        font-family: ${typography?.fontFamily};
       }
     }
 
     ${
       !disabled &&
       `&:hover {
-        outline: ${borders?.gray[500]};
+        outline: ${borders?.base?.black};
 
-        .MuiSwitch-thumb {
-          color: ${colors?.gray[500]};
+        .${switchClasses.thumb} {
+          color: ${semanticComponentColors?.base?.iconHover};
         }
       }`
     }
diff --git a/packages/components/src/core/Link/__storybook__/constants.ts b/packages/components/src/core/Link/__storybook__/constants.ts
new file mode 100644
index 000000000..8af74dd3c
--- /dev/null
+++ b/packages/components/src/core/Link/__storybook__/constants.ts
@@ -0,0 +1 @@
+export const LINK_EXCLUDED_CONTROLS = ["sdsSize", "sdsStyle", "fontWeight"];
diff --git a/packages/components/src/core/Link/__storybook__/index.stories.tsx b/packages/components/src/core/Link/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..95caafaa0
--- /dev/null
+++ b/packages/components/src/core/Link/__storybook__/index.stories.tsx
@@ -0,0 +1,68 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Link } from "./stories/default";
+import { LINK_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { ScreenshotTestDemo } from "./stories/screenshot";
+
+export default {
+  argTypes: {
+    fontWeight: {
+      control: {
+        type: "radio",
+      },
+      options: ["normal", "bold"],
+    },
+    sdsSize: {
+      control: { type: "select" },
+      options: ["s", "xs"],
+    },
+    sdsStyle: {
+      control: { type: "select" },
+      options: ["default", "dashed"],
+    },
+  },
+  component: Link,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Link",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    fontWeight: "normal",
+    sdsSize: "s",
+    sdsStyle: "default",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: LINK_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Screenshot test
+
+export const ScreenshotTest = {
+  parameters: {
+    controls: {
+      exclude: LINK_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <ScreenshotTestDemo {...args} />,
+};
diff --git a/packages/components/src/core/Link/__storybook__/stories/default.tsx b/packages/components/src/core/Link/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..05b29e051
--- /dev/null
+++ b/packages/components/src/core/Link/__storybook__/stories/default.tsx
@@ -0,0 +1,11 @@
+import { Args } from "@storybook/react";
+import RawLink from "src/core/Link";
+
+export const Link = (props: Args): JSX.Element => {
+  const { sdsStyle } = props;
+  return (
+    <RawLink href="/" sdsStyle={sdsStyle} {...props}>
+      Test Link
+    </RawLink>
+  );
+};
diff --git a/packages/components/src/core/Link/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Link/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..7d314a01c
--- /dev/null
+++ b/packages/components/src/core/Link/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,35 @@
+import { EXTRA_SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import { Args } from "@storybook/react";
+import RawLink from "src/core/Link";
+import { StyledWrapper } from "../style";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <StyledWrapper>
+      <div>
+        <p>{EXTRA_SHORT_LOREM_IPSUM}</p>
+        <RawLink href="/" sdsStyle="default" {...props}>
+          Learn More
+        </RawLink>
+      </div>
+      <div>
+        <p style={{ backgroundColor: "#EFF2FC", padding: "10px" }}>
+          Lorem ipsum{" "}
+          <RawLink href="/" sdsStyle="dashed" sdsSize="s" {...props}>
+            dolor sit apsidy
+          </RawLink>{" "}
+          consectetur, adipisicing elit.
+        </p>
+      </div>
+      <div>
+        <p style={{ backgroundColor: "#EFF2FC", padding: "10px" }}>
+          Lorem ipsum{" "}
+          <RawLink href="/" sdsStyle="dashed" component="button" {...props}>
+            button element
+          </RawLink>{" "}
+          consectetur, adipisicing elit.
+        </p>
+      </div>
+    </StyledWrapper>
+  );
+};
diff --git a/packages/components/src/core/Link/__storybook__/stories/screenshot.tsx b/packages/components/src/core/Link/__storybook__/stories/screenshot.tsx
new file mode 100644
index 000000000..90dcd9f2f
--- /dev/null
+++ b/packages/components/src/core/Link/__storybook__/stories/screenshot.tsx
@@ -0,0 +1,136 @@
+import RawLink from "src/core/Link";
+
+export const ScreenshotTestDemo = (): JSX.Element => {
+  const FONT_WEIGHTS = ["normal", "bold"];
+  const SDS_SIZES = ["xs", "s"];
+  const SDS_STYLES = ["default", "dashed"];
+  const PSEUDO_STATES = ["default", "hover", "active", "focus"];
+
+  // loop through all SDS_SIZES
+  return (
+    <>
+      {SDS_SIZES.map((sdsSize) => {
+        return <LinkSize sdsSize={sdsSize} key={sdsSize} />;
+      })}
+    </>
+  );
+
+  function LinkSize({ sdsSize }: { sdsSize: (typeof SDS_SIZES)[number] }) {
+    const STYLE_LEVEL: React.CSSProperties = {
+      fontFamily: "sans-serif",
+      marginRight: 50,
+    };
+    const STYLE_LABEL: React.CSSProperties = {
+      borderWidth: 2,
+      fontSize: "2em",
+      marginBottom: 0,
+    };
+    return (
+      <div style={STYLE_LEVEL}>
+        <p style={STYLE_LABEL}>
+          Size: <b>{sdsSize}</b>
+        </p>
+        {FONT_WEIGHTS.map((fontWeight) => {
+          return (
+            <LinkWeight
+              fontWeight={fontWeight}
+              key={fontWeight}
+              sdsSize={sdsSize}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  function LinkWeight({
+    fontWeight,
+    sdsSize,
+  }: {
+    fontWeight: (typeof FONT_WEIGHTS)[number];
+    sdsSize: (typeof SDS_SIZES)[number];
+  }) {
+    const STYLE_LEVEL: React.CSSProperties = {
+      width: "fit-content",
+    };
+    const STYLE_LABEL: React.CSSProperties = {
+      borderStyle: "solid none none none",
+      borderWidth: 2,
+      fontSize: "1.17em",
+      margin: "20px 0 5px 0",
+      paddingTop: "10px",
+    };
+    return (
+      <div style={STYLE_LEVEL}>
+        <p style={STYLE_LABEL}>
+          Font Weight: <b>{fontWeight}</b>
+        </p>
+        {SDS_STYLES.map((sdsStyle) => {
+          return (
+            <LinkStyle
+              sdsStyle={sdsStyle}
+              sdsSize={sdsSize}
+              fontWeight={fontWeight}
+              key={sdsStyle}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all PSEUDO_STATES + create headers for SDS_STYLES, PSEUDO_STATES
+  function LinkStyle({
+    fontWeight,
+    sdsStyle,
+    sdsSize,
+  }: {
+    fontWeight: (typeof FONT_WEIGHTS)[number];
+    sdsStyle: (typeof SDS_STYLES)[number];
+    sdsSize: (typeof SDS_SIZES)[number];
+  }) {
+    const STYLE_LEVEL: React.CSSProperties = {
+      columnGap: "20px",
+      display: "grid",
+      width: "fit-content",
+    };
+    const STYLE_LABEL: React.CSSProperties = {
+      borderStyle: "solid none none none",
+      borderWidth: 1,
+      fontSize: "0.83em",
+      gridColumn: "1 / 5",
+      margin: "10px 0 5px 0",
+      paddingTop: "10px",
+    };
+    const PSEUDO_STATE_LABEL: React.CSSProperties = {
+      fontSize: "0.67em",
+      marginBottom: 15,
+    };
+    return (
+      <div style={STYLE_LEVEL}>
+        <p style={STYLE_LABEL}>
+          Style: <b>{sdsStyle}</b>
+        </p>
+        {PSEUDO_STATES.map((state) => {
+          return (
+            <div key={`div-${state}`}>
+              <p style={PSEUDO_STATE_LABEL}>
+                State: <b>{state}</b>
+              </p>
+              <RawLink
+                href="/"
+                sdsStyle={sdsStyle}
+                sdsSize={sdsSize}
+                fontWeight={fontWeight}
+                className={`pseudo-${state}`}
+                key={state}
+              >
+                Link
+              </RawLink>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+};
diff --git a/packages/components/src/core/Link/__storybook__/style.ts b/packages/components/src/core/Link/__storybook__/style.ts
new file mode 100644
index 000000000..720899f4c
--- /dev/null
+++ b/packages/components/src/core/Link/__storybook__/style.ts
@@ -0,0 +1,10 @@
+import { styled } from "@mui/material";
+import { fontBodyS } from "src/core/styles";
+
+export const StyledWrapper = styled("div")`
+  ${fontBodyS}
+
+  display: grid;
+  grid-column-gap: 24px;
+  grid-template-columns: repeat(3, 250px);
+`;
diff --git a/packages/components/src/core/Link/Link.namespace-test.tsx b/packages/components/src/core/Link/__tests__/Link.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Link/Link.namespace-test.tsx
rename to packages/components/src/core/Link/__tests__/Link.namespace-test.tsx
diff --git a/packages/components/src/core/Link/index.stories.tsx b/packages/components/src/core/Link/index.stories.tsx
deleted file mode 100644
index 6a1998a80..000000000
--- a/packages/components/src/core/Link/index.stories.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import RawLink, { LinkProps } from "./index";
-
-const Link = (props: LinkProps): JSX.Element => {
-  const { sdsStyle } = props;
-  return (
-    <RawLink href="/" sdsStyle={sdsStyle} {...props}>
-      Test Link
-    </RawLink>
-  );
-};
-
-export default {
-  argTypes: {
-    sdsStyle: {
-      control: { type: "select" },
-      options: ["default", "dashed"],
-    },
-  },
-  component: Link,
-  title: "Link",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    sdsStyle: "default",
-  },
-};
-
-// Live Preview
-
-const livePreviewStyles = {
-  display: "grid",
-  fontFamily: "Open Sans",
-  gridColumnGap: "24px",
-  gridTemplateColumns: "repeat(2, 250px)",
-};
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  return (
-    <div style={livePreviewStyles as React.CSSProperties}>
-      <div>
-        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
-        <RawLink href="/" sdsStyle="default" {...props}>
-          Learn More
-        </RawLink>
-      </div>
-      <p style={{ backgroundColor: "#EFF2FC", padding: "10px" }}>
-        Lorem ipsum{" "}
-        <RawLink href="/" sdsStyle="dashed" {...props}>
-          dolor sit apsidy
-        </RawLink>{" "}
-        consectetur, adipisicing elit.
-      </p>
-      <p style={{ backgroundColor: "#EFF2FC", padding: "10px" }}>
-        Lorem ipsum{" "}
-        <RawLink href="/" sdsStyle="dashed" component="button" {...props}>
-          button element
-        </RawLink>{" "}
-        consectetur, adipisicing elit.
-      </p>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Screenshot test
-const ScreenshotTestDemo = (): JSX.Element => {
-  const SDS_STYLES = ["default", "dashed"];
-  const PSEUDO_STATES = ["default", "hover", "active", "focus"];
-
-  // loop through all SDS_STYLES
-  return (
-    <>
-      {SDS_STYLES.map((sdsStyle) => {
-        return <LinkStyle sdsStyle={sdsStyle} key={sdsStyle} />;
-      })}
-    </>
-  );
-
-  // loop through all PSEUDO_STATES + create headers for SDS_STYLES, PSEUDO_STATES
-  function LinkStyle({ sdsStyle }: { sdsStyle: (typeof SDS_STYLES)[number] }) {
-    const STYLE_LEVEL: React.CSSProperties = {
-      columnGap: "20px",
-      display: "inline-grid",
-      fontFamily: "sans-serif",
-      marginRight: 50,
-    };
-    const STYLE_LABEL: React.CSSProperties = {
-      fontSize: "2em",
-      gridColumn: "1 / 5",
-      marginBottom: 10,
-    };
-    const PSEUDO_STATE_LABEL: React.CSSProperties = {
-      fontSize: "0.67em",
-      marginBottom: 15,
-    };
-    return (
-      <div style={STYLE_LEVEL}>
-        <p style={STYLE_LABEL}>
-          Style: <b>{sdsStyle}</b>
-        </p>
-        {PSEUDO_STATES.map((state) => {
-          return (
-            <div key={`div-${state}`}>
-              <p style={PSEUDO_STATE_LABEL}>
-                State: <b>{state}</b>
-              </p>
-              <RawLink
-                href="/"
-                sdsStyle={sdsStyle}
-                className={`pseudo-${state}`}
-                key={state}
-              >
-                Link text
-              </RawLink>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-};
-
-export const ScreenshotTest = {
-  parameters: {
-    controls: {
-      exclude: ["sdsStyle"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <ScreenshotTestDemo {...args} />,
-};
diff --git a/packages/components/src/core/Link/index.tsx b/packages/components/src/core/Link/index.tsx
index c5a1cd80e..47bb6db6e 100644
--- a/packages/components/src/core/Link/index.tsx
+++ b/packages/components/src/core/Link/index.tsx
@@ -1,7 +1,10 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { LinkProps as RawLinkProps, StyledLink } from "./style";
 
-export type LinkProps<C extends React.ElementType = "a"> = RawLinkProps<C>;
+export type LinkProps<C extends React.ElementType = "a"> = RawLinkProps<C> & {
+  fontWeight?: "normal" | "bold";
+  sdsSize?: "xs" | "s";
+};
 
 /**
  * @see https://mui.com/material-ui/react-link/
diff --git a/packages/components/src/core/Link/style.ts b/packages/components/src/core/Link/style.ts
index 4d890c5fc..90bc17214 100644
--- a/packages/components/src/core/Link/style.ts
+++ b/packages/components/src/core/Link/style.ts
@@ -3,9 +3,10 @@ import { Link, LinkProps as RawLinkProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps as StyleProps,
-  getBorders,
-  getTypography,
-} from "../styles";
+  fontBodyS,
+  fontBodyXs,
+  getSemanticTextColors,
+} from "src/core/styles";
 
 // (thuang): Support `component` prop
 // https://stackoverflow.com/a/66123108
@@ -14,58 +15,85 @@ export type LinkProps<C extends React.ElementType = "a"> = RawLinkProps<
   { component?: C }
 > &
   StyleProps & {
+    fontWeight?: "normal" | "bold";
     sdsStyle?: "default" | "dashed";
+    sdsSize?: "xs" | "s";
   };
 
-const sdsPropNames = ["sdsStyle"];
+const doNotForwardProps = ["sdsStyle", "sdsSize", "fontWeight"];
 
 const defaultStyle = (props: LinkProps) => {
-  const { theme } = props;
-  const typography = getTypography(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return css`
-    color: ${theme?.app?.colors.primary[400]};
-    font-family: ${typography?.fontFamily};
+    color: ${semanticTextColors?.action?.default};
 
     &:hover,
     &:focus {
-      color: ${theme?.app?.colors.primary[500]};
+      color: ${semanticTextColors?.action?.hover};
     }
 
     &:active {
-      color: ${theme?.app?.colors.primary[600]};
+      color: ${semanticTextColors?.action?.pressed};
     }
   `;
 };
 
 const dashedStyle = (props: LinkProps) => {
-  const border = getBorders(props);
-  const typography = getTypography(props);
+  const { sdsSize = "s" } = props;
 
   return css`
     color: inherit;
-    font-family: ${typography?.fontFamily};
-    border-bottom: ${border?.link.dashed};
+    position: relative;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      height: 1px;
+      margin-top: ${sdsSize === "s" ? -4 : -3}px;
+      width: 100%;
+      background-image: linear-gradient(to right, black 60%, transparent 60%);
+      background-size: 5px 100%;
+    }
 
     &:hover,
     &:focus {
       text-decoration: none;
-      border-bottom: ${border?.link.solid};
+      &::after {
+        background-image: linear-gradient(to right, black 60%, black 60%);
+      }
     }
   `;
 };
 
+const smallStyle = (props: LinkProps) => {
+  return fontBodyS(props);
+};
+
+const extraSmallStyle = (props: LinkProps) => {
+  return fontBodyXs(props);
+};
+
 export const StyledLink = styled(Link, {
   shouldForwardProp: (prop) => {
-    return !sdsPropNames.includes(prop.toString());
+    return !doNotForwardProps.includes(prop.toString());
   },
 })`
+  all: unset;
+
   ${(props: LinkProps) => {
-    const { sdsStyle } = props;
+    const { fontWeight = "normal", sdsStyle, sdsSize = "s" } = props;
 
     return css`
       ${sdsStyle === "default" && defaultStyle(props)}
       ${sdsStyle === "dashed" && dashedStyle(props)}
+      ${sdsSize === "s" && smallStyle(props)}
+      ${sdsSize === "xs" && extraSmallStyle(props)}
+
+      font-weight: ${fontWeight === "normal" ? "400" : "600"};
+      display: inline-block;
+      cursor: pointer;
     `;
   }}
 ` as typeof Link;
diff --git a/packages/components/src/core/List/__storybook__/index.stories.tsx b/packages/components/src/core/List/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..0da422676
--- /dev/null
+++ b/packages/components/src/core/List/__storybook__/index.stories.tsx
@@ -0,0 +1,15 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { List } from "./stories/default";
+
+export default {
+  component: List,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/List",
+} as Meta;
+
+// Default
+
+export const Default = {};
diff --git a/packages/components/src/core/List/index.stories.tsx b/packages/components/src/core/List/__storybook__/stories/default.tsx
similarity index 96%
rename from packages/components/src/core/List/index.stories.tsx
rename to packages/components/src/core/List/__storybook__/stories/default.tsx
index 057aa35d7..edb961cfd 100644
--- a/packages/components/src/core/List/index.stories.tsx
+++ b/packages/components/src/core/List/__storybook__/stories/default.tsx
@@ -1,9 +1,9 @@
-import { Args, Meta } from "@storybook/react";
-import ListItem from "../ListItem";
-import ListSubheader from "../ListSubheader";
-import RawList from "./index";
+import { Args } from "@storybook/react";
+import RawList from "src/core/List";
+import ListSubheader from "src/core/List/components/ListSubheader";
+import ListItem from "src/core/List/components/ListItem";
 
-const List = (props: Args): JSX.Element => {
+export const List = (props: Args): JSX.Element => {
   return (
     <div>
       <RawList
@@ -214,12 +214,3 @@ const List = (props: Args): JSX.Element => {
     </div>
   );
 };
-
-export default {
-  component: List,
-  title: "List",
-} as Meta;
-
-// Default
-
-export const Default = {};
diff --git a/packages/components/src/core/List/List.namespace-test.tsx b/packages/components/src/core/List/__tests__/List.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/List/List.namespace-test.tsx
rename to packages/components/src/core/List/__tests__/List.namespace-test.tsx
diff --git a/packages/components/src/core/ListItem/ListItem.namespace-test.tsx b/packages/components/src/core/List/components/ListItem/__tests__/ListItem.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/ListItem/ListItem.namespace-test.tsx
rename to packages/components/src/core/List/components/ListItem/__tests__/ListItem.namespace-test.tsx
diff --git a/packages/components/src/core/ListItem/index.tsx b/packages/components/src/core/List/components/ListItem/index.tsx
similarity index 100%
rename from packages/components/src/core/ListItem/index.tsx
rename to packages/components/src/core/List/components/ListItem/index.tsx
diff --git a/packages/components/src/core/ListItem/style.ts b/packages/components/src/core/List/components/ListItem/style.ts
similarity index 84%
rename from packages/components/src/core/ListItem/style.ts
rename to packages/components/src/core/List/components/ListItem/style.ts
index 5a7f60796..b8fd3d64e 100644
--- a/packages/components/src/core/ListItem/style.ts
+++ b/packages/components/src/core/List/components/ListItem/style.ts
@@ -1,13 +1,12 @@
 import { SerializedStyles } from "@emotion/react";
 import { ListItem } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { TypographyOptions } from "@mui/material/styles/createTypography";
 import {
   CommonThemeProps,
   fontBody,
   getFontWeights,
   getSpaces,
-} from "../styles";
+} from "src/core/styles";
 
 const fontBodyL = fontBody("l");
 const fontBodyM = fontBody("m");
@@ -36,13 +35,8 @@ export const StyledListItem = styled(ListItem, {
   ${(props) => {
     const { ordered } = props;
 
-    const {
-      theme: { typography },
-    } = props;
-
     return `
       align-items: flex-start;
-      font-family: ${(typography as TypographyOptions)?.fontFamily};
       ${ordered ? "counter-increment: section;" : ""}
     `;
   }}
@@ -51,14 +45,14 @@ export const StyledListItem = styled(ListItem, {
     display: inline-block;
 
     ${(props) => {
-      const spacings = getSpaces(props);
+      const spaces = getSpaces(props);
       const fontWeights = getFontWeights(props);
       const { ordered } = props;
 
       return `        
         font-weight: ${fontWeights?.semibold};
         content: ${ordered ? `counters(section, ".")"."` : `"•"`};
-        margin-right: ${ordered ? spacings?.xs : spacings?.s}px;
+        margin-right: ${ordered ? spaces?.xs : spaces?.s}px;
       `;
     }}
   }
@@ -83,15 +77,15 @@ function propsToFontBody(props: ListItemExtraProps) {
 }
 
 function propsToMarginBottom(props: ListItemExtraProps) {
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
 
   const propsToMarginBottomMap: Record<
     NonNullable<ListItemExtraProps["marginBottom"]>,
     number | undefined
   > = {
-    s: spacings?.s,
-    xs: spacings?.xs,
-    xxs: spacings?.xxs,
+    s: spaces?.s,
+    xs: spaces?.xs,
+    xxs: spaces?.xxs,
   };
 
   const { marginBottom } = props;
diff --git a/packages/components/src/core/ListSubheader/ListSubheader.namespace-test.tsx b/packages/components/src/core/List/components/ListSubheader/__tests__/ListSubheader.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/ListSubheader/ListSubheader.namespace-test.tsx
rename to packages/components/src/core/List/components/ListSubheader/__tests__/ListSubheader.namespace-test.tsx
diff --git a/packages/components/src/core/ListSubheader/index.tsx b/packages/components/src/core/List/components/ListSubheader/index.tsx
similarity index 100%
rename from packages/components/src/core/ListSubheader/index.tsx
rename to packages/components/src/core/List/components/ListSubheader/index.tsx
diff --git a/packages/components/src/core/ListSubheader/style.ts b/packages/components/src/core/List/components/ListSubheader/style.ts
similarity index 71%
rename from packages/components/src/core/ListSubheader/style.ts
rename to packages/components/src/core/List/components/ListSubheader/style.ts
index cb30ffb59..3dfe9669a 100644
--- a/packages/components/src/core/ListSubheader/style.ts
+++ b/packages/components/src/core/List/components/ListSubheader/style.ts
@@ -1,6 +1,6 @@
 import { ListSubheader } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { fontHeader, getSpaces } from "../styles";
+import { fontHeader, getSpaces } from "src/core/styles";
 
 const fontHeaderM = fontHeader("m");
 
@@ -12,10 +12,10 @@ export const StyledListSubheader = styled(ListSubheader)`
     color: unset;
 
     ${(props) => {
-      const spacings = getSpaces(props);
+      const spaces = getSpaces(props);
 
       return `
-        margin-bottom: ${spacings?.l}px;
+        margin-bottom: ${spaces?.l}px;
       `;
     }}
   }
diff --git a/packages/components/src/core/List/style.ts b/packages/components/src/core/List/style.ts
index 1d7f27e58..67cd09784 100644
--- a/packages/components/src/core/List/style.ts
+++ b/packages/components/src/core/List/style.ts
@@ -1,6 +1,6 @@
 import { List } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { CommonThemeProps, getSpaces } from "../styles";
+import { CommonThemeProps, getSpaces } from "src/core/styles";
 
 export interface ListExtraProps extends CommonThemeProps {
   component?: unknown;
@@ -9,7 +9,7 @@ export interface ListExtraProps extends CommonThemeProps {
 }
 
 // (thuang): Please keep this in sync with the props used in `ListExtraProps`
-const doNotForwardProps = ["marginBotton", "ordered"];
+const doNotForwardProps = ["marginBottom", "ordered"];
 
 export const StyledList = styled(List, {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
@@ -28,18 +28,18 @@ export const StyledList = styled(List, {
 `;
 
 function propsToMarginBottom(props: ListExtraProps) {
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
 
   const propsToMarginBottomMap: Record<
     NonNullable<ListExtraProps["marginBottom"]>,
     number | undefined
   > = {
-    l: spacings?.l,
-    m: spacings?.l,
-    s: spacings?.m,
-    xs: spacings?.m,
-    xxs: spacings?.m,
-    xxxs: spacings?.s,
+    l: spaces?.l,
+    m: spaces?.l,
+    s: spaces?.m,
+    xs: spaces?.m,
+    xxs: spaces?.m,
+    xxxs: spaces?.s,
   };
 
   const { marginBottom } = props;
diff --git a/packages/components/src/core/LoadingIndicator/__storybook__/constants.ts b/packages/components/src/core/LoadingIndicator/__storybook__/constants.ts
new file mode 100644
index 000000000..365910727
--- /dev/null
+++ b/packages/components/src/core/LoadingIndicator/__storybook__/constants.ts
@@ -0,0 +1,9 @@
+export const LIST_EXCLUDED_CONTROLS = ["sdsStyle"];
+
+export const LIST_LIVE_PREVIEW_STYLES = {
+  display: "grid",
+  gridColumnGap: "24px",
+  gridRowGap: "0px",
+  gridTemplateColumns: "repeat(2, 70px)",
+  gridTemplateRows: "1fr",
+};
diff --git a/packages/components/src/core/LoadingIndicator/__storybook__/index.stories.tsx b/packages/components/src/core/LoadingIndicator/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..43a42f108
--- /dev/null
+++ b/packages/components/src/core/LoadingIndicator/__storybook__/index.stories.tsx
@@ -0,0 +1,69 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { LoadingIndicator } from "./stories/default";
+import { LIST_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+
+export default {
+  argTypes: {
+    sdsStyle: {
+      control: { type: "select" },
+      options: ["minimal", "tag"],
+    },
+  },
+  component: LoadingIndicator,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/LoadingIndicator",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    sdsStyle: "minimal",
+  },
+};
+
+// Custom Aria Label
+
+export const CustomAriaLabel = {
+  args: {
+    "aria-label": "Loading cats list...",
+    sdsStyle: "minimal",
+  },
+  parameters: {
+    controls: {
+      exclude: LIST_EXCLUDED_CONTROLS,
+    },
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: LIST_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: LIST_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
diff --git a/packages/components/src/core/LoadingIndicator/__storybook__/stories/default.tsx b/packages/components/src/core/LoadingIndicator/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..23a728772
--- /dev/null
+++ b/packages/components/src/core/LoadingIndicator/__storybook__/stories/default.tsx
@@ -0,0 +1,7 @@
+import { Args } from "@storybook/react";
+import RawLoadingIndicator from "src/core/LoadingIndicator";
+
+export const LoadingIndicator = (props: Args): JSX.Element => {
+  const { sdsStyle } = props;
+  return <RawLoadingIndicator sdsStyle={sdsStyle} {...props} />;
+};
diff --git a/packages/components/src/core/LoadingIndicator/__storybook__/stories/livePreview.tsx b/packages/components/src/core/LoadingIndicator/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..c2c1c4a4a
--- /dev/null
+++ b/packages/components/src/core/LoadingIndicator/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,33 @@
+import { Args } from "@storybook/react";
+import { LIST_LIVE_PREVIEW_STYLES } from "../constants";
+import RawLoadingIndicator from "src/core/LoadingIndicator";
+import { useTheme } from "@mui/material";
+import { getSpaces } from "src/core/styles";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  const theme = useTheme();
+  const spaces = getSpaces({ theme });
+
+  return (
+    <div style={LIST_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      <div
+        style={{
+          marginBottom: spaces?.l,
+          marginRight: spaces?.l,
+          marginTop: spaces?.l,
+        }}
+      >
+        <RawLoadingIndicator sdsStyle="minimal" {...props} />
+      </div>
+      <div
+        style={{
+          marginBottom: spaces?.l,
+          marginRight: spaces?.l,
+          marginTop: spaces?.l,
+        }}
+      >
+        <RawLoadingIndicator sdsStyle="tag" {...props} />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/LoadingIndicator/LoadingIndicator.namespace-test.tsx b/packages/components/src/core/LoadingIndicator/__tests__/LoadingIndicator.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/LoadingIndicator/LoadingIndicator.namespace-test.tsx
rename to packages/components/src/core/LoadingIndicator/__tests__/LoadingIndicator.namespace-test.tsx
diff --git a/packages/components/src/core/LoadingIndicator/__snapshots__/index.test.tsx.snap b/packages/components/src/core/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap
similarity index 86%
rename from packages/components/src/core/LoadingIndicator/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap
index 1a5c3b18e..8ac48a284 100644
--- a/packages/components/src/core/LoadingIndicator/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap
@@ -14,13 +14,15 @@ exports[`<LoadingIndicator /> CustomAriaLabel story renders snapshot 1`] = `
       data-testid="IconLoadingLarge"
       fillcontrast="white"
       focusable="false"
-      viewBox="0 0 22 22"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
     />
   </div>
   <span
     aria-label="Loading cats list..."
     aria-live="polite"
-    class="css-1xm9l9z"
+    class="css-q6tdx9"
     role="status"
   >
     Loading
@@ -42,12 +44,14 @@ exports[`<LoadingIndicator /> Default story renders snapshot 1`] = `
       data-testid="IconLoadingLarge"
       fillcontrast="white"
       focusable="false"
-      viewBox="0 0 22 22"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
     />
   </div>
   <span
     aria-live="polite"
-    class="css-1xm9l9z"
+    class="css-q6tdx9"
     role="status"
   >
     Loading
diff --git a/packages/components/src/core/LoadingIndicator/index.test.tsx b/packages/components/src/core/LoadingIndicator/__tests__/index.test.tsx
similarity index 90%
rename from packages/components/src/core/LoadingIndicator/index.test.tsx
rename to packages/components/src/core/LoadingIndicator/__tests__/index.test.tsx
index 971881a49..04bf1928d 100644
--- a/packages/components/src/core/LoadingIndicator/index.test.tsx
+++ b/packages/components/src/core/LoadingIndicator/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/LoadingIndicator/index.stories.tsx b/packages/components/src/core/LoadingIndicator/index.stories.tsx
deleted file mode 100644
index 1c234dae1..000000000
--- a/packages/components/src/core/LoadingIndicator/index.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import { defaultAppTheme } from "../styles";
-import RawLoadingIndicator from "./index";
-
-const LoadingIndicator = (props: Args): JSX.Element => {
-  const { sdsStyle } = props;
-  return <RawLoadingIndicator sdsStyle={sdsStyle} {...props} />;
-};
-
-export default {
-  argTypes: {
-    sdsStyle: {
-      control: { type: "select" },
-      options: ["minimal", "tag"],
-    },
-  },
-  component: LoadingIndicator,
-  title: "LoadingIndicator",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    sdsStyle: "minimal",
-  },
-};
-
-export const CustomAriaLabel = {
-  args: {
-    "aria-label": "Loading cats list...",
-    sdsStyle: "minimal",
-  },
-};
-
-// Live Preview
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  const spacings = defaultAppTheme?.spacing;
-
-  const livePreviewStyles = {
-    display: "grid",
-    gridColumnGap: "24px",
-    gridRowGap: "0px",
-    gridTemplateColumns: "repeat(2, 70px)",
-    gridTemplateRows: "1fr",
-  };
-
-  return (
-    <div style={livePreviewStyles as React.CSSProperties}>
-      <div
-        style={{
-          marginBottom: spacings?.l,
-          marginRight: spacings?.l,
-          marginTop: spacings?.l,
-        }}
-      >
-        <RawLoadingIndicator sdsStyle="minimal" {...props} />
-      </div>
-      <div
-        style={{
-          marginBottom: spacings?.l,
-          marginRight: spacings?.l,
-          marginTop: spacings?.l,
-        }}
-      >
-        <RawLoadingIndicator sdsStyle="tag" {...props} />
-      </div>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
diff --git a/packages/components/src/core/LoadingIndicator/index.tsx b/packages/components/src/core/LoadingIndicator/index.tsx
index b9b9644cf..027427137 100644
--- a/packages/components/src/core/LoadingIndicator/index.tsx
+++ b/packages/components/src/core/LoadingIndicator/index.tsx
@@ -1,4 +1,4 @@
-import Icon from "../Icon";
+import Icon from "src/core/Icon";
 import {
   LoadingIndicatorProps as RawLoadingIndicatorProps,
   StyledLoadingIndicator,
@@ -15,7 +15,7 @@ const LoadingIndicator = ({
 }: LoadingIndicatorProps): JSX.Element => {
   return (
     <StyledLoadingIndicator sdsStyle={sdsStyle}>
-      <Icon sdsIcon="loading" sdsSize="l" sdsType="static" />
+      <Icon sdsIcon="Loading" sdsSize="l" sdsType="static" />
       <StyledText aria-label={ariaLabel} aria-live="polite" role="status">
         Loading
       </StyledText>
diff --git a/packages/components/src/core/LoadingIndicator/style.ts b/packages/components/src/core/LoadingIndicator/style.ts
index c3bc08238..167c0c6b5 100644
--- a/packages/components/src/core/LoadingIndicator/style.ts
+++ b/packages/components/src/core/LoadingIndicator/style.ts
@@ -2,67 +2,65 @@ import { css, SerializedStyles } from "@emotion/react";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
-  fontBody,
+  fontBodyS,
   fontCapsXxxxs,
-  getColors,
   getCorners,
   getIconSizes,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface LoadingIndicatorProps extends CommonThemeProps {
   sdsStyle: "minimal" | "tag";
 }
 
-const fontBodyS = fontBody("s");
-
 export const StyledText = styled("span")`
   ${(props) => {
-    const spacings = getSpaces(props);
-    const typography = getTypography(props);
+    const spaces = getSpaces(props);
 
     return `
-      margin: 0 ${spacings?.xs}px;
-      font-family: ${typography?.fontFamily};
+      margin: 0 ${spaces?.xs}px;
     `;
   }}
 `;
 
 const minimal = (props: CommonThemeProps): SerializedStyles => {
-  const colors = getColors(props);
   const iconSizes = getIconSizes(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return css`
     ${fontBodyS(props)}
 
-    color: ${colors?.gray[500]};
+    color: ${semanticTextColors?.base?.secondary};
 
     svg {
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
 
       path {
-        fill: ${colors?.gray[500]};
+        fill: ${semanticComponentColors?.base?.icon};
       }
     }
   `;
 };
 
 const tag = (props: CommonThemeProps): SerializedStyles => {
-  const colors = getColors(props);
   const corners = getCorners(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return css`
     ${fontCapsXxxxs(props)}
 
-    background-color: ${colors?.info[200]};
+    background-color: ${semanticComponentColors?.accent?.surface};
     border-radius: ${corners?.l}px;
-    color: ${colors?.info[600]};
+    color: ${semanticTextColors?.base?.accent};
 
     svg {
       path {
-        fill: ${colors?.info[400]};
+        fill: ${semanticComponentColors?.accent?.icon};
       }
     }
   `;
@@ -75,12 +73,12 @@ export const StyledLoadingIndicator = styled("div", {
 })`
   ${(props: LoadingIndicatorProps) => {
     const { sdsStyle } = props;
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     const style = css`
       display: inline-flex;
       align-items: center;
-      padding: ${spacings?.xxs}px;
+      padding: ${spaces?.xxs}px;
     `;
 
     return css`
diff --git a/packages/components/src/core/Menu/__storybook__/index.stories.tsx b/packages/components/src/core/Menu/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..b82943c62
--- /dev/null
+++ b/packages/components/src/core/Menu/__storybook__/index.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta } from "@storybook/react";
+import { Menu } from "./stories/default";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+
+export default {
+  component: Menu,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Dropdowns/Menu",
+} as Meta;
+
+// Default
+
+export const Default = {};
+
+// Custom Placement
+
+export const CustomPlacement = {
+  args: {
+    anchorOrigin: {
+      horizontal: "right",
+      vertical: "bottom",
+    },
+    column: "column value",
+    transformOrigin: {
+      horizontal: "right",
+      vertical: "top",
+    },
+  },
+};
diff --git a/packages/components/src/core/Menu/index.stories.tsx b/packages/components/src/core/Menu/__storybook__/stories/default.tsx
similarity index 55%
rename from packages/components/src/core/Menu/index.stories.tsx
rename to packages/components/src/core/Menu/__storybook__/stories/default.tsx
index 22e2ca388..47e90e424 100644
--- a/packages/components/src/core/Menu/index.stories.tsx
+++ b/packages/components/src/core/Menu/__storybook__/stories/default.tsx
@@ -1,10 +1,10 @@
-import { Args, Meta } from "@storybook/react";
+import { Args } from "@storybook/react";
 import React from "react";
-import Button from "../Button";
-import MenuItem from "../MenuItem";
-import RawMenu from "./index";
+import Button from "src/core/Button";
+import MenuItem from "src/core/MenuItem";
+import RawMenu from "src/core/Menu";
 
-const Menu = (props: Args): JSX.Element => {
+export const Menu = (props: Args): JSX.Element => {
   const [anchorEl, setAnchorEl] = React.useState<Element | null>(null);
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
@@ -16,12 +16,7 @@ const Menu = (props: Args): JSX.Element => {
   };
 
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-around",
-      }}
-    >
+    <div>
       <Button sdsStyle="minimal" sdsType="secondary" onClick={handleClick}>
         Click me!
       </Button>
@@ -40,28 +35,3 @@ const Menu = (props: Args): JSX.Element => {
     </div>
   );
 };
-
-export default {
-  component: Menu,
-  title: "Dropdowns/Menu",
-} as Meta;
-
-// Default
-
-export const Default = {};
-
-// Custom Placement
-
-export const CustomPlacement = {
-  args: {
-    anchorOrigin: {
-      horizontal: "right",
-      vertical: "bottom",
-    },
-    column: "column value",
-    transformOrigin: {
-      horizontal: "right",
-      vertical: "top",
-    },
-  },
-};
diff --git a/packages/components/src/core/Menu/Menu.namespace-test.tsx b/packages/components/src/core/Menu/__tests__/Menu.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Menu/Menu.namespace-test.tsx
rename to packages/components/src/core/Menu/__tests__/Menu.namespace-test.tsx
diff --git a/packages/components/src/core/Menu/style.ts b/packages/components/src/core/Menu/style.ts
index b3beb8bf8..06afd9a6e 100644
--- a/packages/components/src/core/Menu/style.ts
+++ b/packages/components/src/core/Menu/style.ts
@@ -1,15 +1,15 @@
-import { Menu } from "@mui/material";
+import { Menu, menuClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { getSpaces } from "../styles";
+import { getSpaces } from "src/core/styles";
 
 export const StyledMenu = styled(Menu)`
   & {
-    .MuiMenu-paper {
+    .${menuClasses.paper} {
       ${(props) => {
-        const spacings = getSpaces(props);
+        const spaces = getSpaces(props);
 
         return `
-          padding: ${spacings?.xs}px;
+          padding: ${spaces?.xs}px;
         `;
       }}
     }
diff --git a/packages/components/src/core/MenuItem/__storybook__/constants.tsx b/packages/components/src/core/MenuItem/__storybook__/constants.tsx
new file mode 100644
index 000000000..677e4dca7
--- /dev/null
+++ b/packages/components/src/core/MenuItem/__storybook__/constants.tsx
@@ -0,0 +1,31 @@
+import CustomSdsIcon from "src/common/storybook/customSdsIcon";
+import CustomSvgIcon from "src/common/storybook/customSvgIcon";
+
+export const MENU_ITEM_EXCLUDED_CONTROLS = [
+  "name",
+  "column",
+  "disabled",
+  "isMultiSelect",
+  "icon",
+  "sdsIconProps",
+  "sdsStyle",
+  "selected",
+];
+
+export const MENU_ITEM_ICON_OPTIONS = [
+  "Gear",
+  <CustomSdsIcon key="customSdsIcon" sdsSize="s" />,
+  <CustomSvgIcon key="customSvgIcon" sx={{ height: 14, width: 14 }} />,
+];
+
+export const MENU_ITEM_MULTI_SELECT_OPTIONS = [false, true];
+export const MENU_ITEM_SDS_STYLE_OPTIONS = ["determinate", "indeterminate"];
+export const MENU_ITEM_COLUMN_OPTIONS = [undefined, "123"];
+/**
+ * (thuang): Add `as const` to make sure the type is not widened to `string`
+ * and cause type error in <RawMenuItem />
+ */
+export const MENU_ITEM_SCREENSHOT_ICON_OPTIONS = [undefined, "Gear"] as const;
+export const MENU_ITEM_SELECTED_OPTIONS = [false, true];
+export const MENU_ITEM_DISABLED_OPTIONS = [false, true];
+export const MENU_ITEM_PSEUDO_STATES = ["default", "hover", "active", "focus"];
diff --git a/packages/components/src/core/MenuItem/__storybook__/index.stories.tsx b/packages/components/src/core/MenuItem/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..545a965a8
--- /dev/null
+++ b/packages/components/src/core/MenuItem/__storybook__/index.stories.tsx
@@ -0,0 +1,106 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import {
+  MENU_ITEM_EXCLUDED_CONTROLS,
+  MENU_ITEM_ICON_OPTIONS,
+} from "./constants";
+import { MenuItem } from "./stories/default";
+import { ScreenshotTestDemo } from "./stories/screenshot";
+
+export default {
+  argTypes: {
+    column: {
+      control: { type: "text" },
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    icon: {
+      control: {
+        labels: ["SDS Icon: Gear", "Custom SDS Icon", "Custom SVG Icon"],
+        type: "select",
+      },
+      mapping: MENU_ITEM_ICON_OPTIONS,
+      options: Object.keys(MENU_ITEM_ICON_OPTIONS),
+    },
+    isMultiSelect: {
+      control: { type: "boolean" },
+    },
+    sdsIconProps: {
+      control: {
+        type: "object",
+      },
+    },
+    sdsStyle: {
+      control: {
+        type: "radio",
+      },
+      options: ["determinate", "indeterminate"],
+    },
+    selected: {
+      control: { type: "boolean" },
+    },
+  },
+  component: MenuItem,
+  parameters: {
+    axe: {
+      disabledRules: ["aria-required-parent"],
+    },
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Dropdowns/MenuItem",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    column: "123,456",
+    disabled: false,
+    isMultiSelect: false,
+    name: "Text here",
+    sdsIconProps: {
+      color: "blue",
+    },
+    sdsStyle: "determinate",
+    selected: false,
+  },
+};
+
+// Screenshot test
+
+export const ScreenshotTest = {
+  args: {
+    name: "Text here",
+  },
+  parameters: {
+    axe: {
+      timeout: 10 * 1000,
+    },
+    controls: {
+      exclude: MENU_ITEM_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <ScreenshotTestDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    column: "123",
+    name: "Test text",
+  },
+  parameters: {
+    controls: {
+      exclude: MENU_ITEM_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <MenuItem {...args} />,
+};
diff --git a/packages/components/src/core/MenuItem/__storybook__/stories/default.tsx b/packages/components/src/core/MenuItem/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..5b75a1308
--- /dev/null
+++ b/packages/components/src/core/MenuItem/__storybook__/stories/default.tsx
@@ -0,0 +1,14 @@
+import { Args } from "@storybook/react";
+import RawMenuItem from "src/core/MenuItem";
+import { DemoWrapper } from "../style";
+
+export const MenuItem = (props: Args): JSX.Element => {
+  const { name } = props;
+  return (
+    <DemoWrapper>
+      <RawMenuItem data-testid="MenuItem" {...props}>
+        {name}
+      </RawMenuItem>
+    </DemoWrapper>
+  );
+};
diff --git a/packages/components/src/core/MenuItem/index.stories.tsx b/packages/components/src/core/MenuItem/__storybook__/stories/screenshot.tsx
similarity index 56%
rename from packages/components/src/core/MenuItem/index.stories.tsx
rename to packages/components/src/core/MenuItem/__storybook__/stories/screenshot.tsx
index 84d6e9379..cf13478a1 100644
--- a/packages/components/src/core/MenuItem/index.stories.tsx
+++ b/packages/components/src/core/MenuItem/__storybook__/stories/screenshot.tsx
@@ -1,100 +1,16 @@
-import { Args, Meta } from "@storybook/react";
-import RawMenuItem, { MenuItemProps } from "./index";
-import { DemoWrapper } from "./style";
-import CustomSdsIcon from "src/common/customSdsIcon";
-import CustomSvgIcon from "src/common/customSvgIcon";
+import { Args } from "@storybook/react";
+import {
+  MENU_ITEM_COLUMN_OPTIONS,
+  MENU_ITEM_DISABLED_OPTIONS,
+  MENU_ITEM_MULTI_SELECT_OPTIONS,
+  MENU_ITEM_PSEUDO_STATES,
+  MENU_ITEM_SCREENSHOT_ICON_OPTIONS,
+  MENU_ITEM_SDS_STYLE_OPTIONS,
+  MENU_ITEM_SELECTED_OPTIONS,
+} from "../constants";
+import RawMenuItem, { MenuItemProps } from "src/core/MenuItem";
 
-const iconOptions = [
-  "gear",
-  <CustomSdsIcon key="customSdsIcon" sdsSize="s" />,
-  <CustomSvgIcon key="customSvgIcon" sx={{ height: 14, width: 14 }} />,
-];
-
-const MenuItem = (props: Args): JSX.Element => {
-  const { name } = props;
-  return (
-    <DemoWrapper>
-      <RawMenuItem data-testid="MenuItem" {...props}>
-        {name}
-      </RawMenuItem>
-    </DemoWrapper>
-  );
-};
-
-export default {
-  argTypes: {
-    column: {
-      control: { type: "text" },
-    },
-    disabled: {
-      control: { type: "boolean" },
-    },
-    icon: {
-      control: {
-        labels: ["SDS Icon: Gear", "Custom SDS Icon", "Custom SVG Icon"],
-        type: "select",
-      },
-      mapping: iconOptions,
-      options: Object.keys(iconOptions),
-    },
-    isMultiSelect: {
-      control: { type: "boolean" },
-    },
-    sdsIconProps: {
-      control: {
-        type: "object",
-      },
-    },
-    sdsStyle: {
-      control: {
-        type: "radio",
-      },
-      options: ["determinate", "indeterminate"],
-    },
-    selected: {
-      control: { type: "boolean" },
-    },
-  },
-  component: MenuItem,
-  parameters: {
-    axe: {
-      disabledRules: ["aria-required-parent"],
-    },
-  },
-  title: "Dropdowns/MenuItem",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    column: "column value here",
-    disabled: false,
-    isMultiSelect: false,
-    name: "text here",
-    sdsIconProps: {
-      color: "primary",
-    },
-    sdsStyle: "determinate",
-    selected: false,
-  },
-};
-
-// Screenshot test
-
-const MULTI_SELECT_OPTIONS = [false, true];
-const SDS_STYLE_OPTIONS = ["determinate", "indeterminate"];
-const COLUMN_OPTIONS = [undefined, "Column"];
-/**
- * (thuang): Add `as const` to make sure the type is not widened to `string`
- * and cause type error in <RawMenuItem />
- */
-const ICON_OPTIONS = [undefined, "gear"] as const;
-const SELECTED_OPTIONS = [false, true];
-const DISABLED_OPTIONS = [false, true];
-const PSEUDO_STATES = ["default", "hover", "active", "focus"];
-
-const ScreenshotTestDemo = (props: Args): JSX.Element => {
+export const ScreenshotTestDemo = (props: Args): JSX.Element => {
   const DISPLAY_CONTENTS: React.CSSProperties = {
     display: "contents",
   };
@@ -108,7 +24,7 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
   // loop through all MULTI_SELECT_OPTIONS
   return (
     <>
-      {MULTI_SELECT_OPTIONS.map((isMultiSelect) => {
+      {MENU_ITEM_MULTI_SELECT_OPTIONS.map((isMultiSelect) => {
         return (
           <MenuItemMultiSelect
             isMultiSelect={isMultiSelect}
@@ -123,7 +39,7 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
   function MenuItemMultiSelect({
     isMultiSelect,
   }: {
-    isMultiSelect: (typeof MULTI_SELECT_OPTIONS)[number];
+    isMultiSelect: (typeof MENU_ITEM_MULTI_SELECT_OPTIONS)[number];
   }) {
     const LEVEL_STYLE: React.CSSProperties = {
       columnGap: "20px",
@@ -142,7 +58,7 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
         <p style={LABEL_STYLE}>
           Multi-select: <b>{isMultiSelect ? "yes" : "no"}</b>
         </p>
-        {COLUMN_OPTIONS.map((column) => {
+        {MENU_ITEM_COLUMN_OPTIONS.map((column) => {
           return (
             <MenuItemColumn
               isMultiSelect={isMultiSelect}
@@ -160,8 +76,8 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
     isMultiSelect,
     column,
   }: {
-    isMultiSelect: (typeof MULTI_SELECT_OPTIONS)[number];
-    column: (typeof COLUMN_OPTIONS)[number];
+    isMultiSelect: (typeof MENU_ITEM_MULTI_SELECT_OPTIONS)[number];
+    column: (typeof MENU_ITEM_COLUMN_OPTIONS)[number];
   }) {
     const LABEL_STYLE: React.CSSProperties = {
       ...MID_LABEL,
@@ -175,7 +91,7 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
         <p style={LABEL_STYLE}>
           Column: <b>{column ? "yes" : "no"}</b>
         </p>
-        {ICON_OPTIONS.map((sdsIcon) => {
+        {MENU_ITEM_SCREENSHOT_ICON_OPTIONS.map((sdsIcon) => {
           return (
             <MenuItemIcon
               isMultiSelect={isMultiSelect}
@@ -195,9 +111,9 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
     column,
     sdsIcon,
   }: {
-    isMultiSelect: (typeof MULTI_SELECT_OPTIONS)[number];
-    column: (typeof COLUMN_OPTIONS)[number];
-    sdsIcon: (typeof ICON_OPTIONS)[number];
+    isMultiSelect: (typeof MENU_ITEM_MULTI_SELECT_OPTIONS)[number];
+    column: (typeof MENU_ITEM_COLUMN_OPTIONS)[number];
+    sdsIcon: (typeof MENU_ITEM_SCREENSHOT_ICON_OPTIONS)[number];
   }) {
     const LABEL_STYLE: React.CSSProperties = {
       ...MID_LABEL,
@@ -211,7 +127,7 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
         <p style={LABEL_STYLE}>
           Icon: <b>{sdsIcon ? "yes" : "no"}</b>
         </p>
-        {SELECTED_OPTIONS.map((selected) => {
+        {MENU_ITEM_SELECTED_OPTIONS.map((selected) => {
           return (
             <MenuItemSelected
               isMultiSelect={isMultiSelect}
@@ -233,10 +149,10 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
     sdsIcon,
     selected,
   }: {
-    isMultiSelect: (typeof MULTI_SELECT_OPTIONS)[number];
-    column: (typeof COLUMN_OPTIONS)[number];
-    sdsIcon: (typeof ICON_OPTIONS)[number];
-    selected: (typeof SELECTED_OPTIONS)[number];
+    isMultiSelect: (typeof MENU_ITEM_MULTI_SELECT_OPTIONS)[number];
+    column: (typeof MENU_ITEM_COLUMN_OPTIONS)[number];
+    sdsIcon: (typeof MENU_ITEM_SCREENSHOT_ICON_OPTIONS)[number];
+    selected: (typeof MENU_ITEM_SELECTED_OPTIONS)[number];
   }) {
     const LABEL_STYLE: React.CSSProperties = {
       ...MID_LABEL,
@@ -250,7 +166,7 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
         <p style={LABEL_STYLE}>
           Selected: <b>{selected ? "true" : "false"}</b>
         </p>
-        {SDS_STYLE_OPTIONS.map((sdsStyle) => {
+        {MENU_ITEM_SDS_STYLE_OPTIONS.map((sdsStyle) => {
           return (
             <MenuItemStyles
               isMultiSelect={isMultiSelect}
@@ -266,7 +182,7 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
     );
   }
 
-  // loop through all SDS_STYLE_OPTIONS + create headers for DITERMINISTIC_OPTIONS
+  // loop through all SDS_STYLE_OPTIONS + create headers for DETERMINISTIC_OPTIONS
   function MenuItemStyles({
     isMultiSelect,
     column,
@@ -274,11 +190,11 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
     selected,
     sdsStyle,
   }: {
-    isMultiSelect: (typeof MULTI_SELECT_OPTIONS)[number];
-    column: (typeof COLUMN_OPTIONS)[number];
-    sdsIcon: (typeof ICON_OPTIONS)[number];
-    selected: (typeof SELECTED_OPTIONS)[number];
-    sdsStyle: (typeof SDS_STYLE_OPTIONS)[number];
+    isMultiSelect: (typeof MENU_ITEM_MULTI_SELECT_OPTIONS)[number];
+    column: (typeof MENU_ITEM_COLUMN_OPTIONS)[number];
+    sdsIcon: (typeof MENU_ITEM_SCREENSHOT_ICON_OPTIONS)[number];
+    selected: (typeof MENU_ITEM_SELECTED_OPTIONS)[number];
+    sdsStyle: (typeof MENU_ITEM_SDS_STYLE_OPTIONS)[number];
   }) {
     const LABEL_STYLE: React.CSSProperties = {
       ...MID_LABEL,
@@ -292,14 +208,14 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
         <p style={LABEL_STYLE}>
           SdsStyle: <b>{sdsStyle}</b>
         </p>
-        {DISABLED_OPTIONS.map((disabled) => {
+        {MENU_ITEM_DISABLED_OPTIONS.map((disabled) => {
           return (
             <MenuItemDisabled
               isMultiSelect={isMultiSelect}
               column={column}
               sdsIcon={sdsIcon}
               selected={selected}
-              sdsStyle={sdsStyle as MenuItemProps<"gear">["sdsStyle"]}
+              sdsStyle={sdsStyle as MenuItemProps<"Gear">["sdsStyle"]}
               disabled={disabled}
               key={String(disabled)}
             />
@@ -318,12 +234,12 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
     sdsStyle,
     disabled,
   }: {
-    isMultiSelect: (typeof MULTI_SELECT_OPTIONS)[number];
-    column: (typeof COLUMN_OPTIONS)[number];
-    sdsIcon: (typeof ICON_OPTIONS)[number];
-    selected: (typeof SELECTED_OPTIONS)[number];
-    sdsStyle: MenuItemProps<"gear">["sdsStyle"];
-    disabled: (typeof DISABLED_OPTIONS)[number];
+    isMultiSelect: (typeof MENU_ITEM_MULTI_SELECT_OPTIONS)[number];
+    column: (typeof MENU_ITEM_COLUMN_OPTIONS)[number];
+    sdsIcon: (typeof MENU_ITEM_SCREENSHOT_ICON_OPTIONS)[number];
+    selected: (typeof MENU_ITEM_SELECTED_OPTIONS)[number];
+    sdsStyle: MenuItemProps<"Gear">["sdsStyle"];
+    disabled: (typeof MENU_ITEM_DISABLED_OPTIONS)[number];
   }) {
     const LEVEL_STYLE: React.CSSProperties = {
       marginBottom: 20,
@@ -334,7 +250,7 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
     };
     return (
       <div style={DISPLAY_CONTENTS}>
-        {PSEUDO_STATES.map((state) => {
+        {MENU_ITEM_PSEUDO_STATES.map((state) => {
           return (
             // to pass a11y, this container div must have role of "menu" since it contains components with roles of "menuitem"
             <div role="menu" style={LEVEL_STYLE} key={state}>
@@ -368,58 +284,4 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
       </div>
     );
   }
-}; // close ScreenshotTestDemo
-
-export const ScreenshotTest = {
-  args: {
-    name: "text here",
-  },
-  parameters: {
-    axe: {
-      timeout: 10 * 1000,
-    },
-    controls: {
-      exclude: [
-        "name",
-        "column",
-        "disabled",
-        "isMultiSelect",
-        "icon",
-        "sdsIconProps",
-        "sdsStyle",
-        "selected",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <ScreenshotTestDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  args: {
-    column: "test column",
-    name: "test text",
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        "name",
-        "column",
-        "disabled",
-        "isMultiSelect",
-        "icon",
-        "sdsIconProps",
-        "sdsStyle",
-        "selected",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <MenuItem {...args} />,
 };
diff --git a/packages/components/src/core/MenuItem/__storybook__/style.ts b/packages/components/src/core/MenuItem/__storybook__/style.ts
new file mode 100644
index 000000000..0aaafb17f
--- /dev/null
+++ b/packages/components/src/core/MenuItem/__storybook__/style.ts
@@ -0,0 +1,5 @@
+import { styled } from "@mui/material";
+
+export const DemoWrapper = styled("div")`
+  width: 250px;
+`;
diff --git a/packages/components/src/core/MenuItem/MenuItem.namespace-test.tsx b/packages/components/src/core/MenuItem/__tests__/MenuItem.namespace-test.tsx
similarity index 96%
rename from packages/components/src/core/MenuItem/MenuItem.namespace-test.tsx
rename to packages/components/src/core/MenuItem/__tests__/MenuItem.namespace-test.tsx
index 2c8e805f0..b9c456812 100644
--- a/packages/components/src/core/MenuItem/MenuItem.namespace-test.tsx
+++ b/packages/components/src/core/MenuItem/__tests__/MenuItem.namespace-test.tsx
@@ -12,7 +12,7 @@ const MenuNameSpaceTest = (
     <MenuItem
       onClick={noop}
       column="Text"
-      icon="gear"
+      icon="Gear"
       sdsIconProps={{}}
       isMultiSelect
       disabled={false}
diff --git a/packages/components/src/core/MenuItem/__snapshots__/index.test.tsx.snap b/packages/components/src/core/MenuItem/__tests__/__snapshots__/index.test.tsx.snap
similarity index 81%
rename from packages/components/src/core/MenuItem/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/MenuItem/__tests__/__snapshots__/index.test.tsx.snap
index a97c65626..66e594c14 100644
--- a/packages/components/src/core/MenuItem/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/MenuItem/__tests__/__snapshots__/index.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<MenuItem /> Default story renders snapshot 1`] = `
   <li
     class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-pelx1i-MuiButtonBase-root-MuiMenuItem-root"
     data-testid="MenuItem"
-    name="text here"
+    name="Text here"
     role="menuitem"
     tabindex="-1"
   >
@@ -15,14 +15,14 @@ exports[`<MenuItem /> Default story renders snapshot 1`] = `
       class="css-bv5fko"
     >
       <span
-        class="primary-text css-hbz1qm"
+        class="primary-text css-1k1xg99"
       >
-        text here
+        Text here
       </span>
       <span
-        class="css-x5dzyr"
+        class="css-1o15svb"
       >
-        column value here
+        123,456
       </span>
     </span>
     <span
diff --git a/packages/components/src/core/MenuItem/index.test.tsx b/packages/components/src/core/MenuItem/__tests__/index.test.tsx
similarity index 90%
rename from packages/components/src/core/MenuItem/index.test.tsx
rename to packages/components/src/core/MenuItem/__tests__/index.test.tsx
index 32fa14404..4420807b6 100644
--- a/packages/components/src/core/MenuItem/index.test.tsx
+++ b/packages/components/src/core/MenuItem/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/MenuItem/index.tsx b/packages/components/src/core/MenuItem/index.tsx
index 0abed2d08..990fccd28 100644
--- a/packages/components/src/core/MenuItem/index.tsx
+++ b/packages/components/src/core/MenuItem/index.tsx
@@ -1,6 +1,6 @@
 import { MenuItemProps as RawMenuItemProps } from "@mui/material";
 import React, { ForwardedRef, forwardRef } from "react";
-import Icon, { IconNameToSizes, IconProps } from "../Icon";
+import Icon, { IconNameToSizes, IconProps } from "src/core/Icon";
 import {
   ColumnWrapper,
   ContentWrapper,
@@ -133,6 +133,7 @@ const MenuItem = forwardRef(function MenuItem<
         return (
           <StyledMenuItemIcon disabled={disabled}>
             <Icon
+              color="blue"
               {...sdsIconProps}
               sdsType="static"
               sdsIcon={icon}
diff --git a/packages/components/src/core/MenuItem/style.ts b/packages/components/src/core/MenuItem/style.ts
index 6eae2cf25..7ac36c65d 100644
--- a/packages/components/src/core/MenuItem/style.ts
+++ b/packages/components/src/core/MenuItem/style.ts
@@ -1,29 +1,29 @@
 import { Check, Remove } from "@mui/icons-material";
 import { MenuItem, menuItemClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { CommonThemeProps } from "../styles";
-import { fontBody } from "../styles/common/mixins/fonts";
+import { fontBodyXs } from "src/core/styles/common/mixins/fonts";
 import {
+  CommonThemeProps,
   getColors,
   getFontWeights,
   getIconSizes,
-  getPalette,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-} from "../styles/common/selectors/theme";
-
-const fontBodyXs = fontBody("xs");
+} from "src/core/styles";
 
 export const StyledMenuItem = styled(MenuItem)`
   ${(props) => {
     const { selected } = props;
     const colors = getColors(props);
     const fontWeights = getFontWeights(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
-    const primary = colors?.primary[400];
+    const primary = colors?.blue[400];
 
     return `
-      padding: ${spacings?.xs}px ${spacings?.s}px !important;
+      padding: ${spaces?.xs}px ${spaces?.s}px !important;
       min-height: unset;
       opacity: 1;
 
@@ -40,29 +40,29 @@ export const StyledMenuItem = styled(MenuItem)`
         opacity: 1;
 
         &:hover, &.${menuItemClasses.focusVisible} {
-          background-color: ${colors?.gray[100]};
+          background-color: ${semanticComponentColors?.base?.fillHover};
 
           &[aria-selected="true"] {
-            background-color: ${colors?.gray[100]};
+            background-color: ${semanticComponentColors?.base?.fillHover};
           }
         }
       }
 
-      &.MuiMenuItem-root .MuiSvgIcon-root {
+      &.${menuItemClasses.root} .MuiSvgIcon-root {
         align-self: flex-start;
       }
 
-      &.MuiMenuItem-root .Mui-disabled {
+      &.${menuItemClasses.root} .${menuItemClasses.disabled} {
         opacity: 1 !important;
       }
 
       &.MuiAutocomplete-option[aria-selected="true"] {
         &:hover {
-          background-color: ${colors?.gray[100]} !important;
+          background-color: ${semanticComponentColors?.base?.fillHover} !important;
         }
 
         svg.check-icon {
-          color: ${selected ? primary : colors?.gray[500]};
+          color: ${selected ? primary : semanticComponentColors?.base?.icon};
         }
       }
 
@@ -71,16 +71,16 @@ export const StyledMenuItem = styled(MenuItem)`
       }
 
       &:hover {
-        background-color: ${colors?.gray[100]};
+        background-color: ${semanticComponentColors?.base?.fillHover};
         svg.check-icon {
-          color: ${selected ? primary : colors?.gray[500]};
+          color: ${selected ? primary : semanticComponentColors?.base?.icon};
         }
       }
 
       &.Mui-selected.MuiListItem-root.MuiListItem-button {
         background-color: white;
         &:hover {
-          background-color: ${colors?.gray[100]};
+          background-color: ${semanticComponentColors?.base?.fillHover};
         }
         .primary-text {
           font-weight: ${fontWeights?.semibold};
@@ -121,10 +121,10 @@ const disabledStyles = (props: DisabledType) => {
   const { disabled } = props;
   if (!disabled) return ``;
 
-  const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return `
-    color: ${colors?.gray[300]};
+    color: ${semanticComponentColors?.base?.iconDisabled};
     cursor: default;
   `;
 };
@@ -138,10 +138,10 @@ export const TextWrapper = styled("span")<TextWrapperProps>`
   ${fontBodyXs}
 
   ${(props) => {
-    const palette = getPalette(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
-      color: ${palette?.text?.primary};
+      color: ${semanticTextColors?.base?.primary};
       display: flex;
       white-space: pre-wrap;
     `;
@@ -157,17 +157,17 @@ interface MenuItemIconProps extends CommonThemeProps {
 export const StyledMenuItemIcon = styled("span")`
   ${(props: MenuItemIconProps) => {
     const { disabled } = props;
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
     const iconSizes = getIconSizes(props);
-    const colors = getColors(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
-      margin-right: ${spacings?.xs}px;
-      margin-top: ${spacings?.xxxs}px;
+      margin-right: ${spaces?.xs}px;
+      margin-top: ${spaces?.xxxs}px;
       height: ${iconSizes?.s.height}px;
 
       .MuiSvgIcon-root {
-        ${disabled ? `color: ${colors?.gray[300]};` : null}
+        ${disabled ? `color: ${semanticComponentColors?.base?.iconDisabled};` : null}
       }
     `;
   }}
@@ -180,15 +180,18 @@ interface ColumnWrapperProps {
 export const ColumnWrapper = styled("span")<ColumnWrapperProps>`
   ${fontBodyXs}
 
-  text-align: right;
-  color: black;
-  margin-left: 10px;
+  ${(props) => {
+    const semanticTextColors = getSemanticTextColors(props);
+    const spaces = getSpaces(props);
 
-  ${disabledStyles}
-`;
+    return `
+      text-align: right;
+      color: ${semanticTextColors?.base?.primary};
+      margin-left: ${spaces?.m}px;
+    `;
+  }}
 
-export const DemoWrapper = styled("div")`
-  width: 250px;
+  ${disabledStyles}
 `;
 
 interface StyledIconType {
@@ -198,13 +201,13 @@ interface StyledIconType {
 
 export const StyledIconWrapper = styled("span")`
   ${(props) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
     const iconSizes = getIconSizes(props);
 
     return `
       align-self: start;
-      margin-right: ${spacings?.m}px;
-      margin-top: ${spacings?.xxxs}px;
+      margin-right: ${spaces?.m}px;
+      margin-top: ${spaces?.xxxs}px;
       height: ${iconSizes?.s.height}px;
     `;
   }}
@@ -215,9 +218,14 @@ export const StyledCheck = styled(Check, {
 })<StyledIconType>`
   ${(props) => {
     const { selected, disabled } = props;
-    const colors = getColors(props);
+
     const iconSizes = getIconSizes(props);
-    const selectedColor = disabled ? colors?.gray[300] : colors?.primary[400];
+    const semanticComponentColors = getSemanticComponentColors(props);
+
+    const selectedColor = disabled
+      ? semanticComponentColors?.base?.iconDisabled
+      : semanticComponentColors?.accent?.icon;
+
     return `
       color: ${selected ? selectedColor : "transparent"};
       padding: 0;
@@ -236,9 +244,14 @@ export const StyledMinus = styled(Remove, {
 })<StyledIconType>`
   ${(props) => {
     const { selected, disabled } = props;
-    const colors = getColors(props);
+
+    const semanticComponentColors = getSemanticComponentColors(props);
     const iconSizes = getIconSizes(props);
-    const selectedColor = disabled ? colors?.gray[300] : colors?.primary[400];
+
+    const selectedColor = disabled
+      ? semanticComponentColors?.base?.iconDisabled
+      : semanticComponentColors?.accent?.icon;
+
     return `
       color: ${selected ? selectedColor : "transparent"};
       padding: 0;
diff --git a/packages/components/src/core/MenuSelect/index.stories.tsx b/packages/components/src/core/MenuSelect/__storybook__/index.stories.tsx
similarity index 93%
rename from packages/components/src/core/MenuSelect/index.stories.tsx
rename to packages/components/src/core/MenuSelect/__storybook__/index.stories.tsx
index 126631951..ecde5b212 100644
--- a/packages/components/src/core/MenuSelect/index.stories.tsx
+++ b/packages/components/src/core/MenuSelect/__storybook__/index.stories.tsx
@@ -7,10 +7,11 @@ import {
 } from "@mui/material/useAutocomplete";
 import { Args, Meta } from "@storybook/react";
 import React, { SyntheticEvent, useState } from "react";
-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";
+import { AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS } from "../../../common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS";
+import TagFilter from "../../TagFilter";
+import { getColors, getCorners, getShadows } from "../../styles";
+import RawMenuSelect, { DefaultMenuSelectOption } from "../index";
+import { BADGE } from "../../../common/storybook/storybookBadges";
 
 const StyledPopper = styled(Popper)`
   ${(props) => {
@@ -258,7 +259,10 @@ export default {
     },
   },
   component: MenuSelect,
-  title: "Dropdowns/MenuSelect - To Be Depreciated",
+  parameters: {
+    badges: [BADGE.DEPRECATED],
+  },
+  title: "Deprecated/MenuSelect [deprecated]",
 } as Meta;
 
 // Default
diff --git a/packages/components/src/core/MenuSelect/index.tsx b/packages/components/src/core/MenuSelect/index.tsx
index 4906673b5..feb6ea542 100644
--- a/packages/components/src/core/MenuSelect/index.tsx
+++ b/packages/components/src/core/MenuSelect/index.tsx
@@ -12,8 +12,8 @@ import {
   SDSWarningTypes,
   showWarningIfFirstOccurence,
 } from "src/common/warnings";
-import ButtonIcon from "../ButtonIcon";
-import { InputSearchProps } from "../InputSearch";
+import ButtonIcon from "src/core/ButtonIcon";
+import { InputSearchProps } from "src/core/InputSearch";
 import {
   InputBaseWrapper,
   StyleProps,
@@ -125,7 +125,7 @@ const MenuSelect = <
                     sdsIconProps={{
                       sdsType: "interactive",
                     }}
-                    icon="search"
+                    icon="Search"
                   />
                 </InputAdornment>
               ),
diff --git a/packages/components/src/core/MenuSelect/style.ts b/packages/components/src/core/MenuSelect/style.ts
index 0b0229d25..b49cab6e3 100644
--- a/packages/components/src/core/MenuSelect/style.ts
+++ b/packages/components/src/core/MenuSelect/style.ts
@@ -1,8 +1,8 @@
 import { Autocomplete, inputBaseClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import InputSearch from "../InputSearch";
-import MenuItem from "../MenuItem";
-import { CommonThemeProps, getSpaces } from "../styles";
+import InputSearch from "src/core/InputSearch";
+import MenuItem from "src/core/MenuItem";
+import { CommonThemeProps, getSpaces } from "src/core/styles";
 
 export const StyledMenuItem = styled(MenuItem)`
   width: 100%;
@@ -46,10 +46,10 @@ export const InputBaseWrapper = styled("div", {
       `;
     }
 
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
 
     return `
-      margin: ${spacings?.s}px;
+      margin: ${spaces?.s}px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/NavigationJumpTo/__storybook__/constants.tsx b/packages/components/src/core/NavigationJumpTo/__storybook__/constants.tsx
new file mode 100644
index 000000000..aae5943a7
--- /dev/null
+++ b/packages/components/src/core/NavigationJumpTo/__storybook__/constants.tsx
@@ -0,0 +1,25 @@
+export const NAVIGATION_JUMP_TO_EXCLUDED_CONTROLS = [
+  "items",
+  "offsetTop",
+  "indicatorColor",
+];
+
+export const NAVIGATION_JUMP_TO_ARIA_VALID_ATTR_VALUE = "aria-valid-attr-value";
+
+export const NAVIGATION_JUMP_TO_COLOR_OPTIONS = [
+  "accent",
+  "beta",
+  "info",
+  "negative",
+  "notice",
+  "positive",
+];
+
+export const NAVIGATION_JUMP_TO_COLOR_LABELS = [
+  "accent",
+  "beta",
+  "info",
+  "negative",
+  "notice",
+  "positive",
+];
diff --git a/packages/components/src/core/NavigationJumpTo/__storybook__/index.stories.tsx b/packages/components/src/core/NavigationJumpTo/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..bb9f5b686
--- /dev/null
+++ b/packages/components/src/core/NavigationJumpTo/__storybook__/index.stories.tsx
@@ -0,0 +1,138 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { NavigationJumpTo } from "./stories/default";
+import {
+  NAVIGATION_JUMP_TO_ARIA_VALID_ATTR_VALUE,
+  NAVIGATION_JUMP_TO_COLOR_LABELS,
+  NAVIGATION_JUMP_TO_COLOR_OPTIONS,
+  NAVIGATION_JUMP_TO_EXCLUDED_CONTROLS,
+} from "./constants";
+import { NavigationJumpToDemo } from "./stories/demo";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    indicatorColor: {
+      control: {
+        labels: NAVIGATION_JUMP_TO_COLOR_LABELS,
+        type: "select",
+      },
+      defaultValue: { summary: "info" },
+      description: "Color of the tab indicator",
+      mapping: NAVIGATION_JUMP_TO_COLOR_OPTIONS,
+      options: Object.keys(NAVIGATION_JUMP_TO_COLOR_OPTIONS),
+    },
+    items: {
+      control: { require: true, type: "object" },
+      defaultValue: { summary: "-" },
+      description:
+        "An array of object containing a title for the Navigation Tab and a ref to the section div.",
+    },
+    offsetTop: {
+      control: { description: "wew", type: "number" },
+      defaultValue: { summary: "0" },
+      description:
+        "To apply the offsetTop to the component, please refresh the page.",
+    },
+  },
+  component: NavigationJumpTo,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/NavigationJumpTo",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    indicatorColor: "info",
+    items: [
+      { elementRef: { current: null }, title: "Item 1" },
+      { elementRef: { current: null }, title: "Item 2" },
+      { elementRef: { current: null }, title: "Item 3" },
+      { elementRef: { current: null }, title: "Item 4" },
+      { elementRef: { current: null }, title: "Item 5" },
+    ],
+    offsetTop: 0,
+  },
+  parameters: {
+    axe: {
+      disabledRules: [NAVIGATION_JUMP_TO_ARIA_VALID_ATTR_VALUE],
+    },
+    controls: { expanded: true },
+  },
+  render: (args: Args) => <NavigationJumpTo {...args} />,
+};
+
+// Demo
+
+export const JumpToNavDemo = {
+  args: {
+    indicatorColor: "primary",
+    items: [],
+    offsetTop: 0,
+  },
+  parameters: {
+    axe: {
+      disabledRules: [NAVIGATION_JUMP_TO_ARIA_VALID_ATTR_VALUE],
+    },
+    controls: {
+      exclude: ["items"],
+      expanded: true,
+    },
+  },
+  render: (args: Args) => <NavigationJumpToDemo {...args} />,
+};
+
+// Live Preview
+
+export const LivePreview = {
+  args: {
+    items: [
+      { elementRef: { current: null }, title: "Item 1" },
+      { elementRef: { current: null }, title: "Item 2" },
+      { elementRef: { current: null }, title: "Item 3" },
+      { elementRef: { current: null }, title: "Item 4" },
+      { elementRef: { current: null }, title: "Item 5" },
+    ],
+  },
+  parameters: {
+    axe: {
+      disabledRules: [NAVIGATION_JUMP_TO_ARIA_VALID_ATTR_VALUE],
+    },
+    controls: {
+      exclude: NAVIGATION_JUMP_TO_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <NavigationJumpTo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    items: [
+      { elementRef: { current: null }, title: "Item 1" },
+      { elementRef: { current: null }, title: "Item 2" },
+      { elementRef: { current: null }, title: "Item 3" },
+      { elementRef: { current: null }, title: "Item 4" },
+      { elementRef: { current: null }, title: "Item 5" },
+    ],
+  },
+  parameters: {
+    axe: {
+      disabledRules: [NAVIGATION_JUMP_TO_ARIA_VALID_ATTR_VALUE],
+    },
+    controls: {
+      exclude: NAVIGATION_JUMP_TO_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/NavigationJumpTo/__storybook__/stories/default.tsx b/packages/components/src/core/NavigationJumpTo/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..3a5915a5d
--- /dev/null
+++ b/packages/components/src/core/NavigationJumpTo/__storybook__/stories/default.tsx
@@ -0,0 +1,8 @@
+import { Args } from "@storybook/react";
+import RawNavigationJumpTo from "src/core/NavigationJumpTo";
+
+export const NavigationJumpTo = (props: Args): JSX.Element => {
+  const { items, ...rest } = props;
+
+  return <RawNavigationJumpTo items={items} {...rest} />;
+};
diff --git a/packages/components/src/core/NavigationJumpTo/index.stories.tsx b/packages/components/src/core/NavigationJumpTo/__storybook__/stories/demo.tsx
similarity index 50%
rename from packages/components/src/core/NavigationJumpTo/index.stories.tsx
rename to packages/components/src/core/NavigationJumpTo/__storybook__/stories/demo.tsx
index a123534f7..3d7f4f174 100644
--- a/packages/components/src/core/NavigationJumpTo/index.stories.tsx
+++ b/packages/components/src/core/NavigationJumpTo/__storybook__/stories/demo.tsx
@@ -1,17 +1,15 @@
-/* eslint-disable no-use-before-define */
-import { TabPanelProps } from "@mui/base";
 import { Box } from "@mui/material";
-import { Args, Meta } from "@storybook/react";
-import * as React from "react";
-import { useState } from "react";
-import RawNavigationJumpTo from ".";
-import InputSlider from "../InputSlider";
+import { forwardRef, useRef, useState } from "react";
+import { TabPanelProps } from "@mui/base";
+import { Args } from "@storybook/react";
+import InputSlider from "src/core/InputSlider";
+import RawNavigationJumpTo from "src/core/NavigationJumpTo";
 
 interface TabPanelPropsExtra extends TabPanelProps {
   sdsDemoHeight: number;
 }
 
-const TabPanel = React.forwardRef<HTMLDivElement, TabPanelPropsExtra>(
+const TabPanel = forwardRef<HTMLDivElement, TabPanelPropsExtra>(
   (props, ref) => {
     const { children, sdsDemoHeight, ...other } = props;
 
@@ -24,7 +22,7 @@ const TabPanel = React.forwardRef<HTMLDivElement, TabPanelPropsExtra>(
           backgroundColor: "#f4f4f4",
           color: "black",
           display: "flex",
-          fontFamily: "Open Sans, sans-serif",
+          fontFamily: "Inter, sans-serif",
           fontSize: "36px",
           fontWeight: 100,
           justifyContent: "center",
@@ -45,19 +43,19 @@ const TabPanel = React.forwardRef<HTMLDivElement, TabPanelPropsExtra>(
   }
 );
 
-const NavigationJumpTo = (props: Args): JSX.Element => {
+export const NavigationJumpToDemo = (props: Args): JSX.Element => {
   const [navPanelHeight, setNavPanelHeight] = useState(100);
-  const sectionRef0 = React.useRef(null);
-  const sectionRef1 = React.useRef(null);
-  const sectionRef2 = React.useRef(null);
-  const sectionRef3 = React.useRef(null);
-  const sectionRef4 = React.useRef(null);
+  const sectionRef0 = useRef(null);
+  const sectionRef1 = useRef(null);
+  const sectionRef2 = useRef(null);
+  const sectionRef3 = useRef(null);
+  const sectionRef4 = useRef(null);
 
   return (
     <Box>
       <Box
         sx={{
-          fontFamily: "Open Sans, sans-serif",
+          fontFamily: "Inter, sans-serif",
           margin: "0 0 30px 6px",
           width: 250,
         }}
@@ -151,130 +149,3 @@ const NavigationJumpTo = (props: Args): JSX.Element => {
     </Box>
   );
 };
-
-const availableColorOptions = [
-  "beta",
-  "error",
-  "gray",
-  "info",
-  "primary",
-  "success",
-  "warning",
-];
-
-export default {
-  argTypes: {
-    indicatorColor: {
-      control: {
-        labels: [
-          "beta",
-          "error",
-          "gray",
-          "info",
-          "primary",
-          "success",
-          "warning",
-        ],
-        type: "select",
-      },
-      defaultValue: { summary: "primary" },
-      description: "Color of the tab indicator",
-      mapping: availableColorOptions,
-      options: Object.keys(availableColorOptions),
-    },
-    items: {
-      control: { require: true, type: "object" },
-      defaultValue: { summary: "-" },
-      description:
-        "An array of object containing a title for the Navigation Tab and a ref to the section div.",
-    },
-    offsetTop: {
-      control: { description: "wew", type: "number" },
-      defaultValue: { summary: "0" },
-      description:
-        "To apply the offsetTop to the component, please refresh the page.",
-    },
-  },
-  component: NavigationJumpTo,
-  title: "NavigationJumpTo",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    indicatorColor: "primary",
-    items: [],
-    offsetTop: 0,
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-// Live Preview
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  const { items, ...rest } = props;
-
-  return <RawNavigationJumpTo items={items} {...rest} />;
-};
-
-export const LivePreview = {
-  args: {
-    items: [
-      { elementRef: { current: null }, title: "Item 1" },
-      { elementRef: { current: null }, title: "Item 2" },
-      { elementRef: { current: null }, title: "Item 3" },
-      { elementRef: { current: null }, title: "Item 4" },
-      { elementRef: { current: null }, title: "Item 5" },
-    ],
-  },
-  parameters: {
-    axe: {
-      disabledRules: ["aria-valid-attr-value"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  const { items, ...rest } = props;
-
-  return (
-    <RawNavigationJumpTo
-      data-testid="navigation-jump-to"
-      items={items}
-      {...rest}
-    />
-  );
-};
-
-export const Test = {
-  args: {
-    items: [
-      { elementRef: { current: null }, title: "Item 1" },
-      { elementRef: { current: null }, title: "Item 2" },
-      { elementRef: { current: null }, title: "Item 3" },
-      { elementRef: { current: null }, title: "Item 4" },
-      { elementRef: { current: null }, title: "Item 5" },
-    ],
-  },
-  parameters: {
-    axe: {
-      disabledRules: ["aria-valid-attr-value"],
-    },
-    controls: {
-      exclude: ["indicatorColor", "items"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/NavigationJumpTo/__storybook__/stories/test.tsx b/packages/components/src/core/NavigationJumpTo/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..13070026f
--- /dev/null
+++ b/packages/components/src/core/NavigationJumpTo/__storybook__/stories/test.tsx
@@ -0,0 +1,14 @@
+import { Args } from "@storybook/react";
+import RawNavigationJumpTo from "src/core/NavigationJumpTo";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  const { items, ...rest } = props;
+
+  return (
+    <RawNavigationJumpTo
+      data-testid="navigation-jump-to"
+      items={items}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/components/src/core/NavigationJumpTo/NavigationJumpTo.namespace-test.tsx b/packages/components/src/core/NavigationJumpTo/__tests__/NavigationJumpTo.namespace-test.tsx
similarity index 94%
rename from packages/components/src/core/NavigationJumpTo/NavigationJumpTo.namespace-test.tsx
rename to packages/components/src/core/NavigationJumpTo/__tests__/NavigationJumpTo.namespace-test.tsx
index 322e651ce..4225e0118 100644
--- a/packages/components/src/core/NavigationJumpTo/NavigationJumpTo.namespace-test.tsx
+++ b/packages/components/src/core/NavigationJumpTo/__tests__/NavigationJumpTo.namespace-test.tsx
@@ -3,7 +3,7 @@ import { NavigationJumpTo, NavigationJumpToProps } from "@czi-sds/components";
 const NavigationJumpToNameSpaceTest = (props: NavigationJumpToProps) => {
   return (
     <NavigationJumpTo
-      indicatorColor="primary"
+      indicatorColor="info"
       items={[
         { elementRef: { current: null }, title: "Item 1" },
         { elementRef: { current: null }, title: "Item 2" },
diff --git a/packages/components/src/core/NavigationJumpTo/__snapshots__/index.test.tsx.snap b/packages/components/src/core/NavigationJumpTo/__tests__/__snapshots__/index.test.tsx.snap
similarity index 69%
rename from packages/components/src/core/NavigationJumpTo/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/NavigationJumpTo/__tests__/__snapshots__/index.test.tsx.snap
index a1afc9e1a..d1cdab329 100644
--- a/packages/components/src/core/NavigationJumpTo/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/NavigationJumpTo/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,11 +1,104 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
+<div
+  class="MuiTabs-root MuiTabs-vertical css-17er4j7-MuiTabs-root"
+>
+  <div
+    class="MuiTabs-scroller MuiTabs-fixed css-jpln7h-MuiTabs-scroller"
+    style="overflow: hidden; margin-right: 0px;"
+  >
+    <div
+      aria-label="navigation-jump-to"
+      aria-orientation="vertical"
+      class="MuiTabs-flexContainer MuiTabs-flexContainerVertical css-lfwcke-MuiTabs-flexContainer"
+      role="tablist"
+    >
+      <button
+        aria-controls="navigation-panel-1"
+        aria-selected="true"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth Mui-selected css-4q45a1-MuiButtonBase-root-MuiTab-root"
+        id="navigation-tab-item-1"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        Item 1
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        aria-controls="navigation-panel-2"
+        aria-selected="false"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-4q45a1-MuiButtonBase-root-MuiTab-root"
+        id="navigation-tab-item-2"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        Item 2
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        aria-controls="navigation-panel-3"
+        aria-selected="false"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-4q45a1-MuiButtonBase-root-MuiTab-root"
+        id="navigation-tab-item-3"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        Item 3
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        aria-controls="navigation-panel-4"
+        aria-selected="false"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-4q45a1-MuiButtonBase-root-MuiTab-root"
+        id="navigation-tab-item-4"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        Item 4
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        aria-controls="navigation-panel-5"
+        aria-selected="false"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-4q45a1-MuiButtonBase-root-MuiTab-root"
+        id="navigation-tab-item-5"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        Item 5
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+    <span
+      class="MuiTabs-indicator css-10d9dml-MuiTabs-indicator"
+      style="top: 0px; height: 0px;"
+    />
+  </div>
+</div>
+`;
+
+exports[`<NavigationJumpTo /> JumpToNavDemo story renders snapshot 1`] = `
 <div
   class="MuiBox-root css-0"
 >
   <div
-    class="MuiBox-root css-1r7i9e6"
+    class="MuiBox-root css-1bqrueo"
   >
     <p
       id="nav-item-height-slider"
@@ -14,7 +107,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       Section panel height:
     </p>
     <span
-      class="MuiSlider-root MuiSlider-marked MuiSlider-colorPrimary MuiSlider-sizeMedium css-5fiy2b-MuiSlider-root"
+      class="MuiSlider-root MuiSlider-marked MuiSlider-colorPrimary MuiSlider-sizeMedium css-j3nuuu-MuiSlider-root"
     >
       <span
         class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
@@ -226,7 +319,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-1"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"
@@ -244,7 +337,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-2"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"
@@ -262,7 +355,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-3"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"
@@ -280,7 +373,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-4"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"
@@ -298,7 +391,7 @@ exports[`<NavigationJumpTo /> Default story renders snapshot 1`] = `
       <div
         id="navigation-panel-5"
         role="tabpanel"
-        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Open Sans, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
+        style="align-items: center; background-color: rgb(244, 244, 244); color: black; display: flex; font-family: Inter, sans-serif; font-size: 36px; font-weight: 100; justify-content: center; margin: 0px 22px 22px 6px; min-height: 100vh; text-align: center;"
       >
         <div
           class="MuiBox-root css-19kzrtu"
diff --git a/packages/components/src/core/NavigationJumpTo/index.test.tsx b/packages/components/src/core/NavigationJumpTo/__tests__/index.test.tsx
similarity index 97%
rename from packages/components/src/core/NavigationJumpTo/index.test.tsx
rename to packages/components/src/core/NavigationJumpTo/__tests__/index.test.tsx
index 45a1c9fac..5a2d44a02 100644
--- a/packages/components/src/core/NavigationJumpTo/index.test.tsx
+++ b/packages/components/src/core/NavigationJumpTo/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/NavigationJumpTo/index.tsx b/packages/components/src/core/NavigationJumpTo/index.tsx
index fcb23a495..5a790ffcf 100644
--- a/packages/components/src/core/NavigationJumpTo/index.tsx
+++ b/packages/components/src/core/NavigationJumpTo/index.tsx
@@ -6,12 +6,11 @@ import useInView from "./useIntersection";
 
 export interface NavigationJumpToProps extends NavigationJumpToExtraProps {
   indicatorColor?:
-    | "primary"
-    | "error"
+    | "accent"
+    | "negative"
     | "info"
-    | "success"
-    | "warning"
-    | "gray"
+    | "positive"
+    | "notice"
     | "beta";
   items: Array<{
     title: string;
diff --git a/packages/components/src/core/NavigationJumpTo/style.ts b/packages/components/src/core/NavigationJumpTo/style.ts
index 748a92e87..b834f0424 100644
--- a/packages/components/src/core/NavigationJumpTo/style.ts
+++ b/packages/components/src/core/NavigationJumpTo/style.ts
@@ -1,26 +1,21 @@
 import { Tab, Tabs, TabsProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { CommonThemeProps, fontBodyXs, getColors, getSpaces } from "../styles";
+import {
+  CommonThemeProps,
+  fontBodyXs,
+  getSemanticComponentColors,
+  getSpaces,
+} from "src/core/styles";
 
 export interface NavigationJumpToExtraProps
-  extends Omit<
-      TabsProps,
-      | "indicatorColor"
-      | "nonce"
-      | "rev"
-      | "rel"
-      | "autoFocus"
-      | "content"
-      | "onChange"
-    >,
+  extends Omit<TabsProps, "indicatorColor" | "onChange">,
     CommonThemeProps {
   sdsIndicatorColor?:
-    | "primary"
-    | "error"
+    | "accent"
+    | "negative"
     | "info"
-    | "success"
-    | "warning"
-    | "gray"
+    | "positive"
+    | "notice"
     | "beta";
 }
 
@@ -30,13 +25,13 @@ export const StyledTabs = styled(Tabs, {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })`
   ${(props: NavigationJumpToExtraProps) => {
-    const { sdsIndicatorColor = "primary" } = props;
-    const colors = getColors(props);
+    const { sdsIndicatorColor = "info" } = props;
     const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
       &:before {
-        background-color: ${colors?.gray[200]};
+        background-color: ${semanticComponentColors?.base?.surfaceTertiary};
         border-radius: ${spaces?.xxxs}px;
         content: "";
         height: 100%;
@@ -51,7 +46,7 @@ export const StyledTabs = styled(Tabs, {
       margin-right: ${spaces?.m}px;
       position: sticky;
       .MuiTabs-indicator {
-        background-color: ${colors?.[sdsIndicatorColor][400]} !important;
+        background-color: ${semanticComponentColors?.[sdsIndicatorColor]?.fill} !important;
         border-radius: 2px;
         left: 0;
         width: 2px;
@@ -67,7 +62,7 @@ export const StyledTab = styled(Tab, {
 
   ${(props: CommonThemeProps) => {
     const spaces = getSpaces(props);
-    const colors = getColors(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
       box-sizing: border-box;
@@ -87,7 +82,7 @@ export const StyledTab = styled(Tab, {
         left: -${spaces?.l}px;
         width: ${spaces?.xxxs}px;
         height: 100%;
-        background-color: ${colors?.gray[400]};
+        background-color: ${semanticComponentColors?.base?.border};
         display: none;
         border-radius: ${spaces?.xxxs}px;
       }
@@ -102,7 +97,7 @@ export const StyledTab = styled(Tab, {
         font-weight: 600;
       }
       &.MuiTabs-indicator {
-        backgroundColor: ${colors?.gray[200]};
+        backgroundColor: ${semanticComponentColors?.base?.surfaceTertiary};
         width: ${spaces?.xxxs}px;
       }
       &.MuiButtonBase-root {
diff --git a/packages/components/src/core/Notification/__storybook__/constants.tsx b/packages/components/src/core/Notification/__storybook__/constants.tsx
new file mode 100644
index 000000000..f392737cd
--- /dev/null
+++ b/packages/components/src/core/Notification/__storybook__/constants.tsx
@@ -0,0 +1,48 @@
+import { action } from "@storybook/addon-actions";
+import CustomSdsIcon from "src/common/storybook/customSdsIcon";
+import CustomSvgIcon from "src/common/storybook/customSvgIcon";
+import { NotificationProps } from "..";
+
+export const NOTIFICATION_EXCLUDED_CONTROLS = [
+  "autoDismiss",
+  "buttonOnClick",
+  "buttonPosition",
+  "extraContent",
+  "icon",
+  "intent",
+  "onClose",
+  "sdsIconProps",
+  "slideDirection",
+  "label",
+];
+
+export const NOTIFICATION_ICON_OPTIONS = [
+  <CustomSvgIcon key="customSdsIcon" />,
+  <CustomSdsIcon key="customSvgIcon" />,
+  "Book",
+  "CheckCircle",
+];
+export const NOTIFICATION_BUTTON_ON_CLICK_OPTIONS = [
+  action("onClick"),
+  undefined,
+];
+export const NOTIFICATION_ON_CLICK_OPTIONS = [action("onClick"), undefined];
+
+export const NOTIFICATION_INTENT_OPTIONS: NotificationProps["intent"][] = [
+  "info",
+  "negative",
+  "positive",
+  "notice",
+];
+
+export const NOTIFICATION_EXTRA_CONTENT_OPTIONS = [false, true];
+
+export const NOTIFICATION_SCREENSHOT_BUTTON_ON_CLICK_OPTIONS: NotificationProps["buttonOnClick"][] =
+  [undefined, action("onClick")];
+
+export const NOTIFICATION_LIVE_PREVIEW_ROW_STYLES = {
+  alignItems: "flex-start",
+  display: "flex",
+  flexDirection: "row",
+  gap: "20px",
+};
diff --git a/packages/components/src/core/Notification/__storybook__/index.stories.tsx b/packages/components/src/core/Notification/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..6308f5986
--- /dev/null
+++ b/packages/components/src/core/Notification/__storybook__/index.stories.tsx
@@ -0,0 +1,130 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Notification } from "./stories/default";
+import {
+  NOTIFICATION_BUTTON_ON_CLICK_OPTIONS,
+  NOTIFICATION_EXCLUDED_CONTROLS,
+  NOTIFICATION_ICON_OPTIONS,
+  NOTIFICATION_ON_CLICK_OPTIONS,
+} from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { ScreenshotTestDemo } from "./stories/screenshot";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    autoDismiss: {
+      control: { type: "select" },
+      options: [true, false, 4000, 12000, 20000],
+    },
+    buttonOnClick: {
+      control: {
+        labels: ["() => {}", "undefined"],
+        type: "select",
+      },
+      mapping: NOTIFICATION_BUTTON_ON_CLICK_OPTIONS,
+      options: Object.keys(NOTIFICATION_BUTTON_ON_CLICK_OPTIONS),
+    },
+    buttonPosition: {
+      control: { type: "radio" },
+      options: ["left", "right"],
+    },
+    extraContent: {
+      control: { type: "boolean" },
+    },
+    icon: {
+      control: {
+        labels: [
+          "Custom SVG Icon",
+          "Custom SDS Icon",
+          "SDS Icon: Book",
+          "SDS Icon: Check Circle",
+        ],
+        type: "select",
+      },
+      mapping: NOTIFICATION_ICON_OPTIONS,
+      options: Object.keys(NOTIFICATION_ICON_OPTIONS),
+    },
+    intent: {
+      control: { type: "radio" },
+      options: ["info", "negative", "positive", "notice"],
+    },
+    onClose: {
+      control: {
+        labels: ["() => {}", "undefined"],
+        type: "select",
+      },
+      mapping: NOTIFICATION_ON_CLICK_OPTIONS,
+      options: Object.keys(NOTIFICATION_ON_CLICK_OPTIONS),
+    },
+    sdsIconProps: {
+      control: { type: "object" },
+    },
+    slideDirection: {
+      control: { type: "radio" },
+      options: ["left", "right"],
+    },
+  },
+  component: Notification,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Notification",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    autoDismiss: false,
+    buttonPosition: "right",
+    buttonText: "click me",
+    extraContent: false,
+    slideDirection: "left",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: NOTIFICATION_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Screenshot test
+
+export const ScreenshotTest = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: NOTIFICATION_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <ScreenshotTestDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: NOTIFICATION_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/Notification/__storybook__/stories/default.tsx b/packages/components/src/core/Notification/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..3ad965d00
--- /dev/null
+++ b/packages/components/src/core/Notification/__storybook__/stories/default.tsx
@@ -0,0 +1,70 @@
+import { FormControlLabel } from "@mui/material";
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import { SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import InputToggle from "src/core/InputToggle";
+import RawNotification from "src/core/Notification";
+import { TooltipTableContent } from "src/core/TooltipTable/__storybook__/stories/default";
+
+export const Notification = (props: Args): JSX.Element => {
+  const {
+    intent,
+    onClose,
+    buttonOnClick,
+    buttonText,
+    slideDirection,
+    extraContent,
+    autoDismiss,
+  } = props;
+
+  const [dismissed, setDismissed] = useState(false);
+
+  const handleChange = () => {
+    setDismissed((prev) => !prev);
+  };
+
+  return (
+    <>
+      <FormControlLabel
+        control={<InputToggle checked={dismissed} onChange={handleChange} />}
+        label="Hide Notification"
+        sx={{
+          "& .MuiSwitch-root": {
+            mr: "12px",
+          },
+          margin: "0 0 16px 0",
+        }}
+      />
+      <RawNotification
+        autoDismiss={autoDismiss}
+        dismissed={dismissed}
+        slideDirection={slideDirection}
+        intent={intent}
+        onClose={onClose}
+        buttonOnClick={buttonOnClick}
+        buttonText={buttonText}
+        {...props}
+      >
+        This is a notification!
+        {extraContent && (
+          <div>
+            {SHORT_LOREM_IPSUM}
+            <div style={{ marginTop: 10 }}>
+              <TooltipTableContent
+                data={[
+                  {
+                    dataRows: [
+                      { label: "Lorem ipsum", value: 14.03 },
+                      { label: "Dollor", value: 432.53 },
+                      { label: "Sit amet", value: "7,776.05" },
+                    ],
+                  },
+                ]}
+              />
+            </div>
+          </div>
+        )}
+      </RawNotification>
+    </>
+  );
+};
diff --git a/packages/components/src/core/Notification/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Notification/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..29a724f5a
--- /dev/null
+++ b/packages/components/src/core/Notification/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,34 @@
+import { Args } from "@storybook/react";
+import { SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import { NOTIFICATION_LIVE_PREVIEW_ROW_STYLES } from "../constants";
+import RawNotification from "src/core/Notification";
+import { action } from "@storybook/addon-actions";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <div style={NOTIFICATION_LIVE_PREVIEW_ROW_STYLES as React.CSSProperties}>
+      <RawNotification slideDirection="left" intent="info" {...props}>
+        this is a notification
+      </RawNotification>
+      <RawNotification
+        slideDirection="left"
+        intent="info"
+        buttonOnClick={action("onClick")}
+        buttonText="click me"
+        {...props}
+      >
+        this is a notification
+      </RawNotification>
+      <RawNotification
+        slideDirection="left"
+        intent="info"
+        buttonOnClick={action("onClick")}
+        buttonText="click me"
+        {...props}
+      >
+        this is a notification
+        <div>{SHORT_LOREM_IPSUM}</div>
+      </RawNotification>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/Notification/__storybook__/stories/screenshot.tsx b/packages/components/src/core/Notification/__storybook__/stories/screenshot.tsx
new file mode 100644
index 000000000..bd820e4c8
--- /dev/null
+++ b/packages/components/src/core/Notification/__storybook__/stories/screenshot.tsx
@@ -0,0 +1,106 @@
+import { Fragment } from "react";
+import {
+  NOTIFICATION_EXTRA_CONTENT_OPTIONS,
+  NOTIFICATION_INTENT_OPTIONS,
+  NOTIFICATION_SCREENSHOT_BUTTON_ON_CLICK_OPTIONS,
+} from "../constants";
+import { SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import RawNotification from "src/core/Notification";
+
+export const ScreenshotTestDemo = (): JSX.Element => {
+  // loop through all INTENT_OPTIONS
+  return (
+    <>
+      {NOTIFICATION_INTENT_OPTIONS.map((intent) => {
+        return <NotificationIntent intent={intent} key={intent} />;
+      })}
+    </>
+  );
+
+  // loop through all EXTRA_CONTENT_OPTIONS + create headers for INTENT_OPTIONS
+  function NotificationIntent({
+    intent,
+  }: {
+    intent: (typeof NOTIFICATION_INTENT_OPTIONS)[number];
+  }) {
+    const LEVEL_STYLE: React.CSSProperties = {
+      columnGap: "25px",
+      display: "inline-grid",
+      fontFamily: "sans-serif",
+      marginLeft: "50px",
+    };
+    const LABEL_STYLE: React.CSSProperties = {
+      fontSize: "2em",
+      gridColumn: "1 / 3",
+      marginBottom: 0,
+    };
+    return (
+      <div style={LEVEL_STYLE}>
+        <p style={LABEL_STYLE}>
+          Intent: <b>{intent}</b>
+        </p>
+        {NOTIFICATION_EXTRA_CONTENT_OPTIONS.map((extraContent) => {
+          return (
+            <NotificationExtraContent
+              intent={intent}
+              extraContent={extraContent}
+              key={String(extraContent)}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all BUTTON_ON_CLICK_OPTIONS + create headers for EXTRA_CONTENT_OPTIONS, BUTTON_ON_CLICK_OPTIONS
+  function NotificationExtraContent({
+    intent,
+    extraContent,
+  }: {
+    intent: (typeof NOTIFICATION_INTENT_OPTIONS)[number];
+    extraContent: boolean;
+  }) {
+    const EXTRA_CONTENT_LABEL_STYLE: React.CSSProperties = {
+      borderStyle: "solid none none none",
+      fontSize: "1.17em",
+      gridColumn: "1 / 3",
+      justifySelf: "stretch",
+      marginBottom: 10,
+      paddingTop: 10,
+    };
+    const BUTTON_ON_CLICK_LABEL_STYLE: React.CSSProperties = {
+      fontSize: "0.67em",
+      margin: "10px 0",
+    };
+    return (
+      <div style={{ display: "contents" }}>
+        <p style={EXTRA_CONTENT_LABEL_STYLE}>
+          Extra content: <b>{extraContent ? "yes" : "no"}</b>
+        </p>
+        {NOTIFICATION_SCREENSHOT_BUTTON_ON_CLICK_OPTIONS.map(
+          (buttonOnClick) => {
+            return (
+              <Fragment key={"parent" + String(buttonOnClick)}>
+                <p style={BUTTON_ON_CLICK_LABEL_STYLE}>
+                  Button: <b>{buttonOnClick ? "yes" : "no"}</b>
+                </p>
+                <RawNotification
+                  slideDirection="left"
+                  data-testid="notification"
+                  intent={intent}
+                  extraContent={extraContent}
+                  buttonOnClick={buttonOnClick}
+                  buttonText="click me"
+                  key={String(buttonOnClick)}
+                >
+                  Notification test text
+                  {extraContent && <div>{SHORT_LOREM_IPSUM}</div>}
+                </RawNotification>
+              </Fragment>
+            );
+          }
+        )}
+      </div>
+    );
+  }
+};
diff --git a/packages/components/src/core/Notification/__storybook__/stories/test.tsx b/packages/components/src/core/Notification/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..8f37e2405
--- /dev/null
+++ b/packages/components/src/core/Notification/__storybook__/stories/test.tsx
@@ -0,0 +1,15 @@
+import { Args } from "@storybook/react";
+import RawNotification from "src/core/Notification";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  return (
+    <RawNotification
+      slideDirection="left"
+      intent="info"
+      {...props}
+      data-testid="notification"
+    >
+      this is a notification
+    </RawNotification>
+  );
+};
diff --git a/packages/components/src/core/Notification/Notification.namespace-test.tsx b/packages/components/src/core/Notification/__tests__/Notification.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Notification/Notification.namespace-test.tsx
rename to packages/components/src/core/Notification/__tests__/Notification.namespace-test.tsx
diff --git a/packages/components/src/core/Notification/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Notification/__tests__/__snapshots__/index.test.tsx.snap
similarity index 85%
rename from packages/components/src/core/Notification/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Notification/__tests__/__snapshots__/index.test.tsx.snap
index c79e499bb..44d4e1fbc 100644
--- a/packages/components/src/core/Notification/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Notification/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`<Notification /> Default story renders snapshot 1`] = `
 <label
-  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
+  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-1xe61c-MuiFormControlLabel-root"
 >
   <span
-    class="MuiSwitch-root MuiSwitch-sizeMedium css-julti5-MuiSwitch-root"
+    class="MuiSwitch-root MuiSwitch-sizeMedium css-1r4ynxi-MuiSwitch-root"
   >
     <span
       class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase"
@@ -13,6 +13,7 @@ exports[`<Notification /> Default story renders snapshot 1`] = `
       <input
         class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
         type="checkbox"
+        value="Off"
       />
       <span
         class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
@@ -28,7 +29,7 @@ exports[`<Notification /> Default story renders snapshot 1`] = `
   <span
     class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
   >
-    Hide
+    Hide Notification
   </span>
 </label>
 `;
diff --git a/packages/components/src/core/Notification/index.test.tsx b/packages/components/src/core/Notification/__tests__/index.test.tsx
similarity index 95%
rename from packages/components/src/core/Notification/index.test.tsx
rename to packages/components/src/core/Notification/__tests__/index.test.tsx
index b82a48d99..c4643ff89 100644
--- a/packages/components/src/core/Notification/index.test.tsx
+++ b/packages/components/src/core/Notification/__tests__/index.test.tsx
@@ -5,7 +5,7 @@ import {
   screen,
   waitForElementToBeRemoved,
 } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/Notification/index.stories.tsx b/packages/components/src/core/Notification/index.stories.tsx
deleted file mode 100644
index 773f941b0..000000000
--- a/packages/components/src/core/Notification/index.stories.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-import { FormControlLabel, Switch } from "@mui/material";
-import { action } from "@storybook/addon-actions";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import Button from "../Button";
-import RawNotification, { NotificationProps } from "./index";
-import CustomSvgIcon from "src/common/customSvgIcon";
-import CustomSdsIcon from "src/common/customSdsIcon";
-
-const iconOptions = [
-  <CustomSvgIcon key="customSdsIcon" sx={{ height: 22, width: 22 }} />,
-  <CustomSdsIcon key="customSvgIcon" />,
-  "book",
-  "checkCircle",
-];
-
-const Notification = (props: Args): JSX.Element => {
-  const {
-    intent,
-    onClose,
-    buttonOnClick,
-    buttonText,
-    slideDirection,
-    extraContent,
-    autoDismiss,
-  } = props;
-
-  const [dismissed, setDismissed] = React.useState(false);
-
-  const handleChange = () => {
-    setDismissed((prev) => !prev);
-  };
-
-  if (buttonOnClick) {
-    return (
-      <>
-        {!autoDismiss && (
-          <FormControlLabel
-            control={<Switch checked={dismissed} onChange={handleChange} />}
-            label="Hide"
-          />
-        )}
-        <RawNotification
-          autoDismiss={autoDismiss}
-          dismissed={dismissed}
-          slideDirection={slideDirection}
-          intent={intent}
-          onClose={onClose}
-          buttonOnClick={action("onClick")}
-          buttonText={buttonText}
-          {...props}
-        >
-          This is a notification!
-          {extraContent && (
-            <div>
-              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet
-              eveniet sapiente, officiis aut possimus suscipit assumenda non?
-            </div>
-          )}
-        </RawNotification>
-        <Button onClick={handleChange} sdsType="primary" sdsStyle="rounded">
-          Reset Notification
-        </Button>
-      </>
-    );
-  }
-  return (
-    <>
-      {!autoDismiss && (
-        <FormControlLabel
-          control={<Switch checked={dismissed} onChange={handleChange} />}
-          label="Hide"
-        />
-      )}
-      <RawNotification
-        autoDismiss={autoDismiss}
-        dismissed={dismissed}
-        slideDirection={slideDirection}
-        intent={intent}
-        onClose={onClose}
-        {...props}
-      >
-        This is a notification!
-        {extraContent && (
-          <div>
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet
-            eveniet sapiente, officiis aut possimus suscipit assumenda non?
-          </div>
-        )}
-      </RawNotification>
-      <Button onClick={handleChange} sdsType="primary" sdsStyle="rounded">
-        Reset Notification
-      </Button>
-    </>
-  );
-};
-
-export default {
-  argTypes: {
-    autoDismiss: {
-      control: { type: "select" },
-      options: [true, false, 4000, 12000, 20000],
-    },
-    buttonOnClick: {
-      control: { type: "boolean" },
-    },
-    extraContent: {
-      control: { type: "boolean" },
-    },
-    icon: {
-      control: {
-        labels: [
-          "Custom SVG Icon",
-          "Custom SDS Icon",
-          "SDS Icon: Book",
-          "SDS Icon: Check Circle",
-        ],
-        type: "select",
-      },
-      mapping: iconOptions,
-      options: Object.keys(iconOptions),
-    },
-    intent: {
-      control: { type: "radio" },
-      options: ["info", "error", "success", "warning"],
-    },
-    onClose: {
-      control: {
-        labels: {
-          "() => {}": true,
-          undefined,
-        },
-        type: "select",
-      },
-      options: [action("onClick"), undefined],
-    },
-    sdsIconProps: {
-      control: { type: "object" },
-    },
-    slideDirection: {
-      control: { type: "radio" },
-      options: ["left", "right"],
-    },
-  },
-  component: Notification,
-  title: "Notification",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    autoDismiss: false,
-    buttonOnClick: false,
-    buttonText: "click me",
-    extraContent: false,
-    intent: "success",
-    slideDirection: "left",
-  },
-};
-
-// Live Preview
-
-const storyRow = {
-  alignItems: "flex-start",
-  display: "flex",
-  flexDirection: "row",
-  gap: "20px",
-};
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  return (
-    <div style={storyRow as React.CSSProperties}>
-      <RawNotification slideDirection="left" intent="info" {...props}>
-        this is a notification
-      </RawNotification>
-      <RawNotification
-        slideDirection="left"
-        intent="info"
-        buttonOnClick={action("onClick")}
-        buttonText="click me"
-        {...props}
-      >
-        this is a notification
-      </RawNotification>
-      <RawNotification
-        slideDirection="left"
-        intent="info"
-        buttonOnClick={action("onClick")}
-        buttonText="click me"
-        {...props}
-      >
-        this is a notification
-        <div>
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet eveniet
-          sapiente, officiis aut possimus suscipit assumenda non?
-        </div>
-      </RawNotification>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Screenshot test
-const ScreenshotTestDemo = (): JSX.Element => {
-  const INTENT_OPTIONS: NotificationProps["intent"][] = [
-    "info",
-    "error",
-    "success",
-    "warning",
-  ];
-  const EXTRA_CONTENT_OPTIONS = [false, true];
-  const BUTTON_ON_CLICK_OPTIONS: NotificationProps["buttonOnClick"][] = [
-    undefined,
-    action("onClick"),
-  ];
-
-  // loop through all INTENT_OPTIONS
-  return (
-    <>
-      {INTENT_OPTIONS.map((intent) => {
-        return <NotificationIntent intent={intent} key={intent} />;
-      })}
-    </>
-  );
-
-  // loop through all EXTRA_CONTENT_OPTIONS + create headers for INTENT_OPTIONS
-  function NotificationIntent({
-    intent,
-  }: {
-    intent: (typeof INTENT_OPTIONS)[number];
-  }) {
-    const LEVEL_STYLE: React.CSSProperties = {
-      columnGap: "25px",
-      display: "inline-grid",
-      fontFamily: "sans-serif",
-      marginLeft: "50px",
-    };
-    const LABEL_STYLE: React.CSSProperties = {
-      fontSize: "2em",
-      gridColumn: "1 / 3",
-      marginBottom: 0,
-    };
-    return (
-      <div style={LEVEL_STYLE}>
-        <p style={LABEL_STYLE}>
-          Intent: <b>{intent}</b>
-        </p>
-        {EXTRA_CONTENT_OPTIONS.map((extraContent) => {
-          return (
-            <NotificationExtraContent
-              intent={intent}
-              extraContent={extraContent}
-              key={String(extraContent)}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-
-  // loop through all BUTTON_ON_CLICK_OPTIONS + create headers for EXTRA_CONTENT_OPTIONS, BUTTON_ON_CLICK_OPTIONS
-  function NotificationExtraContent({
-    intent,
-    extraContent,
-  }: {
-    intent: (typeof INTENT_OPTIONS)[number];
-    extraContent: boolean;
-  }) {
-    const EXTRA_CONTENT_LABEL_STYLE: React.CSSProperties = {
-      borderStyle: "solid none none none",
-      fontSize: "1.17em",
-      gridColumn: "1 / 3",
-      justifySelf: "stretch",
-      marginBottom: 10,
-      paddingTop: 10,
-    };
-    const BUTTON_ON_CLICK_LABEL_STYLE: React.CSSProperties = {
-      fontSize: "0.67em",
-      margin: "10px 0",
-    };
-    return (
-      <div style={{ display: "contents" }}>
-        <p style={EXTRA_CONTENT_LABEL_STYLE}>
-          Extra content: <b>{extraContent ? "yes" : "no"}</b>
-        </p>
-        {BUTTON_ON_CLICK_OPTIONS.map((buttonOnClick) => {
-          return (
-            <React.Fragment key={"parent" + String(buttonOnClick)}>
-              <p style={BUTTON_ON_CLICK_LABEL_STYLE}>
-                Button: <b>{buttonOnClick ? "yes" : "no"}</b>
-              </p>
-              <RawNotification
-                slideDirection="left"
-                data-testid="notification"
-                intent={intent}
-                extraContent={extraContent}
-                buttonOnClick={buttonOnClick}
-                buttonText="click me"
-                key={String(buttonOnClick)}
-              >
-                Notification test text
-                {extraContent && (
-                  <div>
-                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                    Amet eveniet sapiente, officiis aut possimus suscipit
-                    assumenda non?
-                  </div>
-                )}
-              </RawNotification>
-            </React.Fragment>
-          );
-        })}
-      </div>
-    );
-  }
-};
-
-export const ScreenshotTest = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        "label",
-        "autoDismiss",
-        "buttonOnClick",
-        "extraContent",
-        "intent",
-        "onClose",
-        "slideDirection",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <ScreenshotTestDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  return (
-    <RawNotification
-      slideDirection="left"
-      intent="info"
-      {...props}
-      data-testid="notification"
-    >
-      this is a notification
-    </RawNotification>
-  );
-};
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/Notification/index.tsx b/packages/components/src/core/Notification/index.tsx
index d4b9fd267..c35b2cc1e 100644
--- a/packages/components/src/core/Notification/index.tsx
+++ b/packages/components/src/core/Notification/index.tsx
@@ -1,19 +1,26 @@
 import { AlertProps } from "@mui/lab";
 import { Box, Slide } from "@mui/material";
 import React, { useEffect, useState } from "react";
-import Button from "../Button";
-import ButtonIcon from "../ButtonIcon";
-import Icon, { IconNameToSizes, IconProps } from "../Icon";
-import { StyledNotification } from "./style";
+import Button from "src/core/Button";
+import ButtonIcon from "src/core/ButtonIcon";
+import Icon, { IconNameToSizes, IconProps } from "src/core/Icon";
+import { StyledButtonWrapper, StyledNotification } from "./style";
+
+export type NotificationIntentType =
+  | "info"
+  | "negative"
+  | "positive"
+  | "notice";
 
 export interface NotificationProps {
   autoDismiss?: boolean | number;
   buttonOnClick?: (event: React.SyntheticEvent) => void;
   buttonText?: string;
+  buttonPosition?: "left" | "right";
   dismissed?: boolean;
   slideDirection: "left" | "right";
   extraContent?: boolean;
-  intent: "info" | "error" | "success" | "warning";
+  intent: NotificationIntentType;
   icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
   sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
 }
@@ -32,6 +39,7 @@ const Notification = ({
   onClose,
   buttonOnClick,
   buttonText,
+  buttonPosition,
   icon,
   sdsIconProps,
   ...rest
@@ -74,15 +82,15 @@ const Notification = ({
       }
     } else {
       switch (intent) {
-        case "success":
-          return <Icon sdsSize="l" sdsIcon="checkCircle" sdsType="static" />;
+        case "positive":
+          return <Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="static" />;
         case "info":
-          return <Icon sdsSize="l" sdsIcon="infoCircle" sdsType="static" />;
+          return <Icon sdsSize="l" sdsIcon="InfoCircle" sdsType="static" />;
         default:
           return (
             <Icon
               sdsSize="l"
-              sdsIcon="exclamationMarkCircle"
+              sdsIcon="ExclamationMarkCircle"
               sdsType="static"
             />
           );
@@ -109,24 +117,27 @@ const Notification = ({
                   sdsSize="small"
                   sdsType="tertiary"
                   data-testid="notificationCloseButton"
-                  icon="xMark"
+                  icon="XMark"
                 />
               ) : null
             }
             icon={getIcon()}
             className="elevated"
-            severity={intent}
+            intent={intent}
+            slideDirection={slideDirection}
             {...passedProps}
           >
             {children}
-            {buttonOnClick && (
-              <Button
-                sdsStyle="minimal"
-                sdsType="secondary"
-                onClick={buttonOnClick}
-              >
-                {buttonText}
-              </Button>
+            {buttonOnClick !== undefined && (
+              <StyledButtonWrapper buttonPosition={buttonPosition}>
+                <Button
+                  sdsStyle="minimal"
+                  sdsType="secondary"
+                  onClick={buttonOnClick}
+                >
+                  {buttonText}
+                </Button>
+              </StyledButtonWrapper>
             )}
           </StyledNotification>
         </Box>
diff --git a/packages/components/src/core/Notification/style.ts b/packages/components/src/core/Notification/style.ts
index 7c1fd25aa..0b68f400d 100644
--- a/packages/components/src/core/Notification/style.ts
+++ b/packages/components/src/core/Notification/style.ts
@@ -1,42 +1,71 @@
 import { Alert } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
+  CommonThemeProps,
   fontBody,
-  getColors,
   getCorners,
   getIconSizes,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getShadows,
   getSpaces,
-} from "../styles";
-import { defaultTheme } from "../styles/common/defaultTheme";
+  getTypography,
+} from "src/core/styles";
+import { ExposedNotificationProps } from ".";
+
+interface NotificationExtraProps
+  extends CommonThemeProps,
+    ExposedNotificationProps {}
+
+interface NotificationButtonWrapperProps extends CommonThemeProps {
+  buttonPosition?: "left" | "right";
+}
 
 const fontBodyXs = fontBody("xs");
+const doNotForwardProps = ["slideDirection"];
 
-export const StyledNotification = styled(Alert)`
+export const StyledNotification = styled(Alert, {
+  shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
+})`
   ${fontBodyXs}
-  ${(props) => {
-    const colors = getColors(props);
-    const spacings = getSpaces(props);
+
+  ${(props: NotificationExtraProps) => {
+    const { intent = "info" } = props;
+
+    const spaces = getSpaces(props);
     const shadows = getShadows(props);
-    const { severity = "success" } = props;
-    const borderColor = (colors && colors[severity][400]) || "black";
     const corners = getCorners(props);
     const iconSizes = getIconSizes(props);
-    const iconColor = (colors && colors[severity][400]) || "black";
-    const notificationColor = (colors && colors[severity][100]) || "white";
-    const backgroundColor = colors && colors[severity][100];
+    const semanticComponentColors = getSemanticComponentColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
+    const typography = getTypography(props);
+
+    const borderColor = semanticComponentColors?.[intent]?.border ?? "black";
+    const iconColor = semanticComponentColors?.[intent]?.icon ?? "black";
+    const backgroundColor =
+      semanticComponentColors?.[intent]?.surface ?? "white";
+
+    // (masoudmanson): The Notification Icon should be vertically centered with the Notification
+    // Title. The padding-top of the Notification Title is calculated based on the difference
+    // between the height of the Icon and the line-height of the Notification Title.
+    const alertMessagePaddingTop = Math.abs(
+      ((iconSizes?.l.height ?? 0) -
+        parseInt(
+          String(typography?.styles?.body?.regular?.xs?.lineHeight ?? "0")
+        )) /
+        2
+    );
 
     return `
       background-color: ${backgroundColor};
       max-width: 480px;
       min-width: 280px;
       box-sizing: border-box;
-      margin: ${spacings?.m}px 0;
+      margin: ${spaces?.m}px 0;
       border-radius: ${corners?.m}px;
-      color: ${defaultTheme.palette.text.primary};
-      padding: ${spacings?.l}px;
+      color: ${semanticTextColors?.base?.primary};
+      padding: ${spaces?.l}px;
       align-items: flex-start;
-      background-color: ${notificationColor};
       border-left: 5px solid;
       box-shadow: ${shadows?.s};
       border-color: ${borderColor};
@@ -44,7 +73,7 @@ export const StyledNotification = styled(Alert)`
       .MuiAlert-icon {
         height: ${iconSizes?.l.height}px;
         width: ${iconSizes?.l.width}px;
-        margin-right: ${spacings?.m}px;
+        margin-right: ${spaces?.m}px;
         padding: 0;
         path {
           fill: ${iconColor};
@@ -52,11 +81,12 @@ export const StyledNotification = styled(Alert)`
       }
 
       .MuiAlert-message {
-        padding: 0;
-        margin-right: ${spacings?.m}px;
+        padding: ${alertMessagePaddingTop}px 0px 0px;
+        margin-right: ${spaces?.m}px;
+        width: 100%;
 
         > * {
-          margin: ${spacings?.m}px 0px;
+          margin: ${spaces?.m}px 0px;
 
           &:last-child {
             margin-bottom: 0;
@@ -72,7 +102,7 @@ export const StyledNotification = styled(Alert)`
         margin-right: 0;
         padding: 0;
         align-items: flex-start;
-        margin-top: ${spacings?.xxs}px;
+        margin-top: ${spaces?.xxs}px;
 
         > button {
             padding: 0;
@@ -82,3 +112,14 @@ export const StyledNotification = styled(Alert)`
     `;
   }}
 `;
+
+export const StyledButtonWrapper = styled("div")`
+  ${(props: NotificationButtonWrapperProps) => {
+    const { buttonPosition = "right" } = props;
+
+    return `
+      display: flex;
+      justify-content: ${buttonPosition === "left" ? "flex-start" : "flex-end"};
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Pagination/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Pagination/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 9f58b30df..000000000
--- a/packages/components/src/core/Pagination/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,122 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Pagination /> Default story renders snapshot 1`] = `
-<ul
-  class="css-epcftv"
->
-  <li
-    class="css-1hppjzv"
-  >
-    <button
-      aria-label="Previous page"
-      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-1q7gc9q-MuiButtonBase-root-MuiIconButton-root"
-      data-order="first"
-      disabled=""
-      icon="chevronLeft"
-      tabindex="-1"
-      type="button"
-    >
-      <div
-        class="css-1ft6wgl"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-          data-file-name="IconChevronLeftSmall"
-          data-testid="IconChevronLeftSmall"
-          fillcontrast="white"
-          focusable="false"
-          viewBox="0 0 14 14"
-        />
-      </div>
-    </button>
-  </li>
-  <li
-    class="css-epqfwj"
-  >
-    1
-  </li>
-  <li
-    class="css-1se3fy4"
-  >
-    2
-  </li>
-  <li
-    class="css-1se3fy4"
-  >
-    3
-  </li>
-  <li
-    class="css-1se3fy4"
-  >
-    4
-  </li>
-  <li
-    class="css-1se3fy4"
-  >
-    5
-  </li>
-  <li
-    class="css-bamrhj"
-  >
-    <button
-      aria-label="Go to a page"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-nu4a6d-MuiButtonBase-root-MuiIconButton-root"
-      icon="dotsHorizontal"
-      tabindex="0"
-      type="button"
-    >
-      <div
-        class="css-1ft6wgl"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-          data-file-name="IconDotsHorizontal3Small"
-          data-testid="IconDotsHorizontal3Small"
-          fillcontrast="white"
-          focusable="false"
-          viewBox="0 0 14 14"
-        />
-      </div>
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
-  </li>
-  <li
-    class="css-1se3fy4"
-  >
-    20
-  </li>
-  <li
-    class="css-1hppjzv"
-  >
-    <button
-      aria-label="Next page"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1vmnq6r-MuiButtonBase-root-MuiIconButton-root"
-      data-order="last"
-      icon="chevronRight"
-      tabindex="0"
-      type="button"
-    >
-      <div
-        class="css-1ft6wgl"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-          data-file-name="IconChevronRightSmall"
-          data-testid="IconChevronRightSmall"
-          fillcontrast="white"
-          focusable="false"
-          viewBox="0 0 14 14"
-        />
-      </div>
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
-  </li>
-</ul>
-`;
diff --git a/packages/components/src/core/Pagination/__storybook__/constants.ts b/packages/components/src/core/Pagination/__storybook__/constants.ts
new file mode 100644
index 000000000..8f06cd908
--- /dev/null
+++ b/packages/components/src/core/Pagination/__storybook__/constants.ts
@@ -0,0 +1,7 @@
+export const PAGINATION_EXCLUDED_CONTROLS = [
+  "pageSize",
+  "sdsStyle",
+  "siblingCount",
+  "totalCount",
+  "truncateDropdown",
+];
diff --git a/packages/components/src/core/Pagination/__storybook__/index.stories.tsx b/packages/components/src/core/Pagination/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..e12083b1b
--- /dev/null
+++ b/packages/components/src/core/Pagination/__storybook__/index.stories.tsx
@@ -0,0 +1,55 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { PAGINATION_EXCLUDED_CONTROLS } from "./constants";
+import { Pagination } from "./stories/default";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    pageSize: {
+      control: { type: "number" },
+    },
+    sdsStyle: {
+      control: { type: "select" },
+      options: ["round", "square"],
+    },
+    siblingCount: {
+      control: { type: "number" },
+    },
+    totalCount: {
+      control: { type: "number" },
+    },
+    truncateDropdown: {
+      control: { type: "boolean" },
+    },
+  },
+  component: Pagination,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Table/Pagination",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    pageSize: 5,
+    siblingCount: 1,
+    totalCount: 100,
+  },
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: PAGINATION_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/Pagination/__storybook__/stories/default.tsx b/packages/components/src/core/Pagination/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..d3b7ba5b0
--- /dev/null
+++ b/packages/components/src/core/Pagination/__storybook__/stories/default.tsx
@@ -0,0 +1,24 @@
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import RawPagination from "src/core/Pagination";
+
+export const Pagination = (props: Args): JSX.Element => {
+  const { pageSize, totalCount, siblingCount, truncateDropdown, sdsStyle } =
+    props;
+  const [currentPage, setCurrentPage] = useState(1);
+  return (
+    <RawPagination
+      sdsStyle={sdsStyle}
+      pageSize={pageSize}
+      onPageChange={(page: number) => {
+        setCurrentPage(page);
+      }}
+      onNextPage={() => setCurrentPage(currentPage + 1)}
+      onPreviousPage={() => setCurrentPage(currentPage - 1)}
+      totalCount={totalCount}
+      siblingCount={siblingCount}
+      currentPage={currentPage}
+      truncateDropdown={truncateDropdown}
+    />
+  );
+};
diff --git a/packages/components/src/core/Pagination/__storybook__/stories/test.tsx b/packages/components/src/core/Pagination/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..e13335bc8
--- /dev/null
+++ b/packages/components/src/core/Pagination/__storybook__/stories/test.tsx
@@ -0,0 +1,74 @@
+import { Args } from "@storybook/react";
+import RawPagination from "src/core/Pagination";
+
+export const TestDemo = (props: Args): JSX.Element => (
+  <div>
+    <RawPagination
+      data-testid="Pagination"
+      pageSize={4}
+      onPageChange={() => {}}
+      onNextPage={() => {}}
+      onPreviousPage={() => {}}
+      totalCount={20}
+      siblingCount={1}
+      currentPage={2}
+      truncateDropdown
+      {...props}
+    />
+    <RawPagination
+      data-testid="Pagination-disabled-left-arrow"
+      pageSize={4}
+      onPageChange={() => {}}
+      onNextPage={() => {}}
+      onPreviousPage={() => {}}
+      totalCount={20}
+      siblingCount={1}
+      currentPage={1}
+      truncateDropdown
+    />
+    <RawPagination
+      data-testid="Pagination-with-left-dropdown"
+      pageSize={4}
+      onPageChange={() => {}}
+      onNextPage={() => {}}
+      onPreviousPage={() => {}}
+      totalCount={30}
+      siblingCount={1}
+      currentPage={5}
+      truncateDropdown
+    />
+    <RawPagination
+      data-testid="Pagination-with-right-dropdown"
+      pageSize={4}
+      onPageChange={() => {}}
+      onNextPage={() => {}}
+      onPreviousPage={() => {}}
+      totalCount={60}
+      siblingCount={1}
+      currentPage={3}
+      truncateDropdown
+    />
+    <RawPagination
+      data-testid="Pagination-with-both-dropdowns"
+      pageSize={4}
+      onPageChange={() => {}}
+      onNextPage={() => {}}
+      onPreviousPage={() => {}}
+      totalCount={30}
+      siblingCount={1}
+      currentPage={4}
+      truncateDropdown
+    />
+    <RawPagination
+      data-testid="Pagination-disabled-dropdown"
+      pageSize={4}
+      onPageChange={() => {}}
+      onNextPage={() => {}}
+      onPreviousPage={() => {}}
+      totalCount={30}
+      siblingCount={1}
+      currentPage={7}
+      truncateDropdown={false}
+    />
+  </div>
+);
diff --git a/packages/components/src/core/Pagination/Pagination.namespace-test.tsx b/packages/components/src/core/Pagination/__tests__/Pagination.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Pagination/Pagination.namespace-test.tsx
rename to packages/components/src/core/Pagination/__tests__/Pagination.namespace-test.tsx
diff --git a/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..f4e2c9320
--- /dev/null
+++ b/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Pagination /> Default story renders snapshot 1`] = `
+<ul
+  class="css-ijj3wz"
+>
+  <li
+    class="css-cpsr28"
+    data-order="first"
+    disabled=""
+  >
+    <div
+      class="css-1ft6wgl"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+        data-file-name="IconChevronLeftSmall"
+        data-testid="IconChevronLeftSmall"
+        fillcontrast="white"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+      />
+    </div>
+  </li>
+  <li
+    class="css-16wopi5"
+  >
+    1
+  </li>
+  <li
+    class="css-194ctax"
+  >
+    2
+  </li>
+  <li
+    class="css-194ctax"
+  >
+    3
+  </li>
+  <li
+    class="css-194ctax"
+  >
+    4
+  </li>
+  <li
+    class="css-194ctax"
+  >
+    5
+  </li>
+  <li
+    class="css-132ngps"
+  >
+    <button
+      aria-label="Go to a page"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-13t9fgn-MuiButtonBase-root-MuiIconButton-root"
+      icon="DotsHorizontal"
+      tabindex="0"
+      type="button"
+    >
+      <div
+        class="css-1ft6wgl"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+          data-file-name="IconDotsHorizontal3Small"
+          data-testid="IconDotsHorizontal3Small"
+          fillcontrast="white"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        />
+      </div>
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
+    </button>
+  </li>
+  <li
+    class="css-194ctax"
+  >
+    20
+  </li>
+  <li
+    class="css-rrich5"
+    data-order="last"
+  >
+    <div
+      class="css-1ft6wgl"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
+        data-file-name="IconChevronRightSmall"
+        data-testid="IconChevronRightSmall"
+        fillcontrast="white"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+      />
+    </div>
+  </li>
+</ul>
+`;
diff --git a/packages/components/src/core/Pagination/index.test.tsx b/packages/components/src/core/Pagination/__tests__/index.test.tsx
similarity index 93%
rename from packages/components/src/core/Pagination/index.test.tsx
rename to packages/components/src/core/Pagination/__tests__/index.test.tsx
index c2ae6ed7f..7388ada00 100644
--- a/packages/components/src/core/Pagination/index.test.tsx
+++ b/packages/components/src/core/Pagination/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
@@ -18,8 +18,8 @@ describe("<Pagination />", () => {
   it("go to previous page is disabled if currentPage === 1", () => {
     render(<Test />);
     const element = screen.getByTestId("Pagination-disabled-left-arrow");
-    const button = element.getElementsByTagName("button")[0];
-    expect(button.disabled).toBeTruthy();
+    const goPrevious = element.getElementsByTagName("li")[0];
+    expect(goPrevious).toHaveAttribute("disabled");
   });
 
   it("should have a dropdown for left hidden pages list", () => {
diff --git a/packages/components/src/core/Pagination/components/PageListDropdown/index.tsx b/packages/components/src/core/Pagination/components/PageListDropdown/index.tsx
index 576cd78a0..eb32d2845 100644
--- a/packages/components/src/core/Pagination/components/PageListDropdown/index.tsx
+++ b/packages/components/src/core/Pagination/components/PageListDropdown/index.tsx
@@ -27,7 +27,7 @@ const PageListDropdown = (props: PageListDropdownProps) => {
       <StyledPaginationButtonIcon
         aria-label="Go to a page"
         onClick={handleClick}
-        icon="dotsHorizontal"
+        icon="DotsHorizontal"
         sdsSize="small"
       />
       <StyledPaginationDropdownMenu
diff --git a/packages/components/src/core/Pagination/components/PageListDropdown/style.ts b/packages/components/src/core/Pagination/components/PageListDropdown/style.ts
index 276fce1d7..f47ffe8b5 100644
--- a/packages/components/src/core/Pagination/components/PageListDropdown/style.ts
+++ b/packages/components/src/core/Pagination/components/PageListDropdown/style.ts
@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import Menu from "../../../Menu";
+import Menu from "src/core/Menu";
 
 export const StyledPaginationDropdownMenu = styled(Menu)`
   & .MuiPaper-root {
diff --git a/packages/components/src/core/Pagination/index.stories.tsx b/packages/components/src/core/Pagination/index.stories.tsx
deleted file mode 100644
index a40677c8e..000000000
--- a/packages/components/src/core/Pagination/index.stories.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-/* eslint-disable no-use-before-define */
-import { Args, Meta } from "@storybook/react";
-import * as React from "react";
-import RawPagination from "./index";
-
-const Pagination = (props: Args): JSX.Element => {
-  const { pageSize, totalCount, siblingCount, truncateDropdown, sdsStyle } =
-    props;
-  const [currentPage, setCurrentPage] = React.useState(1);
-  return (
-    <RawPagination
-      sdsStyle={sdsStyle}
-      pageSize={pageSize}
-      onPageChange={(page: number) => {
-        setCurrentPage(page);
-      }}
-      onNextPage={() => setCurrentPage(currentPage + 1)}
-      onPreviousPage={() => setCurrentPage(currentPage - 1)}
-      totalCount={totalCount}
-      siblingCount={siblingCount}
-      currentPage={currentPage}
-      truncateDropdown={truncateDropdown}
-    />
-  );
-};
-
-export default {
-  argTypes: {
-    pageSize: {
-      control: { type: "number" },
-    },
-    sdsStyle: {
-      control: { type: "select" },
-      options: ["round", "square"],
-    },
-    siblingCount: {
-      control: { type: "number" },
-    },
-    totalCount: {
-      control: { type: "number" },
-    },
-    truncateDropdown: {
-      control: { type: "boolean" },
-    },
-  },
-  component: Pagination,
-  title: "Table/Pagination",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    pageSize: 5,
-    siblingCount: 1,
-    totalCount: 100,
-  },
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => (
-  <div>
-    <RawPagination
-      data-testid="Pagination"
-      pageSize={4}
-      onPageChange={() => {}}
-      onNextPage={() => {}}
-      onPreviousPage={() => {}}
-      totalCount={20}
-      siblingCount={1}
-      currentPage={2}
-      truncateDropdown
-      {...props}
-    />
-    <RawPagination
-      data-testid="Pagination-disabled-left-arrow"
-      pageSize={4}
-      onPageChange={() => {}}
-      onNextPage={() => {}}
-      onPreviousPage={() => {}}
-      totalCount={20}
-      siblingCount={1}
-      currentPage={1}
-      truncateDropdown
-    />
-    <RawPagination
-      data-testid="Pagination-with-left-dropdown"
-      pageSize={4}
-      onPageChange={() => {}}
-      onNextPage={() => {}}
-      onPreviousPage={() => {}}
-      totalCount={30}
-      siblingCount={1}
-      currentPage={5}
-      truncateDropdown
-    />
-    <RawPagination
-      data-testid="Pagination-with-right-dropdown"
-      pageSize={4}
-      onPageChange={() => {}}
-      onNextPage={() => {}}
-      onPreviousPage={() => {}}
-      totalCount={60}
-      siblingCount={1}
-      currentPage={3}
-      truncateDropdown
-    />
-    <RawPagination
-      data-testid="Pagination-with-both-dropdowns"
-      pageSize={4}
-      onPageChange={() => {}}
-      onNextPage={() => {}}
-      onPreviousPage={() => {}}
-      totalCount={30}
-      siblingCount={1}
-      currentPage={4}
-      truncateDropdown
-    />
-    <RawPagination
-      data-testid="Pagination-disabled-dropdown"
-      pageSize={4}
-      onPageChange={() => {}}
-      onNextPage={() => {}}
-      onPreviousPage={() => {}}
-      totalCount={30}
-      siblingCount={1}
-      currentPage={7}
-      truncateDropdown={false}
-    />
-  </div>
-);
-
-export const Test = {
-  parameters: {
-    controls: {
-      exclude: [
-        "pageSize",
-        "sdsStyle",
-        "siblingCount",
-        "totalCount",
-        "truncateDropdown",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/Pagination/index.tsx b/packages/components/src/core/Pagination/index.tsx
index bd6fc1665..ab43abb27 100644
--- a/packages/components/src/core/Pagination/index.tsx
+++ b/packages/components/src/core/Pagination/index.tsx
@@ -5,10 +5,10 @@ import {
   PaginationExtraProps,
   StyledPagination,
   StyledPaginationButtonIcon,
-  StyledPaginationChevronButton,
   StyledPaginationChevronList,
 } from "./style";
 import { usePagination } from "./usePagination";
+import Icon from "src/core/Icon";
 
 export interface PaginationInternalProps {
   onPageChange: (page: number) => void;
@@ -57,14 +57,17 @@ const Pagination = forwardRef<HTMLUListElement, PaginationProps>(
 
     return (
       <StyledPagination ref={ref} {...props}>
-        <StyledPaginationChevronList key="prevPage">
-          <StyledPaginationChevronButton
+        <StyledPaginationChevronList
+          data-order="first"
+          key="prevPage"
+          disabled={currentPage === 1}
+          onClick={() => currentPage > 1 && onPreviousPage()}
+        >
+          <Icon
             aria-label="Previous page"
-            onClick={() => currentPage > 1 && onPreviousPage()}
-            disabled={currentPage === 1}
-            sdsSize="small"
-            icon="chevronLeft"
-            data-order="first"
+            sdsIcon="ChevronLeft"
+            sdsSize="xs"
+            sdsType="button"
           />
         </StyledPaginationChevronList>
 
@@ -85,7 +88,7 @@ const Pagination = forwardRef<HTMLUListElement, PaginationProps>(
                 <StyledPaginationButtonIcon
                   aria-label="Go to a page"
                   disabled
-                  icon="dotsHorizontal"
+                  icon="DotsHorizontal"
                   sdsSize="small"
                 />
               </Page>
@@ -103,15 +106,17 @@ const Pagination = forwardRef<HTMLUListElement, PaginationProps>(
             </Page>
           );
         })}
-
-        <StyledPaginationChevronList key="onNextPage">
-          <StyledPaginationChevronButton
+        <StyledPaginationChevronList
+          data-order="last"
+          key="onNextPage"
+          disabled={currentPage === lastPage}
+          onClick={() => currentPage !== lastPage && onNextPage()}
+        >
+          <Icon
             aria-label="Next page"
-            onClick={() => currentPage !== lastPage && onNextPage()}
-            disabled={currentPage === lastPage}
-            sdsSize="small"
-            data-order="last"
-            icon="chevronRight"
+            sdsIcon="ChevronRight"
+            sdsSize="xs"
+            sdsType="button"
           />
         </StyledPaginationChevronList>
       </StyledPagination>
diff --git a/packages/components/src/core/Pagination/style.ts b/packages/components/src/core/Pagination/style.ts
index 9f2a91f8c..b3561ed32 100644
--- a/packages/components/src/core/Pagination/style.ts
+++ b/packages/components/src/core/Pagination/style.ts
@@ -1,14 +1,14 @@
 import { styled } from "@mui/material/styles";
-import ButtonIcon from "../ButtonIcon";
+import ButtonIcon from "src/core/ButtonIcon";
 import {
   CommonThemeProps,
   fontBodyS,
-  getColors,
+  fontBodySemiboldS,
   getCorners,
-  getFontWeights,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface PaginationExtraProps extends CommonThemeProps {
   sdsStyle?: "round" | "square";
@@ -36,50 +36,65 @@ export const StyledPaginationButtonIcon = styled(ButtonIcon, {
 })`
   ${(props: PaginationExtraProps) => {
     const { disabled } = props;
-    const colors = getColors(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
       width: 32px;
       height: 32px;
       cursor: ${disabled ? "auto" : "pointer"};
-      &:hover {
-        background-color: ${disabled ? "transparent" : colors?.gray[200]};
-      }
+
       & .MuiSvgIcon-root {
         width: 10px;
-        color: ${colors?.gray[600]}
+        color: ${semanticComponentColors?.base?.icon}
+      }
+
+      &:hover {
+        background-color: ${disabled ? "transparent" : semanticComponentColors?.base?.fillHover};
+
+        & .MuiSvgIcon-root {
+          color: ${semanticComponentColors?.base?.iconHover}
+        }
       }
     `;
   }}
 `;
 
-export const StyledPaginationChevronList = styled("li")`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const StyledPaginationChevronButton = styled(ButtonIcon, {
+export const StyledPaginationChevronList = styled("li", {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })`
   ${(props: PaginationExtraProps) => {
     const { disabled } = props;
-    const colors = getColors(props);
+
     const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
+      width: 32px;
+      height: 32px;
+      cursor: ${disabled ? "auto" : "pointer"};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 32px;
+
       &[data-order="first"] {
-        margin-right: ${spaces?.xl}px;
+        margin-right: ${spaces?.l}px;
       }
+
       &[data-order="last"] {
-        margin-left: ${spaces?.xl}px;
-      }
-      cursor: ${disabled ? "auto" : "pointer"};
-      &:hover {
-        background-color: transparent;
+        margin-left: ${spaces?.l}px;
       }
+
       & .MuiSvgIcon-root {
-        color: ${disabled ? colors?.gray[300] : "black"};
+        color: ${disabled ? semanticComponentColors?.base?.iconDisabled : semanticComponentColors?.base?.icon};
+      }
+
+      &:hover {
+        background-color: ${disabled ? "transparent" : semanticComponentColors?.base?.fillHover};
+
+        & .MuiSvgIcon-root {
+          color: ${disabled ? semanticComponentColors?.base?.iconDisabled : semanticComponentColors?.base?.iconHover}
+        }
       }
     `;
   }}
@@ -89,30 +104,26 @@ export const StyledPagination = styled("ul", {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })`
   ${fontBodyS}
-
-  ${(props: PaginationExtraProps) => {
-    const typography = getTypography(props);
-
-    return `
-      font-family: ${typography?.fontFamily};
-      display: flex;
-      flex-wrap: wrap;
-      padding: 0;
-      margin: 0;
-      & li {
-        list-style: none;
-      }
-    `;
-  }}
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+  & li {
+    list-style: none;
+  }
 `;
 
-const selectedPageStyle = () => {
+const selectedPageStyle = (props: PaginationExtraProps) => {
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
+
   return `
-    background-color: black;
-    color: white;
+    background-color: ${semanticComponentColors?.base?.fillSelected};
+    color: ${semanticTextColors?.base?.onFill};
 
     &:hover {
-      background-color: black;
+      background-color: ${semanticComponentColors?.base?.fillSelected};
+      color: ${semanticTextColors?.base?.onFill};
     }
   `;
 };
@@ -120,17 +131,17 @@ const selectedPageStyle = () => {
 export const Page = styled("li", {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })`
-  ${fontBodyS}
+  ${fontBodySemiboldS}
 
   ${(props: PaginationExtraProps) => {
     const { selected, sdsStyle } = props;
     const spaces = getSpaces(props);
     const corners = getCorners(props);
-    const colors = getColors(props);
-    const fontWeights = getFontWeights(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
-      font-weight: ${fontWeights?.semibold};
+      color: ${semanticTextColors?.base?.secondary};
       cursor: pointer;
       list-style: none;
       width: 32px;
@@ -142,14 +153,15 @@ export const Page = styled("li", {
       border-radius: ${sdsStyle === "round" ? corners?.l : corners?.m}px;
       user-select: none;
       &:hover {
-        background-color: ${colors?.gray[200]};
+        background-color: ${semanticComponentColors?.base?.fillHover};
+        color: ${semanticTextColors?.base?.primary};
       }
 
       &:nth-last-of-type(-n+2) {
         margin-right: 0;
       }
 
-      ${selected && selectedPageStyle()};
+      ${selected && selectedPageStyle(props)};
     `;
   }}
 `;
diff --git a/packages/components/src/core/SegmentedControl/__storybook__/constants.ts b/packages/components/src/core/SegmentedControl/__storybook__/constants.ts
new file mode 100644
index 000000000..0dacdb201
--- /dev/null
+++ b/packages/components/src/core/SegmentedControl/__storybook__/constants.ts
@@ -0,0 +1 @@
+export const SEGMENTED_CONTROL_EXCLUDED_CONTROLS = ["buttonDefinition"];
diff --git a/packages/components/src/core/SegmentedControl/__storybook__/index.stories.tsx b/packages/components/src/core/SegmentedControl/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..204d2a299
--- /dev/null
+++ b/packages/components/src/core/SegmentedControl/__storybook__/index.stories.tsx
@@ -0,0 +1,71 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { SegmentedControl } from "./stories/default";
+import { SEGMENTED_CONTROL_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    buttonDefinition: {
+      control: {
+        type: "object",
+      },
+    },
+  },
+  component: SegmentedControl,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/SegmentedControl",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    buttonDefinition: [
+      { icon: "List", tooltipText: "List A", value: "A" },
+      { icon: "List", tooltipText: "List B", value: "B" },
+      { icon: "List", tooltipText: "List C", value: "C" },
+      { icon: "List", tooltipText: "List D", value: "D" },
+    ],
+  },
+  render: SegmentedControl,
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: SEGMENTED_CONTROL_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    buttonDefinition: [
+      { icon: "List", tooltipText: "List A", value: "A" },
+      { icon: "List", tooltipText: "List B", value: "B" },
+      { icon: "Table", tooltipText: "Table", value: "Table" },
+      { icon: "People", tooltipText: "People", value: "People" },
+    ],
+  },
+  parameters: {
+    controls: {
+      exclude: SEGMENTED_CONTROL_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/SegmentedControl/__storybook__/stories/default.tsx b/packages/components/src/core/SegmentedControl/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..676d63086
--- /dev/null
+++ b/packages/components/src/core/SegmentedControl/__storybook__/stories/default.tsx
@@ -0,0 +1,14 @@
+import { Args } from "@storybook/react";
+import RawSegmentedControl from "src/core/SegmentedControl";
+
+export const SegmentedControl = (props: Args): JSX.Element => {
+  const { buttonDefinition, ...rest } = props;
+
+  return (
+    <RawSegmentedControl
+      buttonDefinition={buttonDefinition}
+      color="error"
+      {...rest}
+    />
+  );
+};
diff --git a/packages/components/src/core/SegmentedControl/__storybook__/stories/livePreview.tsx b/packages/components/src/core/SegmentedControl/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..1dbc2f814
--- /dev/null
+++ b/packages/components/src/core/SegmentedControl/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,14 @@
+import { SegmentedControl } from "./default";
+
+export function LivePreviewDemo(): JSX.Element {
+  return (
+    <SegmentedControl
+      buttonDefinition={[
+        { icon: "List", tooltipText: "List A", value: "A" },
+        { icon: "List", tooltipText: "List B", value: "B" },
+        { icon: "List", tooltipText: "List C", value: "C" },
+        { icon: "List", tooltipText: "List D", value: "D" },
+      ]}
+    />
+  );
+}
diff --git a/packages/components/src/core/SegmentedControl/__storybook__/stories/test.tsx b/packages/components/src/core/SegmentedControl/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..d128472de
--- /dev/null
+++ b/packages/components/src/core/SegmentedControl/__storybook__/stories/test.tsx
@@ -0,0 +1,13 @@
+import { Args } from "@storybook/react";
+import { SegmentedControl } from "./default";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  const { buttonDefinition } = props;
+  return (
+    <SegmentedControl
+      buttonDefinition={buttonDefinition}
+      data-testid="segmentedControl"
+      {...props}
+    />
+  );
+};
diff --git a/packages/components/src/core/SegmentedControl/SegmentedControl.namespace-test.tsx b/packages/components/src/core/SegmentedControl/__tests__/SegmentedControl.namespace-test.tsx
similarity index 51%
rename from packages/components/src/core/SegmentedControl/SegmentedControl.namespace-test.tsx
rename to packages/components/src/core/SegmentedControl/__tests__/SegmentedControl.namespace-test.tsx
index 0fcad6e63..abd29d29e 100644
--- a/packages/components/src/core/SegmentedControl/SegmentedControl.namespace-test.tsx
+++ b/packages/components/src/core/SegmentedControl/__tests__/SegmentedControl.namespace-test.tsx
@@ -5,10 +5,10 @@ const SegmentedControlNameSpaceTest = (props: SegmentedControlProps) => {
   return (
     <SegmentedControl
       buttonDefinition={[
-        { icon: "list", tooltipText: "List A" },
-        { icon: "list", tooltipText: "List B" },
-        { icon: "table", tooltipText: "Table" },
-        { icon: "people", tooltipText: "People" },
+        { icon: "List", tooltipText: "List A", value: "A" },
+        { icon: "List", tooltipText: "List B", value: "B" },
+        { icon: "Table", tooltipText: "Table", value: "C" },
+        { icon: "People", tooltipText: "People", value: "D" },
       ]}
     />
   );
diff --git a/packages/components/src/core/SegmentedControl/__snapshots__/index.test.tsx.snap b/packages/components/src/core/SegmentedControl/__tests__/__snapshots__/index.test.tsx.snap
similarity index 58%
rename from packages/components/src/core/SegmentedControl/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/SegmentedControl/__tests__/__snapshots__/index.test.tsx.snap
index 419e31c59..289bd6af3 100644
--- a/packages/components/src/core/SegmentedControl/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/SegmentedControl/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,16 +2,16 @@
 
 exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
 <div
-  class="MuiToggleButtonGroup-root css-uqbc4z-MuiToggleButtonGroup-root"
+  class="MuiToggleButtonGroup-root css-k29a0u-MuiToggleButtonGroup-root"
   role="group"
 >
   <button
     aria-label="List A"
     aria-pressed="true"
-    class="MuiButtonBase-root MuiToggleButton-root Mui-selected MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-selected MuiToggleButton-sizeSmall Mui-error MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButtonGroup-firstButton css-xc2fp1-MuiButtonBase-root-MuiToggleButton-root"
     tabindex="0"
     type="button"
-    value="List A"
+    value="A"
   >
     <span
       class=""
@@ -27,7 +27,9 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
           data-testid="IconListSmall"
           fillcontrast="white"
           focusable="false"
-          viewBox="0 0 14 14"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         />
       </div>
     </span>
@@ -35,10 +37,10 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
   <button
     aria-label="List B"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall Mui-error MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButtonGroup-middleButton css-xc2fp1-MuiButtonBase-root-MuiToggleButton-root"
     tabindex="0"
     type="button"
-    value="List B"
+    value="B"
   >
     <span
       class=""
@@ -54,7 +56,9 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
           data-testid="IconListSmall"
           fillcontrast="white"
           focusable="false"
-          viewBox="0 0 14 14"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         />
       </div>
     </span>
@@ -62,10 +66,10 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
   <button
     aria-label="List C"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall Mui-error MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButtonGroup-middleButton css-xc2fp1-MuiButtonBase-root-MuiToggleButton-root"
     tabindex="0"
     type="button"
-    value="List C"
+    value="C"
   >
     <span
       class=""
@@ -81,7 +85,9 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
           data-testid="IconListSmall"
           fillcontrast="white"
           focusable="false"
-          viewBox="0 0 14 14"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         />
       </div>
     </span>
@@ -89,10 +95,10 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
   <button
     aria-label="List D"
     aria-pressed="false"
-    class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+    class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall Mui-error MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButtonGroup-lastButton css-xc2fp1-MuiButtonBase-root-MuiToggleButton-root"
     tabindex="0"
     type="button"
-    value="List D"
+    value="D"
   >
     <span
       class=""
@@ -108,7 +114,9 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
           data-testid="IconListSmall"
           fillcontrast="white"
           focusable="false"
-          viewBox="0 0 14 14"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
         />
       </div>
     </span>
diff --git a/packages/components/src/core/SegmentedControl/index.test.tsx b/packages/components/src/core/SegmentedControl/__tests__/index.test.tsx
similarity index 90%
rename from packages/components/src/core/SegmentedControl/index.test.tsx
rename to packages/components/src/core/SegmentedControl/__tests__/index.test.tsx
index 190ad2504..513c05375 100644
--- a/packages/components/src/core/SegmentedControl/index.test.tsx
+++ b/packages/components/src/core/SegmentedControl/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/SegmentedControl/index.stories.tsx b/packages/components/src/core/SegmentedControl/index.stories.tsx
deleted file mode 100644
index 713bd0c45..000000000
--- a/packages/components/src/core/SegmentedControl/index.stories.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { Args, Meta } from "@storybook/react";
-import RawSegmentedControl, {
-  SegmentedControlProps,
-  SingleButtonDefinition,
-} from "./index";
-
-const SegmentedControl = (props: Args): JSX.Element => {
-  const { buttonDefinition } = props;
-
-  return <RawSegmentedControl buttonDefinition={buttonDefinition} />;
-};
-
-const iconOptions = ["list", "infoCircle", "table", "globe", "people"];
-
-export default {
-  argTypes: {
-    segmentFourIcon: {
-      control: { type: "select" },
-      options: iconOptions,
-    },
-    segmentFourTooltipText: {
-      control: {
-        type: "text",
-      },
-    },
-    segmentOneIcon: {
-      control: { type: "select" },
-      options: iconOptions,
-    },
-    segmentOneTooltipText: {
-      control: {
-        type: "text",
-      },
-    },
-    segmentThreeIcon: {
-      control: { type: "select" },
-      options: iconOptions,
-    },
-    segmentThreeTooltipText: {
-      control: {
-        type: "text",
-      },
-    },
-    segmentTwoIcon: {
-      control: { type: "select" },
-      options: iconOptions,
-    },
-    segmentTwoTooltipText: {
-      control: {
-        type: "text",
-      },
-    },
-  },
-  component: SegmentedControl,
-  title: "SegmentedControl",
-} as Meta;
-
-interface SegmentedControlArgs extends SegmentedControlProps {
-  segmentOneIcon: SingleButtonDefinition["icon"];
-  segmentOneTooltipText: string;
-  segmentTwoIcon: SingleButtonDefinition["icon"];
-  segmentTwoTooltipText: string;
-  segmentThreeIcon: SingleButtonDefinition["icon"];
-  segmentThreeTooltipText: string;
-  segmentFourIcon: SingleButtonDefinition["icon"];
-  segmentFourTooltipText: string;
-}
-
-const Template = (props: SegmentedControlArgs) => {
-  const {
-    segmentOneIcon,
-    segmentOneTooltipText,
-    segmentTwoIcon,
-    segmentTwoTooltipText,
-    segmentThreeIcon,
-    segmentThreeTooltipText,
-    segmentFourIcon,
-    segmentFourTooltipText,
-  } = props;
-
-  const buttonDefinition = [
-    { icon: segmentOneIcon, tooltipText: segmentOneTooltipText },
-    { icon: segmentTwoIcon, tooltipText: segmentTwoTooltipText },
-    { icon: segmentThreeIcon, tooltipText: segmentThreeTooltipText },
-    { icon: segmentFourIcon, tooltipText: segmentFourTooltipText },
-  ];
-
-  return <RawSegmentedControl buttonDefinition={buttonDefinition} />;
-};
-
-// Default
-
-export const Default = {
-  args: {
-    segmentFourIcon: "list",
-    segmentFourTooltipText: "List D",
-    segmentOneIcon: "list",
-    segmentOneTooltipText: "List A",
-    segmentThreeIcon: "list",
-    segmentThreeTooltipText: "List C",
-    segmentTwoIcon: "list",
-    segmentTwoTooltipText: "List B",
-  },
-  render: Template,
-};
-
-// Live Preview
-
-const livePreviewStyles = {
-  columnGap: "24px",
-  display: "flex",
-};
-
-function LivePreviewDemo(props: Args): JSX.Element {
-  const finalProps = {
-    ...props,
-    style: { width: "250px" },
-  };
-
-  return (
-    <div style={livePreviewStyles}>
-      <div>
-        <Template
-          segmentOneIcon="list"
-          segmentOneTooltipText="List A"
-          segmentTwoIcon="list"
-          segmentTwoTooltipText="List B"
-          segmentThreeIcon="list"
-          segmentThreeTooltipText="List C"
-          segmentFourIcon="list"
-          segmentFourTooltipText="List D"
-          buttonDefinition={[]}
-          {...finalProps}
-        />
-      </div>
-    </div>
-  );
-}
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  const { buttonDefinition } = props;
-  return (
-    <RawSegmentedControl
-      buttonDefinition={buttonDefinition}
-      data-testid="segmentedControl"
-      {...props}
-    />
-  );
-};
-
-export const Test = {
-  args: {
-    buttonDefinition: [
-      { icon: "list", tooltipText: "List A" },
-      { icon: "list", tooltipText: "List B" },
-      { icon: "table", tooltipText: "Table" },
-      { icon: "people", tooltipText: "People" },
-    ],
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/SegmentedControl/index.tsx b/packages/components/src/core/SegmentedControl/index.tsx
index bb31da0ef..4b3a97b1c 100644
--- a/packages/components/src/core/SegmentedControl/index.tsx
+++ b/packages/components/src/core/SegmentedControl/index.tsx
@@ -1,27 +1,18 @@
 import { ToggleButton, ToggleButtonGroupProps } from "@mui/material";
 import React from "react";
-import Icon, { IconNameToSizes } from "../Icon";
-import Tooltip from "../Tooltip";
+import Icon, { IconNameToSizes } from "src/core/Icon";
+import Tooltip from "src/core/Tooltip";
 import { StyledSegmentedControl } from "./style";
 // one prop is array of objects: with icon name and tooltip text. They need to make
 // first item in array first button, etc
 export interface SingleButtonDefinition {
   icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
-  tooltipText: string;
+  tooltipText?: string;
+  value: string;
 }
 
-interface SegmentedControlExtraProps
-  extends Omit<ToggleButtonGroupProps, "color"> {
+interface SegmentedControlExtraProps extends ToggleButtonGroupProps {
   buttonDefinition: SingleButtonDefinition[];
-  color?:
-    | "primary"
-    | "secondary"
-    | "standard"
-    | "success"
-    | "error"
-    | "info"
-    | "warning"
-    | undefined;
 }
 
 /**
@@ -32,7 +23,7 @@ export type SegmentedControlProps = SegmentedControlExtraProps &
 
 const SegmentedControl = (props: SegmentedControlProps) => {
   const { buttonDefinition } = props;
-  const leftmost = buttonDefinition[0]?.tooltipText;
+  const leftmost = buttonDefinition[0]?.value;
   const [active, setActive] = React.useState<string | null>(leftmost);
 
   const handleActive = (
@@ -46,7 +37,6 @@ const SegmentedControl = (props: SegmentedControlProps) => {
 
   return (
     <StyledSegmentedControl
-      color="primary"
       size="small"
       value={active}
       exclusive
@@ -54,7 +44,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
       {...props}
     >
       {(buttonDefinition as SingleButtonDefinition[]).map((button) => {
-        const { icon, tooltipText } = button;
+        const { icon, tooltipText, value } = button;
 
         const iconItem = () => {
           if (icon) {
@@ -70,10 +60,10 @@ const SegmentedControl = (props: SegmentedControlProps) => {
           <ToggleButton
             aria-label={tooltipText}
             disableRipple
-            value={tooltipText}
-            key={tooltipText}
+            value={value}
+            key={value}
           >
-            <Tooltip title={tooltipText} sdsStyle="dark" arrow>
+            <Tooltip title={tooltipText ?? value} sdsStyle="dark" arrow>
               <span>{iconItem()}</span>
             </Tooltip>
           </ToggleButton>
diff --git a/packages/components/src/core/SegmentedControl/style.ts b/packages/components/src/core/SegmentedControl/style.ts
index f57d295e6..0724b6b4b 100644
--- a/packages/components/src/core/SegmentedControl/style.ts
+++ b/packages/components/src/core/SegmentedControl/style.ts
@@ -1,47 +1,42 @@
-import { ToggleButtonGroup } from "@mui/material";
+import { ToggleButtonGroup, toggleButtonClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { CommonThemeProps, getColors, getCorners, getSpaces } from "../styles";
+import {
+  CommonThemeProps,
+  getSemanticComponentColors,
+  getSpaces,
+} from "src/core/styles";
 
-const doNotForwardProps = ["color", "buttonDefinition"];
+const doNotForwardProps = ["buttonDefinition"];
 
 export const StyledSegmentedControl = styled(ToggleButtonGroup, {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
 })`
   ${(props: CommonThemeProps) => {
-    const colors = getColors(props);
-    const spacings = getSpaces(props);
-    const corners = getCorners(props);
+    const spaces = getSpaces(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
-    .Mui-selected.MuiToggleButton-root {
-        background-color: ${colors?.gray[100]};
-        color: ${colors?.primary[400]};
-        border-color: ${colors?.gray[400]};
+    .${toggleButtonClasses.root}.${toggleButtonClasses.selected} {
+        background-color: ${semanticComponentColors?.base?.fillOpen};
+        color: ${semanticComponentColors?.accent?.icon};
+        border-color: ${semanticComponentColors?.base?.border};
 
         &:hover {
-          background-color: ${colors?.gray[100]};
+          background-color: ${semanticComponentColors?.base?.fillHover};
         }
-    }
+      }
 
-    .MuiToggleButton-root {
-      border-color: ${colors?.gray[400]};
-      line-height: 0px;
-      color: #000;
-      padding: 0;
+      .${toggleButtonClasses.root} {
+        border-color: ${semanticComponentColors?.base?.border};
+        line-height: 0px;
+        color: ${semanticComponentColors?.base?.iconHover};
+        padding: ${(spaces?.xs ?? 6) - 1}px ${spaces?.l}px;
 
-      &:hover {
-        border-color: ${colors?.gray[400]};
-        background-color: ${colors?.gray[100]};
+        &:hover {
+          border-color: ${semanticComponentColors?.base?.border};
+          background-color: ${semanticComponentColors?.base?.fillHover};
+        }
       }
-    }
-
-    .MuiSvgIcon-root {
-      padding-right: ${spacings?.l}px;
-      padding-left: ${spacings?.l}px;
-      padding-bottom: ${spacings?.xs}px;
-      padding-top: ${spacings?.xs}px;
-      border-radius: ${corners?.m}px;
-    }
     `;
   }}
 `;
diff --git a/packages/components/src/core/Table/__storybook__/index.stories.tsx b/packages/components/src/core/Table/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..9044d8548
--- /dev/null
+++ b/packages/components/src/core/Table/__storybook__/index.stories.tsx
@@ -0,0 +1,35 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Table } from "./stories/default";
+import { TestDemo } from "./stories/test";
+
+export default {
+  component: Table,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Table/Table",
+} as Meta;
+
+export const Default = {
+  parameters: {
+    axe: {
+      disabledRules: [
+        // For some reason axe is still checking color contrast of the disabled row. Maybe it only
+        // takes that into consideration for form controls?
+        "color-contrast",
+      ],
+    },
+  },
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} data-testid="table" />,
+};
diff --git a/packages/components/src/core/Table/index.stories.tsx b/packages/components/src/core/Table/__storybook__/stories/default.tsx
similarity index 57%
rename from packages/components/src/core/Table/index.stories.tsx
rename to packages/components/src/core/Table/__storybook__/stories/default.tsx
index 28ce6a680..ad2a7ef9e 100644
--- a/packages/components/src/core/Table/index.stories.tsx
+++ b/packages/components/src/core/Table/__storybook__/stories/default.tsx
@@ -1,26 +1,18 @@
-/* eslint-disable no-use-before-define */
-import styled from "@emotion/styled";
-import { FormControlLabel, RadioGroup } from "@mui/material";
-import { Args, Meta } from "@storybook/react";
-import CellBasic from "../CellBasic";
-import CellComponent from "../CellComponent";
-import CellHeader from "../CellHeader";
-import Icon from "../Icon";
-import InputRadio from "../InputRadio";
-import TableHeader from "../TableHeader";
-import TableRow from "../TableRow";
-import Tag from "../Tag";
-import { SdsTagColorType } from "../Tag/style";
-import RawTable from "./index";
+import { RadioGroup } from "@mui/material";
+import { Args } from "@storybook/react";
+import CellBasic from "src/core/CellBasic";
+import CellComponent from "src/core/CellComponent";
+import CellHeader from "src/core/CellHeader";
+import Icon from "src/core/Icon";
+import InputRadio from "src/core/InputRadio";
+import TableHeader from "src/core/TableHeader";
+import TableRow from "src/core/TableRow";
+import Tag from "src/core/Tag";
+import { SdsTagColorType } from "src/core/Tag/style";
+import RawTable from "src/core/Table";
+import { StyledIconCell } from "../style";
 
-const StyledIconCell = styled("div")`
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const Table = (props: Args): JSX.Element => {
+export const Table = (props: Args): JSX.Element => {
   return (
     <RawTable {...props}>
       <TableHeader>
@@ -31,7 +23,6 @@ const Table = (props: Args): JSX.Element => {
         <CellHeader>
           A very long table header title to test sort icon positioning
         </CellHeader>
-        <CellHeader horizontalAlign="center">Centered</CellHeader>
         <CellHeader hideSortIcon>Component</CellHeader>
         <CellHeader horizontalAlign="right" hideSortIcon>
           Right Aligned and Not sortable
@@ -41,12 +32,13 @@ const Table = (props: Args): JSX.Element => {
         <TableRow>
           <CellComponent verticalAlign="center" horizontalAlign="center">
             <StyledIconCell>
-              <Icon sdsSize="xl" sdsIcon="flask" sdsType="static" />
+              <Icon sdsSize="xl" sdsIcon="Flask" sdsType="static" />
               <Tag
-                color="primary"
+                color="info"
                 label="Chemistry"
                 sdsStyle="rounded"
                 sdsType="secondary"
+                hover={false}
               />
             </StyledIconCell>
           </CellComponent>
@@ -62,21 +54,15 @@ const Table = (props: Args): JSX.Element => {
             tertiaryText="Tertiary Text"
             shouldShowTooltipOnHover={false}
           />
-          <CellBasic
-            primaryText="Primary Text"
-            secondaryText="Secondary Text"
-            tertiaryText="Tertiary Text"
-            horizontalAlign="center"
-            shouldShowTooltipOnHover={false}
-          />
           <CellComponent>
-            {["primary", "warning", "beta", "error", "success"].map((item) => (
+            {["info", "notice", "beta", "negative", "positive"].map((item) => (
               <Tag
                 key={item}
                 color={item as SdsTagColorType}
                 label={item as string}
                 sdsStyle="rounded"
                 sdsType="secondary"
+                hover={false}
               />
             ))}
           </CellComponent>
@@ -86,15 +72,17 @@ const Table = (props: Args): JSX.Element => {
             shouldShowTooltipOnHover={false}
           />
         </TableRow>
+
         <TableRow>
           <CellComponent verticalAlign="center" horizontalAlign="center">
             <StyledIconCell>
-              <Icon sdsSize="xl" sdsIcon="download" sdsType="static" />
+              <Icon sdsSize="xl" sdsIcon="Download" sdsType="static" />
               <Tag
-                color="primary"
+                color="info"
                 label="Downloadable Content"
                 sdsStyle="rounded"
                 sdsType="secondary"
+                hover={false}
               />
             </StyledIconCell>
           </CellComponent>
@@ -109,25 +97,14 @@ const Table = (props: Args): JSX.Element => {
             secondaryText="Secondary Text"
             shouldShowTooltipOnHover={false}
           />
-          <CellBasic
-            primaryText="Primary Text"
-            secondaryText="Secondary Text"
-            horizontalAlign="center"
-            shouldShowTooltipOnHover={false}
-          />
           <CellComponent>
             <RadioGroup
               aria-labelledby="demo-radio-buttons-group-label"
               name="radio-buttons-group"
+              defaultValue="1"
             >
-              <FormControlLabel
-                control={<InputRadio stage="unchecked" />}
-                label="Option 1"
-              />
-              <FormControlLabel
-                control={<InputRadio stage="checked" />}
-                label="Option 2"
-              />
+              <InputRadio label="Option I" caption="Caption I" value="1" />
+              <InputRadio label="Option II" caption="Caption II" value="2" />
             </RadioGroup>
           </CellComponent>
           <CellBasic
@@ -138,6 +115,7 @@ const Table = (props: Args): JSX.Element => {
             shouldShowTooltipOnHover={false}
           />
         </TableRow>
+
         <TableRow
           disabled
           shouldShowTooltipOnHover
@@ -146,12 +124,13 @@ const Table = (props: Args): JSX.Element => {
         >
           <CellComponent verticalAlign="center" horizontalAlign="center">
             <StyledIconCell>
-              <Icon sdsSize="xl" sdsIcon="bacteria" sdsType="static" />
+              <Icon sdsSize="xl" sdsIcon="Bacteria" sdsType="static" />
               <Tag
-                color="error"
+                color="negative"
                 label="Disease"
                 sdsStyle="rounded"
                 sdsType="secondary"
+                hover={false}
               />
             </StyledIconCell>
           </CellComponent>
@@ -167,14 +146,8 @@ const Table = (props: Args): JSX.Element => {
             shouldShowTooltipOnHover={false}
             verticalAlign="center"
           />
-          <CellBasic
-            primaryText="Primary Text"
-            horizontalAlign="center"
-            verticalAlign="center"
-            shouldShowTooltipOnHover={false}
-          />
           <CellComponent verticalAlign="center">
-            <Icon sdsSize="l" sdsIcon="virus" sdsType="static" />
+            <Icon sdsSize="l" sdsIcon="Virus" sdsType="static" />
           </CellComponent>
           <CellBasic
             primaryText="0.4"
@@ -187,44 +160,3 @@ const Table = (props: Args): JSX.Element => {
     </RawTable>
   );
 };
-
-export default {
-  component: Table,
-  title: "Table/Table",
-} as Meta;
-
-export const Default = {
-  parameters: {
-    axe: {
-      disabledRules: [
-        // For some reason axe is still checking color contrast of the disabled row. Maybe it only
-        // takes that into consideration for form controls?
-        "color-contrast",
-      ],
-    },
-  },
-};
-
-// Test
-
-const TestDemo = (): JSX.Element => (
-  <RawTable data-testid="Table">
-    <tbody>
-      <TableRow>
-        <CellBasic primaryText="Primary 1" shouldShowTooltipOnHover={false} />
-        <CellBasic primaryText="Primary 2" shouldShowTooltipOnHover={false} />
-        <CellBasic primaryText="Primary 3" shouldShowTooltipOnHover={false} />
-        <CellBasic primaryText="Primary 4" shouldShowTooltipOnHover={false} />
-      </TableRow>
-    </tbody>
-  </RawTable>
-);
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} data-testid="table" />,
-};
diff --git a/packages/components/src/core/Table/__storybook__/stories/test.tsx b/packages/components/src/core/Table/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..642439a48
--- /dev/null
+++ b/packages/components/src/core/Table/__storybook__/stories/test.tsx
@@ -0,0 +1,16 @@
+import CellBasic from "src/core/CellBasic";
+import RawTable from "src/core/Table";
+import TableRow from "src/core/TableRow";
+
+export const TestDemo = (): JSX.Element => (
+  <RawTable data-testid="Table">
+    <tbody>
+      <TableRow>
+        <CellBasic primaryText="Primary 1" shouldShowTooltipOnHover={false} />
+        <CellBasic primaryText="Primary 2" shouldShowTooltipOnHover={false} />
+        <CellBasic primaryText="Primary 3" shouldShowTooltipOnHover={false} />
+        <CellBasic primaryText="Primary 4" shouldShowTooltipOnHover={false} />
+      </TableRow>
+    </tbody>
+  </RawTable>
+);
diff --git a/packages/components/src/core/Table/__storybook__/style.ts b/packages/components/src/core/Table/__storybook__/style.ts
new file mode 100644
index 000000000..cb8c24cc7
--- /dev/null
+++ b/packages/components/src/core/Table/__storybook__/style.ts
@@ -0,0 +1,8 @@
+import { styled } from "@mui/material";
+
+export const StyledIconCell = styled("div")`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
diff --git a/packages/components/src/core/Table/Table.namespace-test.tsx b/packages/components/src/core/Table/__tests__/Table.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Table/Table.namespace-test.tsx
rename to packages/components/src/core/Table/__tests__/Table.namespace-test.tsx
diff --git a/packages/components/src/core/Table/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
similarity index 60%
rename from packages/components/src/core/Table/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
index a5f99223f..ce5bbd613 100644
--- a/packages/components/src/core/Table/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,10 +8,10 @@ exports[`<Table /> Default story renders snapshot 1`] = `
     class="css-1426k2b"
   >
     <tr
-      class="css-1nusez2"
+      class="css-2l3m6x"
     >
       <th
-        class="css-1rmg044"
+        class="css-19ju8um"
       >
         <div
           class="css-187gjam"
@@ -22,7 +22,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-bc0x2f"
+        class="css-5bfdy4"
       >
         <div
           class="css-rm9mvq"
@@ -30,34 +30,25 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <span>
             Active Header
           </span>
-          <button
-            aria-label="Change sort direction from descending to ascending"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-qh2mmt-MuiButtonBase-root-MuiIconButton-root"
-            icon="chevronDown"
-            tabindex="0"
-            type="button"
+          <div
+            class="css-1ft6wgl"
           >
-            <div
-              class="css-1ft6wgl"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-                data-file-name="IconChevronDownSmall"
-                data-testid="IconChevronDownSmall"
-                fillcontrast="white"
-                focusable="false"
-                viewBox="0 0 14 14"
-              />
-            </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tlyfhc-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
             />
-          </button>
+          </div>
         </div>
       </th>
       <th
-        class="css-cafzim"
+        class="css-5bfdy4"
       >
         <div
           class="css-rm9mvq"
@@ -65,69 +56,25 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <span>
             A very long table header title to test sort icon positioning
           </span>
-          <button
-            aria-label="Change sort direction from descending to ascending"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1tty7jy-MuiButtonBase-root-MuiIconButton-root"
-            icon="chevronDown"
-            tabindex="0"
-            type="button"
-          >
-            <div
-              class="css-1ft6wgl"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-                data-file-name="IconChevronDownSmall"
-                data-testid="IconChevronDownSmall"
-                fillcontrast="white"
-                focusable="false"
-                viewBox="0 0 14 14"
-              />
-            </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </th>
-      <th
-        class="css-1rmg044"
-      >
-        <div
-          class="css-187gjam"
-        >
-          <span>
-            Centered
-          </span>
-          <button
-            aria-label="Change sort direction from descending to ascending"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1tty7jy-MuiButtonBase-root-MuiIconButton-root"
-            icon="chevronDown"
-            tabindex="0"
-            type="button"
+          <div
+            class="css-1ft6wgl"
           >
-            <div
-              class="css-1ft6wgl"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-                data-file-name="IconChevronDownSmall"
-                data-testid="IconChevronDownSmall"
-                fillcontrast="white"
-                focusable="false"
-                viewBox="0 0 14 14"
-              />
-            </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-12jh8eh-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
             />
-          </button>
+          </div>
         </div>
       </th>
       <th
-        class="css-cafzim"
+        class="css-5bfdy4"
       >
         <div
           class="css-rm9mvq"
@@ -138,7 +85,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-1n46b0o"
+        class="css-vnxybn"
       >
         <div
           class="css-wg04tn"
@@ -152,10 +99,10 @@ exports[`<Table /> Default story renders snapshot 1`] = `
   </thead>
   <tbody>
     <tr
-      class="css-1te7wvi"
+      class="css-1lvje81"
     >
       <td
-        class="cell-component css-7n3ay9"
+        class="cell-component css-4zu111"
       >
         <div
           class="css-9lvjku"
@@ -170,11 +117,13 @@ exports[`<Table /> Default story renders snapshot 1`] = `
               data-testid="IconFlaskLarge"
               fillcontrast="white"
               focusable="false"
-              viewBox="0 0 22 22"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
             />
           </div>
           <div
-            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-gr6as5-MuiChip-root"
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
           >
             <span
               class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -185,7 +134,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </td>
       <td
-        class=" css-ms0or8"
+        class=" css-p6nomj"
         data-mui-internal-clone-element="true"
       >
         <div
@@ -194,13 +143,17 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary Text
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary Text
+              </div>
+            </div>
             <span
-              class="css-q27ims"
+              class="css-102yezv"
             >
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </span>
@@ -208,7 +161,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </td>
       <td
-        class="css-ms0or8"
+        class="css-p6nomj"
       >
         <div
           class="css-ov1ktg"
@@ -216,40 +169,17 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
-            >
-              Primary Text
-            </span>
-            <span
-              class="css-13h2j63"
+            <div
+              class="css-7m17a9"
             >
-              Secondary Text
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary Text
+              </div>
+            </div>
             <span
               class="css-1xqvcqn"
-            >
-              Tertiary Text
-            </span>
-          </div>
-        </div>
-      </td>
-      <td
-        class="css-1chlzwf"
-      >
-        <div
-          class="css-ov1ktg"
-        >
-          <div
-            class="css-1ago99h"
-          >
-            <span
-              class="css-l4a0ln"
-            >
-              Primary Text
-            </span>
-            <span
-              class="css-13h2j63"
             >
               Secondary Text
             </span>
@@ -262,28 +192,28 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </td>
       <td
-        class="cell-component css-1tllcjx"
+        class="cell-component css-4umyx6"
       >
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-gr6as5-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
           >
-            primary
+            info
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-gr6as5-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
           >
-            warning
+            notice
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-gr6as5-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -292,26 +222,26 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-gr6as5-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
           >
-            error
+            negative
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-gr6as5-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
           >
-            success
+            positive
           </span>
         </div>
       </td>
       <td
-        class="css-ulyme7"
+        class="css-ebdvcw"
       >
         <div
           class="css-ov1ktg"
@@ -319,20 +249,24 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-bikrfl"
             >
-              356
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                356
+              </div>
+            </div>
           </div>
         </div>
       </td>
     </tr>
     <tr
-      class="css-1te7wvi"
+      class="css-1lvje81"
     >
       <td
-        class="cell-component css-7n3ay9"
+        class="cell-component css-4zu111"
       >
         <div
           class="css-9lvjku"
@@ -347,11 +281,13 @@ exports[`<Table /> Default story renders snapshot 1`] = `
               data-testid="IconDownloadLarge"
               fillcontrast="white"
               focusable="false"
-              viewBox="0 0 22 22"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
             />
           </div>
           <div
-            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-gr6as5-MuiChip-root"
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
           >
             <span
               class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -362,7 +298,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </td>
       <td
-        class="css-ms0or8"
+        class="css-p6nomj"
       >
         <div
           class="css-ov1ktg"
@@ -370,13 +306,17 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary Text
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary Text
+              </div>
+            </div>
             <span
-              class="css-13h2j63"
+              class="css-1xqvcqn"
             >
               Secondary Text
             </span>
@@ -389,29 +329,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </td>
       <td
-        class="css-ms0or8"
-      >
-        <div
-          class="css-ov1ktg"
-        >
-          <div
-            class="css-1ago99h"
-          >
-            <span
-              class="css-l4a0ln"
-            >
-              Primary Text
-            </span>
-            <span
-              class="css-13h2j63"
-            >
-              Secondary Text
-            </span>
-          </div>
-        </div>
-      </td>
-      <td
-        class="css-1chlzwf"
+        class="css-p6nomj"
       >
         <div
           class="css-ov1ktg"
@@ -419,13 +337,17 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary Text
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary Text
+              </div>
+            </div>
             <span
-              class="css-13h2j63"
+              class="css-1xqvcqn"
             >
               Secondary Text
             </span>
@@ -433,7 +355,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </td>
       <td
-        class="cell-component css-1tllcjx"
+        class="cell-component css-4umyx6"
       >
         <div
           aria-labelledby="demo-radio-buttons-group-label"
@@ -441,23 +363,26 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           role="radiogroup"
         >
           <label
-            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
+            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-c4vnp1-MuiFormControlLabel-root"
           >
             <span
-              class="MuiButtonBase-root MuiRadio-root MuiRadio-colorDefault PrivateSwitchBase-root MuiRadio-root MuiRadio-colorDefault MuiRadio-root MuiRadio-colorDefault css-1vqgfov-MuiButtonBase-root-MuiRadio-root"
-              stage="unchecked"
+              caption="Caption I"
+              class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary css-4m8g7g-MuiButtonBase-root-MuiRadio-root"
+              intent="default"
+              label="Option I"
             >
               <input
+                checked=""
                 class="PrivateSwitchBase-input css-1m9pwf3"
                 name="radio-buttons-group"
                 type="radio"
-                value=""
+                value="1"
               />
               <svg
                 aria-hidden="true"
                 class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                data-file-name="IconRadioUnchecked"
-                data-testid="IconRadioUnchecked"
+                data-file-name="IconRadioChecked"
+                data-testid="IconRadioChecked"
                 fillcontrast="white"
                 focusable="false"
                 viewBox="0 0 16 16"
@@ -469,28 +394,42 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             <span
               class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
             >
-              Option 1
+              <span
+                class="css-1ddu512"
+              >
+                <span
+                  class="css-1dr5e88"
+                >
+                  Option I
+                </span>
+                <span
+                  class="css-1mg4zid"
+                >
+                  Caption I
+                </span>
+              </span>
             </span>
           </label>
           <label
-            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
+            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-c4vnp1-MuiFormControlLabel-root"
           >
             <span
-              class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary css-b0a55y-MuiButtonBase-root-MuiRadio-root"
-              stage="checked"
+              caption="Caption II"
+              class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary css-4m8g7g-MuiButtonBase-root-MuiRadio-root"
+              intent="default"
+              label="Option II"
             >
               <input
-                checked=""
                 class="PrivateSwitchBase-input css-1m9pwf3"
                 name="radio-buttons-group"
                 type="radio"
-                value=""
+                value="2"
               />
               <svg
                 aria-hidden="true"
                 class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                data-file-name="IconRadioChecked"
-                data-testid="IconRadioChecked"
+                data-file-name="IconRadioUnchecked"
+                data-testid="IconRadioUnchecked"
                 fillcontrast="white"
                 focusable="false"
                 viewBox="0 0 16 16"
@@ -502,13 +441,26 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             <span
               class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
             >
-              Option 2
+              <span
+                class="css-1ddu512"
+              >
+                <span
+                  class="css-1dr5e88"
+                >
+                  Option II
+                </span>
+                <span
+                  class="css-1mg4zid"
+                >
+                  Caption II
+                </span>
+              </span>
             </span>
           </label>
         </div>
       </td>
       <td
-        class="css-ulyme7"
+        class="css-ebdvcw"
       >
         <div
           class="css-ov1ktg"
@@ -516,13 +468,17 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-bikrfl"
             >
-              1,234
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                1,234
+              </div>
+            </div>
             <span
-              class="css-13h2j63"
+              class="css-1xqvcqn"
             >
               2,344,000
             </span>
@@ -536,12 +492,12 @@ exports[`<Table /> Default story renders snapshot 1`] = `
       </td>
     </tr>
     <tr
-      class=" css-8ey8r3"
+      class=" css-szib4e"
       data-mui-internal-clone-element="true"
       disabled=""
     >
       <td
-        class="cell-component css-7n3ay9"
+        class="cell-component css-4zu111"
       >
         <div
           class="css-9lvjku"
@@ -556,11 +512,13 @@ exports[`<Table /> Default story renders snapshot 1`] = `
               data-testid="IconBacteriaLarge"
               fillcontrast="white"
               focusable="false"
-              viewBox="0 0 22 22"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
             />
           </div>
           <div
-            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-gr6as5-MuiChip-root"
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
           >
             <span
               class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -571,7 +529,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </td>
       <td
-        class="css-1skzvyh"
+        class="css-1h7dd7c"
       >
         <div
           class="css-ov1ktg"
@@ -579,13 +537,17 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary Text
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary Text
+              </div>
+            </div>
             <span
-              class="css-13h2j63"
+              class="css-1xqvcqn"
             >
               Secondary Text
             </span>
@@ -598,7 +560,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </td>
       <td
-        class="css-1skzvyh"
+        class="css-1h7dd7c"
       >
         <div
           class="css-ov1ktg"
@@ -606,33 +568,20 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
-            >
-              Primary Text
-            </span>
-          </div>
-        </div>
-      </td>
-      <td
-        class="css-1fypcbh"
-      >
-        <div
-          class="css-ov1ktg"
-        >
-          <div
-            class="css-1ago99h"
-          >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary Text
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary Text
+              </div>
+            </div>
           </div>
         </div>
       </td>
       <td
-        class="cell-component css-1pxuqjo"
+        class="cell-component css-1ssa1s"
       >
         <div
           class="css-1ft6wgl"
@@ -644,12 +593,14 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             data-testid="IconVirusLarge"
             fillcontrast="white"
             focusable="false"
-            viewBox="0 0 22 22"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
           />
         </div>
       </td>
       <td
-        class="css-nwjh0y"
+        class="css-ab4j8e"
       >
         <div
           class="css-ov1ktg"
@@ -657,11 +608,15 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-bikrfl"
             >
-              0.4
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                0.4
+              </div>
+            </div>
           </div>
         </div>
       </td>
diff --git a/packages/components/src/core/Table/index.test.tsx b/packages/components/src/core/Table/__tests__/index.test.tsx
similarity index 91%
rename from packages/components/src/core/Table/index.test.tsx
rename to packages/components/src/core/Table/__tests__/index.test.tsx
index 902409e0b..508e81fa5 100644
--- a/packages/components/src/core/Table/index.test.tsx
+++ b/packages/components/src/core/Table/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/Table/components/common.ts b/packages/components/src/core/Table/components/common.ts
deleted file mode 100644
index 33869ab81..000000000
--- a/packages/components/src/core/Table/components/common.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createContext } from "react";
-
-type RowHeight = number | string;
-
-export const TableContext = createContext({ rowHeight: "auto" as RowHeight });
diff --git a/packages/components/src/core/TableHeader/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TableHeader/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 7d13239bd..000000000
--- a/packages/components/src/core/TableHeader/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,119 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TableHeader /> Default story renders snapshot 1`] = `
-<table>
-  <thead
-    class="css-1426k2b"
-  >
-    <tr
-      class="css-1nusez2"
-    >
-      <th
-        class="css-bc0x2f"
-      >
-        <div
-          class="css-rm9mvq"
-        >
-          <span>
-            Column 1
-          </span>
-          <button
-            aria-label="Change sort direction from descending to ascending"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-qh2mmt-MuiButtonBase-root-MuiIconButton-root"
-            icon="chevronDown"
-            tabindex="0"
-            type="button"
-          >
-            <div
-              class="css-1ft6wgl"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-                data-file-name="IconChevronDownSmall"
-                data-testid="IconChevronDownSmall"
-                fillcontrast="white"
-                focusable="false"
-                viewBox="0 0 14 14"
-              />
-            </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </th>
-      <th
-        class="css-cafzim"
-      >
-        <div
-          class="css-rm9mvq"
-        >
-          <span>
-            Column 2
-          </span>
-          <button
-            aria-label="Change sort direction from descending to ascending"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1tty7jy-MuiButtonBase-root-MuiIconButton-root"
-            icon="chevronDown"
-            tabindex="0"
-            type="button"
-          >
-            <div
-              class="css-1ft6wgl"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-                data-file-name="IconChevronDownSmall"
-                data-testid="IconChevronDownSmall"
-                fillcontrast="white"
-                focusable="false"
-                viewBox="0 0 14 14"
-              />
-            </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </th>
-      <th
-        class="css-cafzim"
-      >
-        <div
-          class="css-rm9mvq"
-        >
-          <span>
-            Column 3
-          </span>
-          <button
-            aria-label="Change sort direction from descending to ascending"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1tty7jy-MuiButtonBase-root-MuiIconButton-root"
-            icon="chevronDown"
-            tabindex="0"
-            type="button"
-          >
-            <div
-              class="css-1ft6wgl"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-                data-file-name="IconChevronDownSmall"
-                data-testid="IconChevronDownSmall"
-                fillcontrast="white"
-                focusable="false"
-                viewBox="0 0 14 14"
-              />
-            </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </th>
-    </tr>
-  </thead>
-</table>
-`;
diff --git a/packages/components/src/core/TableHeader/__storybook__/index.stories.tsx b/packages/components/src/core/TableHeader/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..320794377
--- /dev/null
+++ b/packages/components/src/core/TableHeader/__storybook__/index.stories.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable no-use-before-define */
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { TableHeader } from "./stories/default";
+import { TestDemo } from "./stories/test";
+
+export default {
+  component: TableHeader,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Table/TableHeader",
+} as Meta;
+
+export const Default = {};
+
+// Test
+
+export const Test = {
+  parameters: {
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} data-testid="table-header" />,
+};
diff --git a/packages/components/src/core/TableHeader/__storybook__/stories/default.tsx b/packages/components/src/core/TableHeader/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..b622a2bb8
--- /dev/null
+++ b/packages/components/src/core/TableHeader/__storybook__/stories/default.tsx
@@ -0,0 +1,15 @@
+import { Args } from "@storybook/react";
+import CellHeader from "src/core/CellHeader";
+import RawTableHeader from "src/core/TableHeader";
+
+export const TableHeader = (props: Args): JSX.Element => {
+  return (
+    <table>
+      <RawTableHeader {...props}>
+        <CellHeader active>Column 1</CellHeader>
+        <CellHeader>Column 2</CellHeader>
+        <CellHeader>Column 3</CellHeader>
+      </RawTableHeader>
+    </table>
+  );
+};
diff --git a/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx b/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..fbf69a6df
--- /dev/null
+++ b/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx
@@ -0,0 +1,12 @@
+import CellHeader from "src/core/CellHeader";
+import RawTableHeader from "src/core/TableHeader";
+
+export const TestDemo = (): JSX.Element => (
+  <table>
+    <RawTableHeader data-testid="TableHeader">
+      <CellHeader active>Column 1</CellHeader>
+      <CellHeader>Column 2</CellHeader>
+      <CellHeader>Column 3</CellHeader>
+    </RawTableHeader>
+  </table>
+);
diff --git a/packages/components/src/core/TableHeader/TableHeader.namespace-test.tsx b/packages/components/src/core/TableHeader/__tests__/TableHeader.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/TableHeader/TableHeader.namespace-test.tsx
rename to packages/components/src/core/TableHeader/__tests__/TableHeader.namespace-test.tsx
diff --git a/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..bbc092af6
--- /dev/null
+++ b/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TableHeader /> Default story renders snapshot 1`] = `
+<table>
+  <thead
+    class="css-1426k2b"
+  >
+    <tr
+      class="css-2l3m6x"
+    >
+      <th
+        class="css-5bfdy4"
+      >
+        <div
+          class="css-rm9mvq"
+        >
+          <span>
+            Column 1
+          </span>
+          <div
+            class="css-1ft6wgl"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tlyfhc-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+            />
+          </div>
+        </div>
+      </th>
+      <th
+        class="css-5bfdy4"
+      >
+        <div
+          class="css-rm9mvq"
+        >
+          <span>
+            Column 2
+          </span>
+          <div
+            class="css-1ft6wgl"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-12jh8eh-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+            />
+          </div>
+        </div>
+      </th>
+      <th
+        class="css-5bfdy4"
+      >
+        <div
+          class="css-rm9mvq"
+        >
+          <span>
+            Column 3
+          </span>
+          <div
+            class="css-1ft6wgl"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-12jh8eh-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+            />
+          </div>
+        </div>
+      </th>
+    </tr>
+  </thead>
+</table>
+`;
diff --git a/packages/components/src/core/TableHeader/index.test.tsx b/packages/components/src/core/TableHeader/__tests__/index.test.tsx
similarity index 90%
rename from packages/components/src/core/TableHeader/index.test.tsx
rename to packages/components/src/core/TableHeader/__tests__/index.test.tsx
index e47385fc8..e2f4e18b8 100644
--- a/packages/components/src/core/TableHeader/index.test.tsx
+++ b/packages/components/src/core/TableHeader/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/TableHeader/index.stories.tsx b/packages/components/src/core/TableHeader/index.stories.tsx
deleted file mode 100644
index df625bfc9..000000000
--- a/packages/components/src/core/TableHeader/index.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/* eslint-disable no-use-before-define */
-import { Args, Meta } from "@storybook/react";
-import CellHeader from "../CellHeader";
-import RawTableHeader from "./index";
-
-const TableHeader = (props: Args): JSX.Element => {
-  return (
-    <table>
-      <RawTableHeader {...props}>
-        <CellHeader active>Column 1</CellHeader>
-        <CellHeader>Column 2</CellHeader>
-        <CellHeader>Column 3</CellHeader>
-      </RawTableHeader>
-    </table>
-  );
-};
-
-export default {
-  component: TableHeader,
-  title: "Table/TableHeader",
-} as Meta;
-
-export const Default = {};
-
-// Test
-
-const TestDemo = (): JSX.Element => (
-  <table>
-    <RawTableHeader data-testid="TableHeader">
-      <CellHeader active>Column 1</CellHeader>
-      <CellHeader>Column 2</CellHeader>
-      <CellHeader>Column 3</CellHeader>
-    </RawTableHeader>
-  </table>
-);
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} data-testid="table-header" />,
-};
diff --git a/packages/components/src/core/TableHeader/index.tsx b/packages/components/src/core/TableHeader/index.tsx
index 2b1dc14bf..744410768 100644
--- a/packages/components/src/core/TableHeader/index.tsx
+++ b/packages/components/src/core/TableHeader/index.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import TableRow from "../TableRow";
+import TableRow from "src/core/TableRow";
 import { StyledTableHeader } from "./style";
 
 export interface TableHeaderProps {
diff --git a/packages/components/src/core/TableHeader/style.ts b/packages/components/src/core/TableHeader/style.ts
index 5d7bbf9c1..d0890ed8f 100644
--- a/packages/components/src/core/TableHeader/style.ts
+++ b/packages/components/src/core/TableHeader/style.ts
@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { getColors } from "../styles";
+import { getColors } from "src/core/styles";
 
 export const StyledTableHeader = styled("thead")`
   ${(props) => {
diff --git a/packages/components/src/core/TableRow/__storybook__/constants.ts b/packages/components/src/core/TableRow/__storybook__/constants.ts
new file mode 100644
index 000000000..095918f9c
--- /dev/null
+++ b/packages/components/src/core/TableRow/__storybook__/constants.ts
@@ -0,0 +1,11 @@
+export const TABLE_ROW_EXCLUDED_CONTROLS = [
+  "disabled",
+  "hover",
+  "rowHeight",
+  "selected",
+  "shouldShowTooltipOnHover",
+  "tooltipProps",
+  "tooltipSubtitle",
+  "tooltipText",
+  "useDivider",
+];
diff --git a/packages/components/src/core/TableRow/index.stories.tsx b/packages/components/src/core/TableRow/__storybook__/index.stories.tsx
similarity index 52%
rename from packages/components/src/core/TableRow/index.stories.tsx
rename to packages/components/src/core/TableRow/__storybook__/index.stories.tsx
index 8ce454587..618da9bee 100644
--- a/packages/components/src/core/TableRow/index.stories.tsx
+++ b/packages/components/src/core/TableRow/__storybook__/index.stories.tsx
@@ -1,23 +1,9 @@
 /* eslint-disable no-use-before-define */
 import { Args, Meta } from "@storybook/react";
-import CellBasic from "../CellBasic";
-import RawTableRow from "./index";
-
-const TableRow = (props: Args): JSX.Element => {
-  return (
-    <table style={{ borderCollapse: "collapse" }}>
-      <tbody>
-        <RawTableRow {...props}>
-          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
-          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
-          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
-          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
-          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
-        </RawTableRow>
-      </tbody>
-    </table>
-  );
-};
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { TableRow } from "./stories/default";
+import { TABLE_ROW_EXCLUDED_CONTROLS } from "./constants";
+import { TestDemo } from "./stories/test";
 
 export default {
   argTypes: {
@@ -50,9 +36,14 @@ export default {
     },
   },
   component: TableRow,
-  title: "Table/TableRow",
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Table/TableRow",
 } as Meta;
 
+// Default
+
 export const Default = {
   args: {
     disabled: false,
@@ -67,23 +58,11 @@ export const Default = {
 
 // Test
 
-const TestDemo = (): JSX.Element => (
-  <table>
-    <tbody>
-      <RawTableRow
-        data-testid="TableRow"
-        hover
-        shouldShowTooltipOnHover
-        tooltipText="testTooltipTitle"
-      >
-        <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
-      </RawTableRow>
-    </tbody>
-  </table>
-);
-
 export const Test = {
   parameters: {
+    controls: {
+      exclude: TABLE_ROW_EXCLUDED_CONTROLS,
+    },
     snapshot: {
       skip: true,
     },
diff --git a/packages/components/src/core/TableRow/__storybook__/stories/default.tsx b/packages/components/src/core/TableRow/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..f5fd68cfe
--- /dev/null
+++ b/packages/components/src/core/TableRow/__storybook__/stories/default.tsx
@@ -0,0 +1,19 @@
+import { Args } from "@storybook/react";
+import CellBasic from "src/core/CellBasic";
+import RawTableRow from "src/core/TableRow";
+
+export const TableRow = (props: Args): JSX.Element => {
+  return (
+    <table style={{ borderCollapse: "collapse" }}>
+      <tbody>
+        <RawTableRow {...props}>
+          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
+          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
+          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
+          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
+          <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
+        </RawTableRow>
+      </tbody>
+    </table>
+  );
+};
diff --git a/packages/components/src/core/TableRow/__storybook__/stories/test.tsx b/packages/components/src/core/TableRow/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..ab3db3cec
--- /dev/null
+++ b/packages/components/src/core/TableRow/__storybook__/stories/test.tsx
@@ -0,0 +1,17 @@
+import CellBasic from "src/core/CellBasic";
+import RawTableRow from "src/core/TableRow";
+
+export const TestDemo = (): JSX.Element => (
+  <table>
+    <tbody>
+      <RawTableRow
+        data-testid="TableRow"
+        hover
+        shouldShowTooltipOnHover
+        tooltipText="testTooltipTitle"
+      >
+        <CellBasic primaryText="Primary" shouldShowTooltipOnHover={false} />
+      </RawTableRow>
+    </tbody>
+  </table>
+);
diff --git a/packages/components/src/core/TableRow/TableRow.namespace-test.tsx b/packages/components/src/core/TableRow/__tests__/TableRow.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/TableRow/TableRow.namespace-test.tsx
rename to packages/components/src/core/TableRow/__tests__/TableRow.namespace-test.tsx
diff --git a/packages/components/src/core/TableRow/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TableRow/__tests__/__snapshots__/index.test.tsx.snap
similarity index 52%
rename from packages/components/src/core/TableRow/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/TableRow/__tests__/__snapshots__/index.test.tsx.snap
index 0250fc06b..6a419dbd3 100644
--- a/packages/components/src/core/TableRow/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/TableRow/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,11 +6,11 @@ exports[`<TableRow /> Default story renders snapshot 1`] = `
 >
   <tbody>
     <tr
-      class=" css-1te7wvi"
+      class=" css-1lvje81"
       data-mui-internal-clone-element="true"
     >
       <td
-        class="css-ms0or8"
+        class="css-p6nomj"
       >
         <div
           class="css-ov1ktg"
@@ -18,16 +18,20 @@ exports[`<TableRow /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary
+              </div>
+            </div>
           </div>
         </div>
       </td>
       <td
-        class="css-ms0or8"
+        class="css-p6nomj"
       >
         <div
           class="css-ov1ktg"
@@ -35,16 +39,20 @@ exports[`<TableRow /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary
+              </div>
+            </div>
           </div>
         </div>
       </td>
       <td
-        class="css-ms0or8"
+        class="css-p6nomj"
       >
         <div
           class="css-ov1ktg"
@@ -52,16 +60,20 @@ exports[`<TableRow /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary
+              </div>
+            </div>
           </div>
         </div>
       </td>
       <td
-        class="css-ms0or8"
+        class="css-p6nomj"
       >
         <div
           class="css-ov1ktg"
@@ -69,16 +81,20 @@ exports[`<TableRow /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary
+              </div>
+            </div>
           </div>
         </div>
       </td>
       <td
-        class="css-ms0or8"
+        class="css-p6nomj"
       >
         <div
           class="css-ov1ktg"
@@ -86,11 +102,15 @@ exports[`<TableRow /> Default story renders snapshot 1`] = `
           <div
             class="css-1ago99h"
           >
-            <span
-              class="css-l4a0ln"
+            <div
+              class="css-7m17a9"
             >
-              Primary
-            </span>
+              <div
+                class="css-1asg04x"
+              >
+                Primary
+              </div>
+            </div>
           </div>
         </div>
       </td>
diff --git a/packages/components/src/core/TableRow/index.test.tsx b/packages/components/src/core/TableRow/__tests__/index.test.tsx
similarity index 92%
rename from packages/components/src/core/TableRow/index.test.tsx
rename to packages/components/src/core/TableRow/__tests__/index.test.tsx
index dd9337c7a..a7e52b892 100644
--- a/packages/components/src/core/TableRow/index.test.tsx
+++ b/packages/components/src/core/TableRow/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/TableRow/index.tsx b/packages/components/src/core/TableRow/index.tsx
index f494aa015..cf3b79569 100644
--- a/packages/components/src/core/TableRow/index.tsx
+++ b/packages/components/src/core/TableRow/index.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import Tooltip, { TooltipProps } from "../Tooltip";
+import Tooltip, { TooltipProps } from "src/core/Tooltip";
 import { RowExtraProps, StyledTableRow } from "./style";
 
 interface RowRawProps {
diff --git a/packages/components/src/core/TableRow/style.ts b/packages/components/src/core/TableRow/style.ts
index bf83d2fae..22e7349dd 100644
--- a/packages/components/src/core/TableRow/style.ts
+++ b/packages/components/src/core/TableRow/style.ts
@@ -1,6 +1,12 @@
 import { styled } from "@mui/material/styles";
 import React from "react";
-import { CommonThemeProps, fontHeaderS, getColors } from "../styles";
+import {
+  CommonThemeProps,
+  fontHeaderS,
+  getBorders,
+  getSemanticComponentColors,
+  getSemanticTextColors,
+} from "src/core/styles";
 
 export interface RowExtraProps
   extends CommonThemeProps,
@@ -23,15 +29,16 @@ const doNotForwardProps = [
 ];
 
 const disabledStyled = (props: RowExtraProps) => {
-  const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
 
   return `
-    background-color: ${colors?.gray[100]};
-    color: ${colors?.gray[300]};
+    background-color: ${semanticComponentColors?.base?.surfaceSecondary};
+    color: ${semanticTextColors?.base?.disabled};
     user-select: none;
 
     & span, & div {
-      color: ${colors?.gray[300]};
+      color: ${semanticTextColors?.base?.disabled};
     }
 
     .cell-component {
@@ -53,11 +60,11 @@ const disabledStyled = (props: RowExtraProps) => {
 };
 
 const hoverStyled = (props: RowExtraProps) => {
-  const colors = getColors(props);
+  const semanticComponentColors = getSemanticComponentColors(props);
 
   return `
     &:hover {
-      background-color: ${colors?.gray[200]};
+      background-color: ${semanticComponentColors?.base?.fillHover};
     }
   `;
 };
@@ -76,15 +83,16 @@ export const StyledTableRow = styled("tr", {
       hover = true,
     } = props;
 
-    const colors = getColors(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
+    const borders = getBorders(props);
 
     return `
       align-items: center;
-      border-bottom: ${useDivider ? `solid 1px ${colors?.gray[300]}` : "none"};
+      border-bottom: ${useDivider ? borders?.base?.table : borders?.none};
 
       ${rowHeight ? `max-height: ${rowHeight}px;` : ""}
 
-      ${selected ? `background-color: ${colors?.primary[200]};` : ""}
+      ${selected ? `background-color: ${semanticComponentColors?.accent?.surface};` : ""}
 
       ${hover && hoverStyled(props)};
 
diff --git a/packages/components/src/core/Tabs/__storybook__/constants.ts b/packages/components/src/core/Tabs/__storybook__/constants.ts
new file mode 100644
index 000000000..2db0a2ed2
--- /dev/null
+++ b/packages/components/src/core/Tabs/__storybook__/constants.ts
@@ -0,0 +1,8 @@
+export const TABS_EXCLUDED_CONTROLS = ["sdsSize", "items", "underlined"];
+
+export const TABS_LIVE_PREVIEW_WRAPPER_STYLES = {
+  alignItems: "center",
+  display: "flex",
+  gap: "40px",
+  width: "100%",
+};
diff --git a/packages/components/src/core/Tabs/__storybook__/index.stories.tsx b/packages/components/src/core/Tabs/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..86f9ff28e
--- /dev/null
+++ b/packages/components/src/core/Tabs/__storybook__/index.stories.tsx
@@ -0,0 +1,89 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Tabs } from "./stories/default";
+import { TABS_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    items: {
+      control: { required: true, type: "object" },
+      defaultValue: { summary: "-" },
+      description:
+        "Here is an array of objects, each comprising a label and count for the tabs. Please note that this is specific to Storybook. In an actual implementation, it is recommended to pass the tabs as children of the Tabs component.",
+    },
+    sdsSize: {
+      control: { type: "select" },
+      defaultValue: { summary: "large" },
+      description: "The size of the tabs",
+      options: ["large", "small"],
+    },
+    underlined: {
+      control: {
+        type: "boolean",
+      },
+      defaultValue: { summary: "true" },
+      description: "Whether the tabs should be underlined",
+    },
+  },
+  component: Tabs,
+  parameters: {
+    badges: [BADGE.STABLE],
+    // tab indicator bug known by MUI where width for indicator updates once font is loaded in.
+    // delay allows for font to load and prevents chromatic from constantly creating new baselines
+    // https://github.com/mui/material-ui/blob/v4.x/packages/material-ui/src/Tabs/Tabs.js#L194
+    chromatic: { delay: 10000 },
+    controls: { expanded: true },
+  },
+  title: "Components/Tabs",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    items: [
+      { label: "Upload from Your Computer" },
+      { count: 0, label: "Upload from Base Space" },
+    ],
+    sdsSize: "large",
+    underlined: true,
+  },
+  parameters: {
+    // tab indicator bug known by MUI where width for indicator updates once font is loaded in.
+    // delay allows for font to load and prevents chromatic from constantly creating new baselines
+    // https://github.cwom/mui/material-ui/blob/v4.x/packages/material-ui/src/Tabs/Tabs.js#L194
+    chromatic: { delay: 5000 },
+  },
+};
+
+// LivePreview
+
+export const LivePreview = {
+  parameters: {
+    chromatic: { delay: 5000 },
+    controls: {
+      exclude: TABS_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    chromatic: { delay: 5000 },
+    controls: {
+      exclude: TABS_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/Tabs/__storybook__/stories/default.tsx b/packages/components/src/core/Tabs/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..914bce8ab
--- /dev/null
+++ b/packages/components/src/core/Tabs/__storybook__/stories/default.tsx
@@ -0,0 +1,21 @@
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import RawTabs, { Tab } from "src/core/Tabs";
+
+export const Tabs = (props: Args): JSX.Element => {
+  const { items, ...args } = props;
+
+  const [value, setValue] = useState(0);
+
+  const handleTabsChange = (_: React.SyntheticEvent, tabsValue: unknown) => {
+    setValue(tabsValue as number);
+  };
+
+  return (
+    <RawTabs {...args} value={value} onChange={handleTabsChange}>
+      {items.map(({ count, label }: { count?: number; label: string }) => (
+        <Tab label={label} count={count} key={label} />
+      ))}
+    </RawTabs>
+  );
+};
diff --git a/packages/components/src/core/Tabs/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Tabs/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..501c537ef
--- /dev/null
+++ b/packages/components/src/core/Tabs/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,58 @@
+import { Args } from "@storybook/react";
+import { TABS_LIVE_PREVIEW_WRAPPER_STYLES } from "../constants";
+import { Tabs } from "./default";
+import { noop } from "src/common/utils";
+
+export function LivePreviewDemo(props: Args): JSX.Element {
+  const finalProps = {
+    ...props,
+    style: { width: "150px" },
+  };
+
+  return (
+    <div style={TABS_LIVE_PREVIEW_WRAPPER_STYLES as React.CSSProperties}>
+      <div>
+        <Tabs
+          onChange={noop}
+          sdsSize="large"
+          items={[{ label: "One" }, { label: "Two" }]}
+          underlined
+          {...finalProps}
+        />
+      </div>
+      <div>
+        <Tabs
+          onChange={noop}
+          sdsSize="large"
+          items={[
+            { count: 0, label: "One" },
+            { count: 0, label: "Two" },
+          ]}
+          underlined
+          {...finalProps}
+        />
+      </div>
+      <div>
+        <Tabs
+          sdsSize="small"
+          onChange={noop}
+          items={[{ label: "One" }, { label: "Two" }]}
+          underlined
+          {...finalProps}
+        />
+      </div>
+      <div>
+        <Tabs
+          sdsSize="small"
+          onChange={noop}
+          items={[
+            { count: 0, label: "One" },
+            { count: 0, label: "Two" },
+          ]}
+          underlined
+          {...finalProps}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/src/core/Tabs/__storybook__/stories/test.tsx b/packages/components/src/core/Tabs/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..c21702590
--- /dev/null
+++ b/packages/components/src/core/Tabs/__storybook__/stories/test.tsx
@@ -0,0 +1,80 @@
+import { Args } from "@storybook/react";
+import { TABS_LIVE_PREVIEW_WRAPPER_STYLES } from "../constants";
+import { Tabs } from "./default";
+import { noop } from "src/common/utils";
+import Tag from "src/core/Tag";
+import { StyledTabCountWrapper } from "../style";
+
+export function TestDemo(props: Args): JSX.Element {
+  const finalProps = {
+    ...props,
+    "data-testid": "tabs",
+    style: { width: "400px" },
+  };
+
+  return (
+    <div>
+      <div style={TABS_LIVE_PREVIEW_WRAPPER_STYLES as React.CSSProperties}>
+        <div>
+          <h4>Default</h4>
+          <Tabs
+            items={[{ count: 123, label: "Tab One" }, { label: "Tab Two" }]}
+            onChange={noop}
+            {...finalProps}
+          />
+        </div>
+        <div>
+          <h4>Small</h4>
+          <Tabs
+            items={[{ count: 123, label: "Tab One" }, { label: "Tab Two" }]}
+            onChange={noop}
+            sdsSize="small"
+            {...finalProps}
+          />
+        </div>
+        <div>
+          <h4>Underlined</h4>
+          <Tabs
+            onChange={noop}
+            items={[{ count: 123, label: "Tab One" }, { label: "Tab Two" }]}
+            underlined
+            {...finalProps}
+          />
+        </div>
+      </div>
+      <div style={TABS_LIVE_PREVIEW_WRAPPER_STYLES}>
+        <div>
+          <h4>Label with count</h4>
+          <div>
+            <Tabs
+              onChange={noop}
+              sdsSize="large"
+              items={[
+                { count: <BetaTagWithCount />, label: "One" },
+                { label: "Two" },
+              ]}
+              underlined
+              {...finalProps}
+              style={{ width: "200px" }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BetaTagWithCount() {
+  return (
+    <>
+      <StyledTabCountWrapper>123</StyledTabCountWrapper>
+      <Tag
+        label="BETA"
+        hover={false}
+        color="beta"
+        sdsStyle="rounded"
+        sdsType="secondary"
+      />
+    </>
+  );
+}
diff --git a/packages/components/src/core/Tabs/__storybook__/style.ts b/packages/components/src/core/Tabs/__storybook__/style.ts
new file mode 100644
index 000000000..af22f63cc
--- /dev/null
+++ b/packages/components/src/core/Tabs/__storybook__/style.ts
@@ -0,0 +1,5 @@
+import { styled } from "@mui/material";
+
+export const StyledTabCountWrapper = styled("span")`
+  margin-right: 5px;
+`;
diff --git a/packages/components/src/core/Tabs/Tabs.namespace-test.tsx b/packages/components/src/core/Tabs/__tests__/Tabs.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Tabs/Tabs.namespace-test.tsx
rename to packages/components/src/core/Tabs/__tests__/Tabs.namespace-test.tsx
diff --git a/packages/components/src/core/Tabs/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Tabs/__tests__/__snapshots__/index.test.tsx.snap
similarity index 74%
rename from packages/components/src/core/Tabs/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Tabs/__tests__/__snapshots__/index.test.tsx.snap
index 6c320e742..4c1b776c1 100644
--- a/packages/components/src/core/Tabs/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
     >
       <button
         aria-selected="true"
-        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-1gpp98k-MuiButtonBase-root-MuiTab-root"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-1885o31-MuiButtonBase-root-MuiTab-root"
         role="tab"
         tabindex="0"
         type="button"
@@ -26,12 +26,25 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1gpp98k-MuiButtonBase-root-MuiTab-root"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1885o31-MuiButtonBase-root-MuiTab-root"
         role="tab"
         tabindex="-1"
         type="button"
       >
-        Upload from Basespace
+        <span
+          class="css-1p2o9he"
+        >
+          <span
+            class="css-zht1rf"
+          >
+            Upload from Base Space
+          </span>
+          <span
+            class="css-1eudu0v"
+          >
+            0
+          </span>
+        </span>
         <span
           class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
         />
diff --git a/packages/components/src/core/Tabs/index.test.tsx b/packages/components/src/core/Tabs/__tests__/index.test.tsx
similarity index 93%
rename from packages/components/src/core/Tabs/index.test.tsx
rename to packages/components/src/core/Tabs/__tests__/index.test.tsx
index a7938c389..da42cc58a 100644
--- a/packages/components/src/core/Tabs/index.test.tsx
+++ b/packages/components/src/core/Tabs/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/Tabs/components/LabelWithCount/index.tsx b/packages/components/src/core/Tabs/components/LabelWithCount/index.tsx
index 0c6919ebe..13c8e286c 100644
--- a/packages/components/src/core/Tabs/components/LabelWithCount/index.tsx
+++ b/packages/components/src/core/Tabs/components/LabelWithCount/index.tsx
@@ -7,17 +7,16 @@ interface Props {
   count: ReactNode;
 }
 
-export default forwardRef<HTMLSpanElement, Props>(function LabelWithCount(
-  props,
-  ref
-): JSX.Element {
-  const { sdsSize = "large" } = useContext(TabsContext);
-  const { label, count } = props;
+export default forwardRef<HTMLSpanElement, Props>(
+  function LabelWithCount(props, ref): JSX.Element {
+    const { sdsSize = "large" } = useContext(TabsContext);
+    const { label, count } = props;
 
-  return (
-    <Wrapper ref={ref}>
-      <Label sdsSize={sdsSize}>{label}</Label>
-      <Count sdsSize={sdsSize}>{count}</Count>
-    </Wrapper>
-  );
-});
+    return (
+      <Wrapper ref={ref}>
+        <Label sdsSize={sdsSize}>{label}</Label>
+        <Count sdsSize={sdsSize}>{count}</Count>
+      </Wrapper>
+    );
+  }
+);
diff --git a/packages/components/src/core/Tabs/components/LabelWithCount/style.ts b/packages/components/src/core/Tabs/components/LabelWithCount/style.ts
index f3bee46fc..9789bb5fc 100644
--- a/packages/components/src/core/Tabs/components/LabelWithCount/style.ts
+++ b/packages/components/src/core/Tabs/components/LabelWithCount/style.ts
@@ -1,26 +1,26 @@
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps as StyleProps,
-  fontBodyS,
+  fontBodySemiboldS,
+  fontBodySemiboldXs,
   fontBodyXs,
   fontBodyXxs,
-  getColors,
-  getFontWeights,
+  getSemanticTextColors,
   getSpaces,
 } from "src/core/styles";
 import { SdsSize } from "../common";
 
 export const Wrapper = styled("span")`
   ${(props) => {
-    const colors = getColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
       &:active {
-        color: black;
+        color: ${semanticTextColors?.base?.primary};
       }
 
       &:disabled {
-        color: ${colors?.gray[200]};
+        color: ${semanticTextColors?.base?.disabled};
       }
     `;
   }}
@@ -41,11 +41,10 @@ export const Label = styled("span", {
 
     const isLarge = sdsSize === "large";
 
-    return isLarge ? fontBodyS(props) : fontBodyXs(props);
+    return isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props);
   }}
 
   ${(props: Props) => {
-    const fontWeights = getFontWeights(props);
     const spaces = getSpaces(props);
 
     const { sdsSize } = props;
@@ -54,7 +53,6 @@ export const Label = styled("span", {
 
     return `
       margin-right: ${isLarge ? spaces?.l : spaces?.m}px;
-      font-weight: ${fontWeights?.semibold};
   `;
   }}
 `;
@@ -74,10 +72,15 @@ export const Count = styled("span", {
   }}
 
   ${(props: Props) => {
-    const colors = getColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
+    const spaces = getSpaces(props);
 
     return `
-      color: ${colors?.gray[500]};
+      color: ${semanticTextColors?.base?.secondary};
+
+      .MuiChip-root {
+        margin: 0 0 ${spaces?.xxxs}px 0;
+      }
     `;
   }}
 `;
diff --git a/packages/components/src/core/Tabs/index.stories.tsx b/packages/components/src/core/Tabs/index.stories.tsx
deleted file mode 100644
index 687d0278e..000000000
--- a/packages/components/src/core/Tabs/index.stories.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import styled from "@emotion/styled";
-import { Args, Meta } from "@storybook/react";
-import React, { ReactNode, useState } from "react";
-import { noop } from "src/common/utils";
-import Tag from "../Tag";
-import RawTabs, { Tab, TabsProps } from "./index";
-
-interface TabsArgs extends TabsProps {
-  tabOneLabel: string;
-  tabTwoLabel: string;
-  tabOneCount?: ReactNode;
-  tabTwoCount?: ReactNode;
-}
-
-const Tabs = (props: TabsArgs): JSX.Element => {
-  const { tabOneLabel, tabTwoLabel, tabOneCount, tabTwoCount, ...args } = props;
-
-  const [value, setValue] = useState(0);
-
-  const handleTabsChange = (_: React.SyntheticEvent, tabsValue: unknown) => {
-    setValue(tabsValue as number);
-  };
-
-  return (
-    <RawTabs {...args} value={value} onChange={handleTabsChange}>
-      <Tab label={tabOneLabel} count={tabOneCount} />
-      <Tab label={tabTwoLabel} count={tabTwoCount} />
-    </RawTabs>
-  );
-};
-
-export default {
-  argTypes: {
-    sdsSize: {
-      control: { type: "select" },
-      options: ["large", "small"],
-    },
-    tabOneLabel: {
-      control: {
-        type: "text",
-      },
-    },
-    tabTwoLabel: {
-      control: {
-        type: "text",
-      },
-    },
-    underlined: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-  component: Tabs,
-  parameters: {
-    // tab indicator bug known by MUI where width for indicator updates once font is loaded in.
-    // delay allows for font to load and prevents chromatic from constantly creating new baselines
-    // https://github.com/mui/material-ui/blob/v4.x/packages/material-ui/src/Tabs/Tabs.js#L194
-    chromatic: { delay: 10000 },
-  },
-  title: "Tabs",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    sdsSize: "large",
-    tabOneLabel: "Upload from Your Computer",
-    tabTwoLabel: "Upload from Basespace",
-    underlined: true,
-  },
-  parameters: {
-    // tab indicator bug known by MUI where width for indicator updates once font is loaded in.
-    // delay allows for font to load and prevents chromatic from constantly creating new baselines
-    // https://github.cwom/mui/material-ui/blob/v4.x/packages/material-ui/src/Tabs/Tabs.js#L194
-    chromatic: { delay: 5000 },
-  },
-};
-
-// LivePreview
-
-const livePreviewWrapperStyle: React.CSSProperties = {
-  alignItems: "center",
-  display: "flex",
-  gap: "40px",
-  width: "100%",
-};
-
-function LivePreviewDemo(props: Args): JSX.Element {
-  const finalProps = {
-    ...props,
-    style: { width: "150px" },
-  };
-
-  return (
-    <div style={livePreviewWrapperStyle}>
-      <div>
-        <Tabs
-          onChange={noop}
-          sdsSize="large"
-          tabOneLabel="Label"
-          tabTwoLabel="Label"
-          underlined
-          {...finalProps}
-        />
-      </div>
-      <div>
-        <Tabs
-          onChange={noop}
-          sdsSize="large"
-          tabOneLabel="Label"
-          tabTwoLabel="Label"
-          tabOneCount={0}
-          tabTwoCount={0}
-          underlined
-          {...finalProps}
-        />
-      </div>
-      <div>
-        <Tabs
-          sdsSize="small"
-          onChange={noop}
-          tabOneLabel="Label"
-          tabTwoLabel="Label"
-          underlined
-          {...finalProps}
-        />
-      </div>
-      <div>
-        <Tabs
-          sdsSize="small"
-          onChange={noop}
-          tabOneLabel="Label"
-          tabTwoLabel="Label"
-          tabOneCount={0}
-          tabTwoCount={0}
-          underlined
-          {...finalProps}
-        />
-      </div>
-    </div>
-  );
-}
-
-export const LivePreview = {
-  parameters: {
-    chromatic: { delay: 5000 },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-function TestDemo(props: Args): JSX.Element {
-  const finalProps = {
-    ...props,
-    "data-testid": "tabs",
-    style: { width: "400px" },
-  };
-
-  return (
-    <div>
-      <div style={livePreviewWrapperStyle}>
-        <div>
-          <h4>Default</h4>
-          <Tabs
-            tabOneLabel="Tab One"
-            tabTwoLabel="Tab Two"
-            tabOneCount={123}
-            onChange={noop}
-            {...finalProps}
-          />
-        </div>
-        <div>
-          <h4>Small</h4>
-          <Tabs
-            tabOneLabel="Tab One"
-            tabTwoLabel="Tab Two"
-            tabOneCount={123}
-            onChange={noop}
-            sdsSize="small"
-            {...finalProps}
-          />
-        </div>
-        <div>
-          <h4>Underlined</h4>
-          <Tabs
-            onChange={noop}
-            tabOneLabel="Tab One"
-            tabTwoLabel="Tab Two"
-            tabOneCount={123}
-            underlined
-            {...finalProps}
-          />
-        </div>
-      </div>
-      <div style={livePreviewWrapperStyle}>
-        <div>
-          <h4>Label with count</h4>
-          <div>
-            <Tabs
-              onChange={noop}
-              sdsSize="large"
-              tabOneLabel="Label"
-              tabTwoLabel="Label"
-              underlined
-              tabOneCount={<BetaTagWithCount />}
-              {...finalProps}
-              style={{ width: "200px" }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export const Test = {
-  parameters: {
-    chromatic: { delay: 5000 },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
-
-const CountWrapper = styled("span")`
-  margin-right: 5px;
-`;
-
-function BetaTagWithCount() {
-  return (
-    <>
-      <CountWrapper>123</CountWrapper>
-      <Tag label="BETA" color="beta" sdsStyle="rounded" sdsType="secondary" />
-    </>
-  );
-}
diff --git a/packages/components/src/core/Tabs/index.tsx b/packages/components/src/core/Tabs/index.tsx
index 397d6db29..9872d63a3 100644
--- a/packages/components/src/core/Tabs/index.tsx
+++ b/packages/components/src/core/Tabs/index.tsx
@@ -1,8 +1,8 @@
 import { css } from "@emotion/css";
 import { TabProps as RawTabProps, useTheme } from "@mui/material";
 import React, { ReactNode, forwardRef, useContext, useMemo } from "react";
-import { SDSTheme } from "../styles/common/defaultTheme";
-import { getColors } from "../styles/common/selectors/theme";
+import { SDSTheme } from "src/core/styles/common/types";
+import { getSemanticComponentColors } from "src/core/styles";
 import LabelWithCount from "./components/LabelWithCount";
 import { TabsContext } from "./components/common";
 import { StyledTab, StyledTabs, TabsProps } from "./style";
@@ -10,11 +10,11 @@ import { StyledTab, StyledTabs, TabsProps } from "./style";
 export type { TabsProps };
 
 const TabIndicator = (theme: SDSTheme) => {
-  const colors = getColors({ theme });
+  const semanticComponentColors = getSemanticComponentColors({ theme });
 
   return css`
     &.MuiTabs-indicator {
-      background-color: ${colors?.primary[400]};
+      background-color: ${semanticComponentColors?.accent?.border};
       height: 2px;
       bottom: -2px;
       z-index: 2;
diff --git a/packages/components/src/core/Tabs/style.tsx b/packages/components/src/core/Tabs/style.tsx
index 29e42a14b..4c137241d 100644
--- a/packages/components/src/core/Tabs/style.tsx
+++ b/packages/components/src/core/Tabs/style.tsx
@@ -5,20 +5,19 @@ import {
   TabsProps as RawTabsProps,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { focusVisibleA11yStyle, fontBodyS, fontBodyXs } from "../styles";
 import {
+  focusVisibleA11yStyle,
+  fontBodySemiboldS,
+  fontBodySemiboldXs,
   CommonThemeProps,
   getColors,
-  getFontWeights,
-  getPalette,
+  getSemanticTextColors,
   getSpaces,
-} from "../styles/common/selectors/theme";
+  getSemanticComponentColors,
+} from "src/core/styles";
 import { SdsSize } from "./components/common";
 
-export type TabsProps = Omit<
-  RawTabsProps,
-  "nonce" | "rev" | "rel" | "autoFocus" | "content"
-> & {
+export type TabsProps = RawTabsProps & {
   underlined?: boolean;
   sdsSize?: "small" | "large";
 };
@@ -75,35 +74,35 @@ export const StyledTab = styled(RawTab, {
   ${focusVisibleA11yStyle}
 
   ${(props) => {
-    const colors = getColors(props);
     const spaces = getSpaces(props);
-    const fontWeights = getFontWeights(props);
-    const palette = getPalette(props);
+    const semanticTextColors = getSemanticTextColors(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
-      font-weight: ${fontWeights?.semibold};
-      margin: 0 ${spaces?.xl}px ${spaces?.xxs}px 0;
+      margin-right: ${spaces?.xl}px;
+      padding-bottom: ${spaces?.xxs}px;
 
-      color: ${palette?.text?.secondary};
+      color: ${semanticTextColors?.base?.secondary};
 
       &:hover, :focus {
-        color: black;
+        box-shadow: 0 2px 0 0 ${semanticComponentColors?.base?.border};
+        color: ${semanticTextColors?.base?.primary};
       }
 
       &.Mui-selected {
-        color: black;
+        color: ${semanticTextColors?.base?.primary};
 
         &:hover {
-          color: black;
+          color: ${semanticTextColors?.base?.primary};
         }
       }
 
       &:active {
-        color: black;
+        color: ${semanticTextColors?.base?.primary};
       }
 
       &:disabled {
-        color: ${colors?.gray[200]};
+        color: ${semanticTextColors?.base?.disabled};
       }
     `;
   }}
@@ -113,5 +112,5 @@ function tabFontMixin(props: TabProps): SerializedStyles | null {
   const { sdsSize } = props;
   const isLarge = sdsSize === "large";
 
-  return isLarge ? fontBodyS(props) : fontBodyXs(props);
+  return isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props);
 }
diff --git a/packages/components/src/core/Tag/__storybook__/constants.tsx b/packages/components/src/core/Tag/__storybook__/constants.tsx
new file mode 100644
index 000000000..df63d1cd1
--- /dev/null
+++ b/packages/components/src/core/Tag/__storybook__/constants.tsx
@@ -0,0 +1,100 @@
+import Icon from "src/core/Icon";
+import { ExtraTagProps } from "../style";
+import { WbSunny } from "@mui/icons-material";
+import CustomSvgIcon from "src/common/storybook/customSvgIcon";
+
+export const TAG_EXCLUDED_CONTROLS = [
+  "color",
+  "hover",
+  "label",
+  "sdsSize",
+  "sdsStyle",
+  "sdsType",
+  "icon",
+];
+
+export const TAG_ICONS = [
+  undefined,
+  "CheckCircle",
+  "Loading",
+  "ExclamationMarkCircle",
+  "Person",
+  <WbSunny key="WBSunny" />,
+  <CustomSvgIcon key="CustomSvgIcon" />,
+];
+
+export const TAG_ICONS_LABELS = [
+  "No Icon",
+  "SDS Check Circle",
+  "SDS Loading",
+  "SDS Exclamation Mark",
+  "SDS Person",
+  "MUI Wb Sunny",
+  "Custom SVG Icon",
+];
+
+export const TAG_SDS_STYLES: ExtraTagProps["sdsStyle"][] = [
+  "rounded",
+  "square",
+];
+
+export const TAG_SDS_TYPES: ExtraTagProps["sdsType"][] = [
+  "primary",
+  "secondary",
+];
+
+export const TAG_COLOR_CONTRAST_RULE = "color-contrast";
+
+export const TAG_PANEL_COLORS: ExtraTagProps["tagColor"][] = [
+  "accent",
+  "info",
+  "positive",
+  "notice",
+  "negative",
+  "beta",
+  ["#000000", "#C65FA7", "#FFD400"],
+];
+
+export const TAG_SANS_SERIF_STYLE = { fontFamily: "sans-serif" };
+
+// use PANEL_COLORS to generate colors for ScreenshotTest ...
+// ... but for now it can't include "success" or "warning" colors because they fail a11y tests due to known design issues
+export const TAG_COLORS: ExtraTagProps["tagColor"][] = TAG_PANEL_COLORS.slice(
+  0,
+  8
+).splice(2, 2);
+
+export const TAG_LIVE_PREVIEW_STYLES = {
+  display: "inline-grid",
+  gridColumnGap: 24,
+  gridRowGap: 24,
+  gridTemplateColumns: "repeat(6, auto)",
+  gridTemplateRows: "repeat(2, auto)",
+};
+
+export const TAG_DISPLAY_CONTENTS_STYLES = {
+  display: "contents",
+};
+
+export const TAG_MID_LABEL_STYLES = {
+  borderStyle: "solid none none none",
+  gridColumn: "1 / 6",
+  justifySelf: "stretch",
+  paddingTop: 10,
+};
+
+export const TAG_SCREENSHOT_ICON_OPTIONS = [
+  undefined,
+  <Icon sdsSize="l" sdsIcon="CheckCircle" key="CheckCircle" sdsType="button" />,
+];
+
+export const TAG_HOVER_OPTIONS = [true, false];
+
+export const TAG_GRAY_PRIMARY_COLORS: ExtraTagProps["tagColor"][] = ["neutral"];
+
+export const TAG_GRAY_PRIMARY_TYPES: ExtraTagProps["sdsType"][] = ["primary"];
+
+export const TAG_SUCCESS_WARNING_PRIMARY_COLORS: ExtraTagProps["tagColor"][] = [
+  "positive",
+  "notice",
+];
diff --git a/packages/components/src/core/Tag/__storybook__/index.stories.tsx b/packages/components/src/core/Tag/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..b3ae9ce65
--- /dev/null
+++ b/packages/components/src/core/Tag/__storybook__/index.stories.tsx
@@ -0,0 +1,207 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import {
+  TAG_COLORS,
+  TAG_COLOR_CONTRAST_RULE,
+  TAG_EXCLUDED_CONTROLS,
+  TAG_HOVER_OPTIONS,
+  TAG_ICONS,
+  TAG_ICONS_LABELS,
+  TAG_PANEL_COLORS,
+  TAG_SDS_STYLES,
+  TAG_SDS_TYPES,
+} from "./constants";
+import { Tag } from "./stories/default";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { ScreenshotTestDemo } from "./stories/mainScreenshot";
+import { GrayPrimaryScreenshotTestDemo } from "./stories/grayPrimaryScreenshot";
+import { SuccessWarningScreenshotTestDemo } from "./stories/successWarningScreenshot";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    color: {
+      control: {
+        labels: [
+          "accent",
+          "info",
+          "positive",
+          "notice",
+          "negative",
+          "beta",
+          "Custom colors for Label, Background, Icon",
+        ],
+        type: "select",
+      },
+      mapping: TAG_PANEL_COLORS,
+      options: Object.keys(TAG_PANEL_COLORS),
+    },
+    hover: {
+      control: { type: "boolean" },
+    },
+    icon: {
+      control: {
+        labels: TAG_ICONS_LABELS,
+        type: "select",
+      },
+      mapping: TAG_ICONS,
+      options: Object.keys(TAG_ICONS),
+    },
+    label: {
+      control: { type: "text" },
+      required: true,
+    },
+    sdsSize: {
+      control: { type: "radio" },
+      options: ["s", "l"],
+    },
+    sdsStyle: {
+      control: { type: "radio" },
+      options: ["rounded", "square"],
+    },
+    sdsType: {
+      control: { type: "radio" },
+      options: ["primary", "secondary"],
+    },
+  },
+  component: Tag,
+  parameters: {
+    axe: {
+      disabledRules: [TAG_COLOR_CONTRAST_RULE],
+    },
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Tag",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    hover: true,
+    label: "Label",
+    sdsSize: "s",
+    sdsStyle: "square",
+    sdsType: "primary",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  args: {
+    color: "info",
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: TAG_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Screenshot tests
+
+export const ScreenshotTest = {
+  args: {
+    color: TAG_COLORS[0],
+    hover: TAG_HOVER_OPTIONS[0],
+    label: "Label",
+    sdsStyle: TAG_SDS_STYLES[0],
+    sdsType: TAG_SDS_TYPES[0],
+  },
+  parameters: {
+    axe: {
+      timeout: 10 * 1000,
+    },
+    controls: {
+      exclude: TAG_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+
+  render: (props: Args): JSX.Element => <ScreenshotTestDemo {...props} />,
+};
+
+export const GrayPrimaryScreenshotTest = {
+  args: {
+    color: TAG_COLORS[0],
+    hover: TAG_HOVER_OPTIONS[0],
+    label: "Label",
+    sdsStyle: TAG_SDS_STYLES[0],
+    sdsType: TAG_SDS_TYPES[0],
+  },
+  parameters: {
+    axe: {
+      // `color-contrast` is disabled for this test because design tested it with
+      // APCA and determined these colors pass, our test just isn't able to use APCA
+      // yet; this color was pulled into its own story so the remaining colors can be
+      // tested separately
+      disabledRules: [TAG_COLOR_CONTRAST_RULE],
+      timeout: 10 * 1000,
+    },
+    controls: {
+      exclude: TAG_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+
+  render: (props: Args): JSX.Element => (
+    <GrayPrimaryScreenshotTestDemo {...props} />
+  ),
+};
+
+export const SuccessWarningScreenshotTest = {
+  args: {
+    color: TAG_COLORS[0],
+    hover: TAG_HOVER_OPTIONS[0],
+    label: "Label",
+    sdsStyle: TAG_SDS_STYLES[0],
+    sdsType: TAG_SDS_TYPES[0],
+  },
+  parameters: {
+    axe: {
+      // `color-contrast` is disabled for this test because it is now a known
+      // issue and design will work on adjusting the colors so that they pass;
+      // these colors were pulled into their own story so the remaining colors
+      // can be tested separately
+      disabledRules: [TAG_COLOR_CONTRAST_RULE],
+      timeout: 10 * 1000,
+    },
+    controls: {
+      exclude: TAG_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+
+  render: (props: Args): JSX.Element => (
+    <SuccessWarningScreenshotTestDemo {...props} />
+  ),
+};
+
+// Test
+
+export const Test = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: TAG_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/Tag/index.testUtils.tsx b/packages/components/src/core/Tag/__storybook__/stories/commonScreenshot.tsx
similarity index 80%
rename from packages/components/src/core/Tag/index.testUtils.tsx
rename to packages/components/src/core/Tag/__storybook__/stories/commonScreenshot.tsx
index f91eff439..d6d8dba60 100644
--- a/packages/components/src/core/Tag/index.testUtils.tsx
+++ b/packages/components/src/core/Tag/__storybook__/stories/commonScreenshot.tsx
@@ -1,24 +1,15 @@
 import { Args } from "@storybook/react";
 import React from "react";
-import Icon from "../Icon";
-import RawTag from "./index";
-import { ExtraTagProps } from "./style";
+import RawTag from "src/core/Tag";
+import { ExtraTagProps } from "src/core/Tag/style";
+import {
+  TAG_DISPLAY_CONTENTS_STYLES,
+  TAG_SDS_STYLES,
+  TAG_MID_LABEL_STYLES,
+  TAG_SCREENSHOT_ICON_OPTIONS,
+  TAG_HOVER_OPTIONS,
+} from "../constants";
 
-const SDS_STYLES: ExtraTagProps["sdsStyle"][] = ["rounded", "square"];
-const DISPLAY_CONTENTS: React.CSSProperties = {
-  display: "contents",
-};
-const MID_LABEL: React.CSSProperties = {
-  borderStyle: "solid none none none",
-  gridColumn: "1 / 6",
-  justifySelf: "stretch",
-  paddingTop: 10,
-};
-const ICON_OPTIONS = [
-  undefined,
-  <Icon sdsSize="l" sdsIcon="checkCircle" key="checkCircle" sdsType="button" />,
-];
-export const HOVER_OPTIONS = [true, false];
 export function CommonScreenshotTestDemo({
   props,
   colors,
@@ -28,10 +19,10 @@ export function CommonScreenshotTestDemo({
   colors: ExtraTagProps["tagColor"][];
   types: ExtraTagProps["sdsType"][];
 }): JSX.Element {
-  // loop through all SDS_STYLES
+  // loop through all TAG_SDS_STYLES
   return (
     <>
-      {SDS_STYLES.map((sdsStyle) => {
+      {TAG_SDS_STYLES.map((sdsStyle) => {
         return (
           <TagStyle
             colors={colors}
@@ -46,7 +37,7 @@ export function CommonScreenshotTestDemo({
   );
 }
 
-// loop through all COLORS + create headers for SDS_STYLES
+// loop through all COLORS + create headers for TAG_SDS_STYLES
 function TagStyle({
   colors,
   types,
@@ -104,14 +95,14 @@ function TagColor({
   props: Args;
 }) {
   const LABEL_STYLE: React.CSSProperties = {
-    ...MID_LABEL,
+    ...TAG_MID_LABEL_STYLES,
     borderWidth: "5px",
     fontSize: "1.5em",
     margin: "20px 0 0 0",
   };
 
   return (
-    <div style={DISPLAY_CONTENTS}>
+    <div style={TAG_DISPLAY_CONTENTS_STYLES}>
       <p style={LABEL_STYLE}>
         Color: <b>{typeof color === "string" ? color : "custom"}</b>
       </p>
@@ -119,7 +110,7 @@ function TagColor({
         // exclude gray primary from rendering in the main ScreenshotTest story (types.includes("secondary")), but allow gray primary to render in GrayPrimaryScreenshotTest story
         return types.includes("secondary") &&
           sdsType === "primary" &&
-          color === "gray" ? null : (
+          color === "neutral" ? null : (
           <TagType
             sdsStyle={sdsStyle}
             color={color}
@@ -133,7 +124,7 @@ function TagColor({
   );
 }
 
-// loop through all ICON_OPTIONS + create headers for SDS_TYPES
+// loop through all TAG_SCREENSHOT_ICON_OPTIONS + create headers for SDS_TYPES
 function TagType({
   sdsStyle,
   color,
@@ -146,18 +137,18 @@ function TagType({
   props: Args;
 }) {
   const LABEL_STYLE: React.CSSProperties = {
-    ...MID_LABEL,
+    ...TAG_MID_LABEL_STYLES,
     borderWidth: "2px",
     fontSize: "1.17em",
     margin: "20px 0",
   };
 
   return (
-    <div style={DISPLAY_CONTENTS}>
+    <div style={TAG_DISPLAY_CONTENTS_STYLES}>
       <p style={LABEL_STYLE}>
         Type: <b>{sdsType}</b>
       </p>
-      {ICON_OPTIONS.map((icon) => {
+      {TAG_SCREENSHOT_ICON_OPTIONS.map((icon) => {
         return (
           <TagIcon
             sdsStyle={sdsStyle}
@@ -173,7 +164,7 @@ function TagType({
   );
 }
 
-// loop through all HOVER_OPTIONS + create headers for ICON_OPTIONS
+// loop through all TAG_HOVER_OPTIONS + create headers for TAG_SCREENSHOT_ICON_OPTIONS
 function TagIcon({
   sdsStyle,
   color,
@@ -184,11 +175,11 @@ function TagIcon({
   sdsStyle: ExtraTagProps["sdsStyle"];
   color: ExtraTagProps["tagColor"];
   sdsType: ExtraTagProps["sdsType"];
-  icon: (typeof ICON_OPTIONS)[number];
+  icon: (typeof TAG_SCREENSHOT_ICON_OPTIONS)[number];
   props: Args;
 }) {
   const LABEL_STYLE: React.CSSProperties = {
-    ...MID_LABEL,
+    ...TAG_MID_LABEL_STYLES,
     alignSelf: "end",
     borderWidth: "1px",
     fontSize: "0.83em",
@@ -196,11 +187,11 @@ function TagIcon({
   };
 
   return (
-    <div style={DISPLAY_CONTENTS}>
+    <div style={TAG_DISPLAY_CONTENTS_STYLES}>
       <p style={LABEL_STYLE}>
         Icon: <b>{icon ? "yes" : "no"}</b>
       </p>
-      {HOVER_OPTIONS.map((hover) => {
+      {TAG_HOVER_OPTIONS.map((hover) => {
         return (
           <TagState
             {...props}
@@ -217,13 +208,13 @@ function TagIcon({
   );
 }
 
-// loop through all PSEUDO_STATES + create headers for HOVER_OPTIONS, PSEUDO_STATES
+// loop through all PSEUDO_STATES + create headers for TAG_HOVER_OPTIONS, PSEUDO_STATES
 function TagState(props: {
   sdsStyle: ExtraTagProps["sdsStyle"];
   color: ExtraTagProps["tagColor"];
   sdsType: ExtraTagProps["sdsType"];
-  icon: (typeof ICON_OPTIONS)[number];
-  hover: (typeof HOVER_OPTIONS)[number];
+  icon: (typeof TAG_SCREENSHOT_ICON_OPTIONS)[number];
+  hover: (typeof TAG_HOVER_OPTIONS)[number];
 }) {
   const { sdsStyle, color, sdsType, icon, hover } = props;
   const PSEUDO_STATES = ["default", "hover", "active", "focus-visible"];
diff --git a/packages/components/src/core/Tag/__storybook__/stories/default.tsx b/packages/components/src/core/Tag/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..f6558c0a4
--- /dev/null
+++ b/packages/components/src/core/Tag/__storybook__/stories/default.tsx
@@ -0,0 +1,34 @@
+import { Args } from "@storybook/react";
+import Callout from "src/core/Callout";
+import CalloutTitle from "src/core/Callout/components/CalloutTitle";
+import Icon, { IconNameToSizes } from "src/core/Icon";
+import RawTag from "src/core/Tag";
+
+export const Tag = (props: Args): JSX.Element => {
+  const { label, sdsSize, icon } = props;
+
+  const finalIcon =
+    typeof icon === "string" ? (
+      <Icon
+        sdsSize={sdsSize}
+        sdsIcon={icon as keyof IconNameToSizes}
+        sdsType="static"
+      />
+    ) : (
+      icon
+    );
+
+  if (sdsSize === "l" && !icon) {
+    return (
+      <Callout intent="negative">
+        <CalloutTitle>Invalid Props!</CalloutTitle>
+        <p>
+          The large-size tag must include an icon. Please choose an icon from
+          the controls section or switch the Tag size to small.
+        </p>
+      </Callout>
+    );
+  }
+
+  return <RawTag label={label} {...props} sdsSize={sdsSize} icon={finalIcon} />;
+};
diff --git a/packages/components/src/core/Tag/__storybook__/stories/grayPrimaryScreenshot.tsx b/packages/components/src/core/Tag/__storybook__/stories/grayPrimaryScreenshot.tsx
new file mode 100644
index 000000000..cbdc93ea8
--- /dev/null
+++ b/packages/components/src/core/Tag/__storybook__/stories/grayPrimaryScreenshot.tsx
@@ -0,0 +1,35 @@
+// Gray Primary only
+// Tags with `color` of `gray` and `sdsType` of `primary` have their own story
+// here because they do not currently pass the a11y tests. However, design has
+// manually tested them with APCA, and they are accessible; our tests just do
+// not use APCA yet. In the meantime, the a11y tests are currently disabled for
+// this story, but enabled for the remaining colors in the ScreenshotTest story,
+// so they can be tested properly.
+
+import { Args } from "@storybook/react";
+import {
+  TAG_GRAY_PRIMARY_COLORS,
+  TAG_GRAY_PRIMARY_TYPES,
+  TAG_SANS_SERIF_STYLE,
+} from "../constants";
+import { CommonScreenshotTestDemo } from "./commonScreenshot";
+
+export function GrayPrimaryScreenshotTestDemo(props: Args): JSX.Element {
+  return (
+    <>
+      <p style={TAG_SANS_SERIF_STYLE}>
+        Tags with `color` of `gray` and `sdsType` of `primary` have their own
+        story here because they do not currently pass the a11y tests. However,
+        design has manually tested them with APCA, and they are accessible; our
+        tests just do not use APCA yet. In the meantime, the a11y tests are
+        currently disabled for this story, but enabled for the remaining colors
+        in the ScreenshotTest story, so they can be tested properly.
+      </p>
+      <CommonScreenshotTestDemo
+        props={props}
+        colors={TAG_GRAY_PRIMARY_COLORS}
+        types={TAG_GRAY_PRIMARY_TYPES}
+      />
+    </>
+  );
+}
diff --git a/packages/components/src/core/Tag/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Tag/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..f867f93a3
--- /dev/null
+++ b/packages/components/src/core/Tag/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,164 @@
+import { Args } from "@storybook/react";
+import RawTag from "src/core/Tag";
+import { TAG_LIVE_PREVIEW_STYLES } from "../constants";
+import Icon from "src/core/Icon";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  const { color, label } = props;
+
+  return (
+    <div style={TAG_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      {/* First Row Start */}
+      {/* Small - Square -Primary - No Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={undefined}
+          label={label}
+          sdsStyle="square"
+          sdsType="primary"
+        />
+      </div>
+
+      {/* Small - Square - Secondary - No Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={undefined}
+          label={label}
+          sdsStyle="square"
+          sdsType="secondary"
+        />
+      </div>
+
+      {/* Small - Square - Primary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="xs" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="square"
+          sdsType="primary"
+        />
+      </div>
+
+      {/* Small - Square - Secondary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="xs" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="square"
+          sdsType="secondary"
+        />
+      </div>
+
+      {/* Large - Square - Primary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          label={label}
+          icon={<Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />}
+          sdsStyle="square"
+          sdsType="primary"
+          sdsSize="l"
+        />
+      </div>
+
+      {/* Large - Square - Secondary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="square"
+          sdsType="secondary"
+          sdsSize="l"
+        />
+      </div>
+      {/* First Row End */}
+
+      {/* Second Row Start */}
+      {/* Small - Rounded -Primary - No Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={undefined}
+          label={label}
+          sdsStyle="rounded"
+          sdsType="primary"
+        />
+      </div>
+
+      {/* Small - Rounded - Secondary - No Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={undefined}
+          label={label}
+          sdsStyle="rounded"
+          sdsType="secondary"
+        />
+      </div>
+
+      {/* Small - Rounded - Primary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="xs" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="rounded"
+          sdsType="primary"
+        />
+      </div>
+
+      {/* Small - Rounded - Secondary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="xs" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="rounded"
+          sdsType="secondary"
+        />
+      </div>
+
+      {/* Large - Rounded - Primary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          label={label}
+          icon={<Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />}
+          sdsStyle="rounded"
+          sdsType="primary"
+          sdsSize="l"
+        />
+      </div>
+
+      {/* Large - Rounded - Secondary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="rounded"
+          sdsType="secondary"
+          sdsSize="l"
+        />
+      </div>
+      {/* Second Row End */}
+    </div>
+  );
+};
diff --git a/packages/components/src/core/Tag/__storybook__/stories/mainScreenshot.tsx b/packages/components/src/core/Tag/__storybook__/stories/mainScreenshot.tsx
new file mode 100644
index 000000000..ba9b12588
--- /dev/null
+++ b/packages/components/src/core/Tag/__storybook__/stories/mainScreenshot.tsx
@@ -0,0 +1,23 @@
+import { Args } from "@storybook/react";
+import { TAG_COLORS, TAG_SANS_SERIF_STYLE, TAG_SDS_TYPES } from "../constants";
+import { CommonScreenshotTestDemo } from "./commonScreenshot";
+
+export function ScreenshotTestDemo(props: Args): JSX.Element {
+  return (
+    <>
+      <p style={TAG_SANS_SERIF_STYLE}>
+        This story currently excludes Tags with both `sdsType` of `primary` and
+        `color` of `gray`, and those with `color` of `success` and `primary`,
+        because they do not pass the a11y tests. They have their own stories
+        wherein the a11y tests are disabled until the a11y tests are updated to
+        accommodate APCA (for gray x primary) or until the Tag colors are
+        updated by design (for success and primary).
+      </p>
+      <CommonScreenshotTestDemo
+        props={props}
+        colors={TAG_COLORS}
+        types={TAG_SDS_TYPES}
+      />
+    </>
+  );
+}
diff --git a/packages/components/src/core/Tag/__storybook__/stories/successWarningScreenshot.tsx b/packages/components/src/core/Tag/__storybook__/stories/successWarningScreenshot.tsx
new file mode 100644
index 000000000..cd73940fb
--- /dev/null
+++ b/packages/components/src/core/Tag/__storybook__/stories/successWarningScreenshot.tsx
@@ -0,0 +1,33 @@
+// Success + Warning only
+// Tags with `color` of `success` or `warning` have their own story here because
+// they do not currently pass the a11y tests. Design is aware of this and will be
+// updating their colors. In the meantime, the a11y tests are currently disabled
+// for this story, but enabled for the remaining colors in the ScreenshotTest story,
+// so they can be tested properly.
+
+import { Args } from "@storybook/react";
+import {
+  TAG_SANS_SERIF_STYLE,
+  TAG_SDS_TYPES,
+  TAG_SUCCESS_WARNING_PRIMARY_COLORS,
+} from "../constants";
+import { CommonScreenshotTestDemo } from "./commonScreenshot";
+
+export function SuccessWarningScreenshotTestDemo(props: Args): JSX.Element {
+  return (
+    <>
+      <p style={TAG_SANS_SERIF_STYLE}>
+        Tags with `color` of `success` or `warning`have their own story here
+        because they do not currently pass the a11y tests. Design is aware of
+        this and will be updating their colors. In the meantime the a11y tests
+        are currently disabled for this story, but enabled for the remaining
+        colors in the ScreenshotTest story, so they can be tested properly.
+      </p>
+      <CommonScreenshotTestDemo
+        props={props}
+        colors={TAG_SUCCESS_WARNING_PRIMARY_COLORS}
+        types={TAG_SDS_TYPES}
+      />
+    </>
+  );
+}
diff --git a/packages/components/src/core/Tag/__storybook__/stories/test.tsx b/packages/components/src/core/Tag/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..f44407eb6
--- /dev/null
+++ b/packages/components/src/core/Tag/__storybook__/stories/test.tsx
@@ -0,0 +1,7 @@
+import { Args } from "@storybook/react";
+import RawTag from "src/core/Tag";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  const { label } = props;
+  return <RawTag label={label} {...props} data-testid="tags" />;
+};
diff --git a/packages/components/src/core/Tag/Tag.namespace-test.tsx b/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx
similarity index 80%
rename from packages/components/src/core/Tag/Tag.namespace-test.tsx
rename to packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx
index 6045262ef..2a90ecfb9 100644
--- a/packages/components/src/core/Tag/Tag.namespace-test.tsx
+++ b/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx
@@ -5,7 +5,7 @@ const TagNameSpaceTest = (props: TagProps) => {
   return (
     <Tag
       color="beta"
-      icon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
+      icon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
       label="Label"
       sdsStyle="rounded"
       sdsType="primary"
diff --git a/packages/components/src/core/Tag/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Tag/__tests__/__snapshots__/index.test.tsx.snap
similarity index 82%
rename from packages/components/src/core/Tag/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Tag/__tests__/__snapshots__/index.test.tsx.snap
index 9dc82486b..0d3c25b4f 100644
--- a/packages/components/src/core/Tag/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Tag/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Tag /> Default story renders snapshot 1`] = `
 <div
-  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1yqb8l3-MuiChip-root"
+  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-9gm3k1-MuiChip-root"
 >
   <span
     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
diff --git a/packages/components/src/core/Tag/index.test.tsx b/packages/components/src/core/Tag/__tests__/index.test.tsx
similarity index 88%
rename from packages/components/src/core/Tag/index.test.tsx
rename to packages/components/src/core/Tag/__tests__/index.test.tsx
index b2423d793..404a36003 100644
--- a/packages/components/src/core/Tag/index.test.tsx
+++ b/packages/components/src/core/Tag/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 const { Test } = composeStories(stories);
 
diff --git a/packages/components/src/core/Tag/index.stories.tsx b/packages/components/src/core/Tag/index.stories.tsx
deleted file mode 100644
index 01ad95fcc..000000000
--- a/packages/components/src/core/Tag/index.stories.tsx
+++ /dev/null
@@ -1,378 +0,0 @@
-import { CheckCircleOutline, WbSunny } from "@mui/icons-material";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import Icon from "../Icon";
-import RawTag from "./index";
-import { CommonScreenshotTestDemo, HOVER_OPTIONS } from "./index.testUtils";
-import { ExtraTagProps } from "./style";
-
-const Tag = (props: Args): JSX.Element => {
-  const { label } = props;
-  return <RawTag label={label} {...props} />;
-};
-
-const ICONS = [
-  undefined,
-  <Icon sdsSize="l" sdsIcon="checkCircle" key="checkCircle" sdsType="button" />,
-  <Icon sdsSize="l" sdsIcon="loading" key="loading" sdsType="button" />,
-  <WbSunny key="WBSunny" />,
-  <CheckCircleOutline key="CheckCircleOutline" />,
-];
-const SDS_STYLES: ExtraTagProps["sdsStyle"][] = ["rounded", "square"];
-
-const PANEL_COLORS: ExtraTagProps["tagColor"][] = [
-  "primary",
-  "info",
-  "success",
-  "warning",
-  "error",
-  "gray",
-  "beta",
-  ["#000000", "#C65FA7", "#FFD400"],
-];
-
-// use PANEL_COLORS to generate colors for ScreenshotTest ...
-const colors: ExtraTagProps["tagColor"][] = PANEL_COLORS.slice(0, 8);
-// ... but for now it can't include "success" or "warning" colors because they fail a11y tests due to known design issues
-colors.splice(2, 2);
-
-const SDS_TYPES: ExtraTagProps["sdsType"][] = ["primary", "secondary"];
-
-export default {
-  argTypes: {
-    color: {
-      control: {
-        labels: [
-          "primary",
-          "info",
-          "success",
-          "warning",
-          "error",
-          "gray",
-          "beta",
-          "Custom colors for Label, Background, Icon",
-        ],
-        type: "select",
-      },
-      mapping: PANEL_COLORS,
-      options: Object.keys(PANEL_COLORS),
-    },
-    hover: {
-      control: { type: "boolean" },
-    },
-    icon: {
-      control: {
-        labels: [
-          "No Icon",
-          "SDS Check Circle",
-          "SDS Loading",
-          "MUI WbSunny",
-          "MUI Check Circle",
-        ],
-        type: "select",
-      },
-      mapping: ICONS,
-      options: Object.keys(ICONS),
-    },
-    label: {
-      control: { type: "text" },
-      required: true,
-    },
-    sdsStyle: {
-      control: { type: "radio" },
-      options: ["rounded", "square"],
-    },
-    sdsType: {
-      control: { type: "radio" },
-      options: ["primary", "secondary"],
-    },
-  },
-  component: Tag,
-  title: "Tag",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    hover: true,
-    label: "Label",
-    sdsStyle: "square",
-    sdsType: "primary",
-  },
-};
-
-// Live Preview
-
-const livePreviewStyles = {
-  display: "inline-grid",
-  gridColumnGap: 24,
-  gridRowGap: 24,
-  gridTemplateColumns: "repeat(3, auto)",
-  gridTemplateRows: "repeat(2, auto)",
-};
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  const { color, icon, label } = props;
-
-  return (
-    <div style={livePreviewStyles as React.CSSProperties}>
-      <div style={{ gridArea: "1 / 1 / 2 / 2" }}>
-        <RawTag
-          {...props}
-          color={color}
-          icon={undefined}
-          label={label}
-          sdsStyle="square"
-          sdsType="primary"
-        />
-      </div>
-
-      <div style={{ gridArea: "1 / 2 / 2 / 3" }}>
-        <RawTag
-          {...props}
-          color={color}
-          icon={undefined}
-          label={label}
-          sdsStyle="square"
-          sdsType="secondary"
-        />
-      </div>
-
-      <div style={{ gridArea: "1 / 3 / 2 / 4" }}>
-        <RawTag
-          {...props}
-          color={color}
-          icon={
-            icon || <Icon sdsSize="l" sdsIcon="checkCircle" sdsType="button" />
-          }
-          label={label}
-          sdsStyle="square"
-          sdsType="secondary"
-        />
-      </div>
-
-      <div style={{ gridArea: "2 / 1 / 3 / 2" }}>
-        <RawTag
-          {...props}
-          color={color}
-          icon={undefined}
-          label={label}
-          sdsStyle="rounded"
-          sdsType="primary"
-        />
-      </div>
-
-      <div style={{ gridArea: "2 / 2 / 3 / 3" }}>
-        <RawTag
-          {...props}
-          color={color}
-          icon={undefined}
-          label={label}
-          sdsStyle="rounded"
-          sdsType="secondary"
-        />
-      </div>
-
-      <div style={{ gridArea: "2 / 3 / 3 / 4" }}>
-        <RawTag
-          {...props}
-          color={color}
-          icon={
-            icon || <Icon sdsSize="l" sdsIcon="checkCircle" sdsType="button" />
-          }
-          label={label}
-          sdsStyle="rounded"
-          sdsType="secondary"
-        />
-      </div>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Screenshot tests
-
-const SANS_SERIF_STYLE = { fontFamily: "sans-serif" };
-
-// Main Screenshot Test
-
-function ScreenshotTestDemo(props: Args): JSX.Element {
-  return (
-    <>
-      <p style={SANS_SERIF_STYLE}>
-        This story currently excludes Tags with both `sdsType` of `primary` and
-        `color` of `gray`, and those with `color` of `success` and `primary`,
-        because they do not pass the a11y tests. They have their own stories
-        wherein the a11y tests are disabled until the a11y tests are updated to
-        accommodate APCA (for gray x primary) or until the Tag colors are
-        updated by design (for success and primary).
-      </p>
-      <CommonScreenshotTestDemo
-        props={props}
-        colors={colors}
-        types={SDS_TYPES}
-      />
-    </>
-  );
-}
-
-export const ScreenshotTest = {
-  args: {
-    color: colors[0],
-    hover: HOVER_OPTIONS[0],
-    label: "Label",
-    sdsStyle: SDS_STYLES[0],
-    sdsType: SDS_TYPES[0],
-  },
-  parameters: {
-    axe: {
-      timeout: 10 * 1000,
-    },
-    controls: {
-      exclude: ["color", "hover", "label", "sdsStyle", "sdsType", "icon"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-
-  render: (props: Args): JSX.Element => <ScreenshotTestDemo {...props} />,
-};
-
-// Gray Primary only
-// Tags with `color` of `gray` and `sdsType` of `primary` have their own story here because they do not currently pass the a11y tests. However, design has manually tested them with APCA, and they are accessible; our tests just do not use APCA yet. In the meantime, the a11y tests are currently disabled for this story, but enabled for the remaining colors in the ScreenshotTest story, so they can be tested properly.
-
-const GRAY_PRIMARY_COLORS: ExtraTagProps["tagColor"][] = ["gray"];
-const GRAY_PRIMARY_TYPES: ExtraTagProps["sdsType"][] = ["primary"];
-
-function GrayPrimaryScreenshotTestDemo(props: Args): JSX.Element {
-  return (
-    <>
-      <p style={SANS_SERIF_STYLE}>
-        Tags with `color` of `gray` and `sdsType` of `primary` have their own
-        story here because they do not currently pass the a11y tests. However,
-        design has manually tested them with APCA, and they are accessible; our
-        tests just do not use APCA yet. In the meantime, the a11y tests are
-        currently disabled for this story, but enabled for the remaining colors
-        in the ScreenshotTest story, so they can be tested properly.
-      </p>
-      <CommonScreenshotTestDemo
-        props={props}
-        colors={GRAY_PRIMARY_COLORS}
-        types={GRAY_PRIMARY_TYPES}
-      />
-    </>
-  );
-}
-
-export const GrayPrimaryScreenshotTest = {
-  args: {
-    color: colors[0],
-    hover: HOVER_OPTIONS[0],
-    label: "Label",
-    sdsStyle: SDS_STYLES[0],
-    sdsType: SDS_TYPES[0],
-  },
-  parameters: {
-    axe: {
-      // `color-contrast` is disabled for this test because design tested it with APCA and determined these colors pass, our test just isn't able to use APCA yet; this color was pulled into its own story so the remaining colors can be tested separately
-      disabledRules: ["color-contrast"],
-      timeout: 10 * 1000,
-    },
-    controls: {
-      exclude: ["color", "hover", "label", "sdsStyle", "sdsType", "icon"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-
-  render: (props: Args): JSX.Element => (
-    <GrayPrimaryScreenshotTestDemo {...props} />
-  ),
-};
-
-// Success + Warning only
-// Tags with `color` of `success` or `warning` have their own story here because they do not currently pass the a11y tests. Design is aware of this and will be updating their colors. In the meantime, the a11y tests are currently disabled for this story, but enabled for the remaining colors in the ScreenshotTest story, so they can be tested properly.
-
-const SUCCESS_WARNING_PRIMARY_COLORS: ExtraTagProps["tagColor"][] = [
-  "success",
-  "warning",
-];
-
-function SuccessWarningScreenshotTestDemo(props: Args): JSX.Element {
-  return (
-    <>
-      <p style={SANS_SERIF_STYLE}>
-        Tags with `color` of `success` or `warning`have their own story here
-        because they do not currently pass the a11y tests. Design is aware of
-        this and will be updating their colors. In the meantime the a11y tests
-        are currently disabled for this story, but enabled for the remaining
-        colors in the ScreenshotTest story, so they can be tested properly.
-      </p>
-      <CommonScreenshotTestDemo
-        props={props}
-        colors={SUCCESS_WARNING_PRIMARY_COLORS}
-        types={SDS_TYPES}
-      />
-    </>
-  );
-}
-
-export const SuccessWarningScreenshotTest = {
-  args: {
-    color: colors[0],
-    hover: HOVER_OPTIONS[0],
-    label: "Label",
-    sdsStyle: SDS_STYLES[0],
-    sdsType: SDS_TYPES[0],
-  },
-  parameters: {
-    axe: {
-      // `color-contrast` is disabled for this test because it is now a known issue and design will work on adjusting the colors so that they pass; these colors were pulled into their own story so the remaining colors can be tested separately
-      disabledRules: ["color-contrast"],
-      timeout: 10 * 1000,
-    },
-    controls: {
-      exclude: ["color", "hover", "label", "sdsStyle", "sdsType", "icon"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-
-  render: (props: Args): JSX.Element => (
-    <SuccessWarningScreenshotTestDemo {...props} />
-  ),
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  const { label } = props;
-  return <RawTag label={label} {...props} data-testid="tags" />;
-};
-
-export const Test = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/Tag/style.ts b/packages/components/src/core/Tag/style.ts
index 5e3749d58..ac43ad0e9 100644
--- a/packages/components/src/core/Tag/style.ts
+++ b/packages/components/src/core/Tag/style.ts
@@ -6,60 +6,80 @@ import {
   fontBodyXs,
   fontBodyXxxs,
   fontHeaderXs,
-  getColors,
   getCorners,
   getIconSizes,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
-} from "../styles";
+  SemanticComponentColors,
+} from "src/core/styles";
 
 export type SdsTagColorType =
-  | "primary"
+  | "accent"
   | "info"
-  | "success"
-  | "warning"
-  | "error"
-  | "gray"
+  | "positive"
+  | "notice"
+  | "negative"
+  | "neutral"
   | "beta"
   | [string, string]
   | [string, string, string];
-export interface ExtraTagProps extends CommonThemeProps {
+
+interface ExtraSmallTagProps extends CommonThemeProps {
   hover?: boolean;
   sdsType?: "primary" | "secondary";
   sdsStyle?: "square" | "rounded";
+  sdsSize?: "s";
   tagColor?: SdsTagColorType;
   icon?: JSX.Element;
 }
+interface ExtraLargeTagProps extends CommonThemeProps {
+  hover?: boolean;
+  sdsType?: "primary" | "secondary";
+  sdsStyle?: "square" | "rounded";
+  sdsSize?: "l";
+  tagColor?: SdsTagColorType;
+  icon: JSX.Element;
+}
+export type ExtraTagProps = ExtraSmallTagProps | ExtraLargeTagProps;
 
-const withoutIcon = (props: ExtraTagProps): SerializedStyles => {
-  const spacings = getSpaces(props);
+const tagSizeS = (props: ExtraTagProps): SerializedStyles => {
+  const spaces = getSpaces(props);
   const iconSizes = getIconSizes(props);
 
   return css`
     height: unset;
-    margin: 0 ${spacings?.xxs}px ${spacings?.xs}px 0;
+    margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
 
     .MuiChip-label {
       ${fontBodyXxxs(props)}
       padding: 0;
     }
 
+    .MuiSvgIcon-root {
+      height: ${iconSizes?.xs.height}px;
+      width: ${iconSizes?.xs.width}px;
+      padding-right: ${spaces?.xxs}px;
+      margin: 0 0 0 -${spaces?.xxxs}px;
+    }
+
     .MuiChip-deleteIcon {
       ${fontHeaderXs(props)}
       color: white;
-      margin: 0 0 0 ${spacings?.xxs}px;
+      margin: 0 0 0 ${spaces?.xxs}px;
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
     }
   `;
 };
 
-const withIcon = (props: ExtraTagProps): SerializedStyles => {
-  const spacings = getSpaces(props);
+const tagSizeL = (props: ExtraTagProps): SerializedStyles => {
+  const spaces = getSpaces(props);
   const iconSizes = getIconSizes(props);
 
   return css`
     height: unset;
-    margin: 0 ${spacings?.xxs}px ${spacings?.xs}px 0;
+    margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
 
     .MuiChip-label {
       ${fontBodyXs(props)}
@@ -69,14 +89,14 @@ const withIcon = (props: ExtraTagProps): SerializedStyles => {
     .MuiSvgIcon-root {
       height: ${iconSizes?.l.height}px;
       width: ${iconSizes?.l.width}px;
-      padding-right: ${spacings?.xxs}px;
-      margin: 0 0 0 -${spacings?.xxxs}px;
+      padding-right: ${spaces?.xxs}px;
+      margin: 0 0 0 -${spaces?.xxxs}px;
     }
 
     .MuiChip-deleteIcon {
       ${fontHeaderXs(props)}
       color: white;
-      margin: 0 0 0 ${spacings?.xxs}px;
+      margin: 0 0 0 ${spaces?.xxs}px;
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
     }
@@ -85,15 +105,16 @@ const withIcon = (props: ExtraTagProps): SerializedStyles => {
 
 const rounded = (props: ExtraTagProps): SerializedStyles => {
   const corners = getCorners(props);
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
+
+  const { sdsSize = "s", icon } = props;
 
-  const { icon } = props;
+  const topBottomPadding =
+    sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
 
   return css`
     border-radius: ${corners?.l}px;
-    padding: ${icon
-      ? `${spacings?.xxs}px ${spacings?.s}px ${spacings?.xxs}px ${spacings?.xs}px`
-      : `${spacings?.xxxs}px ${spacings?.s}px`};
+    padding: ${topBottomPadding}px ${spaces?.s}px;
 
     &:after {
       border-radius: ${corners?.l}px;
@@ -103,15 +124,16 @@ const rounded = (props: ExtraTagProps): SerializedStyles => {
 
 const square = (props: ExtraTagProps): SerializedStyles => {
   const corners = getCorners(props);
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
 
-  const { icon } = props;
+  const { sdsSize = "s", icon } = props;
+
+  const topBottomPadding =
+    sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
 
   return css`
     border-radius: ${corners?.m}px;
-    padding: ${icon
-      ? `${spacings?.xxs}px ${spacings?.s}px`
-      : `${spacings?.xxxs}px ${spacings?.xs}px`};
+    padding: ${topBottomPadding}px ${spaces?.s}px;
 
     &:after {
       border-radius: ${corners?.m}px;
@@ -119,7 +141,9 @@ const square = (props: ExtraTagProps): SerializedStyles => {
   `;
 };
 
-const withHover = (): SerializedStyles => {
+const withHover = (props: ExtraTagProps): SerializedStyles => {
+  const semanticTextColors = getSemanticTextColors(props);
+
   return css`
     &:hover {
       cursor: pointer;
@@ -127,7 +151,7 @@ const withHover = (): SerializedStyles => {
 
     &:hover,
     &:focus-visible {
-      color: white;
+      color: ${semanticTextColors?.base?.onFill};
     }
   `;
 };
@@ -140,42 +164,81 @@ const secondary = (props: ExtraTagProps): SerializedStyles | undefined => {
   return createTypeCss(props, "secondary");
 };
 
-function createTypeCss(
-  props: ExtraTagProps,
-  type: NonNullable<ExtraTagProps["sdsType"]>
-): SerializedStyles | undefined {
-  const themeColors = getColors(props);
-  const intent =
-    typeof props.tagColor === "string" ? props.tagColor : "primary";
-  const colors = Array.isArray(props.tagColor) ? [...props.tagColor] : [];
-
-  const typeToColors = {
-    primary: {
-      background: colors.length >= 2 ? colors[1] : themeColors?.[intent][400],
+function generatePrimaryTagColors(
+  intent: Extract<SdsTagColorType, string> | null,
+  colors: string[],
+  semanticColors: SemanticComponentColors | null
+) {
+  if (intent) {
+    return {
+      background:
+        colors.length >= 2 ? colors[1] : semanticColors?.[intent].fill,
       backgroundClicked:
         colors.length >= 2
           ? darken(colors[1], 0.3)
-          : themeColors?.[intent][600],
+          : semanticColors?.[intent].fillPressed,
       backgroundHover:
         colors.length >= 2
           ? darken(colors[1], 0.15)
-          : themeColors?.[intent][500],
+          : semanticColors?.[intent].fillHover,
       iconColor: colors.length > 2 ? colors[2] : "white",
       label: colors.length ? colors[0] : "white",
-    },
-    secondary: {
-      background: colors.length >= 2 ? colors[1] : themeColors?.[intent][200],
+    };
+  } else {
+    return {
+      background: semanticColors?.neutral.fill,
+      backgroundClicked: semanticColors?.neutral.fillPressed,
+      backgroundHover: semanticColors?.neutral.fillHover,
+      iconColor: "white",
+      label: "white",
+    };
+  }
+}
+
+function generateSecondaryTagColors(
+  intent: Extract<SdsTagColorType, string> | null,
+  colors: string[],
+  semanticColors: SemanticComponentColors | null
+) {
+  if (intent) {
+    return {
+      background:
+        colors.length >= 2 ? colors[1] : semanticColors?.[intent].surface,
       backgroundClicked:
         colors.length >= 2
           ? darken(colors[1], 0.3)
-          : themeColors?.[intent][600],
+          : semanticColors?.[intent].fillPressed,
       backgroundHover:
         colors.length >= 2
           ? darken(colors[1], 0.15)
-          : themeColors?.[intent][500],
-      iconColor: colors.length > 2 ? colors[2] : themeColors?.[intent][400],
-      label: colors.length ? colors[0] : themeColors?.[intent][600],
-    },
+          : semanticColors?.[intent].fillHover,
+      iconColor: colors.length > 2 ? colors[2] : semanticColors?.[intent].icon,
+      label: colors.length ? colors[0] : semanticColors?.[intent].fillPressed,
+    };
+  } else {
+    return {
+      background: semanticColors?.neutral.surface,
+      backgroundClicked: semanticColors?.neutral.fillPressed,
+      backgroundHover: semanticColors?.neutral.fillHover,
+      iconColor: semanticColors?.neutral.icon,
+      label: semanticColors?.neutral.fillPressed,
+    };
+  }
+}
+
+function createTypeCss(
+  props: ExtraTagProps,
+  type: NonNullable<ExtraTagProps["sdsType"]>
+): SerializedStyles | undefined {
+  const semanticColors = getSemanticComponentColors(props);
+  const semanticTextColors = getSemanticTextColors(props);
+
+  const intent = typeof props.tagColor === "string" ? props.tagColor : null;
+  const colors = Array.isArray(props.tagColor) ? [...props.tagColor] : [];
+
+  const typeToColors = {
+    primary: generatePrimaryTagColors(intent, colors, semanticColors),
+    secondary: generateSecondaryTagColors(intent, colors, semanticColors),
   };
 
   const typeColors = typeToColors[type];
@@ -196,11 +259,11 @@ function createTypeCss(
     &:active,
     &:focus {
       .MuiChip-label {
-        color: white;
+        color: ${semanticTextColors?.base?.onFill};
       }
 
       svg {
-        fill: white;
+        fill: ${semanticTextColors?.base?.onFill};
       }
     }
 
@@ -231,7 +294,13 @@ const typeToCss = {
   secondary,
 };
 
-const doNotForwardProps = ["sdsType", "sdsStyle", "tagColor", "hover"];
+const doNotForwardProps = [
+  "sdsType",
+  "sdsStyle",
+  "sdsSize",
+  "tagColor",
+  "hover",
+];
 
 export const StyledTag = styled(Chip, {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
@@ -239,16 +308,16 @@ export const StyledTag = styled(Chip, {
   border: none;
 
   ${(props: ExtraTagProps) => {
-    const { hover = true, sdsType, sdsStyle, icon } = props;
+    const { hover = true, sdsType, sdsStyle, sdsSize = "s" } = props;
 
     const isRounded = sdsStyle === "rounded";
     const type = sdsType || "primary";
 
     return css`
-      ${icon ? withIcon(props) : withoutIcon(props)}
+      ${sdsSize === "l" ? tagSizeL(props) : tagSizeS(props)}
       ${typeToCss[type](props)}
       ${isRounded ? rounded(props) : square(props)}
-      ${hover ? withHover() : `pointer-events: none;`}
+      ${hover ? withHover(props) : `pointer-events: none;`}
     `;
   }}
 `;
diff --git a/packages/components/src/core/TagFilter/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TagFilter/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index ae10ef7e9..000000000
--- a/packages/components/src/core/TagFilter/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TagFilter /> Default story renders snapshot 1`] = `
-<div
-  style="display: inline-grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);"
->
-  <div
-    style="grid-area: 1 / 1 / 1 / 2;"
-  >
-    <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-122wsmx-MuiButtonBase-root-MuiButton-root"
-      disabled=""
-      tabindex="-1"
-      type="button"
-    >
-      Delete the tag by clicking on its icon
-    </button>
-  </div>
-  <div
-    style="grid-area: 2 / 1 / 2 / 2;"
-  >
-    <div
-      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-1fg6oes-MuiButtonBase-root-MuiChip-root"
-      role="button"
-      tabindex="0"
-    >
-      <span
-        class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
-      >
-        TagFilter
-      </span>
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-i4bv87-MuiSvgIcon-root"
-        data-testid="ClearIcon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/components/src/core/TagFilter/__storybook__/constants.tsx b/packages/components/src/core/TagFilter/__storybook__/constants.tsx
new file mode 100644
index 000000000..adf0a7e3f
--- /dev/null
+++ b/packages/components/src/core/TagFilter/__storybook__/constants.tsx
@@ -0,0 +1,18 @@
+export const TAG_FILTER_EXCLUDED_CONTROLS = ["label"];
+
+export const TAG_FILTER_DEFAULT_STYLES = {
+  display: "inline-grid",
+  gridColumnGap: 24,
+  gridRowGap: 24,
+  gridTemplateColumns: "repeat(1, 1fr)",
+  gridTemplateRows: "repeat(1, 1fr)",
+};
+
+export const TAG_FILTER_PSEUDO_STATES = ["default", "hover", "active", "focus"];
+
+export const TAG_FILTER_LABEL_STYLE = {
+  fontFamily: "sans-serif",
+  fontSize: "0.67em",
+  fontWeight: "normal",
+  margin: "20px 0 10px",
+};
diff --git a/packages/components/src/core/TagFilter/__storybook__/index.stories.tsx b/packages/components/src/core/TagFilter/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..ff27c9b39
--- /dev/null
+++ b/packages/components/src/core/TagFilter/__storybook__/index.stories.tsx
@@ -0,0 +1,80 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { TagFilter } from "./stories/default";
+import { TAG_FILTER_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { ScreenshotTestDemo } from "./stories/screenshot";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      required: true,
+    },
+  },
+  component: TagFilter,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/TagFilter",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    label: "TagFilter",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: TAG_FILTER_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Screenshot Test
+
+export const ScreenshotTest = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: TAG_FILTER_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <ScreenshotTestDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    label: "Label",
+  },
+  parameters: {
+    controls: {
+      exclude: TAG_FILTER_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} data-testid="tag-filter" />,
+};
diff --git a/packages/components/src/core/TagFilter/__storybook__/stories/default.tsx b/packages/components/src/core/TagFilter/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..0deb7afb0
--- /dev/null
+++ b/packages/components/src/core/TagFilter/__storybook__/stories/default.tsx
@@ -0,0 +1,37 @@
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import { TAG_FILTER_DEFAULT_STYLES } from "../constants";
+import { StyledButton } from "../style";
+import RawTagFilter from "src/core/TagFilter";
+
+export const TagFilter = (props: Args): JSX.Element => {
+  const { label } = props;
+
+  const [visible, setVisible] = useState(true);
+
+  const handleShowChip = () => setVisible(true);
+  const handleDismissChip = () => setVisible(false);
+
+  return (
+    <div style={TAG_FILTER_DEFAULT_STYLES as React.CSSProperties}>
+      <div>
+        <StyledButton
+          disabled={visible}
+          onClick={handleShowChip}
+          sdsStyle="minimal"
+          sdsType={visible ? "secondary" : "primary"}
+        >
+          {visible
+            ? "Delete the tag by clicking on its icon"
+            : "Click to reset"}
+        </StyledButton>
+      </div>
+
+      <div>
+        {visible && (
+          <RawTagFilter label={label} onDelete={handleDismissChip} {...props} />
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/TagFilter/__storybook__/stories/livePreview.tsx b/packages/components/src/core/TagFilter/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..e0e8aecf6
--- /dev/null
+++ b/packages/components/src/core/TagFilter/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,8 @@
+import { Args } from "@storybook/react";
+import RawTagFilter from "src/core/TagFilter";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  const { label } = props;
+
+  return <RawTagFilter label={label} onDelete={() => {}} {...props} />;
+};
diff --git a/packages/components/src/core/TagFilter/__storybook__/stories/screenshot.tsx b/packages/components/src/core/TagFilter/__storybook__/stories/screenshot.tsx
new file mode 100644
index 000000000..be48806e7
--- /dev/null
+++ b/packages/components/src/core/TagFilter/__storybook__/stories/screenshot.tsx
@@ -0,0 +1,31 @@
+import { Args } from "@storybook/react";
+import { Fragment } from "react";
+import RawTagFilter from "src/core/TagFilter";
+import { TAG_FILTER_LABEL_STYLE, TAG_FILTER_PSEUDO_STATES } from "../constants";
+
+export const ScreenshotTestDemo = (props: Args): JSX.Element => {
+  const { label } = props;
+
+  // loop through all TAG_FILTER_PSEUDO_STATES + create headers for TAG_FILTER_PSEUDO_STATES
+  return (
+    <>
+      {TAG_FILTER_PSEUDO_STATES.map((state) => {
+        return (
+          <Fragment key={state}>
+            <p style={TAG_FILTER_LABEL_STYLE}>
+              State: <b>{state}</b>
+            </p>
+            <RawTagFilter
+              data-testid="button"
+              label={label}
+              onDelete={() => {}}
+              className={`pseudo-${state}`}
+              key={state}
+              {...props}
+            />
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};
diff --git a/packages/components/src/core/TagFilter/__storybook__/stories/test.tsx b/packages/components/src/core/TagFilter/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..449ee595e
--- /dev/null
+++ b/packages/components/src/core/TagFilter/__storybook__/stories/test.tsx
@@ -0,0 +1,15 @@
+import { Args } from "@storybook/react";
+import RawTagFilter from "src/core/TagFilter";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  const { label } = props;
+
+  return (
+    <RawTagFilter
+      data-testid="tag-filter"
+      label={label}
+      onDelete={() => {}}
+      {...props}
+    />
+  );
+};
diff --git a/packages/components/src/core/TagFilter/__storybook__/style.ts b/packages/components/src/core/TagFilter/__storybook__/style.ts
new file mode 100644
index 000000000..c027739d4
--- /dev/null
+++ b/packages/components/src/core/TagFilter/__storybook__/style.ts
@@ -0,0 +1,8 @@
+import { styled } from "@mui/material";
+import Button from "src/core/Button";
+
+export const StyledButton = styled(Button)`
+  &:focus {
+    outline: none;
+  }
+`;
diff --git a/packages/components/src/core/TagFilter/TagFilter.namespace-test.tsx b/packages/components/src/core/TagFilter/__tests__/TagFilter.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/TagFilter/TagFilter.namespace-test.tsx
rename to packages/components/src/core/TagFilter/__tests__/TagFilter.namespace-test.tsx
diff --git a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..15c6a38eb
--- /dev/null
+++ b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TagFilter /> Default story renders snapshot 1`] = `
+<div
+  style="display: inline-grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);"
+>
+  <div>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-fznnno-MuiButtonBase-root-MuiButton-root"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      Delete the tag by clicking on its icon
+    </button>
+  </div>
+  <div>
+    <div
+      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-18fqwks-MuiButtonBase-root-MuiChip-root"
+      role="none presentation"
+      tabindex="0"
+    >
+      <span
+        class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+      >
+        TagFilter
+      </span>
+      <button
+        aria-label="Delete Tag"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-1wnv1p6-MuiButtonBase-root-MuiIconButton-root"
+        icon="XMark"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="css-1ft6wgl"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+            data-file-name="IconXMarkSmall"
+            data-testid="IconXMarkSmall"
+            fillcontrast="white"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          />
+        </div>
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/components/src/core/TagFilter/index.test.tsx b/packages/components/src/core/TagFilter/__tests__/index.test.tsx
similarity index 88%
rename from packages/components/src/core/TagFilter/index.test.tsx
rename to packages/components/src/core/TagFilter/__tests__/index.test.tsx
index f550c5105..b2e5a1d17 100644
--- a/packages/components/src/core/TagFilter/index.test.tsx
+++ b/packages/components/src/core/TagFilter/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 const { Test } = composeStories(stories);
 
diff --git a/packages/components/src/core/TagFilter/index.stories.tsx b/packages/components/src/core/TagFilter/index.stories.tsx
deleted file mode 100644
index f3751d6f6..000000000
--- a/packages/components/src/core/TagFilter/index.stories.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import { styled } from "@mui/material/styles";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import Button from "../Button";
-import RawTagFilter from "./index";
-
-const StyledButton = styled(Button)`
-  &:focus {
-    outline: none;
-  }
-`;
-
-const TagFilter = (props: Args): JSX.Element => {
-  const { label } = props;
-
-  const [visible, setVisible] = React.useState(true);
-
-  const handleShowChip = () => setVisible(true);
-  const handleDismissChip = () => setVisible(false);
-
-  const PreviewStyles = {
-    display: "inline-grid",
-    gridColumnGap: 24,
-    gridRowGap: 24,
-    gridTemplateColumns: "repeat(1, 1fr)",
-    gridTemplateRows: "repeat(1, 1fr)",
-  };
-
-  return (
-    <div style={PreviewStyles as React.CSSProperties}>
-      <div style={{ gridArea: "1 / 1 / 1 / 2" }}>
-        <StyledButton
-          disabled={visible}
-          onClick={handleShowChip}
-          sdsStyle="minimal"
-          sdsType={visible ? "secondary" : "primary"}
-        >
-          {visible
-            ? "Delete the tag by clicking on its icon"
-            : "Click to reset"}
-        </StyledButton>
-      </div>
-
-      <div style={{ gridArea: "2 / 1 / 2 / 2" }}>
-        {visible && (
-          <RawTagFilter label={label} onDelete={handleDismissChip} {...props} />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default {
-  argTypes: {
-    label: {
-      control: { type: "text" },
-      required: true,
-    },
-  },
-  component: TagFilter,
-  title: "TagFilter",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    label: "TagFilter",
-  },
-};
-
-// Live Preview
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  const { label } = props;
-
-  return <RawTagFilter label={label} onDelete={() => {}} {...props} />;
-};
-
-export const LivePreview = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Screenshot Test
-const ScreenshotTestDemo = (props: Args): JSX.Element => {
-  const PSEUDO_STATES = ["default", "hover", "active", "focus"];
-  const { label } = props;
-  const LABEL_STYLE: React.CSSProperties = {
-    fontFamily: "sans-serif",
-    fontSize: "0.67em",
-    fontWeight: "normal",
-    margin: "20px 0 10px",
-  };
-
-  // loop through all PSEUDO_STATES + create headers for PSEUDO_STATES
-  return (
-    <>
-      {PSEUDO_STATES.map((state) => {
-        return (
-          <>
-            <p style={LABEL_STYLE}>
-              State: <b>{state}</b>
-            </p>
-            <RawTagFilter
-              data-testid="button"
-              label={label}
-              onDelete={() => {}}
-              className={`pseudo-${state}`}
-              key={state}
-              {...props}
-            />
-          </>
-        );
-      })}
-    </>
-  );
-};
-
-export const ScreenshotTest = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    controls: {
-      exclude: ["label"],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <ScreenshotTestDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  const { label } = props;
-
-  return (
-    <RawTagFilter
-      data-testid="tag-filter"
-      label={label}
-      onDelete={() => {}}
-      {...props}
-    />
-  );
-};
-
-export const Test = {
-  args: {
-    label: "Label",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} data-testid="tag-filter" />,
-};
diff --git a/packages/components/src/core/TagFilter/index.tsx b/packages/components/src/core/TagFilter/index.tsx
index 8efc3dc5b..b6bcff7ec 100644
--- a/packages/components/src/core/TagFilter/index.tsx
+++ b/packages/components/src/core/TagFilter/index.tsx
@@ -1,7 +1,7 @@
-import { Clear } from "@mui/icons-material";
 import { ChipProps } from "@mui/material";
 import React from "react";
 import { StyledTag } from "./style";
+import ButtonIcon from "../ButtonIcon";
 
 export interface SdsTagFilterProps
   extends Omit<ChipProps, "color" | "variant"> {
@@ -17,7 +17,21 @@ export type TagFilterProps = SdsTagFilterProps;
  */
 
 const TagFilter = (props: SdsTagFilterProps): JSX.Element => {
-  return <StyledTag deleteIcon={<Clear />} {...props} />;
+  return (
+    <StyledTag
+      role="none presentation"
+      {...props}
+      deleteIcon={
+        <ButtonIcon
+          aria-label="Delete Tag"
+          icon="XMark"
+          sdsSize="small"
+          sdsType="tertiary"
+        />
+      }
+      color="info"
+    />
+  );
 };
 
 export default TagFilter;
diff --git a/packages/components/src/core/TagFilter/style.ts b/packages/components/src/core/TagFilter/style.ts
index 372eb68c2..1795fa1e7 100644
--- a/packages/components/src/core/TagFilter/style.ts
+++ b/packages/components/src/core/TagFilter/style.ts
@@ -1,8 +1,13 @@
 import { css } from "@emotion/react";
 import { styled } from "@mui/material/styles";
 import React from "react";
-import { CommonThemeProps, fontHeaderXs, getSpaces } from "../styles";
-import Tag from "../Tag";
+import {
+  CommonThemeProps,
+  fontHeaderXs,
+  getIconSizes,
+  getSpaces,
+} from "src/core/styles";
+import Tag from "src/core/Tag";
 
 export interface TagFilterExtraProps extends CommonThemeProps {
   label: string;
@@ -12,10 +17,11 @@ export interface TagFilterExtraProps extends CommonThemeProps {
 
 export const StyledTag = styled(Tag)`
   ${(props: TagFilterExtraProps) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
+    const iconSizes = getIconSizes(props);
 
     return css`
-      padding: ${spacings?.xxs}px ${spacings?.s}px;
+      padding: ${spaces?.xxs}px ${spaces?.s}px;
 
       &:after {
         display: none;
@@ -27,7 +33,9 @@ export const StyledTag = styled(Tag)`
 
       .MuiChip-deleteIcon,
       .MuiSvgIcon-root {
-        margin-left: ${spacings?.s}px;
+        margin-left: ${spaces?.s}px;
+        width: ${iconSizes?.xs?.width}px !important;
+        height: ${iconSizes?.xs?.height}px !important;
       }
 
       .MuiChip-label,
diff --git a/packages/components/src/core/Tooltip/__storybook__/constants.ts b/packages/components/src/core/Tooltip/__storybook__/constants.ts
new file mode 100644
index 000000000..708a298c8
--- /dev/null
+++ b/packages/components/src/core/Tooltip/__storybook__/constants.ts
@@ -0,0 +1,50 @@
+import { TooltipExtraProps } from "../style";
+
+export const TOOLTIP_EXCLUDED_CONTROLS = [
+  "arrow",
+  "arrowOffset",
+  "placement",
+  "sdsStyle",
+  "title",
+  "width",
+];
+
+export const TOOLTIP_LIVE_PREVIEW_STYLES = {
+  alignSelf: "self-start",
+  display: "grid",
+  gridColumnGap: "80px",
+  gridTemplateColumns: "repeat(3, 130px)",
+  paddingTop: "80px",
+};
+
+export const TOOLTIP_PLACEMENT_STYLES = {
+  display: "grid",
+  gridColumnGap: "50px",
+  gridRowGap: "50px",
+  gridTemplateColumns: "repeat(3, 130px",
+  gridTemplateRows: "repeat(5, 60px)",
+  justifyContent: "center",
+  padding: "100px",
+};
+
+export const TOOLTIP_SDS_STYLES = ["light", "dark"];
+export const TOOLTIP_SUBTITLE_OPTIONS = [
+  "Lorem ipsum dolor sit amet",
+  undefined,
+];
+export const TOOLTIP_ARROW_OPTIONS = [false, true];
+export const TOOLTIP_ARROW_OFFSET_OPTIONS = [undefined, -120, -60, 0, 60, 120];
+export const TOOLTIP_WIDTH_OPTIONS: TooltipExtraProps["width"][] = [
+  "default",
+  "wide",
+];
+
+export const TOOLTIP_DISPLAY_CONTENTS: React.CSSProperties = {
+  display: "contents",
+};
+export const TOOLTIP_MID_LABEL: React.CSSProperties = {
+  borderStyle: "solid none none none",
+  gridColumn: "1 / 3",
+  justifySelf: "stretch",
+  paddingTop: 10,
+};
diff --git a/packages/components/src/core/Tooltip/__storybook__/index.stories.tsx b/packages/components/src/core/Tooltip/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..4deebbe0e
--- /dev/null
+++ b/packages/components/src/core/Tooltip/__storybook__/index.stories.tsx
@@ -0,0 +1,121 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { Tooltip } from "./stories/default";
+import { TOOLTIP_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { PlacementDemo } from "./stories/placementDemo";
+import { ScreenshotTestDemo } from "./stories/screenshot";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    arrowOffset: {
+      control: { type: "number" },
+    },
+    placement: {
+      control: { type: "select" },
+      options: [
+        "bottom-start",
+        "bottom",
+        "bottom-end",
+        "left-start",
+        "left",
+        "left-end",
+        "right-start",
+        "right",
+        "right-end",
+        "top-start",
+        "top",
+        "top-end",
+      ],
+    },
+    sdsStyle: {
+      control: { type: "radio" },
+      options: ["dark", "light"],
+    },
+    title: {
+      control: { type: "text" },
+    },
+    width: {
+      control: { type: "radio" },
+      options: ["default", "wide"],
+    },
+  },
+  component: Tooltip,
+  parameters: {
+    badges: [BADGE.STABLE],
+    // delay allows for font to load and prevents chromatic from constantly creating new baselines
+    chromatic: { delay: 5000 },
+  },
+  title: "Components/Tooltip",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    placement: "top",
+    sdsStyle: "dark",
+    subtitle: "dolor sit amet",
+    title: "Lorem ipsum",
+    width: "default",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: TOOLTIP_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Placement Demo
+
+export const PlacementPreview = {
+  parameters: {
+    controls: {
+      exclude: TOOLTIP_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <PlacementDemo {...args} />,
+};
+
+// Screenshot Test
+
+export const ScreenshotTest = {
+  parameters: {
+    controls: {
+      exclude: TOOLTIP_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <ScreenshotTestDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: TOOLTIP_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => (
+    <TestDemo title="test" {...args} data-testid="tooltip" />
+  ),
+};
diff --git a/packages/components/src/core/Tooltip/__storybook__/stories/default.tsx b/packages/components/src/core/Tooltip/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..791cb78f4
--- /dev/null
+++ b/packages/components/src/core/Tooltip/__storybook__/stories/default.tsx
@@ -0,0 +1,26 @@
+import { InfoOutlined } from "@mui/icons-material";
+import { Args } from "@storybook/react";
+import RawTooltip from "src/core/Tooltip";
+
+export const Tooltip = (props: Args): JSX.Element => {
+  const { title } = props;
+  return (
+    <div>
+      Hover over the info icon to view the tooltip.
+      <p>
+        ArrowOffset changes the position of the tooltip arrow and can be any
+        numeric value within [-120, 120]. Any value value over the width of the
+        tooltip will remove the arrow from the tooltip.
+      </p>
+      <div
+        style={{
+          margin: "135px 300px",
+        }}
+      >
+        <RawTooltip title={title} {...props}>
+          <InfoOutlined />
+        </RawTooltip>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/Tooltip/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Tooltip/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..cdfb62dd2
--- /dev/null
+++ b/packages/components/src/core/Tooltip/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,36 @@
+import ButtonIcon from "src/core/ButtonIcon";
+import { TOOLTIP_LIVE_PREVIEW_STYLES } from "../constants";
+import RawTooltip from "src/core/Tooltip";
+import Button from "src/core/Button";
+import { EXTRA_SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+
+export const LivePreviewDemo = (): JSX.Element => {
+  return (
+    <div style={TOOLTIP_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      <RawTooltip
+        title="Label lorem"
+        sdsStyle="dark"
+        placement="top"
+        arrow
+        open
+      >
+        <ButtonIcon
+          sdsType="secondary"
+          sdsSize="large"
+          icon="InfoSpeechBubble"
+        />
+      </RawTooltip>
+      <RawTooltip
+        title={EXTRA_SHORT_LOREM_IPSUM}
+        sdsStyle="light"
+        placement="top"
+        arrow
+        open
+      >
+        <Button sdsType="primary" sdsStyle="rounded">
+          Label
+        </Button>
+      </RawTooltip>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/Tooltip/__storybook__/stories/placementDemo.tsx b/packages/components/src/core/Tooltip/__storybook__/stories/placementDemo.tsx
new file mode 100644
index 000000000..a208c1829
--- /dev/null
+++ b/packages/components/src/core/Tooltip/__storybook__/stories/placementDemo.tsx
@@ -0,0 +1,73 @@
+import { TOOLTIP_PLACEMENT_STYLES } from "../constants";
+import RawTooltip from "src/core/Tooltip";
+import Button from "src/core/Button";
+
+export const PlacementDemo = (): JSX.Element => {
+  return (
+    <div style={TOOLTIP_PLACEMENT_STYLES as React.CSSProperties}>
+      <RawTooltip title="Text" placement="top-start" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          top-start
+        </Button>
+      </RawTooltip>
+      <RawTooltip title="Text" placement="top" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          top
+        </Button>
+      </RawTooltip>
+      <RawTooltip title="Text" placement="top-end" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          top-end
+        </Button>
+      </RawTooltip>
+      <RawTooltip title="Text" placement="left-start" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          left-start
+        </Button>
+      </RawTooltip>
+      <div />
+      <RawTooltip title="Text" placement="right-start" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          right-start
+        </Button>
+      </RawTooltip>
+      <RawTooltip title="Text" placement="left" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          left
+        </Button>
+      </RawTooltip>
+      <div />
+      <RawTooltip title="Text" placement="right" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          right
+        </Button>
+      </RawTooltip>
+      <RawTooltip title="Text" placement="left-end" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          left-end
+        </Button>
+      </RawTooltip>
+      <div />
+      <RawTooltip title="Text" placement="right-end" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          right-end
+        </Button>
+      </RawTooltip>
+      <RawTooltip title="Text" placement="bottom-start" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          bottom-start
+        </Button>
+      </RawTooltip>
+      <RawTooltip title="Text" placement="bottom" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          bottom
+        </Button>
+      </RawTooltip>
+      <RawTooltip title="Text" placement="bottom-end" arrow open>
+        <Button sdsStyle="minimal" sdsType="secondary">
+          bottom-end
+        </Button>
+      </RawTooltip>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/Tooltip/__storybook__/stories/screenshot.tsx b/packages/components/src/core/Tooltip/__storybook__/stories/screenshot.tsx
new file mode 100644
index 000000000..f4472cd5d
--- /dev/null
+++ b/packages/components/src/core/Tooltip/__storybook__/stories/screenshot.tsx
@@ -0,0 +1,211 @@
+import { InfoOutlined } from "@mui/icons-material";
+import {
+  TOOLTIP_MID_LABEL,
+  TOOLTIP_ARROW_OFFSET_OPTIONS,
+  TOOLTIP_ARROW_OPTIONS,
+  TOOLTIP_DISPLAY_CONTENTS,
+  TOOLTIP_SDS_STYLES,
+  TOOLTIP_SUBTITLE_OPTIONS,
+  TOOLTIP_WIDTH_OPTIONS,
+} from "../constants";
+import RawTooltip from "src/core/Tooltip";
+
+export const ScreenshotTestDemo = (): JSX.Element => {
+  // loop through all SDS_STYLES
+  return (
+    <>
+      {TOOLTIP_SDS_STYLES.map((sdsStyle) => {
+        return <TooltipStyle sdsStyle={sdsStyle} key={sdsStyle} />;
+      })}
+    </>
+  );
+
+  // loop through all ARROW_OPTIONS + create headers for SDS_STYLES
+  function TooltipStyle({
+    sdsStyle,
+  }: {
+    sdsStyle: (typeof TOOLTIP_SDS_STYLES)[number];
+  }) {
+    const LEVEL_STYLE: React.CSSProperties = {
+      columnGap: "25px",
+      display: "inline-grid",
+      fontFamily: "sans-serif",
+      marginLeft: "50px",
+    };
+    const LABEL_STYLE: React.CSSProperties = {
+      fontSize: "2em",
+      gridColumn: "1 / 3",
+      marginBottom: 0,
+    };
+    return (
+      <div style={LEVEL_STYLE}>
+        <p style={LABEL_STYLE}>
+          Style: <b>{sdsStyle}</b>
+        </p>
+        {TOOLTIP_ARROW_OPTIONS.map((arrow) => {
+          return (
+            <TooltipArrow
+              sdsStyle={sdsStyle}
+              arrow={arrow}
+              key={String(arrow)}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all ARROW_OFFSET_OPTIONS + create headers for ARROW_OPTIONS
+  function TooltipArrow({
+    sdsStyle,
+    arrow,
+  }: {
+    sdsStyle: (typeof TOOLTIP_SDS_STYLES)[number];
+    arrow: (typeof TOOLTIP_ARROW_OPTIONS)[number];
+  }) {
+    const LABEL_STYLE: React.CSSProperties = {
+      ...TOOLTIP_MID_LABEL,
+      borderWidth: "5px",
+      fontSize: "1.5em",
+      margin: "20px 0 0 0",
+    };
+    return (
+      <div style={TOOLTIP_DISPLAY_CONTENTS}>
+        <p style={LABEL_STYLE}>
+          Arrow: <b>{arrow ? "true" : "false"}</b>
+        </p>
+        {TOOLTIP_ARROW_OFFSET_OPTIONS.map((arrowOffset) => {
+          return (
+            // arrowOffset is a dependency of arrow, so should only render if arrow is true
+            ((arrow === true && arrowOffset !== undefined) ||
+              (arrow === false && arrowOffset === undefined)) && (
+              <TooltipArrowOffset
+                sdsStyle={sdsStyle}
+                arrow={arrow}
+                arrowOffset={arrowOffset}
+                key={String(arrowOffset)}
+              />
+            )
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all SUBTITLE_OPTIONS + create headers for ARROW_OFFSET_OPTIONS
+  function TooltipArrowOffset({
+    sdsStyle,
+    arrow,
+    arrowOffset,
+  }: {
+    sdsStyle: (typeof TOOLTIP_SDS_STYLES)[number];
+    arrow: (typeof TOOLTIP_ARROW_OPTIONS)[number];
+    arrowOffset: (typeof TOOLTIP_ARROW_OFFSET_OPTIONS)[number];
+  }) {
+    const LABEL_STYLE: React.CSSProperties = {
+      ...TOOLTIP_MID_LABEL,
+      borderWidth: "2px",
+      fontSize: "1.17em",
+      margin: "20px 0",
+    };
+    return (
+      <div style={TOOLTIP_DISPLAY_CONTENTS}>
+        {/* arrowOffset is a dependency of arrow, so should only render if arrow is true */}
+        {arrow === true && (
+          <p style={LABEL_STYLE}>
+            Arrow offset: <b>{arrowOffset}</b>
+          </p>
+        )}
+        {TOOLTIP_SUBTITLE_OPTIONS.map((subtitle) => {
+          return (
+            // subtitle is only allowed for dark style
+            (sdsStyle === "dark" ||
+              (sdsStyle === "light" && subtitle === undefined)) && (
+              <TooltipSubtitle
+                sdsStyle={sdsStyle}
+                arrow={arrow}
+                arrowOffset={arrowOffset}
+                subtitle={subtitle}
+                key={String(subtitle)}
+              />
+            )
+          );
+        })}
+      </div>
+    );
+  }
+
+  // loop through all WIDTH_OPTIONS + create headers for SUBTITLE_OPTIONS, WIDTH_OPTIONS
+  function TooltipSubtitle({
+    sdsStyle,
+    arrow,
+    arrowOffset,
+    subtitle,
+  }: {
+    sdsStyle: (typeof TOOLTIP_SDS_STYLES)[number];
+    arrow: (typeof TOOLTIP_ARROW_OPTIONS)[number];
+    arrowOffset: (typeof TOOLTIP_ARROW_OFFSET_OPTIONS)[number];
+    subtitle: (typeof TOOLTIP_SUBTITLE_OPTIONS)[number];
+  }) {
+    const WIDTH_LEVEL: React.CSSProperties = {
+      display: "contents",
+    };
+    const LABEL_STYLE: React.CSSProperties = {
+      fontSize: "0.67em",
+      margin: "10px 0",
+    };
+    const DEFAULT_WIDTH_STYLE: React.CSSProperties = {
+      margin: "0 125px 100px",
+    };
+    const WIDE_WIDTH_STYLE: React.CSSProperties = {
+      margin: "0 275px 100px",
+    };
+    return (
+      // assign specific styles to light-style Tooltip only, since it's the only one that has width options and needs special style-accommodations
+      <div style={sdsStyle === "light" ? WIDTH_LEVEL : undefined}>
+        {/* Show "Subtitle" label for dark-style Tooltip only */}
+        {sdsStyle === "dark" && (
+          <p style={LABEL_STYLE}>
+            Subtitle: <b>{subtitle ? "yes" : "no"}</b>
+          </p>
+        )}
+        {TOOLTIP_WIDTH_OPTIONS.map((width) => {
+          return (
+            // exclude "wide" width option for dark-style Tooltip
+            (sdsStyle === "light" ||
+              (sdsStyle === "dark" && width === "default")) && (
+              <div key={String(sdsStyle) + String(width)}>
+                <>
+                  {/* Show "Width" label for light-style Tooltip only */}
+                  {sdsStyle === "light" && (
+                    <p style={LABEL_STYLE}>
+                      Width: <b>{width}</b>
+                    </p>
+                  )}
+                  <RawTooltip
+                    // assign special styles depending on width option
+                    style={
+                      width === "default"
+                        ? DEFAULT_WIDTH_STYLE
+                        : WIDE_WIDTH_STYLE
+                    }
+                    title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut et labore dolore"
+                    sdsStyle={sdsStyle}
+                    subtitle={subtitle}
+                    arrow={arrow}
+                    arrowOffset={arrowOffset}
+                    width={width}
+                    key={String(width)}
+                    open
+                  >
+                    <InfoOutlined />
+                  </RawTooltip>
+                </>
+              </div>
+            )
+          );
+        })}
+      </div>
+    );
+  }
+};
diff --git a/packages/components/src/core/Tooltip/__storybook__/stories/test.tsx b/packages/components/src/core/Tooltip/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..579a70ac6
--- /dev/null
+++ b/packages/components/src/core/Tooltip/__storybook__/stories/test.tsx
@@ -0,0 +1,13 @@
+import { Args } from "@storybook/react";
+import RawTooltip from "src/core/Tooltip";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  const { title, ...rest } = props;
+  return (
+    <RawTooltip title={title} {...rest} data-testid="tooltip">
+      <div style={{ display: "inline-block" }}>
+        I am a tooltip child element.
+      </div>
+    </RawTooltip>
+  );
+};
diff --git a/packages/components/src/core/Tooltip/Tooltip.namespace-test.tsx b/packages/components/src/core/Tooltip/__tests__/Tooltip.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/Tooltip/Tooltip.namespace-test.tsx
rename to packages/components/src/core/Tooltip/__tests__/Tooltip.namespace-test.tsx
diff --git a/packages/components/src/core/Tooltip/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
similarity index 88%
rename from packages/components/src/core/Tooltip/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
index 800ede382..592fac845 100644
--- a/packages/components/src/core/Tooltip/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<Tooltip /> Default story renders snapshot 1`] = `
       viewBox="0 0 24 24"
     >
       <path
-        d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
       />
     </svg>
   </div>
diff --git a/packages/components/src/core/Tooltip/index.test.tsx b/packages/components/src/core/Tooltip/__tests__/index.test.tsx
similarity index 94%
rename from packages/components/src/core/Tooltip/index.test.tsx
rename to packages/components/src/core/Tooltip/__tests__/index.test.tsx
index 2f6883818..6a5731f5a 100644
--- a/packages/components/src/core/Tooltip/index.test.tsx
+++ b/packages/components/src/core/Tooltip/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
@@ -23,7 +23,7 @@ describe("<Tooltip />", () => {
 
   it("renders children even when it does not render a tooltip", () => {
     render(<Test {...Test.args} title="" />);
-    const child = screen.getByText("I am a tooltip child element");
+    const child = screen.getByText("I am a tooltip child element.");
     expect(child).not.toBeNull();
   });
 });
diff --git a/packages/components/src/core/Tooltip/index.stories.tsx b/packages/components/src/core/Tooltip/index.stories.tsx
deleted file mode 100644
index 8122b23e6..000000000
--- a/packages/components/src/core/Tooltip/index.stories.tsx
+++ /dev/null
@@ -1,488 +0,0 @@
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import Button from "../Button";
-import ButtonIcon from "../ButtonIcon";
-import RawTooltip from "./index";
-import { TooltipExtraProps } from "./style";
-
-const Tooltip = (props: Args): JSX.Element => {
-  const { title } = props;
-  return (
-    <div>
-      Hover over the info icon to view the tooltip.
-      <p>
-        ArrowOffset changes the position of the tooltip arrow and can be any
-        numeric value within [-120, 120]. Any value value over the width of the
-        tooltip will remove the arrow from the tooltip.
-      </p>
-      <div
-        style={{
-          margin: "135px 300px",
-        }}
-      >
-        <RawTooltip title={title} {...props}>
-          <InfoOutlinedIcon />
-        </RawTooltip>
-      </div>
-    </div>
-  );
-};
-
-export default {
-  argTypes: {
-    arrow: {
-      control: { type: "boolean" },
-    },
-    arrowOffset: {
-      control: { type: "number" },
-    },
-    placement: {
-      control: { type: "select" },
-      options: [
-        "bottom-start",
-        "bottom",
-        "bottom-end",
-        "left-start",
-        "left",
-        "left-end",
-        "right-start",
-        "right",
-        "right-end",
-        "top-start",
-        "top",
-        "top-end",
-      ],
-    },
-    sdsStyle: {
-      control: { type: "radio" },
-      options: ["dark", "light"],
-    },
-    title: {
-      control: { type: "text" },
-    },
-    width: {
-      control: { type: "radio" },
-      options: ["default", "wide"],
-    },
-  },
-  component: Tooltip,
-  parameters: {
-    // delay allows for font to load and prevents chromatic from constantly creating new baselines
-    chromatic: { delay: 5000 },
-  },
-  title: "Tooltip",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    arrow: true,
-    placement: "top",
-    sdsStyle: "dark",
-    subtitle: "dolor sit amet",
-    title: "Lorem ipsum",
-    width: "default",
-  },
-};
-
-// Live Preview
-
-const LivePreviewDemo = (): JSX.Element => {
-  const livePreviewStyles = {
-    alignSelf: "self-start",
-    display: "grid",
-    gridColumnGap: "80px",
-    gridTemplateColumns: "repeat(3, 130px)",
-    paddingTop: "80px",
-  };
-
-  return (
-    <div style={livePreviewStyles as React.CSSProperties}>
-      <RawTooltip
-        title="Label lorem"
-        sdsStyle="dark"
-        placement="top"
-        arrow
-        open
-      >
-        <ButtonIcon
-          sdsType="secondary"
-          sdsSize="large"
-          icon="infoSpeechBubble"
-        />
-      </RawTooltip>
-      <RawTooltip
-        title="Label lorem ipsum tellus ac cursus commodo, tortor mauris."
-        sdsStyle="light"
-        placement="top"
-        arrow
-        open
-      >
-        <Button sdsType="primary" sdsStyle="rounded">
-          Label
-        </Button>
-      </RawTooltip>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: () => <LivePreviewDemo />,
-};
-
-// Placement Demo
-
-const PlacementDemo = (): JSX.Element => {
-  const placementStyles = {
-    display: "grid",
-    gridColumnGap: "50px",
-    gridRowGap: "50px",
-    gridTemplateColumns: "repeat(3, 130px",
-    gridTemplateRows: "repeat(5, 60px)",
-    justifyContent: "center",
-    padding: "100px",
-  };
-
-  return (
-    <div style={placementStyles as React.CSSProperties}>
-      <RawTooltip title="Text" placement="top-start" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          top-start
-        </Button>
-      </RawTooltip>
-      <RawTooltip title="Text" placement="top" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          top
-        </Button>
-      </RawTooltip>
-      <RawTooltip title="Text" placement="top-end" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          top-end
-        </Button>
-      </RawTooltip>
-      <RawTooltip title="Text" placement="left-start" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          left-start
-        </Button>
-      </RawTooltip>
-      <div />
-      <RawTooltip title="Text" placement="right-start" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          right-start
-        </Button>
-      </RawTooltip>
-      <RawTooltip title="Text" placement="left" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          left
-        </Button>
-      </RawTooltip>
-      <div />
-      <RawTooltip title="Text" placement="right" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          right
-        </Button>
-      </RawTooltip>
-      <RawTooltip title="Text" placement="left-end" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          left-end
-        </Button>
-      </RawTooltip>
-      <div />
-      <RawTooltip title="Text" placement="right-end" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          right-end
-        </Button>
-      </RawTooltip>
-      <RawTooltip title="Text" placement="bottom-start" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          bottom-start
-        </Button>
-      </RawTooltip>
-      <RawTooltip title="Text" placement="bottom" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          bottom
-        </Button>
-      </RawTooltip>
-      <RawTooltip title="Text" placement="bottom-end" arrow open>
-        <Button sdsStyle="minimal" sdsType="secondary">
-          bottom-end
-        </Button>
-      </RawTooltip>
-    </div>
-  );
-};
-
-export const PlacementPreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: () => <PlacementDemo />,
-};
-
-// Screenshot Test
-
-const ScreenshotTestDemo = (): JSX.Element => {
-  const SDS_STYLES = ["light", "dark"];
-  const SUBTITLE_OPTIONS = ["Lorem ipsum dolor sit amet", undefined];
-  const ARROW_OPTIONS = [false, true];
-  const ARROW_OFFSET_OPTIONS = [undefined, -120, -60, 0, 60, 120];
-  const WIDTH_OPTIONS: TooltipExtraProps["width"][] = ["default", "wide"];
-
-  const DISPLAY_CONTENTS: React.CSSProperties = {
-    display: "contents",
-  };
-  const MID_LABEL: React.CSSProperties = {
-    borderStyle: "solid none none none",
-    gridColumn: "1 / 3",
-    justifySelf: "stretch",
-    paddingTop: 10,
-  };
-
-  // loop through all SDS_STYLES
-  return (
-    <>
-      {SDS_STYLES.map((sdsStyle) => {
-        return <TooltipStyle sdsStyle={sdsStyle} key={sdsStyle} />;
-      })}
-    </>
-  );
-
-  // loop through all ARROW_OPTIONS + create headers for SDS_STYLES
-  function TooltipStyle({
-    sdsStyle,
-  }: {
-    sdsStyle: (typeof SDS_STYLES)[number];
-  }) {
-    const LEVEL_STYLE: React.CSSProperties = {
-      columnGap: "25px",
-      display: "inline-grid",
-      fontFamily: "sans-serif",
-      marginLeft: "50px",
-    };
-    const LABEL_STYLE: React.CSSProperties = {
-      fontSize: "2em",
-      gridColumn: "1 / 3",
-      marginBottom: 0,
-    };
-    return (
-      <div style={LEVEL_STYLE}>
-        <p style={LABEL_STYLE}>
-          Style: <b>{sdsStyle}</b>
-        </p>
-        {ARROW_OPTIONS.map((arrow) => {
-          return (
-            <TooltipArrow
-              sdsStyle={sdsStyle}
-              arrow={arrow}
-              key={String(arrow)}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-
-  // loop through all ARROW_OFFSET_OPTIONS + create headers for ARROW_OPTIONS
-  function TooltipArrow({
-    sdsStyle,
-    arrow,
-  }: {
-    sdsStyle: (typeof SDS_STYLES)[number];
-    arrow: (typeof ARROW_OPTIONS)[number];
-  }) {
-    const LABEL_STYLE: React.CSSProperties = {
-      ...MID_LABEL,
-      borderWidth: "5px",
-      fontSize: "1.5em",
-      margin: "20px 0 0 0",
-    };
-    return (
-      <div style={DISPLAY_CONTENTS}>
-        <p style={LABEL_STYLE}>
-          Arrow: <b>{arrow ? "true" : "false"}</b>
-        </p>
-        {ARROW_OFFSET_OPTIONS.map((arrowOffset) => {
-          return (
-            // arrowOffset is a dependency of arrow, so should only render if arrow is true
-            ((arrow === true && arrowOffset !== undefined) ||
-              (arrow === false && arrowOffset === undefined)) && (
-              <TooltipArrowOffset
-                sdsStyle={sdsStyle}
-                arrow={arrow}
-                arrowOffset={arrowOffset}
-                key={String(arrowOffset)}
-              />
-            )
-          );
-        })}
-      </div>
-    );
-  }
-
-  // loop through all SUBTITLE_OPTIONS + create headers for ARROW_OFFSET_OPTIONS
-  function TooltipArrowOffset({
-    sdsStyle,
-    arrow,
-    arrowOffset,
-  }: {
-    sdsStyle: (typeof SDS_STYLES)[number];
-    arrow: (typeof ARROW_OPTIONS)[number];
-    arrowOffset: (typeof ARROW_OFFSET_OPTIONS)[number];
-  }) {
-    const LABEL_STYLE: React.CSSProperties = {
-      ...MID_LABEL,
-      borderWidth: "2px",
-      fontSize: "1.17em",
-      margin: "20px 0",
-    };
-    return (
-      <div style={DISPLAY_CONTENTS}>
-        {/* arrowOffset is a dependency of arrow, so should only render if arrow is true */}
-        {arrow === true && (
-          <p style={LABEL_STYLE}>
-            Arrow offset: <b>{arrowOffset}</b>
-          </p>
-        )}
-        {SUBTITLE_OPTIONS.map((subtitle) => {
-          return (
-            // subtitle is only allowed for dark style
-            (sdsStyle === "dark" ||
-              (sdsStyle === "light" && subtitle === undefined)) && (
-              <TooltipSubtitle
-                sdsStyle={sdsStyle}
-                arrow={arrow}
-                arrowOffset={arrowOffset}
-                subtitle={subtitle}
-                key={String(subtitle)}
-              />
-            )
-          );
-        })}
-      </div>
-    );
-  }
-
-  // loop through all WIDTH_OPTIONS + create headers for SUBTITLE_OPTIONS, WIDTH_OPTIONS
-  function TooltipSubtitle({
-    sdsStyle,
-    arrow,
-    arrowOffset,
-    subtitle,
-  }: {
-    sdsStyle: (typeof SDS_STYLES)[number];
-    arrow: (typeof ARROW_OPTIONS)[number];
-    arrowOffset: (typeof ARROW_OFFSET_OPTIONS)[number];
-    subtitle: (typeof SUBTITLE_OPTIONS)[number];
-  }) {
-    const WIDTH_LEVEL: React.CSSProperties = {
-      display: "contents",
-    };
-    const LABEL_STYLE: React.CSSProperties = {
-      fontSize: "0.67em",
-      margin: "10px 0",
-    };
-    const DEFAULT_WIDTH_STYLE: React.CSSProperties = {
-      margin: "0 125px 100px",
-    };
-    const WIDE_WIDTH_STYLE: React.CSSProperties = {
-      margin: "0 275px 100px",
-    };
-    return (
-      // assign specific styles to light-style Tooltip only, since it's the only one that has width options and needs special style-accommodations
-      <div style={sdsStyle === "light" ? WIDTH_LEVEL : undefined}>
-        {/* Show "Subtitle" label for dark-style Tooltip only */}
-        {sdsStyle === "dark" && (
-          <p style={LABEL_STYLE}>
-            Subtitle: <b>{subtitle ? "yes" : "no"}</b>
-          </p>
-        )}
-        {WIDTH_OPTIONS.map((width) => {
-          return (
-            // exclude "wide" width option for dark-style Tooltip
-            (sdsStyle === "light" ||
-              (sdsStyle === "dark" && width === "default")) && (
-              <div>
-                <>
-                  {/* Show "Width" label for light-style Tooltip only */}
-                  {sdsStyle === "light" && (
-                    <p style={LABEL_STYLE}>
-                      Width: <b>{width}</b>
-                    </p>
-                  )}
-                  <RawTooltip
-                    // assign special styles depending on width option
-                    style={
-                      width === "default"
-                        ? DEFAULT_WIDTH_STYLE
-                        : WIDE_WIDTH_STYLE
-                    }
-                    title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut et labore dolore"
-                    sdsStyle={sdsStyle}
-                    subtitle={subtitle}
-                    arrow={arrow}
-                    arrowOffset={arrowOffset}
-                    width={width}
-                    key={String(width)}
-                    open
-                  >
-                    <InfoOutlinedIcon />
-                  </RawTooltip>
-                </>
-              </div>
-            )
-          );
-        })}
-      </div>
-    );
-  }
-}; // close ScreenshotTestDemo
-
-export const ScreenshotTest = {
-  parameters: {
-    controls: {
-      exclude: [
-        "arrow",
-        "arrowOffset",
-        "placement",
-        "sdsStyle",
-        "title",
-        "width",
-      ],
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <ScreenshotTestDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  const { title, ...rest } = props;
-  return (
-    <RawTooltip title={title} {...rest} data-testid="tooltip">
-      <div>I am a tooltip child element</div>
-    </RawTooltip>
-  );
-};
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => (
-    <TestDemo title="test" {...args} data-testid="tooltip" />
-  ),
-};
diff --git a/packages/components/src/core/Tooltip/index.tsx b/packages/components/src/core/Tooltip/index.tsx
index fcffd4171..e767039db 100644
--- a/packages/components/src/core/Tooltip/index.tsx
+++ b/packages/components/src/core/Tooltip/index.tsx
@@ -104,6 +104,10 @@ const Tooltip = forwardRef(function Tooltip(
       PopperComponent={PopperComponent}
       ref={ref}
       {...rest}
+      // (masoudmanson): SDS Tooltips should always have an arrow
+      // and by setting the arrow prop to true, we ensure that
+      // the arrow is always rendered.
+      arrow={true}
     />
   );
 });
diff --git a/packages/components/src/core/Tooltip/style.ts b/packages/components/src/core/Tooltip/style.ts
index 7a7ff2b20..d5a37e5bb 100644
--- a/packages/components/src/core/Tooltip/style.ts
+++ b/packages/components/src/core/Tooltip/style.ts
@@ -4,12 +4,12 @@ import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
   fontBodyXs,
+  fontBodyXxs,
   fontHeaderXs,
-  fontHeaderXxs,
-  getColors,
+  getSemanticTextColors,
   getShadows,
   getSpaces,
-} from "../styles";
+} from "src/core/styles";
 
 export interface TooltipExtraProps extends CommonThemeProps {
   // TODO(185930): remove custom `followCursor` prop when we upgrade to MUIv5
@@ -22,7 +22,7 @@ export interface TooltipExtraProps extends CommonThemeProps {
 }
 
 const dark = (props: TooltipExtraProps): string => {
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
 
   return css`
     ${fontHeaderXs(props)}
@@ -30,12 +30,12 @@ const dark = (props: TooltipExtraProps): string => {
     color: white;
     text-align: center;
     max-width: 250px;
-    padding: ${spacings?.s}px ${spacings?.l}px;
+    padding: ${spaces?.s}px ${spaces?.l}px;
   `;
 };
 
 const light = (props: TooltipExtraProps): string => {
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
 
   return css`
     ${fontBodyXs(props)}
@@ -43,7 +43,7 @@ const light = (props: TooltipExtraProps): string => {
     color: black;
     text-align: left;
     max-width: 250px;
-    padding: ${spacings?.xs}px ${spacings?.l}px;
+    padding: ${spaces?.s}px ${spaces?.l}px;
   `;
 };
 
@@ -54,21 +54,21 @@ const wide = (): string => {
 };
 
 const tableStyles = (props: TooltipExtraProps): string => {
-  const spacings = getSpaces(props);
+  const spaces = getSpaces(props);
 
   return css`
-    padding: ${spacings?.m}px;
+    padding: ${spaces?.m}px;
   `;
 };
 
 export const Subtitle = styled("div")`
-  ${fontHeaderXxs}
+  ${fontBodyXxs}
 
   ${(props: TooltipExtraProps) => {
-    const colors = getColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return `
-      color: ${colors?.gray["400"]};
+      color: ${semanticTextColors?.base?.disabled};
     `;
   }}
 `;
@@ -108,7 +108,7 @@ export const arrowCss = (props: TooltipExtraProps): string => {
 };
 
 /*
- * (masoudmanson): !importants are needed to override arrow's
+ * (masoudmanson): !important is needed to override arrow's
  * default placement which is calculated by javascript
  */
 export const StyledPopper = styled(Popper)`
diff --git a/packages/components/src/core/TooltipCondensed/__storybook__/constants.ts b/packages/components/src/core/TooltipCondensed/__storybook__/constants.ts
new file mode 100644
index 000000000..3a4d172b1
--- /dev/null
+++ b/packages/components/src/core/TooltipCondensed/__storybook__/constants.ts
@@ -0,0 +1,10 @@
+export const TOOLTIP_CONDENSED_EXCLUDED_CONTROLS = [
+  "indicator",
+  "indicatorColor",
+  "title",
+];
+
+export const TOOLTIP_CONDENSED_LIVE_PREVIEW_STYLES = {
+  display: "grid",
+  gridTemplateColumns: "repeat(2, 80px)",
+};
diff --git a/packages/components/src/core/TooltipCondensed/__storybook__/index.stories.tsx b/packages/components/src/core/TooltipCondensed/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..5cfc8dc7a
--- /dev/null
+++ b/packages/components/src/core/TooltipCondensed/__storybook__/index.stories.tsx
@@ -0,0 +1,62 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { TooltipCondensed } from "./stories/default";
+import { TOOLTIP_CONDENSED_EXCLUDED_CONTROLS } from "./constants";
+import { LivePreviewDemo } from "./stories/livePreview";
+
+export default {
+  argTypes: {
+    indicator: {
+      control: { type: "boolean" },
+    },
+    indicatorColor: {
+      control: { type: "color" },
+    },
+  },
+  component: TooltipCondensed,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/TooltipCondensed",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    title: "Label",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: TOOLTIP_CONDENSED_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  args: {
+    title: "Test",
+  },
+  parameters: {
+    controls: {
+      exclude: TOOLTIP_CONDENSED_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => (
+    <TooltipCondensed {...args} data-testid="tooltip-condensed" />
+  ),
+};
diff --git a/packages/components/src/core/TooltipCondensed/__storybook__/stories/default.tsx b/packages/components/src/core/TooltipCondensed/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..2f9f37b8a
--- /dev/null
+++ b/packages/components/src/core/TooltipCondensed/__storybook__/stories/default.tsx
@@ -0,0 +1,21 @@
+import { InfoOutlined } from "@mui/icons-material";
+import { Args } from "@storybook/react";
+import RawTooltipCondensed from "src/core/TooltipCondensed";
+
+export const TooltipCondensed = (props: Args): JSX.Element => {
+  const { title, indicator } = props;
+  return (
+    <div>
+      Hover over the info icon to view the tooltip.
+      <div
+        style={{
+          margin: "135px 300px",
+        }}
+      >
+        <RawTooltipCondensed indicator={indicator} title={title} {...props}>
+          <InfoOutlined data-testid="tooltip-hover" />
+        </RawTooltipCondensed>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/TooltipCondensed/__storybook__/stories/livePreview.tsx b/packages/components/src/core/TooltipCondensed/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..04b04cabd
--- /dev/null
+++ b/packages/components/src/core/TooltipCondensed/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,22 @@
+import { InfoOutlined } from "@mui/icons-material";
+import { Args } from "@storybook/react";
+import RawTooltipCondensed from "src/core/TooltipCondensed";
+import { TOOLTIP_CONDENSED_LIVE_PREVIEW_STYLES } from "../constants";
+
+export function LivePreviewDemo(props: Args): JSX.Element {
+  return (
+    <div style={TOOLTIP_CONDENSED_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      <RawTooltipCondensed title="Label" {...props}>
+        <InfoOutlined />
+      </RawTooltipCondensed>
+      <RawTooltipCondensed
+        indicator
+        indicatorColor="#223F9C"
+        title="Label"
+        {...props}
+      >
+        <InfoOutlined />
+      </RawTooltipCondensed>
+    </div>
+  );
+}
diff --git a/packages/components/src/core/TooltipCondensed/TooltipCondensed.namespace-test.tsx b/packages/components/src/core/TooltipCondensed/__tests__/TooltipCondensed.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/TooltipCondensed/TooltipCondensed.namespace-test.tsx
rename to packages/components/src/core/TooltipCondensed/__tests__/TooltipCondensed.namespace-test.tsx
diff --git a/packages/components/src/core/TooltipCondensed/index.test.tsx b/packages/components/src/core/TooltipCondensed/__tests__/index.test.tsx
similarity index 92%
rename from packages/components/src/core/TooltipCondensed/index.test.tsx
rename to packages/components/src/core/TooltipCondensed/__tests__/index.test.tsx
index ced9800e4..c85b95ef3 100644
--- a/packages/components/src/core/TooltipCondensed/index.test.tsx
+++ b/packages/components/src/core/TooltipCondensed/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import { composeStories } from "@storybook/react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/TooltipCondensed/index.stories.tsx b/packages/components/src/core/TooltipCondensed/index.stories.tsx
deleted file mode 100644
index 62eb6f72e..000000000
--- a/packages/components/src/core/TooltipCondensed/index.stories.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import RawTooltipCondensed from "./index";
-
-const TooltipCondensed = (props: Args): JSX.Element => {
-  const { title, indicator } = props;
-  return (
-    <div>
-      Hover over the info icon to view the tooltip.
-      <div
-        style={{
-          margin: "135px 300px",
-        }}
-      >
-        <RawTooltipCondensed indicator={indicator} title={title} {...props}>
-          <InfoOutlinedIcon data-testid="tooltip-hover" />
-        </RawTooltipCondensed>
-      </div>
-    </div>
-  );
-};
-
-export default {
-  argTypes: {
-    indicator: {
-      control: { type: "boolean" },
-    },
-    indicatorColor: {
-      control: { type: "color" },
-    },
-  },
-  component: TooltipCondensed,
-  title: "TooltipCondensed",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    title: "Label",
-  },
-};
-
-// Live Preview
-
-const livePreviewStyles = {
-  display: "grid",
-  gridTemplateColumns: "repeat(2, 80px)",
-};
-
-function LivePreviewDemo(props: Args): JSX.Element {
-  return (
-    <div style={livePreviewStyles as React.CSSProperties}>
-      <RawTooltipCondensed title="Label" {...props}>
-        <InfoOutlinedIcon />
-      </RawTooltipCondensed>
-      <RawTooltipCondensed
-        indicator
-        indicatorColor="#223F9C"
-        title="Label"
-        {...props}
-      >
-        <InfoOutlinedIcon />
-      </RawTooltipCondensed>
-    </div>
-  );
-}
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-export const Test = {
-  args: {
-    title: "Test",
-  },
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => (
-    <TooltipCondensed {...args} data-testid="tooltip-condensed" />
-  ),
-};
diff --git a/packages/components/src/core/TooltipCondensed/index.tsx b/packages/components/src/core/TooltipCondensed/index.tsx
index 5a1f15d03..e3517e7b4 100644
--- a/packages/components/src/core/TooltipCondensed/index.tsx
+++ b/packages/components/src/core/TooltipCondensed/index.tsx
@@ -1,7 +1,7 @@
 import { TooltipClassKey } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { forwardRef } from "react";
-import Tooltip, { TooltipProps } from "../Tooltip";
+import Tooltip, { TooltipProps } from "src/core/Tooltip";
 import { condensedCSS, TooltipCondensedExtraProps } from "./style";
 
 export type TooltipCondensedProps = TooltipProps & TooltipCondensedExtraProps;
diff --git a/packages/components/src/core/TooltipCondensed/style.ts b/packages/components/src/core/TooltipCondensed/style.ts
index 60d35e0cf..1fc44905d 100644
--- a/packages/components/src/core/TooltipCondensed/style.ts
+++ b/packages/components/src/core/TooltipCondensed/style.ts
@@ -1,5 +1,5 @@
 import { css } from "@emotion/css";
-import { CommonThemeProps, getCorners, getSpaces } from "../styles";
+import { CommonThemeProps, getCorners, getSpaces } from "src/core/styles";
 
 export interface TooltipCondensedExtraProps extends CommonThemeProps {
   indicator?: boolean;
@@ -10,6 +10,7 @@ const indicatorCSS = (props: TooltipCondensedExtraProps): string => {
   const { indicatorColor } = props;
   const spaces = getSpaces(props);
   const corners = getCorners(props);
+
   return css`
     &::before {
       content: "";
diff --git a/packages/components/src/core/TooltipTable/__storybook__/constants.tsx b/packages/components/src/core/TooltipTable/__storybook__/constants.tsx
new file mode 100644
index 000000000..fad80d5fc
--- /dev/null
+++ b/packages/components/src/core/TooltipTable/__storybook__/constants.tsx
@@ -0,0 +1,46 @@
+export const TOOLTIP_TABLE_EXCLUDED_CONTROLS = ["contentAlert", "itemAlign"];
+
+const TOOLTIP_TABLE_ROWS = [
+  { label: "Label 1", value: 1 },
+  { label: "Label 2", value: 2 },
+  { label: "Label 3", value: 3 },
+  { label: "Label 4", value: 4 },
+  { label: "Label 5 ", value: 5 },
+  { label: "Label 6", value: 6 },
+  { label: "Label 7", value: 7 },
+  { label: "Label 8", value: 8 },
+  { label: "Label 9", value: 9 },
+  { label: "Label 10", value: 10 },
+  { label: "Label 11", value: 11 },
+  { label: "Label 12", value: 12 },
+  { label: "Label 13", value: 13 },
+  { label: "Label 14", value: 14 },
+  { label: "Label 15", value: 15 },
+];
+
+export const TOOLTIP_TABLE_DATA = [
+  {
+    dataRows: TOOLTIP_TABLE_ROWS.slice(0, 5),
+    label: "Section 1",
+  },
+  {
+    dataRows: TOOLTIP_TABLE_ROWS.slice(5, 10),
+    label: "Section 2",
+  },
+  {
+    dataRows: TOOLTIP_TABLE_ROWS.slice(10, 15),
+    label: "Section 3",
+  },
+];
+
+export const TOOLTIP_TABLE_LIVE_PREVIEW_STYLES = {
+  alignItems: "stretch",
+  display: "flex",
+  flexDirection: "row",
+  gap: "20px",
+  justifyContent: "flex-start",
+};
+
+export const TOOLTIP_TABLE_TOOLTIP_STYLE_MOCK = {
+  flexGrow: 1,
+};
diff --git a/packages/components/src/core/TooltipTable/__storybook__/index.stories.tsx b/packages/components/src/core/TooltipTable/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..c8611a0d9
--- /dev/null
+++ b/packages/components/src/core/TooltipTable/__storybook__/index.stories.tsx
@@ -0,0 +1,65 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import {
+  TOOLTIP_TABLE_DATA,
+  TOOLTIP_TABLE_EXCLUDED_CONTROLS,
+} from "./constants";
+import { TooltipTableContent } from "./stories/default";
+import { LivePreviewDemo } from "./stories/livePreview";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    contentAlert: {
+      control: { type: "select" },
+      options: ["String", "Element", "None"],
+    },
+    itemAlign: {
+      control: { type: "radio" },
+      options: ["right", "left"],
+    },
+  },
+  component: TooltipTableContent,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/TooltipTable",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    contentAlert: "None",
+    data: TOOLTIP_TABLE_DATA,
+    itemAlign: "right",
+  },
+};
+
+// Live Preview
+
+export const LivePreview = {
+  parameters: {
+    controls: {
+      exclude: TOOLTIP_TABLE_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <LivePreviewDemo {...args} />,
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: TOOLTIP_TABLE_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};
diff --git a/packages/components/src/core/TooltipTable/__storybook__/stories/default.tsx b/packages/components/src/core/TooltipTable/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..79281c439
--- /dev/null
+++ b/packages/components/src/core/TooltipTable/__storybook__/stories/default.tsx
@@ -0,0 +1,24 @@
+import { Args } from "@storybook/react";
+import Link from "src/core/Link";
+import RawTooltipTableContent from "src/core/TooltipTable";
+
+export const TooltipTableContent = (props: Args): JSX.Element => {
+  const { contentAlert } = props;
+  const handleAlert = () => {
+    let alertContent;
+    switch (contentAlert) {
+      case "String":
+        alertContent = "Some values do not pass the selected filter";
+        break;
+      case "Element":
+        alertContent = <Link href="/">Click this link to see samples</Link>;
+        break;
+      case "None":
+      default:
+        alertContent = undefined;
+    }
+    return alertContent;
+  };
+
+  return <RawTooltipTableContent {...props} contentAlert={handleAlert()} />;
+};
diff --git a/packages/components/src/core/TooltipTable/__storybook__/stories/livePreview.tsx b/packages/components/src/core/TooltipTable/__storybook__/stories/livePreview.tsx
new file mode 100644
index 000000000..da0259ef8
--- /dev/null
+++ b/packages/components/src/core/TooltipTable/__storybook__/stories/livePreview.tsx
@@ -0,0 +1,54 @@
+import { Args } from "@storybook/react";
+import {
+  TOOLTIP_TABLE_DATA,
+  TOOLTIP_TABLE_LIVE_PREVIEW_STYLES,
+  TOOLTIP_TABLE_TOOLTIP_STYLE_MOCK,
+} from "../constants";
+import Tooltip from "src/core/Tooltip";
+import RawTooltipTableContent from "src/core/TooltipTable";
+import { InfoOutlined } from "@mui/icons-material";
+
+export const LivePreviewDemo = (props: Args): JSX.Element => {
+  return (
+    <div style={TOOLTIP_TABLE_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      <div style={TOOLTIP_TABLE_TOOLTIP_STYLE_MOCK as React.CSSProperties}>
+        <Tooltip
+          followCursor
+          placement="right-end"
+          title={
+            <RawTooltipTableContent {...props} data={[TOOLTIP_TABLE_DATA[0]]} />
+          }
+        >
+          <InfoOutlined color="primary" fontSize="small" />
+        </Tooltip>
+      </div>
+
+      <div style={TOOLTIP_TABLE_TOOLTIP_STYLE_MOCK as React.CSSProperties}>
+        <Tooltip
+          followCursor
+          placement="right-end"
+          title={
+            <RawTooltipTableContent
+              {...props}
+              data={[TOOLTIP_TABLE_DATA[0], TOOLTIP_TABLE_DATA[1]]}
+            />
+          }
+        >
+          <InfoOutlined color="primary" fontSize="small" />
+        </Tooltip>
+      </div>
+
+      <div style={TOOLTIP_TABLE_TOOLTIP_STYLE_MOCK as React.CSSProperties}>
+        <Tooltip
+          followCursor
+          placement="right-end"
+          title={
+            <RawTooltipTableContent {...props} data={TOOLTIP_TABLE_DATA} />
+          }
+        >
+          <InfoOutlined color="primary" fontSize="small" />
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/components/src/core/TooltipTable/__storybook__/stories/test.tsx b/packages/components/src/core/TooltipTable/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..0d02b45bc
--- /dev/null
+++ b/packages/components/src/core/TooltipTable/__storybook__/stories/test.tsx
@@ -0,0 +1,13 @@
+import { Args } from "@storybook/react";
+import RawTooltipTableContent from "src/core/TooltipTable";
+import { TOOLTIP_TABLE_DATA } from "../constants";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  return (
+    <RawTooltipTableContent
+      {...props}
+      data={[TOOLTIP_TABLE_DATA[0], TOOLTIP_TABLE_DATA[1]]}
+      data-testid="tooltipTable"
+    />
+  );
+};
diff --git a/packages/components/src/core/TooltipTable/TooltipTable.namespace-test.tsx b/packages/components/src/core/TooltipTable/__tests__/TooltipTable.namespace-test.tsx
similarity index 100%
rename from packages/components/src/core/TooltipTable/TooltipTable.namespace-test.tsx
rename to packages/components/src/core/TooltipTable/__tests__/TooltipTable.namespace-test.tsx
diff --git a/packages/components/src/core/TooltipTable/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TooltipTable/__tests__/__snapshots__/index.test.tsx.snap
similarity index 99%
rename from packages/components/src/core/TooltipTable/__snapshots__/index.test.tsx.snap
rename to packages/components/src/core/TooltipTable/__tests__/__snapshots__/index.test.tsx.snap
index 4f59ef333..a439f7dcd 100644
--- a/packages/components/src/core/TooltipTable/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/TooltipTable/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<TooltipTable /> Default story renders snapshot 1`] = `
     class="css-1h9lvka"
   >
     <div
-      class="css-b5werg"
+      class="css-1h5sc78"
       label="Section 1"
     >
       Section 1
@@ -96,7 +96,7 @@ exports[`<TooltipTable /> Default story renders snapshot 1`] = `
     class="css-1h9lvka"
   >
     <div
-      class="css-b5werg"
+      class="css-1h5sc78"
       label="Section 2"
     >
       Section 2
@@ -184,7 +184,7 @@ exports[`<TooltipTable /> Default story renders snapshot 1`] = `
     class="css-1h9lvka"
   >
     <div
-      class="css-b5werg"
+      class="css-1h5sc78"
       label="Section 3"
     >
       Section 3
diff --git a/packages/components/src/core/TooltipTable/index.test.tsx b/packages/components/src/core/TooltipTable/__tests__/index.test.tsx
similarity index 94%
rename from packages/components/src/core/TooltipTable/index.test.tsx
rename to packages/components/src/core/TooltipTable/__tests__/index.test.tsx
index dd95fd4be..646369e84 100644
--- a/packages/components/src/core/TooltipTable/index.test.tsx
+++ b/packages/components/src/core/TooltipTable/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
-import * as stories from "./index.stories";
+import * as stories from "../__storybook__/index.stories";
 
 // Returns a component that already contain all decorators from story level, meta level and global level.
 const { Test } = composeStories(stories);
diff --git a/packages/components/src/core/TooltipTable/index.stories.tsx b/packages/components/src/core/TooltipTable/index.stories.tsx
deleted file mode 100644
index 117292757..000000000
--- a/packages/components/src/core/TooltipTable/index.stories.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { Args, Meta } from "@storybook/react";
-import React from "react";
-import Link from "../Link";
-import Tooltip from "../Tooltip";
-import RawTooltipTableContent from "./index";
-
-const rows = [
-  { label: "Label 1", value: 1 },
-  { label: "Label 2", value: 2 },
-  { label: "Label 3", value: 3 },
-  { label: "Label 4", value: 4 },
-  { label: "Label 5 ", value: 5 },
-  { label: "Label 6", value: 6 },
-  { label: "Label 7", value: 7 },
-  { label: "Label 8", value: 8 },
-  { label: "Label 9", value: 9 },
-  { label: "Label 10", value: 10 },
-  { label: "Label 11", value: 11 },
-  { label: "Label 12", value: 12 },
-  { label: "Label 13", value: 13 },
-  { label: "Label 14", value: 14 },
-  { label: "Label 15", value: 15 },
-];
-
-const data = [
-  {
-    dataRows: rows.slice(0, 5),
-    label: "Section 1",
-  },
-  {
-    dataRows: rows.slice(5, 10),
-    label: "Section 2",
-  },
-  {
-    dataRows: rows.slice(10, 15),
-    label: "Section 3",
-  },
-];
-
-const TooltipTableContent = (props: Args): JSX.Element => {
-  const { contentAlert } = props;
-  const handleAlert = () => {
-    let alertContent;
-    switch (contentAlert) {
-      case "String":
-        alertContent = "Some values do not pass the selected filter";
-        break;
-      case "Element":
-        alertContent = <Link href="/">Click this link to see samples</Link>;
-        break;
-      case "None":
-      default:
-        alertContent = undefined;
-    }
-    return alertContent;
-  };
-
-  return <RawTooltipTableContent {...props} contentAlert={handleAlert()} />;
-};
-
-export default {
-  argTypes: {
-    contentAlert: {
-      control: { type: "select" },
-      options: ["String", "Element", "None"],
-    },
-    itemAlign: {
-      control: { type: "radio" },
-      options: ["right", "left"],
-    },
-  },
-  component: TooltipTableContent,
-  title: "TooltipTable",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    contentAlert: "None",
-    data,
-    itemAlign: "right",
-  },
-};
-
-// Live Preview
-
-const storyRow = {
-  alignItems: "stretch",
-  display: "flex",
-  flexDirection: "row",
-  gap: "20px",
-  justifyContent: "flex-start",
-};
-
-const tooltipStyleMock = {
-  flexGrow: 1,
-};
-
-const LivePreviewDemo = (props: Args): JSX.Element => {
-  return (
-    <div style={storyRow as React.CSSProperties}>
-      <div style={tooltipStyleMock as React.CSSProperties}>
-        <Tooltip
-          followCursor
-          placement="right-end"
-          title={<RawTooltipTableContent {...props} data={[data[0]]} />}
-        >
-          <InfoOutlinedIcon color="primary" fontSize="small" />
-        </Tooltip>
-      </div>
-
-      <div style={tooltipStyleMock as React.CSSProperties}>
-        <Tooltip
-          followCursor
-          placement="right-end"
-          title={
-            <RawTooltipTableContent {...props} data={[data[0], data[1]]} />
-          }
-        >
-          <InfoOutlinedIcon color="primary" fontSize="small" />
-        </Tooltip>
-      </div>
-
-      <div style={tooltipStyleMock as React.CSSProperties}>
-        <Tooltip
-          followCursor
-          placement="right-end"
-          title={<RawTooltipTableContent {...props} data={data} />}
-        >
-          <InfoOutlinedIcon color="primary" fontSize="small" />
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export const LivePreview = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <LivePreviewDemo {...args} />,
-};
-
-// Test
-
-const TestDemo = (props: Args): JSX.Element => {
-  return (
-    <RawTooltipTableContent
-      {...props}
-      data={[data[0], data[1]]}
-      data-testid="tooltipTable"
-    />
-  );
-};
-
-export const Test = {
-  parameters: {
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <TestDemo {...args} />,
-};
diff --git a/packages/components/src/core/TooltipTable/style.ts b/packages/components/src/core/TooltipTable/style.ts
index da57cd062..76543d9aa 100644
--- a/packages/components/src/core/TooltipTable/style.ts
+++ b/packages/components/src/core/TooltipTable/style.ts
@@ -5,12 +5,11 @@ import {
   fontBodyXs,
   fontBodyXxs,
   fontCapsXxxxs,
+  fontTabularXs,
   getBorders,
-  getColors,
-  getPalette,
+  getSemanticTextColors,
   getSpaces,
-  getTypography,
-} from "../styles";
+} from "src/core/styles";
 
 export interface TooltipTableExtraProps extends CommonThemeProps {
   data?: Array<{
@@ -28,13 +27,14 @@ export interface TooltipTableExtraProps extends CommonThemeProps {
 const sdsPropNames = ["contentAlert", "itemAlign"];
 
 export const disabledStyle = (props: SectionProps): string => {
-  const colors = getColors(props);
   const { disabled } = props;
 
+  const semanticTextColors = getSemanticTextColors(props);
+
   if (!disabled) return "";
 
   return `
-    color: ${colors?.gray["300"]};
+    color: ${semanticTextColors?.base?.disabled};
   `;
 };
 
@@ -47,17 +47,17 @@ export const Section = styled("div")`
   ${disabledStyle}
 
   ${(props: SectionProps) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
     const borders = getBorders(props);
 
     return `
       &:not(:last-child) {
-        padding-bottom: ${spacings?.l}px;
-        border-bottom: ${borders?.gray[200]};
+        padding-bottom: ${spaces?.m}px;
+        border-bottom: ${borders?.base?.divider};
       }
 
       &:not(:first-of-type) {
-        padding-top: ${spacings?.l}px;
+        padding-top: ${spaces?.m}px;
       }
     `;
   }}
@@ -68,16 +68,14 @@ export const SectionLabel = styled("div")`
   ${disabledStyle}
 
   ${(props: SectionProps) => {
-    const spacings = getSpaces(props);
-    const palette = getPalette(props);
-    const typography = getTypography(props);
+    const spaces = getSpaces(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     if (!props.label) return "";
 
     return `
-      margin-bottom: ${spacings?.m}px;      
-      font-family: ${typography?.fontFamily};
-      color: ${palette?.text?.secondary};
+      margin-bottom: ${spaces?.s}px;      
+      color: ${semanticTextColors?.base?.secondary};
     `;
   }}
 `;
@@ -90,9 +88,9 @@ export const RowLabel = styled(TableCell, {
   ${fontBodyXs}
   ${disabledStyle}
   ${(props: SectionProps) => {
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
     return `
-      padding: 0 0 ${spacings?.xxs}px 0;
+      padding: 0 0 ${spaces?.xxs}px 0;
       width: 50%;
       border-bottom: none;
       font-weight: 600;
@@ -105,7 +103,7 @@ export const RowValue = styled(TableCell, {
     return !sdsPropNames.includes(prop.toString());
   },
 })`
-  ${fontBodyXs}
+  ${fontTabularXs}
   ${disabledStyle}
 
   padding-top: 0;
diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts
new file mode 100644
index 000000000..310f3dc2a
--- /dev/null
+++ b/packages/components/src/core/styles/common/SDSAppTheme.ts
@@ -0,0 +1,423 @@
+import { AppTheme, Colors } from "./types";
+
+const fontFamily = '"Inter", sans-serif';
+const fontFamilyCode = '"IBM Plex Mono", monospace';
+const tabularNums = "tabular-nums";
+
+enum FontWeight {
+  bold = 700,
+  light = 300,
+  medium = 500,
+  regular = 400,
+  semibold = 600,
+}
+
+const SDSThemeColors: Colors = {
+  blue: {
+    "100": "#F5F9FF",
+    "200": "#E9F1FF",
+    "300": "#A6C9FF",
+    "400": "#0B68F8",
+    "500": "#0142A4",
+    "600": "#002660",
+  },
+  common: {
+    black: "#000000",
+    white: "#FFFFFF",
+  },
+  gray: {
+    "100": "#F8F8F8",
+    "200": "#EAEAEA",
+    "300": "#CCCCCC",
+    "400": "#999999",
+    "500": "#767676",
+    "600": "#545454",
+  },
+  green: {
+    "100": "#ECF5F0",
+    "200": "#E6F7ED",
+    "300": "transparent",
+    "400": "#3CB371",
+    "500": "#349A61",
+    "600": "#1C7F48",
+  },
+  purple: {
+    "100": "#F4F0F9",
+    "200": "#F0EBF6",
+    "300": "transparent",
+    "400": "#7A41CE",
+    "500": "#703CBE",
+    "600": "#693BAC",
+  },
+  red: {
+    "100": "#FEF2F2",
+    "200": "#F8E8E8",
+    "300": "transparent",
+    "400": "#DC132C",
+    "500": "#C61128",
+    "600": "#B70016",
+  },
+  yellow: {
+    "100": "#FCF6EC",
+    "200": "#FFF3E1",
+    "300": "transparent",
+    "400": "#F5A623",
+    "500": "#D8921F",
+    "600": "#946314",
+  },
+};
+
+export const SDSAppTheme: AppTheme = {
+  colors: SDSThemeColors,
+  corners: {
+    l: 20,
+    m: 4,
+    none: 0,
+    s: 2,
+  },
+  fontWeights: {
+    regular: 400,
+    semibold: 600,
+  },
+  iconSizes: {
+    // for use with input icons only (radio and checkbox)
+    input: { height: 16, width: 16 },
+    l: { height: 24, width: 24 },
+    s: { height: 16, width: 16 },
+    xl: { height: 32, width: 32 },
+    xs: { height: 12, width: 12 },
+  },
+  shadows: {
+    l: "0 2px 12px 0 rgba(0,0,0, 0.3)",
+    m: "0 2px 4px 0 rgba(0,0,0, 0.15), 0 2px 10px 0 rgba(0,0,0, 0.15)",
+    none: "none",
+    s: "0 2px 4px 0 rgba(0,0,0, 0.25)",
+  },
+  spacing: {
+    default: 12,
+    l: 16,
+    m: 12,
+    s: 8,
+    xl: 24,
+    xs: 6,
+    xxl: 40,
+    xxs: 4,
+    xxxs: 2,
+  },
+  typography: {
+    fontFamily: {
+      body: fontFamily,
+      caps: fontFamily,
+      code: fontFamilyCode,
+      header: fontFamily,
+      tabular: fontFamily,
+    },
+    styles: {
+      body: {
+        regular: {
+          button: {
+            fontSize: 13,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          l: {
+            fontSize: 18,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "28px",
+            textTransform: "none",
+          },
+          m: {
+            fontSize: 16,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "26px",
+            textTransform: "none",
+          },
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.08px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxxs: {
+            fontSize: 11,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0.1px",
+            lineHeight: "16px",
+            textTransform: "none",
+          },
+        },
+        semibold: {
+          button: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          l: {
+            fontSize: 18,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "28px",
+            textTransform: "none",
+          },
+          m: {
+            fontSize: 16,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "26px",
+            textTransform: "none",
+          },
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxxs: {
+            fontSize: 11,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "16px",
+            textTransform: "none",
+          },
+        },
+      },
+      caps: {
+        semibold: {
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.5px",
+            lineHeight: "18px",
+            textTransform: "uppercase",
+          },
+          xxxs: {
+            fontSize: 11,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.5px",
+            lineHeight: "16px",
+            textTransform: "uppercase",
+          },
+          xxxxs: {
+            fontSize: 10,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.5px",
+            lineHeight: "14px",
+            textTransform: "uppercase",
+          },
+        },
+      },
+      code: {
+        regular: {
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+        semibold: {
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+      },
+      header: {
+        semibold: {
+          l: {
+            fontSize: 18,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          m: {
+            fontSize: 16,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "22px",
+            textTransform: "none",
+          },
+          s: {
+            fontSize: 14,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+          xl: {
+            fontSize: 22,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "30px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.08px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxl: {
+            fontSize: 26,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "34px",
+            textTransform: "none",
+          },
+          xxs: {
+            fontSize: 12,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "18px",
+            textTransform: "none",
+          },
+          xxxs: {
+            fontSize: 11,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0.1px",
+            lineHeight: "16px",
+            textTransform: "none",
+          },
+        },
+      },
+      tabular: {
+        regular: {
+          s: {
+            fontSize: 14,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.regular,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+        semibold: {
+          s: {
+            fontSize: 14,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "24px",
+            textTransform: "none",
+          },
+          xs: {
+            fontSize: 13,
+            fontVariantNumeric: tabularNums,
+            fontWeight: FontWeight.semibold,
+            letterSpacing: "0px",
+            lineHeight: "20px",
+            textTransform: "none",
+          },
+        },
+      },
+    },
+  },
+};
+
+// (mlila) whenever our theme uses colors, we need to make sure we allow consuming
+// applications to override those colors using their own custom theme.
+// By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
+// we allow other apps to specify their colors once, and have them apply
+// throughout the application, such as in borders, etc without having to manually
+// override every theme property that makes use of colors.
+SDSAppTheme.borders = {
+  accent: {
+    dashed: `2px dashed ${SDSAppTheme.colors.blue[400]}`,
+    default: `1px solid ${SDSAppTheme.colors.blue[400]}`,
+    disabled: `1px solid ${SDSAppTheme.colors.blue[300]}`,
+    hover: `1px solid ${SDSAppTheme.colors.blue[500]}`,
+  },
+  base: {
+    black: `1px solid ${SDSAppTheme.colors.common.black}`,
+    dashed: `2px dashed ${SDSAppTheme.colors.gray[400]}`,
+    default: `1px solid ${SDSAppTheme.colors.gray[400]}`,
+    disabled: `1px solid ${SDSAppTheme.colors.gray[300]}`,
+    divider: `1px solid ${SDSAppTheme.colors.gray[200]}`,
+    hover: `1px solid ${SDSAppTheme.colors.common.black}`,
+    table: `1px solid ${SDSAppTheme.colors.gray[300]}`,
+  },
+  beta: {
+    default: `1px solid ${SDSAppTheme.colors.purple[400]}`,
+  },
+  info: {
+    default: `1px solid ${SDSAppTheme.colors.blue[400]}`,
+  },
+  link: {
+    dashed: `1px dashed`,
+    solid: `1px solid`,
+  },
+  negative: {
+    default: `1px solid ${SDSAppTheme.colors.red[400]}`,
+  },
+  none: "none",
+  notice: {
+    default: `1px solid ${SDSAppTheme.colors.yellow[400]}`,
+  },
+  positive: {
+    default: `1px solid ${SDSAppTheme.colors.green[400]}`,
+  },
+};
diff --git a/packages/components/src/core/styles/common/constants/spaces.ts b/packages/components/src/core/styles/common/constants/spaces.ts
index 44fe6294d..55bc1dc9e 100644
--- a/packages/components/src/core/styles/common/constants/spaces.ts
+++ b/packages/components/src/core/styles/common/constants/spaces.ts
@@ -3,9 +3,9 @@ export enum Spaces {
   XXS = "4px",
   XS = "6px",
   S = "8px",
-  M = "10px",
-  L = "14px",
-  XL = "22px",
-  XXL = "38px",
+  M = "12px",
+  L = "16px",
+  XL = "24px",
+  XXL = "40px",
   DEFAULT = M,
 }
diff --git a/packages/components/src/core/styles/common/defaultTheme.ts b/packages/components/src/core/styles/common/defaultTheme.ts
index be3301693..395055be2 100644
--- a/packages/components/src/core/styles/common/defaultTheme.ts
+++ b/packages/components/src/core/styles/common/defaultTheme.ts
@@ -1,564 +1,8 @@
-import { colors } from "@mui/material";
-import {
-  createTheme,
-  Theme,
-  ThemeOptions,
-  TypographyStyle,
-} from "@mui/material/styles";
+import { createTheme } from "@mui/material/styles";
+import { SDSThemeOptions } from "./types";
+import { SDSAppTheme } from "./SDSAppTheme";
+import { makeThemeOptions } from "./makeThemeOptions";
 
-const createThemeAdaptor = createTheme;
+const defaultThemeOptions: SDSThemeOptions = makeThemeOptions(SDSAppTheme);
 
-const { common } = colors;
-
-enum FontWeight {
-  bold = 700,
-  light = 300,
-  medium = 500,
-  regular = 400,
-  semibold = 600,
-}
-
-const defaultThemeColors = {
-  beta: {
-    "100": "#F4F0F9",
-    "200": "#F0EBF6",
-    "400": "#7A41CE",
-    "500": "#703CBE",
-    "600": "#693BAC",
-  },
-  error: {
-    "100": "#FEF2F2",
-    "200": "#FBE8E8",
-    "400": "#DC132C",
-    "500": "#C61128",
-    "600": "#B70016",
-  },
-  gray: {
-    "100": "#F8F8F8",
-    "200": "#EAEAEA",
-    "300": "#CCCCCC",
-    "400": "#999999",
-    "500": "#767676",
-    "600": "#545454",
-  },
-  info: {
-    "100": "#EFF2FC",
-    "200": "#EBEFFC",
-    "400": "#3867FA",
-    "500": "#2B52CD",
-    "600": "#223F9C",
-  },
-  primary: {
-    "100": "#F8F9FE",
-    "200": "#EFF2FC",
-    "300": "#A9BDFC",
-    "400": "#3867FA",
-    "500": "#2B52CD",
-    "600": "#223F9C",
-  },
-  secondary: {
-    "400": "#9BC74E",
-  },
-  success: {
-    "100": "#ECF5F0",
-    "200": "#E6F7ED",
-    "400": "#3CB371",
-    "500": "#349A61",
-    "600": "#1C7F48",
-  },
-  warning: {
-    "100": "#FCF6EC",
-    "200": "#FFF3E1",
-    "400": "#F5A623",
-    "500": "#D8921F",
-    "600": "#946314",
-  },
-};
-
-export const defaultAppTheme: AppTheme = {
-  colors: defaultThemeColors,
-  corners: {
-    l: 20,
-    m: 4,
-    none: 0,
-    s: 2,
-  },
-  fontWeights: {
-    bold: 700,
-    light: 300,
-    medium: 800,
-    regular: 400,
-    semibold: 600,
-  },
-  iconSizes: {
-    input: { height: 16, width: 16 }, // for use with input icons only (radio and checkbox)
-    l: { height: 22, width: 22 },
-    s: { height: 14, width: 14 },
-    xl: { height: 32, width: 32 },
-    xs: { height: 10, width: 10 },
-  },
-  shadows: {
-    l: "0 2px 12px 0 rgba(0,0,0, 0.3)",
-    m: "0 2px 4px 0 rgba(0,0,0, 0.15), 0 2px 10px 0 rgba(0,0,0, 0.15)",
-    none: "none",
-    s: "0 2px 4px 0 rgba(0,0,0, 0.25)",
-  },
-  spacing: {
-    default: 10,
-    l: 14,
-    m: 10,
-    s: 8,
-    xl: 22,
-    xs: 6,
-    xxl: 38,
-    xxs: 4,
-    xxxs: 2,
-  },
-  typography: {
-    fontFamily: "Open Sans",
-    styles: {
-      body: {
-        button: {
-          fontSize: 13,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "0.3px",
-          lineHeight: "20px",
-          textTransform: "none",
-        },
-        l: {
-          fontSize: 18,
-          fontWeight: FontWeight.regular,
-          letterSpacing: "0.3px",
-          lineHeight: "28px",
-        },
-        m: {
-          fontSize: 16,
-          fontWeight: FontWeight.regular,
-          letterSpacing: "0.3px",
-          lineHeight: "26px",
-        },
-        s: {
-          fontSize: 14,
-          fontWeight: FontWeight.regular,
-          letterSpacing: "0.3px",
-          lineHeight: "24px",
-        },
-        xs: {
-          fontSize: 13,
-          fontWeight: FontWeight.regular,
-          letterSpacing: "0.3px",
-          lineHeight: "20px",
-        },
-        xxs: {
-          fontSize: 12,
-          fontWeight: FontWeight.regular,
-          letterSpacing: "0.3px",
-          lineHeight: "18px",
-        },
-        xxxs: {
-          fontSize: 11,
-          fontWeight: FontWeight.regular,
-          letterSpacing: "0.3px",
-          lineHeight: "16px",
-        },
-      },
-      caps: {
-        xxs: {
-          fontSize: 12,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "1.0px",
-          lineHeight: "18px",
-          textTransform: "uppercase",
-        },
-        xxxs: {
-          fontSize: 11,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "1.0px",
-          lineHeight: "16px",
-          textTransform: "uppercase",
-        },
-        xxxxs: {
-          fontSize: 10,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "1.0px",
-          lineHeight: "14px",
-          textTransform: "uppercase",
-        },
-      },
-      header: {
-        l: {
-          fontSize: 18,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "0.3px",
-          lineHeight: "24px",
-        },
-        m: {
-          fontSize: 16,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "0.3px",
-          lineHeight: "22px",
-        },
-        s: {
-          fontSize: 14,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "0.3px",
-          lineHeight: "20px",
-        },
-        xl: {
-          fontSize: 22,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "0.3px",
-          lineHeight: "30px",
-        },
-        xs: {
-          fontSize: 13,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "0.3px",
-          lineHeight: "18px",
-        },
-        xxl: {
-          fontSize: 26,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "0.3px",
-          lineHeight: "34px",
-        },
-        xxs: {
-          fontSize: 12,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "0.3px",
-          lineHeight: "18px",
-        },
-        xxxs: {
-          fontSize: 11,
-          fontWeight: FontWeight.semibold,
-          letterSpacing: "0.3px",
-          lineHeight: "16px",
-        },
-      },
-    },
-  },
-};
-
-// (mlila) whenever our theme uses colors, we need to make sure we allow consuming
-// applications to override those colors using their own custom theme.
-// By defining borders using defaultAppTheme.colors instead of defaultThemeColors,
-// we allow other apps to specify their colors once, and have them apply
-// throughout the application, such as in borders, etc without having to manually
-// override every theme property that makes use of colors.
-defaultAppTheme.borders = {
-  error: {
-    "400": `1px solid ${defaultAppTheme.colors.error[400]}`,
-  },
-  gray: {
-    "100": `1px solid ${defaultAppTheme.colors.gray[100]}`,
-    "200": `1px solid ${defaultAppTheme.colors.gray[200]}`,
-    "300": `1px solid ${defaultAppTheme.colors.gray[300]}`,
-    "400": `1px solid ${defaultAppTheme.colors.gray[400]}`,
-    "500": `1px solid ${defaultAppTheme.colors.gray[500]}`,
-    dashed: `2px dashed ${defaultAppTheme.colors.gray[400]}`,
-  },
-  link: {
-    dashed: `1px dashed`,
-    solid: `1px solid`,
-  },
-  primary: {
-    "300": `1px solid ${defaultAppTheme.colors.primary[300]}`,
-    "400": `1px solid ${defaultAppTheme.colors.primary[400]}`,
-    "500": `1px solid ${defaultAppTheme.colors.primary[500]}`,
-    "600": `1px solid${defaultAppTheme.colors.primary[600]}`,
-    dashed: `2px dashed ${defaultAppTheme.colors.primary[400]}`,
-  },
-  success: {
-    "400": `1px solid ${defaultAppTheme.colors.success[400]}`,
-  },
-  warning: {
-    "400": `1px solid ${defaultAppTheme.colors.warning[400]}`,
-  },
-};
-
-export function makeThemeOptions(appTheme: AppTheme): SDSThemeOptions {
-  return {
-    app: appTheme,
-    components: {
-      MuiButtonBase: {
-        defaultProps: {
-          disableRipple: true,
-        },
-      },
-      MuiLink: {
-        defaultProps: {
-          underline: "hover",
-        },
-      },
-      MuiTab: {
-        defaultProps: {
-          disableRipple: true,
-        },
-      },
-    },
-    palette: {
-      action: {
-        disabled: appTheme.colors.gray[400],
-        disabledBackground: appTheme.colors.gray[300],
-      },
-      divider: appTheme.colors.gray[200],
-      error: {
-        dark: appTheme.colors.error[600],
-        light: appTheme.colors.error[200],
-        main: appTheme.colors.error[400],
-      },
-      grey: {
-        "100": appTheme.colors.gray[100],
-        "200": appTheme.colors.gray[200],
-        "300": appTheme.colors.gray[300],
-        "400": appTheme.colors.gray[400],
-        "500": appTheme.colors.gray[500],
-        "600": appTheme.colors.gray[600],
-      },
-      info: {
-        dark: appTheme.colors.info[600],
-        light: appTheme.colors.info[200],
-        main: appTheme.colors.info[400],
-      },
-      mode: "light",
-      primary: {
-        dark: appTheme.colors.primary[600],
-        light: appTheme.colors.primary[300],
-        main: appTheme.colors.primary[400],
-      },
-      secondary: {
-        main: appTheme.colors.secondary[400],
-      },
-      success: {
-        dark: appTheme.colors.success[600],
-        light: appTheme.colors.success[200],
-        main: appTheme.colors.success[400],
-      },
-      text: {
-        disabled: appTheme.colors.gray[400],
-        primary: common.black,
-        secondary: appTheme.colors.gray[500],
-      },
-      warning: {
-        dark: appTheme.colors.warning[600],
-        light: appTheme.colors.warning[200],
-        main: appTheme.colors.warning[400],
-      },
-    },
-    shadows: [
-      appTheme.shadows.none,
-      appTheme.shadows.s,
-      appTheme.shadows.s,
-      appTheme.shadows.s,
-      appTheme.shadows.s,
-      appTheme.shadows.s,
-      appTheme.shadows.s,
-      appTheme.shadows.s,
-      appTheme.shadows.s,
-      appTheme.shadows.m,
-      appTheme.shadows.m,
-      appTheme.shadows.m,
-      appTheme.shadows.m,
-      appTheme.shadows.m,
-      appTheme.shadows.m,
-      appTheme.shadows.m,
-      appTheme.shadows.m,
-      appTheme.shadows.l,
-      appTheme.shadows.l,
-      appTheme.shadows.l,
-      appTheme.shadows.l,
-      appTheme.shadows.l,
-      appTheme.shadows.l,
-      appTheme.shadows.l,
-      appTheme.shadows.l,
-    ],
-    shape: {
-      borderRadius: appTheme.corners.m,
-    },
-    spacing: [
-      appTheme.spacing.default,
-      appTheme.spacing.xxxs,
-      appTheme.spacing.xxs,
-      appTheme.spacing.xs,
-      appTheme.spacing.s,
-      appTheme.spacing.m,
-      appTheme.spacing.l,
-      appTheme.spacing.xl,
-      appTheme.spacing.xxl,
-    ],
-    transitions: {
-      duration: {
-        complex: 200,
-        enteringScreen: 20,
-        leavingScreen: 10,
-        short: 150,
-        shorter: 100,
-        shortest: 50,
-        standard: 200,
-      },
-      easing: {
-        easeIn: "cubic-bezier(0, 0, 0.2, 1)",
-        easeInOut: "cubic-bezier(0, 0, 0.2, 1)",
-        easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
-        sharp: "cubic-bezier(0, 0.2, 0.6, 1)",
-      },
-    },
-    typography: {
-      body1: appTheme.typography.styles.body.xs,
-      body2: appTheme.typography.styles.body.xxs,
-      button: appTheme.typography.styles.body.button,
-      caption: appTheme.typography.styles.body.xxxs,
-      fontFamily: `${appTheme.typography.fontFamily}, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif`,
-      h1: appTheme.typography.styles.header.xxl,
-      h2: appTheme.typography.styles.header.xl,
-      h3: appTheme.typography.styles.header.l,
-      h4: appTheme.typography.styles.header.m,
-      h5: appTheme.typography.styles.header.s,
-      h6: appTheme.typography.styles.header.xs,
-      overline: appTheme.typography.styles.caps.xxxs,
-      subtitle1: appTheme.typography.styles.body.xs,
-      subtitle2: appTheme.typography.styles.header.xxs,
-    },
-  };
-}
-
-const defaultThemeOptions: SDSThemeOptions = makeThemeOptions(defaultAppTheme);
-
-export interface SDSTheme extends Theme {
-  app?: AppTheme;
-}
-
-export interface SDSThemeOptions extends ThemeOptions {
-  app?: AppTheme;
-}
-
-interface AppTheme {
-  borders?: Borders;
-  colors: Colors;
-  corners: Corners;
-  fontWeights: FontWeights;
-  iconSizes: IconSizes;
-  shadows: Shadows;
-  spacing: Spacings;
-  typography: Typography;
-}
-
-export interface Shadows {
-  none: "none";
-  s: string;
-  m: string;
-  l: string;
-}
-
-export interface Typography {
-  fontFamily: React.CSSProperties["fontFamily"];
-  styles: {
-    header: {
-      xxl: TypographyStyle;
-      xl: TypographyStyle;
-      l: TypographyStyle;
-      m: TypographyStyle;
-      s: TypographyStyle;
-      xs: TypographyStyle;
-      xxs: TypographyStyle;
-      xxxs: TypographyStyle;
-    };
-    body: {
-      button: TypographyStyle;
-      l: TypographyStyle;
-      m: TypographyStyle;
-      s: TypographyStyle;
-      xs: TypographyStyle;
-      xxs: TypographyStyle;
-      xxxs: TypographyStyle;
-    };
-    caps: {
-      xxs: TypographyStyle;
-      xxxs: TypographyStyle;
-      xxxxs: TypographyStyle;
-    };
-  };
-}
-
-export interface FontWeights {
-  bold: number;
-  light: number;
-  medium: number;
-  regular: number;
-  semibold: number;
-}
-
-export interface Corners {
-  none: number;
-  s: number;
-  m: number;
-  l: number;
-}
-
-export interface Spaces {
-  default: number;
-  xxxs: number;
-  xxs: number;
-  xs: number;
-  s: number;
-  m: number;
-  l: number;
-  xl: number;
-  xxl: number;
-}
-export type Spacings = Spaces;
-
-export interface Color {
-  600?: string;
-  500?: string;
-  400: string;
-  300?: string;
-  200?: string;
-  100?: string;
-}
-
-export interface Colors {
-  beta: Color;
-  primary: Color;
-  secondary: Color;
-  gray: Color;
-  info: Color;
-  success: Color;
-  warning: Color;
-  error: Color;
-}
-
-interface IconSize {
-  height: number;
-  width: number;
-}
-
-export interface IconSizes {
-  xs: IconSize;
-  s: IconSize;
-  l: IconSize;
-  xl: IconSize;
-  input: IconSize;
-}
-
-export interface Border {
-  600?: string;
-  500?: string;
-  400?: string;
-  300?: string;
-  200?: string;
-  100?: string;
-  dashed?: string;
-  solid?: string;
-}
-
-export interface Borders {
-  error: Border;
-  gray: Border;
-  link: Border;
-  primary: Border;
-  success: Border;
-  warning: Border;
-}
-
-export const defaultTheme = createThemeAdaptor(defaultThemeOptions);
+export const defaultTheme = createTheme(defaultThemeOptions);
diff --git a/packages/components/src/core/styles/common/makeThemeOptions.ts b/packages/components/src/core/styles/common/makeThemeOptions.ts
new file mode 100644
index 000000000..cc543f5ff
--- /dev/null
+++ b/packages/components/src/core/styles/common/makeThemeOptions.ts
@@ -0,0 +1,311 @@
+import { colors } from "@mui/material";
+import { AppTheme, SDSThemeOptions } from "./types";
+
+const { common } = colors;
+
+/**
+ * This function creates the theme options for the MUI theme provider
+ */
+export function makeThemeOptions(appTheme: AppTheme): SDSThemeOptions {
+  return {
+    app: appTheme,
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
+          disableRipple: true,
+        },
+      },
+      MuiLink: {
+        defaultProps: {
+          underline: "hover",
+        },
+      },
+      MuiTab: {
+        defaultProps: {
+          disableRipple: true,
+        },
+      },
+    },
+    palette: {
+      action: {
+        disabled: appTheme.colors.gray[400],
+        disabledBackground: appTheme.colors.gray[300],
+      },
+      divider: appTheme.colors.gray[200],
+      error: {
+        "100": appTheme.colors.red[100],
+        "200": appTheme.colors.red[200],
+        "300": appTheme.colors.red[300],
+        "400": appTheme.colors.red[400],
+        "500": appTheme.colors.red[500],
+        "600": appTheme.colors.red[600],
+        contrastText: common.white,
+        dark: appTheme.colors.red[600],
+        light: appTheme.colors.red[200],
+        main: appTheme.colors.red[400],
+      },
+      grey: {
+        "100": appTheme.colors.gray[100],
+        "200": appTheme.colors.gray[200],
+        "300": appTheme.colors.gray[300],
+        "400": appTheme.colors.gray[400],
+        "500": appTheme.colors.gray[500],
+        "600": appTheme.colors.gray[600],
+      },
+      info: {
+        "100": appTheme.colors.blue[100],
+        "200": appTheme.colors.blue[200],
+        "300": appTheme.colors.blue[300],
+        "400": appTheme.colors.blue[400],
+        "500": appTheme.colors.blue[500],
+        "600": appTheme.colors.blue[600],
+        contrastText: common.white,
+        dark: appTheme.colors.blue[600],
+        light: appTheme.colors.blue[200],
+        main: appTheme.colors.blue[400],
+      },
+      mode: "light",
+      primary: {
+        "100": appTheme.colors.blue[100],
+        "200": appTheme.colors.blue[200],
+        "300": appTheme.colors.blue[300],
+        "400": appTheme.colors.blue[400],
+        "500": appTheme.colors.blue[500],
+        "600": appTheme.colors.blue[600],
+        contrastText: common.white,
+        dark: appTheme.colors.blue[600],
+        light: appTheme.colors.blue[200],
+        main: appTheme.colors.blue[400],
+      },
+      sds: {
+        component: {
+          accent: {
+            border: appTheme.colors.blue[400],
+            borderDisabled: appTheme.colors.blue[300],
+            borderFocus: appTheme.colors.blue[400],
+            borderHover: appTheme.colors.blue[500],
+            borderOpen: appTheme.colors.blue[400],
+            borderSelected: appTheme.colors.blue[400],
+            fill: appTheme.colors.blue[400],
+            fillDisabled: appTheme.colors.blue[300],
+            fillHover: appTheme.colors.blue[500],
+            fillOnFill: appTheme.colors.common.white,
+            fillPressed: appTheme.colors.blue[600],
+            icon: appTheme.colors.blue[400],
+            surface: appTheme.colors.blue[200],
+          },
+          base: {
+            border: appTheme.colors.gray[400],
+            borderDisabled: appTheme.colors.gray[300],
+            borderHover: appTheme.colors.common.black,
+            divider: appTheme.colors.gray[200],
+            fill: appTheme.colors.common.white,
+            fillDisabled: appTheme.colors.gray[300],
+            fillHover: appTheme.colors.gray[100],
+            fillOpen: appTheme.colors.gray[100],
+            fillPressed: appTheme.colors.gray[100],
+            fillSelected: appTheme.colors.common.black,
+            icon: appTheme.colors.gray[500],
+            iconDisabled: appTheme.colors.gray[300],
+            iconHover: appTheme.colors.common.black,
+            iconPressed: appTheme.colors.common.black,
+            onFillDisabled: appTheme.colors.gray[400],
+            surface: appTheme.colors.common.white,
+            surfacePrimary: appTheme.colors.common.white,
+            surfaceSecondary: appTheme.colors.gray[100],
+            surfaceTertiary: appTheme.colors.gray[200],
+          },
+          beta: {
+            border: appTheme.colors.purple[400],
+            fill: appTheme.colors.purple[400],
+            fillHover: appTheme.colors.purple[500],
+            fillOnFill: appTheme.colors.common.white,
+            fillPressed: appTheme.colors.purple[600],
+            icon: appTheme.colors.purple[400],
+            surface: appTheme.colors.purple[200],
+          },
+          info: {
+            border: appTheme.colors.blue[400],
+            fill: appTheme.colors.blue[400],
+            fillHover: appTheme.colors.blue[500],
+            fillOnFill: appTheme.colors.common.white,
+            fillPressed: appTheme.colors.blue[600],
+            icon: appTheme.colors.blue[400],
+            surface: appTheme.colors.blue[200],
+          },
+          negative: {
+            border: appTheme.colors.red[400],
+            fill: appTheme.colors.red[400],
+            fillHover: appTheme.colors.red[500],
+            fillOnFill: appTheme.colors.common.white,
+            fillPressed: appTheme.colors.red[600],
+            icon: appTheme.colors.red[400],
+            surface: appTheme.colors.red[200],
+          },
+          neutral: {
+            border: appTheme.colors.gray[400],
+            fill: appTheme.colors.gray[400],
+            fillHover: appTheme.colors.gray[500],
+            fillOnFill: appTheme.colors.common.white,
+            fillPressed: appTheme.colors.gray[600],
+            icon: appTheme.colors.gray[400],
+            surface: appTheme.colors.gray[200],
+          },
+          notice: {
+            border: appTheme.colors.yellow[400],
+            fill: appTheme.colors.yellow[400],
+            fillHover: appTheme.colors.yellow[500],
+            fillOnFill: appTheme.colors.common.white,
+            fillPressed: appTheme.colors.yellow[600],
+            icon: appTheme.colors.yellow[400],
+            surface: appTheme.colors.yellow[200],
+          },
+          positive: {
+            border: appTheme.colors.green[400],
+            fill: appTheme.colors.green[400],
+            fillHover: appTheme.colors.green[500],
+            fillOnFill: appTheme.colors.common.white,
+            fillPressed: appTheme.colors.green[600],
+            icon: appTheme.colors.green[400],
+            surface: appTheme.colors.green[200],
+          },
+        },
+        text: {
+          action: {
+            default: appTheme.colors.blue[400],
+            hover: appTheme.colors.blue[500],
+            pressed: appTheme.colors.blue[600],
+          },
+          base: {
+            accent: appTheme.colors.blue[600],
+            disabled: appTheme.colors.gray[300],
+            onFill: appTheme.colors.common.white,
+            onFillDisabled: appTheme.colors.gray[400],
+            primary: appTheme.colors.common.black,
+            secondary: appTheme.colors.gray[500],
+          },
+          beta: appTheme.colors.purple[600],
+          info: appTheme.colors.blue[600],
+          negative: appTheme.colors.red[600],
+          notice: appTheme.colors.yellow[600],
+          positive: appTheme.colors.green[600],
+        },
+      },
+      secondary: {
+        "100": appTheme.colors.green[100],
+        "200": appTheme.colors.green[200],
+        "300": appTheme.colors.green[300],
+        "400": appTheme.colors.green[400],
+        "500": appTheme.colors.green[500],
+        "600": appTheme.colors.green[600],
+        contrastText: common.white,
+        dark: appTheme.colors.green[600],
+        light: appTheme.colors.green[200],
+        main: appTheme.colors.green[400],
+      },
+      success: {
+        "100": appTheme.colors.green[100],
+        "200": appTheme.colors.green[200],
+        "300": appTheme.colors.green[300],
+        "400": appTheme.colors.green[400],
+        "500": appTheme.colors.green[500],
+        "600": appTheme.colors.green[600],
+        contrastText: common.white,
+        dark: appTheme.colors.green[600],
+        light: appTheme.colors.green[200],
+        main: appTheme.colors.green[400],
+      },
+      text: {
+        disabled: appTheme.colors.gray[300],
+        primary: common.black,
+        secondary: appTheme.colors.gray[500],
+      },
+      warning: {
+        "100": appTheme.colors.yellow[100],
+        "200": appTheme.colors.yellow[200],
+        "300": appTheme.colors.yellow[300],
+        "400": appTheme.colors.yellow[400],
+        "500": appTheme.colors.yellow[500],
+        "600": appTheme.colors.yellow[600],
+        contrastText: common.black,
+        dark: appTheme.colors.yellow[600],
+        light: appTheme.colors.yellow[200],
+        main: appTheme.colors.yellow[400],
+      },
+    },
+    shadows: [
+      appTheme.shadows.none,
+      appTheme.shadows.s,
+      appTheme.shadows.s,
+      appTheme.shadows.s,
+      appTheme.shadows.s,
+      appTheme.shadows.s,
+      appTheme.shadows.s,
+      appTheme.shadows.s,
+      appTheme.shadows.s,
+      appTheme.shadows.m,
+      appTheme.shadows.m,
+      appTheme.shadows.m,
+      appTheme.shadows.m,
+      appTheme.shadows.m,
+      appTheme.shadows.m,
+      appTheme.shadows.m,
+      appTheme.shadows.m,
+      appTheme.shadows.l,
+      appTheme.shadows.l,
+      appTheme.shadows.l,
+      appTheme.shadows.l,
+      appTheme.shadows.l,
+      appTheme.shadows.l,
+      appTheme.shadows.l,
+      appTheme.shadows.l,
+    ],
+    shape: {
+      borderRadius: appTheme.corners.m,
+    },
+    spacing: [
+      appTheme.spacing.default,
+      appTheme.spacing.xxxs,
+      appTheme.spacing.xxs,
+      appTheme.spacing.xs,
+      appTheme.spacing.s,
+      appTheme.spacing.m,
+      appTheme.spacing.l,
+      appTheme.spacing.xl,
+      appTheme.spacing.xxl,
+    ],
+    transitions: {
+      duration: {
+        complex: 200,
+        enteringScreen: 20,
+        leavingScreen: 10,
+        short: 150,
+        shorter: 100,
+        shortest: 50,
+        standard: 200,
+      },
+      easing: {
+        easeIn: "cubic-bezier(0, 0, 0.2, 1)",
+        easeInOut: "cubic-bezier(0, 0, 0.2, 1)",
+        easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+        sharp: "cubic-bezier(0, 0.2, 0.6, 1)",
+      },
+    },
+    typography: {
+      body1: appTheme.typography.styles.body.regular.xs,
+      body2: appTheme.typography.styles.body.regular.xxs,
+      button: appTheme.typography.styles.body.regular.button,
+      caption: appTheme.typography.styles.body.regular.xxxs,
+      fontFamily: `${appTheme.typography.fontFamily.body}, sans-serif`,
+      h1: appTheme.typography.styles.header.semibold.xxl,
+      h2: appTheme.typography.styles.header.semibold.xl,
+      h3: appTheme.typography.styles.header.semibold.l,
+      h4: appTheme.typography.styles.header.semibold.m,
+      h5: appTheme.typography.styles.header.semibold.s,
+      h6: appTheme.typography.styles.header.semibold.xs,
+      overline: appTheme.typography.styles.caps.semibold.xxxs,
+      subtitle1: appTheme.typography.styles.body.regular.xs,
+      subtitle2: appTheme.typography.styles.header.semibold.xxs,
+    },
+  };
+}
diff --git a/packages/components/src/core/styles/common/mixins/fonts.ts b/packages/components/src/core/styles/common/mixins/fonts.ts
index b688dc599..74b927e41 100644
--- a/packages/components/src/core/styles/common/mixins/fonts.ts
+++ b/packages/components/src/core/styles/common/mixins/fonts.ts
@@ -1,11 +1,16 @@
 import { css, SerializedStyles } from "@emotion/react";
 import { TypographyStyle } from "@mui/material";
-import { Typography } from "../defaultTheme";
+import { Typography } from "../types";
 import { CommonThemeProps, getTypography } from "../selectors/theme";
 
-type FontBodySize = keyof Typography["styles"]["body"];
+type FontBodyWeight = keyof Typography["styles"]["body"];
+type FontBodySize<T extends FontBodyWeight> =
+  keyof Typography["styles"]["body"][T];
 
-export const fontBody = (fontSize: FontBodySize) => {
+export const fontBody = (
+  fontSize: FontBodySize<FontBodyWeight>,
+  fontWeight: FontBodyWeight = "regular"
+) => {
   return (props: CommonThemeProps): SerializedStyles | null => {
     const typography = getTypography(props);
 
@@ -13,20 +18,29 @@ export const fontBody = (fontSize: FontBodySize) => {
 
     const {
       styles: { body },
+      fontFamily: { body: bodyFontFamily },
     } = typography;
 
-    return themeToCss(body[fontSize]);
+    return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
   };
 };
 
-export const fontBodyL = fontBody("l");
-export const fontBodyM = fontBody("m");
-export const fontBodyS = fontBody("s");
-export const fontBodyXs = fontBody("xs");
-export const fontBodyXxs = fontBody("xxs");
-export const fontBodyXxxs = fontBody("xxxs");
+export const fontBodyL = fontBody("l", "regular");
+export const fontBodyM = fontBody("m", "regular");
+export const fontBodyS = fontBody("s", "regular");
+export const fontBodyXs = fontBody("xs", "regular");
+export const fontBodyXxs = fontBody("xxs", "regular");
+export const fontBodyXxxs = fontBody("xxxs", "regular");
+export const fontBodySemiboldL = fontBody("l", "semibold");
+export const fontBodySemiboldM = fontBody("m", "semibold");
+export const fontBodySemiboldS = fontBody("s", "semibold");
+export const fontBodySemiboldXs = fontBody("xs", "semibold");
+export const fontBodySemiboldXxs = fontBody("xxs", "semibold");
+export const fontBodySemiboldXxxs = fontBody("xxxs", "semibold");
 
-type FontCapsSize = keyof Typography["styles"]["caps"];
+// Font Caps
+
+type FontCapsSize = keyof Typography["styles"]["caps"]["semibold"];
 
 export const fontCaps = (fontSize: FontCapsSize) => {
   return (props: CommonThemeProps): SerializedStyles | null => {
@@ -36,10 +50,11 @@ export const fontCaps = (fontSize: FontCapsSize) => {
 
     const {
       styles: { caps },
+      fontFamily: { caps: capsFontFamily },
     } = typography;
 
     return css`
-      ${themeToCss(caps[fontSize])}
+      ${themeToCss(caps.semibold[fontSize], capsFontFamily)}
       text-transform: uppercase;
     `;
   };
@@ -49,7 +64,9 @@ export const fontCapsXxs = fontCaps("xxs");
 export const fontCapsXxxs = fontCaps("xxxs");
 export const fontCapsXxxxs = fontCaps("xxxxs");
 
-type FontHeaderSize = keyof Typography["styles"]["header"];
+// Font Header
+
+type FontHeaderSize = keyof Typography["styles"]["header"]["semibold"];
 
 export const fontHeader = (fontSize: FontHeaderSize) => {
   return (props: CommonThemeProps): SerializedStyles | null => {
@@ -59,9 +76,10 @@ export const fontHeader = (fontSize: FontHeaderSize) => {
 
     const {
       styles: { header },
+      fontFamily: { header: headerFontFamily },
     } = typography;
 
-    return themeToCss(header[fontSize]);
+    return themeToCss(header.semibold[fontSize], headerFontFamily);
   };
 };
 
@@ -74,8 +92,75 @@ export const fontHeaderXs = fontHeader("xs");
 export const fontHeaderXxs = fontHeader("xxs");
 export const fontHeaderXxxs = fontHeader("xxxs");
 
-function themeToCss(fontTheme: TypographyStyle) {
+// Font Code
+
+type FontCodeWeight = keyof Typography["styles"]["code"];
+type FontCodeSize<T extends FontCodeWeight> =
+  keyof Typography["styles"]["code"][T];
+
+export const fontCode = (
+  fontSize: FontCodeSize<FontCodeWeight>,
+  fontWeight: FontCodeWeight = "regular"
+) => {
+  return (props: CommonThemeProps): SerializedStyles | null => {
+    const typography = getTypography(props);
+
+    if (!typography) return null;
+
+    const {
+      styles: { code },
+      fontFamily: { code: codeFontFamily },
+    } = typography;
+
+    return css`
+      ${themeToCss(code[fontWeight][fontSize], codeFontFamily)}
+    `;
+  };
+};
+
+export const fontCodeXs = fontCode("xs", "regular");
+export const fontCodeS = fontCode("s", "regular");
+export const fontCodeSemiboldXs = fontCode("xs", "semibold");
+export const fontCodeSemiboldS = fontCode("s", "semibold");
+
+// Font Tabular
+
+type FontTabularWeight = keyof Typography["styles"]["tabular"];
+type FontTabularSize<T extends FontTabularWeight> =
+  keyof Typography["styles"]["tabular"][T];
+
+export const fontTabular = (
+  fontSize: FontTabularSize<FontTabularWeight>,
+  fontWeight: FontTabularWeight = "regular"
+) => {
+  return (props: CommonThemeProps): SerializedStyles | null => {
+    const typography = getTypography(props);
+
+    if (!typography) return null;
+
+    const {
+      styles: { tabular },
+      fontFamily: { tabular: tabularFontFamily },
+    } = typography;
+
+    return css`
+      ${themeToCss(tabular[fontWeight][fontSize], tabularFontFamily)}
+      font-variant-numeric: tabular-nums;
+    `;
+  };
+};
+
+export const fontTabularXs = fontTabular("xs", "regular");
+export const fontTabularS = fontTabular("s", "regular");
+export const fontTabularSemiboldXs = fontTabular("xs", "semibold");
+export const fontTabularSemiboldS = fontTabular("s", "semibold");
+
+function themeToCss(
+  fontTheme: TypographyStyle,
+  fontFamily: React.CSSProperties["fontFamily"] = "inherit"
+) {
   return css`
+    font-family: ${fontFamily};
     font-size: ${fontTheme.fontSize}px;
     line-height: ${fontTheme.lineHeight};
     letter-spacing: ${fontTheme.letterSpacing};
diff --git a/packages/components/src/core/styles/common/selectors/theme.ts b/packages/components/src/core/styles/common/selectors/theme.ts
index efa9d9adb..d343d34ac 100644
--- a/packages/components/src/core/styles/common/selectors/theme.ts
+++ b/packages/components/src/core/styles/common/selectors/theme.ts
@@ -6,11 +6,12 @@ import {
   FontWeights,
   IconSizes,
   SDSTheme,
+  SemanticComponentColors,
+  SemanticTextColors,
   Shadows,
   Spaces,
-  Spacings,
   Typography,
-} from "../defaultTheme";
+} from "../types";
 
 // (thuang): Somehow this namespace needs to be globally unique to prevent
 // namespace collisions.
@@ -23,7 +24,7 @@ export const getSpaces = ({ theme }: CommonThemeProps): Spaces | null => {
   return theme?.app?.spacing || null;
 };
 
-export const getSpacings = ({ theme }: CommonThemeProps): Spacings | null => {
+export const getSpacings = ({ theme }: CommonThemeProps): Spaces | null => {
   console.warn(
     "getSpacings() is deprecated and may be removed in a future release. Please use getSpaces()"
   );
@@ -44,6 +45,18 @@ export const getColors = ({ theme }: CommonThemeProps): Colors | null => {
   return theme?.app?.colors || null;
 };
 
+export const getSemanticComponentColors = ({
+  theme,
+}: CommonThemeProps): SemanticComponentColors | null => {
+  return theme?.palette?.sds?.component || null;
+};
+
+export const getSemanticTextColors = ({
+  theme,
+}: CommonThemeProps): SemanticTextColors | null => {
+  return theme?.palette?.sds?.text || null;
+};
+
 export const getShadows = ({ theme }: CommonThemeProps): Shadows | null => {
   return theme?.app?.shadows || null;
 };
diff --git a/packages/components/src/core/styles/common/types.ts b/packages/components/src/core/styles/common/types.ts
new file mode 100644
index 000000000..17dbf30c4
--- /dev/null
+++ b/packages/components/src/core/styles/common/types.ts
@@ -0,0 +1,469 @@
+import { Theme, ThemeOptions, TypographyStyle } from "@mui/material/styles";
+import { CSSProperties } from "react";
+
+/**
+ * (masoudmanson): The SDSComponentPalette is a custom palette based on
+ * the semantic design tokens for the SDS components.
+ */
+export interface SDSComponentPalette {
+  base: {
+    fill: string;
+    fillHover: string;
+    fillPressed: string;
+    fillOpen: string;
+    fillSelected: string;
+    fillDisabled: string;
+    onFillDisabled: string;
+    surface: string;
+    surfacePrimary: string;
+    surfaceSecondary: string;
+    surfaceTertiary: string;
+    divider: string;
+    border: string;
+    borderHover: string;
+    borderDisabled: string;
+    icon: string;
+    iconHover: string;
+    iconPressed: string;
+    iconDisabled: string;
+  };
+  accent: {
+    fill: string;
+    fillHover: string;
+    fillPressed: string;
+    fillOnFill: string;
+    fillDisabled: string;
+    surface: string;
+    border: string;
+    borderHover: string;
+    borderOpen: string;
+    borderFocus: string;
+    borderSelected: string;
+    borderDisabled: string;
+    icon: string;
+  };
+  beta: {
+    fill: string;
+    fillHover: string;
+    fillPressed: string;
+    fillOnFill: string;
+    surface: string;
+    border: string;
+    icon: string;
+  };
+  info: {
+    fill: string;
+    fillHover: string;
+    fillPressed: string;
+    fillOnFill: string;
+    surface: string;
+    border: string;
+    icon: string;
+  };
+  negative: {
+    fill: string;
+    fillHover: string;
+    fillPressed: string;
+    fillOnFill: string;
+    surface: string;
+    border: string;
+    icon: string;
+  };
+  neutral: {
+    fill: string;
+    fillHover: string;
+    fillPressed: string;
+    fillOnFill: string;
+    surface: string;
+    border: string;
+    icon: string;
+  };
+  notice: {
+    fill: string;
+    fillHover: string;
+    fillPressed: string;
+    fillOnFill: string;
+    surface: string;
+    border: string;
+    icon: string;
+  };
+  positive: {
+    fill: string;
+    fillHover: string;
+    fillPressed: string;
+    fillOnFill: string;
+    surface: string;
+    border: string;
+    icon: string;
+  };
+}
+
+/**
+ * (masoudmanson): The SDSTextPalette is a custom palette based on the
+ * semantic design tokens for the SDS text based components.
+ */
+export interface SDSTextPalette {
+  base: {
+    primary: string;
+    secondary: string;
+    disabled: string;
+    onFill: string;
+    onFillDisabled: string;
+    accent: string;
+  };
+  action: {
+    default: string;
+    hover: string;
+    pressed: string;
+  };
+  beta: string;
+  info: string;
+  negative: string;
+  notice: string;
+  positive: string;
+}
+
+/**
+ * (masoudmanson): Using module augmentation to extend the MUI Palette
+ * https://mui.com/material-ui/customization/palette/#typescript
+ */
+declare module "@mui/material/styles" {
+  // (masoudmanson): Extends the MUI TypeText to include the SDSTextPalette
+  // export interface TypeText extends SDSTextPalette {}
+
+  // (masoudmanson): Extends the MUI Palette to include the SDSComponentPalette and the SDSTextPalette
+  export interface Palette {
+    sds: {
+      component: SDSComponentPalette;
+      text: SDSTextPalette;
+    };
+    // component: SDSComponentPalette;
+    // text: TypeText;
+  }
+
+  export interface PaletteOptions {
+    sds?: {
+      component?: SDSComponentPalette;
+      text?: SDSTextPalette;
+    };
+    // component?: SDSComponentPalette;
+    // text?: Partial<TypeText>;
+  }
+}
+
+export interface SDSTheme extends Theme {
+  app?: AppTheme;
+}
+
+export interface SDSThemeOptions extends ThemeOptions {
+  app?: AppTheme;
+}
+
+export interface AppTheme {
+  borders?: Borders;
+  colors: Colors;
+  corners: Corners;
+  fontWeights: FontWeights;
+  iconSizes: IconSizes;
+  shadows: Shadows;
+  spacing: Spaces;
+  typography: Typography;
+}
+
+export interface Shadows {
+  none: "none";
+  s: string;
+  m: string;
+  l: string;
+}
+
+export interface Typography {
+  fontFamily: {
+    body: CSSProperties["fontFamily"];
+    caps?: CSSProperties["fontFamily"];
+    code?: CSSProperties["fontFamily"];
+    header?: CSSProperties["fontFamily"];
+    tabular?: CSSProperties["fontFamily"];
+  };
+  styles: {
+    body: {
+      regular: {
+        button: TypographyStyle;
+        l: TypographyStyle;
+        m: TypographyStyle;
+        s: TypographyStyle;
+        xs: TypographyStyle;
+        xxs: TypographyStyle;
+        xxxs: TypographyStyle;
+      };
+      semibold: {
+        button: TypographyStyle;
+        l: TypographyStyle;
+        m: TypographyStyle;
+        s: TypographyStyle;
+        xs: TypographyStyle;
+        xxs: TypographyStyle;
+        xxxs: TypographyStyle;
+      };
+    };
+    caps: {
+      semibold: {
+        xxs: TypographyStyle;
+        xxxs: TypographyStyle;
+        xxxxs: TypographyStyle;
+      };
+    };
+    code: {
+      regular: {
+        s: TypographyStyle;
+        xs: TypographyStyle;
+      };
+      semibold: {
+        s: TypographyStyle;
+        xs: TypographyStyle;
+      };
+    };
+    header: {
+      semibold: {
+        xxl: TypographyStyle;
+        xl: TypographyStyle;
+        l: TypographyStyle;
+        m: TypographyStyle;
+        s: TypographyStyle;
+        xs: TypographyStyle;
+        xxs: TypographyStyle;
+        xxxs: TypographyStyle;
+      };
+    };
+    tabular: {
+      regular: {
+        s: TypographyStyle;
+        xs: TypographyStyle;
+      };
+      semibold: {
+        s: TypographyStyle;
+        xs: TypographyStyle;
+      };
+    };
+  };
+}
+
+export interface FontWeights {
+  regular: number;
+  semibold: number;
+}
+
+export interface Corners {
+  none: number;
+  s: number;
+  m: number;
+  l: number;
+}
+
+export interface Spaces {
+  default: number;
+  xxxs: number;
+  xxs: number;
+  xs: number;
+  s: number;
+  m: number;
+  l: number;
+  xl: number;
+  xxl: number;
+}
+
+/**
+ * @deprecated
+ *
+ * (masoudmanson): The Spacings type is an alias for the Spaces type and
+ * is deprecated. It is recommended to use the Spaces type instead.
+ */
+export type Spacings = Spaces;
+
+export interface Color {
+  600: string;
+  500: string;
+  400: string;
+  300: string;
+  200: string;
+  100: string;
+}
+
+export interface Colors {
+  common: {
+    white: string;
+    black: string;
+  };
+  blue: Color;
+  gray: Color;
+  green: Color;
+  purple: Color;
+  red: Color;
+  yellow: Color;
+}
+
+export interface AccentColor {
+  border: string;
+  borderDisabled: string;
+  borderFocus: string;
+  borderHover: string;
+  borderOpen: string;
+  borderSelected: string;
+  fill: string;
+  fillDisabled: string;
+  fillHover: string;
+  fillOnFill: string;
+  fillPressed: string;
+  icon: string;
+  surface: string;
+}
+
+export interface BaseColor {
+  border: string;
+  borderDisabled: string;
+  borderHover: string;
+  divider: string;
+  fill: string;
+  fillDisabled: string;
+  fillHover: string;
+  fillOpen: string;
+  fillPressed: string;
+  fillSelected: string;
+  icon: string;
+  iconDisabled: string;
+  iconHover: string;
+  iconPressed: string;
+  onFillDisabled: string;
+  surface: string;
+  surfacePrimary: string;
+  surfaceSecondary: string;
+  surfaceTertiary: string;
+}
+
+export interface BetaColor {
+  border: string;
+  fill: string;
+  fillHover: string;
+  fillOnFill: string;
+  fillPressed: string;
+  icon: string;
+  surface: string;
+}
+
+export interface InfoColor {
+  border: string;
+  fill: string;
+  fillHover: string;
+  fillOnFill: string;
+  fillPressed: string;
+  icon: string;
+  surface: string;
+}
+
+export interface NegativeColor {
+  border: string;
+  fill: string;
+  fillHover: string;
+  fillOnFill: string;
+  fillPressed: string;
+  icon: string;
+  surface: string;
+}
+
+export interface NeutralColor {
+  border: string;
+  fill: string;
+  fillHover: string;
+  fillOnFill: string;
+  fillPressed: string;
+  icon: string;
+  surface: string;
+}
+
+export interface NoticeColor {
+  border: string;
+  fill: string;
+  fillHover: string;
+  fillOnFill: string;
+  fillPressed: string;
+  icon: string;
+  surface: string;
+}
+
+export interface PositiveColor {
+  border: string;
+  fill: string;
+  fillHover: string;
+  fillOnFill: string;
+  fillPressed: string;
+  icon: string;
+  surface: string;
+}
+
+export interface SemanticComponentColors {
+  accent: AccentColor;
+  base: BaseColor;
+  beta: BetaColor;
+  info: InfoColor;
+  negative: NegativeColor;
+  notice: NoticeColor;
+  neutral: NeutralColor;
+  positive: PositiveColor;
+}
+
+export interface SemanticTextColors {
+  action: {
+    default?: string;
+    hover?: string;
+    pressed?: string;
+  };
+  base: {
+    accent?: string;
+    disabled?: string;
+    onFill?: string;
+    onFillDisabled?: string;
+    primary?: string;
+    secondary?: string;
+  };
+  beta: string;
+  info: string;
+  negative: string;
+  notice: string;
+  positive: string;
+}
+
+export interface IconSize {
+  height: number;
+  width: number;
+}
+
+export interface IconSizes {
+  xs: IconSize;
+  s: IconSize;
+  l: IconSize;
+  xl: IconSize;
+  input: IconSize;
+}
+
+export interface Border {
+  default?: string;
+  divider?: string;
+  black?: string;
+  solid?: string;
+  dashed?: string;
+  hover?: string;
+  disabled?: string;
+  table?: string;
+}
+
+export interface Borders {
+  accent: Border;
+  base: Border;
+  beta: Border;
+  info: Border;
+  link: Border;
+  negative: Border;
+  none: string;
+  notice: Border;
+  positive: Border;
+}
diff --git a/packages/components/src/core/styles/index.ts b/packages/components/src/core/styles/index.ts
index 88785684d..4c155ec4e 100644
--- a/packages/components/src/core/styles/index.ts
+++ b/packages/components/src/core/styles/index.ts
@@ -1,4 +1,6 @@
+export * from "./common/types";
 export * from "./common/defaultTheme";
+export * from "./common/SDSAppTheme";
 export * from "./common/mixins/a11y";
 export * from "./common/mixins/fonts";
 export * from "./common/selectors/theme";
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 68275c9d6..46af276c3 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -31,14 +31,14 @@ export * from "./core/ComplexFilter";
 export { default as ComplexFilter } from "./core/ComplexFilter";
 export * from "./core/Dialog";
 export { default as Dialog } from "./core/Dialog";
-export * from "./core/DialogActions";
-export { default as DialogActions } from "./core/DialogActions";
-export * from "./core/DialogContent";
-export { default as DialogContent } from "./core/DialogContent";
-export * from "./core/DialogPaper";
-export { default as DialogPaper } from "./core/DialogPaper";
-export * from "./core/DialogTitle";
-export { default as DialogTitle } from "./core/DialogTitle";
+export * from "./core/Dialog/components/DialogActions";
+export { default as DialogActions } from "./core/Dialog/components/DialogActions";
+export * from "./core/Dialog/components/DialogContent";
+export { default as DialogContent } from "./core/Dialog/components/DialogContent";
+export * from "./core/Dialog/components/DialogPaper";
+export { default as DialogPaper } from "./core/Dialog/components/DialogPaper";
+export * from "./core/Dialog/components/DialogTitle";
+export { default as DialogTitle } from "./core/Dialog/components/DialogTitle";
 export * from "./core/Dropdown";
 export { default as Dropdown } from "./core/Dropdown";
 export * from "./core/DropdownMenu";
@@ -63,10 +63,10 @@ export * from "./core/Link";
 export { default as Link } from "./core/Link";
 export * from "./core/List";
 export { default as List } from "./core/List";
-export * from "./core/ListItem";
-export { default as ListItem } from "./core/ListItem";
-export * from "./core/ListSubheader";
-export { default as ListSubheader } from "./core/ListSubheader";
+export * from "./core/List/components/ListItem";
+export { default as ListItem } from "./core/List/components/ListItem";
+export * from "./core/List/components/ListSubheader";
+export { default as ListSubheader } from "./core/List/components/ListSubheader";
 export * from "./core/LoadingIndicator";
 export { default as LoadingIndicator } from "./core/LoadingIndicator";
 export * from "./core/Menu";
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 00a910749..c8ba561df 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -6,9 +6,9 @@
         "composite": true
     },
     "include": [
-        "src/**/*",
+        "./src/**/*",
         "jest.setup.ts",
-        "../../.eslintrc.js",
+        "../../.eslintrc.js"
     ],
     "exclude": [
         "node_modules"
diff --git a/packages/data-viz/README.md b/packages/data-viz/README.md
index 15fe574f8..57d89ceea 100644
--- a/packages/data-viz/README.md
+++ b/packages/data-viz/README.md
@@ -4,7 +4,7 @@ The Science Design System (SDS) brings consistency and universal standards to CZ
 
 ## Design System Documentation
 
-`@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spacings`, `typography`, etc., so you can leverage the theme properly in your application.
+`@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spaces`, `typography`, etc., so you can leverage the theme properly in your application.
 
 ![Science Design System Zeroheight Homepage Snapshot](https://user-images.githubusercontent.com/6309723/155802483-366008aa-7380-4a01-b356-ae0ab02f4f3b.png)
 
@@ -93,24 +93,24 @@ export const Title - styled(Typography)`
 
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { getColors, getCorners } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way
   // to access the custom theme object
-      ${(props) => {
-        // getColors() is a selector that picks out colors from the theme object
-        const colors = getColors(props);
-        // getSpaces() is a selector that picks out spacings from the theme object
-        const spacings = getSpaces(props);
+  ${(props) => {
+    // getColors() is a selector that picks out colors from the theme object
+    const colors = getColors(props);
+    // getSpaces() is a selector that picks out spaces from the theme object
+    const spaces = getSpaces(props);
 
-        return `
+    return `
           background-color: ${colors?.gray[500]};
-          padding-bottom: ${spacings?.m}px;
-          margin-bottom: ${spacings?.xxl}px;
+          padding-bottom: ${spaces?.m}px;
+          margin-bottom: ${spaces?.xxl}px;
         `;
-      }}
+  }}
 `;
 ```
 
@@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
 
 ```html
 // installs the sds font from google fonts
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
 <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"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
 />
 ```
diff --git a/packages/data-viz/package.json b/packages/data-viz/package.json
index 88042d9ea..2e31a7bb5 100644
--- a/packages/data-viz/package.json
+++ b/packages/data-viz/package.json
@@ -67,6 +67,7 @@
     "react-dom": ">=17.0.1"
   },
   "devDependencies": {
+    "@geometricpanda/storybook-addon-badges": "^2.0.2",
     "@reduxjs/toolkit": "^2.1.0",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
diff --git a/packages/data-viz/src/common/styles-dictionary/css/variables.css b/packages/data-viz/src/common/styles-dictionary/css/variables.css
index 44d5e310c..5b2336009 100644
--- a/packages/data-viz/src/common/styles-dictionary/css/variables.css
+++ b/packages/data-viz/src/common/styles-dictionary/css/variables.css
@@ -1,75 +1,200 @@
 :root {
-  --sds-font-letter-spacing-default: 0.3px;
-  --sds-font-letter-spacing-caps: 1px;
   --sds-font-color: black;
-  --sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxs-600-text-transform:  uppercase;
-  --sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-color-overlay-100: rgba(0, 0, 0, 0.08);
-  --sds-color-overlay-200: rgba(0, 0, 0, 0.03);
-  --sds-color-beta-100: #f4f0f9;
-  --sds-color-beta-200: #f0ebf6;
-  --sds-color-beta-400: #7a41ce;
-  --sds-color-beta-600: #693bac;
-  --sds-color-error-100: #fef2f2;
-  --sds-color-error-200: #f8e8e8;
-  --sds-color-error-400: #dc132c;
-  --sds-color-error-600: #b70016;
-  --sds-color-gray-100: #f8f8f8;
-  --sds-color-gray-200: #eaeaea;
-  --sds-color-gray-300: #cccccc;
-  --sds-color-gray-400: #999999;
-  --sds-color-gray-500: #767676;
-  --sds-color-gray-600: #545454;
-  --sds-color-gray-black: #000000;
-  --sds-color-gray-white: #ffffff;
-  --sds-color-info-100: #eff2fc;
-  --sds-color-info-200: #ebeffc;
-  --sds-color-info-400: #3867fa;
-  --sds-color-info-600: #223f9c;
-  --sds-color-primary-100: #f8f9fe;
-  --sds-color-primary-200: #eff2fc;
-  --sds-color-primary-300: #a9bdfc;
-  --sds-color-primary-400: #3867fa;
-  --sds-color-primary-500: #2b52cd;
-  --sds-color-primary-600: #223f9c;
-  --sds-color-secondary-400: #9bc74e;
-  --sds-color-success-100: #ecf5f0;
-  --sds-color-success-200: #e6f7ed;
-  --sds-color-success-400: #3cb371;
-  --sds-color-success-600: #1c7f48;
-  --sds-color-warning-100: #fcf6ec;
-  --sds-color-warning-200: #fff3e1;
-  --sds-color-warning-400: #f5a623;
-  --sds-color-warning-600: #946314;
-  --sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-  --sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-  --sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
-  --sds-borders-error-400: 1px solid #dc132c;
+  --sds-font-font-family-body: "Inter", sans-serif;
+  --sds-font-font-family-caps: "Inter", sans-serif;
+  --sds-font-font-family-code: "IBM Plex Mono", monospace;
+  --sds-font-font-family-header: "Inter", sans-serif;
+  --sds-font-font-family-tabular: "Inter", sans-serif;
+  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
+  --sds-font-body-xxxs-400-letter-spacing: 0.1px;
+  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-body-xxxs-600-letter-spacing: 0.1px;
+  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
+  --sds-font-body-xxs-400-letter-spacing: 0.1px;
+  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-body-xxs-600-letter-spacing: 0.1px;
+  --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
+  --sds-font-body-xs-400-letter-spacing: 0.08px;
+  --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
+  --sds-font-body-xs-600-letter-spacing: 0.08px;
+  --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
+  --sds-font-body-s-400-letter-spacing: 0.08px;
+  --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
+  --sds-font-body-s-600-letter-spacing: 0.08px;
+  --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
+  --sds-font-body-m-400-letter-spacing: 0px;
+  --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
+  --sds-font-body-m-600-letter-spacing: 0px;
+  --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
+  --sds-font-body-l-400-letter-spacing: 0px;
+  --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
+  --sds-font-body-l-600-letter-spacing: 0px;
+  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
+  --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
+  --sds-font-caps-xxxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
+  --sds-font-caps-xxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-caps-xxs-600-letter-spacing: 0.5px;
+  --sds-font-caps-xxs-600-text-transform: uppercase;
+  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-header-xxxs-600-letter-spacing: 0.1px;
+  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-header-xxs-600-letter-spacing: 0.1px;
+  --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
+  --sds-font-header-xs-600-letter-spacing: 0.08px;
+  --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
+  --sds-font-header-s-600-letter-spacing: 0.08px;
+  --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
+  --sds-font-header-m-600-letter-spacing: 0px;
+  --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
+  --sds-font-header-l-600-letter-spacing: 0px;
+  --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
+  --sds-font-header-xl-600-letter-spacing: 0px;
+  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
+  --sds-font-header-xxl-600-letter-spacing: 0px;
+  --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
+  --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-xs-400-letter-spacing: 0px;
+  --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
+  --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-xs-600-letter-spacing: 0px;
+  --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
+  --sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-s-400-letter-spacing: 0px;
+  --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
+  --sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-s-600-letter-spacing: 0px;
+  --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
+  --sds-font-code-xs-400-letter-spacing: 0px;
+  --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
+  --sds-font-code-xs-600-letter-spacing: 0px;
+  --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
+  --sds-font-code-s-400-letter-spacing: 0px;
+  --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
+  --sds-font-code-s-600-letter-spacing: 0px;
+  --sds-color-primitive-blue-100: #f5f9ff;
+  --sds-color-primitive-blue-200: #e9f1ff;
+  --sds-color-primitive-blue-300: #a6c9ff;
+  --sds-color-primitive-blue-400: #0b68f8;
+  --sds-color-primitive-blue-500: #0142a4;
+  --sds-color-primitive-blue-600: #002660;
+  --sds-color-primitive-gray-100: #f8f8f8;
+  --sds-color-primitive-gray-200: #eaeaea;
+  --sds-color-primitive-gray-300: #cccccc;
+  --sds-color-primitive-gray-400: #999999;
+  --sds-color-primitive-gray-500: #767676;
+  --sds-color-primitive-gray-600: #545454;
+  --sds-color-primitive-gray-black: #000000;
+  --sds-color-primitive-gray-white: #ffffff;
+  --sds-color-primitive-green-100: #ecf5f0;
+  --sds-color-primitive-green-200: #e6f7ed;
+  --sds-color-primitive-green-400: #3cb371;
+  --sds-color-primitive-green-500: #349a61;
+  --sds-color-primitive-green-600: #1c7f48;
+  --sds-color-primitive-purple-100: #f4f0f9;
+  --sds-color-primitive-purple-200: #f0ebf6;
+  --sds-color-primitive-purple-400: #7a41ce;
+  --sds-color-primitive-purple-500: #703cbe;
+  --sds-color-primitive-purple-600: #693bac;
+  --sds-color-primitive-red-100: #fef2f2;
+  --sds-color-primitive-red-200: #f8e8e8;
+  --sds-color-primitive-red-400: #dc132c;
+  --sds-color-primitive-red-500: #c61128;
+  --sds-color-primitive-red-600: #b70016;
+  --sds-color-primitive-yellow-100: #fcf6ec;
+  --sds-color-primitive-yellow-200: #fff3e1;
+  --sds-color-primitive-yellow-400: #f5a623;
+  --sds-color-primitive-yellow-500: #d8921f;
+  --sds-color-primitive-yellow-600: #946314;
+  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
+  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
+  --sds-color-semantic-text-base-primary: #000000;
+  --sds-color-semantic-text-base-secondary: #767676;
+  --sds-color-semantic-text-base-disabled: #cccccc;
+  --sds-color-semantic-text-base-on-fill: #ffffff;
+  --sds-color-semantic-text-base-on-fill-disabled: #999999;
+  --sds-color-semantic-text-base-accent: #002660;
+  --sds-color-semantic-text-action-default: #0b68f8;
+  --sds-color-semantic-text-action-hover: #0142a4;
+  --sds-color-semantic-text-action-pressed: #002660;
+  --sds-color-semantic-text-beta: #693bac;
+  --sds-color-semantic-text-info: #002660;
+  --sds-color-semantic-text-negative: #b70016;
+  --sds-color-semantic-text-notice: #946314;
+  --sds-color-semantic-text-positive: #1c7f48;
+  --sds-color-semantic-component-base-fill: #ffffff;
+  --sds-color-semantic-component-base-fill-hover: #f8f8f8;
+  --sds-color-semantic-component-base-fill-pressed: #f8f8f8;
+  --sds-color-semantic-component-base-fill-open: #f8f8f8;
+  --sds-color-semantic-component-base-fill-selected: #000000;
+  --sds-color-semantic-component-base-fill-disabled: #cccccc;
+  --sds-color-semantic-component-base-on-fill-disabled: #999999;
+  --sds-color-semantic-component-base-surface-primary: #ffffff;
+  --sds-color-semantic-component-base-surface-secondary: #f8f8f8;
+  --sds-color-semantic-component-base-surface-tertiary: #eaeaea;
+  --sds-color-semantic-component-base-divider: #eaeaea;
+  --sds-color-semantic-component-base-border: #999999;
+  --sds-color-semantic-component-base-border-hover: #000000;
+  --sds-color-semantic-component-base-border-disabled: #cccccc;
+  --sds-color-semantic-component-base-icon: #767676;
+  --sds-color-semantic-component-base-icon-hover: #000000;
+  --sds-color-semantic-component-base-icon-pressed: #000000;
+  --sds-color-semantic-component-base-icon-disabled: #cccccc;
+  --sds-color-semantic-component-accent-fill: #0b68f8;
+  --sds-color-semantic-component-accent-fill-hover: #0142a4;
+  --sds-color-semantic-component-accent-fill-pressed: #002660;
+  --sds-color-semantic-component-accent-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-accent-fill-disabled: #a6c9ff;
+  --sds-color-semantic-component-accent-surface: #e9f1ff;
+  --sds-color-semantic-component-accent-border: #0b68f8;
+  --sds-color-semantic-component-accent-border-hover: #0142a4;
+  --sds-color-semantic-component-accent-border-open: #0b68f8;
+  --sds-color-semantic-component-accent-border-focus: #0b68f8;
+  --sds-color-semantic-component-accent-border-selected: #0b68f8;
+  --sds-color-semantic-component-accent-border-disabled: #a6c9ff;
+  --sds-color-semantic-component-accent-icon: #0b68f8;
+  --sds-color-semantic-component-beta-fill: #7a41ce;
+  --sds-color-semantic-component-beta-fill-hover: #703cbe;
+  --sds-color-semantic-component-beta-fill-pressed: #693bac;
+  --sds-color-semantic-component-beta-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-beta-surface: #f0ebf6;
+  --sds-color-semantic-component-beta-border: #7a41ce;
+  --sds-color-semantic-component-beta-icon: #7a41ce;
+  --sds-color-semantic-component-info-fill: #0b68f8;
+  --sds-color-semantic-component-info-fill-hover: #0142a4;
+  --sds-color-semantic-component-info-fill-pressed: #002660;
+  --sds-color-semantic-component-info-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-info-surface: #e9f1ff;
+  --sds-color-semantic-component-info-border: #0b68f8;
+  --sds-color-semantic-component-info-icon: #0b68f8;
+  --sds-color-semantic-component-negative-fill: #dc132c;
+  --sds-color-semantic-component-negative-fill-hover: #c61128;
+  --sds-color-semantic-component-negative-fill-pressed: #b70016;
+  --sds-color-semantic-component-negative-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-negative-surface: #f8e8e8;
+  --sds-color-semantic-component-negative-border: #dc132c;
+  --sds-color-semantic-component-negative-icon: #dc132c;
+  --sds-color-semantic-component-notice-fill: #f5a623;
+  --sds-color-semantic-component-notice-fill-hover: #d8921f;
+  --sds-color-semantic-component-notice-fill-pressed: #946314;
+  --sds-color-semantic-component-notice-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-notice-surface: #fff3e1;
+  --sds-color-semantic-component-notice-border: #f5a623;
+  --sds-color-semantic-component-notice-icon: #f5a623;
+  --sds-color-semantic-component-positive-fill: #3cb371;
+  --sds-color-semantic-component-positive-fill-hover: #349a61;
+  --sds-color-semantic-component-positive-fill-pressed: #1c7f48;
+  --sds-color-semantic-component-positive-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-positive-surface: #e6f7ed;
+  --sds-color-semantic-component-positive-border: #3cb371;
+  --sds-color-semantic-component-positive-icon: #3cb371;
+  --sds-drop-shadows-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+  --sds-drop-shadows-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+  --sds-drop-shadows-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  --sds-borders-error-400: 1px solid #fef2f2;
   --sds-borders-gray-100: 1px solid #f8f8f8;
   --sds-borders-gray-200: 1px solid #eaeaea;
   --sds-borders-gray-300: 1px solid #cccccc;
@@ -78,30 +203,30 @@
   --sds-borders-gray-dashed: 2px dashed #999999;
   --sds-borders-link-dashed: 1px dashed;
   --sds-borders-link-solid: 1px solid;
-  --sds-borders-primary-300: 1px solid #a9bdfc;
-  --sds-borders-primary-400: 1px solid #3867fa;
-  --sds-borders-primary-500: 1px solid #2b52cd;
-  --sds-borders-primary-600: 1px solid #223f9c;
-  --sds-borders-primary-dashed: 2px dashed #3867fa;
-  --sds-borders-success-400: 1px solid #3cb371;
-  --sds-borders-warning-400: 1px solid #f5a623;
-  --sds-spaces-default: 10px;
+  --sds-borders-primary-300: 1px solid #a6c9ff;
+  --sds-borders-primary-400: 1px solid #0b68f8;
+  --sds-borders-primary-500: 1px solid #0142a4;
+  --sds-borders-primary-600: 1px solid #002660;
+  --sds-borders-primary-dashed: 2px dashed #0b68f8;
+  --sds-borders-success-400: 1px solid #ecf5f0;
+  --sds-borders-warning-400: 1px solid #fcf6ec;
+  --sds-spaces-default: 12px;
   --sds-spaces-xxxs: 2px;
   --sds-spaces-xxs: 4px;
   --sds-spaces-xs: 6px;
   --sds-spaces-s: 8px;
-  --sds-spaces-m: 10px;
-  --sds-spaces-l: 14px;
-  --sds-spaces-xl: 22px;
-  --sds-spaces-xxl: 38px;
+  --sds-spaces-m: 12px;
+  --sds-spaces-l: 16px;
+  --sds-spaces-xl: 24px;
+  --sds-spaces-xxl: 40px;
   --sds-icon-sizes-input-height: 16px;
   --sds-icon-sizes-input-width: 16px;
-  --sds-icon-sizes-xs-height: 10px;
-  --sds-icon-sizes-xs-width: 10px;
-  --sds-icon-sizes-s-height: 14px;
-  --sds-icon-sizes-s-width: 14px;
-  --sds-icon-sizes-l-height: 22px;
-  --sds-icon-sizes-l-width: 22px;
+  --sds-icon-sizes-xs-height: 12px;
+  --sds-icon-sizes-xs-width: 12px;
+  --sds-icon-sizes-s-height: 16px;
+  --sds-icon-sizes-s-width: 16px;
+  --sds-icon-sizes-l-height: 24px;
+  --sds-icon-sizes-l-width: 24px;
   --sds-icon-sizes-xl-height: 32px;
   --sds-icon-sizes-xl-width: 32px;
   --sds-corners-corner-l: 20px;
diff --git a/packages/data-viz/src/common/styles-dictionary/json/tailwind.json b/packages/data-viz/src/common/styles-dictionary/json/tailwind.json
index 1b5bc3527..5241e82a9 100644
--- a/packages/data-viz/src/common/styles-dictionary/json/tailwind.json
+++ b/packages/data-viz/src/common/styles-dictionary/json/tailwind.json
@@ -1,13 +1,10 @@
 {
   "fontFamily": {
-    "sds-regular": [
-      "Open Sans",
-      "OpenSans-Regular"
-    ],
-    "sds-semibold": [
-      "Open Sans",
-      "OpenSans-SemiBold"
-    ]
+    "sds-body": "\"Inter\", sans-serif",
+    "sds-caps": "\"Inter\", sans-serif",
+    "sds-code": "\"IBM Plex Mono\", monospace",
+    "sds-header": "\"Inter\", sans-serif",
+    "sds-tabular": "\"Inter\", sans-serif"
   },
   "fontSize": {
     "sds-body-xxxs": "11px",
@@ -26,7 +23,57 @@
     "sds-header-m": "16px",
     "sds-header-l": "18px",
     "sds-header-xl": "22px",
-    "sds-header-xxl": "26px"
+    "sds-header-xxl": "26px",
+    "sds-tabular-xs": "13px",
+    "sds-tabular-s": "14px",
+    "sds-code-xs": "13px",
+    "sds-code-s": "14px"
+  },
+  "fontVariantNumeric": {
+    "sds-body-xxxs": "normal",
+    "sds-body-xxs": "normal",
+    "sds-body-xs": "normal",
+    "sds-body-s": "normal",
+    "sds-body-m": "normal",
+    "sds-body-l": "normal",
+    "sds-caps-xxxxs": "normal",
+    "sds-caps-xxxs": "normal",
+    "sds-caps-xxs": "normal",
+    "sds-header-xxxs": "normal",
+    "sds-header-xxs": "normal",
+    "sds-header-xs": "normal",
+    "sds-header-s": "normal",
+    "sds-header-m": "normal",
+    "sds-header-l": "normal",
+    "sds-header-xl": "normal",
+    "sds-header-xxl": "normal",
+    "sds-tabular-xs": "tabular-nums",
+    "sds-tabular-s": "tabular-nums",
+    "sds-code-xs": "normal",
+    "sds-code-s": "normal"
+  },
+  "letterSpacing": {
+    "sds-body-xxxs": "0.1px",
+    "sds-body-xxs": "0.1px",
+    "sds-body-xs": "0.08px",
+    "sds-body-s": "0.08px",
+    "sds-body-m": "0px",
+    "sds-body-l": "0px",
+    "sds-caps-xxxxs": "0.5px",
+    "sds-caps-xxxs": "0.5px",
+    "sds-caps-xxs": "0.5px",
+    "sds-header-xxxs": "0.1px",
+    "sds-header-xxs": "0.1px",
+    "sds-header-xs": "0.08px",
+    "sds-header-s": "0.08px",
+    "sds-header-m": "0px",
+    "sds-header-l": "0px",
+    "sds-header-xl": "0px",
+    "sds-header-xxl": "0px",
+    "sds-tabular-xs": "0px",
+    "sds-tabular-s": "0px",
+    "sds-code-xs": "0px",
+    "sds-code-s": "0px"
   },
   "lineHeight": {
     "sds-body-xxxs": "11px",
@@ -45,20 +92,47 @@
     "sds-header-m": "16px",
     "sds-header-l": "18px",
     "sds-header-xl": "22px",
-    "sds-header-xxl": "26px"
+    "sds-header-xxl": "26px",
+    "sds-tabular-xs": "13px",
+    "sds-tabular-s": "14px",
+    "sds-code-xs": "13px",
+    "sds-code-s": "14px"
+  },
+  "textTransform": {
+    "sds-body-xxxs": "none",
+    "sds-body-xxs": "none",
+    "sds-body-xs": "none",
+    "sds-body-s": "none",
+    "sds-body-m": "none",
+    "sds-body-l": "none",
+    "sds-caps-xxxxs": " uppercase",
+    "sds-caps-xxxs": " uppercase",
+    "sds-caps-xxs": " uppercase",
+    "sds-header-xxxs": "none",
+    "sds-header-xxs": "none",
+    "sds-header-xs": "none",
+    "sds-header-s": "none",
+    "sds-header-m": "none",
+    "sds-header-l": "none",
+    "sds-header-xl": "none",
+    "sds-header-xxl": "none",
+    "sds-tabular-xs": "none",
+    "sds-tabular-s": "none",
+    "sds-code-xs": "none",
+    "sds-code-s": "none"
   },
   "height": {
     "sds-icon-input": "16px",
-    "sds-icon-xs": "10px",
-    "sds-icon-s": "14px",
-    "sds-icon-l": "22px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
+    "sds-icon-l": "24px",
     "sds-icon-xl": "32px"
   },
   "width": {
     "sds-icon-input": "16px",
-    "sds-icon-xs": "10px",
-    "sds-icon-s": "14px",
-    "sds-icon-l": "22px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
+    "sds-icon-l": "24px",
     "sds-icon-xl": "32px"
   },
   "borderRadius": {
@@ -73,75 +147,132 @@
     "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
   },
   "colors": {
-    "sds-overlay": {
-      "100": "rgba(0, 0, 0, 0.08)",
-      "200": "rgba(0, 0, 0, 0.03)"
-    },
-    "sds-beta": {
-      "100": "#f4f0f9",
-      "200": "#f0ebf6",
-      "400": "#7a41ce",
-      "600": "#693bac"
-    },
-    "sds-error": {
-      "100": "#fef2f2",
-      "200": "#f8e8e8",
-      "400": "#dc132c",
-      "600": "#b70016"
-    },
-    "sds-gray": {
-      "100": "#f8f8f8",
-      "200": "#eaeaea",
-      "300": "#cccccc",
-      "400": "#999999",
-      "500": "#767676",
-      "600": "#545454",
-      "black": "#000000",
-      "white": "#ffffff"
-    },
-    "sds-info": {
-      "100": "#eff2fc",
-      "200": "#ebeffc",
-      "400": "#3867fa",
-      "600": "#223f9c"
-    },
-    "sds-primary": {
-      "100": "#f8f9fe",
-      "200": "#eff2fc",
-      "300": "#a9bdfc",
-      "400": "#3867fa",
-      "500": "#2b52cd",
-      "600": "#223f9c"
-    },
-    "sds-secondary": {
-      "400": "#9bc74e"
-    },
-    "sds-success": {
-      "100": "#ecf5f0",
-      "200": "#e6f7ed",
-      "400": "#3cb371",
-      "600": "#1c7f48"
-    },
-    "sds-warning": {
-      "100": "#fcf6ec",
-      "200": "#fff3e1",
-      "400": "#f5a623",
-      "600": "#946314"
-    }
-  },
-  "letterSpacing": {
-    "sds-default": "0.3px",
-    "sds-caps": "1px"
+    "sds-color-primitive-blue-100": "#F5F9FF",
+    "sds-color-primitive-blue-200": "#E9F1FF",
+    "sds-color-primitive-blue-300": "#A6C9FF",
+    "sds-color-primitive-blue-400": "#0B68F8",
+    "sds-color-primitive-blue-500": "#0142A4",
+    "sds-color-primitive-blue-600": "#002660",
+    "sds-color-primitive-gray-100": "#F8F8F8",
+    "sds-color-primitive-gray-200": "#EAEAEA",
+    "sds-color-primitive-gray-300": "#CCCCCC",
+    "sds-color-primitive-gray-400": "#999999",
+    "sds-color-primitive-gray-500": "#767676",
+    "sds-color-primitive-gray-600": "#545454",
+    "sds-color-primitive-gray-black": "#000000",
+    "sds-color-primitive-gray-white": "#FFFFFF",
+    "sds-color-primitive-green-100": "#ECF5F0",
+    "sds-color-primitive-green-200": "#E6F7ED",
+    "sds-color-primitive-green-400": "#3CB371",
+    "sds-color-primitive-green-500": "#349A61",
+    "sds-color-primitive-green-600": "#1C7F48",
+    "sds-color-primitive-purple-100": "#F4F0F9",
+    "sds-color-primitive-purple-200": "#F0EBF6",
+    "sds-color-primitive-purple-400": "#7A41CE",
+    "sds-color-primitive-purple-500": "#703CBE",
+    "sds-color-primitive-purple-600": "#693BAC",
+    "sds-color-primitive-red-100": "#FEF2F2",
+    "sds-color-primitive-red-200": "#F8E8E8",
+    "sds-color-primitive-red-400": "#DC132C",
+    "sds-color-primitive-red-500": "#C61128",
+    "sds-color-primitive-red-600": "#B70016",
+    "sds-color-primitive-yellow-100": "#FCF6EC",
+    "sds-color-primitive-yellow-200": "#FFF3E1",
+    "sds-color-primitive-yellow-400": "#F5A623",
+    "sds-color-primitive-yellow-500": "#D8921F",
+    "sds-color-primitive-yellow-600": "#946314",
+    "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)",
+    "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)",
+    "sds-color-semantic-text-base-primary": "#000000",
+    "sds-color-semantic-text-base-secondary": "#767676",
+    "sds-color-semantic-text-base-disabled": "#CCCCCC",
+    "sds-color-semantic-text-base-on-fill": "#FFFFFF",
+    "sds-color-semantic-text-base-on-fill-disabled": "#999999",
+    "sds-color-semantic-text-base-accent": "#002660",
+    "sds-color-semantic-text-action-default": "#0B68F8",
+    "sds-color-semantic-text-action-hover": "#0142A4",
+    "sds-color-semantic-text-action-pressed": "#002660",
+    "sds-color-semantic-text-beta": "#693BAC",
+    "sds-color-semantic-text-info": "#002660",
+    "sds-color-semantic-text-negative": "#B70016",
+    "sds-color-semantic-text-notice": "#946314",
+    "sds-color-semantic-text-positive": "#1C7F48",
+    "sds-color-semantic-component-base-fill": "#FFFFFF",
+    "sds-color-semantic-component-base-fill-hover": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-pressed": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-open": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-selected": "#000000",
+    "sds-color-semantic-component-base-fill-disabled": "#CCCCCC",
+    "sds-color-semantic-component-base-on-fill-disabled": "#999999",
+    "sds-color-semantic-component-base-surface-primary": "#FFFFFF",
+    "sds-color-semantic-component-base-surface-secondary": "#F8F8F8",
+    "sds-color-semantic-component-base-surface-tertiary": "#EAEAEA",
+    "sds-color-semantic-component-base-divider": "#EAEAEA",
+    "sds-color-semantic-component-base-border": "#999999",
+    "sds-color-semantic-component-base-border-hover": "#000000",
+    "sds-color-semantic-component-base-border-disabled": "#CCCCCC",
+    "sds-color-semantic-component-base-icon": "#767676",
+    "sds-color-semantic-component-base-icon-hover": "#000000",
+    "sds-color-semantic-component-base-icon-pressed": "#000000",
+    "sds-color-semantic-component-base-icon-disabled": "#CCCCCC",
+    "sds-color-semantic-component-accent-fill": "#0B68F8",
+    "sds-color-semantic-component-accent-fill-hover": "#0142A4",
+    "sds-color-semantic-component-accent-fill-pressed": "#002660",
+    "sds-color-semantic-component-accent-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-accent-fill-disabled": "#A6C9FF",
+    "sds-color-semantic-component-accent-surface": "#E9F1FF",
+    "sds-color-semantic-component-accent-border": "#0B68F8",
+    "sds-color-semantic-component-accent-border-hover": "#0142A4",
+    "sds-color-semantic-component-accent-border-open": "#0B68F8",
+    "sds-color-semantic-component-accent-border-focus": "#0B68F8",
+    "sds-color-semantic-component-accent-border-selected": "#0B68F8",
+    "sds-color-semantic-component-accent-border-disabled": "#A6C9FF",
+    "sds-color-semantic-component-accent-icon": "#0B68F8",
+    "sds-color-semantic-component-beta-fill": "#7A41CE",
+    "sds-color-semantic-component-beta-fill-hover": "#703CBE",
+    "sds-color-semantic-component-beta-fill-pressed": "#693BAC",
+    "sds-color-semantic-component-beta-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-beta-surface": "#F0EBF6",
+    "sds-color-semantic-component-beta-border": "#7A41CE",
+    "sds-color-semantic-component-beta-icon": "#7A41CE",
+    "sds-color-semantic-component-info-fill": "#0B68F8",
+    "sds-color-semantic-component-info-fill-hover": "#0142A4",
+    "sds-color-semantic-component-info-fill-pressed": "#002660",
+    "sds-color-semantic-component-info-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-info-surface": "#E9F1FF",
+    "sds-color-semantic-component-info-border": "#0B68F8",
+    "sds-color-semantic-component-info-icon": "#0B68F8",
+    "sds-color-semantic-component-negative-fill": "#DC132C",
+    "sds-color-semantic-component-negative-fill-hover": "#C61128",
+    "sds-color-semantic-component-negative-fill-pressed": "#B70016",
+    "sds-color-semantic-component-negative-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-negative-surface": "#F8E8E8",
+    "sds-color-semantic-component-negative-border": "#DC132C",
+    "sds-color-semantic-component-negative-icon": "#DC132C",
+    "sds-color-semantic-component-notice-fill": "#F5A623",
+    "sds-color-semantic-component-notice-fill-hover": "#D8921F",
+    "sds-color-semantic-component-notice-fill-pressed": "#946314",
+    "sds-color-semantic-component-notice-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-notice-surface": "#FFF3E1",
+    "sds-color-semantic-component-notice-border": "#F5A623",
+    "sds-color-semantic-component-notice-icon": "#F5A623",
+    "sds-color-semantic-component-positive-fill": "#3CB371",
+    "sds-color-semantic-component-positive-fill-hover": "#349A61",
+    "sds-color-semantic-component-positive-fill-pressed": "#1C7F48",
+    "sds-color-semantic-component-positive-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-positive-surface": "#E6F7ED",
+    "sds-color-semantic-component-positive-border": "#3CB371",
+    "sds-color-semantic-component-positive-icon": "#3CB371"
   },
   "spacing": {
-    "sds-default": "10px",
+    "sds-default": "12px",
     "sds-xxxs": "2px",
     "sds-xxs": "4px",
     "sds-xs": "6px",
     "sds-s": "8px",
-    "sds-m": "10px",
-    "sds-l": "14px",
-    "sds-xl": "22px",
-    "sds-xxl": "38px"
+    "sds-m": "12px",
+    "sds-l": "16px",
+    "sds-xl": "24px",
+    "sds-xxl": "40px"
   }
 }
\ No newline at end of file
diff --git a/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss b/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss
index 2d8308510..a05415fc1 100644
--- a/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss
@@ -1,106 +1,230 @@
-$sds-font-letter-spacing-default: 0.3px;
-$sds-font-letter-spacing-caps: 1px;
 $sds-font-color: black;
-$sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-font-family-body: "Inter", sans-serif;
+$sds-font-font-family-caps: "Inter", sans-serif;
+$sds-font-font-family-code: "IBM Plex Mono", monospace;
+$sds-font-font-family-header: "Inter", sans-serif;
+$sds-font-font-family-tabular: "Inter", sans-serif;
+$sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
+$sds-font-body-xxxs-400-letter-spacing: 0.1px;
+$sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-body-xxxs-600-letter-spacing: 0.1px;
+$sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
+$sds-font-body-xxs-400-letter-spacing: 0.1px;
+$sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-body-xxs-600-letter-spacing: 0.1px;
+$sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
+$sds-font-body-xs-400-letter-spacing: 0.08px;
+$sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
+$sds-font-body-xs-600-letter-spacing: 0.08px;
+$sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
+$sds-font-body-s-400-letter-spacing: 0.08px;
+$sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
+$sds-font-body-s-600-letter-spacing: 0.08px;
+$sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
+$sds-font-body-m-400-letter-spacing: 0px;
+$sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
+$sds-font-body-m-600-letter-spacing: 0px;
+$sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
+$sds-font-body-l-400-letter-spacing: 0px;
+$sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
+$sds-font-body-l-600-letter-spacing: 0px;
+$sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
+$sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-caps-xxxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-caps-xxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxs-600-text-transform:  uppercase;
-$sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
-$sds-color-overlay-100: rgba(0, 0, 0, 0.08);
-$sds-color-overlay-200: rgba(0, 0, 0, 0.03);
-$sds-color-beta-100: #f4f0f9;
-$sds-color-beta-200: #f0ebf6;
-$sds-color-beta-400: #7a41ce;
-$sds-color-beta-600: #693bac;
-$sds-color-error-100: #fef2f2;
-$sds-color-error-200: #f8e8e8;
-$sds-color-error-400: #dc132c;
-$sds-color-error-600: #b70016;
-$sds-color-gray-100: #f8f8f8;
-$sds-color-gray-200: #eaeaea;
-$sds-color-gray-300: #cccccc;
-$sds-color-gray-400: #999999;
-$sds-color-gray-500: #767676;
-$sds-color-gray-600: #545454;
-$sds-color-gray-black: #000000;
-$sds-color-gray-white: #ffffff;
-$sds-color-info-100: #eff2fc;
-$sds-color-info-200: #ebeffc;
-$sds-color-info-400: #3867fa;
-$sds-color-info-600: #223f9c;
-$sds-color-primary-100: #f8f9fe;
-$sds-color-primary-200: #eff2fc;
-$sds-color-primary-300: #a9bdfc;
-$sds-color-primary-400: #3867fa;
-$sds-color-primary-500: #2b52cd;
-$sds-color-primary-600: #223f9c;
-$sds-color-secondary-400: #9bc74e;
-$sds-color-success-100: #ecf5f0;
-$sds-color-success-200: #e6f7ed;
-$sds-color-success-400: #3cb371;
-$sds-color-success-600: #1c7f48;
-$sds-color-warning-100: #fcf6ec;
-$sds-color-warning-200: #fff3e1;
-$sds-color-warning-400: #f5a623;
-$sds-color-warning-600: #946314;
+$sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-header-xxxs-600-letter-spacing: 0.1px;
+$sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-header-xxs-600-letter-spacing: 0.1px;
+$sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
+$sds-font-header-xs-600-letter-spacing: 0.08px;
+$sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
+$sds-font-header-s-600-letter-spacing: 0.08px;
+$sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
+$sds-font-header-m-600-letter-spacing: 0px;
+$sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
+$sds-font-header-l-600-letter-spacing: 0px;
+$sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
+$sds-font-header-xl-600-letter-spacing: 0px;
+$sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
+$sds-font-header-xxl-600-letter-spacing: 0px;
+$sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
+$sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
+$sds-font-tabular-xs-400-letter-spacing: 0px;
+$sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
+$sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
+$sds-font-tabular-xs-600-letter-spacing: 0px;
+$sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
+$sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
+$sds-font-tabular-s-400-letter-spacing: 0px;
+$sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
+$sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
+$sds-font-tabular-s-600-letter-spacing: 0px;
+$sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
+$sds-font-code-xs-400-letter-spacing: 0px;
+$sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
+$sds-font-code-xs-600-letter-spacing: 0px;
+$sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
+$sds-font-code-s-400-letter-spacing: 0px;
+$sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
+$sds-font-code-s-600-letter-spacing: 0px;
+$sds-color-primitive-blue-100: #F5F9FF;
+$sds-color-primitive-blue-200: #E9F1FF;
+$sds-color-primitive-blue-300: #A6C9FF;
+$sds-color-primitive-blue-400: #0B68F8;
+$sds-color-primitive-blue-500: #0142A4;
+$sds-color-primitive-blue-600: #002660;
+$sds-color-primitive-gray-100: #F8F8F8;
+$sds-color-primitive-gray-200: #EAEAEA;
+$sds-color-primitive-gray-300: #CCCCCC;
+$sds-color-primitive-gray-400: #999999;
+$sds-color-primitive-gray-500: #767676;
+$sds-color-primitive-gray-600: #545454;
+$sds-color-primitive-gray-black: #000000;
+$sds-color-primitive-gray-white: #FFFFFF;
+$sds-color-primitive-green-100: #ECF5F0;
+$sds-color-primitive-green-200: #E6F7ED;
+$sds-color-primitive-green-400: #3CB371;
+$sds-color-primitive-green-500: #349A61;
+$sds-color-primitive-green-600: #1C7F48;
+$sds-color-primitive-purple-100: #F4F0F9;
+$sds-color-primitive-purple-200: #F0EBF6;
+$sds-color-primitive-purple-400: #7A41CE;
+$sds-color-primitive-purple-500: #703CBE;
+$sds-color-primitive-purple-600: #693BAC;
+$sds-color-primitive-red-100: #FEF2F2;
+$sds-color-primitive-red-200: #F8E8E8;
+$sds-color-primitive-red-400: #DC132C;
+$sds-color-primitive-red-500: #C61128;
+$sds-color-primitive-red-600: #B70016;
+$sds-color-primitive-yellow-100: #FCF6EC;
+$sds-color-primitive-yellow-200: #FFF3E1;
+$sds-color-primitive-yellow-400: #F5A623;
+$sds-color-primitive-yellow-500: #D8921F;
+$sds-color-primitive-yellow-600: #946314;
+$sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
+$sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
+$sds-color-semantic-text-base-primary: #000000;
+$sds-color-semantic-text-base-secondary: #767676;
+$sds-color-semantic-text-base-disabled: #CCCCCC;
+$sds-color-semantic-text-base-on-fill: #FFFFFF;
+$sds-color-semantic-text-base-on-fill-disabled: #999999;
+$sds-color-semantic-text-base-accent: #002660;
+$sds-color-semantic-text-action-default: #0B68F8;
+$sds-color-semantic-text-action-hover: #0142A4;
+$sds-color-semantic-text-action-pressed: #002660;
+$sds-color-semantic-text-beta: #693BAC;
+$sds-color-semantic-text-info: #002660;
+$sds-color-semantic-text-negative: #B70016;
+$sds-color-semantic-text-notice: #946314;
+$sds-color-semantic-text-positive: #1C7F48;
+$sds-color-semantic-component-base-fill: #FFFFFF;
+$sds-color-semantic-component-base-fill-hover: #F8F8F8;
+$sds-color-semantic-component-base-fill-pressed: #F8F8F8;
+$sds-color-semantic-component-base-fill-open: #F8F8F8;
+$sds-color-semantic-component-base-fill-selected: #000000;
+$sds-color-semantic-component-base-fill-disabled: #CCCCCC;
+$sds-color-semantic-component-base-on-fill-disabled: #999999;
+$sds-color-semantic-component-base-surface-primary: #FFFFFF;
+$sds-color-semantic-component-base-surface-secondary: #F8F8F8;
+$sds-color-semantic-component-base-surface-tertiary: #EAEAEA;
+$sds-color-semantic-component-base-divider: #EAEAEA;
+$sds-color-semantic-component-base-border: #999999;
+$sds-color-semantic-component-base-border-hover: #000000;
+$sds-color-semantic-component-base-border-disabled: #CCCCCC;
+$sds-color-semantic-component-base-icon: #767676;
+$sds-color-semantic-component-base-icon-hover: #000000;
+$sds-color-semantic-component-base-icon-pressed: #000000;
+$sds-color-semantic-component-base-icon-disabled: #CCCCCC;
+$sds-color-semantic-component-accent-fill: #0B68F8;
+$sds-color-semantic-component-accent-fill-hover: #0142A4;
+$sds-color-semantic-component-accent-fill-pressed: #002660;
+$sds-color-semantic-component-accent-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-accent-fill-disabled: #A6C9FF;
+$sds-color-semantic-component-accent-surface: #E9F1FF;
+$sds-color-semantic-component-accent-border: #0B68F8;
+$sds-color-semantic-component-accent-border-hover: #0142A4;
+$sds-color-semantic-component-accent-border-open: #0B68F8;
+$sds-color-semantic-component-accent-border-focus: #0B68F8;
+$sds-color-semantic-component-accent-border-selected: #0B68F8;
+$sds-color-semantic-component-accent-border-disabled: #A6C9FF;
+$sds-color-semantic-component-accent-icon: #0B68F8;
+$sds-color-semantic-component-beta-fill: #7A41CE;
+$sds-color-semantic-component-beta-fill-hover: #703CBE;
+$sds-color-semantic-component-beta-fill-pressed: #693BAC;
+$sds-color-semantic-component-beta-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-beta-surface: #F0EBF6;
+$sds-color-semantic-component-beta-border: #7A41CE;
+$sds-color-semantic-component-beta-icon: #7A41CE;
+$sds-color-semantic-component-info-fill: #0B68F8;
+$sds-color-semantic-component-info-fill-hover: #0142A4;
+$sds-color-semantic-component-info-fill-pressed: #002660;
+$sds-color-semantic-component-info-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-info-surface: #E9F1FF;
+$sds-color-semantic-component-info-border: #0B68F8;
+$sds-color-semantic-component-info-icon: #0B68F8;
+$sds-color-semantic-component-negative-fill: #DC132C;
+$sds-color-semantic-component-negative-fill-hover: #C61128;
+$sds-color-semantic-component-negative-fill-pressed: #B70016;
+$sds-color-semantic-component-negative-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-negative-surface: #F8E8E8;
+$sds-color-semantic-component-negative-border: #DC132C;
+$sds-color-semantic-component-negative-icon: #DC132C;
+$sds-color-semantic-component-notice-fill: #F5A623;
+$sds-color-semantic-component-notice-fill-hover: #D8921F;
+$sds-color-semantic-component-notice-fill-pressed: #946314;
+$sds-color-semantic-component-notice-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-notice-surface: #FFF3E1;
+$sds-color-semantic-component-notice-border: #F5A623;
+$sds-color-semantic-component-notice-icon: #F5A623;
+$sds-color-semantic-component-positive-fill: #3CB371;
+$sds-color-semantic-component-positive-fill-hover: #349A61;
+$sds-color-semantic-component-positive-fill-pressed: #1C7F48;
+$sds-color-semantic-component-positive-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-positive-surface: #E6F7ED;
+$sds-color-semantic-component-positive-border: #3CB371;
+$sds-color-semantic-component-positive-icon: #3CB371;
 $sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
 $sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
 $sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
-$sds-borders-error-400: 1px solid #dc132c;
-$sds-borders-gray-100: 1px solid #f8f8f8;
-$sds-borders-gray-200: 1px solid #eaeaea;
-$sds-borders-gray-300: 1px solid #cccccc;
+$sds-borders-error-400: 1px solid #FEF2F2;
+$sds-borders-gray-100: 1px solid #F8F8F8;
+$sds-borders-gray-200: 1px solid #EAEAEA;
+$sds-borders-gray-300: 1px solid #CCCCCC;
 $sds-borders-gray-400: 1px solid #999999;
 $sds-borders-gray-500: 1px solid #767676;
 $sds-borders-gray-dashed: 2px dashed #999999;
 $sds-borders-link-dashed: 1px dashed;
 $sds-borders-link-solid: 1px solid;
-$sds-borders-primary-300: 1px solid #a9bdfc;
-$sds-borders-primary-400: 1px solid #3867fa;
-$sds-borders-primary-500: 1px solid #2b52cd;
-$sds-borders-primary-600: 1px solid #223f9c;
-$sds-borders-primary-dashed: 2px dashed #3867fa;
-$sds-borders-success-400: 1px solid #3cb371;
-$sds-borders-warning-400: 1px solid #f5a623;
-$sds-spaces-default: 10px;
+$sds-borders-primary-300: 1px solid #A6C9FF;
+$sds-borders-primary-400: 1px solid #0B68F8;
+$sds-borders-primary-500: 1px solid #0142A4;
+$sds-borders-primary-600: 1px solid #002660;
+$sds-borders-primary-dashed: 2px dashed #0B68F8;
+$sds-borders-success-400: 1px solid #ECF5F0;
+$sds-borders-warning-400: 1px solid #FCF6EC;
+$sds-spaces-default: 12px;
 $sds-spaces-xxxs: 2px;
 $sds-spaces-xxs: 4px;
 $sds-spaces-xs: 6px;
 $sds-spaces-s: 8px;
-$sds-spaces-m: 10px;
-$sds-spaces-l: 14px;
-$sds-spaces-xl: 22px;
-$sds-spaces-xxl: 38px;
+$sds-spaces-m: 12px;
+$sds-spaces-l: 16px;
+$sds-spaces-xl: 24px;
+$sds-spaces-xxl: 40px;
 $sds-icon-sizes-input-height: 16px;
 $sds-icon-sizes-input-width: 16px;
-$sds-icon-sizes-xs-height: 10px;
-$sds-icon-sizes-xs-width: 10px;
-$sds-icon-sizes-s-height: 14px;
-$sds-icon-sizes-s-width: 14px;
-$sds-icon-sizes-l-height: 22px;
-$sds-icon-sizes-l-width: 22px;
+$sds-icon-sizes-xs-height: 12px;
+$sds-icon-sizes-xs-width: 12px;
+$sds-icon-sizes-s-height: 16px;
+$sds-icon-sizes-s-width: 16px;
+$sds-icon-sizes-l-height: 24px;
+$sds-icon-sizes-l-width: 24px;
 $sds-icon-sizes-xl-height: 32px;
 $sds-icon-sizes-xl-width: 32px;
 $sds-corners-corner-l: 20px;
diff --git a/packages/data-viz/src/common/styles-dictionary/style-dictionary.json b/packages/data-viz/src/common/styles-dictionary/style-dictionary.json
index 84c82b6d8..5c2fd1a95 100644
--- a/packages/data-viz/src/common/styles-dictionary/style-dictionary.json
+++ b/packages/data-viz/src/common/styles-dictionary/style-dictionary.json
@@ -1,85 +1,109 @@
 {
   "sds": {
     "font": {
-      "letter-spacing": {
-        "default": { "value": "0.3px" },
-        "caps": { "value": "1px" }
-      },
       "color": {
         "value": "black"
       },
-      "font-family": { "value": "'Open Sans', 'OpenSans-Regular'" },
+      "font-family": {
+        "body": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "caps": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "code": {
+          "value": "\"IBM Plex Mono\", monospace"
+        },
+        "header": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "tabular": {
+          "value": "\"Inter\", sans-serif"
+        }
+      },
       "body": {
         "xxxs": {
           "400": {
             "font": {
-              "value": "400 11px/16px {sds.font.font-family.value}"
-            }
+              "value": "400 11px/16px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           },
           "600": {
             "font": {
-              "value": "600 11px/16px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 11px/16px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xxs": {
           "400": {
             "font": {
-              "value": "400 12px/18px {sds.font.font-family.value}"
-            }
+              "value": "400 12px/18px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           },
           "600": {
             "font": {
-              "value": "600 12px/18px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 12px/18px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xs": {
           "400": {
             "font": {
-              "value": "400 13px/20px {sds.font.font-family.value}"
-            }
+              "value": "400 13px/20px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           },
           "600": {
             "font": {
-              "value": "600 13px/20px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 13px/20px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "s": {
           "400": {
             "font": {
-              "value": "400 14px/24px {sds.font.font-family.value}"
-            }
+              "value": "400 14px/24px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           },
           "600": {
             "font": {
-              "value": "600 14px/24px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 14px/24px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "m": {
           "400": {
             "font": {
-              "value": "400 16px/26px {sds.font.font-family.value}"
-            }
+              "value": "400 16px/26px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           },
           "600": {
             "font": {
-              "value": "600 16px/26px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 16px/26px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
         "l": {
           "400": {
             "font": {
-              "value": "400 18px/28px {sds.font.font-family.value}"
-            }
+              "value": "400 18px/28px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           },
           "600": {
             "font": {
-              "value": "600 18px/28px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 18px/28px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         }
       },
@@ -87,24 +111,27 @@
         "xxxxs": {
           "600": {
             "font": {
-              "value": "600 10px/14px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 10px/14px {sds.font.font-family.caps.value}"
             },
+            "letter-spacing": { "value": "0.5px" },
             "text-transform": { "value": " uppercase" }
           }
         },
         "xxxs": {
           "600": {
             "font": {
-              "value": "600 11px/16px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 11px/16px {sds.font.font-family.caps.value}"
             },
+            "letter-spacing": { "value": "0.5px" },
             "text-transform": { "value": " uppercase" }
           }
         },
         "xxs": {
           "600": {
             "font": {
-              "value": "600 12px/18px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 12px/18px {sds.font.font-family.caps.value}"
             },
+            "letter-spacing": { "value": "0.5px" },
             "text-transform": { "value": " uppercase" }
           }
         }
@@ -113,164 +140,386 @@
         "xxxs": {
           "600": {
             "font": {
-              "value": "600 11px/16px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 11px/16px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xxs": {
           "600": {
             "font": {
-              "value": "600 12px/18px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 12px/18px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xs": {
           "600": {
             "font": {
-              "value": "600 13px/18px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 13px/18px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "s": {
           "600": {
             "font": {
-              "value": "600 14px/20px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 14px/20px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "m": {
           "600": {
             "font": {
-              "value": "600 16px/22px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 16px/22px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
         "l": {
           "600": {
             "font": {
-              "value": "600 18px/24px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 18px/24px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
-
         "xl": {
           "600": {
             "font": {
-              "value": "600 22px/30px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 22px/30px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
         "xxl": {
           "600": {
             "font": {
-              "value": "600 26px/34px 'Open Sans', 'OpenSans-SemiBold'"
-            }
+              "value": "600 26px/34px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      },
+      "tabular": {
+        "xs": {
+          "400": {
+            "font": {
+              "value": "400 13px/20px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 13px/20px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "s": {
+          "400": {
+            "font": {
+              "value": "400 14px/24px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 14px/24px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      },
+      "code": {
+        "xs": {
+          "400": {
+            "font": {
+              "value": "400 13px/20px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 13px/20px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "s": {
+          "400": {
+            "font": {
+              "value": "400 14px/24px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 14px/24px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         }
       }
     },
     "color": {
-      "overlay": {
-        "100": { "value": "rgba(0, 0, 0, 0.08)" },
-        "200": { "value": "rgba(0, 0, 0, 0.03)" }
-      },
-      "beta": {
-        "100": { "value": "#f4f0f9" },
-        "200": { "value": "#f0ebf6" },
-        "400": { "value": "#7a41ce" },
-        "600": { "value": "#693bac" }
-      },
-      "error": {
-        "100": { "value": "#fef2f2" },
-        "200": { "value": "#f8e8e8" },
-        "400": { "value": "#dc132c" },
-        "600": { "value": "#b70016" }
-      },
-      "gray": {
-        "100": { "value": "#f8f8f8" },
-        "200": { "value": "#eaeaea" },
-        "300": { "value": "#cccccc" },
-        "400": { "value": "#999999" },
-        "500": { "value": "#767676" },
-        "600": { "value": "#545454" },
-        "Black": { "value": "#000000" },
-        "White": { "value": "#ffffff" }
-      },
-      "info": {
-        "100": { "value": "#eff2fc" },
-        "200": { "value": "#ebeffc" },
-        "400": { "value": "#3867fa" },
-        "600": { "value": "#223f9c" }
-      },
-      "primary": {
-        "100": { "value": "#f8f9fe" },
-        "200": { "value": "#eff2fc" },
-        "300": { "value": "#a9bdfc" },
-        "400": { "value": "#3867fa" },
-        "500": { "value": "#2b52cd" },
-        "600": { "value": "#223f9c" }
-      },
-      "secondary": { "400": { "value": "#9bc74e" } },
-      "success": {
-        "100": { "value": "#ecf5f0" },
-        "200": { "value": "#e6f7ed" },
-        "400": { "value": "#3cb371" },
-        "600": { "value": "#1c7f48" }
+      "primitive": {
+        "blue": {
+          "100": { "value": "#F5F9FF" },
+          "200": { "value": "#E9F1FF" },
+          "300": { "value": "#A6C9FF" },
+          "400": { "value": "#0B68F8" },
+          "500": { "value": "#0142A4" },
+          "600": { "value": "#002660" }
+        },
+        "gray": {
+          "100": { "value": "#F8F8F8" },
+          "200": { "value": "#EAEAEA" },
+          "300": { "value": "#CCCCCC" },
+          "400": { "value": "#999999" },
+          "500": { "value": "#767676" },
+          "600": { "value": "#545454" },
+          "black": { "value": "#000000" },
+          "white": { "value": "#FFFFFF" }
+        },
+        "green": {
+          "100": { "value": "#ECF5F0" },
+          "200": { "value": "#E6F7ED" },
+          "400": { "value": "#3CB371" },
+          "500": { "value": "#349A61" },
+          "600": { "value": "#1C7F48" }
+        },
+        "purple": {
+          "100": { "value": "#F4F0F9" },
+          "200": { "value": "#F0EBF6" },
+          "400": { "value": "#7A41CE" },
+          "500": { "value": "#703CBE" },
+          "600": { "value": "#693BAC" }
+        },
+        "red": {
+          "100": { "value": "#FEF2F2" },
+          "200": { "value": "#F8E8E8" },
+          "400": { "value": "#DC132C" },
+          "500": { "value": "#C61128" },
+          "600": { "value": "#B70016" }
+        },
+        "yellow": {
+          "100": { "value": "#FCF6EC" },
+          "200": { "value": "#FFF3E1" },
+          "400": { "value": "#F5A623" },
+          "500": { "value": "#D8921F" },
+          "600": { "value": "#946314" }
+        },
+        "overlay": {
+          "100": { "value": "rgba(0, 0, 0, 0.08)" },
+          "200": { "value": "rgba(0, 0, 0, 0.03)" }
+        }
       },
-      "warning": {
-        "100": { "value": "#fcf6ec" },
-        "200": { "value": "#fff3e1" },
-        "400": { "value": "#f5a623" },
-        "600": { "value": "#946314" }
+      "semantic": {
+        "text": {
+          "base": {
+            "primary": { "value": "{sds.color.primitive.gray.black.value}" },
+            "secondary": { "value": "{sds.color.primitive.gray.500.value}" },
+            "disabled": { "value": "{sds.color.primitive.gray.300.value}" },
+            "on-fill": { "value": "{sds.color.primitive.gray.white.value}" },
+            "on-fill-disabled": {
+              "value": "{sds.color.primitive.gray.400.value}"
+            },
+            "accent": { "value": "{sds.color.primitive.blue.600.value}" }
+          },
+          "action": {
+            "default": { "value": "{sds.color.primitive.blue.400.value}" },
+            "hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "pressed": { "value": "{sds.color.primitive.blue.600.value}" }
+          },
+          "beta": { "value": "{sds.color.primitive.purple.600.value}" },
+          "info": { "value": "{sds.color.primitive.blue.600.value}" },
+          "negative": { "value": "{sds.color.primitive.red.600.value}" },
+          "notice": { "value": "{sds.color.primitive.yellow.600.value}" },
+          "positive": { "value": "{sds.color.primitive.green.600.value}" }
+        },
+        "component": {
+          "base": {
+            "fill": { "value": "{sds.color.primitive.gray.white.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-open": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-selected": {
+              "value": "{sds.color.primitive.gray.black.value}"
+            },
+            "fill-disabled": {
+              "value": "{sds.color.primitive.gray.300.value}"
+            },
+            "on-fill-disabled": {
+              "value": "{sds.color.primitive.gray.400.value}"
+            },
+            "surface-primary": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface-secondary": {
+              "value": "{sds.color.primitive.gray.100.value}"
+            },
+            "surface-tertiary": {
+              "value": "{sds.color.primitive.gray.200.value}"
+            },
+            "divider": { "value": "{sds.color.primitive.gray.200.value}" },
+            "border": { "value": "{sds.color.primitive.gray.400.value}" },
+            "border-hover": {
+              "value": "{sds.color.primitive.gray.black.value}"
+            },
+            "border-disabled": {
+              "value": "{sds.color.primitive.gray.300.value}"
+            },
+            "icon": { "value": "{sds.color.primitive.gray.500.value}" },
+            "icon-hover": { "value": "{sds.color.primitive.gray.black.value}" },
+            "icon-pressed": {
+              "value": "{sds.color.primitive.gray.black.value}"
+            },
+            "icon-disabled": { "value": "{sds.color.primitive.gray.300.value}" }
+          },
+          "accent": {
+            "fill": { "value": "{sds.color.primitive.blue.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "fill-disabled": {
+              "value": "{sds.color.primitive.blue.300.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.blue.200.value}" },
+            "border": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "border-open": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-focus": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-selected": {
+              "value": "{sds.color.primitive.blue.400.value}"
+            },
+            "border-disabled": {
+              "value": "{sds.color.primitive.blue.300.value}"
+            },
+            "icon": { "value": "{sds.color.primitive.blue.400.value}" }
+          },
+          "beta": {
+            "fill": { "value": "{sds.color.primitive.purple.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.purple.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.purple.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.purple.200.value}" },
+            "border": { "value": "{sds.color.primitive.purple.400.value}" },
+            "icon": { "value": "{sds.color.primitive.purple.400.value}" }
+          },
+          "info": {
+            "fill": { "value": "{sds.color.primitive.blue.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.blue.200.value}" },
+            "border": { "value": "{sds.color.primitive.blue.400.value}" },
+            "icon": { "value": "{sds.color.primitive.blue.400.value}" }
+          },
+          "negative": {
+            "fill": { "value": "{sds.color.primitive.red.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.red.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.red.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.red.200.value}" },
+            "border": { "value": "{sds.color.primitive.red.400.value}" },
+            "icon": { "value": "{sds.color.primitive.red.400.value}" }
+          },
+          "notice": {
+            "fill": { "value": "{sds.color.primitive.yellow.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.yellow.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.yellow.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.yellow.200.value}" },
+            "border": { "value": "{sds.color.primitive.yellow.400.value}" },
+            "icon": { "value": "{sds.color.primitive.yellow.400.value}" }
+          },
+          "positive": {
+            "fill": { "value": "{sds.color.primitive.green.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.green.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.green.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.green.200.value}" },
+            "border": { "value": "{sds.color.primitive.green.400.value}" },
+            "icon": { "value": "{sds.color.primitive.green.400.value}" }
+          }
+        }
       }
     },
     "drop-shadows": {
-      "shadowL": { "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)" },
+      "shadowL": {
+        "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)"
+      },
       "shadowM": {
         "value": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)"
       },
-      "shadowS": { "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)" }
+      "shadowS": {
+        "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
+      }
     },
     "borders": {
       "error": {
-        "400": { "value": "1px solid {sds.color.error.400.value}" }
+        "400": { "value": "1px solid {sds.color.primitive.red.100.value}" }
       },
       "gray": {
-        "100": { "value": "1px solid {sds.color.gray.100.value}" },
-        "200": { "value": "1px solid {sds.color.gray.200.value}" },
-        "300": { "value": "1px solid {sds.color.gray.300.value}" },
-        "400": { "value": "1px solid {sds.color.gray.400.value}" },
-        "500": { "value": "1px solid {sds.color.gray.500.value}" },
-        "dashed": { "value": "2px dashed {sds.color.gray.400.value}" }
+        "100": { "value": "1px solid {sds.color.primitive.gray.100.value}" },
+        "200": { "value": "1px solid {sds.color.primitive.gray.200.value}" },
+        "300": { "value": "1px solid {sds.color.primitive.gray.300.value}" },
+        "400": { "value": "1px solid {sds.color.primitive.gray.400.value}" },
+        "500": { "value": "1px solid {sds.color.primitive.gray.500.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.gray.400.value}" }
       },
       "link": {
         "dashed": { "value": "1px dashed" },
         "solid": { "value": "1px solid" }
       },
       "primary": {
-        "300": { "value": "1px solid {sds.color.primary.300.value}" },
-        "400": { "value": "1px solid {sds.color.primary.400.value}" },
-        "500": { "value": "1px solid {sds.color.primary.500.value}" },
-        "600": { "value": "1px solid {sds.color.primary.600.value}" },
-        "dashed": { "value": "2px dashed {sds.color.primary.400.value}" }
+        "300": { "value": "1px solid {sds.color.primitive.blue.300.value}" },
+        "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" },
+        "500": { "value": "1px solid {sds.color.primitive.blue.500.value}" },
+        "600": { "value": "1px solid {sds.color.primitive.blue.600.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.blue.400.value}" }
       },
       "success": {
-        "400": { "value": "1px solid {sds.color.success.400.value}" }
+        "400": { "value": "1px solid {sds.color.primitive.green.100.value}" }
       },
       "warning": {
-        "400": { "value": "1px solid {sds.color.warning.400.value}" }
+        "400": { "value": "1px solid {sds.color.primitive.yellow.100.value}" }
       }
     },
     "spaces": {
-      "default": { "value": "10px" },
+      "default": { "value": "12px" },
       "xxxs": { "value": "2px" },
       "xxs": { "value": "4px" },
       "xs": { "value": "6px" },
       "s": { "value": "8px" },
-      "m": { "value": "10px" },
-      "l": { "value": "14px" },
-      "xl": { "value": "22px" },
-      "xxl": { "value": "38px" }
+      "m": { "value": "12px" },
+      "l": { "value": "16px" },
+      "xl": { "value": "24px" },
+      "xxl": { "value": "40px" }
     },
     "iconSizes": {
       "input": {
@@ -282,16 +531,16 @@
         }
       },
       "xs": {
-        "height": { "value": "10px" },
-        "width": { "value": "10px" }
+        "height": { "value": "12px" },
+        "width": { "value": "12px" }
       },
       "s": {
-        "height": { "value": "14px" },
-        "width": { "value": "14px" }
+        "height": { "value": "16px" },
+        "width": { "value": "16px" }
       },
       "l": {
-        "height": { "value": "22px" },
-        "width": { "value": "22px" }
+        "height": { "value": "24px" },
+        "width": { "value": "24px" }
       },
       "xl": {
         "height": { "value": "32px" },
diff --git a/packages/data-viz/src/common/styles-dictionary/tailwindFormat.js b/packages/data-viz/src/common/styles-dictionary/tailwindFormat.js
index 05942d320..a3970b254 100644
--- a/packages/data-viz/src/common/styles-dictionary/tailwindFormat.js
+++ b/packages/data-viz/src/common/styles-dictionary/tailwindFormat.js
@@ -17,6 +17,14 @@ StyleDictionary.registerFormat({
       return result.toLowerCase().replace(" ", "-");
     }
 
+    function convertToKebabCase(inputString) {
+      return inputString
+        .replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+        .replace(/\d+/g, (match) => `-${match}`)
+        .replace(/^-/, "")
+        .replace(/-+/g, "-");
+    }
+
     function transformDictionary(tokens, keys) {
       const result = {};
 
@@ -32,16 +40,18 @@ StyleDictionary.registerFormat({
     function transformColor(tokens) {
       const colors = {};
 
-      for (const [name, colorTokens] of Object.entries(tokens)) {
-        const color = {};
-
-        for (const [colorName, token] of Object.entries(colorTokens)) {
-          color[colorName.toLowerCase().replace(" ", "-")] = token.value;
+      function getColor(theToken) {
+        for (const [, iToken] of Object.entries(theToken)) {
+          if ("value" in iToken && "name" in iToken) {
+            colors[convertToKebabCase(iToken.name)] = iToken.value;
+          } else {
+            getColor(iToken);
+          }
         }
-
-        colors[getName(name)] = color;
       }
 
+      getColor(tokens);
+
       return colors;
     }
 
@@ -58,40 +68,56 @@ StyleDictionary.registerFormat({
     }
 
     function transformFonts(tokens, keys) {
-      const fontFamily = {};
       const fontSize = {};
       const lineHeight = {};
-      const boldNameMap = {
-        400: "regular",
-        600: "semibold",
-      };
+      const letterSpacing = {};
+      const fontVariantNumeric = {};
+      const textTransform = {};
 
       for (const key of keys) {
         for (const [size, fonts] of Object.entries(tokens[key])) {
-          for (const [boldSize, { font }] of Object.entries(fonts)) {
-            const parsed = cssFont.parse(font.value);
-            fontFamily[getName(boldNameMap[boldSize])] = parsed.family;
+          for (const [, fontValue] of Object.entries(fonts)) {
+            const parsed = cssFont.parse(fontValue.font.value);
             fontSize[getName([key, size])] = parsed.size;
             lineHeight[getName([key, size])] = parsed.size;
+
+            letterSpacing[getName([key, size])] =
+              fontValue["letter-spacing"].value;
+            textTransform[getName([key, size])] = fontValue["text-transform"]
+              ? fontValue["text-transform"].value
+              : "none";
+            fontVariantNumeric[getName([key, size])] = fontValue[
+              "font-variant-numeric"
+            ]
+              ? fontValue["font-variant-numeric"].value
+              : "normal";
           }
         }
       }
 
       return {
-        fontFamily,
         fontSize,
+        fontVariantNumeric,
+        letterSpacing,
         lineHeight,
+        textTransform,
       };
     }
 
     const { sds } = dictionary.tokens;
     const tailwindConfig = {
-      ...transformFonts(sds.font, ["body", "caps", "header"]),
+      fontFamily: transformDictionary(sds.font["font-family"]),
+      ...transformFonts(sds.font, [
+        "body",
+        "caps",
+        "header",
+        "tabular",
+        "code",
+      ]),
       ...transformIconSizes(sds.iconSizes),
       borderRadius: transformDictionary(sds.corners),
       boxShadow: transformDictionary(sds["drop-shadows"]),
       colors: transformColor(sds.color),
-      letterSpacing: transformDictionary(sds.font["letter-spacing"]),
       spacing: transformDictionary(sds.spaces),
     };
 
diff --git a/packages/data-viz/src/core/HeatmapChart/storyUtils.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/constants.ts
similarity index 70%
rename from packages/data-viz/src/core/HeatmapChart/storyUtils.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/constants.ts
index 88bea9f6d..5cdffb057 100644
--- a/packages/data-viz/src/core/HeatmapChart/storyUtils.ts
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/constants.ts
@@ -5,7 +5,7 @@
  *
  * YlOrRd Color Scheme
  */
-export const COLORS = [
+export const HEATMAP_COLORS = [
   "#ffffcc",
   "#fffecb",
   "#fffec9",
@@ -263,3 +263,70 @@ export const COLORS = [
   "#820026",
   "#800026",
 ];
+
+export const HEATMAP_SIZE = 100;
+
+export const HEATMAP_ITEM_SIZE = 20;
+
+export const HEATMAP_NUMBERS = Array.from(Array(HEATMAP_SIZE).keys());
+
+export const HEATMAP_DATA: { x: number; y: number; value: number }[] = [];
+
+for (const x of HEATMAP_NUMBERS) {
+  for (const y of HEATMAP_NUMBERS) {
+    HEATMAP_DATA.push({
+      value: Math.round(Math.random() * 100),
+      x,
+      y,
+    });
+  }
+}
+
+export const HEATMAP_ENCODE = { x: "x", y: "y" };
+
+export const HEATMAP_ITEM_STYLE = {
+  borderColor: "white",
+  borderType: "solid",
+  borderWidth: 1,
+  color({ data: { value } }: { data: { value: number } }) {
+    return HEATMAP_COLORS[
+      Math.round((value / 100) * (HEATMAP_COLORS.length - 1))
+    ];
+  },
+  opacity: 1,
+};
+
+export const HEATMAP_TOOLTIP_OPTIONS = [
+  { show: false },
+  {
+    enterable: true,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    formatter: function (param: any) {
+      return param.data
+        ? [
+            `X-Axis: <strong>${param.data.x}</strong><br/>`,
+            `Y-Axis: <strong>${param.data.y}</strong><br/><br/>`,
+            `${param.marker} <strong>${param.data.value}</strong>`,
+          ].join("")
+        : [];
+    },
+    show: true,
+  },
+];
+
+export const HEATMAP_AXIS_POINTER_OPTIONS = [
+  {
+    show: false,
+    type: "none",
+  },
+  {
+    show: true,
+    triggerOn: "mousemove",
+    type: "none",
+  },
+  {
+    show: true,
+    triggerOn: "click",
+    type: "none",
+  },
+];
diff --git a/packages/data-viz/src/core/HeatmapChart/__storybook__/index.stories.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..104c87add
--- /dev/null
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/index.stories.tsx
@@ -0,0 +1,119 @@
+import { Args, Meta } from "@storybook/react";
+import {
+  HEATMAP_AXIS_POINTER_OPTIONS,
+  HEATMAP_TOOLTIP_OPTIONS,
+} from "./constants";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import App from "./stories/heatmapDemo/App";
+import { Provider } from "react-redux";
+import { store } from "./stories/heatmapDemo/store";
+import { HeatmapChart } from "./stories/default";
+
+export default {
+  argTypes: {
+    axisPointer: {
+      control: {
+        labels: [
+          "No axis pointer",
+          "Show axis pointer on mousemove",
+          "Show axis pointer on click",
+        ],
+        type: "select",
+      },
+      mapping: HEATMAP_AXIS_POINTER_OPTIONS,
+      options: Object.keys(HEATMAP_AXIS_POINTER_OPTIONS),
+    },
+    camera: {
+      control: {
+        type: "object",
+      },
+    },
+    echartsRendererMode: {
+      control: {
+        labels: ["Canvas", "SVG"],
+        type: "select",
+      },
+      options: ["canvas", "svg"],
+    },
+    symbol: {
+      control: {
+        labels: ["Circle", "Rectangle", "Round Rectangle"],
+        type: "select",
+      },
+      options: ["circle", "rect", "roundRect"],
+    },
+    tooltip: {
+      control: {
+        labels: ["No tooltip", "Show Tooltip"],
+        type: "select",
+      },
+      mapping: HEATMAP_TOOLTIP_OPTIONS,
+      options: Object.keys(HEATMAP_TOOLTIP_OPTIONS),
+    },
+  },
+  component: HeatmapChart,
+  parameters: {
+    badges: [BADGE.BETA],
+    chromatic: {
+      disableSnapshot: true,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  title: "Data Viz/HeatmapChart [beta]",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    axisPointer: HEATMAP_AXIS_POINTER_OPTIONS[1],
+    camera: {
+      active: true,
+      height: 20,
+      width: 40,
+    },
+    echartsRendererMode: "svg",
+    symbol: "circle",
+    tooltip: HEATMAP_TOOLTIP_OPTIONS[1],
+  },
+  parameters: {},
+};
+
+const HeatmapDemoComponent = (): JSX.Element => {
+  return (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+};
+
+export const HeatmapDemo = {
+  parameters: {
+    /**
+     * Axe is complaining about color contrast of Axis-labels and
+     * since the colors are by design and the contrast is not an issue,
+     * the rule is disabled for this story.
+     */
+    axe: {
+      disabledRules: ["color-contrast"],
+    },
+    controls: {
+      exclude: [
+        "axisPointer",
+        "camera",
+        "echartsRendererMode",
+        "symbol",
+        "tooltip",
+      ],
+    },
+    // This parameter is used to set the story's layout to fullscreen
+    // and remove the padding around the storybook root element
+    layout: "fullscreen",
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <HeatmapDemoComponent {...args} />,
+};
diff --git a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/default.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..d657ea7e4
--- /dev/null
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/default.tsx
@@ -0,0 +1,72 @@
+import { Args } from "@storybook/react";
+import {
+  HEATMAP_DATA,
+  HEATMAP_ENCODE,
+  HEATMAP_ITEM_SIZE,
+  HEATMAP_ITEM_STYLE,
+  HEATMAP_NUMBERS,
+  HEATMAP_SIZE,
+} from "../constants";
+import RawHeatmapChart from "src/core/HeatmapChart";
+import { ScatterSeriesOption } from "echarts";
+
+export const HeatmapChart = (props: Args): JSX.Element => {
+  const { camera, symbol, tooltip, ...rest } = props;
+
+  const CHART_WIDTH_PX =
+    HEATMAP_ITEM_SIZE * (camera && camera.active ? camera.width : HEATMAP_SIZE);
+  const CHART_HEIGHT_PX =
+    HEATMAP_ITEM_SIZE *
+    (camera && camera.active ? camera.height : HEATMAP_SIZE);
+
+  return (
+    <>
+      <RawHeatmapChart
+        width={CHART_WIDTH_PX}
+        height={CHART_HEIGHT_PX}
+        camera={camera}
+        xAxisData={HEATMAP_NUMBERS}
+        yAxisData={HEATMAP_NUMBERS}
+        data={HEATMAP_DATA}
+        encode={HEATMAP_ENCODE}
+        symbol={symbol}
+        symbolSize={(p) => symbolSize(p, symbol)}
+        itemStyle={HEATMAP_ITEM_STYLE as ScatterSeriesOption["itemStyle"]}
+        emphasis={{
+          itemStyle: {
+            borderColor: symbol === "circle" ? "black" : "white",
+            borderType: "solid",
+            borderWidth: symbol === "circle" ? 2 : 4,
+            opacity: 1,
+          },
+          scale: false,
+        }}
+        options={{
+          series: [
+            {
+              type: "scatter",
+            },
+          ],
+          tooltip: tooltip,
+        }}
+        {...rest}
+      />
+    </>
+  );
+};
+
+function symbolSize(props: { value: number }, symbol: string) {
+  const { value } = props;
+  return convertPercentageToDiameter(value, symbol);
+}
+
+function convertPercentageToDiameter(
+  percentage: number,
+  symbol: string
+): number {
+  if (symbol !== "circle") {
+    return HEATMAP_ITEM_SIZE;
+  } else {
+    return (percentage * HEATMAP_ITEM_SIZE) / 100;
+  }
+}
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/App.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/App.tsx
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/App.tsx
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/App.tsx
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/index.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ControlPanel/index.tsx
similarity index 99%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/index.tsx
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ControlPanel/index.tsx
index eb461749f..2d3dd571d 100644
--- a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/index.tsx
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ControlPanel/index.tsx
@@ -318,7 +318,7 @@ const ControlPanel = () => {
       >
         To scroll horizontally, hold down the{" "}
         <Tag
-          color="gray"
+          color="neutral"
           label="SHIFT"
           sdsStyle="square"
           sdsType="secondary"
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ControlPanel/style.ts
similarity index 95%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/style.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ControlPanel/style.ts
index dc66a13b1..187ac11ac 100644
--- a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/style.ts
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ControlPanel/style.ts
@@ -25,7 +25,7 @@ export const StyledForm = styled("div")`
 `;
 
 export const StyledLabel = styled("span")`
-  font-family: "Open Sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 12px;
   margin-bottom: 2px;
   line-height: 18px;
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ECharts/index.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ECharts/index.tsx
similarity index 99%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ECharts/index.tsx
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ECharts/index.tsx
index 187fda649..fa861b993 100644
--- a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ECharts/index.tsx
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ECharts/index.tsx
@@ -18,7 +18,7 @@ import {
   ScatterSeriesOption,
   getInstanceByDom,
 } from "echarts";
-import HeatmapChart from "../../../index";
+import HeatmapChart from "../../../../../index";
 
 type InterpolatorNames =
   | "Magma"
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/index.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/index.tsx
similarity index 93%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/index.tsx
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/index.tsx
index ee928dc41..ee70383cf 100644
--- a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/index.tsx
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/index.tsx
@@ -14,7 +14,7 @@ const TooltipTag = ({ label }: { label: string }) => {
     <Tag
       label={label}
       hover={false}
-      color="gray"
+      color="neutral"
       sdsType="secondary"
       style={{ margin: "-2px 4px 0 0" }}
     />
@@ -30,7 +30,7 @@ const Header = () => {
   return (
     <StyledHeader>
       <HeaderLeft>
-        <Icon sdsIcon="grid" sdsType="static" sdsSize="xl" color="gray" />
+        <Icon sdsIcon="Grid" sdsType="static" sdsSize="xl" color="gray" />
         <h3 style={{ marginLeft: 10 }}>
           Heatmap ({renderer === "svg" ? "SVG version" : "Canvas version"})
         </h3>
@@ -40,7 +40,7 @@ const Header = () => {
         <Button
           sdsType="primary"
           sdsStyle="rounded"
-          endIcon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
+          endIcon={<Icon sdsIcon="Download" sdsSize="l" sdsType="button" />}
           onClick={() => saveAsImage("sds-heatmap")}
         >
           Download as {renderer === "svg" ? ".svg" : ".png"}
@@ -66,7 +66,7 @@ const Header = () => {
         >
           <StyledButtonIcon
             aria-label="Download Info"
-            icon="infoCircle"
+            icon="InfoCircle"
             sdsSize="large"
             sdsType="secondary"
           />
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts
similarity index 96%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/style.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts
index 56f05f400..a049fc5f6 100644
--- a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/style.ts
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts
@@ -16,6 +16,7 @@ export const StyledHeader = styled("div")`
 
   h3 {
     margin: 0;
+    line-height: 32px;
   }
 `;
 
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Heatmap/index.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Heatmap/index.tsx
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Heatmap/index.tsx
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Heatmap/index.tsx
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Heatmap/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Heatmap/style.ts
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Heatmap/style.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Heatmap/style.ts
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/XAxisChart/index.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/XAxisChart/index.tsx
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/XAxisChart/index.tsx
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/XAxisChart/index.tsx
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/XAxisChart/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/XAxisChart/style.ts
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/XAxisChart/style.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/XAxisChart/style.ts
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/YAxisChart/index.tsx b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/YAxisChart/index.tsx
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/YAxisChart/index.tsx
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/YAxisChart/index.tsx
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/YAxisChart/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/YAxisChart/style.ts
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/YAxisChart/style.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/YAxisChart/style.ts
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/utils.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/utils.ts
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/utils.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/utils.ts
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/helpers/geneListGenerator.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/helpers/geneListGenerator.ts
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/helpers/geneListGenerator.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/helpers/geneListGenerator.ts
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/store/AppContext.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/store/AppContext.ts
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/store/AppContext.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/store/AppContext.ts
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/store/dataReducer.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/store/dataReducer.ts
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/store/dataReducer.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/store/dataReducer.ts
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/store/index.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/store/index.ts
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/store/index.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/store/index.ts
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/store/useAppContext.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/store/useAppContext.ts
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/store/useAppContext.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/store/useAppContext.ts
diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts
similarity index 94%
rename from packages/data-viz/src/core/HeatmapChart/heatmapDemo/style.ts
rename to packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts
index 2384104e9..e6cf89b8d 100644
--- a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/style.ts
+++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts
@@ -1,7 +1,7 @@
 import { styled } from "@mui/material";
 
 export const Container = styled("div")`
-  font-family: "Open Sans", sans-serif;
+  font-family: "Inter", sans-serif;
   display: grid;
   grid-template-columns: 250px 1fr;
   grid-template-rows: 70px 1fr;
diff --git a/packages/data-viz/src/core/HeatmapChart/index.namespace-test.tsx b/packages/data-viz/src/core/HeatmapChart/__tests__/index.namespace-test.tsx
similarity index 100%
rename from packages/data-viz/src/core/HeatmapChart/index.namespace-test.tsx
rename to packages/data-viz/src/core/HeatmapChart/__tests__/index.namespace-test.tsx
diff --git a/packages/data-viz/src/core/HeatmapChart/hooks/utils.ts b/packages/data-viz/src/core/HeatmapChart/hooks/utils.ts
index 8b4be11e5..12c1c8ad7 100644
--- a/packages/data-viz/src/core/HeatmapChart/hooks/utils.ts
+++ b/packages/data-viz/src/core/HeatmapChart/hooks/utils.ts
@@ -312,7 +312,7 @@ function generateDefaultValues(props: CreateChartOptionsProps) {
     left: 0,
     top: 0,
     // (atarashansky): this is the key change to align x and y axis
-    // labels to fixed spacings
+    // labels to fixed spaces
     width: `${width}px`,
   };
 
diff --git a/packages/data-viz/src/core/HeatmapChart/index.stories.tsx b/packages/data-viz/src/core/HeatmapChart/index.stories.tsx
deleted file mode 100644
index 4e2876a9e..000000000
--- a/packages/data-viz/src/core/HeatmapChart/index.stories.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import { Args, Meta } from "@storybook/react";
-import RawHeatmapChart from "./index";
-import { COLORS } from "./storyUtils";
-import { ScatterSeriesOption } from "echarts";
-import App from "./heatmapDemo/App";
-import { Provider } from "react-redux";
-import { store } from "./heatmapDemo/store";
-
-const HEATMAP_SIZE = 100;
-const HEATMAP_ITEM_SIZE = 20;
-
-const NUMBERS = Array.from(Array(HEATMAP_SIZE).keys());
-
-const data: { x: number; y: number; value: number }[] = [];
-
-for (const x of NUMBERS) {
-  for (const y of NUMBERS) {
-    data.push({
-      value: Math.round(Math.random() * 100),
-      x,
-      y,
-    });
-  }
-}
-
-const ENCODE = { x: "x", y: "y" };
-
-const ITEM_STYLE = {
-  borderColor: "white",
-  borderType: "solid",
-  borderWidth: 1,
-  color({ data: { value } }: { data: { value: number } }) {
-    return COLORS[Math.round((value / 100) * (COLORS.length - 1))];
-  },
-  opacity: 1,
-} as ScatterSeriesOption["itemStyle"];
-
-const HeatmapChart = (props: Args): JSX.Element => {
-  const { camera, symbol, tooltip, ...rest } = props;
-
-  const CHART_WIDTH_PX =
-    HEATMAP_ITEM_SIZE * (camera && camera.active ? camera.width : HEATMAP_SIZE);
-  const CHART_HEIGHT_PX =
-    HEATMAP_ITEM_SIZE *
-    (camera && camera.active ? camera.height : HEATMAP_SIZE);
-
-  return (
-    <>
-      <RawHeatmapChart
-        width={CHART_WIDTH_PX}
-        height={CHART_HEIGHT_PX}
-        camera={camera}
-        xAxisData={NUMBERS}
-        yAxisData={NUMBERS}
-        data={data}
-        encode={ENCODE}
-        symbol={symbol}
-        symbolSize={(p) => symbolSize(p, symbol)}
-        itemStyle={ITEM_STYLE}
-        emphasis={{
-          itemStyle: {
-            borderColor: symbol === "circle" ? "black" : "white",
-            borderType: "solid",
-            borderWidth: symbol === "circle" ? 2 : 4,
-            opacity: 1,
-          },
-          scale: false,
-        }}
-        options={{
-          series: [
-            {
-              type: "scatter",
-            },
-          ],
-          tooltip: tooltip,
-        }}
-        {...rest}
-      />
-    </>
-  );
-};
-
-const tooltipOptions = [
-  { show: false },
-  {
-    enterable: true,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    formatter: function (param: any) {
-      return param.data
-        ? [
-            `X-Axis: <strong>${param.data.x}</strong><br/>`,
-            `Y-Axis: <strong>${param.data.y}</strong><br/><br/>`,
-            `${param.marker} <strong>${param.data.value}</strong>`,
-          ].join("")
-        : [];
-    },
-    show: true,
-  },
-];
-
-const axisPointerOptions = [
-  {
-    show: false,
-    type: "none",
-  },
-  {
-    show: true,
-    triggerOn: "mousemove",
-    type: "none",
-  },
-  {
-    show: true,
-    triggerOn: "click",
-    type: "none",
-  },
-];
-
-export default {
-  argTypes: {
-    axisPointer: {
-      control: {
-        labels: [
-          "No axis pointer",
-          "Show axis pointer on mousemove",
-          "Show axis pointer on click",
-        ],
-        type: "select",
-      },
-      mapping: axisPointerOptions,
-      options: Object.keys(axisPointerOptions),
-    },
-    camera: {
-      control: {
-        type: "object",
-      },
-    },
-    echartsRendererMode: {
-      control: {
-        labels: ["Canvas", "SVG"],
-        type: "select",
-      },
-      options: ["canvas", "svg"],
-    },
-    symbol: {
-      control: {
-        labels: ["Circle", "Rectangle", "Round Rectangle"],
-        type: "select",
-      },
-      options: ["circle", "rect", "roundRect"],
-    },
-    tooltip: {
-      control: {
-        labels: ["No tooltip", "Show Tooltip"],
-        type: "select",
-      },
-      mapping: tooltipOptions,
-      options: Object.keys(tooltipOptions),
-    },
-  },
-  component: HeatmapChart,
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-    snapshot: {
-      skip: true,
-    },
-  },
-  title: "Data Viz/HeatmapChart",
-} as Meta;
-
-// Default
-
-export const Default = {
-  args: {
-    axisPointer: axisPointerOptions[1],
-    camera: {
-      active: true,
-      height: 20,
-      width: 40,
-    },
-    echartsRendererMode: "svg",
-    symbol: "circle",
-    tooltip: tooltipOptions[1],
-  },
-  parameters: {},
-};
-
-function symbolSize(props: { value: number }, symbol: string) {
-  const { value } = props;
-  return convertPercentageToDiameter(value, symbol);
-}
-
-function convertPercentageToDiameter(
-  percentage: number,
-  symbol: string
-): number {
-  if (symbol !== "circle") {
-    return HEATMAP_ITEM_SIZE;
-  } else {
-    return (percentage * HEATMAP_ITEM_SIZE) / 100;
-  }
-}
-
-const HeatmapDemoComponent = (): JSX.Element => {
-  return (
-    <Provider store={store}>
-      <App />
-    </Provider>
-  );
-};
-
-export const HeatmapDemo = {
-  parameters: {
-    /**
-     * Axe is complaining about color contrast of Axis-labels and
-     * since the colors are by design and the contrast is not an issue,
-     * the rule is disabled for this story.
-     */
-    axe: {
-      disabledRules: ["color-contrast"],
-    },
-    controls: {
-      exclude: [
-        "axisPointer",
-        "camera",
-        "echartsRendererMode",
-        "symbol",
-        "tooltip",
-      ],
-    },
-    // This parameter is used to set the story's layout to fullscreen
-    // and remove the padding around the storybook root element
-    layout: "fullscreen",
-    snapshot: {
-      skip: true,
-    },
-  },
-  render: (args: Args) => <HeatmapDemoComponent {...args} />,
-};
diff --git a/tsconfig.json b/tsconfig.json
index a5ca496a7..b055ce8dd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -59,12 +59,8 @@
     "skipLibCheck": true
   },
   "include": [
-    "./packages/*/src/**/*",
+    "./packages/**/src/**/*",
     ".eslintrc.js"
   ],
   "exclude": ["node_modules", "./packages/*/node_modules"],
-  "references": [
-    { "path": "./packages/components" },
-    { "path": "./packages/data-viz" }
-  ]
 }
diff --git a/yarn.lock b/yarn.lock
index c9a5adbfe..73a7e1a7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,10 +12,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@adobe/css-tools@npm:^4.3.1":
-  version: 4.3.2
-  resolution: "@adobe/css-tools@npm:4.3.2"
-  checksum: 10c0/296a03dd29f227c60500d2da8c7f64991fecf1d8b456ce2b4adb8cec7363d9c08b5b03f1463673fc8cbfe54b538745588e7a13c736d2dd14a80c01a20f127f39
+"@adobe/css-tools@npm:^4.3.2":
+  version: 4.3.3
+  resolution: "@adobe/css-tools@npm:4.3.3"
+  checksum: 10c0/e76e712df713964b87cdf2aca1f0477f19bebd845484d5fcba726d3ec7782366e2f26ec8cb2dcfaf47081a5c891987d8a9f5c3f30d11e1eb3c1848adc27fcb24
   languageName: node
   linkType: hard
 
@@ -40,7 +40,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/code-frame@npm:7.23.5"
   dependencies:
@@ -57,49 +57,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.21.3, @babel/core@npm:^7.22.5, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.6, @babel/core@npm:^7.7.5":
-  version: 7.23.6
-  resolution: "@babel/core@npm:7.23.6"
-  dependencies:
-    "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.23.5"
-    "@babel/generator": "npm:^7.23.6"
-    "@babel/helper-compilation-targets": "npm:^7.23.6"
-    "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helpers": "npm:^7.23.6"
-    "@babel/parser": "npm:^7.23.6"
-    "@babel/template": "npm:^7.22.15"
-    "@babel/traverse": "npm:^7.23.6"
-    "@babel/types": "npm:^7.23.6"
-    convert-source-map: "npm:^2.0.0"
-    debug: "npm:^4.1.0"
-    gensync: "npm:^1.0.0-beta.2"
-    json5: "npm:^2.2.3"
-    semver: "npm:^6.3.1"
-  checksum: 10c0/a02bae7d916029b70706dc301535e1b31e5d216f55d4ee6f64a15825c6b69ee2c14c52a213d1497ec414e925ed4e9d897d41fb0d75df9fea28ed2c0008790e31
-  languageName: node
-  linkType: hard
-
-"@babel/core@npm:^7.17.9":
-  version: 7.23.7
-  resolution: "@babel/core@npm:7.23.7"
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.17.9, @babel/core@npm:^7.18.9, @babel/core@npm:^7.21.3, @babel/core@npm:^7.22.5, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.6, @babel/core@npm:^7.7.5":
+  version: 7.23.9
+  resolution: "@babel/core@npm:7.23.9"
   dependencies:
     "@ampproject/remapping": "npm:^2.2.0"
     "@babel/code-frame": "npm:^7.23.5"
     "@babel/generator": "npm:^7.23.6"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helpers": "npm:^7.23.7"
-    "@babel/parser": "npm:^7.23.6"
-    "@babel/template": "npm:^7.22.15"
-    "@babel/traverse": "npm:^7.23.7"
-    "@babel/types": "npm:^7.23.6"
+    "@babel/helpers": "npm:^7.23.9"
+    "@babel/parser": "npm:^7.23.9"
+    "@babel/template": "npm:^7.23.9"
+    "@babel/traverse": "npm:^7.23.9"
+    "@babel/types": "npm:^7.23.9"
     convert-source-map: "npm:^2.0.0"
     debug: "npm:^4.1.0"
     gensync: "npm:^1.0.0-beta.2"
     json5: "npm:^2.2.3"
     semver: "npm:^6.3.1"
-  checksum: 10c0/38c9934973d384ed83369712978453eac91dc3f22167404dbdb272b64f602e74728a6f37012c53ee57e521b8ae2da60097f050497d9b6a212d28b59cdfb2cd1d
+  checksum: 10c0/03883300bf1252ab4c9ba5b52f161232dd52873dbe5cde9289bb2bb26e935c42682493acbac9194a59a3b6cbd17f4c4c84030db8d6d482588afe64531532ff9b
   languageName: node
   linkType: hard
 
@@ -147,8 +124,8 @@ __metadata:
   linkType: hard
 
 "@babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.23.6"
+  version: 7.23.10
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.23.10"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
@@ -161,7 +138,7 @@ __metadata:
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/4b923a63b757bf030839263b9609d4fc1f9858a701c173a6a15d0fc135a71847c842faddfd8af8eb324d2379725ba0d9a3d004d48ea7aac2c973cea36627707e
+  checksum: 10c0/f30437aa16f3585cc3382ea630f24457ef622c22f5e4eccffbc03f6a81efbef0b6714fb5a78baa64c838884ba7e1427e3280d7b27481b9f587bc8fbbed05dd36
   languageName: node
   linkType: hard
 
@@ -178,9 +155,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.4.4":
-  version: 0.4.4
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.4.4"
+"@babel/helper-define-polyfill-provider@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -189,7 +166,7 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/60126f5f719b9e2114df62e3bf3ac0797b71d8dc733db60192eb169b004fde72ee309fa5848c5fdfe98b8e8863c46f55e16da5aa8a4e420b4d2670cd0c5dd708
+  checksum: 10c0/2b053b96a0c604a7e0f5c7d13a8a55f4451d938f7af42bd40f62a87df15e6c87a0b1dbd893a0f0bb51077b54dc3ba00a58b166531a5940ad286ab685dd8979ec
   languageName: node
   linkType: hard
 
@@ -353,25 +330,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/helpers@npm:7.23.6"
-  dependencies:
-    "@babel/template": "npm:^7.22.15"
-    "@babel/traverse": "npm:^7.23.6"
-    "@babel/types": "npm:^7.23.6"
-  checksum: 10c0/df1cf6607676ad36f52f652ec03536f2732d70aef5e76dba5c964e34d49f3c2d3dcf9fb3740db359f53071d74b64606a833d5ba156f79f437f71bfe06e2e7e19
-  languageName: node
-  linkType: hard
-
-"@babel/helpers@npm:^7.23.7":
-  version: 7.23.7
-  resolution: "@babel/helpers@npm:7.23.7"
+"@babel/helpers@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/helpers@npm:7.23.9"
   dependencies:
-    "@babel/template": "npm:^7.22.15"
-    "@babel/traverse": "npm:^7.23.7"
-    "@babel/types": "npm:^7.23.6"
-  checksum: 10c0/f74a61ad28a1bc1fdd9133ad571c07787b66d6db017c707b87c203b0cd06879cea8b33e9c6a8585765a4949efa5df3cc9e19b710fe867f11be38ee29fd4a0488
+    "@babel/template": "npm:^7.23.9"
+    "@babel/traverse": "npm:^7.23.9"
+    "@babel/types": "npm:^7.23.9"
+  checksum: 10c0/f69fd0aca96a6fb8bd6dd044cd8a5c0f1851072d4ce23355345b9493c4032e76d1217f86b70df795e127553cf7f3fcd1587ede9d1b03b95e8b62681ca2165b87
   languageName: node
   linkType: hard
 
@@ -386,12 +352,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.7.0":
-  version: 7.23.6
-  resolution: "@babel/parser@npm:7.23.6"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.7.0":
+  version: 7.23.9
+  resolution: "@babel/parser@npm:7.23.9"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10c0/6f76cd5ccae1fa9bcab3525b0865c6222e9c1d22f87abc69f28c5c7b2c8816a13361f5bd06bddbd5faf903f7320a8feba02545c981468acec45d12a03db7755e
+  checksum: 10c0/7df97386431366d4810538db4b9ec538f4377096f720c0591c7587a16f6810e62747e9fbbfa1ff99257fd4330035e4fb1b5b77c7bd3b97ce0d2e3780a6618975
   languageName: node
   linkType: hard
 
@@ -419,15 +385,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.3"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/0f43b74741d50e637ba4dcef2786621126fe4da6ccf4ee2e94423ee23f6a04ecd91d458e59764c43e4968be139e5197ee43be8a2fea2c09f0b202a3391e548cc
+  checksum: 10c0/355746e21ad7f43e4f4daef54cfe2ef461ecd19446b2afedd53c39df1bf9aa2eeeeaabee2279b1321de89a97c9360e4f76e9ba950fee50ff1676c25f6929d625
   languageName: node
   linkType: hard
 
@@ -694,9 +660,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.4"
+"@babel/plugin-transform-async-generator-functions@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -704,7 +670,7 @@ __metadata:
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/f2eef4de609975a3f7da7832576b5ffc93e43c80f87e1a99e886b0f8591096cfc4c37e2d5f52fdeaa2a9c09a25a59f3e621159abaca75d3193922a5c0e4cbe0c
+  checksum: 10c0/4ff75f9ce500e1de8c0236fa5122e6475a477d19cb9a4c2ae8651e78e717ebb2e2cecfeca69d420def779deaec78b945843b9ffd15f02ecd7de5072030b4469b
   languageName: node
   linkType: hard
 
@@ -768,22 +734,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.23.5":
-  version: 7.23.5
-  resolution: "@babel/plugin-transform-classes@npm:7.23.5"
+"@babel/plugin-transform-classes@npm:^7.23.8":
+  version: 7.23.8
+  resolution: "@babel/plugin-transform-classes@npm:7.23.8"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/helper-replace-supers": "npm:^7.22.20"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
     globals: "npm:^11.1.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/07988f52b4893151887d1ea6ff79e5fe834078c5731bd09babd5659edbbae21ea4e2de326a02443a63fd776b4c945da6177f07875b56fe66e0b7899e830a9e92
+  checksum: 10c0/227ac5166501e04d9e7fbd5eda6869b084ffa4af6830ac12544ac6ea14953ca00eb1762b0df9349c0f6c8d2a799385910f558066cd0fb85b9ca437b1131a6043
   languageName: node
   linkType: hard
 
@@ -977,9 +942,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.3"
+"@babel/plugin-transform-modules-systemjs@npm:^7.23.9":
+  version: 7.23.9
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9"
   dependencies:
     "@babel/helper-hoist-variables": "npm:^7.22.5"
     "@babel/helper-module-transforms": "npm:^7.23.3"
@@ -987,7 +952,7 @@ __metadata:
     "@babel/helper-validator-identifier": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/0d55280a276510222c8896bf4e581acb84824aa5b14c824f7102242ad6bc5104aaffe5ab22fe4d27518f4ae2811bd59c36d0c0bfa695157f9cfce33f0517a069
+  checksum: 10c0/1926631fe9d87c0c53427a3420ad49da62d53320d0016b6afab64e5417a672aa5bdff3ea1d24746ffa1e43319c28a80f5d8cef0ad214760d399c293b5850500f
   languageName: node
   linkType: hard
 
@@ -1351,8 +1316,8 @@ __metadata:
   linkType: hard
 
 "@babel/preset-env@npm:^7.20.2, @babel/preset-env@npm:^7.23.2, @babel/preset-env@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/preset-env@npm:7.23.6"
+  version: 7.23.9
+  resolution: "@babel/preset-env@npm:7.23.9"
   dependencies:
     "@babel/compat-data": "npm:^7.23.5"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
@@ -1360,7 +1325,7 @@ __metadata:
     "@babel/helper-validator-option": "npm:^7.23.5"
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3"
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.3"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7"
     "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
     "@babel/plugin-syntax-class-properties": "npm:^7.12.13"
@@ -1381,13 +1346,13 @@ __metadata:
     "@babel/plugin-syntax-top-level-await": "npm:^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
     "@babel/plugin-transform-arrow-functions": "npm:^7.23.3"
-    "@babel/plugin-transform-async-generator-functions": "npm:^7.23.4"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.23.9"
     "@babel/plugin-transform-async-to-generator": "npm:^7.23.3"
     "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3"
     "@babel/plugin-transform-block-scoping": "npm:^7.23.4"
     "@babel/plugin-transform-class-properties": "npm:^7.23.3"
     "@babel/plugin-transform-class-static-block": "npm:^7.23.4"
-    "@babel/plugin-transform-classes": "npm:^7.23.5"
+    "@babel/plugin-transform-classes": "npm:^7.23.8"
     "@babel/plugin-transform-computed-properties": "npm:^7.23.3"
     "@babel/plugin-transform-destructuring": "npm:^7.23.3"
     "@babel/plugin-transform-dotall-regex": "npm:^7.23.3"
@@ -1403,7 +1368,7 @@ __metadata:
     "@babel/plugin-transform-member-expression-literals": "npm:^7.23.3"
     "@babel/plugin-transform-modules-amd": "npm:^7.23.3"
     "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.23.3"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.23.9"
     "@babel/plugin-transform-modules-umd": "npm:^7.23.3"
     "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5"
     "@babel/plugin-transform-new-target": "npm:^7.23.3"
@@ -1429,14 +1394,14 @@ __metadata:
     "@babel/plugin-transform-unicode-regex": "npm:^7.23.3"
     "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3"
     "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2: "npm:^0.4.6"
-    babel-plugin-polyfill-corejs3: "npm:^0.8.5"
-    babel-plugin-polyfill-regenerator: "npm:^0.5.3"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.8"
+    babel-plugin-polyfill-corejs3: "npm:^0.9.0"
+    babel-plugin-polyfill-regenerator: "npm:^0.5.5"
     core-js-compat: "npm:^3.31.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/5b24d179af52f082d04b9b98cc4777e37bf31a97cef5a91d8917e996dbd75f2f743c88c40f80744cb8529355bb674619d150c0260c32d834aa4067e21d0c8962
+  checksum: 10c0/2837a42089180e51bfd6864b6d197e01fc0abec1920422e71c0513c2fc8fb5f3bfe694ed778cc4e45856c546964945bc53bf8105e4b26f3580ce3685fa50cc0f
   languageName: node
   linkType: hard
 
@@ -1498,17 +1463,17 @@ __metadata:
   linkType: hard
 
 "@babel/register@npm:^7.22.15":
-  version: 7.22.15
-  resolution: "@babel/register@npm:7.22.15"
+  version: 7.23.7
+  resolution: "@babel/register@npm:7.23.7"
   dependencies:
     clone-deep: "npm:^4.0.1"
     find-cache-dir: "npm:^2.0.0"
     make-dir: "npm:^2.1.0"
-    pirates: "npm:^4.0.5"
+    pirates: "npm:^4.0.6"
     source-map-support: "npm:^0.5.16"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/895cc773c3b3eae909478ea2a9735ef6edd634b04b4aaaad2ce576fd591c2b3c70ff8c90423e769a291bee072186e7e4801480c1907e31ba3053c6cdba5571cb
+  checksum: 10c0/b2466e41a4394e725b57e139ba45c3f61b88546d3cb443e84ce46cb34071b60c6cdb706a14c58a1443db530691a54f51da1f0c97f6c1aecbb838a2fb7eb5dbb9
   languageName: node
   linkType: hard
 
@@ -1519,56 +1484,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
-  version: 7.23.6
-  resolution: "@babel/runtime@npm:7.23.6"
-  dependencies:
-    regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/d886954e985ef8e421222f7a2848884d96a752e0020d3078b920dd104e672fdf23bcc6f51a44313a048796319f1ac9d09c2c88ec8cbb4e1f09174bcd3335b9ff
-  languageName: node
-  linkType: hard
-
-"@babel/runtime@npm:^7.23.6":
-  version: 7.23.7
-  resolution: "@babel/runtime@npm:7.23.7"
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+  version: 7.23.9
+  resolution: "@babel/runtime@npm:7.23.9"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/3e304133ee55b0750e03e53cb4efb47fb2bdcdb5795f85bbffa10595196c34b9be60eb65bd6d833c87f49fc827f0365f86f95f51d85b188004d3128bb5129c93
+  checksum: 10c0/e71205fdd7082b2656512cc98e647d9ea7e222e4fe5c36e9e5adc026446fcc3ba7b3cdff8b0b694a0b78bb85db83e7b1e3d4c56ef90726682b74f13249cf952d
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.22.15, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3":
-  version: 7.22.15
-  resolution: "@babel/template@npm:7.22.15"
-  dependencies:
-    "@babel/code-frame": "npm:^7.22.13"
-    "@babel/parser": "npm:^7.22.15"
-    "@babel/types": "npm:^7.22.15"
-  checksum: 10c0/9312edd37cf1311d738907003f2aa321a88a42ba223c69209abe4d7111db019d321805504f606c7fd75f21c6cf9d24d0a8223104cd21ebd207e241b6c551f454
-  languageName: node
-  linkType: hard
-
-"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.6, @babel/traverse@npm:^7.7.0":
-  version: 7.23.6
-  resolution: "@babel/traverse@npm:7.23.6"
+"@babel/template@npm:^7.22.15, @babel/template@npm:^7.22.5, @babel/template@npm:^7.23.9, @babel/template@npm:^7.3.3":
+  version: 7.23.9
+  resolution: "@babel/template@npm:7.23.9"
   dependencies:
     "@babel/code-frame": "npm:^7.23.5"
-    "@babel/generator": "npm:^7.23.6"
-    "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-hoist-variables": "npm:^7.22.5"
-    "@babel/helper-split-export-declaration": "npm:^7.22.6"
-    "@babel/parser": "npm:^7.23.6"
-    "@babel/types": "npm:^7.23.6"
-    debug: "npm:^4.3.1"
-    globals: "npm:^11.1.0"
-  checksum: 10c0/5b4ebb94a00a7e1daf111e4b0b45a7998d5b7598637a14e75e855e88cc1b702789e09a958726b5d599a003be1e9032dbdfde4b88ea6061332228738950d5582d
+    "@babel/parser": "npm:^7.23.9"
+    "@babel/types": "npm:^7.23.9"
+  checksum: 10c0/0e8b60119433787742bc08ae762bbd8d6755611c4cabbcb7627b292ec901a55af65d93d1c88572326069efb64136ef151ec91ffb74b2df7689bbab237030833a
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.23.7":
-  version: 7.23.7
-  resolution: "@babel/traverse@npm:7.23.7"
+"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.7.0":
+  version: 7.23.9
+  resolution: "@babel/traverse@npm:7.23.9"
   dependencies:
     "@babel/code-frame": "npm:^7.23.5"
     "@babel/generator": "npm:^7.23.6"
@@ -1576,26 +1514,15 @@ __metadata:
     "@babel/helper-function-name": "npm:^7.23.0"
     "@babel/helper-hoist-variables": "npm:^7.22.5"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
-    "@babel/parser": "npm:^7.23.6"
-    "@babel/types": "npm:^7.23.6"
+    "@babel/parser": "npm:^7.23.9"
+    "@babel/types": "npm:^7.23.9"
     debug: "npm:^4.3.1"
     globals: "npm:^11.1.0"
-  checksum: 10c0/e32fceb4249beec2bde83968ddffe17444221c1ee5cd18c543a2feaf94e3ca83f2a4dfbc2dcca87cf226e0105973e0fe3717063a21e982a9de9945615ab3f3f5
+  checksum: 10c0/d1615d1d02f04d47111a7ea4446a1a6275668ca39082f31d51f08380de9502e19862be434eaa34b022ce9a17dbb8f9e2b73a746c654d9575f3a680a7ffdf5630
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0":
-  version: 7.23.6
-  resolution: "@babel/types@npm:7.23.6"
-  dependencies:
-    "@babel/helper-string-parser": "npm:^7.23.4"
-    "@babel/helper-validator-identifier": "npm:^7.22.20"
-    to-fast-properties: "npm:^2.0.0"
-  checksum: 10c0/42cefce8a68bd09bb5828b4764aa5586c53c60128ac2ac012e23858e1c179347a4aac9c66fc577994fbf57595227611c5ec8270bf0cfc94ff033bbfac0550b70
-  languageName: node
-  linkType: hard
-
-"@babel/types@npm:^7.8.3":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
   version: 7.23.9
   resolution: "@babel/types@npm:7.23.9"
   dependencies:
@@ -1621,16 +1548,16 @@ __metadata:
   linkType: hard
 
 "@chanzuckerberg/axe-storybook-testing@npm:^7.1.3":
-  version: 7.1.3
-  resolution: "@chanzuckerberg/axe-storybook-testing@npm:7.1.3"
+  version: 7.2.0
+  resolution: "@chanzuckerberg/axe-storybook-testing@npm:7.2.0"
   dependencies:
-    "@playwright/browser-chromium": "npm:^1.39.0"
+    "@playwright/browser-chromium": "npm:^1.41.2"
     http-server: "npm:^14.1.1"
     indent-string: "npm:^4.0.0"
     lodash: "npm:^4.17.21"
-    mocha: "npm:^10.2.0"
+    mocha: "npm:^10.3.0"
     p-timeout: "npm:^4.1.0"
-    playwright: "npm:^1.39.0"
+    playwright: "npm:^1.41.2"
     portfinder: "npm:^1.0.32"
     ts-dedent: "npm:^2.2.0"
     yargs: "npm:^17.7.2"
@@ -1640,7 +1567,7 @@ __metadata:
     axe-core: ^4.0.0
   bin:
     axe-storybook: bin/axe-storybook.js
-  checksum: 10c0/324f3f41c88b2c08e06c05f4beecba95aa093a5362a5edb3fd45f117245b8625875f6b9c865ed4e5a3c9831f1083ac1fd0f5f88ef8871409e291d11097aa35af
+  checksum: 10c0/5d9afd455c5fb745eb219f5bff14d7d6789ef3cf34044f99289a82a7ac69f7cf368ec24c7b3fd5862d1e19bbbf6ceb1df0c42b3c3bd55303705a9f3e1564141d
   languageName: node
   linkType: hard
 
@@ -1669,32 +1596,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@commitlint/config-validator@npm:^18.4.3":
-  version: 18.4.3
-  resolution: "@commitlint/config-validator@npm:18.4.3"
+"@commitlint/config-validator@npm:^18.6.1":
+  version: 18.6.1
+  resolution: "@commitlint/config-validator@npm:18.6.1"
   dependencies:
-    "@commitlint/types": "npm:^18.4.3"
+    "@commitlint/types": "npm:^18.6.1"
     ajv: "npm:^8.11.0"
-  checksum: 10c0/8e6f3130a2e9c17c08276fc81b16e70320af27718bfdfc954e5a591538a23f9510bbbf61f60499d5e09488f112df9400730f065c7309006a9e9da7bd1d371385
+  checksum: 10c0/611dec17774e261189b041db180068c7951f6d85d12895497b5fe2408f77eccba32f8cec2bb656a165e99c2b038e806aa2d42e59e68eb0e090eb98b5b3f4e854
   languageName: node
   linkType: hard
 
-"@commitlint/execute-rule@npm:^18.4.3":
-  version: 18.4.3
-  resolution: "@commitlint/execute-rule@npm:18.4.3"
-  checksum: 10c0/6a0514733c3fab7279b4831df58f518b98c589d05eace2d9b5f1f64d05f9f1493af51f3b6004df4f90e794b98798ee07cf4c5fbe9e97f37d5437a50cd56bf52f
+"@commitlint/execute-rule@npm:^18.6.1":
+  version: 18.6.1
+  resolution: "@commitlint/execute-rule@npm:18.6.1"
+  checksum: 10c0/cdbf397f533ddaf2d90e457d7917ad16e6d8b78fdc79aff583618c42c758159eaaec33bd92e7f5dfefd0d5c6652c5d36d511b5e73cf5a2de12eb018b1e6be5f0
   languageName: node
   linkType: hard
 
 "@commitlint/load@npm:>6.1.1":
-  version: 18.4.3
-  resolution: "@commitlint/load@npm:18.4.3"
-  dependencies:
-    "@commitlint/config-validator": "npm:^18.4.3"
-    "@commitlint/execute-rule": "npm:^18.4.3"
-    "@commitlint/resolve-extends": "npm:^18.4.3"
-    "@commitlint/types": "npm:^18.4.3"
-    "@types/node": "npm:^18.11.9"
+  version: 18.6.1
+  resolution: "@commitlint/load@npm:18.6.1"
+  dependencies:
+    "@commitlint/config-validator": "npm:^18.6.1"
+    "@commitlint/execute-rule": "npm:^18.6.1"
+    "@commitlint/resolve-extends": "npm:^18.6.1"
+    "@commitlint/types": "npm:^18.6.1"
     chalk: "npm:^4.1.0"
     cosmiconfig: "npm:^8.3.6"
     cosmiconfig-typescript-loader: "npm:^5.0.0"
@@ -1702,60 +1628,60 @@ __metadata:
     lodash.merge: "npm:^4.6.2"
     lodash.uniq: "npm:^4.5.0"
     resolve-from: "npm:^5.0.0"
-  checksum: 10c0/e40a8cb162603b9e01f4216c643314364cfbe7a68eab8ff30bb90eaf67ac9dacafc51f6f608ff8e45639877d8ce2441fd1744b85d551d00e55cefa0797bebefb
+  checksum: 10c0/da4f90c92015016b97bff65b446011185b2701383929ba8f4a6e1307be919cb2c94e3b62906f460edded76c530f0185d13bee8fe20c4a78995bf8f6aae65ae30
   languageName: node
   linkType: hard
 
-"@commitlint/resolve-extends@npm:^18.4.3":
-  version: 18.4.3
-  resolution: "@commitlint/resolve-extends@npm:18.4.3"
+"@commitlint/resolve-extends@npm:^18.6.1":
+  version: 18.6.1
+  resolution: "@commitlint/resolve-extends@npm:18.6.1"
   dependencies:
-    "@commitlint/config-validator": "npm:^18.4.3"
-    "@commitlint/types": "npm:^18.4.3"
+    "@commitlint/config-validator": "npm:^18.6.1"
+    "@commitlint/types": "npm:^18.6.1"
     import-fresh: "npm:^3.0.0"
     lodash.mergewith: "npm:^4.6.2"
     resolve-from: "npm:^5.0.0"
     resolve-global: "npm:^1.0.0"
-  checksum: 10c0/cf90d48e5111a43778036a2bd80f16f96a32acac222bdee14a6c66a9fab0406626fe2ac2a89cc1862f17568b49b9e8ed1acea2b193e83c92d5e7a8369e41b988
+  checksum: 10c0/05fbf6742c2b3e719d40c112d37efd3b395aa17daeb1d23913f6a72f1cc2ec3c5ec7f3ba683eef12fe698c7002aa186b05c2fe0d0cefe16ef8e967d10d7c1397
   languageName: node
   linkType: hard
 
-"@commitlint/types@npm:^18.4.3":
-  version: 18.4.3
-  resolution: "@commitlint/types@npm:18.4.3"
+"@commitlint/types@npm:^18.6.1":
+  version: 18.6.1
+  resolution: "@commitlint/types@npm:18.6.1"
   dependencies:
     chalk: "npm:^4.1.0"
-  checksum: 10c0/07cbc4b5eb813052401d9e332c0dadca7864cd22eddd06edb6afd1da212243d505c4429ce100012c4086ea99d0f4a4086382fc88e3e662c6577e69d638c3903e
+  checksum: 10c0/5728f5cb62bcaad5158dd8982ab5d44c1ea1aee9ac251026cd91b9a4795bb912505c904f75cbd3ae0d1bb7b4dd1e5d84990b76093230018166af8e111b658685
   languageName: node
   linkType: hard
 
-"@csstools/css-parser-algorithms@npm:^2.3.2":
-  version: 2.4.0
-  resolution: "@csstools/css-parser-algorithms@npm:2.4.0"
+"@csstools/css-parser-algorithms@npm:^2.5.0":
+  version: 2.5.0
+  resolution: "@csstools/css-parser-algorithms@npm:2.5.0"
   peerDependencies:
-    "@csstools/css-tokenizer": ^2.2.2
-  checksum: 10c0/bcfc067b9d1bd5e0bc6044bfbf6450a4a6837d88c5ffd081e2159d4e442c28f018b58c7c2b3ce176ba0bf76cbbce0fd3c65468a40b9867ad9b3e3ef90b9b2655
+    "@csstools/css-tokenizer": ^2.2.3
+  checksum: 10c0/31b4a523d956e204af9842183678cca5a88ad76551d54dcb6083f8a6f2dfd8fdec6c09bca5410842af54b90997308bebee7593c17dbc1a4e951453b54bd3f024
   languageName: node
   linkType: hard
 
-"@csstools/css-tokenizer@npm:^2.2.1":
-  version: 2.2.2
-  resolution: "@csstools/css-tokenizer@npm:2.2.2"
-  checksum: 10c0/9e7374aab06a811f868a85127af1ff07ad7a56e22e8c46930e789a907098bdd4e6eec82e0cb0d4b8ac1cd5cd054c1f0e329ec50d8548f57d660aeee7cf9b3167
+"@csstools/css-tokenizer@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "@csstools/css-tokenizer@npm:2.2.3"
+  checksum: 10c0/557266ec52e8b36c19008a5bbd7151effba085cdd6d68270c01afebf914981caac698eda754b2a530a8a9947a3dd70e3f3a39a5e037c4170bb2a055a92754acb
   languageName: node
   linkType: hard
 
-"@csstools/media-query-list-parser@npm:^2.1.5":
-  version: 2.1.6
-  resolution: "@csstools/media-query-list-parser@npm:2.1.6"
+"@csstools/media-query-list-parser@npm:^2.1.7":
+  version: 2.1.7
+  resolution: "@csstools/media-query-list-parser@npm:2.1.7"
   peerDependencies:
-    "@csstools/css-parser-algorithms": ^2.4.0
-    "@csstools/css-tokenizer": ^2.2.2
-  checksum: 10c0/06da3e5c01e4785963b821ee2eb31f4fcec622f3b0e4e0748113f287c876f241be211ba11d435d0cc1f0e9f2e26baf5fbf6f8563dc88a49709c3d49e79490b76
+    "@csstools/css-parser-algorithms": ^2.5.0
+    "@csstools/css-tokenizer": ^2.2.3
+  checksum: 10c0/433aef06b00f1d402fd24074a1919b8e2de94245a3b780da6466c8cc9e0f3cc93d2db930f0fce36c7d6908cd50b626cd61e803d3f62dddad79eeb742858028ef
   languageName: node
   linkType: hard
 
-"@csstools/selector-specificity@npm:^3.0.0":
+"@csstools/selector-specificity@npm:^3.0.1":
   version: 3.0.1
   resolution: "@csstools/selector-specificity@npm:3.0.1"
   peerDependencies:
@@ -1789,6 +1715,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@czi-sds/data-viz@workspace:packages/data-viz"
   dependencies:
+    "@geometricpanda/storybook-addon-badges": "npm:^2.0.2"
     "@reduxjs/toolkit": "npm:^2.1.0"
     "@types/react": "npm:^18.2.46"
     "@types/react-dom": "npm:^18.2.18"
@@ -1833,6 +1760,7 @@ __metadata:
     "@emotion/css": "npm:^11.11.2"
     "@emotion/react": "npm:^11.11.3"
     "@emotion/styled": "npm:^11.11.0"
+    "@geometricpanda/storybook-addon-badges": "npm:^2.0.2"
     "@mui/base": "npm:^5.0.0-beta.30"
     "@mui/icons-material": "npm:^5.15.3"
     "@mui/lab": "npm:^5.0.0-alpha.159"
@@ -1841,22 +1769,22 @@ __metadata:
     "@reduxjs/toolkit": "npm:^2.1.0"
     "@rollup/plugin-typescript": "npm:^11.1.5"
     "@rollup/plugin-url": "npm:^8.0.2"
-    "@storybook/addon-a11y": "npm:^7.6.16"
-    "@storybook/addon-actions": "npm:^7.6.16"
-    "@storybook/addon-essentials": "npm:^7.6.16"
-    "@storybook/addon-interactions": "npm:^7.6.16"
-    "@storybook/addon-links": "npm:^7.6.16"
-    "@storybook/addon-storyshots": "npm:^7.6.16"
-    "@storybook/addons": "npm:^7.6.16"
-    "@storybook/components": "npm:^7.6.16"
-    "@storybook/core-events": "npm:^7.6.16"
-    "@storybook/manager-api": "npm:^7.6.16"
-    "@storybook/preview-api": "npm:^7.6.16"
-    "@storybook/react": "npm:^7.6.16"
-    "@storybook/react-webpack5": "npm:^7.6.16"
+    "@storybook/addon-a11y": "npm:^7.6.17"
+    "@storybook/addon-actions": "npm:^7.6.17"
+    "@storybook/addon-essentials": "npm:^7.6.17"
+    "@storybook/addon-interactions": "npm:^7.6.17"
+    "@storybook/addon-links": "npm:^7.6.17"
+    "@storybook/addon-storyshots": "npm:^7.6.17"
+    "@storybook/addons": "npm:^7.6.17"
+    "@storybook/components": "npm:^7.6.17"
+    "@storybook/core-events": "npm:^7.6.17"
+    "@storybook/manager-api": "npm:^7.6.17"
+    "@storybook/preview-api": "npm:^7.6.17"
+    "@storybook/react": "npm:^7.6.17"
+    "@storybook/react-webpack5": "npm:^7.6.17"
     "@storybook/test-runner": "npm:^0.16.0"
     "@storybook/testing-library": "npm:^0.2.2"
-    "@storybook/theming": "npm:^7.6.16"
+    "@storybook/theming": "npm:^7.6.17"
     "@svgr/rollup": "npm:^8.1.0"
     "@svgr/webpack": "npm:^8.1.0"
     "@testing-library/dom": "npm:^9.3.3"
@@ -1928,7 +1856,7 @@ __metadata:
     sass: "npm:^1.70.0"
     sass-loader: "npm:^14.1.0"
     simplex-noise: "npm:^4.0.1"
-    storybook: "npm:^7.6.16"
+    storybook: "npm:^7.6.17"
     storybook-addon-emotion-theme: "npm:^2.1.1"
     storybook-addon-pseudo-states: "npm:^2.1.2"
     style-dictionary: "npm:^3.9.2"
@@ -2057,20 +1985,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "@emotion/serialize@npm:1.1.2"
-  dependencies:
-    "@emotion/hash": "npm:^0.9.1"
-    "@emotion/memoize": "npm:^0.8.1"
-    "@emotion/unitless": "npm:^0.8.1"
-    "@emotion/utils": "npm:^1.2.1"
-    csstype: "npm:^3.0.2"
-  checksum: 10c0/d243e0e5abce8d2183d25a32ec89bf650ee741ebadb29e6405abde05d4e2ed446ba5b3f725a29833ad709d0d08f0a5c8d0532fdcd43f4b23d931d8b6d4f218c1
-  languageName: node
-  linkType: hard
-
-"@emotion/serialize@npm:^1.1.3":
+"@emotion/serialize@npm:^1.1.2, @emotion/serialize@npm:^1.1.3":
   version: 1.1.3
   resolution: "@emotion/serialize@npm:1.1.3"
   dependencies:
@@ -2343,41 +2258,63 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.4.2":
-  version: 1.5.2
-  resolution: "@floating-ui/core@npm:1.5.2"
+"@floating-ui/core@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "@floating-ui/core@npm:1.6.0"
   dependencies:
-    "@floating-ui/utils": "npm:^0.1.3"
-  checksum: 10c0/595896efbd4d4298ef799e734784b924594f179c7b37d6019c7a0bd2f062558f172b4125540668e1242746d69cc8c03f191ba1a3ab2f22d9ad926076bdf21274
+    "@floating-ui/utils": "npm:^0.2.1"
+  checksum: 10c0/667a68036f7dd5ed19442c7792a6002ca02d1799221c4396691bbe0b6008b48f6ccad581225e81fa266bb91232f6c66838a5f825f554217e1ec886178b93381b
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.5.1":
-  version: 1.5.3
-  resolution: "@floating-ui/dom@npm:1.5.3"
+"@floating-ui/dom@npm:^1.6.1":
+  version: 1.6.3
+  resolution: "@floating-ui/dom@npm:1.6.3"
   dependencies:
-    "@floating-ui/core": "npm:^1.4.2"
-    "@floating-ui/utils": "npm:^0.1.3"
-  checksum: 10c0/e5f30b911f939e40003851077bba441f269ae689bdc43c674bee43aa98fc6b7a5f59be432d27b7be599b1e4ab7b15c752875ea777a89cff01d157e593b78b25b
+    "@floating-ui/core": "npm:^1.0.0"
+    "@floating-ui/utils": "npm:^0.2.0"
+  checksum: 10c0/d6cac10877918ce5a8d1a24b21738d2eb130a0191043d7c0dd43bccac507844d3b4dc5d4107d3891d82f6007945ca8fb4207a1252506e91c37e211f0f73cf77e
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "@floating-ui/react-dom@npm:2.0.4"
+"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.8":
+  version: 2.0.8
+  resolution: "@floating-ui/react-dom@npm:2.0.8"
   dependencies:
-    "@floating-ui/dom": "npm:^1.5.1"
+    "@floating-ui/dom": "npm:^1.6.1"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/5d597a7939e484428452cee775884f6c14055783d811a1abedf03151eb8825ecf42a544553efecdc502f30ca2a6b3e6630485367c39473d259e74f5f1331bc0a
+  checksum: 10c0/4d87451e2dcc54b4753a0d81181036e47821cfd0d4c23f7e9c31590c7c91fb15fb0a5a458969a5ddabd61601eca5875ebd4e40bff37cee31f373b8f1ccc64518
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.1.3":
-  version: 0.1.6
-  resolution: "@floating-ui/utils@npm:0.1.6"
-  checksum: 10c0/0a089db0e0526b89e83cb0a773a903517db5c9067cd473febfd8fa91a3a2ccbc3a835234796c1bb528def21dbb67be50e28d9c473cb58a6d90679d7e549b9c0c
+"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@floating-ui/utils@npm:0.2.1"
+  checksum: 10c0/ee77756712cf5b000c6bacf11992ffb364f3ea2d0d51cc45197a7e646a17aeb86ea4b192c0b42f3fbb29487aee918a565e84f710b8c3645827767f406a6b4cc9
+  languageName: node
+  linkType: hard
+
+"@geometricpanda/storybook-addon-badges@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@geometricpanda/storybook-addon-badges@npm:2.0.2"
+  peerDependencies:
+    "@storybook/blocks": ^7.0.0
+    "@storybook/components": ^7.0.0
+    "@storybook/core-events": ^7.0.0
+    "@storybook/manager-api": ^7.0.0
+    "@storybook/preview-api": ^7.0.0
+    "@storybook/theming": ^7.0.0
+    "@storybook/types": ^7.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10c0/83ec0c925a352fecb619ff3cb558ac9e878c9dd8fbd4c504f0d09f772ed31b7f653256a385261c74f129d82a844dfdab7b10494c0a35a20e37418695b4398bf3
   languageName: node
   linkType: hard
 
@@ -2397,7 +2334,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hapi/hoek@npm:^9.0.0":
+"@hapi/hoek@npm:^9.0.0, @hapi/hoek@npm:^9.3.0":
   version: 9.3.0
   resolution: "@hapi/hoek@npm:9.3.0"
   checksum: 10c0/a096063805051fb8bba4c947e293c664b05a32b47e13bc654c0dd43813a1cec993bdd8f29ceb838020299e1d0f89f68dc0d62a603c13c9cc8541963f0beca055
@@ -2424,7 +2361,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hapi/topo@npm:^5.0.0":
+"@hapi/topo@npm:^5.0.0, @hapi/topo@npm:^5.1.0":
   version: 5.1.0
   resolution: "@hapi/topo@npm:5.1.0"
   dependencies:
@@ -2434,13 +2371,13 @@ __metadata:
   linkType: hard
 
 "@humanwhocodes/config-array@npm:^0.11.13":
-  version: 0.11.13
-  resolution: "@humanwhocodes/config-array@npm:0.11.13"
+  version: 0.11.14
+  resolution: "@humanwhocodes/config-array@npm:0.11.14"
   dependencies:
-    "@humanwhocodes/object-schema": "npm:^2.0.1"
-    debug: "npm:^4.1.1"
+    "@humanwhocodes/object-schema": "npm:^2.0.2"
+    debug: "npm:^4.3.1"
     minimatch: "npm:^3.0.5"
-  checksum: 10c0/d76ca802d853366094d0e98ff0d0994117fc8eff96649cd357b15e469e428228f597cd2e929d54ab089051684949955f16ee905bb19f7b2f0446fb377157be7a
+  checksum: 10c0/66f725b4ee5fdd8322c737cb5013e19fac72d4d69c8bf4b7feb192fcb83442b035b92186f8e9497c220e58b2d51a080f28a73f7899bc1ab288c3be172c467541
   languageName: node
   linkType: hard
 
@@ -2451,10 +2388,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@humanwhocodes/object-schema@npm:2.0.1"
-  checksum: 10c0/9dba24e59fdb4041829d92b693aacb778add3b6f612aaa9c0774f3b650c11a378cc64f042a59da85c11dae33df456580a3c36837b953541aed6ff94294f97fac
+"@humanwhocodes/object-schema@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@humanwhocodes/object-schema@npm:2.0.2"
+  checksum: 10c0/6fd83dc320231d71c4541d0244051df61f301817e9f9da9fd4cb7e44ec8aacbde5958c1665b0c419401ab935114fdf532a6ad5d4e7294b1af2f347dd91a6983f
   languageName: node
   linkType: hard
 
@@ -2554,12 +2491,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/create-cache-key-function@npm:^27.4.2":
-  version: 27.5.1
-  resolution: "@jest/create-cache-key-function@npm:27.5.1"
+"@jest/create-cache-key-function@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/create-cache-key-function@npm:29.7.0"
   dependencies:
-    "@jest/types": "npm:^27.5.1"
-  checksum: 10c0/1890ac93fad852e0a98c31de1e5f2c548974aefd36e838d27b70834dda1654a153ed6a52258447ebacfd47463e9bdb83750631bee827797c7b9973c083998a96
+    "@jest/types": "npm:^29.6.3"
+  checksum: 10c0/5c47ef62205264adf77b1ff26b969ce9fe84920b8275c3c5e83f4236859d6ae5e4e7027af99eef04a8e334c4e424d44af3e167972083406070aca733ac2a2795
   languageName: node
   linkType: hard
 
@@ -2763,9 +2700,9 @@ __metadata:
   linkType: hard
 
 "@jridgewell/resolve-uri@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "@jridgewell/resolve-uri@npm:3.1.1"
-  checksum: 10c0/0dbc9e29bc640bbbdc5b9876d2859c69042bfcf1423c1e6421bcca53e826660bff4e41c7d4bcb8dbea696404231a6f902f76ba41835d049e20f2dd6cffb713bf
+  version: 3.1.2
+  resolution: "@jridgewell/resolve-uri@npm:3.1.2"
+  checksum: 10c0/d502e6fb516b35032331406d4e962c21fe77cdf1cbdb49c6142bcbd9e30507094b18972778a6e27cbad756209cfe34b1a27729e6fa08a2eb92b33943f680cf1e
   languageName: node
   linkType: hard
 
@@ -2793,17 +2730,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.9":
-  version: 0.3.20
-  resolution: "@jridgewell/trace-mapping@npm:0.3.20"
-  dependencies:
-    "@jridgewell/resolve-uri": "npm:^3.1.0"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
-  checksum: 10c0/0ea0b2675cf513ec44dc25605616a3c9b808b9832e74b5b63c44260d66b58558bba65764f81928fc1033ead911f8718dca1134049c3e7a93937faf436671df31
-  languageName: node
-  linkType: hard
-
-"@jridgewell/trace-mapping@npm:^0.3.20":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.22
   resolution: "@jridgewell/trace-mapping@npm:0.3.22"
   dependencies:
@@ -2820,12 +2747,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lerna/create@npm:8.0.1":
-  version: 8.0.1
-  resolution: "@lerna/create@npm:8.0.1"
+"@lerna/create@npm:8.1.2":
+  version: 8.1.2
+  resolution: "@lerna/create@npm:8.1.2"
   dependencies:
     "@npmcli/run-script": "npm:7.0.2"
-    "@nx/devkit": "npm:>=17.1.2 < 18"
+    "@nx/devkit": "npm:>=17.1.2 < 19"
     "@octokit/plugin-enterprise-rest": "npm:6.0.1"
     "@octokit/rest": "npm:19.0.11"
     byte-size: "npm:8.1.1"
@@ -2862,7 +2789,7 @@ __metadata:
     npm-packlist: "npm:5.1.1"
     npm-registry-fetch: "npm:^14.0.5"
     npmlog: "npm:^6.0.2"
-    nx: "npm:>=17.1.2 < 18"
+    nx: "npm:>=17.1.2 < 19"
     p-map: "npm:4.0.0"
     p-map-series: "npm:2.1.0"
     p-queue: "npm:6.6.2"
@@ -2888,14 +2815,14 @@ __metadata:
     write-pkg: "npm:4.0.0"
     yargs: "npm:17.7.2"
     yargs-parser: "npm:21.1.1"
-  checksum: 10c0/93a2f3414a8eb37015190e2dc3a5ab9634fcf54bfd317b2452171ffb2d69f6dfedd8d50c6a351e796a12c776dea1d73eb1f97ceb792fbab072c42da31ff41369
+  checksum: 10c0/c175d63fec4df805a4ec76db51c01d4ef15c9c7b2ea7933e36fcad604fe9f63e1352725009ea82598b64822bf02517b193bcd694d703d04152c133e4614951f1
   languageName: node
   linkType: hard
 
 "@mdn/browser-compat-data@npm:^5.3.7":
-  version: 5.5.1
-  resolution: "@mdn/browser-compat-data@npm:5.5.1"
-  checksum: 10c0/001930ecd9f1b6ed87151710218bb1c3cb2145c8774c547c046d02bf9d9e6aad31f798921ae11b645808c48d3eb2c6ca684075aa223ff11cfa12db2983d4c629
+  version: 5.5.10
+  resolution: "@mdn/browser-compat-data@npm:5.5.10"
+  checksum: 10c0/a62a72ec659ce57feb09d9be3252ff6945ee8919b529af2e680480a9d95e935b33074aba7d03656efd7fdab1be9040ba2bf2fe6e8fc7e8167304b7bc74f926a4
   languageName: node
   linkType: hard
 
@@ -2911,16 +2838,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:5.0.0-beta.30, @mui/base@npm:^5.0.0-beta.30":
-  version: 5.0.0-beta.30
-  resolution: "@mui/base@npm:5.0.0-beta.30"
+"@mui/base@npm:5.0.0-beta.36, @mui/base@npm:^5.0.0-beta.30":
+  version: 5.0.0-beta.36
+  resolution: "@mui/base@npm:5.0.0-beta.36"
   dependencies:
-    "@babel/runtime": "npm:^7.23.6"
-    "@floating-ui/react-dom": "npm:^2.0.4"
-    "@mui/types": "npm:^7.2.12"
-    "@mui/utils": "npm:^5.15.3"
+    "@babel/runtime": "npm:^7.23.9"
+    "@floating-ui/react-dom": "npm:^2.0.8"
+    "@mui/types": "npm:^7.2.13"
+    "@mui/utils": "npm:^5.15.9"
     "@popperjs/core": "npm:^2.11.8"
-    clsx: "npm:^2.0.0"
+    clsx: "npm:^2.1.0"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0
@@ -2929,22 +2856,22 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/a6009f4f16e5e0c8a6d5c649b602ab60561c7abf16dac2d71f80a277fd1326e07403628567c7bcbf80b3092620d811ca26ff7efa95a29dd495dbe883d96a64ff
+  checksum: 10c0/b789cd9e6906d56698bb5536704aefa475283081f1287b8340bb74dea4465565f7958c5e61bbc000f0d2a8e97aaf95a203f35cc737115e3edc7ea389da3d9c9e
   languageName: node
   linkType: hard
 
-"@mui/core-downloads-tracker@npm:^5.15.3":
-  version: 5.15.3
-  resolution: "@mui/core-downloads-tracker@npm:5.15.3"
-  checksum: 10c0/44f179462d8560843f530b53d3e9058f6b794719619b9beedc98dba6b9756690e8234be3d84fb0e691fb46307bcd898c8add66c17dcf9cd421d67dbafcabe28a
+"@mui/core-downloads-tracker@npm:^5.15.10":
+  version: 5.15.10
+  resolution: "@mui/core-downloads-tracker@npm:5.15.10"
+  checksum: 10c0/d05da33eb3532994aa0b71e8131c8c21b4c6256976bfa704b2268c2bd88ae2c6853b0832c2af904507820e56563d373020827310abd626e146e026200b76eacf
   languageName: node
   linkType: hard
 
 "@mui/icons-material@npm:^5.15.3":
-  version: 5.15.3
-  resolution: "@mui/icons-material@npm:5.15.3"
+  version: 5.15.10
+  resolution: "@mui/icons-material@npm:5.15.10"
   dependencies:
-    "@babel/runtime": "npm:^7.23.6"
+    "@babel/runtime": "npm:^7.23.9"
   peerDependencies:
     "@mui/material": ^5.0.0
     "@types/react": ^17.0.0 || ^18.0.0
@@ -2952,25 +2879,25 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/5b3e9fb42cb8dde52d40df7de5c466213000c544ed60c07c514887fcb73344194e080e7cf982be8d71632af4b2b34a8e94ee11919beb517ec3a5e684edda3d19
+  checksum: 10c0/d49747d962ad9dec172d498173ee60fe29f3c818d15458fdc21b5d7a1cfa3a5acf8c6f3e6e35c665a3b0f4a088ac6806601c0d408403117f6711740448db4346
   languageName: node
   linkType: hard
 
 "@mui/lab@npm:^5.0.0-alpha.159":
-  version: 5.0.0-alpha.159
-  resolution: "@mui/lab@npm:5.0.0-alpha.159"
-  dependencies:
-    "@babel/runtime": "npm:^7.23.6"
-    "@mui/base": "npm:5.0.0-beta.30"
-    "@mui/system": "npm:^5.15.3"
-    "@mui/types": "npm:^7.2.12"
-    "@mui/utils": "npm:^5.15.3"
-    clsx: "npm:^2.0.0"
+  version: 5.0.0-alpha.165
+  resolution: "@mui/lab@npm:5.0.0-alpha.165"
+  dependencies:
+    "@babel/runtime": "npm:^7.23.9"
+    "@mui/base": "npm:5.0.0-beta.36"
+    "@mui/system": "npm:^5.15.9"
+    "@mui/types": "npm:^7.2.13"
+    "@mui/utils": "npm:^5.15.9"
+    clsx: "npm:^2.1.0"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@emotion/react": ^11.5.0
     "@emotion/styled": ^11.3.0
-    "@mui/material": ">=5.10.11"
+    "@mui/material": ">=5.15.0"
     "@types/react": ^17.0.0 || ^18.0.0
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
@@ -2981,23 +2908,23 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/7a18be083da00754348095f383d44bf7c233dd3e742a921a3adc8b670341ad6f7c849e8730ddba89df4bbcc23f1304d0a2b9ec9ff1fffb3c0b5a30aa45d9672a
+  checksum: 10c0/f392796b5c3984390ee5df1792969a0db715f36648278279978e7019496d8827903d91c50c3e68c7518104fadb861a32cea80a3c5771e9a3ccf6b4d14816a77f
   languageName: node
   linkType: hard
 
 "@mui/material@npm:^5.15.3":
-  version: 5.15.3
-  resolution: "@mui/material@npm:5.15.3"
-  dependencies:
-    "@babel/runtime": "npm:^7.23.6"
-    "@mui/base": "npm:5.0.0-beta.30"
-    "@mui/core-downloads-tracker": "npm:^5.15.3"
-    "@mui/system": "npm:^5.15.3"
-    "@mui/types": "npm:^7.2.12"
-    "@mui/utils": "npm:^5.15.3"
+  version: 5.15.10
+  resolution: "@mui/material@npm:5.15.10"
+  dependencies:
+    "@babel/runtime": "npm:^7.23.9"
+    "@mui/base": "npm:5.0.0-beta.36"
+    "@mui/core-downloads-tracker": "npm:^5.15.10"
+    "@mui/system": "npm:^5.15.9"
+    "@mui/types": "npm:^7.2.13"
+    "@mui/utils": "npm:^5.15.9"
     "@types/react-transition-group": "npm:^4.4.10"
-    clsx: "npm:^2.0.0"
-    csstype: "npm:^3.1.2"
+    clsx: "npm:^2.1.0"
+    csstype: "npm:^3.1.3"
     prop-types: "npm:^15.8.1"
     react-is: "npm:^18.2.0"
     react-transition-group: "npm:^4.4.5"
@@ -3014,16 +2941,16 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/1dcc01eb1f5de162c765578303c055033da7c803f57c69b4f5cc09841fbe238d6b90e1cbb1f0e08820aa078d41d23455120ea0656b048f6bd165d231054bdb25
+  checksum: 10c0/057147a7f68269641954dd456852a801c71fe10cc1dee7c4d669e8327a792ac2dee4083c4562b918a3696276a9035ba2a5b1b5261dc7f1a385711b938ae508fe
   languageName: node
   linkType: hard
 
-"@mui/private-theming@npm:^5.15.3":
-  version: 5.15.3
-  resolution: "@mui/private-theming@npm:5.15.3"
+"@mui/private-theming@npm:^5.15.9":
+  version: 5.15.9
+  resolution: "@mui/private-theming@npm:5.15.9"
   dependencies:
-    "@babel/runtime": "npm:^7.23.6"
-    "@mui/utils": "npm:^5.15.3"
+    "@babel/runtime": "npm:^7.23.9"
+    "@mui/utils": "npm:^5.15.9"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0
@@ -3031,17 +2958,17 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/3eff09ad01652055fc9f27a638147a76231fd3dc158b43e2279e471c9ac12188c19500b185911f8911eb89b20241633e16541d1c1b5286280f88841a254a6b93
+  checksum: 10c0/a5c995b7f2faa9aa39ccf258bc2cafde9a8c265dd15bfbaec974650690d81d662eaae0524f0f8e17d16fe7893a6907cc0c388ac5648cce7b502a77d722daa116
   languageName: node
   linkType: hard
 
-"@mui/styled-engine@npm:^5.15.3":
-  version: 5.15.3
-  resolution: "@mui/styled-engine@npm:5.15.3"
+"@mui/styled-engine@npm:^5.15.9":
+  version: 5.15.9
+  resolution: "@mui/styled-engine@npm:5.15.9"
   dependencies:
-    "@babel/runtime": "npm:^7.23.6"
+    "@babel/runtime": "npm:^7.23.9"
     "@emotion/cache": "npm:^11.11.0"
-    csstype: "npm:^3.1.2"
+    csstype: "npm:^3.1.3"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@emotion/react": ^11.4.1
@@ -3052,21 +2979,21 @@ __metadata:
       optional: true
     "@emotion/styled":
       optional: true
-  checksum: 10c0/d4a92e2595b2d79268966da4398dbc24863d297df5c3b0614a1c04c93b985dfed2f88ef75a0afeaeed4d3bfede5b2cb3ba5ed9d33302fa4c9cfbed3b841d234b
+  checksum: 10c0/47968ec55a5a36936dc8c245c1d62fe9be82bdaba800aeea08d111702b3aea8388bc3c2a46ee4ee315efe77b1c7ecf63308fc518afa69114b2fc90a203de48e0
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^5.15.3":
-  version: 5.15.3
-  resolution: "@mui/system@npm:5.15.3"
+"@mui/system@npm:^5.15.9":
+  version: 5.15.9
+  resolution: "@mui/system@npm:5.15.9"
   dependencies:
-    "@babel/runtime": "npm:^7.23.6"
-    "@mui/private-theming": "npm:^5.15.3"
-    "@mui/styled-engine": "npm:^5.15.3"
-    "@mui/types": "npm:^7.2.12"
-    "@mui/utils": "npm:^5.15.3"
-    clsx: "npm:^2.0.0"
-    csstype: "npm:^3.1.2"
+    "@babel/runtime": "npm:^7.23.9"
+    "@mui/private-theming": "npm:^5.15.9"
+    "@mui/styled-engine": "npm:^5.15.9"
+    "@mui/types": "npm:^7.2.13"
+    "@mui/utils": "npm:^5.15.9"
+    clsx: "npm:^2.1.0"
+    csstype: "npm:^3.1.3"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@emotion/react": ^11.5.0
@@ -3080,27 +3007,27 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/d95f75cd4038ed99fe8c7a1987772391da958743563a7e8a1a4792f7fe2bc47c2b06a889283c6e3a2243f47cf1e344e644558684e2c6cd092ad9a318db98c321
+  checksum: 10c0/187a14e689be1434c7db646f2f0f19c5fe60eb565dd0fa2d0a7b903240fd36ccdd3a5d2318630a9e0186036ef61fbebd58a9ef752f7b9b329660614ddbdf37f1
   languageName: node
   linkType: hard
 
-"@mui/types@npm:^7.2.12":
-  version: 7.2.12
-  resolution: "@mui/types@npm:7.2.12"
+"@mui/types@npm:^7.2.13":
+  version: 7.2.13
+  resolution: "@mui/types@npm:7.2.13"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/7e1b1a7d60ef861e6e40b0f1275e348173e3b380c2cd5d4818f1c30b6d18d60e3bfef1b3371d0025be1c10a2fc210a193326c54c8aada2148ea61a1cc8e1bbe7
+  checksum: 10c0/4d0014cabf9efda8cfcbdcb01435af7e678c60cf73f808da857c50a795d3b9943a1209d6501a9be173ce692cd8739803b0857166969206eceefeafe1aa8a5d3a
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^5.15.3":
-  version: 5.15.3
-  resolution: "@mui/utils@npm:5.15.3"
+"@mui/utils@npm:^5.15.9":
+  version: 5.15.9
+  resolution: "@mui/utils@npm:5.15.9"
   dependencies:
-    "@babel/runtime": "npm:^7.23.6"
+    "@babel/runtime": "npm:^7.23.9"
     "@types/prop-types": "npm:^15.7.11"
     prop-types: "npm:^15.8.1"
     react-is: "npm:^18.2.0"
@@ -3110,7 +3037,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/dd2711bfe7ef90af0dd300940dacc458dc6145baf62b9674f5ec4904261204e84feeb45678afa009965cc60ea429ebd57a390da5dec73a873dbcef00ee95a9f2
+  checksum: 10c0/42d3db7f73f47ad719b8a4769eac2aeaec683166c953e67518f6edb7d14464576daf6566619a384f5f7e48dcb1478053ff3e4ce1be244fd332f7e988da9e1401
   languageName: node
   linkType: hard
 
@@ -3153,22 +3080,15 @@ __metadata:
   linkType: hard
 
 "@npmcli/agent@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "@npmcli/agent@npm:2.2.0"
+  version: 2.2.1
+  resolution: "@npmcli/agent@npm:2.2.1"
   dependencies:
     agent-base: "npm:^7.1.0"
     http-proxy-agent: "npm:^7.0.0"
     https-proxy-agent: "npm:^7.0.1"
     lru-cache: "npm:^10.0.1"
     socks-proxy-agent: "npm:^8.0.1"
-  checksum: 10c0/7b89590598476dda88e79c473766b67c682aae6e0ab0213491daa6083dcc0c171f86b3868f5506f22c09aa5ea69ad7dfb78f4bf39a8dca375d89a42f408645b3
-  languageName: node
-  linkType: hard
-
-"@npmcli/ci-detect@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@npmcli/ci-detect@npm:2.0.0"
-  checksum: 10c0/a5871158bc2a6bb7a2d313fa56d4d1747486b1e7531da6b4f39e9a6e8188bb2faef212b5927bf13413a6f0a9ecebbaa849c26f5147eb1593e918c37a2c349634
+  checksum: 10c0/38ee5cbe8f3cde13be916e717bfc54fd1a7605c07af056369ff894e244c221e0b56b08ca5213457477f9bc15bca9e729d51a4788829b5c3cf296b3c996147f76
   languageName: node
   linkType: hard
 
@@ -3182,8 +3102,8 @@ __metadata:
   linkType: hard
 
 "@npmcli/git@npm:^5.0.0":
-  version: 5.0.3
-  resolution: "@npmcli/git@npm:5.0.3"
+  version: 5.0.4
+  resolution: "@npmcli/git@npm:5.0.4"
   dependencies:
     "@npmcli/promise-spawn": "npm:^7.0.0"
     lru-cache: "npm:^10.0.1"
@@ -3193,7 +3113,7 @@ __metadata:
     promise-retry: "npm:^2.0.1"
     semver: "npm:^7.3.5"
     which: "npm:^4.0.0"
-  checksum: 10c0/dab301d06f037cf92b66547c4a702901c4efd42be470ab72457cc2f9617f47aca0bb59a44566cf65c1170d6489bd58be96b87269f83782b63323272059a9e4e2
+  checksum: 10c0/e70aa4d980c356cc97cb3c5b24d3fe88e3b26672ace60ad2ff1a7d2a9f139143ebb32975380bd5ad798a3ba13c91faf76de9a85dd1e8f731797a5c963b61b35a
   languageName: node
   linkType: hard
 
@@ -3216,16 +3136,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@npmcli/package-json@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@npmcli/package-json@npm:5.0.0"
+  dependencies:
+    "@npmcli/git": "npm:^5.0.0"
+    glob: "npm:^10.2.2"
+    hosted-git-info: "npm:^7.0.0"
+    json-parse-even-better-errors: "npm:^3.0.0"
+    normalize-package-data: "npm:^6.0.0"
+    proc-log: "npm:^3.0.0"
+    semver: "npm:^7.5.3"
+  checksum: 10c0/489b0e42d05c1c3c43ba94b6435c062ae28bee3e8ebf3b8e0977fe4ab8eb37fe6ab019203b38f39b54a592d85df2a602c0d700fc23adc630f4e7bfb0207a8a9e
+  languageName: node
+  linkType: hard
+
 "@npmcli/promise-spawn@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "@npmcli/promise-spawn@npm:7.0.0"
+  version: 7.0.1
+  resolution: "@npmcli/promise-spawn@npm:7.0.1"
   dependencies:
     which: "npm:^4.0.0"
-  checksum: 10c0/a8d310d4f0f033ea8be19e956db35dd11d1f80774e85ba97eafb3b41f7f92813ef3ae29215a14028dacf6b4d3b2357ae5935a0899c33546dd24bb629a6d5c1e8
+  checksum: 10c0/441024049170fc9dd0c793fef7366fd1b2a36c06f1036c52ac4a5d0f2d46deced89f2a94fef20f51aa9934edb4d611ff76b060be2b82086d29d2094ee1b46122
   languageName: node
   linkType: hard
 
-"@npmcli/run-script@npm:7.0.2, @npmcli/run-script@npm:^7.0.0":
+"@npmcli/run-script@npm:7.0.2":
   version: 7.0.2
   resolution: "@npmcli/run-script@npm:7.0.2"
   dependencies:
@@ -3238,110 +3173,124 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nrwl/devkit@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nrwl/devkit@npm:17.2.6"
+"@npmcli/run-script@npm:^7.0.0":
+  version: 7.0.4
+  resolution: "@npmcli/run-script@npm:7.0.4"
+  dependencies:
+    "@npmcli/node-gyp": "npm:^3.0.0"
+    "@npmcli/package-json": "npm:^5.0.0"
+    "@npmcli/promise-spawn": "npm:^7.0.0"
+    node-gyp: "npm:^10.0.0"
+    which: "npm:^4.0.0"
+  checksum: 10c0/45159ef7d6b8d9e449e87ed401da69da60514f6e7752e268f29a96f17a543c4a8d4eea6fe2f74b07fd41095e48e0f9859ebec558065d2b01849b382b06fefe35
+  languageName: node
+  linkType: hard
+
+"@nrwl/devkit@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nrwl/devkit@npm:18.0.4"
   dependencies:
-    "@nx/devkit": "npm:17.2.6"
-  checksum: 10c0/3ddcf93b83c91db3de2bd746a87ca3c4f9c493de7308498629a079442690fe23fa56d9daa4c697dd35a284d95810697b290d2c607a5c14b6c1149004c8940311
+    "@nx/devkit": "npm:18.0.4"
+  checksum: 10c0/062a95bb4862fc0e9120e8a32ab44a77669e9619ddf004e5ed64db17fa9a8e275b0151ee65b6c7fe8cac36164aca8f8ea3fff1a457f5788e038dd4b091d5b5f4
   languageName: node
   linkType: hard
 
-"@nrwl/tao@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nrwl/tao@npm:17.2.6"
+"@nrwl/tao@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nrwl/tao@npm:18.0.4"
   dependencies:
-    nx: "npm:17.2.6"
+    nx: "npm:18.0.4"
     tslib: "npm:^2.3.0"
   bin:
     tao: index.js
-  checksum: 10c0/12326bcfb87dcf62f36c82ee57aef7a925c402dd844e5506b5a71defa15af18fccb705aa0245ef75a9f5f2ec0214bd95ee28c9fe23551316417b4ba6c02bdd05
+  checksum: 10c0/04c0c331b79399a28b3f488a28478f4f1e3fe13c7d983dea1b24e5540acb4b159f13a8cfd02ed6765566ccf13ba628377690e5eed4e3bc04306cef28357b6dea
   languageName: node
   linkType: hard
 
-"@nx/devkit@npm:17.2.6, @nx/devkit@npm:>=17.1.2 < 18":
-  version: 17.2.6
-  resolution: "@nx/devkit@npm:17.2.6"
+"@nx/devkit@npm:18.0.4, @nx/devkit@npm:>=17.1.2 < 19":
+  version: 18.0.4
+  resolution: "@nx/devkit@npm:18.0.4"
   dependencies:
-    "@nrwl/devkit": "npm:17.2.6"
+    "@nrwl/devkit": "npm:18.0.4"
     ejs: "npm:^3.1.7"
     enquirer: "npm:~2.3.6"
     ignore: "npm:^5.0.4"
-    semver: "npm:7.5.3"
+    semver: "npm:^7.5.3"
     tmp: "npm:~0.2.1"
     tslib: "npm:^2.3.0"
+    yargs-parser: "npm:21.1.1"
   peerDependencies:
     nx: ">= 16 <= 18"
-  checksum: 10c0/abc348bfe2c9d6b27ceecd1d09d2500a012052426bad79c2e2574e07ef26ae300dc61cecfd235a693987020dfbedbe4a4d63c762a66136784da662eff8c719fa
+  checksum: 10c0/065ec726d37593e7114770e576d738c5f9e3bdb6cc170af75a22c98992a728b49fc45785a0549a41d214506ba0ecf6d8b5683e9536fc536b48975a2b86e65363
   languageName: node
   linkType: hard
 
-"@nx/nx-darwin-arm64@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-darwin-arm64@npm:17.2.6"
+"@nx/nx-darwin-arm64@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-darwin-arm64@npm:18.0.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@nx/nx-darwin-x64@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-darwin-x64@npm:17.2.6"
+"@nx/nx-darwin-x64@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-darwin-x64@npm:18.0.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@nx/nx-freebsd-x64@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-freebsd-x64@npm:17.2.6"
+"@nx/nx-freebsd-x64@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-freebsd-x64@npm:18.0.4"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-arm-gnueabihf@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-linux-arm-gnueabihf@npm:17.2.6"
+"@nx/nx-linux-arm-gnueabihf@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-linux-arm-gnueabihf@npm:18.0.4"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-arm64-gnu@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-linux-arm64-gnu@npm:17.2.6"
+"@nx/nx-linux-arm64-gnu@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-linux-arm64-gnu@npm:18.0.4"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-arm64-musl@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-linux-arm64-musl@npm:17.2.6"
+"@nx/nx-linux-arm64-musl@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-linux-arm64-musl@npm:18.0.4"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-x64-gnu@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-linux-x64-gnu@npm:17.2.6"
+"@nx/nx-linux-x64-gnu@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-linux-x64-gnu@npm:18.0.4"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-x64-musl@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-linux-x64-musl@npm:17.2.6"
+"@nx/nx-linux-x64-musl@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-linux-x64-musl@npm:18.0.4"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@nx/nx-win32-arm64-msvc@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-win32-arm64-msvc@npm:17.2.6"
+"@nx/nx-win32-arm64-msvc@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-win32-arm64-msvc@npm:18.0.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@nx/nx-win32-x64-msvc@npm:17.2.6":
-  version: 17.2.6
-  resolution: "@nx/nx-win32-x64-msvc@npm:17.2.6"
+"@nx/nx-win32-x64-msvc@npm:18.0.4":
+  version: 18.0.4
+  resolution: "@nx/nx-win32-x64-msvc@npm:18.0.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -3498,68 +3447,68 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@omlet/cli-darwin-arm64@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@omlet/cli-darwin-arm64@npm:1.1.1"
+"@omlet/cli-darwin-arm64@npm:1.3.3":
+  version: 1.3.3
+  resolution: "@omlet/cli-darwin-arm64@npm:1.3.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@omlet/cli-darwin-x64@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@omlet/cli-darwin-x64@npm:1.1.1"
+"@omlet/cli-darwin-x64@npm:1.3.3":
+  version: 1.3.3
+  resolution: "@omlet/cli-darwin-x64@npm:1.3.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@omlet/cli-linux-arm64-gnu@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@omlet/cli-linux-arm64-gnu@npm:1.1.1"
+"@omlet/cli-linux-arm64-gnu@npm:1.3.3":
+  version: 1.3.3
+  resolution: "@omlet/cli-linux-arm64-gnu@npm:1.3.3"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@omlet/cli-linux-arm64-musl@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@omlet/cli-linux-arm64-musl@npm:1.1.1"
+"@omlet/cli-linux-arm64-musl@npm:1.3.3":
+  version: 1.3.3
+  resolution: "@omlet/cli-linux-arm64-musl@npm:1.3.3"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@omlet/cli-linux-x64-gnu@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@omlet/cli-linux-x64-gnu@npm:1.1.1"
+"@omlet/cli-linux-x64-gnu@npm:1.3.3":
+  version: 1.3.3
+  resolution: "@omlet/cli-linux-x64-gnu@npm:1.3.3"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@omlet/cli-linux-x64-musl@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@omlet/cli-linux-x64-musl@npm:1.1.1"
+"@omlet/cli-linux-x64-musl@npm:1.3.3":
+  version: 1.3.3
+  resolution: "@omlet/cli-linux-x64-musl@npm:1.3.3"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@omlet/cli-win32-x64-msvc@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@omlet/cli-win32-x64-msvc@npm:1.1.1"
+"@omlet/cli-win32-x64-msvc@npm:1.3.3":
+  version: 1.3.3
+  resolution: "@omlet/cli-win32-x64-msvc@npm:1.3.3"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
 "@omlet/cli@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@omlet/cli@npm:1.1.1"
+  version: 1.3.3
+  resolution: "@omlet/cli@npm:1.3.3"
   dependencies:
     "@hapi/joi": "npm:^17.1.1"
-    "@npmcli/ci-detect": "npm:^2.0.0"
-    "@omlet/cli-darwin-arm64": "npm:1.1.1"
-    "@omlet/cli-darwin-x64": "npm:1.1.1"
-    "@omlet/cli-linux-arm64-gnu": "npm:1.1.1"
-    "@omlet/cli-linux-arm64-musl": "npm:1.1.1"
-    "@omlet/cli-linux-x64-gnu": "npm:1.1.1"
-    "@omlet/cli-linux-x64-musl": "npm:1.1.1"
-    "@omlet/cli-win32-x64-msvc": "npm:1.1.1"
+    "@omlet/cli-darwin-arm64": "npm:1.3.3"
+    "@omlet/cli-darwin-x64": "npm:1.3.3"
+    "@omlet/cli-linux-arm64-gnu": "npm:1.3.3"
+    "@omlet/cli-linux-arm64-musl": "npm:1.3.3"
+    "@omlet/cli-linux-x64-gnu": "npm:1.3.3"
+    "@omlet/cli-linux-x64-musl": "npm:1.3.3"
+    "@omlet/cli-win32-x64-msvc": "npm:1.3.3"
+    ci-info: "npm:^4.0.0"
     colorette: "npm:^2.0.19"
     commander: "npm:^9.0.0"
     core-js: "npm:^3.29.1"
@@ -3581,11 +3530,13 @@ __metadata:
     memfs: "npm:^4.2.1"
     micromatch: "npm:^4.0.5"
     node-fetch: "npm:^2.6.6"
+    node-machine-id: "npm:^1.1.12"
     open: "npm:^8.4.0"
     ora: "npm:^5.4.1"
     parse-git-config: "npm:^3.0.0"
     server-destroy: "npm:^1.0.1"
     streaming-json-stringify: "npm:^3.1.0"
+    upath: "npm:^2.0.1"
     update-notifier: "npm:^5.1.0"
     uuid: "npm:^9.0.0"
     winston: "npm:^3.10.0"
@@ -3606,7 +3557,7 @@ __metadata:
       optional: true
   bin:
     omlet: bin/omlet
-  checksum: 10c0/76687a16bbdefe32a936b65dce1830c8b84edb1857bdfdc90562461942eeaa1cd547210235c2be36db231b5e37a58356e0b94be482a4d0425aedc5edccdbfd9e
+  checksum: 10c0/30bba10b43713bdac16ad0f05dc1077f397ae2387c7d3541e075e4046c33c8e8c15ed3e5dd313798204e8ebb0388e41c40a7842d8bdece64c01f69c52614b9f6
   languageName: node
   linkType: hard
 
@@ -3617,26 +3568,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pkgr/utils@npm:^2.4.2":
-  version: 2.4.2
-  resolution: "@pkgr/utils@npm:2.4.2"
-  dependencies:
-    cross-spawn: "npm:^7.0.3"
-    fast-glob: "npm:^3.3.0"
-    is-glob: "npm:^4.0.3"
-    open: "npm:^9.1.0"
-    picocolors: "npm:^1.0.0"
-    tslib: "npm:^2.6.0"
-  checksum: 10c0/7c3e68f6405a1d4c51f418d8d580e71d7bade2683d5db07e8413d8e57f7e389047eda44a2341f77a1b3085895fca7676a9d45e8812a58312524f8c4c65d501be
+"@pkgr/core@npm:^0.1.0":
+  version: 0.1.1
+  resolution: "@pkgr/core@npm:0.1.1"
+  checksum: 10c0/3f7536bc7f57320ab2cf96f8973664bef624710c403357429fbf680a5c3b4843c1dbd389bb43daa6b1f6f1f007bb082f5abcb76bb2b5dc9f421647743b71d3d8
   languageName: node
   linkType: hard
 
-"@playwright/browser-chromium@npm:^1.39.0":
-  version: 1.40.1
-  resolution: "@playwright/browser-chromium@npm:1.40.1"
+"@playwright/browser-chromium@npm:^1.41.2":
+  version: 1.41.2
+  resolution: "@playwright/browser-chromium@npm:1.41.2"
   dependencies:
-    playwright-core: "npm:1.40.1"
-  checksum: 10c0/76f54cf91d9806045577e6f60c6487a641985820bccb5388d178977ee06034de395beff540cbdabccf36841884ee6c5148e6b989f8a0e24fc59ef4c44e0588ac
+    playwright-core: "npm:1.41.2"
+  checksum: 10c0/b8d0e2f1636a7bc3cf071f144f390ede30c6b20c3df7c556485da88a70c2cce690b5e369a961ad9d713426feb46241fd73d7ad5435ac140bf8e0d06b22a1a554
   languageName: node
   linkType: hard
 
@@ -4255,8 +4199,8 @@ __metadata:
   linkType: hard
 
 "@reduxjs/toolkit@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@reduxjs/toolkit@npm:2.1.0"
+  version: 2.2.1
+  resolution: "@reduxjs/toolkit@npm:2.2.1"
   dependencies:
     immer: "npm:^10.0.3"
     redux: "npm:^5.0.1"
@@ -4270,15 +4214,15 @@ __metadata:
       optional: true
     react-redux:
       optional: true
-  checksum: 10c0/4ea9e9ea8cc2cab1c997127dc332c165cebc55bf8e95812ba4dc40d48dd87d5ee4bf3316b9eab49b5cce056eda6bdcb4b2a7dc3a15f056f64f76134f148f9f10
+  checksum: 10c0/675f816b311d6d703259e00c73977c9c5968e41b039d6d149e34e9084d5e6718aff3b692d2b7697974fb57a056687932117da1dd5202d392811d8d4e91d09322
   languageName: node
   linkType: hard
 
 "@rollup/plugin-typescript@npm:^11.1.5":
-  version: 11.1.5
-  resolution: "@rollup/plugin-typescript@npm:11.1.5"
+  version: 11.1.6
+  resolution: "@rollup/plugin-typescript@npm:11.1.6"
   dependencies:
-    "@rollup/pluginutils": "npm:^5.0.1"
+    "@rollup/pluginutils": "npm:^5.1.0"
     resolve: "npm:^1.22.1"
   peerDependencies:
     rollup: ^2.14.0||^3.0.0||^4.0.0
@@ -4289,7 +4233,7 @@ __metadata:
       optional: true
     tslib:
       optional: true
-  checksum: 10c0/ce49baf4cf97f3a33d0e60324a0f80ebe963fee002e791171bec2d05a1ae5e5be6de2bc4191790d88fbc78d4c2bac1be141fc47bd5f2dec7172514acd7652ffe
+  checksum: 10c0/5347cd73ac28d4cf2401a3e689864a1a0df8f3ae029abd9c38525cbc84bcfa16c3a32a0ac5698dac65ec531ba7cf8332e14f5fc7f8fa501193da23320a134c5c
   languageName: node
   linkType: hard
 
@@ -4309,7 +4253,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/pluginutils@npm:5, @rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.2":
+"@rollup/pluginutils@npm:5, @rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.2, @rollup/pluginutils@npm:^5.1.0":
   version: 5.1.0
   resolution: "@rollup/pluginutils@npm:5.1.0"
   dependencies:
@@ -4325,103 +4269,103 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.9.1"
+"@rollup/rollup-android-arm-eabi@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.11.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-android-arm64@npm:4.9.1"
+"@rollup/rollup-android-arm64@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.11.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.9.1"
+"@rollup/rollup-darwin-arm64@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.11.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-darwin-x64@npm:4.9.1"
+"@rollup/rollup-darwin-x64@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.11.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.1"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.11.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.9.1"
+"@rollup/rollup-linux-arm64-gnu@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.11.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.9.1"
+"@rollup/rollup-linux-arm64-musl@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.11.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.9.1"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.11.0"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.9.1"
+"@rollup/rollup-linux-x64-gnu@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.11.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.9.1"
+"@rollup/rollup-linux-x64-musl@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.11.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.9.1"
+"@rollup/rollup-win32-arm64-msvc@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.11.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.9.1"
+"@rollup/rollup-win32-ia32-msvc@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.11.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.9.1":
-  version: 4.9.1
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.9.1"
+"@rollup/rollup-win32-x64-msvc@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.11.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@sideway/address@npm:^4.1.3":
-  version: 4.1.4
-  resolution: "@sideway/address@npm:4.1.4"
+"@sideway/address@npm:^4.1.5":
+  version: 4.1.5
+  resolution: "@sideway/address@npm:4.1.5"
   dependencies:
     "@hapi/hoek": "npm:^9.0.0"
-  checksum: 10c0/c6fad7d87fb016053e9e9b69c2f2d1f23036d5f1696df141e64c3c58bcf8c7d2a4133348adc2d246682410364d5922c6271ae556122741025794fb7c19814aae
+  checksum: 10c0/638eb6f7e7dba209053dd6c8da74d7cc995e2b791b97644d0303a7dd3119263bcb7225a4f6804d4db2bc4f96e5a9d262975a014f58eae4d1753c27cbc96ef959
   languageName: node
   linkType: hard
 
@@ -4448,22 +4392,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sigstore/bundle@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@sigstore/bundle@npm:2.1.0"
+"@sigstore/bundle@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "@sigstore/bundle@npm:2.2.0"
   dependencies:
-    "@sigstore/protobuf-specs": "npm:^0.2.1"
-  checksum: 10c0/785b48d9def9cde91880bfd656b32e5808861a3f81e1513041635bbab5763c35cfd5c854d0d7dd7283a5c6aeadac036ead4396281aa0cbb356e1311bd239eff5
+    "@sigstore/protobuf-specs": "npm:^0.3.0"
+  checksum: 10c0/1c54c4c6ba3707aa9aa6a45eafcdaa840927860c295b1d2a8572b7efcd609e550ed56f3e72853285a1deae3fab83fbdcac74c4dd42b2774240408d5508556548
   languageName: node
   linkType: hard
 
-"@sigstore/protobuf-specs@npm:^0.2.0, @sigstore/protobuf-specs@npm:^0.2.1":
+"@sigstore/core@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@sigstore/core@npm:1.0.0"
+  checksum: 10c0/072f8f30c301513803020be8ff8c4f7be03ce62423b6e70c5cd9ccb775d83e574e130f93d781877f926822bc6e20454814a51a2e1147f1eb2b8fe69cd58d43d4
+  languageName: node
+  linkType: hard
+
+"@sigstore/protobuf-specs@npm:^0.2.0":
   version: 0.2.1
   resolution: "@sigstore/protobuf-specs@npm:0.2.1"
   checksum: 10c0/756b3bc64e7f21d966473208cd3920fcde6744025f7deb1d3be1d2b6261b825178b393db7458cd191b2eab947e516eacd6f91aa2f4545d8c045431fb699ac357
   languageName: node
   linkType: hard
 
+"@sigstore/protobuf-specs@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@sigstore/protobuf-specs@npm:0.3.0"
+  checksum: 10c0/a814342284681da9bb31f4224076aedd8f9e0fe8bb32a391a0765a37782f2cb37abb9342df776d304681965a297981a33cec9733262b65a58707f5eb16024ebb
+  languageName: node
+  linkType: hard
+
 "@sigstore/sign@npm:^1.0.0":
   version: 1.0.0
   resolution: "@sigstore/sign@npm:1.0.0"
@@ -4475,14 +4433,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sigstore/sign@npm:^2.1.0":
-  version: 2.2.0
-  resolution: "@sigstore/sign@npm:2.2.0"
+"@sigstore/sign@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "@sigstore/sign@npm:2.2.3"
   dependencies:
-    "@sigstore/bundle": "npm:^2.1.0"
-    "@sigstore/protobuf-specs": "npm:^0.2.1"
+    "@sigstore/bundle": "npm:^2.2.0"
+    "@sigstore/core": "npm:^1.0.0"
+    "@sigstore/protobuf-specs": "npm:^0.3.0"
     make-fetch-happen: "npm:^13.0.0"
-  checksum: 10c0/f3a24809940688b2e7dac1ec7097caf73cc25a440efc67d138227f73154ecd7c95d1962b4cb11fe7de1495659c4784c068002d7f8a14fdc6099d830e50a7bc08
+  checksum: 10c0/af3a8b3adb70f43b8f9caf81d51715e00602880c991fc41291b5f3a7510eba48ac33ef95f6deebaede9322a23bfb5b7df889bdc3e8c46923ba77da79b491ae91
   languageName: node
   linkType: hard
 
@@ -4496,13 +4455,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sigstore/tuf@npm:^2.1.0":
-  version: 2.2.0
-  resolution: "@sigstore/tuf@npm:2.2.0"
+"@sigstore/tuf@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "@sigstore/tuf@npm:2.3.1"
+  dependencies:
+    "@sigstore/protobuf-specs": "npm:^0.3.0"
+    tuf-js: "npm:^2.2.0"
+  checksum: 10c0/ba584d2fa7fc142d4671b6cdc2fe0e67a293fe79f91bfb042bf537ed39e34abc799d3caa1d69bda029f54da5c0f9f58803c7fae80bc96f867fb3aebc214a43b3
+  languageName: node
+  linkType: hard
+
+"@sigstore/verify@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@sigstore/verify@npm:1.1.0"
   dependencies:
-    "@sigstore/protobuf-specs": "npm:^0.2.1"
-    tuf-js: "npm:^2.1.0"
-  checksum: 10c0/d20c0fd1c13e7054b9569eb70b427439546cfd864e891f8dce48e6c59b782b1dede109e02e3ac33ce381a3fd8b8fbffd6719a17cdcaca18972c2c5a000ba816e
+    "@sigstore/bundle": "npm:^2.2.0"
+    "@sigstore/core": "npm:^1.0.0"
+    "@sigstore/protobuf-specs": "npm:^0.3.0"
+  checksum: 10c0/bdd0c4768e74fb032767bcdbc3403e72b7a53ab06339d135521d2da3ecca01d3f3b5fababcaf70846df44af35726c6e859624d5532e3dccc514d0c36d5cb88e5
   languageName: node
   linkType: hard
 
@@ -4521,11 +4491,11 @@ __metadata:
   linkType: hard
 
 "@sinonjs/commons@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "@sinonjs/commons@npm:3.0.0"
+  version: 3.0.1
+  resolution: "@sinonjs/commons@npm:3.0.1"
   dependencies:
     type-detect: "npm:4.0.8"
-  checksum: 10c0/1df9cd257942f4e4960dfb9fd339d9e97b6a3da135f3d5b8646562918e863809cb8e00268535f4f4723535d2097881c8fc03d545c414d8555183376cfc54ee84
+  checksum: 10c0/1227a7b5bd6c6f9584274db996d7f8cee2c8c350534b9d0141fc662eaf1f292ea0ae3ed19e5e5271c8fd390d27e492ca2803acd31a1978be2cdc6be0da711403
   languageName: node
   linkType: hard
 
@@ -4538,71 +4508,71 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-a11y@npm:7.6.16"
+"@storybook/addon-a11y@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-a11y@npm:7.6.17"
   dependencies:
-    "@storybook/addon-highlight": "npm:7.6.16"
+    "@storybook/addon-highlight": "npm:7.6.17"
     axe-core: "npm:^4.2.0"
-  checksum: 10c0/33a2b8e1e9bab59a6c4c60d4db13e19d0200805ea5b8b0b315575611d21bdb17bf6b564177a040d6dc3dad479334ad5570e989f6f0dc4521089df4ee846a2315
+  checksum: 10c0/2784a9caea452eff3101605bf1fa5a7b992340ecc13d6edc7965fcfbf4d3b4249ede6d111e9d4a6cff1434064c9d3c3d65481ef68c9312dc8b46419217bf7725
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:7.6.16, @storybook/addon-actions@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-actions@npm:7.6.16"
+"@storybook/addon-actions@npm:7.6.17, @storybook/addon-actions@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-actions@npm:7.6.17"
   dependencies:
-    "@storybook/core-events": "npm:7.6.16"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
     "@types/uuid": "npm:^9.0.1"
     dequal: "npm:^2.0.2"
     polished: "npm:^4.2.2"
     uuid: "npm:^9.0.0"
-  checksum: 10c0/d76fc620976e2729b88f80baf4ac8a0948b7dd3ee6dba4fe2a2e2a28d857609ebb6e3a1ad75a60df947cd336fa83491ac6cc8f1f31ddeefe3478604700dd90e0
+  checksum: 10c0/91d20a7c35fff6a0b2aa33f2c1171d457c68fb9d955da12629d6f75d931d5aa3756837e413ab7bb928c4cc4b48dcc5cdd63510e6028e7bd8fc8c82d93be967d0
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-backgrounds@npm:7.6.16"
+"@storybook/addon-backgrounds@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-backgrounds@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     memoizerific: "npm:^1.11.3"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/3ded18ac19b4c70d2065a65c0171ffcf483f615d6f0a74d166a7f2f5e16bd55ec30f6e011861c1dfc38d58ae11f5721bf9c86e61735ccb889711ce53263c2f94
+  checksum: 10c0/43518d762efa8dd140d029541e8e2bb748173a8428e3de67287ca132525e33e443282a2b06f3b381250d9557ada9ea3a07039aa69cf3de6b04aec02027fb9943
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-controls@npm:7.6.16"
+"@storybook/addon-controls@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-controls@npm:7.6.17"
   dependencies:
-    "@storybook/blocks": "npm:7.6.16"
+    "@storybook/blocks": "npm:7.6.17"
     lodash: "npm:^4.17.21"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/0ec172e696093ca077f21369b7c2bc86a80f9b047795eb40b8d4c9f0e56b5c345054fdbee8fb68c82a78e91816bacbbd276e6d69e048f16691a42009e40be7db
+  checksum: 10c0/da66466b801064a916e059ce127efb2ab074a5c80fb65b568ac361d09fe55e0e993cd5400d6b0361bdfd783725e59449bbd30f87643964fa0db8e02a5f9550fd
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-docs@npm:7.6.16"
+"@storybook/addon-docs@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-docs@npm:7.6.17"
   dependencies:
     "@jest/transform": "npm:^29.3.1"
     "@mdx-js/react": "npm:^2.1.5"
-    "@storybook/blocks": "npm:7.6.16"
-    "@storybook/client-logger": "npm:7.6.16"
-    "@storybook/components": "npm:7.6.16"
-    "@storybook/csf-plugin": "npm:7.6.16"
-    "@storybook/csf-tools": "npm:7.6.16"
+    "@storybook/blocks": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/components": "npm:7.6.17"
+    "@storybook/csf-plugin": "npm:7.6.17"
+    "@storybook/csf-tools": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/mdx2-csf": "npm:^1.0.0"
-    "@storybook/node-logger": "npm:7.6.16"
-    "@storybook/postinstall": "npm:7.6.16"
-    "@storybook/preview-api": "npm:7.6.16"
-    "@storybook/react-dom-shim": "npm:7.6.16"
-    "@storybook/theming": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/postinstall": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/react-dom-shim": "npm:7.6.17"
+    "@storybook/theming": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     fs-extra: "npm:^11.1.0"
     remark-external-links: "npm:^8.0.0"
     remark-slug: "npm:^6.0.0"
@@ -4610,60 +4580,60 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/bd784863025d949865855b7002a0fab2c636279a3b4c4feb29b56f123db17ff05bf833e96b6d3cd8f56607cf056321652f7733284694973fbb0872abff9ac489
-  languageName: node
-  linkType: hard
-
-"@storybook/addon-essentials@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-essentials@npm:7.6.16"
-  dependencies:
-    "@storybook/addon-actions": "npm:7.6.16"
-    "@storybook/addon-backgrounds": "npm:7.6.16"
-    "@storybook/addon-controls": "npm:7.6.16"
-    "@storybook/addon-docs": "npm:7.6.16"
-    "@storybook/addon-highlight": "npm:7.6.16"
-    "@storybook/addon-measure": "npm:7.6.16"
-    "@storybook/addon-outline": "npm:7.6.16"
-    "@storybook/addon-toolbars": "npm:7.6.16"
-    "@storybook/addon-viewport": "npm:7.6.16"
-    "@storybook/core-common": "npm:7.6.16"
-    "@storybook/manager-api": "npm:7.6.16"
-    "@storybook/node-logger": "npm:7.6.16"
-    "@storybook/preview-api": "npm:7.6.16"
+  checksum: 10c0/b43666832f1657f4dfac976ac8b8071995d65860a29f1ac66b80adb69a0d02f0d1d70684d94ddb76f0957f003b94b4252599e19f1e6a4342686598bbb40280ae
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-essentials@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-essentials@npm:7.6.17"
+  dependencies:
+    "@storybook/addon-actions": "npm:7.6.17"
+    "@storybook/addon-backgrounds": "npm:7.6.17"
+    "@storybook/addon-controls": "npm:7.6.17"
+    "@storybook/addon-docs": "npm:7.6.17"
+    "@storybook/addon-highlight": "npm:7.6.17"
+    "@storybook/addon-measure": "npm:7.6.17"
+    "@storybook/addon-outline": "npm:7.6.17"
+    "@storybook/addon-toolbars": "npm:7.6.17"
+    "@storybook/addon-viewport": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/manager-api": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/87768051df9a83aec1fd500989c17c22028f159f3bbfcba11a425cbc8e2d91fb5c3f3de69d2bfa5bc1c6a504869d700498c1a17fc1b80564c40394d49cebd4d7
+  checksum: 10c0/3208790b219e88fadc634aa00134eb3f0da9d2c05cd84e733d07e201177c58bccb85879ee4c26441a35b1e7fd318111dd668fdd8b3e57b37da512a658d4f50e9
   languageName: node
   linkType: hard
 
-"@storybook/addon-highlight@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-highlight@npm:7.6.16"
+"@storybook/addon-highlight@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-highlight@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-  checksum: 10c0/492fc550e450d08106a58e502945955d80a169d2549eb69d172264b50882fd914d851c9617c51cbc4ad089c855edf95f1b13300dacd91acd6f66f873d9f01dda
+  checksum: 10c0/5f16a648a38257bdd66f592b519cc6b4ecf36c50d0cb01696f1c42c6c9fa2b44b7056b64d611579f2ec4764787b6bd34ea6b9ebddb01b0e562b3eb8100b1cf96
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-interactions@npm:7.6.16"
+"@storybook/addon-interactions@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-interactions@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/types": "npm:7.6.17"
     jest-mock: "npm:^27.0.6"
     polished: "npm:^4.2.2"
     ts-dedent: "npm:^2.2.0"
-  checksum: 10c0/b01c559046c4ff5d799c2e4d0d9a548f08f2cb46d64116d78c95f46e1f50adc310d048392533382117b346690dd60171d75ad8646b95792a09678b6b429eaaea
+  checksum: 10c0/f0910e8db378f502270747508c42174bdb75671620d24868264638a2693c60b35f088e4c06cb2239a69f4aa176f8dc8cf9e215f872d5aeefec933643225b66b8
   languageName: node
   linkType: hard
 
-"@storybook/addon-links@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-links@npm:7.6.16"
+"@storybook/addon-links@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-links@npm:7.6.17"
   dependencies:
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
@@ -4673,42 +4643,42 @@ __metadata:
   peerDependenciesMeta:
     react:
       optional: true
-  checksum: 10c0/00e61286dff4e5625d14a18bf9a06570a7e74a051119cdfe26603b684522fd0c69ebdb5f37dbfa577aee93efbc3e5c5efef20b1faba7c9a0fb4368cee00bf6cf
+  checksum: 10c0/c95aa5629a948f07a260430fecb8bed283a1bcfa97d8925b5edf3d4eab46155c85dec1814a00db4206a6de8323803b3d8bf74665c97caf34bb229a403f5b03d7
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-measure@npm:7.6.16"
+"@storybook/addon-measure@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-measure@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     tiny-invariant: "npm:^1.3.1"
-  checksum: 10c0/fcb1536b57052f44173f91bf3c9b5df031c6d2bd5287f4032fab3f8510e8d40cc9312583545714f7f39636b70f91d55154cc0ff1384d9d0f31e988b2a2bb57f5
+  checksum: 10c0/18c26fd08c6b369ae74cbea4447ae0791efb6968875223b12e84021cf1c7a48496d56c35c6b1de03603081b650c3e4b54530b8704b68467bc667cbf550623ef9
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-outline@npm:7.6.16"
+"@storybook/addon-outline@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-outline@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/f38731044925a324f4e4d8064a52e9d8f1812e08c2eecf15d4f024155cdb02838060fd269ab759c851da564d6a6f2988a7b34aa9a9705da30a4573de58420151
+  checksum: 10c0/840a554504c457e3dee273266ba90a7f36b7488a72644d046f0233c305d7fe3a0773848d104a3dc7d6efafc3e1b41a3fc4d6cdd7a37b3a3fe75a03fcde206efb
   languageName: node
   linkType: hard
 
-"@storybook/addon-storyshots@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-storyshots@npm:7.6.16"
+"@storybook/addon-storyshots@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-storyshots@npm:7.6.17"
   dependencies:
     "@jest/transform": "npm:^29.3.1"
     "@storybook/babel-plugin-require-context-hook": "npm:1.0.1"
-    "@storybook/client-api": "npm:7.6.16"
-    "@storybook/core-common": "npm:7.6.16"
-    "@storybook/core-webpack": "npm:7.6.16"
+    "@storybook/client-api": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/core-webpack": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/preview-api": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/jest-specific-snapshot": "npm:^0.5.6"
     glob: "npm:^10.0.0"
     jest-specific-snapshot: "npm:^8.0.0"
@@ -4765,34 +4735,34 @@ __metadata:
       optional: true
     vue-jest:
       optional: true
-  checksum: 10c0/6b510893654ca5599f74a31ab3a94b66f6ed8d792b617f6e130dc86836b04562db9bef6636fed4b51228d5e0977b53f78b737df24d935ae60b47fbf39c7a7755
+  checksum: 10c0/c8978ca135e70ef9d627b2203b3f3ec76494dd21d30f9707010e0b9c0fe6afdfa10db744155bf11db10c35e40c150f5cacb7f54fbb205ece0f24f99a0806454b
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-toolbars@npm:7.6.16"
-  checksum: 10c0/3862fcaf3ef71eb0a254e35870a9918ddf221d254a690387abd0ee672e850fdcafb2a5a977479208a2517af7284c5417dd652049ead687d6f45f90b3797f8f94
+"@storybook/addon-toolbars@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-toolbars@npm:7.6.17"
+  checksum: 10c0/af4453848c29ab8edb0cf6ca42ff14750841eaf3b523920620e42c27c0f07574a83c0dfe75f6a0de1846178aafb6833d59cef7faa7268777c24ed490da647814
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addon-viewport@npm:7.6.16"
+"@storybook/addon-viewport@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-viewport@npm:7.6.17"
   dependencies:
     memoizerific: "npm:^1.11.3"
-  checksum: 10c0/74f840278d3a09b37f118c15d7c765fb57d54e5d3fefe0cc3f03c792e60685d115c00ecf4160a08606af21685cf9891008acbaf66d6c0e801a9b9838eabdcdad
+  checksum: 10c0/d888954f45ab358189cf0172e1c9b8a1bd2b68aa99d5d6518abe7fc355bbfeb91cc1c21c64e461994f5987652d05944aaa270366e22475eaeccadc701419b0d7
   languageName: node
   linkType: hard
 
-"@storybook/addons@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/addons@npm:7.6.16"
+"@storybook/addons@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addons@npm:7.6.17"
   dependencies:
-    "@storybook/manager-api": "npm:7.6.16"
-    "@storybook/preview-api": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
-  checksum: 10c0/62797cb4c612855ab509f3e7414f9f0ce1a802c8fbc5d50901cda967d3f847b82b09c46f8195595e7bea0ef003e5f405721561b1b0ef1377d1fe01517685aea7
+    "@storybook/manager-api": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
+  checksum: 10c0/1adb45b9eb4723ccb2bbdc8c89061b529360f8892a5fb1729facf0d2f3ed5b71989bb1e34ac4e2d6a3bad4350d806b558966ccee3497381eb9f79a9e05b7fa4b
   languageName: node
   linkType: hard
 
@@ -4803,21 +4773,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/blocks@npm:7.6.16"
+"@storybook/blocks@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/blocks@npm:7.6.17"
   dependencies:
-    "@storybook/channels": "npm:7.6.16"
-    "@storybook/client-logger": "npm:7.6.16"
-    "@storybook/components": "npm:7.6.16"
-    "@storybook/core-events": "npm:7.6.16"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/components": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
-    "@storybook/docs-tools": "npm:7.6.16"
+    "@storybook/docs-tools": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.6.16"
-    "@storybook/preview-api": "npm:7.6.16"
-    "@storybook/theming": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/manager-api": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/theming": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/lodash": "npm:^4.14.167"
     color-convert: "npm:^2.0.1"
     dequal: "npm:^2.0.2"
@@ -4833,18 +4803,18 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/b5ceddf7b77c8ea85ebc00415f88f35e4247b6a4a0006a7ca64aeb308941ba6c60dc4405dcfbb905c81e1301613e098cd0c300db66ff26ace3f6eebb2637f8b4
+  checksum: 10c0/f38233c935679345b4893d3d75b38ca8e74f3749b1f42a2356b61754bf1886cde8565546cdf53217335c8318506c56954aee7cc23c627b06f2d8c3b842d5d12b
   languageName: node
   linkType: hard
 
-"@storybook/builder-manager@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/builder-manager@npm:7.6.16"
+"@storybook/builder-manager@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/builder-manager@npm:7.6.17"
   dependencies:
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
-    "@storybook/core-common": "npm:7.6.16"
-    "@storybook/manager": "npm:7.6.16"
-    "@storybook/node-logger": "npm:7.6.16"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/manager": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
     "@types/ejs": "npm:^3.1.1"
     "@types/find-cache-dir": "npm:^3.2.1"
     "@yarnpkg/esbuild-plugin-pnp": "npm:^3.0.0-rc.10"
@@ -4857,23 +4827,23 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     process: "npm:^0.11.10"
     util: "npm:^0.12.4"
-  checksum: 10c0/d6265bbf767457e1b240850933f9a464d4e9105dfb09b15c55e413dc51c44fb1910765fec00ad13f8505cc65435835cdbab240c485af30bcebd26bc156bbfc96
+  checksum: 10c0/1b2ca77f7f3bf3c72890e949cfadc45d633fee7315ebcabfc1d6e23cd259db93114cbd9b9197597057f90c5fd60b3e72b0782a284a4f80c6efdd15f118b2c594
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack5@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/builder-webpack5@npm:7.6.16"
+"@storybook/builder-webpack5@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/builder-webpack5@npm:7.6.17"
   dependencies:
     "@babel/core": "npm:^7.23.2"
-    "@storybook/channels": "npm:7.6.16"
-    "@storybook/client-logger": "npm:7.6.16"
-    "@storybook/core-common": "npm:7.6.16"
-    "@storybook/core-events": "npm:7.6.16"
-    "@storybook/core-webpack": "npm:7.6.16"
-    "@storybook/node-logger": "npm:7.6.16"
-    "@storybook/preview": "npm:7.6.16"
-    "@storybook/preview-api": "npm:7.6.16"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
+    "@storybook/core-webpack": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/preview": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
     "@swc/core": "npm:^1.3.82"
     "@types/node": "npm:^18.0.0"
     "@types/semver": "npm:^7.3.4"
@@ -4906,7 +4876,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/05be2aaf656320b990ff14d9c168ed60394cefcba5212311b322cfabc7ed37170db9ecdcee15d7fe9233258cc516f17b360d7c78ae4c571e97d09029339d0c38
+  checksum: 10c0/5d5eb4cefb8e52119c3d0ef7f6b13557c00ebad80af8f35482bcd7d55ce50575d33dc12a66a0844f0171619174c7021489cfcf3b8cc128e0f05da6ff2b14e819
   languageName: node
   linkType: hard
 
@@ -4924,36 +4894,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/channels@npm:7.6.6":
-  version: 7.6.6
-  resolution: "@storybook/channels@npm:7.6.6"
+"@storybook/channels@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/channels@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.6"
-    "@storybook/core-events": "npm:7.6.6"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
     qs: "npm:^6.10.0"
     telejson: "npm:^7.2.0"
     tiny-invariant: "npm:^1.3.1"
-  checksum: 10c0/081666ebe90e1710ed1cd8eb0cae01ff1a307d448c83f83a51d4ff9d55fa54063460024f6d6464ffb0713be37471120a2d60a9981dfcd786cf6a628487c525c2
+  checksum: 10c0/7109b67a60c656d22deb1b9b44bf0e26b565044de6ccf63589b0e52188931e2eaa11b78f7a0e1b59396f654537f79ac4264c715417d467aca602a6e80495f49e
   languageName: node
   linkType: hard
 
-"@storybook/cli@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/cli@npm:7.6.16"
+"@storybook/cli@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/cli@npm:7.6.17"
   dependencies:
     "@babel/core": "npm:^7.23.2"
     "@babel/preset-env": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
     "@ndelangen/get-tarball": "npm:^3.0.7"
-    "@storybook/codemod": "npm:7.6.16"
-    "@storybook/core-common": "npm:7.6.16"
-    "@storybook/core-events": "npm:7.6.16"
-    "@storybook/core-server": "npm:7.6.16"
-    "@storybook/csf-tools": "npm:7.6.16"
-    "@storybook/node-logger": "npm:7.6.16"
-    "@storybook/telemetry": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/codemod": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
+    "@storybook/core-server": "npm:7.6.17"
+    "@storybook/csf-tools": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/telemetry": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/semver": "npm:^7.3.4"
     "@yarnpkg/fslib": "npm:2.10.3"
     "@yarnpkg/libzip": "npm:2.3.0"
@@ -4985,17 +4955,17 @@ __metadata:
   bin:
     getstorybook: ./bin/index.js
     sb: ./bin/index.js
-  checksum: 10c0/58b4f760dc53250d967a2a32ba0747617009f9f7c4ac478cf0bfb80db8b7fa1db1e520fa83eb46388abe86d78e3af1a89086d235053f83d34d80ae1c9dbd9eae
+  checksum: 10c0/8d8d426a1eca5d58a4cafa8418a1c8a41736e21a89c66307d18cea98c583976d672ae0773ab53e4e38f110dad2db788bd5d8daef3970ae14834db205818713ef
   languageName: node
   linkType: hard
 
-"@storybook/client-api@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/client-api@npm:7.6.16"
+"@storybook/client-api@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/client-api@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.16"
-    "@storybook/preview-api": "npm:7.6.16"
-  checksum: 10c0/ce4ae24b64d1d469697ed11369e23d067a65c06606e1c61db3900d50b18f38258f713ac9493fa55151b8a26f79a064e44208c47c5715f010fcc983da0d74af7e
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+  checksum: 10c0/cd29ec9a499cd6da8d105fcf8c16c0c601d65f13607ced8a6c9b48a9d903c179d1d27d0f22d9cb18cff9df6b7791c9ab54ccb71ead9d1f52e62abacb8bd3d8fc
   languageName: node
   linkType: hard
 
@@ -5008,26 +4978,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/client-logger@npm:7.6.6":
-  version: 7.6.6
-  resolution: "@storybook/client-logger@npm:7.6.6"
+"@storybook/client-logger@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/client-logger@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-  checksum: 10c0/c7d1c8ef8d885c1b82b27a7ef45d75b33cb5a8805dc978240b82e4d319165e690a28b296fb9d364a0450be2fad478e49e99b898294c520082f7f9890dda8f1a6
+  checksum: 10c0/77ebd176e65171b10b94f65ce7f10ed8c78e162b54462f5b87604f568e747f1604b4eb62ff7a601bf02d7e72b32e373fb980dd9c688a655706e74c025ebb82f3
   languageName: node
   linkType: hard
 
-"@storybook/codemod@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/codemod@npm:7.6.16"
+"@storybook/codemod@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/codemod@npm:7.6.17"
   dependencies:
     "@babel/core": "npm:^7.23.2"
     "@babel/preset-env": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
     "@storybook/csf": "npm:^0.1.2"
-    "@storybook/csf-tools": "npm:7.6.16"
-    "@storybook/node-logger": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/csf-tools": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/cross-spawn": "npm:^6.0.2"
     cross-spawn: "npm:^7.0.3"
     globby: "npm:^11.0.2"
@@ -5035,48 +5005,48 @@ __metadata:
     lodash: "npm:^4.17.21"
     prettier: "npm:^2.8.0"
     recast: "npm:^0.23.1"
-  checksum: 10c0/262e4045afac53462d4521c70b428ddb99e40b3a78ad9921a1002bd0d4054c6aa815ee26c3cab75a4d956af2e2a0a66dc5976e54f28b1cb6913510bd0681210b
+  checksum: 10c0/b8428203dfa551ea34b34659e5231cdc03eeb0fba2c53f801794b732515b173131bbe3df14dff9a540c18d3dfdafa7f94d11dbf34bf4dbaf03a47dd7c80d09ae
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:7.6.16, @storybook/components@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/components@npm:7.6.16"
+"@storybook/components@npm:7.6.17, @storybook/components@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/components@npm:7.6.17"
   dependencies:
     "@radix-ui/react-select": "npm:^1.2.2"
     "@radix-ui/react-toolbar": "npm:^1.0.4"
-    "@storybook/client-logger": "npm:7.6.16"
+    "@storybook/client-logger": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/theming": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/theming": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     memoizerific: "npm:^1.11.3"
     use-resize-observer: "npm:^9.1.0"
     util-deprecate: "npm:^1.0.2"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/e1c922f279b472c8d9225e30742e145c3add1c78635542e3bd6e3c4dd9176ec14417c63616ee5bf9b9a307188a4a711c789e6bd2aa192fb1eb3790a534a54ec9
+  checksum: 10c0/199421d7668a3afcce9375c567443704778b4288bed16a39f02e5c1aaa9892b4ffba829b47d5a3fa8328521f6e0c26e5e7e7beed898cc0f8f835a99ec8f125a6
   languageName: node
   linkType: hard
 
-"@storybook/core-client@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/core-client@npm:7.6.16"
+"@storybook/core-client@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/core-client@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.16"
-    "@storybook/preview-api": "npm:7.6.16"
-  checksum: 10c0/41c88661a241189ac431298d496076cd573343120ab67e8fb5134a0d426a6cfa0699a49c3c04d2baeb248b9abc8f6a442e5ef51223c9f77d73f575862de1746b
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+  checksum: 10c0/3342367bce219d46ac0c5b494688ae86aeb5c4006d98749dec2e30518850bc76a8b255611e9151f043d5141d11deb781b972c8610e98565cab4112dc86b7c1d5
   languageName: node
   linkType: hard
 
-"@storybook/core-common@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/core-common@npm:7.6.16"
+"@storybook/core-common@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/core-common@npm:7.6.17"
   dependencies:
-    "@storybook/core-events": "npm:7.6.16"
-    "@storybook/node-logger": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/core-events": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/find-cache-dir": "npm:^3.2.1"
     "@types/node": "npm:^18.0.0"
     "@types/node-fetch": "npm:^2.6.4"
@@ -5097,17 +5067,17 @@ __metadata:
     pretty-hrtime: "npm:^1.0.3"
     resolve-from: "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/772fc0f88e873a15cd765b0b6d391d8079aa2a745e823f8d69c93dc2284a859416904c12e2efea34dc9876a4a789336d6233781e00a0da821cb19896c0d28add
+  checksum: 10c0/5be46d8f2d97dcde4a45de688278baed78185b44895825fe2f9423b70410fa88214a9709f40e7656cebe218a2c57cfa9979228e9f2b522eb47cf5af825d1133d
   languageName: node
   linkType: hard
 
 "@storybook/core-common@npm:^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0":
-  version: 7.6.6
-  resolution: "@storybook/core-common@npm:7.6.6"
+  version: 7.6.16
+  resolution: "@storybook/core-common@npm:7.6.16"
   dependencies:
-    "@storybook/core-events": "npm:7.6.6"
-    "@storybook/node-logger": "npm:7.6.6"
-    "@storybook/types": "npm:7.6.6"
+    "@storybook/core-events": "npm:7.6.16"
+    "@storybook/node-logger": "npm:7.6.16"
+    "@storybook/types": "npm:7.6.16"
     "@types/find-cache-dir": "npm:^3.2.1"
     "@types/node": "npm:^18.0.0"
     "@types/node-fetch": "npm:^2.6.4"
@@ -5128,11 +5098,11 @@ __metadata:
     pretty-hrtime: "npm:^1.0.3"
     resolve-from: "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/19c7eefc93d8884f204cf7b2a8f232de531783789d55f243de2a54f5813fc7eee9f93aa30d36434b05579ad6e812c7fb99c2fdf8cd58c368761d91fa4031d8a8
+  checksum: 10c0/772fc0f88e873a15cd765b0b6d391d8079aa2a745e823f8d69c93dc2284a859416904c12e2efea34dc9876a4a789336d6233781e00a0da821cb19896c0d28add
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:7.6.16, @storybook/core-events@npm:^7.6.16":
+"@storybook/core-events@npm:7.6.16":
   version: 7.6.16
   resolution: "@storybook/core-events@npm:7.6.16"
   dependencies:
@@ -5141,34 +5111,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:7.6.6":
-  version: 7.6.6
-  resolution: "@storybook/core-events@npm:7.6.6"
+"@storybook/core-events@npm:7.6.17, @storybook/core-events@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/core-events@npm:7.6.17"
   dependencies:
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/5d43c14374015bbf653009bb0fcc99690ace861af6130074c38bf2e2baaf8415ab9381261f1d058e4890a6151d827df00e4a59b9d593ecb06cca7b0af0cd7abe
+  checksum: 10c0/ab6410da3a456a61138b4a760a28b74bb9dc6f4c81de0d5ff7760b1853c6a437f8a0d05301c291f45503575d60c3be4805db4178f649eccd32c5ffd98a790250
   languageName: node
   linkType: hard
 
-"@storybook/core-server@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/core-server@npm:7.6.16"
+"@storybook/core-server@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/core-server@npm:7.6.17"
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
     "@discoveryjs/json-ext": "npm:^0.5.3"
-    "@storybook/builder-manager": "npm:7.6.16"
-    "@storybook/channels": "npm:7.6.16"
-    "@storybook/core-common": "npm:7.6.16"
-    "@storybook/core-events": "npm:7.6.16"
+    "@storybook/builder-manager": "npm:7.6.17"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
-    "@storybook/csf-tools": "npm:7.6.16"
+    "@storybook/csf-tools": "npm:7.6.17"
     "@storybook/docs-mdx": "npm:^0.1.0"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager": "npm:7.6.16"
-    "@storybook/node-logger": "npm:7.6.16"
-    "@storybook/preview-api": "npm:7.6.16"
-    "@storybook/telemetry": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/manager": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/telemetry": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/detect-port": "npm:^1.3.0"
     "@types/node": "npm:^18.0.0"
     "@types/pretty-hrtime": "npm:^1.0.0"
@@ -5181,7 +5151,7 @@ __metadata:
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
     globby: "npm:^11.0.2"
-    ip: "npm:^2.0.0"
+    ip: "npm:^2.0.1"
     lodash: "npm:^4.17.21"
     open: "npm:^8.4.0"
     pretty-hrtime: "npm:^1.0.3"
@@ -5195,64 +5165,64 @@ __metadata:
     util-deprecate: "npm:^1.0.2"
     watchpack: "npm:^2.2.0"
     ws: "npm:^8.2.3"
-  checksum: 10c0/95e45e81f6f93254cd1f87c67e5bbbcbfd720feb2810868aca8c41d7437ee436b6dfe1580e4a66b938a5bff15793cbf7d5a3382ec6ea7323c6862607c92ad7a9
+  checksum: 10c0/b56077bea18c22151adb72c96efb1717034314b08bba5cae12b1f8a0e4135773f5c1e334ad3523dfeb578078b2d41a6091e2b0a992a110ca1859fdd89b1a4702
   languageName: node
   linkType: hard
 
-"@storybook/core-webpack@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/core-webpack@npm:7.6.16"
+"@storybook/core-webpack@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/core-webpack@npm:7.6.17"
   dependencies:
-    "@storybook/core-common": "npm:7.6.16"
-    "@storybook/node-logger": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/node": "npm:^18.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/18ec4bc37f553403f5ac54d0e3cb9b5c69be6081bba139eec770fe8f8f27a5718c22acc4ddabff35f1b25c19341f56be1bc3a6d735c3acec2c95ed0aa8cdc670
+  checksum: 10c0/dad0817906effbd833939ed3cfdd9ae6e3fecd74b77e367f1c140f297ac20d551a609bde2363f8690649bee680ea5136bf2ee258e1034f4a30ff46d88ea1cf64
   languageName: node
   linkType: hard
 
-"@storybook/csf-plugin@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/csf-plugin@npm:7.6.16"
+"@storybook/csf-plugin@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/csf-plugin@npm:7.6.17"
   dependencies:
-    "@storybook/csf-tools": "npm:7.6.16"
+    "@storybook/csf-tools": "npm:7.6.17"
     unplugin: "npm:^1.3.1"
-  checksum: 10c0/9baf68af4ae8525fc5c4007f5a059670e49dd1893db0b3fabfb17544a2c469dd3b38f616796a4867ebe6e62d1827b0a9024702234fe64e4c1d5ac37af96fcccb
+  checksum: 10c0/720ecbd2e845f6d6d575b8fb5b05a085ddba1eb486318a9b7d6f2ea6646fe3e62d7c9589e18aab15ce0a715c653c9d24b2e0f38117e92845e636f0410a85f76d
   languageName: node
   linkType: hard
 
-"@storybook/csf-tools@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/csf-tools@npm:7.6.16"
+"@storybook/csf-tools@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/csf-tools@npm:7.6.17"
   dependencies:
     "@babel/generator": "npm:^7.23.0"
     "@babel/parser": "npm:^7.23.0"
     "@babel/traverse": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
     "@storybook/csf": "npm:^0.1.2"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/types": "npm:7.6.17"
     fs-extra: "npm:^11.1.0"
     recast: "npm:^0.23.1"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/583ddb730ffac6782137bd5ded54c9d826a1a14bc2beb745982e38b25c468ba893857fa68d7ff35ca471af650b839d7d7eefab8572db46d4a2263335cb67cb18
+  checksum: 10c0/827458c97de27127a026d6f4592ad8760f27b69dc1082251710b8067b0616bf2c6b9c13b12cbf12a8162a6528d92ca81839cf78d0d10d09978d3ccdedaca7bce
   languageName: node
   linkType: hard
 
 "@storybook/csf-tools@npm:^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0":
-  version: 7.6.6
-  resolution: "@storybook/csf-tools@npm:7.6.6"
+  version: 7.6.16
+  resolution: "@storybook/csf-tools@npm:7.6.16"
   dependencies:
     "@babel/generator": "npm:^7.23.0"
     "@babel/parser": "npm:^7.23.0"
     "@babel/traverse": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
     "@storybook/csf": "npm:^0.1.2"
-    "@storybook/types": "npm:7.6.6"
+    "@storybook/types": "npm:7.6.16"
     fs-extra: "npm:^11.1.0"
     recast: "npm:^0.23.1"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/8a94ca5eb2fa06e81434d4aff61b2002765a332764690ae29a571358910ccd9d46e5464b980b70162fe420975fdaf68ebc5008fa3caa145bb87bc5008f935388
+  checksum: 10c0/583ddb730ffac6782137bd5ded54c9d826a1a14bc2beb745982e38b25c468ba893857fa68d7ff35ca471af650b839d7d7eefab8572db46d4a2263335cb67cb18
   languageName: node
   linkType: hard
 
@@ -5281,18 +5251,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/docs-tools@npm:7.6.16"
+"@storybook/docs-tools@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/docs-tools@npm:7.6.17"
   dependencies:
-    "@storybook/core-common": "npm:7.6.16"
-    "@storybook/preview-api": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/doctrine": "npm:^0.0.3"
     assert: "npm:^2.1.0"
     doctrine: "npm:^3.0.0"
     lodash: "npm:^4.17.21"
-  checksum: 10c0/9f53fee141d3dd77323c57281dce7a85d5e7a7b6341e75c2ffc3099182c497ad5b919eff59a25736901c88da00f3bdab7ee91fc5e19c650ca0ef9352801b19b3
+  checksum: 10c0/38473d0ce609cee38df5a8f3ad34a23ce6050e06b492cab51052ba67a2c6ecece532e0dee9f5e3cc5dee3d7105233289d05465a7ae0f5cb94fd2bbda1c267d38
   languageName: node
   linkType: hard
 
@@ -5303,32 +5273,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:7.6.16, @storybook/manager-api@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/manager-api@npm:7.6.16"
+"@storybook/manager-api@npm:7.6.17, @storybook/manager-api@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/manager-api@npm:7.6.17"
   dependencies:
-    "@storybook/channels": "npm:7.6.16"
-    "@storybook/client-logger": "npm:7.6.16"
-    "@storybook/core-events": "npm:7.6.16"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/router": "npm:7.6.16"
-    "@storybook/theming": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/router": "npm:7.6.17"
+    "@storybook/theming": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
     memoizerific: "npm:^1.11.3"
     store2: "npm:^2.14.2"
     telejson: "npm:^7.2.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/69474fbb49beba48fabfc8877fcd9c9e034855238e40aeb41cd18157e82b07579a5bdb068937f0dfcf2aa5dc63e282f98152b26868c30a6ce2481ece288e4f8a
+  checksum: 10c0/475d0e0d37a72087c6b4f4e0bfe6ad648c27b5ea34951580b2e339f883d697ac7c4d99926db544a7c58b0aba959ad2d70129d7a7cee4bafaccd3810329a51e03
   languageName: node
   linkType: hard
 
-"@storybook/manager@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/manager@npm:7.6.16"
-  checksum: 10c0/a5813424a40e771df497bf7d2813f817b642230c74914c2b9507c082436711f63bf7abcf3220c243639e2f67b376922ca214f75286ca1878e59f92af230d4702
+"@storybook/manager@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/manager@npm:7.6.17"
+  checksum: 10c0/e703466e95b0fca58963ac0abec188164e6bce904471171dd360c0d63ead0183a5b242db034af63157acd42d38348984e5fe4e6414af6190234c4d5d41608cee
   languageName: node
   linkType: hard
 
@@ -5346,31 +5316,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/node-logger@npm:7.6.6":
-  version: 7.6.6
-  resolution: "@storybook/node-logger@npm:7.6.6"
-  checksum: 10c0/2f6929c9260d2523953aa63faec5dc477a37bf18f5d0c20aff7711f4d39e428eb27c80a4a982a5842759d1531219e41a00635b2219fae999d8ec11354eab3aee
+"@storybook/node-logger@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/node-logger@npm:7.6.17"
+  checksum: 10c0/7b91f10812b8ea4e8716c3b133c5a78ac419e6bcd6a6ab80117cee25287aa973c1710a74a882238697499a1eca6521c4171f4f2d2e8651fb8ef6e28b7ee167fe
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/postinstall@npm:7.6.16"
-  checksum: 10c0/f6e40b84f2fc95756af71b99c9fd9e7c63d502a3c5f2225abb9b1da672072b99a7fa7ea436be39aac31420e535070dc0038b8068a4504718be0786e0b88c7a58
+"@storybook/postinstall@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/postinstall@npm:7.6.17"
+  checksum: 10c0/62038e1feacfa5b9acc85afd1cdcbee3c9d780c8dbb6d2eb8cf7bfbb6a14d989fa61351958f512415761d5190075367f1f3641e104c0cec0a2c8dd056617dea6
   languageName: node
   linkType: hard
 
-"@storybook/preset-react-webpack@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/preset-react-webpack@npm:7.6.16"
+"@storybook/preset-react-webpack@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/preset-react-webpack@npm:7.6.17"
   dependencies:
     "@babel/preset-flow": "npm:^7.22.15"
     "@babel/preset-react": "npm:^7.22.15"
     "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11"
-    "@storybook/core-webpack": "npm:7.6.16"
-    "@storybook/docs-tools": "npm:7.6.16"
-    "@storybook/node-logger": "npm:7.6.16"
-    "@storybook/react": "npm:7.6.16"
+    "@storybook/core-webpack": "npm:7.6.17"
+    "@storybook/docs-tools": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/react": "npm:7.6.17"
     "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0"
     "@types/node": "npm:^18.0.0"
     "@types/semver": "npm:^7.3.4"
@@ -5390,20 +5360,20 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: 10c0/50ab6c13ea8688af0552d83561a9a55473abe2335a0553eb136f62ec871083122e74203dc2e65ff00b3c635e05967ec900c553c0f144f13b8fa930b4527f66b1
+  checksum: 10c0/092af3e2fed5fd17750dea11809981e9baa2d02f69f1fcc66da21e49aec006820ad72a45d53f96bdfee1c6481370c2a15d9bda626681d7ac09d2c22e7eb1e77d
   languageName: node
   linkType: hard
 
-"@storybook/preview-api@npm:7.6.16, @storybook/preview-api@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/preview-api@npm:7.6.16"
+"@storybook/preview-api@npm:7.6.17, @storybook/preview-api@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/preview-api@npm:7.6.17"
   dependencies:
-    "@storybook/channels": "npm:7.6.16"
-    "@storybook/client-logger": "npm:7.6.16"
-    "@storybook/core-events": "npm:7.6.16"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/types": "npm:7.6.17"
     "@types/qs": "npm:^6.9.5"
     dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
@@ -5412,20 +5382,20 @@ __metadata:
     synchronous-promise: "npm:^2.0.15"
     ts-dedent: "npm:^2.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/23a032bfa8915a80ae8326875cba1277fb73d2ec1dce71e5729ee60667565b4971a9b7239fd867a22ef709bf6f4f64b9bf7f330538a0aabf4836d8e0251a8ee5
+  checksum: 10c0/b4357ee0c1f9b05feee051d0c0ed3343972277f12d9d033fcc59acfb18d336cecc4a5f0b23998011af4a92c8126e785b2931dbdbdf79787aac5756a01c32aee0
   languageName: node
   linkType: hard
 
 "@storybook/preview-api@npm:^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0":
-  version: 7.6.6
-  resolution: "@storybook/preview-api@npm:7.6.6"
+  version: 7.6.16
+  resolution: "@storybook/preview-api@npm:7.6.16"
   dependencies:
-    "@storybook/channels": "npm:7.6.6"
-    "@storybook/client-logger": "npm:7.6.6"
-    "@storybook/core-events": "npm:7.6.6"
+    "@storybook/channels": "npm:7.6.16"
+    "@storybook/client-logger": "npm:7.6.16"
+    "@storybook/core-events": "npm:7.6.16"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/types": "npm:7.6.6"
+    "@storybook/types": "npm:7.6.16"
     "@types/qs": "npm:^6.9.5"
     dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
@@ -5434,14 +5404,14 @@ __metadata:
     synchronous-promise: "npm:^2.0.15"
     ts-dedent: "npm:^2.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/7a26c769de6255c4ed5644da83b857960bae804f709f88d896cf0b643331d8ef1387ffd892231de9ed580f320406b75f9a7c436726916aae648a8e789734f4a3
+  checksum: 10c0/23a032bfa8915a80ae8326875cba1277fb73d2ec1dce71e5729ee60667565b4971a9b7239fd867a22ef709bf6f4f64b9bf7f330538a0aabf4836d8e0251a8ee5
   languageName: node
   linkType: hard
 
-"@storybook/preview@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/preview@npm:7.6.16"
-  checksum: 10c0/98f37fd20f3dbddacdfab5b01b7998ffba34c9a7029584974530a42e94f5472a87ea0113d80ebc2c36f3646c8b2d6890f891884bb503400466a1a21b97b4fc30
+"@storybook/preview@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/preview@npm:7.6.17"
+  checksum: 10c0/b4a2394c4622ff7291ba1b161d537902c53ed52ae3511c65e10c934b04463f6e7e55487b88889800acab55ea1c0aa33ea2a207786f3e06eda4617787f859da6b
   languageName: node
   linkType: hard
 
@@ -5463,23 +5433,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/react-dom-shim@npm:7.6.16"
+"@storybook/react-dom-shim@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/react-dom-shim@npm:7.6.17"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/4015d900d296e70a9a8c86c64579f976c30e10ab66f7662bc3ecb8f7d6158884cbbc452fc84fc8bae6985422fb42abdfb985c5a8118639b2a694710904bac81d
+  checksum: 10c0/20558c58f9f0a3a00c5a1bbf2aa3517e3d318e6528f503129c99fb9ee4b604a225e79725f67e01e6e99d5d8c7db0614575dcc89af7768381afe59c976cb7cfc0
   languageName: node
   linkType: hard
 
-"@storybook/react-webpack5@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/react-webpack5@npm:7.6.16"
+"@storybook/react-webpack5@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/react-webpack5@npm:7.6.17"
   dependencies:
-    "@storybook/builder-webpack5": "npm:7.6.16"
-    "@storybook/preset-react-webpack": "npm:7.6.16"
-    "@storybook/react": "npm:7.6.16"
+    "@storybook/builder-webpack5": "npm:7.6.17"
+    "@storybook/preset-react-webpack": "npm:7.6.17"
+    "@storybook/react": "npm:7.6.17"
     "@types/node": "npm:^18.0.0"
   peerDependencies:
     "@babel/core": ^7.22.0
@@ -5491,21 +5461,21 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: 10c0/9b32af804969aa4f7688aea61836be24b7c6d204a9bf53a326f5b598d96722d47caff2bdc8bae88a8851068b313466b376f8307e58024b68233025abf3e49d82
+  checksum: 10c0/c95317c225fba4ae0cd93f3b602d758adb598dd8952ea0fee425809ba991086a0260a64eb3e6f815a8c99a877cc97af9a2d21862b178f4e0249818e3454d0193
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:7.6.16, @storybook/react@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/react@npm:7.6.16"
+"@storybook/react@npm:7.6.17, @storybook/react@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/react@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.16"
-    "@storybook/core-client": "npm:7.6.16"
-    "@storybook/docs-tools": "npm:7.6.16"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-client": "npm:7.6.17"
+    "@storybook/docs-tools": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/preview-api": "npm:7.6.16"
-    "@storybook/react-dom-shim": "npm:7.6.16"
-    "@storybook/types": "npm:7.6.16"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/react-dom-shim": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/escodegen": "npm:^0.0.6"
     "@types/estree": "npm:^0.0.51"
     "@types/node": "npm:^18.0.0"
@@ -5527,34 +5497,34 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/79a49c9b8c2d309ca575dbd3a55c70aaeb53f9722b77bbed971126c24f4fe1c484748a8625c809e64f0690b95fdc8da0fb9376b534c46d817e21475b0873ae17
+  checksum: 10c0/747bb48413865701716652b9587c8c5b07cc51cb1d54125a69a4ec355f24fdcfc3a9d925a0b6268786875e97addf435e10efe737450e50eea1d19408049674e6
   languageName: node
   linkType: hard
 
-"@storybook/router@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/router@npm:7.6.16"
+"@storybook/router@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/router@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.16"
+    "@storybook/client-logger": "npm:7.6.17"
     memoizerific: "npm:^1.11.3"
     qs: "npm:^6.10.0"
-  checksum: 10c0/2c281c954f86c5b62bca210aa48741b300cffdb5dac7d7a35882d9ea7c68fe8d4917383ea7637cb80361d80b14e2abfcf33cef94a06bcdf4b1195895b2235aaf
+  checksum: 10c0/8e5f354bd835319ca3c7f3ea8248914e7c22dee5815b1bdcbdbf6a9dc018f608683e482013767004105bc726d42c71f001a6c8d10c2177a511e6c0e093b7cf2d
   languageName: node
   linkType: hard
 
-"@storybook/telemetry@npm:7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/telemetry@npm:7.6.16"
+"@storybook/telemetry@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/telemetry@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.16"
-    "@storybook/core-common": "npm:7.6.16"
-    "@storybook/csf-tools": "npm:7.6.16"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/csf-tools": "npm:7.6.17"
     chalk: "npm:^4.1.0"
     detect-package-manager: "npm:^2.0.1"
     fetch-retry: "npm:^5.0.2"
     fs-extra: "npm:^11.1.0"
     read-pkg-up: "npm:^7.0.1"
-  checksum: 10c0/20698bafda077f9c934b2b75bf76c0c993f03dedc86416f317a2ef9c5b83639ed24b7d65230c8ae06b6c2eae45c032553fac755050b96740340ae8f5df0c1ce5
+  checksum: 10c0/2d13afef0fd73982c1efec1598583ed592bd608bbc61f9c4d96c47be9202d80043041764e00ea3b10b0636417cfbfe7b3d13c6898187a09554c8a696f89ac226
   languageName: node
   linkType: hard
 
@@ -5607,18 +5577,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:7.6.16, @storybook/theming@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "@storybook/theming@npm:7.6.16"
+"@storybook/theming@npm:7.6.17, @storybook/theming@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/theming@npm:7.6.17"
   dependencies:
     "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0"
-    "@storybook/client-logger": "npm:7.6.16"
+    "@storybook/client-logger": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
     memoizerific: "npm:^1.11.3"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/133bf631de542e82534afd69bd73da9be867d43b813a9a9993a72f05c441ed454f14b5357f3e5cad1a32c1cf1f87f10b30e91eaf96396154ad50df21d002c1ae
+  checksum: 10c0/f18c52b236554056a97d9df23c5ecf186ffe2ef22eae3812a961b5d9beff96c2a05134ce2a39ad246c2b4ae0d5904a4e7148f7eb3d38d9c7b676d6d0a6c30595
   languageName: node
   linkType: hard
 
@@ -5634,15 +5604,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/types@npm:7.6.6":
-  version: 7.6.6
-  resolution: "@storybook/types@npm:7.6.6"
+"@storybook/types@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/types@npm:7.6.17"
   dependencies:
-    "@storybook/channels": "npm:7.6.6"
+    "@storybook/channels": "npm:7.6.17"
     "@types/babel__core": "npm:^7.0.0"
     "@types/express": "npm:^4.7.0"
     file-system-cache: "npm:2.3.0"
-  checksum: 10c0/e0f657336ad9d554715a362119e550707129611ee31809b3d5a081d20830f331cf40bdf1471d667d7824f17ae2cd34f75b69dca8c2e443b09266d228d7937f2a
+  checksum: 10c0/7de04987b44b2d78d9e6ff39b54ece657b1d5266cc180a6b1a192ab394f893f8352578d9c8d0d2327e21689843a1c314f08e05eec18992d78a8d9347b0bcc72a
   languageName: node
   linkType: hard
 
@@ -5844,91 +5814,91 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/core-darwin-arm64@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-darwin-arm64@npm:1.3.101"
+"@swc/core-darwin-arm64@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-darwin-arm64@npm:1.4.1"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-darwin-x64@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-darwin-x64@npm:1.3.101"
+"@swc/core-darwin-x64@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-darwin-x64@npm:1.4.1"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm-gnueabihf@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.101"
+"@swc/core-linux-arm-gnueabihf@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.4.1"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-gnu@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-linux-arm64-gnu@npm:1.3.101"
+"@swc/core-linux-arm64-gnu@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-linux-arm64-gnu@npm:1.4.1"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-musl@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-linux-arm64-musl@npm:1.3.101"
+"@swc/core-linux-arm64-musl@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-linux-arm64-musl@npm:1.4.1"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-gnu@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-linux-x64-gnu@npm:1.3.101"
+"@swc/core-linux-x64-gnu@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-linux-x64-gnu@npm:1.4.1"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-musl@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-linux-x64-musl@npm:1.3.101"
+"@swc/core-linux-x64-musl@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-linux-x64-musl@npm:1.4.1"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@swc/core-win32-arm64-msvc@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-win32-arm64-msvc@npm:1.3.101"
+"@swc/core-win32-arm64-msvc@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-win32-arm64-msvc@npm:1.4.1"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-win32-ia32-msvc@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-win32-ia32-msvc@npm:1.3.101"
+"@swc/core-win32-ia32-msvc@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-win32-ia32-msvc@npm:1.4.1"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@swc/core-win32-x64-msvc@npm:1.3.101":
-  version: 1.3.101
-  resolution: "@swc/core-win32-x64-msvc@npm:1.3.101"
+"@swc/core-win32-x64-msvc@npm:1.4.1":
+  version: 1.4.1
+  resolution: "@swc/core-win32-x64-msvc@npm:1.4.1"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
 "@swc/core@npm:^1.3.18, @swc/core@npm:^1.3.82":
-  version: 1.3.101
-  resolution: "@swc/core@npm:1.3.101"
-  dependencies:
-    "@swc/core-darwin-arm64": "npm:1.3.101"
-    "@swc/core-darwin-x64": "npm:1.3.101"
-    "@swc/core-linux-arm-gnueabihf": "npm:1.3.101"
-    "@swc/core-linux-arm64-gnu": "npm:1.3.101"
-    "@swc/core-linux-arm64-musl": "npm:1.3.101"
-    "@swc/core-linux-x64-gnu": "npm:1.3.101"
-    "@swc/core-linux-x64-musl": "npm:1.3.101"
-    "@swc/core-win32-arm64-msvc": "npm:1.3.101"
-    "@swc/core-win32-ia32-msvc": "npm:1.3.101"
-    "@swc/core-win32-x64-msvc": "npm:1.3.101"
-    "@swc/counter": "npm:^0.1.1"
+  version: 1.4.1
+  resolution: "@swc/core@npm:1.4.1"
+  dependencies:
+    "@swc/core-darwin-arm64": "npm:1.4.1"
+    "@swc/core-darwin-x64": "npm:1.4.1"
+    "@swc/core-linux-arm-gnueabihf": "npm:1.4.1"
+    "@swc/core-linux-arm64-gnu": "npm:1.4.1"
+    "@swc/core-linux-arm64-musl": "npm:1.4.1"
+    "@swc/core-linux-x64-gnu": "npm:1.4.1"
+    "@swc/core-linux-x64-musl": "npm:1.4.1"
+    "@swc/core-win32-arm64-msvc": "npm:1.4.1"
+    "@swc/core-win32-ia32-msvc": "npm:1.4.1"
+    "@swc/core-win32-x64-msvc": "npm:1.4.1"
+    "@swc/counter": "npm:^0.1.2"
     "@swc/types": "npm:^0.1.5"
   peerDependencies:
     "@swc/helpers": ^0.5.0
@@ -5956,26 +5926,27 @@ __metadata:
   peerDependenciesMeta:
     "@swc/helpers":
       optional: true
-  checksum: 10c0/167e9decb494fbd66b57115eab8fa1ae23c7dae009597812db04df2c8434283ae028adfd4bfe5a6ac15ffbba8f2651c0460da8025d532efc1212ef94d70e271f
+  checksum: 10c0/ff5ac47c6a6b925292b82a98aefbf518dae6bb69300ff8aa231e10f0b4f68b346cbfce9a8dbe177119d43bdbf5bc7b0aaee8cc49d47385197bef8317df4c015c
   languageName: node
   linkType: hard
 
-"@swc/counter@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "@swc/counter@npm:0.1.2"
-  checksum: 10c0/18be012107d4ba1f79776c48d83391ca2159103d7d31a59ff52fcc8024db51b71c5f46714a9fb73981739bc8a38dc6f385a046b71cc08f6043f3c47f5c409eab
+"@swc/counter@npm:^0.1.2, @swc/counter@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@swc/counter@npm:0.1.3"
+  checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356
   languageName: node
   linkType: hard
 
 "@swc/jest@npm:^0.2.23":
-  version: 0.2.29
-  resolution: "@swc/jest@npm:0.2.29"
+  version: 0.2.36
+  resolution: "@swc/jest@npm:0.2.36"
   dependencies:
-    "@jest/create-cache-key-function": "npm:^27.4.2"
+    "@jest/create-cache-key-function": "npm:^29.7.0"
+    "@swc/counter": "npm:^0.1.3"
     jsonc-parser: "npm:^3.2.0"
   peerDependencies:
     "@swc/core": "*"
-  checksum: 10c0/10f34341f9bc8003cec44f91a88b531ba44094aad97b2f8410fb2f94db9eb3b8fc7f6d14ba867eb9c1dc6ba29cc46058244b8280d673a7c681062fe0dc73c3f0
+  checksum: 10c0/7f1993f9201420bb499c92ab28797352bcbf9e3a6c7b5a1806fdc34c9c3b46ea9e5b2f070c0e13fcf7f3c3fadbbc38777840baabb178f589bf1f67543763adb6
   languageName: node
   linkType: hard
 
@@ -5996,8 +5967,8 @@ __metadata:
   linkType: hard
 
 "@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.3":
-  version: 9.3.3
-  resolution: "@testing-library/dom@npm:9.3.3"
+  version: 9.3.4
+  resolution: "@testing-library/dom@npm:9.3.4"
   dependencies:
     "@babel/code-frame": "npm:^7.10.4"
     "@babel/runtime": "npm:^7.12.5"
@@ -6007,43 +5978,46 @@ __metadata:
     dom-accessibility-api: "npm:^0.5.9"
     lz-string: "npm:^1.5.0"
     pretty-format: "npm:^27.0.2"
-  checksum: 10c0/c3bbd67503634fd955233dc172531640656701fe35ecb9a83f85e5965874b786452f5e7c26b4f8b3b4fc4379f3a80193c74425b57843ba191f4845e22b0ac483
+  checksum: 10c0/147da340e8199d7f98f3a4ad8aa22ed55b914b83957efa5eb22bfea021a979ebe5a5182afa9c1e5b7a5f99a7f6744a5a4d9325ae46ec3b33b5a15aed8750d794
   languageName: node
   linkType: hard
 
 "@testing-library/jest-dom@npm:^6.1.5":
-  version: 6.1.5
-  resolution: "@testing-library/jest-dom@npm:6.1.5"
+  version: 6.4.2
+  resolution: "@testing-library/jest-dom@npm:6.4.2"
   dependencies:
-    "@adobe/css-tools": "npm:^4.3.1"
+    "@adobe/css-tools": "npm:^4.3.2"
     "@babel/runtime": "npm:^7.9.2"
     aria-query: "npm:^5.0.0"
     chalk: "npm:^3.0.0"
     css.escape: "npm:^1.5.1"
-    dom-accessibility-api: "npm:^0.5.6"
+    dom-accessibility-api: "npm:^0.6.3"
     lodash: "npm:^4.17.15"
     redent: "npm:^3.0.0"
   peerDependencies:
     "@jest/globals": ">= 28"
+    "@types/bun": "*"
     "@types/jest": ">= 28"
     jest: ">= 28"
     vitest: ">= 0.32"
   peerDependenciesMeta:
     "@jest/globals":
       optional: true
+    "@types/bun":
+      optional: true
     "@types/jest":
       optional: true
     jest:
       optional: true
     vitest:
       optional: true
-  checksum: 10c0/f3643a56fcd970b5c7e8fd10faf3c4817d8ab0e74fb1198d726643bdc5ac675ceaac3b0068c5b4fbad254470e8f98ed50028741de875a29ceaa2f854570979c9
+  checksum: 10c0/e7eba527b34ce30cde94424d2ec685bdfed51daaafb7df9b68b51aec6052e99a50c8bfe654612dacdf857a1eb81d68cf294fc89de558ee3a992bf7a6019fffcc
   languageName: node
   linkType: hard
 
 "@testing-library/react@npm:^14.1.2":
-  version: 14.1.2
-  resolution: "@testing-library/react@npm:14.1.2"
+  version: 14.2.1
+  resolution: "@testing-library/react@npm:14.2.1"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
     "@testing-library/dom": "npm:^9.0.0"
@@ -6051,16 +6025,16 @@ __metadata:
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 10c0/b5b0990d3aa0ea8b37c55804e0d5d584fc638a5c7d4df90da9a0fdb00bc981b27b6991468b2dc719982a5d0b0107a41596063ce51ad519eeab47b22bc04d6779
+  checksum: 10c0/83b35cf8bf5640f1b63b32223ebc75799dc1a8e034d819120b26838fba0b0ab10bdbe6ad07dd8ae8287365f2b0c52dc9892a6fa11bb24d3e63ad97dfb7f2f296
   languageName: node
   linkType: hard
 
 "@testing-library/user-event@npm:^14.4.0, @testing-library/user-event@npm:^14.5.1":
-  version: 14.5.1
-  resolution: "@testing-library/user-event@npm:14.5.1"
+  version: 14.5.2
+  resolution: "@testing-library/user-event@npm:14.5.2"
   peerDependencies:
     "@testing-library/dom": ">=7.21.4"
-  checksum: 10c0/1e00d6ead23377885b906db6e46e259161a0efb4138f7527481d7435f3c8f65cb7e3eab2900e2ac1886fa6dd03416e773a3a60dea87a9a2086a7127dee315f6f
+  checksum: 10c0/68a0c2aa28a3c8e6eb05cafee29705438d7d8a9427423ce5064d44f19c29e89b5636de46dd2f28620fb10abba75c67130185bbc3aa23ac1163a227a5f36641e1
   languageName: node
   linkType: hard
 
@@ -6166,11 +6140,11 @@ __metadata:
   linkType: hard
 
 "@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6, @types/babel__traverse@npm:^7.18.0":
-  version: 7.20.4
-  resolution: "@types/babel__traverse@npm:7.20.4"
+  version: 7.20.5
+  resolution: "@types/babel__traverse@npm:7.20.5"
   dependencies:
     "@babel/types": "npm:^7.20.7"
-  checksum: 10c0/e76cb4974c7740fd61311152dc497e7b05c1c46ba554aab875544ab0a7457f343cafcad34ba8fb2ff543ab0e012ef2d3fa0c13f1a4e9a4cd9c4c703c7a2a8d62
+  checksum: 10c0/033abcb2f4c084ad33e30c3efaad82161240f351e3c71b6154ed289946b33b363696c0fbd42502b68e4582a87413c418321f40eb1ea863e34fe525641345e05b
   languageName: node
   linkType: hard
 
@@ -6296,16 +6270,16 @@ __metadata:
   linkType: hard
 
 "@types/eslint@npm:*, @types/eslint@npm:^8.56.0":
-  version: 8.56.0
-  resolution: "@types/eslint@npm:8.56.0"
+  version: 8.56.2
+  resolution: "@types/eslint@npm:8.56.2"
   dependencies:
     "@types/estree": "npm:*"
     "@types/json-schema": "npm:*"
-  checksum: 10c0/afba97b10d02cb7c7e7658de38f626c65b81be0fe45bc479e058ab14bc089911193811dce681edd656fc6b59c91fd8d0c976972476fc98b5e782b2c3b08aaa6c
+  checksum: 10c0/e33ca87a30a9454ba9943e1270ac759996f5fe598a1c1afbaec1d1e7346a339e20bf2a9d81f177067116bbaa6cfa4f748993cb338f57978ae862ad38ffae56fe
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.5":
+"@types/estree@npm:*, @types/estree@npm:1.0.5, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.5":
   version: 1.0.5
   resolution: "@types/estree@npm:1.0.5"
   checksum: 10c0/b3b0e334288ddb407c7b3357ca67dbee75ee22db242ca7c56fe27db4e1a31989cb8af48a84dd401deb787fe10cc6b2ab1ee82dc4783be87ededbe3d53c79c70d
@@ -6327,14 +6301,14 @@ __metadata:
   linkType: hard
 
 "@types/express-serve-static-core@npm:^4.17.33":
-  version: 4.17.41
-  resolution: "@types/express-serve-static-core@npm:4.17.41"
+  version: 4.17.43
+  resolution: "@types/express-serve-static-core@npm:4.17.43"
   dependencies:
     "@types/node": "npm:*"
     "@types/qs": "npm:*"
     "@types/range-parser": "npm:*"
     "@types/send": "npm:*"
-  checksum: 10c0/dc166cbf4475c00a81fbcab120bf7477c527184be11ae149df7f26d9c1082114c68f8d387a2926fe80291b06477c8bbd9231ff4f5775de328e887695aefce269
+  checksum: 10c0/12480527eef86ad9f748d785811c88e6bb89f4a76e531cf2e18f1f4f0743e46783cf4d27a939dec96aec8770c54c060d9e697bb8544ecd202098140688c3b222
   languageName: node
   linkType: hard
 
@@ -6434,12 +6408,12 @@ __metadata:
   linkType: hard
 
 "@types/jest@npm:*, @types/jest@npm:^29.5.11":
-  version: 29.5.11
-  resolution: "@types/jest@npm:29.5.11"
+  version: 29.5.12
+  resolution: "@types/jest@npm:29.5.12"
   dependencies:
     expect: "npm:^29.0.0"
     pretty-format: "npm:^29.0.0"
-  checksum: 10c0/524a3394845214581278bf4d75055927261fbeac7e1a89cd621bd0636da37d265fe0a85eac58b5778758faad1cbd7c7c361dfc190c78ebde03a91cce33463261
+  checksum: 10c0/25fc8e4c611fa6c4421e631432e9f0a6865a8cb07c9815ec9ac90d630271cad773b2ee5fe08066f7b95bebd18bb967f8ce05d018ee9ab0430f9dfd1d84665b6f
   languageName: node
   linkType: hard
 
@@ -6510,9 +6484,9 @@ __metadata:
   linkType: hard
 
 "@types/mdx@npm:^2.0.0":
-  version: 2.0.10
-  resolution: "@types/mdx@npm:2.0.10"
-  checksum: 10c0/a2a5d71967c44c650e883eaaeb61db9c0758b9c1d675e04b7a3cfeeaee6efd5044dc9c78d780aa3fe408a2f85680bf3b723c92a1772bb6c2da35ef346d766de2
+  version: 2.0.11
+  resolution: "@types/mdx@npm:2.0.11"
+  checksum: 10c0/8e60d9e1adb06854f25ac327ec340763b5867ce65ba5635ae6b24db6bda36d64655c5ee8a2f06bbc246199bcfd41cc3c8a4a95786c97a7befb3c28c7f134ffe1
   languageName: node
   linkType: hard
 
@@ -6566,21 +6540,21 @@ __metadata:
   linkType: hard
 
 "@types/node-fetch@npm:^2.6.4":
-  version: 2.6.9
-  resolution: "@types/node-fetch@npm:2.6.9"
+  version: 2.6.11
+  resolution: "@types/node-fetch@npm:2.6.11"
   dependencies:
     "@types/node": "npm:*"
     form-data: "npm:^4.0.0"
-  checksum: 10c0/b15b6d518ea4dd4a21cf328e9df0a88b2e5b76f3455ddfeb9063a3b97087c50b15ab195a869dadbbeb09d08dcc915557fb6a4f72b4fe79ee42e215fce3d9b0db
+  checksum: 10c0/5283d4e0bcc37a5b6d8e629aee880a4ffcfb33e089f4b903b2981b19c623972d1e64af7c3f9540ab990f0f5c89b9b5dda19c5bcb37a8e177079e93683bfd2f49
   languageName: node
   linkType: hard
 
 "@types/node@npm:*":
-  version: 20.10.5
-  resolution: "@types/node@npm:20.10.5"
+  version: 20.11.19
+  resolution: "@types/node@npm:20.11.19"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 10c0/be30609aae0bfe492097815f166ccc07f465220cb604647fa4e5ec05a1d16c012a41b82b5f11ecfe2485cbb479d4d20384b95b809ca0bcff6d94d5bbafa645bb
+  checksum: 10c0/f451ef0a1d78f29c57bad7b77e49ebec945f2a6d0d7a89851d7e185ee9fe7ad94d651c0dfbcb7858c9fa791310c8b40a881e2260f56bd3c1b7e7ae92723373ae
   languageName: node
   linkType: hard
 
@@ -6591,12 +6565,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^18.0.0, @types/node@npm:^18.11.9":
-  version: 18.19.3
-  resolution: "@types/node@npm:18.19.3"
+"@types/node@npm:^18.0.0":
+  version: 18.19.17
+  resolution: "@types/node@npm:18.19.17"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 10c0/3ed943d06e9dff70a3da793f794f1192cd93b0ababdb9f07425a05680f17cfce649cbc46734265f6fbe52fd9f277496d3a4da26c013f1193a0345f2420ea6cd0
+  checksum: 10c0/ac2e4910d5f2bb92cb2623f6d4d4d665a39cf1d425993347e6c3756c70a4def21a47241b86f49e1e4f441529753527bbd9be5f08f29fdac38c64035a26b847c7
   languageName: node
   linkType: hard
 
@@ -6654,9 +6628,9 @@ __metadata:
   linkType: hard
 
 "@types/qs@npm:*, @types/qs@npm:^6.9.5":
-  version: 6.9.10
-  resolution: "@types/qs@npm:6.9.10"
-  checksum: 10c0/6be12e5f062d1b41eb037d59bf9cb65bc9410cedd5e6da832dfd7c8e2b3f4c91e81c9b90b51811140770e5052c6c4e8361181bd9437ddcd4515dc128b7c00353
+  version: 6.9.11
+  resolution: "@types/qs@npm:6.9.11"
+  checksum: 10c0/657a50f05b694d6fd3916d24177cfa0f3b8b87d9deff4ffa4dddcb0b03583ebf7c47b424b8de400270fb9a5cc1e9cf790dd82c833c6935305851e7da8ede3ff5
   languageName: node
   linkType: hard
 
@@ -6668,11 +6642,11 @@ __metadata:
   linkType: hard
 
 "@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.18":
-  version: 18.2.18
-  resolution: "@types/react-dom@npm:18.2.18"
+  version: 18.2.19
+  resolution: "@types/react-dom@npm:18.2.19"
   dependencies:
     "@types/react": "npm:*"
-  checksum: 10c0/74dba11a1b8156f3a763f3fca1fb4ec1dcd349153279b8bf79210024a69f994bf2cf0728198c047f8130c5318420ea56281b0a4ef84c8ae943cd9a0cac705220
+  checksum: 10c0/88d7c6daa4659f661d0c97985d9fca492f24b421a34bb614dcd94c343aed7bea121463149e97fb01ecaa693be17b7d1542cf71ddb1705f3889a81eb2639a88aa
   languageName: node
   linkType: hard
 
@@ -6685,25 +6659,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16":
-  version: 18.2.45
-  resolution: "@types/react@npm:18.2.45"
+"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.2.46":
+  version: 18.2.55
+  resolution: "@types/react@npm:18.2.55"
   dependencies:
     "@types/prop-types": "npm:*"
     "@types/scheduler": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/4cc650c47ffb88baac29fb7a74e842e4af4a55f437086ef70250fdc75f0a5f2fcf8adc272d05ab2e00b1de6e14613296881271caee037dadf9130fdeb498c59e
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^18.2.46":
-  version: 18.2.46
-  resolution: "@types/react@npm:18.2.46"
-  dependencies:
-    "@types/prop-types": "npm:*"
-    "@types/scheduler": "npm:*"
-    csstype: "npm:^3.0.2"
-  checksum: 10c0/814cc67107e5e69501d65bfc371cc2c716665d2a3608d395a2f81e24c3a2875db28e2cad717dfb17017eabcffd1d68ee2c9e09ecaba3f7108d5b7fbb9888ebab
+  checksum: 10c0/6b1c73beafbbc582dc54ffd92b3779f6d850e8f6b5ce5d04b31e9498a3d77bfc416bb08f0d8d63ab4f4649ccd6639996472416871c01c74a528b16a55faeaf38
   languageName: node
   linkType: hard
 
@@ -6734,11 +6697,11 @@ __metadata:
   linkType: hard
 
 "@types/sass@npm:^1.16.0":
-  version: 1.45.0
-  resolution: "@types/sass@npm:1.45.0"
+  version: 1.43.1
+  resolution: "@types/sass@npm:1.43.1"
   dependencies:
-    sass: "npm:*"
-  checksum: 10c0/e2628516d16f9232226a693ff5e512ef64445df3b675a17b84c7af865f68a1c1156b5d0e2b6b9341c571348f719b705ac8a622caa304ea5700755cb7019a0071
+    "@types/node": "npm:*"
+  checksum: 10c0/cb55602b2f7a356d784e8ad1f432246daf4cb1fe75ef27ede997d41bdee0b08814435966471909762043d5169e009fab4a3b14db98e782103081b2da64497304
   languageName: node
   linkType: hard
 
@@ -6750,9 +6713,9 @@ __metadata:
   linkType: hard
 
 "@types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4, @types/semver@npm:^7.5.0":
-  version: 7.5.6
-  resolution: "@types/semver@npm:7.5.6"
-  checksum: 10c0/196dc32db5f68cbcde2e6a42bb4aa5cbb100fa2b7bd9c8c82faaaf3e03fbe063e205dbb4f03c7cdf53da2edb70a0d34c9f2e601b54281b377eb8dc1743226acd
+  version: 7.5.7
+  resolution: "@types/semver@npm:7.5.7"
+  checksum: 10c0/fb72d8b86a7779650f14ae89542f1da2ab624adb8188d98754b1d29a2fe3d41f0348bf9435b60ad145df1812fd2a09b3256779aa23b532c199f3dee59619a1eb
   languageName: node
   linkType: hard
 
@@ -6839,9 +6802,9 @@ __metadata:
   linkType: hard
 
 "@types/uuid@npm:^9.0.1":
-  version: 9.0.7
-  resolution: "@types/uuid@npm:9.0.7"
-  checksum: 10c0/b329ebd4f9d1d8e08d4f2cc211be4922d70d1149f73d5772630e4a3acfb5170c6d37b3d7a39a0412f1a56e86e8a844c7f297c798b082f90380608bf766688787
+  version: 9.0.8
+  resolution: "@types/uuid@npm:9.0.8"
+  checksum: 10c0/b411b93054cb1d4361919579ef3508a1f12bf15b5fdd97337d3d351bece6c921b52b6daeef89b62340fd73fd60da407878432a1af777f40648cbe53a01723489
   languageName: node
   linkType: hard
 
@@ -6880,14 +6843,14 @@ __metadata:
   linkType: hard
 
 "@typescript-eslint/eslint-plugin@npm:^6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:6.15.0"
+  version: 6.21.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:6.21.0"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.5.1"
-    "@typescript-eslint/scope-manager": "npm:6.15.0"
-    "@typescript-eslint/type-utils": "npm:6.15.0"
-    "@typescript-eslint/utils": "npm:6.15.0"
-    "@typescript-eslint/visitor-keys": "npm:6.15.0"
+    "@typescript-eslint/scope-manager": "npm:6.21.0"
+    "@typescript-eslint/type-utils": "npm:6.21.0"
+    "@typescript-eslint/utils": "npm:6.21.0"
+    "@typescript-eslint/visitor-keys": "npm:6.21.0"
     debug: "npm:^4.3.4"
     graphemer: "npm:^1.4.0"
     ignore: "npm:^5.2.4"
@@ -6900,25 +6863,25 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/78054afb0d4ab12d82db7a9cb005dfa2be42962341728abf4a81802e1f4c0f5b23de4870287f4b7e32aa4a4bc900bbc218f2d4d0c02aa77452e8e8e0b71fe3de
+  checksum: 10c0/f911a79ee64d642f814a3b6cdb0d324b5f45d9ef955c5033e78903f626b7239b4aa773e464a38c3e667519066169d983538f2bf8e5d00228af587c9d438fb344
   languageName: node
   linkType: hard
 
 "@typescript-eslint/parser@npm:^6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/parser@npm:6.15.0"
+  version: 6.21.0
+  resolution: "@typescript-eslint/parser@npm:6.21.0"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:6.15.0"
-    "@typescript-eslint/types": "npm:6.15.0"
-    "@typescript-eslint/typescript-estree": "npm:6.15.0"
-    "@typescript-eslint/visitor-keys": "npm:6.15.0"
+    "@typescript-eslint/scope-manager": "npm:6.21.0"
+    "@typescript-eslint/types": "npm:6.21.0"
+    "@typescript-eslint/typescript-estree": "npm:6.21.0"
+    "@typescript-eslint/visitor-keys": "npm:6.21.0"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/e7f265fd4abd3bc49fa5b304cd4b9c22801ac5a9da4ee342bbab0c117d629ac4aad6998555b61a8c5a0b279c443a44ae99f16669e24e3ef17ccec20c8b7019e7
+  checksum: 10c0/a8f99820679decd0d115c0af61903fb1de3b1b5bec412dc72b67670bf636de77ab07f2a68ee65d6da7976039bbf636907f9d5ca546db3f0b98a31ffbc225bc7d
   languageName: node
   linkType: hard
 
@@ -6932,22 +6895,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/scope-manager@npm:6.15.0"
+"@typescript-eslint/scope-manager@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/scope-manager@npm:6.21.0"
   dependencies:
-    "@typescript-eslint/types": "npm:6.15.0"
-    "@typescript-eslint/visitor-keys": "npm:6.15.0"
-  checksum: 10c0/3428d99de440f227cbc2afb44cdcb25e44c4b49c5f490392f83e21d2048210a6ec2f2f68133376c842034f5b5ba4ec9721da7caa18e631e23b57e20927b5b6f0
+    "@typescript-eslint/types": "npm:6.21.0"
+    "@typescript-eslint/visitor-keys": "npm:6.21.0"
+  checksum: 10c0/eaf868938d811cbbea33e97e44ba7050d2b6892202cea6a9622c486b85ab1cf801979edf78036179a8ba4ac26f1dfdf7fcc83a68c1ff66be0b3a8e9a9989b526
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/type-utils@npm:6.15.0"
+"@typescript-eslint/type-utils@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/type-utils@npm:6.21.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": "npm:6.15.0"
-    "@typescript-eslint/utils": "npm:6.15.0"
+    "@typescript-eslint/typescript-estree": "npm:6.21.0"
+    "@typescript-eslint/utils": "npm:6.21.0"
     debug: "npm:^4.3.4"
     ts-api-utils: "npm:^1.0.1"
   peerDependencies:
@@ -6955,7 +6918,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/32cb531a4b5e0ccd431cba553ec73b87d4453b48af288a33e359ba4f5278126390d82799b61d3f0fbf135cfde1ac6c2275c2cf37a676e8a2a2811e774e660f16
+  checksum: 10c0/7409c97d1c4a4386b488962739c4f1b5b04dc60cf51f8cd88e6b12541f84d84c6b8b67e491a147a2c95f9ec486539bf4519fb9d418411aef6537b9c156468117
   languageName: node
   linkType: hard
 
@@ -6966,10 +6929,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/types@npm:6.15.0"
-  checksum: 10c0/6e33529ea301c8c4b8c1f589dadd5d2a66c1b24ec87a577524fbc996d4c7b65d4f4fdfa4a3937b691efee6a10a6b16f7bfcabe98a15e0fc0c0c57aa0d80dcc25
+"@typescript-eslint/types@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/types@npm:6.21.0"
+  checksum: 10c0/020631d3223bbcff8a0da3efbdf058220a8f48a3de221563996ad1dcc30d6c08dadc3f7608cc08830d21c0d565efd2db19b557b9528921c78aabb605eef2d74d
   languageName: node
   linkType: hard
 
@@ -6991,38 +6954,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/typescript-estree@npm:6.15.0"
+"@typescript-eslint/typescript-estree@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/typescript-estree@npm:6.21.0"
   dependencies:
-    "@typescript-eslint/types": "npm:6.15.0"
-    "@typescript-eslint/visitor-keys": "npm:6.15.0"
+    "@typescript-eslint/types": "npm:6.21.0"
+    "@typescript-eslint/visitor-keys": "npm:6.21.0"
     debug: "npm:^4.3.4"
     globby: "npm:^11.1.0"
     is-glob: "npm:^4.0.3"
+    minimatch: "npm:9.0.3"
     semver: "npm:^7.5.4"
     ts-api-utils: "npm:^1.0.1"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/08955f6e84b8edb855a6769671e85889e52b15b82e00a64f595da867b21ad060e5342787c436d77702b2a1f39d411ac79b81a8d2e2006e9b1886eadb08b626df
+  checksum: 10c0/af1438c60f080045ebb330155a8c9bb90db345d5069cdd5d01b67de502abb7449d6c75500519df829f913a6b3f490ade3e8215279b6bdc63d0fb0ae61034df5f
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/utils@npm:6.15.0"
+"@typescript-eslint/utils@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/utils@npm:6.21.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.4.0"
     "@types/json-schema": "npm:^7.0.12"
     "@types/semver": "npm:^7.5.0"
-    "@typescript-eslint/scope-manager": "npm:6.15.0"
-    "@typescript-eslint/types": "npm:6.15.0"
-    "@typescript-eslint/typescript-estree": "npm:6.15.0"
+    "@typescript-eslint/scope-manager": "npm:6.21.0"
+    "@typescript-eslint/types": "npm:6.21.0"
+    "@typescript-eslint/typescript-estree": "npm:6.21.0"
     semver: "npm:^7.5.4"
   peerDependencies:
     eslint: ^7.0.0 || ^8.0.0
-  checksum: 10c0/53519a2027681bdc8f028f9421c65f193f91b5bb1659465fedb8043376c693c2391211f1c01d8ba25bfaa7f7b3a102263d7123f9dfade12032159f4b4490f0fb
+  checksum: 10c0/ab2df3833b2582d4e5467a484d08942b4f2f7208f8e09d67de510008eb8001a9b7460f2f9ba11c12086fd3cdcac0c626761c7995c2c6b5657d5fa6b82030a32d
   languageName: node
   linkType: hard
 
@@ -7054,13 +7018,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/visitor-keys@npm:6.15.0"
+"@typescript-eslint/visitor-keys@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/visitor-keys@npm:6.21.0"
   dependencies:
-    "@typescript-eslint/types": "npm:6.15.0"
+    "@typescript-eslint/types": "npm:6.21.0"
     eslint-visitor-keys: "npm:^3.4.1"
-  checksum: 10c0/bf9f71af60bd63d1073900e75c5a0aa6eddd672f6c3ac6092c765d67deb7a0c32d2a5f6f3aee9e95f93a93d58563a76da209bd8487aadafd4d013100ffe38520
+  checksum: 10c0/7395f69739cfa1cb83c1fb2fad30afa2a814756367302fb4facd5893eff66abc807e8d8f63eba94ed3b0fe0c1c996ac9a1680bcbf0f83717acedc3f2bb724fbf
   languageName: node
   linkType: hard
 
@@ -7389,7 +7353,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.1.0, acorn@npm:^8.8.1":
+"acorn@npm:^8.1.0, acorn@npm:^8.11.3, acorn@npm:^8.7.1, acorn@npm:^8.8.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
   version: 8.11.3
   resolution: "acorn@npm:8.11.3"
   bin:
@@ -7398,15 +7362,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.11.2, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
-  version: 8.11.2
-  resolution: "acorn@npm:8.11.2"
-  bin:
-    acorn: bin/acorn
-  checksum: 10c0/a3ed76c761b75ec54b1ec3068fb7f113a182e95aea7f322f65098c2958d232e3d211cb6dac35ff9c647024b63714bc528a26d54a925d1fef2c25585b4c8e4017
-  languageName: node
-  linkType: hard
-
 "add-stream@npm:^1.0.0":
   version: 1.0.0
   resolution: "add-stream@npm:1.0.0"
@@ -7719,13 +7674,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-buffer-byte-length@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "array-buffer-byte-length@npm:1.0.0"
+"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "array-buffer-byte-length@npm:1.0.1"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    is-array-buffer: "npm:^3.0.1"
-  checksum: 10c0/12f84f6418b57a954caa41654e5e63e019142a4bbb2c6829ba86d1ba65d31ccfaf1461d1743556fd32b091fac34ff44d9dfbdb001402361c45c373b2c86f5c20
+    call-bind: "npm:^1.0.5"
+    is-array-buffer: "npm:^3.0.4"
+  checksum: 10c0/f5cdf54527cd18a3d2852ddf73df79efec03829e7373a8322ef5df2b4ef546fb365c19c71d6b42d641cb6bfe0f1a2f19bc0ece5b533295f86d7c3d522f228917
   languageName: node
   linkType: hard
 
@@ -7770,16 +7725,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.findlastindex@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "array.prototype.findlastindex@npm:1.2.3"
+"array.prototype.filter@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "array.prototype.filter@npm:1.0.3"
   dependencies:
     call-bind: "npm:^1.0.2"
     define-properties: "npm:^1.2.0"
     es-abstract: "npm:^1.22.1"
-    es-shim-unscopables: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.2.1"
-  checksum: 10c0/2c5c4d3f07512d6729f728f6260a314c00f2eb0a243123092661fa1bc65dce90234c3b483b5f978396eccef6f69c50f0bea248448aaf9cdfcd1cedad6217acbb
+    es-array-method-boxes-properly: "npm:^1.0.0"
+    is-string: "npm:^1.0.7"
+  checksum: 10c0/8b70b5f866df5d90fa27aa5bfa30f5fefc44cbea94b0513699d761713658077c2a24cbf06aac5179eabddb6c93adc467af4c288b7a839c5bc5a769ee5a2d48ad
+  languageName: node
+  linkType: hard
+
+"array.prototype.findlastindex@npm:^1.2.3":
+  version: 1.2.4
+  resolution: "array.prototype.findlastindex@npm:1.2.4"
+  dependencies:
+    call-bind: "npm:^1.0.5"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.22.3"
+    es-errors: "npm:^1.3.0"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10c0/b23ae35cf7621c82c20981ee110626090734a264798e781b052e534e3d61d576f03d125d92cf2e3672062bb5cc5907e02e69f2d80196a55f3cdb0197b4aa8c64
   languageName: node
   linkType: hard
 
@@ -7808,30 +7776,31 @@ __metadata:
   linkType: hard
 
 "array.prototype.tosorted@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "array.prototype.tosorted@npm:1.1.2"
+  version: 1.1.3
+  resolution: "array.prototype.tosorted@npm:1.1.3"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    es-shim-unscopables: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.2.1"
-  checksum: 10c0/aa222a0f78e9cdb4ea4d788a11f0acc2b17c2226f0912917e1c89e0f0c4dcdd14414ac88afffbd03025f33501f2649907cfb80664e48aa2af3430c1fb1b0b416
+    call-bind: "npm:^1.0.5"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.22.3"
+    es-errors: "npm:^1.1.0"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10c0/a27e1ca51168ecacf6042901f5ef021e43c8fa04b6c6b6f2a30bac3645cd2b519cecbe0bc45db1b85b843f64dc3207f0268f700b4b9fbdec076d12d432cf0865
   languageName: node
   linkType: hard
 
-"arraybuffer.prototype.slice@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "arraybuffer.prototype.slice@npm:1.0.2"
+"arraybuffer.prototype.slice@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "arraybuffer.prototype.slice@npm:1.0.3"
   dependencies:
-    array-buffer-byte-length: "npm:^1.0.0"
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    get-intrinsic: "npm:^1.2.1"
-    is-array-buffer: "npm:^3.0.2"
+    array-buffer-byte-length: "npm:^1.0.1"
+    call-bind: "npm:^1.0.5"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.22.3"
+    es-errors: "npm:^1.2.1"
+    get-intrinsic: "npm:^1.2.3"
+    is-array-buffer: "npm:^3.0.4"
     is-shared-array-buffer: "npm:^1.0.2"
-  checksum: 10c0/96b6e40e439678ffb7fa266398510074d33c3980fbb475490b69980cca60adec3b0777047ef377068a29862157f83edef42efc64ce48ce38977d04d68de5b7fb
+  checksum: 10c0/d32754045bcb2294ade881d45140a5e52bda2321b9e98fa514797b7f0d252c4c5ab0d1edb34112652c62fa6a9398def568da63a4d7544672229afea283358c36
   languageName: node
   linkType: hard
 
@@ -7939,12 +7908,12 @@ __metadata:
   linkType: hard
 
 "autoprefixer@npm:^10.4.16":
-  version: 10.4.16
-  resolution: "autoprefixer@npm:10.4.16"
+  version: 10.4.17
+  resolution: "autoprefixer@npm:10.4.17"
   dependencies:
-    browserslist: "npm:^4.21.10"
-    caniuse-lite: "npm:^1.0.30001538"
-    fraction.js: "npm:^4.3.6"
+    browserslist: "npm:^4.22.2"
+    caniuse-lite: "npm:^1.0.30001578"
+    fraction.js: "npm:^4.3.7"
     normalize-range: "npm:^0.1.2"
     picocolors: "npm:^1.0.0"
     postcss-value-parser: "npm:^4.2.0"
@@ -7952,7 +7921,7 @@ __metadata:
     postcss: ^8.1.0
   bin:
     autoprefixer: bin/autoprefixer
-  checksum: 10c0/e00256e754d481a026d928bca729b25954074dd142dbec022f0a7db0d3bbc0dc2e2dc7542e94fec22eff81e21fe140e6856448e2d9a002660cb1e2ad434daee0
+  checksum: 10c0/1d21cc8edb7bf993682094ceed03a32c18f5293f071182a64c2c6defb44bbe91d576ad775d2347469a81997b80cea0bbc4ad3eeb5b12710f9feacf2e6c04bb51
   languageName: node
   linkType: hard
 
@@ -7973,10 +7942,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"available-typed-arrays@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "available-typed-arrays@npm:1.0.5"
-  checksum: 10c0/c4df567ca72d2754a6cbad20088f5f98b1065b3360178169fa9b44ea101af62c0f423fc3854fa820fd6895b6b9171b8386e71558203103ff8fc2ad503fdcc660
+"available-typed-arrays@npm:^1.0.5, available-typed-arrays@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "available-typed-arrays@npm:1.0.6"
+  checksum: 10c0/e427360e68ccb19fa0ea48421f393ef3f3d2c9c561f6a8a0704ff472d58024be3e4101f00565445ba453de723a76f4a650defbacaea663c3fb3be8b8f842e955
   languageName: node
   linkType: hard
 
@@ -7987,28 +7956,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axe-core@npm:^4.2.0":
-  version: 4.8.3
-  resolution: "axe-core@npm:4.8.3"
-  checksum: 10c0/762392d03e49b5613e0d58c19bfe0bb0df253a56d6296b07d6d968729acef4ad25822e560f067c563368ac52a62c48cb341e6940b58252ca573334cd74cf8622
-  languageName: node
-  linkType: hard
-
-"axe-core@npm:^4.8.4":
+"axe-core@npm:^4.2.0, axe-core@npm:^4.8.4":
   version: 4.8.4
   resolution: "axe-core@npm:4.8.4"
   checksum: 10c0/1100ac42c4b8cde1fb7c428d2b76e5a14e20d9d41fe635c55048e4ba27f1eded729b838379a036b5ef9cf25ba7f7bedeef01ebd3b4accd2afee397b10b0265c4
   languageName: node
   linkType: hard
 
-"axios@npm:^1.5.1, axios@npm:^1.6.1":
-  version: 1.6.2
-  resolution: "axios@npm:1.6.2"
+"axios@npm:^1.6.0, axios@npm:^1.6.1":
+  version: 1.6.7
+  resolution: "axios@npm:1.6.7"
   dependencies:
-    follow-redirects: "npm:^1.15.0"
+    follow-redirects: "npm:^1.15.4"
     form-data: "npm:^4.0.0"
     proxy-from-env: "npm:^1.1.0"
-  checksum: 10c0/9b77e030e85e4f9cbcba7bb52fbff67d6ce906c92d213e0bd932346a50140faf83733bf786f55bd58301bd92f9973885c7b87d6348023e10f7eaf286d0791a1d
+  checksum: 10c0/131bf8e62eee48ca4bd84e6101f211961bf6a21a33b95e5dfb3983d5a2fe50d9fffde0b57668d7ce6f65063d3dc10f2212cbcb554f75cfca99da1c73b210358d
   languageName: node
   linkType: hard
 
@@ -8126,39 +8088,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.6":
-  version: 0.4.7
-  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.7"
+"babel-plugin-polyfill-corejs2@npm:^0.4.8":
+  version: 0.4.8
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.8"
   dependencies:
     "@babel/compat-data": "npm:^7.22.6"
-    "@babel/helper-define-polyfill-provider": "npm:^0.4.4"
+    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/f80f7284ec72c63e7dd751e0bdf25e9978df195a79e0887470603bfdea13ee518d62573cf360bb1bc01b80819e54915dd5edce9cff14c52d0af5f984aa3d36a3
+  checksum: 10c0/843e7528de0e03a31a6f3837896a95f75b0b24b0294a077246282372279e974400b0bdd82399e8f9cbfe42c87ed56540fd71c33eafb7c8e8b9adac546ecc5fe5
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.8.5":
-  version: 0.8.7
-  resolution: "babel-plugin-polyfill-corejs3@npm:0.8.7"
+"babel-plugin-polyfill-corejs3@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.4.4"
-    core-js-compat: "npm:^3.33.1"
+    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
+    core-js-compat: "npm:^3.34.0"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/094e40f4ab9f131408202063964d63740609fd4fdb70a5b6332b371761921b540ffbcee7a434c0199b8317dfb2ba4675eef674867215fd3b85e24054607c1501
+  checksum: 10c0/b857010736c5e42e20b683973dae862448a42082fcc95b3ef188305a6864a4f94b5cbd568e49e4cd7172c6b2eace7bc403c3ba0984fbe5479474ade01126d559
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-regenerator@npm:^0.5.3":
-  version: 0.5.4
-  resolution: "babel-plugin-polyfill-regenerator@npm:0.5.4"
+"babel-plugin-polyfill-regenerator@npm:^0.5.5":
+  version: 0.5.5
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.4.4"
+    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/0b903f5fe2f8c487b4260935dfe60bd9a95bcaee7ae63958f063045093b16d4e8288c232199d411261300aa21f6b106a3cb83c42cc996de013b337f5825a79fe
+  checksum: 10c0/2aab692582082d54e0df9f9373dca1b223e65b4e7e96440160f27ed8803d417a1fa08da550f08aa3820d2010329ca91b68e2b6e9bd7aed51c93d46dfe79629bb
   languageName: node
   linkType: hard
 
@@ -8412,17 +8374,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.12.0, browserslist@npm:^4.14.5, browserslist@npm:^4.21.10, browserslist@npm:^4.22.2":
-  version: 4.22.2
-  resolution: "browserslist@npm:4.22.2"
+"browserslist@npm:^4.12.0, browserslist@npm:^4.21.10, browserslist@npm:^4.22.2, browserslist@npm:^4.22.3":
+  version: 4.23.0
+  resolution: "browserslist@npm:4.23.0"
   dependencies:
-    caniuse-lite: "npm:^1.0.30001565"
-    electron-to-chromium: "npm:^1.4.601"
+    caniuse-lite: "npm:^1.0.30001587"
+    electron-to-chromium: "npm:^1.4.668"
     node-releases: "npm:^2.0.14"
     update-browserslist-db: "npm:^1.0.13"
   bin:
     browserslist: cli.js
-  checksum: 10c0/2a331aab90503130043ca41dd5d281fa1e89d5e076d07a2d75e76bf4d693bd56e73d5abcd8c4f39119da6328d450578c216cf1cd5c99b82d8a90a2ae6271b465
+  checksum: 10c0/8e9cc154529062128d02a7af4d8adeead83ca1df8cd9ee65a88e2161039f3d68a4d40fea7353cab6bae4c16182dec2fdd9a1cf7dc2a2935498cee1af0e998943
   languageName: node
   linkType: hard
 
@@ -8484,15 +8446,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bundle-name@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "bundle-name@npm:3.0.0"
-  dependencies:
-    run-applescript: "npm:^5.0.0"
-  checksum: 10c0/57bc7f8b025d83961b04db2f1eff6a87f2363c2891f3542a4b82471ff8ebb5d484af48e9784fcdb28ef1d48bb01f03d891966dc3ef58758e46ea32d750ce40f8
-  languageName: node
-  linkType: hard
-
 "byte-size@npm:8.1.1":
   version: 8.1.1
   resolution: "byte-size@npm:8.1.1"
@@ -8535,8 +8488,8 @@ __metadata:
   linkType: hard
 
 "cacache@npm:^18.0.0":
-  version: 18.0.1
-  resolution: "cacache@npm:18.0.1"
+  version: 18.0.2
+  resolution: "cacache@npm:18.0.2"
   dependencies:
     "@npmcli/fs": "npm:^3.1.0"
     fs-minipass: "npm:^3.0.0"
@@ -8550,7 +8503,7 @@ __metadata:
     ssri: "npm:^10.0.0"
     tar: "npm:^6.1.11"
     unique-filename: "npm:^3.0.0"
-  checksum: 10c0/a31666805a80a8b16ad3f85faf66750275a9175a3480896f4f6d31b5d53ef190484fabd71bdb6d2ea5603c717fbef09f4af03d6a65b525c8ef0afaa44c361866
+  checksum: 10c0/7992665305cc251a984f4fdbab1449d50e88c635bc43bf2785530c61d239c61b349e5734461baa461caaee65f040ab14e2d58e694f479c0810cffd181ba5eabc
   languageName: node
   linkType: hard
 
@@ -8588,14 +8541,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind@npm:^1.0.0, call-bind@npm:^1.0.2, call-bind@npm:^1.0.4, call-bind@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "call-bind@npm:1.0.5"
+"call-bind@npm:^1.0.0, call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.6, call-bind@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "call-bind@npm:1.0.7"
   dependencies:
+    es-define-property: "npm:^1.0.0"
+    es-errors: "npm:^1.3.0"
     function-bind: "npm:^1.1.2"
-    get-intrinsic: "npm:^1.2.1"
-    set-function-length: "npm:^1.1.1"
-  checksum: 10c0/a6172c168fd6dacf744fcde745099218056bd755c50415b592655dcd6562157ed29f130f56c3f6db2250f67e4bd62e5c218cdc56d7bfd76e0bda50770fce2d10
+    get-intrinsic: "npm:^1.2.4"
+    set-function-length: "npm:^1.2.1"
+  checksum: 10c0/a3ded2e423b8e2a265983dba81c27e125b48eefb2655e7dfab6be597088da3d47c47976c24bc51b8fd9af1061f8f87b4ab78a314f3c77784b2ae2ba535ad8b8d
   languageName: node
   linkType: hard
 
@@ -8650,17 +8605,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001109":
-  version: 1.0.30001572
-  resolution: "caniuse-lite@npm:1.0.30001572"
-  checksum: 10c0/7d02570fa576b158d96739f2c65ea3ad22e90a8b028a343902de1f13b7db8512144870f1d29ec5e9ae7189d96158d9643871b6e902e6680a06b27a9afe556da2
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001518, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565":
-  version: 1.0.30001570
-  resolution: "caniuse-lite@npm:1.0.30001570"
-  checksum: 10c0/e47230d2016edea56e002fa462a5289f697b48dcfbf703fb01aecc6c98ad4ecaf945ab23c253cb7af056c2d05f266e4e4cbebf45132100e2c9367439cb95b95b
+"caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001518, caniuse-lite@npm:^1.0.30001578, caniuse-lite@npm:^1.0.30001587":
+  version: 1.0.30001587
+  resolution: "caniuse-lite@npm:1.0.30001587"
+  checksum: 10c0/c7a34cb758a24fa1d948e164de3c5873e7e607b46db0e530ba160a281cb619c9d6a1b85bb334894bc8e629a59db99f3de4521593b08142d317a529e80a856385
   languageName: node
   linkType: hard
 
@@ -8799,7 +8747,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:3.5.3, chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.3.1, chokidar@npm:^3.5.3":
+"chokidar@npm:3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -8818,6 +8766,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.3.1, chokidar@npm:^3.5.3":
+  version: 3.6.0
+  resolution: "chokidar@npm:3.6.0"
+  dependencies:
+    anymatch: "npm:~3.1.2"
+    braces: "npm:~3.0.2"
+    fsevents: "npm:~2.3.2"
+    glob-parent: "npm:~5.1.2"
+    is-binary-path: "npm:~2.1.0"
+    is-glob: "npm:~4.0.1"
+    normalize-path: "npm:~3.0.0"
+    readdirp: "npm:~3.6.0"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: 10c0/8361dcd013f2ddbe260eacb1f3cb2f2c6f2b0ad118708a343a5ed8158941a39cb8fb1d272e0f389712e74ee90ce8ba864eece9e0e62b9705cb468a2f6d917462
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^1.1.1":
   version: 1.1.4
   resolution: "chownr@npm:1.1.4"
@@ -8833,13 +8800,21 @@ __metadata:
   linkType: hard
 
 "chromatic@npm:^10.1.0":
-  version: 10.1.0
-  resolution: "chromatic@npm:10.1.0"
+  version: 10.9.5
+  resolution: "chromatic@npm:10.9.5"
+  peerDependencies:
+    "@chromatic-com/cypress": ^0.5.2 || ^1.0.0
+    "@chromatic-com/playwright": ^0.5.2 || ^1.0.0
+  peerDependenciesMeta:
+    "@chromatic-com/cypress":
+      optional: true
+    "@chromatic-com/playwright":
+      optional: true
   bin:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10c0/adee72f7db2df504e5ee82588c4edd5b97d38e7ff9f70819b564b2482b6419601a1bd156f10437a59ee9ce0b6f27fa5ef42624ef8883354ffa9434c8583e8acd
+  checksum: 10c0/5936e3d9a80073f3a380d450b4982705d81443ea0344706ee670a056dd78a7a4093c9224e18f068db1e6dcc3a7bf7b649b5d1770f73521cfcff22cae66e7c55c
   languageName: node
   linkType: hard
 
@@ -8864,6 +8839,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ci-info@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "ci-info@npm:4.0.0"
+  checksum: 10c0/ecc003e5b60580bd081d83dd61d398ddb8607537f916313e40af4667f9c92a1243bd8e8a591a5aa78e418afec245dbe8e90a0e26e39ca0825129a99b978dd3f9
+  languageName: node
+  linkType: hard
+
+"citty@npm:^0.1.5":
+  version: 0.1.6
+  resolution: "citty@npm:0.1.6"
+  dependencies:
+    consola: "npm:^3.2.3"
+  checksum: 10c0/d26ad82a9a4a8858c7e149d90b878a3eceecd4cfd3e2ed3cd5f9a06212e451fb4f8cbe0fa39a3acb1b3e8f18e22db8ee5def5829384bad50e823d4b301609b48
+  languageName: node
+  linkType: hard
+
 "cjs-module-lexer@npm:^1.0.0, cjs-module-lexer@npm:^1.2.3":
   version: 1.2.3
   resolution: "cjs-module-lexer@npm:1.2.3"
@@ -9025,10 +9016,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "clsx@npm:2.0.0"
-  checksum: 10c0/c09f43b3144a0b7826b6b11b6a111b2c7440831004eecc02d333533c5e58ef0aa5f2dce071d3b25fbb8c8ea97b45df96c74bcc1d51c8c2027eb981931107b0cd
+"clsx@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "clsx@npm:2.1.0"
+  checksum: 10c0/c09c00ad14f638366ca814097e6cab533dfa1972a358da5b557be487168acbb25b4c1395e89ffa842a8a61ba87a462d2b4885bc9d4f8410b598f3cb339599cdb
   languageName: node
   linkType: hard
 
@@ -9384,6 +9375,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"consola@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "consola@npm:3.2.3"
+  checksum: 10c0/c606220524ec88a05bb1baf557e9e0e04a0c08a9c35d7a08652d99de195c4ddcb6572040a7df57a18ff38bbc13ce9880ad032d56630cef27bef72768ef0ac078
+  languageName: node
+  linkType: hard
+
 "console-control-strings@npm:^1.1.0":
   version: 1.1.0
   resolution: "console-control-strings@npm:1.1.0"
@@ -9553,19 +9551,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.33.1":
-  version: 3.34.0
-  resolution: "core-js-compat@npm:3.34.0"
+"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0":
+  version: 3.36.0
+  resolution: "core-js-compat@npm:3.36.0"
   dependencies:
-    browserslist: "npm:^4.22.2"
-  checksum: 10c0/d2a46d977aa331df9e9d7372f309841403d6f158dbcf5bf7e358ea547bd5ccc93f9447e93d66b74eb4b19c647874e794511238c40cee495716a5f8a74a605ac1
+    browserslist: "npm:^4.22.3"
+  checksum: 10c0/5ce2ad0ece8379883c01958e196575abc015692fc0394b8917f132b6b32e5c2bfb2612902c3f98f270cfa2d9d6522c28d36665038f3726796f1f4b436e4f863e
   languageName: node
   linkType: hard
 
 "core-js-pure@npm:^3.23.3":
-  version: 3.34.0
-  resolution: "core-js-pure@npm:3.34.0"
-  checksum: 10c0/64b628ffa0f9166b327cb7f490b59faa04b3ae72f314c5198c74087fcac5d62c78e7a0b0132e8bbf191d844fc59c3a8ef558e8fea7c1f78f4ad768f43cab2b9f
+  version: 3.36.0
+  resolution: "core-js-pure@npm:3.36.0"
+  checksum: 10c0/1c5ecb37451bcebaa449e36285d27c4c79d5ff24b8bfd44491ce661cfc12b5c56471c847d306d21a56894338d00abea4993a6f8e07c71d4e887d1f71e410d22e
   languageName: node
   linkType: hard
 
@@ -9584,9 +9582,9 @@ __metadata:
   linkType: hard
 
 "core-js@npm:^3.29.1":
-  version: 3.34.0
-  resolution: "core-js@npm:3.34.0"
-  checksum: 10c0/408a77898abe03bf3e5dec2a451c36f4745081cca9022f8bdf9b817d57bb6d3a534d555f47a4b95e1daa5e21dbc79122eac2402e25720d425f5925127e55dcd8
+  version: 3.36.0
+  resolution: "core-js@npm:3.36.0"
+  checksum: 10c0/62dcb41ba79ead581e4c5b2740ae18bfe6ee230e853893736d16edb01b580574d8645ff6c5513d1c75d59620f8451aee45c119d3c4f5ebc66cff5f003a816864
   languageName: node
   linkType: hard
 
@@ -9778,7 +9776,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-loader@npm:^6.10.0":
+"css-loader@npm:^6.10.0, css-loader@npm:^6.7.1":
   version: 6.10.0
   resolution: "css-loader@npm:6.10.0"
   dependencies:
@@ -9802,24 +9800,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-loader@npm:^6.7.1":
-  version: 6.8.1
-  resolution: "css-loader@npm:6.8.1"
-  dependencies:
-    icss-utils: "npm:^5.1.0"
-    postcss: "npm:^8.4.21"
-    postcss-modules-extract-imports: "npm:^3.0.0"
-    postcss-modules-local-by-default: "npm:^4.0.3"
-    postcss-modules-scope: "npm:^3.0.0"
-    postcss-modules-values: "npm:^4.0.0"
-    postcss-value-parser: "npm:^4.2.0"
-    semver: "npm:^7.3.8"
-  peerDependencies:
-    webpack: ^5.0.0
-  checksum: 10c0/a6e23de4ec1d2832f10b8ca3cfec6b6097a97ca3c73f64338ae5cd110ac270f1b218ff0273d39f677a7a561f1a9d9b0d332274664d0991bcfafaae162c2669c4
-  languageName: node
-  linkType: hard
-
 "css-select@npm:^4.1.3":
   version: 4.3.0
   resolution: "css-select@npm:4.3.0"
@@ -9853,7 +9833,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^2.2.1, css-tree@npm:^2.3.1":
+"css-tree@npm:^2.3.1":
   version: 2.3.1
   resolution: "css-tree@npm:2.3.1"
   dependencies:
@@ -9896,7 +9876,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csso@npm:5.0.5":
+"csso@npm:^5.0.5":
   version: 5.0.5
   resolution: "csso@npm:5.0.5"
   dependencies:
@@ -9928,7 +9908,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.1.2":
+"csstype@npm:^3.0.2, csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
@@ -10184,7 +10164,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"default-browser-id@npm:3.0.0, default-browser-id@npm:^3.0.0":
+"default-browser-id@npm:3.0.0":
   version: 3.0.0
   resolution: "default-browser-id@npm:3.0.0"
   dependencies:
@@ -10194,18 +10174,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"default-browser@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "default-browser@npm:4.0.0"
-  dependencies:
-    bundle-name: "npm:^3.0.0"
-    default-browser-id: "npm:^3.0.0"
-    execa: "npm:^7.1.1"
-    titleize: "npm:^3.0.0"
-  checksum: 10c0/7c8848badc139ecf9d878e562bc4e7ab4301e51ba120b24d8dcb14739c30152115cc612065ac3ab73c02aace4afa29db5a044257b2f0cf234f16e3a58f6c925e
-  languageName: node
-  linkType: hard
-
 "default-require-extensions@npm:^3.0.0":
   version: 3.0.1
   resolution: "default-require-extensions@npm:3.0.1"
@@ -10231,14 +10199,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "define-data-property@npm:1.1.1"
+"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.2":
+  version: 1.1.4
+  resolution: "define-data-property@npm:1.1.4"
   dependencies:
-    get-intrinsic: "npm:^1.2.1"
+    es-define-property: "npm:^1.0.0"
+    es-errors: "npm:^1.3.0"
     gopd: "npm:^1.0.1"
-    has-property-descriptors: "npm:^1.0.0"
-  checksum: 10c0/77ef6e0bceb515e05b5913ab635a84d537cee84f8a7c37c77fdcb31fc5b80f6dbe81b33375e4b67d96aa04e6a0d8d4ea099e431d83f089af8d93adfb584bcb94
+  checksum: 10c0/dea0606d1483eb9db8d930d4eac62ca0fa16738b0b3e07046cddfacf7d8c868bbe13fa0cb263eb91c7d0d527960dc3f2f2471a69ed7816210307f6744fe62e37
   languageName: node
   linkType: hard
 
@@ -10249,13 +10217,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-lazy-prop@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "define-lazy-prop@npm:3.0.0"
-  checksum: 10c0/5ab0b2bf3fa58b3a443140bbd4cd3db1f91b985cc8a246d330b9ac3fc0b6a325a6d82bddc0b055123d745b3f9931afeea74a5ec545439a1630b9c8512b0eeb49
-  languageName: node
-  linkType: hard
-
 "define-properties@npm:^1.1.3, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
@@ -10267,10 +10228,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"defu@npm:^6.1.2":
-  version: 6.1.3
-  resolution: "defu@npm:6.1.3"
-  checksum: 10c0/60d0d9a6e328148d5313fe0239ba3777701291f35570b52562454653d953fec5281b084514540f8d3b60d61bad9e39b52e95b3c0451631ded220ad8fdc893455
+"defu@npm:^6.1.3":
+  version: 6.1.4
+  resolution: "defu@npm:6.1.4"
+  checksum: 10c0/2d6cc366262dc0cb8096e429368e44052fdf43ed48e53ad84cc7c9407f890301aa5fcb80d0995abaaf842b3949f154d060be4160f7a46cb2bc2f7726c81526f5
   languageName: node
   linkType: hard
 
@@ -10455,13 +10416,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-accessibility-api@npm:^0.5.6, dom-accessibility-api@npm:^0.5.9":
+"dom-accessibility-api@npm:^0.5.9":
   version: 0.5.16
   resolution: "dom-accessibility-api@npm:0.5.16"
   checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053
   languageName: node
   linkType: hard
 
+"dom-accessibility-api@npm:^0.6.3":
+  version: 0.6.3
+  resolution: "dom-accessibility-api@npm:0.6.3"
+  checksum: 10c0/10bee5aa514b2a9a37c87cd81268db607a2e933a050074abc2f6fa3da9080ebed206a320cbc123567f2c3087d22292853bdfdceaffdd4334ffe2af9510b29360
+  languageName: node
+  linkType: hard
+
 "dom-converter@npm:^0.2.0":
   version: 0.2.0
   resolution: "dom-converter@npm:0.2.0"
@@ -10621,10 +10589,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv@npm:^16.0.0, dotenv@npm:~16.3.1":
-  version: 16.3.1
-  resolution: "dotenv@npm:16.3.1"
-  checksum: 10c0/b95ff1bbe624ead85a3cd70dbd827e8e06d5f05f716f2d0cbc476532d54c7c9469c3bc4dd93ea519f6ad711cb522c00ac9a62b6eb340d5affae8008facc3fbd7
+"dotenv@npm:^16.0.0":
+  version: 16.4.4
+  resolution: "dotenv@npm:16.4.4"
+  checksum: 10c0/f66ad105144c9106a868c8e244ace6097a0318f63284894e6c7b298c7e096911958837117d936d3c341db550e2fcb21a7a5ad396437638f605460e82b1dd30ee
+  languageName: node
+  linkType: hard
+
+"dotenv@npm:~16.3.1":
+  version: 16.3.2
+  resolution: "dotenv@npm:16.3.2"
+  checksum: 10c0/a87d62cef0810b670cb477db1a24a42a093b6b428c9e65c185ce1d6368ad7175234b13547718ba08da18df43faae4f814180cc0366e11be1ded2277abc4dd22e
   languageName: node
   linkType: hard
 
@@ -10689,10 +10664,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.4.601":
-  version: 1.4.615
-  resolution: "electron-to-chromium@npm:1.4.615"
-  checksum: 10c0/6602172761e44ca1a6c010a010efd0c42710e1e08911e76dd2d3df72ae2a563fb75b0853387273d1e45a4befd314162b2b1debcf9055513f62c6d6a8df4de73a
+"electron-to-chromium@npm:^1.4.668":
+  version: 1.4.671
+  resolution: "electron-to-chromium@npm:1.4.671"
+  checksum: 10c0/97c100ce6de2b75de8d327e6ece4172ce4fba8faddcfd1acf359c950a5cfbf70e52af1b5fff2d0e21551a093543b451bb440ecdcfbf42c4aafe4eebe41505fe1
   languageName: node
   linkType: hard
 
@@ -10838,11 +10813,11 @@ __metadata:
   linkType: hard
 
 "envinfo@npm:^7.7.3":
-  version: 7.11.0
-  resolution: "envinfo@npm:7.11.0"
+  version: 7.11.1
+  resolution: "envinfo@npm:7.11.1"
   bin:
     envinfo: dist/cli.js
-  checksum: 10c0/4415b9c1ca32cdf92ce126136b9965eeac2efd6ab7e5278c06e8f86d048edad87ef4084710313a6d938ef9bc084ab17e1caee16339d731d230f3e2650f3aaf4d
+  checksum: 10c0/4550cce03d4d8a7b137d548faaf9c920356474231636cb4a6e74ae75db3b9cb04aa0a052ee391e2363af5db697166c207ba76e106338d758c6126830b3e16d75
   languageName: node
   linkType: hard
 
@@ -10871,50 +10846,75 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.22.1":
-  version: 1.22.3
-  resolution: "es-abstract@npm:1.22.3"
+"es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.22.4":
+  version: 1.22.4
+  resolution: "es-abstract@npm:1.22.4"
   dependencies:
-    array-buffer-byte-length: "npm:^1.0.0"
-    arraybuffer.prototype.slice: "npm:^1.0.2"
-    available-typed-arrays: "npm:^1.0.5"
-    call-bind: "npm:^1.0.5"
-    es-set-tostringtag: "npm:^2.0.1"
+    array-buffer-byte-length: "npm:^1.0.1"
+    arraybuffer.prototype.slice: "npm:^1.0.3"
+    available-typed-arrays: "npm:^1.0.6"
+    call-bind: "npm:^1.0.7"
+    es-define-property: "npm:^1.0.0"
+    es-errors: "npm:^1.3.0"
+    es-set-tostringtag: "npm:^2.0.2"
     es-to-primitive: "npm:^1.2.1"
     function.prototype.name: "npm:^1.1.6"
-    get-intrinsic: "npm:^1.2.2"
-    get-symbol-description: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.4"
+    get-symbol-description: "npm:^1.0.2"
     globalthis: "npm:^1.0.3"
     gopd: "npm:^1.0.1"
-    has-property-descriptors: "npm:^1.0.0"
+    has-property-descriptors: "npm:^1.0.2"
     has-proto: "npm:^1.0.1"
     has-symbols: "npm:^1.0.3"
-    hasown: "npm:^2.0.0"
-    internal-slot: "npm:^1.0.5"
-    is-array-buffer: "npm:^3.0.2"
+    hasown: "npm:^2.0.1"
+    internal-slot: "npm:^1.0.7"
+    is-array-buffer: "npm:^3.0.4"
     is-callable: "npm:^1.2.7"
     is-negative-zero: "npm:^2.0.2"
     is-regex: "npm:^1.1.4"
     is-shared-array-buffer: "npm:^1.0.2"
     is-string: "npm:^1.0.7"
-    is-typed-array: "npm:^1.1.12"
+    is-typed-array: "npm:^1.1.13"
     is-weakref: "npm:^1.0.2"
     object-inspect: "npm:^1.13.1"
     object-keys: "npm:^1.1.1"
-    object.assign: "npm:^4.1.4"
-    regexp.prototype.flags: "npm:^1.5.1"
-    safe-array-concat: "npm:^1.0.1"
-    safe-regex-test: "npm:^1.0.0"
+    object.assign: "npm:^4.1.5"
+    regexp.prototype.flags: "npm:^1.5.2"
+    safe-array-concat: "npm:^1.1.0"
+    safe-regex-test: "npm:^1.0.3"
     string.prototype.trim: "npm:^1.2.8"
     string.prototype.trimend: "npm:^1.0.7"
     string.prototype.trimstart: "npm:^1.0.7"
-    typed-array-buffer: "npm:^1.0.0"
+    typed-array-buffer: "npm:^1.0.1"
     typed-array-byte-length: "npm:^1.0.0"
     typed-array-byte-offset: "npm:^1.0.0"
     typed-array-length: "npm:^1.0.4"
     unbox-primitive: "npm:^1.0.2"
-    which-typed-array: "npm:^1.1.13"
-  checksum: 10c0/da31ec43b1c8eb47ba8a17693cac143682a1078b6c3cd883ce0e2062f135f532e93d873694ef439670e1f6ca03195118f43567ba6f33fb0d6c7daae750090236
+    which-typed-array: "npm:^1.1.14"
+  checksum: 10c0/dc332c3a010c5e7b77b7ea8a4532ac455fa02e7bcabf996a47447165bafa72d0d99967407d0cf5dbbb5fbbf87f53cd8b706608ec70953523b8cd2b831b9a9d64
+  languageName: node
+  linkType: hard
+
+"es-array-method-boxes-properly@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "es-array-method-boxes-properly@npm:1.0.0"
+  checksum: 10c0/4b7617d3fbd460d6f051f684ceca6cf7e88e6724671d9480388d3ecdd72119ddaa46ca31f2c69c5426a82e4b3091c1e81867c71dcdc453565cd90005ff2c382d
+  languageName: node
+  linkType: hard
+
+"es-define-property@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "es-define-property@npm:1.0.0"
+  dependencies:
+    get-intrinsic: "npm:^1.2.4"
+  checksum: 10c0/6bf3191feb7ea2ebda48b577f69bdfac7a2b3c9bcf97307f55fd6ef1bbca0b49f0c219a935aca506c993d8c5d8bddd937766cb760cd5e5a1071351f2df9f9aa4
+  languageName: node
+  linkType: hard
+
+"es-errors@npm:^1.0.0, es-errors@npm:^1.1.0, es-errors@npm:^1.2.1, es-errors@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "es-errors@npm:1.3.0"
+  checksum: 10c0/0a61325670072f98d8ae3b914edab3559b6caa980f08054a3b872052640d91da01d38df55df797fcc916389d77fc92b8d5906cf028f4db46d7e3003abecbca85
   languageName: node
   linkType: hard
 
@@ -10936,24 +10936,25 @@ __metadata:
   linkType: hard
 
 "es-iterator-helpers@npm:^1.0.12, es-iterator-helpers@npm:^1.0.15":
-  version: 1.0.15
-  resolution: "es-iterator-helpers@npm:1.0.15"
+  version: 1.0.17
+  resolution: "es-iterator-helpers@npm:1.0.17"
   dependencies:
     asynciterator.prototype: "npm:^1.0.0"
-    call-bind: "npm:^1.0.2"
+    call-bind: "npm:^1.0.7"
     define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.22.1"
-    es-set-tostringtag: "npm:^2.0.1"
-    function-bind: "npm:^1.1.1"
-    get-intrinsic: "npm:^1.2.1"
+    es-abstract: "npm:^1.22.4"
+    es-errors: "npm:^1.3.0"
+    es-set-tostringtag: "npm:^2.0.2"
+    function-bind: "npm:^1.1.2"
+    get-intrinsic: "npm:^1.2.4"
     globalthis: "npm:^1.0.3"
-    has-property-descriptors: "npm:^1.0.0"
+    has-property-descriptors: "npm:^1.0.2"
     has-proto: "npm:^1.0.1"
     has-symbols: "npm:^1.0.3"
-    internal-slot: "npm:^1.0.5"
+    internal-slot: "npm:^1.0.7"
     iterator.prototype: "npm:^1.1.2"
-    safe-array-concat: "npm:^1.0.1"
-  checksum: 10c0/b4c83f94bfe624260d5238092de3173989f76f1416b1d02c388aea3b2024174e5f5f0e864057311ac99790b57e836ca3545b6e77256b26066dac944519f5e6d6
+    safe-array-concat: "npm:^1.1.0"
+  checksum: 10c0/d0f281257e7165f068fd4fc3beb63d07ae4f18fbef02a2bbe4a39272b764164c1ce3311ae7c5429ac30003aef290fcdf569050e4a9ba3560e044440f68e9a47c
   languageName: node
   linkType: hard
 
@@ -10964,7 +10965,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-set-tostringtag@npm:^2.0.1":
+"es-set-tostringtag@npm:^2.0.2":
   version: 2.0.2
   resolution: "es-set-tostringtag@npm:2.0.2"
   dependencies:
@@ -10975,7 +10976,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-shim-unscopables@npm:^1.0.0":
+"es-shim-unscopables@npm:^1.0.0, es-shim-unscopables@npm:^1.0.2":
   version: 1.0.2
   resolution: "es-shim-unscopables@npm:1.0.2"
   dependencies:
@@ -11098,9 +11099,9 @@ __metadata:
   linkType: hard
 
 "escalade@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "escalade@npm:3.1.1"
-  checksum: 10c0/afd02e6ca91ffa813e1108b5e7756566173d6bc0d1eb951cb44d6b21702ec17c1cf116cfe75d4a2b02e05acb0b808a7a9387d0d1ca5cf9c04ad03a8445c3e46d
+  version: 3.1.2
+  resolution: "escalade@npm:3.1.2"
+  checksum: 10c0/6b4adafecd0682f3aa1cd1106b8fff30e492c7015b178bc81b2d2f75106dabea6c6d6e8508fc491bd58e597c74abb0e8e2368f943ecb9393d4162e3c2f3cf287
   languageName: node
   linkType: hard
 
@@ -11278,12 +11279,12 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-jest@npm:^27.6.0":
-  version: 27.6.0
-  resolution: "eslint-plugin-jest@npm:27.6.0"
+  version: 27.8.0
+  resolution: "eslint-plugin-jest@npm:27.8.0"
   dependencies:
     "@typescript-eslint/utils": "npm:^5.10.0"
   peerDependencies:
-    "@typescript-eslint/eslint-plugin": ^5.0.0 || ^6.0.0
+    "@typescript-eslint/eslint-plugin": ^5.0.0 || ^6.0.0 || ^7.0.0
     eslint: ^7.0.0 || ^8.0.0
     jest: "*"
   peerDependenciesMeta:
@@ -11291,7 +11292,7 @@ __metadata:
       optional: true
     jest:
       optional: true
-  checksum: 10c0/f6a61f91c382c82d653632b85749896c0c8c2ac1e17e43cbe242da0eb5ea9f818e796ac65f7e5d7904acea36392218181be4672869b566a756243e9d39737644
+  checksum: 10c0/4eb82be2684886d884c3377e613f3e9d069fd2a74ebec95ebfb863c666dd79456aa91b46b59b06fd500914d9466e425edb42ed16a5f174dc1bd86e0f39f26881
   languageName: node
   linkType: hard
 
@@ -11322,11 +11323,11 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-prettier@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "eslint-plugin-prettier@npm:5.1.0"
+  version: 5.1.3
+  resolution: "eslint-plugin-prettier@npm:5.1.3"
   dependencies:
     prettier-linter-helpers: "npm:^1.0.0"
-    synckit: "npm:^0.8.5"
+    synckit: "npm:^0.8.6"
   peerDependencies:
     "@types/eslint": ">=8.0.0"
     eslint: ">=8.0.0"
@@ -11337,7 +11338,7 @@ __metadata:
       optional: true
     eslint-config-prettier:
       optional: true
-  checksum: 10c0/76b9a6cc5fa8dcc0d5d8aac5e7b717c08c736d2f158ba63709d94526d3152761d36963f930f9c64a29270a107519eca24b41e82b67cc43f0291d43db4a975fd1
+  checksum: 10c0/f45d5fc1fcfec6b0cf038a7a65ddd10a25df4fe3f9e1f6b7f0d5100e66f046a26a2492e69ee765dddf461b93c114cf2e1eb18d4970aafa6f385448985c136e09
   languageName: node
   linkType: hard
 
@@ -11593,7 +11594,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:8.0.1":
+"execa@npm:8.0.1, execa@npm:^8.0.1":
   version: 8.0.1
   resolution: "execa@npm:8.0.1"
   dependencies:
@@ -11642,23 +11643,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^7.1.1":
-  version: 7.2.0
-  resolution: "execa@npm:7.2.0"
-  dependencies:
-    cross-spawn: "npm:^7.0.3"
-    get-stream: "npm:^6.0.1"
-    human-signals: "npm:^4.3.0"
-    is-stream: "npm:^3.0.0"
-    merge-stream: "npm:^2.0.0"
-    npm-run-path: "npm:^5.1.0"
-    onetime: "npm:^6.0.0"
-    signal-exit: "npm:^3.0.7"
-    strip-final-newline: "npm:^3.0.0"
-  checksum: 10c0/098cd6a1bc26d509e5402c43f4971736450b84d058391820c6f237aeec6436963e006fd8423c9722f148c53da86aa50045929c7278b5522197dff802d10f9885
-  languageName: node
-  linkType: hard
-
 "execall@npm:^2.0.0":
   version: 2.0.0
   resolution: "execall@npm:2.0.0"
@@ -11805,7 +11789,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -11847,11 +11831,11 @@ __metadata:
   linkType: hard
 
 "fastq@npm:^1.6.0":
-  version: 1.16.0
-  resolution: "fastq@npm:1.16.0"
+  version: 1.17.1
+  resolution: "fastq@npm:1.17.1"
   dependencies:
     reusify: "npm:^1.0.4"
-  checksum: 10c0/38c1b49adba639af020727284a02af021acab764efd7f088bc31364e8a5b01ce9031eb6c5f7f304019b8267c3b7c236e79d6904884f50f94f83b1700b8a6619a
+  checksum: 10c0/1095f16cea45fb3beff558bb3afa74ca7a9250f5a670b65db7ed585f92b4b48381445cd328b3d87323da81e43232b5d5978a8201bde84e0cd514310f1ea6da34
   languageName: node
   linkType: hard
 
@@ -11920,12 +11904,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-entry-cache@npm:^7.0.2":
-  version: 7.0.2
-  resolution: "file-entry-cache@npm:7.0.2"
+"file-entry-cache@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "file-entry-cache@npm:8.0.0"
   dependencies:
-    flat-cache: "npm:^3.2.0"
-  checksum: 10c0/822664e35c3e295e6a8ca7ec490d8d8077017607f41f94b29922f1f49c6dd07025048e3ed528e2909a1439eba66d60f802c0774aa612cf6ee053ee4ecc16c8c5
+    flat-cache: "npm:^4.0.0"
+  checksum: 10c0/9e2b5938b1cd9b6d7e3612bdc533afd4ac17b2fc646569e9a8abbf2eb48e5eb8e316bc38815a3ef6a1b456f4107f0d0f055a614ca613e75db6bf9ff4d72c1638
   languageName: node
   linkType: hard
 
@@ -12120,7 +12104,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flat-cache@npm:^3.0.4, flat-cache@npm:^3.2.0":
+"flat-cache@npm:^3.0.4":
   version: 3.2.0
   resolution: "flat-cache@npm:3.2.0"
   dependencies:
@@ -12131,6 +12115,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flat-cache@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "flat-cache@npm:4.0.0"
+  dependencies:
+    flatted: "npm:^3.2.9"
+    keyv: "npm:^4.5.4"
+    rimraf: "npm:^5.0.5"
+  checksum: 10c0/8f99e27bb3de94e91e7b4ca5120488cdc2b7f8cd952a538f1a566101963057eb42ca318e9fac0d36987dcca34316ff04b61c1dc3dcc8084f6f5e801a52a8e547
+  languageName: node
+  linkType: hard
+
 "flat@npm:^5.0.2":
   version: 5.0.2
   resolution: "flat@npm:5.0.2"
@@ -12148,9 +12143,9 @@ __metadata:
   linkType: hard
 
 "flow-parser@npm:0.*":
-  version: 0.225.0
-  resolution: "flow-parser@npm:0.225.0"
-  checksum: 10c0/cec08182ef5e7887a5e83026e6bceeab575b01c1b57e1809f3bbb9b08d65b7060fc22e34dcf9a667a3efad0e475baaca338461dc1fa67e7668fd3f0c093b71f2
+  version: 0.229.0
+  resolution: "flow-parser@npm:0.229.0"
+  checksum: 10c0/d64066a675da37ff3de782518e0a3706dc14184a301a3c98dbcb3ffe65657b79ad7e869b7cb41086cfd3b089929180c23df6c750b4afbb0e6d42db16af3b099e
   languageName: node
   linkType: hard
 
@@ -12161,13 +12156,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.0":
-  version: 1.15.3
-  resolution: "follow-redirects@npm:1.15.3"
+"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.4":
+  version: 1.15.5
+  resolution: "follow-redirects@npm:1.15.5"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: 10c0/915a2cf22e667bdf47b1a43cc6b7dce14d95039e9bbf9a24d0e739abfbdfa00077dd43c86d4a7a19efefcc7a99af144920a175eedc3888d268af5df67c272ee5
+  checksum: 10c0/418d71688ceaf109dfd6f85f747a0c75de30afe43a294caa211def77f02ef19865b547dfb73fde82b751e1cc507c06c754120b848fe5a7400b0a669766df7615
   languageName: node
   linkType: hard
 
@@ -12241,7 +12236,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fraction.js@npm:^4.3.6":
+"fraction.js@npm:^4.3.7":
   version: 4.3.7
   resolution: "fraction.js@npm:4.3.7"
   checksum: 10c0/df291391beea9ab4c263487ffd9d17fed162dbb736982dee1379b2a8cc94e4e24e46ed508c6d278aded9080ba51872f1bc5f3a5fd8d7c74e5f105b508ac28711
@@ -12402,7 +12397,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"function-bind@npm:^1.1.1, function-bind@npm:^1.1.2":
+"function-bind@npm:^1.1.2":
   version: 1.1.2
   resolution: "function-bind@npm:1.1.2"
   checksum: 10c0/d8680ee1e5fcd4c197e4ac33b2b4dce03c71f4d91717292785703db200f5c21f977c568d28061226f9b5900cbcd2c84463646134fd5337e7925e0942bc3f46d5
@@ -12465,15 +12460,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "get-intrinsic@npm:1.2.2"
+"get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "get-intrinsic@npm:1.2.4"
   dependencies:
+    es-errors: "npm:^1.3.0"
     function-bind: "npm:^1.1.2"
     has-proto: "npm:^1.0.1"
     has-symbols: "npm:^1.0.3"
     hasown: "npm:^2.0.0"
-  checksum: 10c0/4e7fb8adc6172bae7c4fe579569b4d5238b3667c07931cd46b4eee74bbe6ff6b91329bec311a638d8e60f5b51f44fe5445693c6be89ae88d4b5c49f7ff12db0b
+  checksum: 10c0/0a9b82c16696ed6da5e39b1267104475c47e3a9bdbe8b509dfe1710946e38a87be70d759f4bb3cda042d76a41ef47fe769660f3b7c0d1f68750299344ffb15b7
   languageName: node
   linkType: hard
 
@@ -12558,7 +12554,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-stream@npm:^6.0.0, get-stream@npm:^6.0.1":
+"get-stream@npm:^6.0.0":
   version: 6.0.1
   resolution: "get-stream@npm:6.0.1"
   checksum: 10c0/49825d57d3fd6964228e6200a58169464b8e8970489b3acdc24906c782fb7f01f9f56f8e6653c4a50713771d6658f7cfe051e5eb8c12e334138c9c918b296341
@@ -12572,13 +12568,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-symbol-description@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "get-symbol-description@npm:1.0.0"
+"get-symbol-description@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "get-symbol-description@npm:1.0.2"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.1.1"
-  checksum: 10c0/23bc3b44c221cdf7669a88230c62f4b9e30393b61eb21ba4400cb3e346801bd8f95fe4330ee78dbae37aecd874646d53e3e76a17a654d0c84c77f6690526d6bb
+    call-bind: "npm:^1.0.5"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.4"
+  checksum: 10c0/867be6d63f5e0eb026cb3b0ef695ec9ecf9310febb041072d2e142f260bd91ced9eeb426b3af98791d1064e324e653424afa6fd1af17dee373bea48ae03162bc
   languageName: node
   linkType: hard
 
@@ -12592,19 +12589,20 @@ __metadata:
   linkType: hard
 
 "giget@npm:^1.0.0":
-  version: 1.1.3
-  resolution: "giget@npm:1.1.3"
-  dependencies:
-    colorette: "npm:^2.0.20"
-    defu: "npm:^6.1.2"
-    https-proxy-agent: "npm:^7.0.2"
-    mri: "npm:^1.2.0"
-    node-fetch-native: "npm:^1.4.0"
+  version: 1.2.1
+  resolution: "giget@npm:1.2.1"
+  dependencies:
+    citty: "npm:^0.1.5"
+    consola: "npm:^3.2.3"
+    defu: "npm:^6.1.3"
+    node-fetch-native: "npm:^1.6.1"
+    nypm: "npm:^0.3.3"
+    ohash: "npm:^1.1.3"
     pathe: "npm:^1.1.1"
     tar: "npm:^6.2.0"
   bin:
     giget: dist/cli.mjs
-  checksum: 10c0/7f3d3628f4c488ab543e2edcd93b6899b2486a0afc2caab748ad65714d631f5cdfc9cf00404ed21b390c070cf5214037dffb593cd667c54b97adc6a1c657cdf9
+  checksum: 10c0/7a2a66146278f36a1fe0e57e792d43500a757c9a70e796a84e264cf4dfdbc3677499b308dfd96dd53940b5d1065ee14cba75dd75d78a78c2a9abec74e5e4ea62
   languageName: node
   linkType: hard
 
@@ -12717,49 +12715,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:7.1.4":
-  version: 7.1.4
-  resolution: "glob@npm:7.1.4"
-  dependencies:
-    fs.realpath: "npm:^1.0.0"
-    inflight: "npm:^1.0.4"
-    inherits: "npm:2"
-    minimatch: "npm:^3.0.4"
-    once: "npm:^1.3.0"
-    path-is-absolute: "npm:^1.0.0"
-  checksum: 10c0/7f6fcbf600eb2298cce34c65f6d8bbe6933ddd4f88aa5b38a9c6feec82b615bb33b63b120725303e89c4b50284413c21d2ff883414717a5c7d0c9f7cd7a0e5fe
-  languageName: node
-  linkType: hard
-
-"glob@npm:7.2.0":
-  version: 7.2.0
-  resolution: "glob@npm:7.2.0"
+"glob@npm:7.2.3, glob@npm:^7.1.1, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
+  version: 7.2.3
+  resolution: "glob@npm:7.2.3"
   dependencies:
     fs.realpath: "npm:^1.0.0"
     inflight: "npm:^1.0.4"
     inherits: "npm:2"
-    minimatch: "npm:^3.0.4"
+    minimatch: "npm:^3.1.1"
     once: "npm:^1.3.0"
     path-is-absolute: "npm:^1.0.0"
-  checksum: 10c0/478b40e38be5a3d514e64950e1e07e0ac120585add6a37c98d0ed24d72d9127d734d2a125786073c8deb687096e84ae82b641c441a869ada3a9cc91b68978632
+  checksum: 10c0/65676153e2b0c9095100fe7f25a778bf45608eeb32c6048cf307f579649bcc30353277b3b898a3792602c65764e5baa4f643714dfbdfd64ea271d210c7a425fe
   languageName: node
   linkType: hard
 
-"glob@npm:7.2.3, glob@npm:^7.1.1, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
-  version: 7.2.3
-  resolution: "glob@npm:7.2.3"
+"glob@npm:8.1.0, glob@npm:^8.0.1":
+  version: 8.1.0
+  resolution: "glob@npm:8.1.0"
   dependencies:
     fs.realpath: "npm:^1.0.0"
     inflight: "npm:^1.0.4"
     inherits: "npm:2"
-    minimatch: "npm:^3.1.1"
+    minimatch: "npm:^5.0.1"
     once: "npm:^1.3.0"
-    path-is-absolute: "npm:^1.0.0"
-  checksum: 10c0/65676153e2b0c9095100fe7f25a778bf45608eeb32c6048cf307f579649bcc30353277b3b898a3792602c65764e5baa4f643714dfbdfd64ea271d210c7a425fe
+  checksum: 10c0/cb0b5cab17a59c57299376abe5646c7070f8acb89df5595b492dba3bfb43d301a46c01e5695f01154e6553168207cb60d4eaf07d3be4bc3eb9b0457c5c561d0f
   languageName: node
   linkType: hard
 
-"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10":
+"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7":
   version: 10.3.10
   resolution: "glob@npm:10.3.10"
   dependencies:
@@ -12774,19 +12757,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^8.0.1":
-  version: 8.1.0
-  resolution: "glob@npm:8.1.0"
-  dependencies:
-    fs.realpath: "npm:^1.0.0"
-    inflight: "npm:^1.0.4"
-    inherits: "npm:2"
-    minimatch: "npm:^5.0.1"
-    once: "npm:^1.3.0"
-  checksum: 10c0/cb0b5cab17a59c57299376abe5646c7070f8acb89df5595b492dba3bfb43d301a46c01e5695f01154e6553168207cb60d4eaf07d3be4bc3eb9b0457c5c561d0f
-  languageName: node
-  linkType: hard
-
 "glob@npm:^9.2.0":
   version: 9.3.5
   resolution: "glob@npm:9.3.5"
@@ -13085,12 +13055,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-property-descriptors@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "has-property-descriptors@npm:1.0.1"
+"has-property-descriptors@npm:^1.0.0, has-property-descriptors@npm:^1.0.1, has-property-descriptors@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "has-property-descriptors@npm:1.0.2"
   dependencies:
-    get-intrinsic: "npm:^1.2.2"
-  checksum: 10c0/d62ba94b40150b00d621bc64a6aedb5bf0ee495308b4b7ed6bac856043db3cdfb1db553ae81cec91c9d2bd82057ff0e94145e7fa25d5aa5985ed32e0921927f6
+    es-define-property: "npm:^1.0.0"
+  checksum: 10c0/253c1f59e80bb476cf0dde8ff5284505d90c3bdb762983c3514d36414290475fe3fd6f574929d84de2a8eec00d35cf07cb6776205ff32efd7c50719125f00236
   languageName: node
   linkType: hard
 
@@ -13108,12 +13078,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-tostringtag@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "has-tostringtag@npm:1.0.0"
+"has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "has-tostringtag@npm:1.0.2"
   dependencies:
-    has-symbols: "npm:^1.0.2"
-  checksum: 10c0/1cdba76b7d13f65198a92b8ca1560ba40edfa09e85d182bf436d928f3588a9ebd260451d569f0ed1b849c4bf54f49c862aa0d0a77f9552b1855bb6deb526c011
+    has-symbols: "npm:^1.0.3"
+  checksum: 10c0/a8b166462192bafe3d9b6e420a1d581d93dd867adb61be223a17a8d6dad147aa77a8be32c961bb2f27b3ef893cae8d36f564ab651f5e9b7938ae86f74027c48c
   languageName: node
   linkType: hard
 
@@ -13141,12 +13111,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hasown@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "hasown@npm:2.0.0"
+"hasown@npm:^2.0.0, hasown@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "hasown@npm:2.0.1"
   dependencies:
     function-bind: "npm:^1.1.2"
-  checksum: 10c0/5d415b114f410661208c95e7ab4879f1cc2765b8daceff4dc8718317d1cb7b9ffa7c5d1eafd9a4389c9aab7445d6ea88e05f3096cb1e529618b55304956b87fc
+  checksum: 10c0/9e27e70e8e4204f4124c8f99950d1ba2b1f5174864fd39ff26da190f9ea6488c1b3927dcc64981c26d1f637a971783c9489d62c829d393ea509e6f1ba20370bb
   languageName: node
   linkType: hard
 
@@ -13379,12 +13349,12 @@ __metadata:
   linkType: hard
 
 "http-proxy-agent@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "http-proxy-agent@npm:7.0.0"
+  version: 7.0.2
+  resolution: "http-proxy-agent@npm:7.0.2"
   dependencies:
     agent-base: "npm:^7.1.0"
     debug: "npm:^4.3.4"
-  checksum: 10c0/a11574ff39436cee3c7bc67f259444097b09474605846ddd8edf0bf4ad8644be8533db1aa463426e376865047d05dc22755e638632819317c0c2f1b2196657c8
+  checksum: 10c0/4207b06a4580fb85dd6dff521f0abf6db517489e70863dca1a0291daa7f2d3d2d6015a57bd702af068ea5cf9f1f6ff72314f5f5b4228d299c0904135d2aef921
   languageName: node
   linkType: hard
 
@@ -13449,13 +13419,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"https-proxy-agent@npm:^7.0.1, https-proxy-agent@npm:^7.0.2":
-  version: 7.0.2
-  resolution: "https-proxy-agent@npm:7.0.2"
+"https-proxy-agent@npm:^7.0.1":
+  version: 7.0.4
+  resolution: "https-proxy-agent@npm:7.0.4"
   dependencies:
     agent-base: "npm:^7.0.2"
     debug: "npm:4"
-  checksum: 10c0/7735eb90073db087e7e79312e3d97c8c04baf7ea7ca7b013382b6a45abbaa61b281041a98f4e13c8c80d88f843785bcc84ba189165b4b4087b1e3496ba656d77
+  checksum: 10c0/bc4f7c38da32a5fc622450b6cb49a24ff596f9bd48dcedb52d2da3fa1c1a80e100fb506bd59b326c012f21c863c69b275c23de1a01d0b84db396822fdf25e52b
   languageName: node
   linkType: hard
 
@@ -13466,13 +13436,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"human-signals@npm:^4.3.0":
-  version: 4.3.1
-  resolution: "human-signals@npm:4.3.1"
-  checksum: 10c0/40498b33fe139f5cc4ef5d2f95eb1803d6318ac1b1c63eaf14eeed5484d26332c828de4a5a05676b6c83d7b9e57727c59addb4b1dea19cb8d71e83689e5b336c
-  languageName: node
-  linkType: hard
-
 "human-signals@npm:^5.0.0":
   version: 5.0.0
   resolution: "human-signals@npm:5.0.0"
@@ -13558,9 +13521,9 @@ __metadata:
   linkType: hard
 
 "ignore@npm:^5.0.4, ignore@npm:^5.1.1, ignore@npm:^5.1.8, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.0":
-  version: 5.3.0
-  resolution: "ignore@npm:5.3.0"
-  checksum: 10c0/dc06bea5c23aae65d0725a957a0638b57e235ae4568dda51ca142053ed2c352de7e3bc93a69b2b32ac31966a1952e9a93c5ef2e2ab7c6b06aef9808f6b55b571
+  version: 5.3.1
+  resolution: "ignore@npm:5.3.1"
+  checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd
   languageName: node
   linkType: hard
 
@@ -13579,9 +13542,9 @@ __metadata:
   linkType: hard
 
 "immutable@npm:^4.0.0":
-  version: 4.3.4
-  resolution: "immutable@npm:4.3.4"
-  checksum: 10c0/c15b9f0fa7b3c9315725cb00704fddad59f0e668a7379c39b9a528a8386140ee9effb015ae51a5b423e05c59d15fc0b38c970db6964ad6b3e05d0761db68441f
+  version: 4.3.5
+  resolution: "immutable@npm:4.3.5"
+  checksum: 10c0/63d2d7908241a955d18c7822fd2215b6e89ff5a1a33cc72cd475b013cbbdef7a705aa5170a51ce9f84a57f62fdddfaa34e7b5a14b33d8a43c65cc6a881d6e894
   languageName: node
   linkType: hard
 
@@ -13727,14 +13690,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.5":
-  version: 1.0.6
-  resolution: "internal-slot@npm:1.0.6"
+"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.5, internal-slot@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "internal-slot@npm:1.0.7"
   dependencies:
-    get-intrinsic: "npm:^1.2.2"
+    es-errors: "npm:^1.3.0"
     hasown: "npm:^2.0.0"
     side-channel: "npm:^1.0.4"
-  checksum: 10c0/aa37cafc8ffbf513a340de58f40d5017b4949d99722d7e4f0e24b182455bdd258000d4bb1d7b4adcf9f8979b97049b99fe9defa9db8e18a78071d2637ac143fb
+  checksum: 10c0/f8b294a4e6ea3855fc59551bbf35f2b832cf01fd5e6e2a97f5c201a071cc09b49048f856e484b67a6c721da5e55736c5b6ddafaf19e2dbeb4a3ff1821680de6c
   languageName: node
   linkType: hard
 
@@ -13747,10 +13710,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ip@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "ip@npm:2.0.0"
-  checksum: 10c0/8d186cc5585f57372847ae29b6eba258c68862055e18a75cc4933327232cb5c107f89800ce29715d542eef2c254fbb68b382e780a7414f9ee7caf60b7a473958
+"ip-address@npm:^9.0.5":
+  version: 9.0.5
+  resolution: "ip-address@npm:9.0.5"
+  dependencies:
+    jsbn: "npm:1.1.0"
+    sprintf-js: "npm:^1.1.3"
+  checksum: 10c0/331cd07fafcb3b24100613e4b53e1a2b4feab11e671e655d46dc09ee233da5011284d09ca40c4ecbdfe1d0004f462958675c224a804259f2f78d2465a87824bc
+  languageName: node
+  linkType: hard
+
+"ip@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "ip@npm:2.0.1"
+  checksum: 10c0/cab8eb3e88d0abe23e4724829621ec4c4c5cb41a7f936a2e626c947128c1be16ed543448d42af7cca95379f9892bfcacc1ccd8d09bc7e8bea0e86d492ce33616
   languageName: node
   linkType: hard
 
@@ -13795,14 +13768,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-array-buffer@npm:^3.0.1, is-array-buffer@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "is-array-buffer@npm:3.0.2"
+"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "is-array-buffer@npm:3.0.4"
   dependencies:
     call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.2.0"
-    is-typed-array: "npm:^1.1.10"
-  checksum: 10c0/40ed13a5f5746ac3ae2f2e463687d9b5a3f5fd0086f970fb4898f0253c2a5ec2e3caea2d664dd8f54761b1c1948609702416921a22faebe160c7640a9217c80e
+    get-intrinsic: "npm:^1.2.1"
+  checksum: 10c0/42a49d006cc6130bc5424eae113e948c146f31f9d24460fc0958f855d9d810e6fd2e4519bf19aab75179af9c298ea6092459d8cafdec523cd19e529b26eab860
   languageName: node
   linkType: hard
 
@@ -13934,15 +13906,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-docker@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "is-docker@npm:3.0.0"
-  bin:
-    is-docker: cli.js
-  checksum: 10c0/d2c4f8e6d3e34df75a5defd44991b6068afad4835bb783b902fa12d13ebdb8f41b2a199dcb0b5ed2cb78bfee9e4c0bbdb69c2d9646f4106464674d3e697a5856
-  languageName: node
-  linkType: hard
-
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -14031,17 +13994,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-inside-container@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-inside-container@npm:1.0.0"
-  dependencies:
-    is-docker: "npm:^3.0.0"
-  bin:
-    is-inside-container: cli.js
-  checksum: 10c0/a8efb0e84f6197e6ff5c64c52890fa9acb49b7b74fed4da7c95383965da6f0fa592b4dbd5e38a79f87fc108196937acdbcd758fcefc9b140e479b39ce1fcd1cd
-  languageName: node
-  linkType: hard
-
 "is-installed-globally@npm:^0.4.0":
   version: 0.4.0
   resolution: "is-installed-globally@npm:0.4.0"
@@ -14275,12 +14227,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.12, is-typed-array@npm:^1.1.3, is-typed-array@npm:^1.1.9":
-  version: 1.1.12
-  resolution: "is-typed-array@npm:1.1.12"
+"is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.3, is-typed-array@npm:^1.1.9":
+  version: 1.1.13
+  resolution: "is-typed-array@npm:1.1.13"
   dependencies:
-    which-typed-array: "npm:^1.1.11"
-  checksum: 10c0/9863e9cc7223c6fc1c462a2c3898a7beff6b41b1ee0fabb03b7d278ae7de670b5bcbc8627db56bb66ed60902fa37d53fe5cce0fd2f7d73ac64fe5da6f409b6ae
+    which-typed-array: "npm:^1.1.14"
+  checksum: 10c0/fa5cb97d4a80e52c2cc8ed3778e39f175a1a2ae4ddf3adae3187d69586a1fd57cfa0b095db31f66aa90331e9e3da79184cea9c6abdcd1abc722dc3c3edd51cca
   languageName: node
   linkType: hard
 
@@ -14376,9 +14328,9 @@ __metadata:
   linkType: hard
 
 "isbot@npm:^3.6.13":
-  version: 3.7.1
-  resolution: "isbot@npm:3.7.1"
-  checksum: 10c0/7c4733f6bf0cd98d6801ee24d4664edde0f0fabc329ff9858d41744dc0d6143701e8e7dfc7962bcdc46b7670911d716392cdd0a4a4bc9f5c98e03125d675f6c5
+  version: 3.8.0
+  resolution: "isbot@npm:3.8.0"
+  checksum: 10c0/3e9daa907212db8e8e339fe0c7eacff7814de0db0aeef9ab379376b245f35058c6bdd2de0849442a791bc3d9587d749071e7d7e90aea00bf9f834f40c69ea16f
   languageName: node
   linkType: hard
 
@@ -15130,15 +15082,15 @@ __metadata:
   linkType: hard
 
 "joi@npm:^17.11.0":
-  version: 17.11.0
-  resolution: "joi@npm:17.11.0"
+  version: 17.12.1
+  resolution: "joi@npm:17.12.1"
   dependencies:
-    "@hapi/hoek": "npm:^9.0.0"
-    "@hapi/topo": "npm:^5.0.0"
-    "@sideway/address": "npm:^4.1.3"
+    "@hapi/hoek": "npm:^9.3.0"
+    "@hapi/topo": "npm:^5.1.0"
+    "@sideway/address": "npm:^4.1.5"
     "@sideway/formula": "npm:^3.0.1"
     "@sideway/pinpoint": "npm:^2.0.0"
-  checksum: 10c0/c41c86fe772828b88fbdbcaef2e41235ccbb107c22523a377f9a2fd39829f203213f37a352589f49d9a9b38bf1c645846defede8b81d8c1f3123117c1a600010
+  checksum: 10c0/552ec235a4fb068290f85c8248e0afc6a8fa91a33d7fd7552fa1f1d8682b5d2d0f0c29901b6843d7936f1e15e8bf0a537126ccb01fa72cf0eb626ff1a0a77a73
   languageName: node
   linkType: hard
 
@@ -15172,6 +15124,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsbn@npm:1.1.0":
+  version: 1.1.0
+  resolution: "jsbn@npm:1.1.0"
+  checksum: 10c0/4f907fb78d7b712e11dea8c165fe0921f81a657d3443dde75359ed52eb2b5d33ce6773d97985a089f09a65edd80b11cb75c767b57ba47391fee4c969f7215c96
+  languageName: node
+  linkType: hard
+
 "jscodeshift@npm:^0.15.1":
   version: 0.15.1
   resolution: "jscodeshift@npm:0.15.1"
@@ -15278,12 +15237,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-joy@npm:^9.2.0":
-  version: 9.9.1
-  resolution: "json-joy@npm:9.9.1"
+"json-joy@npm:^11.0.0":
+  version: 11.28.0
+  resolution: "json-joy@npm:11.28.0"
   dependencies:
     arg: "npm:^5.0.2"
     hyperdyperid: "npm:^1.2.0"
+    thingies: "npm:^1.14.1"
   peerDependencies:
     quill-delta: ^5
     rxjs: 7
@@ -15297,7 +15257,7 @@ __metadata:
     json-pointer: bin/json-pointer.js
     json-pointer-test: bin/json-pointer-test.js
     json-unpack: bin/json-unpack.js
-  checksum: 10c0/e147eceae446a84521d60c36326c1528268aafbaaedfc0a79a25207ace9da23dc1b599be4b5a90ca84ff1d01eda1b29b037abc0f970fef7cff4ab1e9db20ba6b
+  checksum: 10c0/8f81fd2a49b2e7fe2331812939579e83de088ec1f18c66e099be8f1ec4e6e548548b02313207e84f6f9573cd65e853a62fe4f10fa43887b04022f646b0ffa56a
   languageName: node
   linkType: hard
 
@@ -15370,13 +15330,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonc-parser@npm:3.2.0, jsonc-parser@npm:^3.0.0, jsonc-parser@npm:^3.2.0":
+"jsonc-parser@npm:3.2.0":
   version: 3.2.0
   resolution: "jsonc-parser@npm:3.2.0"
   checksum: 10c0/5a12d4d04dad381852476872a29dcee03a57439574e4181d91dca71904fcdcc5e8e4706c0a68a2c61ad9810e1e1c5806b5100d52d3e727b78f5cdc595401045b
   languageName: node
   linkType: hard
 
+"jsonc-parser@npm:^3.0.0, jsonc-parser@npm:^3.2.0":
+  version: 3.2.1
+  resolution: "jsonc-parser@npm:3.2.1"
+  checksum: 10c0/ada66dec143d7f9cb0e2d0d29c69e9ce40d20f3a4cb96b0c6efb745025ac7f9ba647d7ac0990d0adfc37a2d2ae084a12009a9c833dbdbeadf648879a99b9df89
+  languageName: node
+  linkType: hard
+
 "jsonfile@npm:^4.0.0":
   version: 4.0.0
   resolution: "jsonfile@npm:4.0.0"
@@ -15430,7 +15397,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"keyv@npm:^4.5.3":
+"keyv@npm:^4.5.3, keyv@npm:^4.5.4":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
   dependencies:
@@ -15511,12 +15478,12 @@ __metadata:
   linkType: hard
 
 "lerna@npm:^8.0.1":
-  version: 8.0.1
-  resolution: "lerna@npm:8.0.1"
+  version: 8.1.2
+  resolution: "lerna@npm:8.1.2"
   dependencies:
-    "@lerna/create": "npm:8.0.1"
+    "@lerna/create": "npm:8.1.2"
     "@npmcli/run-script": "npm:7.0.2"
-    "@nx/devkit": "npm:>=17.1.2 < 18"
+    "@nx/devkit": "npm:>=17.1.2 < 19"
     "@octokit/plugin-enterprise-rest": "npm:6.0.1"
     "@octokit/rest": "npm:19.0.11"
     byte-size: "npm:8.1.1"
@@ -15559,7 +15526,7 @@ __metadata:
     npm-packlist: "npm:5.1.1"
     npm-registry-fetch: "npm:^14.0.5"
     npmlog: "npm:^6.0.2"
-    nx: "npm:>=17.1.2 < 18"
+    nx: "npm:>=17.1.2 < 19"
     p-map: "npm:4.0.0"
     p-map-series: "npm:2.1.0"
     p-pipe: "npm:3.1.0"
@@ -15590,7 +15557,7 @@ __metadata:
     yargs-parser: "npm:21.1.1"
   bin:
     lerna: dist/cli.js
-  checksum: 10c0/bc1ccd5d7321b1e11e8fb2464db4c500b77400f446f3cbdeba4bd9bcfb6735e1d5aaa2ed36da70393e72e0703a1e67d745a03a739a715b12ffe51eac7cb5d40b
+  checksum: 10c0/de1777aca8863253aad0b2fe8a00fe2cec1a652d9c9552cd0b8d45985f9eb7004ca0dfb17c56c29aae49694a776f7a42a7c64edb7a7a8ed613eb51dc070412a2
   languageName: node
   linkType: hard
 
@@ -15659,28 +15626,28 @@ __metadata:
   linkType: hard
 
 "lint-staged@npm:^15.2.0":
-  version: 15.2.0
-  resolution: "lint-staged@npm:15.2.0"
+  version: 15.2.2
+  resolution: "lint-staged@npm:15.2.2"
   dependencies:
     chalk: "npm:5.3.0"
     commander: "npm:11.1.0"
     debug: "npm:4.3.4"
     execa: "npm:8.0.1"
     lilconfig: "npm:3.0.0"
-    listr2: "npm:8.0.0"
+    listr2: "npm:8.0.1"
     micromatch: "npm:4.0.5"
     pidtree: "npm:0.6.0"
     string-argv: "npm:0.3.2"
     yaml: "npm:2.3.4"
   bin:
     lint-staged: bin/lint-staged.js
-  checksum: 10c0/4a1ff25dd06dbd4346fd244c9a0ebb936532ba18c0caedeb895c2e232f3c6c5fd08f6667624716660bc29e3e0f9f0440a9175114394616e991ebd5fab4b1f092
+  checksum: 10c0/a1ba6c7ee53e30a0f6ea9a351d95d3d0d2be916a41b561e22907e9ea513eb18cb3dbe65bff3ec13fad15777999efe56b2e2a95427e31d12a9b7e7948c3630ee2
   languageName: node
   linkType: hard
 
-"listr2@npm:8.0.0":
-  version: 8.0.0
-  resolution: "listr2@npm:8.0.0"
+"listr2@npm:8.0.1":
+  version: 8.0.1
+  resolution: "listr2@npm:8.0.1"
   dependencies:
     cli-truncate: "npm:^4.0.0"
     colorette: "npm:^2.0.20"
@@ -15688,7 +15655,7 @@ __metadata:
     log-update: "npm:^6.0.0"
     rfdc: "npm:^1.3.0"
     wrap-ansi: "npm:^9.0.0"
-  checksum: 10c0/6e356df9127c68b69186c927c993645223557e941a76b0bb210e35786aedc53f577df437251db804606ff37ac509c5d945289a84b3daee7fadf2e3dcb889ecc9
+  checksum: 10c0/b565d6ceb3a4c2dbe0c1735c0fd907afd0d6f89de21aced8e05187b2d88ca2f8f9ebc5d743885396a00f05f13146f6be744d098a56ce0402cf1cd131485a7ff1
   languageName: node
   linkType: hard
 
@@ -15903,9 +15870,9 @@ __metadata:
   linkType: hard
 
 "loglevel@npm:^1.6.6":
-  version: 1.8.1
-  resolution: "loglevel@npm:1.8.1"
-  checksum: 10c0/21069436c97448a1801b154a77d19ada212225c513d94f0471bfe299c981ffd4dc0d21e6211f9250bd6209ba9837bfe0d40d9295c673d73e3c543ec6b1c5d9ef
+  version: 1.9.1
+  resolution: "loglevel@npm:1.9.1"
+  checksum: 10c0/152f0501cea367cf998c844a38b19f0b5af555756ad7d8650214a1f8c6a5b045e31b8cf5dae27d28339a061624ce3f618aadb333aed386cac041d6ddc5101a39
   languageName: node
   linkType: hard
 
@@ -15958,9 +15925,9 @@ __metadata:
   linkType: hard
 
 "lru-cache@npm:^10.0.1, lru-cache@npm:^9.1.1 || ^10.0.0":
-  version: 10.1.0
-  resolution: "lru-cache@npm:10.1.0"
-  checksum: 10c0/778bc8b2626daccd75f24c4b4d10632496e21ba064b126f526c626fbdbc5b28c472013fccd45d7646b9e1ef052444824854aed617b59cd570d01a8b7d651fc1e
+  version: 10.2.0
+  resolution: "lru-cache@npm:10.2.0"
+  checksum: 10c0/c9847612aa2daaef102d30542a8d6d9b2c2bb36581c1bf0dc3ebf5e5f3352c772a749e604afae2e46873b930a9e9523743faac4e5b937c576ab29196774712ee
   languageName: node
   linkType: hard
 
@@ -16009,11 +15976,11 @@ __metadata:
   linkType: hard
 
 "magic-string@npm:^0.30.2, magic-string@npm:^0.30.5":
-  version: 0.30.5
-  resolution: "magic-string@npm:0.30.5"
+  version: 0.30.7
+  resolution: "magic-string@npm:0.30.7"
   dependencies:
     "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-  checksum: 10c0/38ac220ca7539e96da7ea2f38d85796bdf5c69b6bcae728c4bc2565084e6dc326b9174ee9770bea345cf6c9b3a24041b767167874fab5beca874d2356a9d1520
+  checksum: 10c0/d1d949f7a53c37c6e685f4ea7b2b151c2fe0cc5af8f1f979ecba916f7d60d58f35309aaf4c8b09ce1aef7c160b957be39a38b52b478a91650750931e4ddd5daf
   languageName: node
   linkType: hard
 
@@ -16125,11 +16092,11 @@ __metadata:
   linkType: hard
 
 "markdown-to-jsx@npm:^7.1.8":
-  version: 7.3.2
-  resolution: "markdown-to-jsx@npm:7.3.2"
+  version: 7.4.1
+  resolution: "markdown-to-jsx@npm:7.4.1"
   peerDependencies:
     react: ">= 0.14.0"
-  checksum: 10c0/191b9a9defeed02e12dd340cebf279f577266dac7b34574fa44ce4d64ee8536f9967d455b8303c853f84413feb473118290a6160d8221eeaf3b9e4961b8980e3
+  checksum: 10c0/f40d9ab632a659ef7fd3afcae9c40e11ce77d57ae856275eb9439bf6762738eefb9897cfb65fc0495347cf8fc3b1cfef6cb9dcfe96959ded3ebd122375155323
   languageName: node
   linkType: hard
 
@@ -16212,23 +16179,23 @@ __metadata:
   linkType: hard
 
 "memfs@npm:^3.4.1, memfs@npm:^3.4.12":
-  version: 3.6.0
-  resolution: "memfs@npm:3.6.0"
+  version: 3.5.3
+  resolution: "memfs@npm:3.5.3"
   dependencies:
     fs-monkey: "npm:^1.0.4"
-  checksum: 10c0/af567f9038bbb5bbacf100b35d5839e90a89f882d191d8a1c7002faeb224c6cfcebd0e97c0150e9af8be95ec7b5b75a52af56fcd109d0bc18807c1f4e004f053
+  checksum: 10c0/038fc81bce17ea92dde15aaa68fa0fdaf4960c721ce3ffc7c2cb87a259333f5159784ea48b3b72bf9e054254d9d0d0d5209d0fdc3d07d08653a09933b168fbd7
   languageName: node
   linkType: hard
 
 "memfs@npm:^4.2.1":
-  version: 4.6.0
-  resolution: "memfs@npm:4.6.0"
+  version: 4.7.0
+  resolution: "memfs@npm:4.7.0"
   dependencies:
-    json-joy: "npm:^9.2.0"
+    json-joy: "npm:^11.0.0"
     thingies: "npm:^1.11.1"
   peerDependencies:
     tslib: 2
-  checksum: 10c0/370a70ff9156aaf5a75bfeca265d66b08795bf736c5ad0c1a597e489864d4f031f424b320ef3f331a99f0fa36ad90688ab28859b7c647ee3b473d4ee1fdd8d95
+  checksum: 10c0/cf9a2110e9e6392e5826102b9ad342daa9912b48bac88ac44018b3efadf24901c8643a4ed22840bb9c68c0adf842002f212b48b6184ae286dfa44402cb6e54a1
   languageName: node
   linkType: hard
 
@@ -16241,10 +16208,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"meow@npm:^12.1.1":
-  version: 12.1.1
-  resolution: "meow@npm:12.1.1"
-  checksum: 10c0/a125ca99a32e2306e2f4cbe651a0d27f6eb67918d43a075f6e80b35e9bf372ebf0fc3a9fbc201cbbc9516444b6265fb3c9f80c5b7ebd32f548aa93eb7c28e088
+"meow@npm:^13.1.0":
+  version: 13.2.0
+  resolution: "meow@npm:13.2.0"
+  checksum: 10c0/d5b339ae314715bcd0b619dd2f8a266891928e21526b4800d49b4fba1cc3fff7e2c1ff5edd3344149fac841bc2306157f858e8c4d5eaee4d52ce52ad925664ce
   languageName: node
   linkType: hard
 
@@ -16431,6 +16398,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:9.0.3, minimatch@npm:^9.0.0, minimatch@npm:^9.0.1, minimatch@npm:^9.0.3":
+  version: 9.0.3
+  resolution: "minimatch@npm:9.0.3"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 10c0/85f407dcd38ac3e180f425e86553911d101455ca3ad5544d6a7cec16286657e4f8a9aa6695803025c55e31e35a91a2252b5dc8e7d527211278b8b65b4dbd5eac
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -16458,15 +16434,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^9.0.0, minimatch@npm:^9.0.1, minimatch@npm:^9.0.3":
-  version: 9.0.3
-  resolution: "minimatch@npm:9.0.3"
-  dependencies:
-    brace-expansion: "npm:^2.0.1"
-  checksum: 10c0/85f407dcd38ac3e180f425e86553911d101455ca3ad5544d6a7cec16286657e4f8a9aa6695803025c55e31e35a91a2252b5dc8e7d527211278b8b65b4dbd5eac
-  languageName: node
-  linkType: hard
-
 "minimist-options@npm:4.1.0":
   version: 4.1.0
   resolution: "minimist-options@npm:4.1.0"
@@ -16629,9 +16596,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mocha@npm:^10.2.0":
-  version: 10.2.0
-  resolution: "mocha@npm:10.2.0"
+"mocha@npm:^10.3.0":
+  version: 10.3.0
+  resolution: "mocha@npm:10.3.0"
   dependencies:
     ansi-colors: "npm:4.1.1"
     browser-stdout: "npm:1.3.1"
@@ -16640,13 +16607,12 @@ __metadata:
     diff: "npm:5.0.0"
     escape-string-regexp: "npm:4.0.0"
     find-up: "npm:5.0.0"
-    glob: "npm:7.2.0"
+    glob: "npm:8.1.0"
     he: "npm:1.2.0"
     js-yaml: "npm:4.1.0"
     log-symbols: "npm:4.1.0"
     minimatch: "npm:5.0.1"
     ms: "npm:2.1.3"
-    nanoid: "npm:3.3.3"
     serialize-javascript: "npm:6.0.0"
     strip-json-comments: "npm:3.1.1"
     supports-color: "npm:8.1.1"
@@ -16657,7 +16623,7 @@ __metadata:
   bin:
     _mocha: bin/_mocha
     mocha: bin/mocha.js
-  checksum: 10c0/145185435535ec7766932e9fa3def1520ffb895e7fa341e8592829844c4c9dd9fcb35db139d448c228b5ad3c2bedce50423ce760827b3054fafe6d47ef014937
+  checksum: 10c0/8dc93842468b2be5f820e5eb64208fb68ba3e5ee90cfe21a9f1d439f9ec031e8a8dc97f4d3206a376c9e05141cf689a812aedcf4545f71f69b3e9a51f312ec4a
   languageName: node
   linkType: hard
 
@@ -16668,13 +16634,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mri@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "mri@npm:1.2.0"
-  checksum: 10c0/a3d32379c2554cf7351db6237ddc18dc9e54e4214953f3da105b97dc3babe0deb3ffe99cf409b38ea47cc29f9430561ba6b53b24ab8f9ce97a4b50409e4a50e7
-  languageName: node
-  linkType: hard
-
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"
@@ -16723,15 +16682,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:3.3.3":
-  version: 3.3.3
-  resolution: "nanoid@npm:3.3.3"
-  bin:
-    nanoid: bin/nanoid.cjs
-  checksum: 10c0/d7ab68893cdb92dd2152d505e56571d571c65b71a9815f9dfb3c9a8cbf943fe43c9777d9a95a3b81ef01e442fec8409a84375c08f90a5753610a9f22672d953a
-  languageName: node
-  linkType: hard
-
 "nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
@@ -16788,10 +16738,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch-native@npm:^1.4.0":
-  version: 1.4.1
-  resolution: "node-fetch-native@npm:1.4.1"
-  checksum: 10c0/ab298a42ebf3b1b6c6a8cbc53d8ba703895f55171ed743b0828c2a87d461642d8053143864915a69d41cc01013db86406da105fff6c0a05a00d8caf5c279549c
+"node-fetch-native@npm:^1.6.1":
+  version: 1.6.2
+  resolution: "node-fetch-native@npm:1.6.2"
+  checksum: 10c0/2c1e94ce6e5b8a8ca85d5cdb837bc098ba2a54dea07e3509250288bebca8147950e1bef10db30120b389263ec0064e0562effdd085bb49d4e2046ebd963ee98d
   languageName: node
   linkType: hard
 
@@ -16860,7 +16810,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-machine-id@npm:1.1.12":
+"node-machine-id@npm:1.1.12, node-machine-id@npm:^1.1.12":
   version: 1.1.12
   resolution: "node-machine-id@npm:1.1.12"
   checksum: 10c0/ab2fea5f75a6f1ce3c76c5e0ae3903b631230e0a99b003d176568fff8ddbdf7b2943be96cd8d220c497ca0f6149411831f8a450601929f326781cb1b59bab7f8
@@ -17061,11 +17011,11 @@ __metadata:
   linkType: hard
 
 "npm-packlist@npm:^8.0.0":
-  version: 8.0.1
-  resolution: "npm-packlist@npm:8.0.1"
+  version: 8.0.2
+  resolution: "npm-packlist@npm:8.0.2"
   dependencies:
     ignore-walk: "npm:^6.0.4"
-  checksum: 10c0/40a61e7c4ee3d7ae29314b554cba00d8ce7f934c2949043fe137b48a69f8c6dbec222b45bc3176667ea78aae275764e0e2d659017833f47673324ddc2abfd50e
+  checksum: 10c0/ac3140980b1475c2e9acd3d0ca1acd0f8660c357aed357f1a4ebff2270975e0280a3b1c4938e2f16bd68217853ceb5725cf8779ec3752dfcc546582751ceedff
   languageName: node
   linkType: hard
 
@@ -17130,11 +17080,11 @@ __metadata:
   linkType: hard
 
 "npm-run-path@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "npm-run-path@npm:5.1.0"
+  version: 5.2.0
+  resolution: "npm-run-path@npm:5.2.0"
   dependencies:
     path-key: "npm:^4.0.0"
-  checksum: 10c0/ff6d77514489f47fa1c3b1311d09cd4b6d09a874cc1866260f9dea12cbaabda0436ed7f8c2ee44d147bf99a3af29307c6f63b0f83d242b0b6b0ab25dff2629e3
+  checksum: 10c0/7963c1f98e42afebe9524a08b0881477ec145aab34f6018842a315422b25ad40e015bdee709b697571e5efda2ecfa2640ee917d92674e4de1166fa3532a211b1
   languageName: node
   linkType: hard
 
@@ -17173,25 +17123,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nx@npm:17.2.6, nx@npm:>=17.1.2 < 18":
-  version: 17.2.6
-  resolution: "nx@npm:17.2.6"
+"nx@npm:18.0.4, nx@npm:>=17.1.2 < 19":
+  version: 18.0.4
+  resolution: "nx@npm:18.0.4"
   dependencies:
-    "@nrwl/tao": "npm:17.2.6"
-    "@nx/nx-darwin-arm64": "npm:17.2.6"
-    "@nx/nx-darwin-x64": "npm:17.2.6"
-    "@nx/nx-freebsd-x64": "npm:17.2.6"
-    "@nx/nx-linux-arm-gnueabihf": "npm:17.2.6"
-    "@nx/nx-linux-arm64-gnu": "npm:17.2.6"
-    "@nx/nx-linux-arm64-musl": "npm:17.2.6"
-    "@nx/nx-linux-x64-gnu": "npm:17.2.6"
-    "@nx/nx-linux-x64-musl": "npm:17.2.6"
-    "@nx/nx-win32-arm64-msvc": "npm:17.2.6"
-    "@nx/nx-win32-x64-msvc": "npm:17.2.6"
+    "@nrwl/tao": "npm:18.0.4"
+    "@nx/nx-darwin-arm64": "npm:18.0.4"
+    "@nx/nx-darwin-x64": "npm:18.0.4"
+    "@nx/nx-freebsd-x64": "npm:18.0.4"
+    "@nx/nx-linux-arm-gnueabihf": "npm:18.0.4"
+    "@nx/nx-linux-arm64-gnu": "npm:18.0.4"
+    "@nx/nx-linux-arm64-musl": "npm:18.0.4"
+    "@nx/nx-linux-x64-gnu": "npm:18.0.4"
+    "@nx/nx-linux-x64-musl": "npm:18.0.4"
+    "@nx/nx-win32-arm64-msvc": "npm:18.0.4"
+    "@nx/nx-win32-x64-msvc": "npm:18.0.4"
     "@yarnpkg/lockfile": "npm:^1.1.0"
     "@yarnpkg/parsers": "npm:3.0.0-rc.46"
     "@zkochan/js-yaml": "npm:0.0.6"
-    axios: "npm:^1.5.1"
+    axios: "npm:^1.6.0"
     chalk: "npm:^4.1.0"
     cli-cursor: "npm:3.1.0"
     cli-spinners: "npm:2.6.1"
@@ -17202,17 +17152,17 @@ __metadata:
     figures: "npm:3.2.0"
     flat: "npm:^5.0.2"
     fs-extra: "npm:^11.1.0"
-    glob: "npm:7.1.4"
     ignore: "npm:^5.0.4"
     jest-diff: "npm:^29.4.1"
     js-yaml: "npm:4.1.0"
     jsonc-parser: "npm:3.2.0"
     lines-and-columns: "npm:~2.0.3"
-    minimatch: "npm:3.0.5"
+    minimatch: "npm:9.0.3"
     node-machine-id: "npm:1.1.12"
     npm-run-path: "npm:^4.0.1"
     open: "npm:^8.4.0"
-    semver: "npm:7.5.3"
+    ora: "npm:5.3.0"
+    semver: "npm:^7.5.3"
     string-width: "npm:^4.2.3"
     strong-log-transformer: "npm:^2.1.0"
     tar-stream: "npm:~2.2.0"
@@ -17222,7 +17172,7 @@ __metadata:
     yargs: "npm:^17.6.2"
     yargs-parser: "npm:21.1.1"
   peerDependencies:
-    "@swc-node/register": ^1.6.7
+    "@swc-node/register": ^1.8.0
     "@swc/core": ^1.3.85
   dependenciesMeta:
     "@nx/nx-darwin-arm64":
@@ -17253,7 +17203,7 @@ __metadata:
   bin:
     nx: bin/nx.js
     nx-cloud: bin/nx-cloud.js
-  checksum: 10c0/d9d5ce9c048749e7f6c02356b9d2afb3ff83b9ea4db1542b0228b5487e3fa1f6dc4055b2579aa0dd87af892fff2acc677178c2b6cb425a15658abb4d7e90d112
+  checksum: 10c0/90afdc54c53c113f95cdb499c2d8e7f0482abcb576b6b75b3aad6d126a986b0808617acf42dedcc9e0f6d05ffd903e63bb32cdcc9aca81dc03f0e0c7ac672f7e
   languageName: node
   linkType: hard
 
@@ -17294,6 +17244,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nypm@npm:^0.3.3":
+  version: 0.3.6
+  resolution: "nypm@npm:0.3.6"
+  dependencies:
+    citty: "npm:^0.1.5"
+    execa: "npm:^8.0.1"
+    pathe: "npm:^1.1.2"
+    ufo: "npm:^1.3.2"
+  bin:
+    nypm: dist/cli.mjs
+  checksum: 10c0/addc0a0f2eaf33a245972332d2fd8317e8e05051e470138e64398aac15553aff0051cc9424ddb706ec00594cab22b592025a2601d781869f6c98227a0ba32e5d
+  languageName: node
+  linkType: hard
+
 "object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
@@ -17308,7 +17272,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-inspect@npm:^1.13.1, object-inspect@npm:^1.9.0":
+"object-inspect@npm:^1.13.1":
   version: 1.13.1
   resolution: "object-inspect@npm:1.13.1"
   checksum: 10c0/fad603f408e345c82e946abdf4bfd774260a5ed3e5997a0b057c44153ac32c7271ff19e3a5ae39c858da683ba045ccac2f65245c12763ce4e8594f818f4a648d
@@ -17339,7 +17303,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.assign@npm:^4.1.2, object.assign@npm:^4.1.4":
+"object.assign@npm:^4.1.2, object.assign@npm:^4.1.4, object.assign@npm:^4.1.5":
   version: 4.1.5
   resolution: "object.assign@npm:4.1.5"
   dependencies:
@@ -17374,14 +17338,15 @@ __metadata:
   linkType: hard
 
 "object.groupby@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "object.groupby@npm:1.0.1"
+  version: 1.0.2
+  resolution: "object.groupby@npm:1.0.2"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    get-intrinsic: "npm:^1.2.1"
-  checksum: 10c0/61e41fbf08cc04ed860363db9629eedeaa590fce243c0960e948fd7b11f78a9d4350065c339936d118a2dd8775d7259e26207340cc8ce688bec66cb615fec6fe
+    array.prototype.filter: "npm:^1.0.3"
+    call-bind: "npm:^1.0.5"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.22.3"
+    es-errors: "npm:^1.0.0"
+  checksum: 10c0/b6266b1cfec7eb784b8bbe0bca5dc4b371cf9dd3e601b0897d72fa97a5934273d8fb05b3fc5222204104dbec32b50e25ba27e05ad681f71fb739cc1c7e9b81b1
   languageName: node
   linkType: hard
 
@@ -17413,6 +17378,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ohash@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "ohash@npm:1.1.3"
+  checksum: 10c0/928f5bdbd8cd73f90cf544c0533dbda8e0a42d9b8c7454ab89e64e4d11bc85f85242830b4e107426ce13dc4dd3013286f8f5e0c84abd8942a014b907d9692540
+  languageName: node
+  linkType: hard
+
 "on-finished@npm:2.4.1":
   version: 2.4.1
   resolution: "on-finished@npm:2.4.1"
@@ -17476,18 +17448,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^9.1.0":
-  version: 9.1.0
-  resolution: "open@npm:9.1.0"
-  dependencies:
-    default-browser: "npm:^4.0.0"
-    define-lazy-prop: "npm:^3.0.0"
-    is-inside-container: "npm:^1.0.0"
-    is-wsl: "npm:^2.2.0"
-  checksum: 10c0/8073ec0dd8994a7a7d9bac208bd17d093993a65ce10f2eb9b62b6d3a91c9366ae903938a237c275493c130171d339f6dcbdd2a2de7e32953452c0867b97825af
-  languageName: node
-  linkType: hard
-
 "opener@npm:^1.5.1":
   version: 1.5.2
   resolution: "opener@npm:1.5.2"
@@ -17511,6 +17471,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ora@npm:5.3.0":
+  version: 5.3.0
+  resolution: "ora@npm:5.3.0"
+  dependencies:
+    bl: "npm:^4.0.3"
+    chalk: "npm:^4.1.0"
+    cli-cursor: "npm:^3.1.0"
+    cli-spinners: "npm:^2.5.0"
+    is-interactive: "npm:^1.0.0"
+    log-symbols: "npm:^4.0.0"
+    strip-ansi: "npm:^6.0.0"
+    wcwidth: "npm:^1.0.1"
+  checksum: 10c0/30d5f3218eb75b0a2028c5fb9aa88e83e38a2f1745ab56839abb06c3ba31bae35f768f4e72c4f9e04e2a66be6a898e9312e8cf85c9333e1e3613eabb8c7cdf57
+  languageName: node
+  linkType: hard
+
 "ora@npm:^5.4.1":
   version: 5.4.1
   resolution: "ora@npm:5.4.1"
@@ -17750,8 +17726,8 @@ __metadata:
   linkType: hard
 
 "pacote@npm:^17.0.5":
-  version: 17.0.5
-  resolution: "pacote@npm:17.0.5"
+  version: 17.0.6
+  resolution: "pacote@npm:17.0.6"
   dependencies:
     "@npmcli/git": "npm:^5.0.0"
     "@npmcli/installed-package-contents": "npm:^2.0.1"
@@ -17768,12 +17744,12 @@ __metadata:
     promise-retry: "npm:^2.0.1"
     read-package-json: "npm:^7.0.0"
     read-package-json-fast: "npm:^3.0.0"
-    sigstore: "npm:^2.0.0"
+    sigstore: "npm:^2.2.0"
     ssri: "npm:^10.0.0"
     tar: "npm:^6.1.11"
   bin:
     pacote: lib/bin.js
-  checksum: 10c0/ff3b80fd89f031e3df51122aeab72ca1420aed9fd085e8b2746a1ea4da7a4da88084bb25e85c6d7d7539fc802876272a3798fb575b7c4bee962831c1337a10cc
+  checksum: 10c0/d8fc116cb91d453d2a42493ea5ced3ff57dbfdb6e5b9b514f1d0465422e80042c69013fb4f77be5f27751185c6b174a40d8a53debdfb57cc4ba82a9650d970db
   languageName: node
   linkType: hard
 
@@ -18013,10 +17989,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pathe@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "pathe@npm:1.1.1"
-  checksum: 10c0/3ae5a0529c3415d91c3ac9133f52cffea54a0dd46892fe059f4b80faf36fd207957d4594bdc87043b65d0761b1e5728f81f46bafff3b5302da4e2e48889b8c0e
+"pathe@npm:^1.1.1, pathe@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "pathe@npm:1.1.2"
+  checksum: 10c0/64ee0a4e587fb0f208d9777a6c56e4f9050039268faaaaecd50e959ef01bf847b7872785c36483fa5cdcdbdfdb31fef2ff222684d4fc21c330ab60395c681897
   languageName: node
   linkType: hard
 
@@ -18103,7 +18079,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pirates@npm:^4.0.4, pirates@npm:^4.0.5":
+"pirates@npm:^4.0.4, pirates@npm:^4.0.6":
   version: 4.0.6
   resolution: "pirates@npm:4.0.6"
   checksum: 10c0/00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36
@@ -18146,36 +18122,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.40.1, playwright-core@npm:>=1.2.0":
-  version: 1.40.1
-  resolution: "playwright-core@npm:1.40.1"
+"playwright-core@npm:1.41.2, playwright-core@npm:>=1.2.0":
+  version: 1.41.2
+  resolution: "playwright-core@npm:1.41.2"
   bin:
     playwright-core: cli.js
-  checksum: 10c0/56c283012974982313a6ae583b975ee4af76d52059fb9a25d9cc616a11224685ec64682b391910c795d2b12d2ab5c7eec31124722c75c0b1703a76ac9b6fd1c2
+  checksum: 10c0/1e80a24b0e93dd5aa643fb926d23c055f2c1a0a1e711c0d798edcfd8c3e46a6716d4ca59d72ed076191e6c713d09a0f14387d96e60f5221abd4ff65aef1ac3b3
   languageName: node
   linkType: hard
 
-"playwright@npm:^1.14.0, playwright@npm:^1.39.0":
-  version: 1.40.1
-  resolution: "playwright@npm:1.40.1"
+"playwright@npm:^1.14.0, playwright@npm:^1.41.2":
+  version: 1.41.2
+  resolution: "playwright@npm:1.41.2"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.40.1"
+    playwright-core: "npm:1.41.2"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10c0/5dae164d1f69162da8d7eee52da651296fb885c76a8b36049f216975c751a0a826ff05795a1c0902dc0bd193fe606ae17d5def655f4cbcccb8d8b71afb74b950
+  checksum: 10c0/1b487387c1bc003291a9dbd098e8e3c6a31efbb4d7a2ce4f2bf9d5e7f9fbf4a406352ab70e5266eab9a2a858bd42d8955343ea30c0286c3912e81984aa0220a3
   languageName: node
   linkType: hard
 
 "polished@npm:^4.2.2":
-  version: 4.2.2
-  resolution: "polished@npm:4.2.2"
+  version: 4.3.1
+  resolution: "polished@npm:4.3.1"
   dependencies:
     "@babel/runtime": "npm:^7.17.8"
-  checksum: 10c0/1d054d1fea18ac7d921ca91504ffcf1ef0f505eda6acbfec6e205a98ebfea80b658664995deb35907dabc5f75f287dc2894812503a8aed28285bb91f25cf7400
+  checksum: 10c0/45480d4c7281a134281cef092f6ecc202a868475ff66a390fee6e9261386e16f3047b4de46a2f2e1cf7fb7aa8f52d30b4ed631a1e3bcd6f303ca31161d4f07fe
   languageName: node
   linkType: hard
 
@@ -18236,19 +18212,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-modules-local-by-default@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "postcss-modules-local-by-default@npm:4.0.3"
-  dependencies:
-    icss-utils: "npm:^5.0.0"
-    postcss-selector-parser: "npm:^6.0.2"
-    postcss-value-parser: "npm:^4.1.0"
-  peerDependencies:
-    postcss: ^8.1.0
-  checksum: 10c0/be49b86efbfb921f42287e227584aac91af9826fc1083db04958ae283dfe215ca539421bfba71f9da0f0b10651f28e95a64b5faca7166f578a1933b8646051f7
-  languageName: node
-  linkType: hard
-
 "postcss-modules-local-by-default@npm:^4.0.4":
   version: 4.0.4
   resolution: "postcss-modules-local-by-default@npm:4.0.4"
@@ -18262,17 +18225,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-modules-scope@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-modules-scope@npm:3.0.0"
-  dependencies:
-    postcss-selector-parser: "npm:^6.0.4"
-  peerDependencies:
-    postcss: ^8.1.0
-  checksum: 10c0/60af503910363689568c2c3701cb019a61b58b3d739391145185eec211bea5d50ccb6ecbe6955b39d856088072fd50ea002e40a52b50e33b181ff5c41da0308a
-  languageName: node
-  linkType: hard
-
 "postcss-modules-scope@npm:^3.1.1":
   version: 3.1.1
   resolution: "postcss-modules-scope@npm:3.1.1"
@@ -18339,13 +18291,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
-  version: 6.0.13
-  resolution: "postcss-selector-parser@npm:6.0.13"
+"postcss-selector-parser@npm:^6.0.15, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
+  version: 6.0.15
+  resolution: "postcss-selector-parser@npm:6.0.15"
   dependencies:
     cssesc: "npm:^3.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/51f099b27f7c7198ea1826470ef0adfa58b3bd3f59b390fda123baa0134880a5fa9720137b6009c4c1373357b144f700b0edac73335d0067422063129371444e
+  checksum: 10c0/48b425d6cef497bcf6b7d136f6fd95cfca43026955e07ec9290d3c15457de3a862dbf251dd36f42c07a0d5b5ab6f31e41acefeff02528995a989b955505e440b
   languageName: node
   linkType: hard
 
@@ -18375,18 +18327,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.4, postcss@npm:^8.4.21, postcss@npm:^8.4.32":
-  version: 8.4.32
-  resolution: "postcss@npm:8.4.32"
-  dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.0.0"
-    source-map-js: "npm:^1.0.2"
-  checksum: 10c0/39308a9195fa34d4dbdd7b58a896cff0c7809f84f7a4ac1b95b68ca86c9138a395addff33075668ed3983d41b90aac05754c445237a9365eb1c3a5602ebd03ad
-  languageName: node
-  linkType: hard
-
-"postcss@npm:^8.4.33, postcss@npm:^8.4.35":
+"postcss@npm:^8.1.4, postcss@npm:^8.4.33, postcss@npm:^8.4.35":
   version: 8.4.35
   resolution: "postcss@npm:8.4.35"
   dependencies:
@@ -18449,11 +18390,11 @@ __metadata:
   linkType: hard
 
 "prettier@npm:*, prettier@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "prettier@npm:3.1.1"
+  version: 3.2.5
+  resolution: "prettier@npm:3.2.5"
   bin:
     prettier: bin/prettier.cjs
-  checksum: 10c0/facc944ba20e194ff4db765e830ffbcb642803381f0d2033ed397e79904fa4ccc877dc25ad68f42d36985c01d051c990ca1b905fb83d2d7d65fe69e4386fa1a3
+  checksum: 10c0/ea327f37a7d46f2324a34ad35292af2ad4c4c3c3355da07313339d7e554320f66f65f91e856add8530157a733c6c4a897dc41b577056be5c24c40f739f5ee8c6
   languageName: node
   linkType: hard
 
@@ -18837,8 +18778,8 @@ __metadata:
   linkType: hard
 
 "react-docgen@npm:^7.0.0":
-  version: 7.0.1
-  resolution: "react-docgen@npm:7.0.1"
+  version: 7.0.3
+  resolution: "react-docgen@npm:7.0.3"
   dependencies:
     "@babel/core": "npm:^7.18.9"
     "@babel/traverse": "npm:^7.18.9"
@@ -18850,7 +18791,7 @@ __metadata:
     doctrine: "npm:^3.0.0"
     resolve: "npm:^1.22.1"
     strip-indent: "npm:^4.0.0"
-  checksum: 10c0/870c1193211f14497bf7a96137f96840dc058842ca75ff7251d91e88c3c71d7a41d5f1a124cc1b53bfbf1f2b6b58bfccc4dd6e22592814a5155d3894953274be
+  checksum: 10c0/74622750e60b287d2897a6887a2bd88303fadd84540247e162e9e970430864ae7b49152de043233d873a0aa7cffa406e5cd8fc1e8e2c277b8da73198b570f16b
   languageName: node
   linkType: hard
 
@@ -19230,16 +19171,17 @@ __metadata:
   linkType: hard
 
 "reflect.getprototypeof@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "reflect.getprototypeof@npm:1.0.4"
+  version: 1.0.5
+  resolution: "reflect.getprototypeof@npm:1.0.5"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    get-intrinsic: "npm:^1.2.1"
+    call-bind: "npm:^1.0.5"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.22.3"
+    es-errors: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.3"
     globalthis: "npm:^1.0.3"
     which-builtin-type: "npm:^1.1.3"
-  checksum: 10c0/02104cdd22658b637efe6b1df73658edab539268347327c8250a72d0cb273dcdf280c284e2d94155d22601d022d16be1a816a8616d679e447cbcbde9860d15cb
+  checksum: 10c0/68f2a21494a9f4f5acc19bda5213236aa7fc02f9953ce2b18670c63b9ca3dec294dcabbb9d394d98cd2fc0de46b7cd6354614a60a33cabdbb5de9a6f7115f9a6
   languageName: node
   linkType: hard
 
@@ -19282,14 +19224,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.5.0, regexp.prototype.flags@npm:^1.5.1":
-  version: 1.5.1
-  resolution: "regexp.prototype.flags@npm:1.5.1"
+"regexp.prototype.flags@npm:^1.5.0, regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.2":
+  version: 1.5.2
+  resolution: "regexp.prototype.flags@npm:1.5.2"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    set-function-name: "npm:^2.0.0"
-  checksum: 10c0/1de7d214c0a726c7c874a7023e47b0e27b9f7fdb64175bfe1861189de1704aaeca05c3d26c35aa375432289b99946f3cf86651a92a8f7601b90d8c226a23bcd8
+    call-bind: "npm:^1.0.6"
+    define-properties: "npm:^1.2.1"
+    es-errors: "npm:^1.3.0"
+    set-function-name: "npm:^2.0.1"
+  checksum: 10c0/0f3fc4f580d9c349f8b560b012725eb9c002f36daa0041b3fbf6f4238cb05932191a4d7d5db3b5e2caa336d5150ad0402ed2be81f711f9308fe7e1a9bf9bd552
   languageName: node
   linkType: hard
 
@@ -19629,9 +19572,9 @@ __metadata:
   linkType: hard
 
 "rfdc@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "rfdc@npm:1.3.0"
-  checksum: 10c0/a17fd7b81f42c7ae4cb932abd7b2f677b04cc462a03619fb46945ae1ccae17c3bc87c020ffdde1751cbfa8549860a2883486fdcabc9b9de3f3108af32b69a667
+  version: 1.3.1
+  resolution: "rfdc@npm:1.3.1"
+  checksum: 10c0/69f65e3ed30970f8055fac9fbbef9ce578800ca19554eab1dcbffe73a4b8aef536bc4248313889cf25e3b4e38b212c721eabe30856575bf2b2bc3d90f8ba93ef
   languageName: node
   linkType: hard
 
@@ -19668,6 +19611,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rimraf@npm:^5.0.5":
+  version: 5.0.5
+  resolution: "rimraf@npm:5.0.5"
+  dependencies:
+    glob: "npm:^10.3.7"
+  bin:
+    rimraf: dist/esm/bin.mjs
+  checksum: 10c0/d50dbe724f33835decd88395b25ed35995077c60a50ae78ded06e0185418914e555817aad1b4243edbff2254548c2f6ad6f70cc850040bebb4da9e8cc016f586
+  languageName: node
+  linkType: hard
+
 "rimraf@npm:~2.6.2":
   version: 2.6.3
   resolution: "rimraf@npm:2.6.3"
@@ -19791,22 +19745,23 @@ __metadata:
   linkType: hard
 
 "rollup@npm:^4.9.1":
-  version: 4.9.1
-  resolution: "rollup@npm:4.9.1"
-  dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.9.1"
-    "@rollup/rollup-android-arm64": "npm:4.9.1"
-    "@rollup/rollup-darwin-arm64": "npm:4.9.1"
-    "@rollup/rollup-darwin-x64": "npm:4.9.1"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.9.1"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.9.1"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.9.1"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.9.1"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.9.1"
-    "@rollup/rollup-linux-x64-musl": "npm:4.9.1"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.9.1"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.9.1"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.9.1"
+  version: 4.11.0
+  resolution: "rollup@npm:4.11.0"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.11.0"
+    "@rollup/rollup-android-arm64": "npm:4.11.0"
+    "@rollup/rollup-darwin-arm64": "npm:4.11.0"
+    "@rollup/rollup-darwin-x64": "npm:4.11.0"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.11.0"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.11.0"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.11.0"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.11.0"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.11.0"
+    "@rollup/rollup-linux-x64-musl": "npm:4.11.0"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.11.0"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.11.0"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.11.0"
+    "@types/estree": "npm:1.0.5"
     fsevents: "npm:~2.3.2"
   dependenciesMeta:
     "@rollup/rollup-android-arm-eabi":
@@ -19839,16 +19794,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 10c0/fdc76d496583bd916da773522a4949326373c2df55520fc40a56e61f10b16e5214dbeec1947ca13e07f80c0a1a2975ba71ea9bc48d298cda3ee17deaff9aacf6
-  languageName: node
-  linkType: hard
-
-"run-applescript@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "run-applescript@npm:5.0.0"
-  dependencies:
-    execa: "npm:^5.0.0"
-  checksum: 10c0/f9977db5770929f3f0db434b8e6aa266498c70dec913c84320c0a06add510cf44e3a048c44da088abee312006f9cbf572fd065cdc8f15d7682afda8755f4114c
+  checksum: 10c0/9f472e2b38450d12dfb374944198eeaef9d6a63ba53cd3e33b3d1da8a6a9f77ce9b54017c3136417b83d641d7a2491bffe391797cf0ca99e8ddb1022cd95d222
   languageName: node
   linkType: hard
 
@@ -19877,15 +19823,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-array-concat@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "safe-array-concat@npm:1.0.1"
+"safe-array-concat@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "safe-array-concat@npm:1.1.0"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.2.1"
+    call-bind: "npm:^1.0.5"
+    get-intrinsic: "npm:^1.2.2"
     has-symbols: "npm:^1.0.3"
     isarray: "npm:^2.0.5"
-  checksum: 10c0/4b15ce5fce5ce4d7e744a63592cded88d2f27806ed229eadb2e42629cbcd40e770f7478608e75f455e7fe341acd8c0a01bdcd7146b10645ea7411c5e3c1d1dd8
+  checksum: 10c0/833d3d950fc7507a60075f9bfaf41ec6dac7c50c7a9d62b1e6b071ecc162185881f92e594ff95c1a18301c881352dd6fd236d56999d5819559db7b92da9c28af
   languageName: node
   linkType: hard
 
@@ -19903,14 +19849,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-regex-test@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "safe-regex-test@npm:1.0.0"
+"safe-regex-test@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "safe-regex-test@npm:1.0.3"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.1.3"
+    call-bind: "npm:^1.0.6"
+    es-errors: "npm:^1.3.0"
     is-regex: "npm:^1.1.4"
-  checksum: 10c0/14a81a7e683f97b2d6e9c8be61fddcf8ed7a02f4e64a825515f96bb1738eb007145359313741d2704d28b55b703a0f6300c749dde7c1dbc13952a2b85048ede2
+  checksum: 10c0/900bf7c98dc58f08d8523b7012b468e4eb757afa624f198902c0643d7008ba777b0bdc35810ba0b758671ce887617295fb742b3f3968991b178ceca54cb07603
   languageName: node
   linkType: hard
 
@@ -19954,20 +19900,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:*, sass@npm:^1.23.7":
-  version: 1.69.5
-  resolution: "sass@npm:1.69.5"
-  dependencies:
-    chokidar: "npm:>=3.0.0 <4.0.0"
-    immutable: "npm:^4.0.0"
-    source-map-js: "npm:>=0.6.2 <2.0.0"
-  bin:
-    sass: sass.js
-  checksum: 10c0/a9003a9482f2e467fc412cfe58ba4fa14fb78bef7e1283ce5d64a065f8a31114ec3bbf5d4e724f94eb8512c32c768a6f91f228c7f16a26a300bbf4db293b5608
-  languageName: node
-  linkType: hard
-
-"sass@npm:^1.70.0":
+"sass@npm:^1.23.7, sass@npm:^1.70.0":
   version: 1.70.0
   resolution: "sass@npm:1.70.0"
   dependencies:
@@ -20085,17 +20018,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.5.3":
-  version: 7.5.3
-  resolution: "semver@npm:7.5.3"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/4cf3bab7e8cf8c2ae521fc4bcc50a4d6912a836360796b23b9f1c26f45d27a73f870e47664df4770bde0dd60dc4d4781a05fd49fe91d72376ea5519b9e791459
-  languageName: node
-  linkType: hard
-
 "semver@npm:^6.0.0, semver@npm:^6.2.0, semver@npm:^6.3.0, semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"
@@ -20106,13 +20028,13 @@ __metadata:
   linkType: hard
 
 "semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4":
-  version: 7.5.4
-  resolution: "semver@npm:7.5.4"
+  version: 7.6.0
+  resolution: "semver@npm:7.6.0"
   dependencies:
     lru-cache: "npm:^6.0.0"
   bin:
     semver: bin/semver.js
-  checksum: 10c0/5160b06975a38b11c1ab55950cb5b8a23db78df88275d3d8a42ccf1f29e55112ac995b3a26a522c36e3b5f76b0445f1eef70d696b8c7862a2b4303d7b0e7609e
+  checksum: 10c0/fbfe717094ace0aa8d6332d7ef5ce727259815bd8d8815700853f4faf23aacbd7192522f0dc5af6df52ef4fa85a355ebd2f5d39f554bd028200d6cf481ab9b53
   languageName: node
   linkType: hard
 
@@ -20158,11 +20080,11 @@ __metadata:
   linkType: hard
 
 "serialize-javascript@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "serialize-javascript@npm:6.0.1"
+  version: 6.0.2
+  resolution: "serialize-javascript@npm:6.0.2"
   dependencies:
     randombytes: "npm:^2.1.0"
-  checksum: 10c0/1af427f4fee3fee051f54ffe15f77068cff78a3c96d20f5c1178d20630d3ab122d8350e639d5e13cde8111ef9db9439b871305ffb185e24be0a2149cec230988
+  checksum: 10c0/2dd09ef4b65a1289ba24a788b1423a035581bef60817bea1f01eda8e3bda623f86357665fe7ac1b50f6d4f583f97db9615b3f07b2a2e8cbcb75033965f771dd2
   languageName: node
   linkType: hard
 
@@ -20192,15 +20114,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-function-length@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "set-function-length@npm:1.1.1"
+"set-function-length@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "set-function-length@npm:1.2.1"
   dependencies:
-    define-data-property: "npm:^1.1.1"
-    get-intrinsic: "npm:^1.2.1"
+    define-data-property: "npm:^1.1.2"
+    es-errors: "npm:^1.3.0"
+    function-bind: "npm:^1.1.2"
+    get-intrinsic: "npm:^1.2.3"
     gopd: "npm:^1.0.1"
-    has-property-descriptors: "npm:^1.0.0"
-  checksum: 10c0/a29e255c116c29e3323b851c4f46c58c91be9bb8b065f191e2ea1807cb2c839df56e3175732a498e0c6d54626ba6b6fef896bf699feb7ab70c42dc47eb247c95
+    has-property-descriptors: "npm:^1.0.1"
+  checksum: 10c0/1927e296599f2c04d210c1911f1600430a5e49e04a6d8bb03dca5487b95a574da9968813a2ced9a774bd3e188d4a6208352c8f64b8d4674cdb021dca21e190ca
   languageName: node
   linkType: hard
 
@@ -20278,13 +20202,14 @@ __metadata:
   linkType: hard
 
 "side-channel@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "side-channel@npm:1.0.4"
+  version: 1.0.5
+  resolution: "side-channel@npm:1.0.5"
   dependencies:
-    call-bind: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.0.2"
-    object-inspect: "npm:^1.9.0"
-  checksum: 10c0/054a5d23ee35054b2c4609b9fd2a0587760737782b5d765a9c7852264710cc39c6dcb56a9bbd6c12cd84071648aea3edb2359d2f6e560677eedadce511ac1da5
+    call-bind: "npm:^1.0.6"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.4"
+    object-inspect: "npm:^1.13.1"
+  checksum: 10c0/31312fecb68997ce2893b1f6d1fd07d6dd41e05cc938e82004f056f7de96dd9df599ef9418acdf730dda948e867e933114bd2efe4170c0146d1ed7009700c252
   languageName: node
   linkType: hard
 
@@ -20317,15 +20242,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sigstore@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "sigstore@npm:2.1.0"
+"sigstore@npm:^2.2.0":
+  version: 2.2.2
+  resolution: "sigstore@npm:2.2.2"
   dependencies:
-    "@sigstore/bundle": "npm:^2.1.0"
-    "@sigstore/protobuf-specs": "npm:^0.2.1"
-    "@sigstore/sign": "npm:^2.1.0"
-    "@sigstore/tuf": "npm:^2.1.0"
-  checksum: 10c0/44e9ed0ea337f5bb37cf54b065789be4fba4c2f45aa5c1cd19c33eee7bc5683a24df67e45b46698c6192bdf13e85052251ea994c4873c6d86d21392e0cd45618
+    "@sigstore/bundle": "npm:^2.2.0"
+    "@sigstore/core": "npm:^1.0.0"
+    "@sigstore/protobuf-specs": "npm:^0.3.0"
+    "@sigstore/sign": "npm:^2.2.3"
+    "@sigstore/tuf": "npm:^2.3.1"
+    "@sigstore/verify": "npm:^1.1.0"
+  checksum: 10c0/cf3d71d3ef886d84e2a885f25cc42392cfce98de7fbf70a4d6595fe273e813970cb5901e07f69f0902cc0348e5de33c1a8c535d7aae1d21d1a2bdf696108b190
   languageName: node
   linkType: hard
 
@@ -20437,12 +20364,12 @@ __metadata:
   linkType: hard
 
 "socks@npm:^2.6.2, socks@npm:^2.7.1":
-  version: 2.7.1
-  resolution: "socks@npm:2.7.1"
+  version: 2.8.0
+  resolution: "socks@npm:2.8.0"
   dependencies:
-    ip: "npm:^2.0.0"
+    ip-address: "npm:^9.0.5"
     smart-buffer: "npm:^4.2.0"
-  checksum: 10c0/43f69dbc9f34fc8220bc51c6eea1c39715ab3cfdb115d6e3285f6c7d1a603c5c75655668a5bbc11e3c7e2c99d60321fb8d7ab6f38cda6a215fadd0d6d0b52130
+  checksum: 10c0/208fa5d5ae47857653c4fc039d47e4c1e76313b24052151a949aa98f027f9aaba8fc6c5dc0f7f2d9ceeb94e9940217581f2d9798436563c1494b67a6cb68611f
   languageName: node
   linkType: hard
 
@@ -20554,9 +20481,9 @@ __metadata:
   linkType: hard
 
 "spdx-exceptions@npm:^2.1.0":
-  version: 2.3.0
-  resolution: "spdx-exceptions@npm:2.3.0"
-  checksum: 10c0/83089e77d2a91cb6805a5c910a2bedb9e50799da091f532c2ba4150efdef6e53f121523d3e2dc2573a340dc0189e648b03157097f65465b3a0c06da1f18d7e8a
+  version: 2.5.0
+  resolution: "spdx-exceptions@npm:2.5.0"
+  checksum: 10c0/37217b7762ee0ea0d8b7d0c29fd48b7e4dfb94096b109d6255b589c561f57da93bf4e328c0290046115961b9209a8051ad9f525e48d433082fc79f496a4ea940
   languageName: node
   linkType: hard
 
@@ -20571,9 +20498,9 @@ __metadata:
   linkType: hard
 
 "spdx-license-ids@npm:^3.0.0":
-  version: 3.0.16
-  resolution: "spdx-license-ids@npm:3.0.16"
-  checksum: 10c0/7d88b8f01308948bb3ea69c066448f2776cf3d35a410d19afb836743086ced1566f6824ee8e6d67f8f25aa81fa86d8076a666c60ac4528caecd55e93edb5114e
+  version: 3.0.17
+  resolution: "spdx-license-ids@npm:3.0.17"
+  checksum: 10c0/ddf9477b5afc70f1a7d3bf91f0b8e8a1c1b0fa65d2d9a8b5c991b1a2ba91b693d8b9749700119d5ce7f3fbf307ac421087ff43d321db472605e98a5804f80eac
   languageName: node
   linkType: hard
 
@@ -20604,6 +20531,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sprintf-js@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "sprintf-js@npm:1.1.3"
+  checksum: 10c0/09270dc4f30d479e666aee820eacd9e464215cdff53848b443964202bf4051490538e5dd1b42e1a65cf7296916ca17640aebf63dae9812749c7542ee5f288dec
+  languageName: node
+  linkType: hard
+
 "sprintf-js@npm:~1.0.2":
   version: 1.0.3
   resolution: "sprintf-js@npm:1.0.3"
@@ -20709,22 +20643,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^7.6.16":
-  version: 7.6.16
-  resolution: "storybook@npm:7.6.16"
+"storybook@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "storybook@npm:7.6.17"
   dependencies:
-    "@storybook/cli": "npm:7.6.16"
+    "@storybook/cli": "npm:7.6.17"
   bin:
     sb: ./index.js
     storybook: ./index.js
-  checksum: 10c0/381780117dd9121f5b59d14a30cb596c13432eb80d869743c618bf5e7f7d305f145af0e44c1f8580430f6b4f1fb782151d75a888f80d5e81bcac12b6e99807a5
+  checksum: 10c0/256b8ff26b69f622889488605e786c0742350a901037139dd469ec20f2e7031c326d65f2a202a5ee7baa407ff407a6746af2f01d91c0c617eda2013679a65271
   languageName: node
   linkType: hard
 
 "stream-shift@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "stream-shift@npm:1.0.1"
-  checksum: 10c0/b63a0d178cde34b920ad93e2c0c9395b840f408d36803b07c61416edac80ef9e480a51910e0ceea0d679cec90921bcd2cccab020d3a9fa6c73a98b0fbec132fd
+  version: 1.0.3
+  resolution: "stream-shift@npm:1.0.3"
+  checksum: 10c0/939cd1051ca750d240a0625b106a2b988c45fb5a3be0cebe9a9858cb01bc1955e8c7b9fac17a9462976bea4a7b704e317c5c2200c70f0ca715a3363b9aa4fd3b
   languageName: node
   linkType: hard
 
@@ -20804,13 +20738,13 @@ __metadata:
   linkType: hard
 
 "string-width@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "string-width@npm:7.0.0"
+  version: 7.1.0
+  resolution: "string-width@npm:7.1.0"
   dependencies:
     emoji-regex: "npm:^10.3.0"
     get-east-asian-width: "npm:^1.0.0"
     strip-ansi: "npm:^7.1.0"
-  checksum: 10c0/8ffaeeccf4a56ccce5b6235d0b99ee3a581e3e3e5d453708efe7aa8e264fa3a858b4fe2244310cb71c6a20d8c05921cedc8b2ccd88cbaad9f5c92051ff68edc6
+  checksum: 10c0/68a99fbc3bd3d8eb42886ff38dce819767dee55f606f74dfa4687a07dfd21262745d9683df0aa53bf81a5dd47c13da921a501925b974bec66a7ddd634fef0634
   languageName: node
   linkType: hard
 
@@ -20999,16 +20933,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-loader@npm:^3.3.1":
-  version: 3.3.3
-  resolution: "style-loader@npm:3.3.3"
-  peerDependencies:
-    webpack: ^5.0.0
-  checksum: 10c0/104bae8abd0627579dc14f3917cf65f1117e8098e3529872f09c26b5eee07933567b7be5c8ebf94d16e322b6e726dc569c5787111bf3786915850db4e351ef33
-  languageName: node
-  linkType: hard
-
-"style-loader@npm:^3.3.4":
+"style-loader@npm:^3.3.1, style-loader@npm:^3.3.4":
   version: 3.3.4
   resolution: "style-loader@npm:3.3.4"
   peerDependencies:
@@ -21045,13 +20970,13 @@ __metadata:
   linkType: hard
 
 "stylelint@npm:*":
-  version: 16.0.2
-  resolution: "stylelint@npm:16.0.2"
+  version: 16.2.1
+  resolution: "stylelint@npm:16.2.1"
   dependencies:
-    "@csstools/css-parser-algorithms": "npm:^2.3.2"
-    "@csstools/css-tokenizer": "npm:^2.2.1"
-    "@csstools/media-query-list-parser": "npm:^2.1.5"
-    "@csstools/selector-specificity": "npm:^3.0.0"
+    "@csstools/css-parser-algorithms": "npm:^2.5.0"
+    "@csstools/css-tokenizer": "npm:^2.2.3"
+    "@csstools/media-query-list-parser": "npm:^2.1.7"
+    "@csstools/selector-specificity": "npm:^3.0.1"
     balanced-match: "npm:^2.0.0"
     colord: "npm:^2.9.3"
     cosmiconfig: "npm:^9.0.0"
@@ -21060,7 +20985,7 @@ __metadata:
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     fastest-levenshtein: "npm:^1.0.16"
-    file-entry-cache: "npm:^7.0.2"
+    file-entry-cache: "npm:^8.0.0"
     global-modules: "npm:^2.0.0"
     globby: "npm:^11.1.0"
     globjoin: "npm:^0.1.4"
@@ -21070,14 +20995,14 @@ __metadata:
     is-plain-object: "npm:^5.0.0"
     known-css-properties: "npm:^0.29.0"
     mathml-tag-names: "npm:^2.1.3"
-    meow: "npm:^12.1.1"
+    meow: "npm:^13.1.0"
     micromatch: "npm:^4.0.5"
     normalize-path: "npm:^3.0.0"
     picocolors: "npm:^1.0.0"
-    postcss: "npm:^8.4.32"
+    postcss: "npm:^8.4.33"
     postcss-resolve-nested-selector: "npm:^0.1.1"
     postcss-safe-parser: "npm:^7.0.0"
-    postcss-selector-parser: "npm:^6.0.13"
+    postcss-selector-parser: "npm:^6.0.15"
     postcss-value-parser: "npm:^4.2.0"
     resolve-from: "npm:^5.0.0"
     string-width: "npm:^4.2.3"
@@ -21088,7 +21013,7 @@ __metadata:
     write-file-atomic: "npm:^5.0.1"
   bin:
     stylelint: bin/stylelint.mjs
-  checksum: 10c0/5ec755e209beb1877ff40d50f18c1ebb05bf251925da1f98f28fb3911e4031195eb86adaf641ac5cdb01ba973f4c999bc0c6b0270d08c1d5c070adbdd9e734cf
+  checksum: 10c0/eeaba06885e542c832e5cffc07b2d0dabdc5a72e6ad4d6cb3d01dcc260c29a712b0b935cbd40e059abd68a100e0563fbc617fc4c9bef3b14ecaf6eea651d9d9d
   languageName: node
   linkType: hard
 
@@ -21225,29 +21150,31 @@ __metadata:
   linkType: hard
 
 "svgo@npm:^3.0.2":
-  version: 3.1.0
-  resolution: "svgo@npm:3.1.0"
+  version: 3.2.0
+  resolution: "svgo@npm:3.2.0"
   dependencies:
     "@trysound/sax": "npm:0.2.0"
     commander: "npm:^7.2.0"
     css-select: "npm:^5.1.0"
-    css-tree: "npm:^2.2.1"
+    css-tree: "npm:^2.3.1"
     css-what: "npm:^6.1.0"
-    csso: "npm:5.0.5"
+    csso: "npm:^5.0.5"
     picocolors: "npm:^1.0.0"
   bin:
     svgo: ./bin/svgo
-  checksum: 10c0/b3f00b3319dee6ddc53f8b8ac5acef581860e1708c98b492169e096621edc1bdf46e3778099e3dffb5116bf0d4c074a686099843dbc020c73b3ccfae7b6a88f0
+  checksum: 10c0/28fa9061ccbcf2e3616d48d1feb613aaa05f8f290a329beb0e585914f1864385152934a7d4d683a4609fafbae3d51666633437c359c5c5ef74fb58ad09092a7c
   languageName: node
   linkType: hard
 
 "swc-loader@npm:^0.2.3":
-  version: 0.2.3
-  resolution: "swc-loader@npm:0.2.3"
+  version: 0.2.6
+  resolution: "swc-loader@npm:0.2.6"
+  dependencies:
+    "@swc/counter": "npm:^0.1.3"
   peerDependencies:
     "@swc/core": ^1.2.147
     webpack: ">=2"
-  checksum: 10c0/cb3f9b116fbd292b881e804a4fe66cd6d543a7de2572f5a68e067e4780ee2d59a8da87a90736ba6e8e286e4368c98214ae3486b1b872080292814e5d3062f09c
+  checksum: 10c0/b06926c5cb153931589c2166aa4c7c052cc53c68758acdda480d1eb59ecddf7d74b168e33166c4f807cc9dbae4395de9d80a14ad43e265fffaa775638abf71ce
   languageName: node
   linkType: hard
 
@@ -21272,13 +21199,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"synckit@npm:^0.8.5":
-  version: 0.8.6
-  resolution: "synckit@npm:0.8.6"
+"synckit@npm:^0.8.6":
+  version: 0.8.8
+  resolution: "synckit@npm:0.8.8"
   dependencies:
-    "@pkgr/utils": "npm:^2.4.2"
+    "@pkgr/core": "npm:^0.1.0"
     tslib: "npm:^2.6.2"
-  checksum: 10c0/200528062e3915a0190a4c6b1e01436fcfdf812e2e8d977746746f3998bb4182d758af760e51b06a64f8323e705735aff7b4b3efc4a0ab5f75eaccc044a8cfcc
+  checksum: 10c0/c3d3aa8e284f3f84f2f868b960c9f49239b364e35f6d20825a448449a3e9c8f49fe36cdd5196b30615682f007830d46f2ea354003954c7336723cb821e4b6519
   languageName: node
   linkType: hard
 
@@ -21400,29 +21327,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.3.1, terser-webpack-plugin@npm:^5.3.7":
-  version: 5.3.9
-  resolution: "terser-webpack-plugin@npm:5.3.9"
-  dependencies:
-    "@jridgewell/trace-mapping": "npm:^0.3.17"
-    jest-worker: "npm:^27.4.5"
-    schema-utils: "npm:^3.1.1"
-    serialize-javascript: "npm:^6.0.1"
-    terser: "npm:^5.16.8"
-  peerDependencies:
-    webpack: ^5.1.0
-  peerDependenciesMeta:
-    "@swc/core":
-      optional: true
-    esbuild:
-      optional: true
-    uglify-js:
-      optional: true
-  checksum: 10c0/8a757106101ea1504e5dc549c722506506e7d3f0d38e72d6c8108ad814c994ca0d67ac5d0825ba59704a4b2b04548201b2137f198bfce897b09fe9e36727a1e9
-  languageName: node
-  linkType: hard
-
-"terser-webpack-plugin@npm:^5.3.10":
+"terser-webpack-plugin@npm:^5.3.1, terser-webpack-plugin@npm:^5.3.10":
   version: 5.3.10
   resolution: "terser-webpack-plugin@npm:5.3.10"
   dependencies:
@@ -21444,23 +21349,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser@npm:^5.10.0, terser@npm:^5.16.8":
-  version: 5.26.0
-  resolution: "terser@npm:5.26.0"
-  dependencies:
-    "@jridgewell/source-map": "npm:^0.3.3"
-    acorn: "npm:^8.8.2"
-    commander: "npm:^2.20.0"
-    source-map-support: "npm:~0.5.20"
-  bin:
-    terser: bin/terser
-  checksum: 10c0/3906289c6bacd75804a47a583cdafefbd76c5edb39435369755c7b1592e57586fb2f4bddf6eb37a807d6e782171dbf0aa7bbdc80fd5b77b2f2b62196cac49b62
-  languageName: node
-  linkType: hard
-
-"terser@npm:^5.26.0":
-  version: 5.27.0
-  resolution: "terser@npm:5.27.0"
+"terser@npm:^5.10.0, terser@npm:^5.26.0":
+  version: 5.27.1
+  resolution: "terser@npm:5.27.1"
   dependencies:
     "@jridgewell/source-map": "npm:^0.3.3"
     acorn: "npm:^8.8.2"
@@ -21468,7 +21359,7 @@ __metadata:
     source-map-support: "npm:~0.5.20"
   bin:
     terser: bin/terser
-  checksum: 10c0/bed0d39d9a7f2b82c87173e48081c46426a8820ba1dcb864bbfccd2df2b7fb8498a7ea4c8ef045ccce5713b23a6b4c3a784967f1b9f3115adaa7f51712f6e6ae
+  checksum: 10c0/90357abb6849f6d8edf43620de341e05d4995b215d81ffe88168535e06eb8d7af364698f1789ec58b5c87a1cb87ca103f80b83ecdf1dbbd96190aea956dc2a4a
   languageName: node
   linkType: hard
 
@@ -21504,12 +21395,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"thingies@npm:^1.11.1":
-  version: 1.15.0
-  resolution: "thingies@npm:1.15.0"
+"thingies@npm:^1.11.1, thingies@npm:^1.14.1":
+  version: 1.16.0
+  resolution: "thingies@npm:1.16.0"
   peerDependencies:
     tslib: ^2
-  checksum: 10c0/62d855eedcaeec748d6b99a35052ab2b476ac5ec4fb22b89b3bf2056e97e6750f234c7e2fc541c400d08fc301a6ae08077ea306a3fb99ba6002acb957b710081
+  checksum: 10c0/edc5a8a529eb4885b2f638c424521521de7d0099b33df0342c9ae6c23891e69e803206f71f628726a48f2093099c43c0c552ab883c95874d78f3c861cdcdad65
   languageName: node
   linkType: hard
 
@@ -21544,13 +21435,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"titleize@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "titleize@npm:3.0.0"
-  checksum: 10c0/5ae6084ba299b5782f95e3fe85ea9f0fa4d74b8ae722b6b3208157e975589fbb27733aeba4e5080fa9314a856044ef52caa61b87caea4b1baade951a55c06336
-  languageName: node
-  linkType: hard
-
 "tmp@npm:^0.0.33":
   version: 0.0.33
   resolution: "tmp@npm:0.0.33"
@@ -21600,9 +21484,9 @@ __metadata:
   linkType: hard
 
 "tocbot@npm:^4.20.1":
-  version: 4.23.0
-  resolution: "tocbot@npm:4.23.0"
-  checksum: 10c0/e112c569913600b98a451fc114ba293c7365e529b6b22c34a4ba244a22a359d79aaafb0c752022b1c9a6e2d04692e436700c0b95d534da9ee31c0f310e96761b
+  version: 4.25.0
+  resolution: "tocbot@npm:4.25.0"
+  checksum: 10c0/b6ca2ca5a3549e7c4007843e0b41cb113656006a59f5aa2328bcccdc8b780f25b642c1d0d64e02255c97a3ba5072ae5085a403cd2b560fb3ee30bd59924fe273
   languageName: node
   linkType: hard
 
@@ -21672,11 +21556,11 @@ __metadata:
   linkType: hard
 
 "ts-api-utils@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "ts-api-utils@npm:1.0.3"
+  version: 1.2.1
+  resolution: "ts-api-utils@npm:1.2.1"
   peerDependencies:
     typescript: ">=4.2.0"
-  checksum: 10c0/9408338819c3aca2a709f0bc54e3f874227901506cacb1163612a6c8a43df224174feb965a5eafdae16f66fc68fd7bfee8d3275d0fa73fbb8699e03ed26520c9
+  checksum: 10c0/8ddb493e7ae581d3f57a2e469142feb60b420d4ad8366ab969fe8e36531f8f301f370676b47e8d97f28b5f5fd10d6f2d55f656943a8546ef95e35ce5cf117754
   languageName: node
   linkType: hard
 
@@ -21699,8 +21583,8 @@ __metadata:
   linkType: hard
 
 "ts-jest@npm:^29.1.1":
-  version: 29.1.1
-  resolution: "ts-jest@npm:29.1.1"
+  version: 29.1.2
+  resolution: "ts-jest@npm:29.1.2"
   dependencies:
     bs-logger: "npm:0.x"
     fast-json-stable-stringify: "npm:2.x"
@@ -21727,7 +21611,7 @@ __metadata:
       optional: true
   bin:
     ts-jest: cli.js
-  checksum: 10c0/6c45e0aeeff9cc54a64f931c43e1b99f4a1f0ddf44786cc128e7e55603ab7473c8c8f62fd83bd7e51bfe83e3c0c683132152efaeb844516bf7c923f4e92d157d
+  checksum: 10c0/c2f51f0241f89d127d41392decbcb83b5dfd5e57ab9d50220aa7b7e2f9b3f3b07ccdbba33311284df1c41941879e4ddfad44b15a9d0da4b74bd1b98702b729df
   languageName: node
   linkType: hard
 
@@ -21768,7 +21652,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.0, tslib@npm:^2.6.1, tslib@npm:^2.6.2":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.1, tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
@@ -21797,14 +21681,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tuf-js@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "tuf-js@npm:2.1.0"
+"tuf-js@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "tuf-js@npm:2.2.0"
   dependencies:
     "@tufjs/models": "npm:2.0.0"
     debug: "npm:^4.3.4"
     make-fetch-happen: "npm:^13.0.0"
-  checksum: 10c0/aba49761e5f06776632c1d7855488dc9f6fb030c483ce011cd5ffb168e2145c634bf3161e762cd7f90e5b5d009e6ac57b5e62dd11bdb9f20a072a98aae96709d
+  checksum: 10c0/9a11793feed2aa798c1a50107a0f031034b4a670016684e0d0b7d97be3fff7f98f53783c30120bce795c16d58f1b951410bb673aae92cc2437d641cc7457e215
   languageName: node
   linkType: hard
 
@@ -21897,14 +21781,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-buffer@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "typed-array-buffer@npm:1.0.0"
+"typed-array-buffer@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "typed-array-buffer@npm:1.0.1"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.2.1"
-    is-typed-array: "npm:^1.1.10"
-  checksum: 10c0/ebad66cdf00c96b1395dffc7873169cf09801fca5954507a484f41f253feb1388d815db297b0b3bb8ce7421eac6f7ff45e2ec68450a3d68408aa4ae02fcf3a6c
+    call-bind: "npm:^1.0.6"
+    es-errors: "npm:^1.3.0"
+    is-typed-array: "npm:^1.1.13"
+  checksum: 10c0/fd4baf00e92aec8adae46253ae5aa4c5a2cc1659acd44abdef8a3212f4bcf4915a6712669f1bbf5503ff36c94f069963f27b1914bdd06e0093f4a9a390d2e1b8
   languageName: node
   linkType: hard
 
@@ -21994,6 +21878,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ufo@npm:^1.3.2":
+  version: 1.4.0
+  resolution: "ufo@npm:1.4.0"
+  checksum: 10c0/d9a3cb8c5fd13356e0af661362244fd0a901edcdd08996f42553271007cae01e85dcec29a3303a87ddab6aa705cbd630332aaa8c268d037483536b198fa67a7c
+  languageName: node
+  linkType: hard
+
 "uglify-js@npm:^3.1.4":
   version: 3.17.4
   resolution: "uglify-js@npm:3.17.4"
@@ -22185,14 +22076,14 @@ __metadata:
   linkType: hard
 
 "unplugin@npm:^1.3.1":
-  version: 1.5.1
-  resolution: "unplugin@npm:1.5.1"
+  version: 1.7.1
+  resolution: "unplugin@npm:1.7.1"
   dependencies:
-    acorn: "npm:^8.11.2"
+    acorn: "npm:^8.11.3"
     chokidar: "npm:^3.5.3"
     webpack-sources: "npm:^3.2.3"
-    webpack-virtual-modules: "npm:^0.6.0"
-  checksum: 10c0/08cee7d100de3b8697d33eaa32405d821d0f51600640ce79e26f4258ddedcd9ac4c022f0453d6d978e9f75fd939ba9553440827987b2b03078f7087f4bef7c96
+    webpack-virtual-modules: "npm:^0.6.1"
+  checksum: 10c0/4e358b4d45aeab6c654943edf63c0f4ad22831386eba414065c4b535c84ec4e295cca145f263f878059ea96e19c904835af25dd5f7f46f3c4a49302e621d3cab
   languageName: node
   linkType: hard
 
@@ -22210,7 +22101,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"upath@npm:2.0.1":
+"upath@npm:2.0.1, upath@npm:^2.0.1":
   version: 2.0.1
   resolution: "upath@npm:2.0.1"
   checksum: 10c0/79e8e1296b00e24a093b077cfd7a238712d09290c850ce59a7a01458ec78c8d26dcc2ab50b1b9d6a84dabf6511fb4969afeb8a5c9a001aa7272b9cc74c34670f
@@ -22334,8 +22225,8 @@ __metadata:
   linkType: hard
 
 "use-callback-ref@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "use-callback-ref@npm:1.3.0"
+  version: 1.3.1
+  resolution: "use-callback-ref@npm:1.3.1"
   dependencies:
     tslib: "npm:^2.0.0"
   peerDependencies:
@@ -22344,7 +22235,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/8a0867ffd441f358c66d79567970a745cc78ac2f98840a81c1fa749a525e8716116c645497d886a815e1dcf40ad81a107ebd6a7d15fd9ab5925c44a994a1d89a
+  checksum: 10c0/6666cd62e13053d03e453b5199037cb8f6475a8f55afd664ff488bd8f2ee2ede4da3b220dd7e60f5ecd4926133364fbf4b1aed463eeb8203e7c5be3b1533b59b
   languageName: node
   linkType: hard
 
@@ -22513,12 +22404,12 @@ __metadata:
   linkType: hard
 
 "vue-template-compiler@npm:^2.6.12":
-  version: 2.7.15
-  resolution: "vue-template-compiler@npm:2.7.15"
+  version: 2.7.16
+  resolution: "vue-template-compiler@npm:2.7.16"
   dependencies:
     de-indent: "npm:^1.0.2"
     he: "npm:^1.2.0"
-  checksum: 10c0/a826e8a733281d8d9a4b05b0fe039d56ebf9f94ea5bd2ae39641fd98fa313cf4be1415b3cfa4339ffde1f6b158283d05770eae86840c105e8a5887764759b9f2
+  checksum: 10c0/66667ffd5095b707f169c902c4f1a011e9d5ab99fc228e4dac14eb5ca7f107ed99bff261b21578a4b391d2f3d320a8050e754404443472acad13ddaa4bd7bae2
   languageName: node
   linkType: hard
 
@@ -22620,13 +22511,13 @@ __metadata:
   linkType: hard
 
 "webpack-hot-middleware@npm:^2.25.1":
-  version: 2.25.4
-  resolution: "webpack-hot-middleware@npm:2.25.4"
+  version: 2.26.1
+  resolution: "webpack-hot-middleware@npm:2.26.1"
   dependencies:
     ansi-html-community: "npm:0.0.8"
     html-entities: "npm:^2.1.0"
     strip-ansi: "npm:^6.0.0"
-  checksum: 10c0/c0702d308a39bdbc9277d66df50272e8c358c2238cecb0881df57136f54cb7a3d8291320b13075325b58f7a3cbf7a1ef10829554a5bc2ddfa3effbf416dc8e8c
+  checksum: 10c0/13a3e78009e373b4ee990ffe1d4d49046e9893148a7106f063e11f962d02b744ea58b1dec25f5e76723c9dce678b9e68c883e7f2af2940aaf4de7aab31264c83
   languageName: node
   linkType: hard
 
@@ -22644,53 +22535,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-virtual-modules@npm:^0.6.0":
+"webpack-virtual-modules@npm:^0.6.1":
   version: 0.6.1
   resolution: "webpack-virtual-modules@npm:0.6.1"
   checksum: 10c0/696bdc1acf3806374bdeb4b9b9856b79ee70b31e92f325dfab9b8c8c7e14bb6ddffa9f895a214770c4fb8fea45a21f34ca64310f74e877292a90f4a9966c9c2f
   languageName: node
   linkType: hard
 
-"webpack@npm:5":
-  version: 5.89.0
-  resolution: "webpack@npm:5.89.0"
-  dependencies:
-    "@types/eslint-scope": "npm:^3.7.3"
-    "@types/estree": "npm:^1.0.0"
-    "@webassemblyjs/ast": "npm:^1.11.5"
-    "@webassemblyjs/wasm-edit": "npm:^1.11.5"
-    "@webassemblyjs/wasm-parser": "npm:^1.11.5"
-    acorn: "npm:^8.7.1"
-    acorn-import-assertions: "npm:^1.9.0"
-    browserslist: "npm:^4.14.5"
-    chrome-trace-event: "npm:^1.0.2"
-    enhanced-resolve: "npm:^5.15.0"
-    es-module-lexer: "npm:^1.2.1"
-    eslint-scope: "npm:5.1.1"
-    events: "npm:^3.2.0"
-    glob-to-regexp: "npm:^0.4.1"
-    graceful-fs: "npm:^4.2.9"
-    json-parse-even-better-errors: "npm:^2.3.1"
-    loader-runner: "npm:^4.2.0"
-    mime-types: "npm:^2.1.27"
-    neo-async: "npm:^2.6.2"
-    schema-utils: "npm:^3.2.0"
-    tapable: "npm:^2.1.1"
-    terser-webpack-plugin: "npm:^5.3.7"
-    watchpack: "npm:^2.4.0"
-    webpack-sources: "npm:^3.2.3"
-  peerDependenciesMeta:
-    webpack-cli:
-      optional: true
-  bin:
-    webpack: bin/webpack.js
-  checksum: 10c0/2562bf48788d651634fb7db6a5378c2fe3fce7f66831af38468da3944bd98756d68efea94a6909593993fb57b2d14cf802cbef2c83c6ef0047f7f606d59bec50
-  languageName: node
-  linkType: hard
-
-"webpack@npm:^5.90.1":
-  version: 5.90.1
-  resolution: "webpack@npm:5.90.1"
+"webpack@npm:5, webpack@npm:^5.90.1":
+  version: 5.90.2
+  resolution: "webpack@npm:5.90.2"
   dependencies:
     "@types/eslint-scope": "npm:^3.7.3"
     "@types/estree": "npm:^1.0.5"
@@ -22721,7 +22575,7 @@ __metadata:
       optional: true
   bin:
     webpack: bin/webpack.js
-  checksum: 10c0/c36b86e5aa42f07c865cc5221d88b84bc62267ca2e60edaf69e8fccebe284c8199d352701697546a0fa6599d648a05ea427607e854c61ccc269b9c230fb25efa
+  checksum: 10c0/8ade2720dd91b6bcfa22ff4fabfeef474c9ab4cf716c4b6501dc0b0b1dfcaedb54d50f71b9e643c0e831f0996f0d8c1fc23d3faf9fb2d860c04b3b843358704e
   languageName: node
   linkType: hard
 
@@ -22820,16 +22674,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.11, which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9":
-  version: 1.1.13
-  resolution: "which-typed-array@npm:1.1.13"
+"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9":
+  version: 1.1.14
+  resolution: "which-typed-array@npm:1.1.14"
   dependencies:
-    available-typed-arrays: "npm:^1.0.5"
-    call-bind: "npm:^1.0.4"
+    available-typed-arrays: "npm:^1.0.6"
+    call-bind: "npm:^1.0.5"
     for-each: "npm:^0.3.3"
     gopd: "npm:^1.0.1"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/9f5f1c42918df3d5b91c4315ed0051d5d874370998bf095c9ae0df374f0881f85094e3c384b8fb08ab7b4d4f54ba81c0aff75da6226e7c0589b83dfbec1cd4c9
+    has-tostringtag: "npm:^1.0.1"
+  checksum: 10c0/0960f1e77807058819451b98c51d4cd72031593e8de990b24bd3fc22e176f5eee22921d68d852297c786aec117689f0423ed20aa4fde7ce2704d680677891f56
   languageName: node
   linkType: hard
 
@@ -22885,13 +22739,13 @@ __metadata:
   linkType: hard
 
 "winston-transport@npm:^4.5.0":
-  version: 4.6.0
-  resolution: "winston-transport@npm:4.6.0"
+  version: 4.7.0
+  resolution: "winston-transport@npm:4.7.0"
   dependencies:
     logform: "npm:^2.3.2"
     readable-stream: "npm:^3.6.0"
     triple-beam: "npm:^1.3.0"
-  checksum: 10c0/43f7f03dfbaeb2a37ddcfadf5f03a6802c77fb8800a384e9aeecce8d233272ed8f18c50f377045a7e154fd6c951e31c9af1bbcd7a3db9246518af42b6f961cc1
+  checksum: 10c0/cd16f3d0ab56697f93c4899e0eb5f89690f291bb6cf309194819789326a7c7ed943ef00f0b2fab513b114d371314368bde1a7ae6252ad1516181a79f90199cd2
   languageName: node
   linkType: hard
 
@@ -23063,7 +22917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.11.0":
+"ws@npm:^8.11.0, ws@npm:^8.2.3":
   version: 8.16.0
   resolution: "ws@npm:8.16.0"
   peerDependencies:
@@ -23078,21 +22932,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.2.3":
-  version: 8.15.1
-  resolution: "ws@npm:8.15.1"
-  peerDependencies:
-    bufferutil: ^4.0.1
-    utf-8-validate: ">=5.0.2"
-  peerDependenciesMeta:
-    bufferutil:
-      optional: true
-    utf-8-validate:
-      optional: true
-  checksum: 10c0/9964360dd5ab35c7376bd7c4295a3c8bd44ea0838c9413742548a6fb3ec371fc6c18552d5b8e76bdc21536db1909765612815bae072674b5ec69971605395a96
-  languageName: node
-  linkType: hard
-
 "xdg-basedir@npm:^4.0.0":
   version: 4.0.0
   resolution: "xdg-basedir@npm:4.0.0"