diff --git a/.storybook/main.ts b/.storybook/main.ts
index b4d00a6f8..a8e92fdb1 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -24,13 +24,6 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-interactions',
     '@geometricpanda/storybook-addon-badges',
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-        transcludeMarkdown: true,
-      },
-    },
     {
       name: '@storybook/addon-styling',
       options: {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9d14913c..a33a96e4f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [13.8.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.7.1...v13.8.0) (2023-12-06)
+
+
+### Features
+
+* separate ClickableStyles from core components ([#1759](https://github.com/chanzuckerberg/edu-design-system/issues/1759)) ([c7fc2af](https://github.com/chanzuckerberg/edu-design-system/commit/c7fc2afd989dfbb256279ca2766f18d660bab918))
+* **Tag:** mark yield color variant as deprecated ([#1815](https://github.com/chanzuckerberg/edu-design-system/issues/1815)) ([bd14083](https://github.com/chanzuckerberg/edu-design-system/commit/bd1408348dfc30a0b892301aea800b378b7ca9b4))
+
+
+### Bug Fixes
+
+* remove duplicate addon-docs loading ([#1816](https://github.com/chanzuckerberg/edu-design-system/issues/1816)) ([42a634c](https://github.com/chanzuckerberg/edu-design-system/commit/42a634cb0c934735052afbd742b2cef086b4d827))
+
 ### [13.7.1](https://github.com/chanzuckerberg/edu-design-system/compare/v13.7.0...v13.7.1) (2023-11-16)
 
 
diff --git a/package.json b/package.json
index b80ae58db..3f6974623 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "13.7.1",
+  "version": "13.8.0",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <edu-frontend-infra@chanzuckerberg.com>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -91,7 +91,7 @@
     "@headlessui/react": "^1.7.17",
     "@popperjs/core": "^2.11.8",
     "@tippyjs/react": "^4.2.6",
-    "@types/lodash": "^4.14.201",
+    "@types/lodash": "^4.14.202",
     "clsx": "^2.0.0",
     "graphemer": "^1.4.0",
     "lilconfig": "^2.1.0",
@@ -106,7 +106,7 @@
     "svg4everybody": "^2.1.9"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@chanzuckerberg/axe-storybook-testing": "^7.1.3",
@@ -115,42 +115,41 @@
     "@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9",
     "@chanzuckerberg/eslint-plugin-stories": "^3.2.14",
     "@chanzuckerberg/story-utils": "^4.0.0",
-    "@commitlint/cli": "^18.4.1",
-    "@commitlint/config-conventional": "^18.4.0",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
-    "@omlet/cli": "^1.0.1-beta.38",
+    "@omlet/cli": "^1.0.1-beta.39",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-docs": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-a11y": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-webpack5": "^7.6.3",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.8",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
+    "@types/jest": "^29.5.10",
+    "@types/node": "^20.10.1",
+    "@types/react": "^18.2.39",
     "@types/react-beautiful-dnd": "^13.1.7",
-    "@types/react-dom": "^18.2.15",
+    "@types/react-dom": "^18.2.17",
     "@types/react-portal": "^4.0.6",
     "axe-core": "4.8.2",
-    "chromatic": "^9.0.0",
+    "chromatic": "^9.1.0",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^6.1.2",
+    "eslint-plugin-testing-library": "^6.2.0",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -168,11 +167,11 @@
     "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.4.0",
+    "rollup": "^4.6.1",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "standard-version": "^9.5.0",
-    "storybook": "^7.5.3",
+    "storybook": "^7.6.3",
     "style-dictionary": "^3.9.0",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
index 59823a6bc..8ae975d86 100644
--- a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
+++ b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         data-testid="accordion-button"
         id="headlessui-disclosure-button-:r0:"
@@ -59,7 +59,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r15:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--empty"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--empty"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r14:"
         type="button"
@@ -82,7 +82,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r17:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r16:"
         type="button"
@@ -124,7 +124,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r19:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r18:"
         type="button"
@@ -166,7 +166,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1b:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1a:"
         type="button"
@@ -218,7 +218,7 @@ exports[`<Accordion /> Small story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
         data-headlessui-state=""
         data-testid="accordion-button"
         id="headlessui-disclosure-button-:r2:"
@@ -265,7 +265,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r5:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state="open"
         data-testid="accordion-button-1"
         id="headlessui-disclosure-button-:r4:"
@@ -308,7 +308,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         data-testid="accordion-button-2"
         id="headlessui-disclosure-button-:r6:"
@@ -343,7 +343,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         data-testid="accordion-button-3"
         id="headlessui-disclosure-button-:r8:"
@@ -378,7 +378,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         data-testid="accordion-button-4"
         id="headlessui-disclosure-button-:ra:"
@@ -425,7 +425,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1d:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1c:"
         type="button"
@@ -467,7 +467,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1f:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1e:"
         type="button"
@@ -509,7 +509,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1h:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1g:"
         type="button"
@@ -551,7 +551,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1j:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1i:"
         type="button"
@@ -604,7 +604,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:rl:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
         data-headlessui-state="open"
         data-testid="accordion-button-1"
         id="headlessui-disclosure-button-:rk:"
@@ -647,7 +647,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
         data-headlessui-state=""
         data-testid="accordion-button-2"
         id="headlessui-disclosure-button-:rm:"
@@ -682,7 +682,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
         data-headlessui-state=""
         data-testid="accordion-button-3"
         id="headlessui-disclosure-button-:ro:"
@@ -717,7 +717,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
         data-headlessui-state=""
         data-testid="accordion-button-4"
         id="headlessui-disclosure-button-:rq:"
@@ -764,7 +764,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1t:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1s:"
         type="button"
@@ -806,7 +806,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1v:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1u:"
         type="button"
@@ -848,7 +848,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r21:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r20:"
         type="button"
@@ -890,7 +890,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r23:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--outline"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r22:"
         type="button"
@@ -943,7 +943,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:rd:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
         data-headlessui-state="open"
         data-testid="accordion-button-1"
         id="headlessui-disclosure-button-:rc:"
@@ -986,7 +986,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
         data-headlessui-state=""
         data-testid="accordion-button-2"
         id="headlessui-disclosure-button-:re:"
@@ -1021,7 +1021,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
         data-headlessui-state=""
         data-testid="accordion-button-3"
         id="headlessui-disclosure-button-:rg:"
@@ -1056,7 +1056,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
         data-headlessui-state=""
         data-testid="accordion-button-4"
         id="headlessui-disclosure-button-:ri:"
@@ -1103,7 +1103,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1l:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1k:"
         type="button"
@@ -1145,7 +1145,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1n:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1m:"
         type="button"
@@ -1187,7 +1187,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1p:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1o:"
         type="button"
@@ -1229,7 +1229,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r1r:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r1q:"
         type="button"
@@ -1282,7 +1282,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:rt:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state="open"
         data-testid="accordion-button-1"
         id="headlessui-disclosure-button-:rs:"
@@ -1325,7 +1325,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state=""
         data-testid="accordion-button-2"
         id="headlessui-disclosure-button-:ru:"
@@ -1360,7 +1360,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state=""
         data-testid="accordion-button-3"
         id="headlessui-disclosure-button-:r10:"
@@ -1395,7 +1395,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state=""
         data-testid="accordion-button-4"
         id="headlessui-disclosure-button-:r12:"
@@ -1442,7 +1442,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r25:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r24:"
         type="button"
@@ -1484,7 +1484,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r27:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r26:"
         type="button"
@@ -1526,7 +1526,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r29:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r28:"
         type="button"
@@ -1568,7 +1568,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       <button
         aria-controls="headlessui-disclosure-panel-:r2b:"
         aria-expanded="true"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state="open"
         id="headlessui-disclosure-button-:r2a:"
         type="button"
@@ -1620,7 +1620,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         id="headlessui-disclosure-button-:r2g:"
         type="button"
@@ -1672,7 +1672,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         id="headlessui-disclosure-button-:r2i:"
         type="button"
@@ -1735,7 +1735,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         id="headlessui-disclosure-button-:r2k:"
         type="button"
@@ -1784,7 +1784,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         id="headlessui-disclosure-button-:r2m:"
         type="button"
@@ -1844,7 +1844,7 @@ exports[`<Accordion /> UsingRenderProp story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         data-testid="accordion-button"
         id="headlessui-disclosure-button-:r2c:"
@@ -1891,7 +1891,7 @@ exports[`<Accordion /> WithLargeHeader story renders snapshot 1`] = `
     >
       <button
         aria-expanded="false"
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        class="button button--lg button--icon button--neutral button--full-width accordion-button"
         data-headlessui-state=""
         id="headlessui-disclosure-button-:r2e:"
         type="button"
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index f14308b54..34a9c3f22 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -1,17 +1,484 @@
+@import '../../design-tokens/mixins.css';
+
 /*------------------------------------*\
     # BUTTON
 \*------------------------------------*/
 
 /**
- * General disabled button styles
- */
+* Styled clickable element that is based on the native <button> element.
+*/
 .button {
-  &:disabled,
-  &:disabled:hover {
-    cursor: not-allowed;
-  }
+ font: var(--eds-theme-typography-button-label);
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ /* Adds a gap between children to automatically handle spacing between icons and text. */
+ gap: 0.75rem;
+ border-width: var(--eds-theme-border-width);
+ border-style: solid;
+ border-radius: var(--eds-theme-box-button-border-radius);
+ cursor: pointer;
+ transition-property: color, background-color, border-color;
+ transition-duration: var(--eds-anim-fade-quick);
+ transition-timing-function: var(--eds-anim-ease);
+
+ :where(svg) {
+   /* Adds default size for icons passed in for consistency. */
+   --icon-size-default: 2em;
+   transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+
+   @media screen and (prefers-reduced-motion) {
+     transition: none;
+   }
+ }
+
+ &:focus-visible {
+   @mixin focus;
+ }
+
+ @supports not selector(:focus-visible) {
+   &:focus {
+     @mixin focus;
+   }
+ }
+
+ @media screen and (prefers-reduced-motion) {
+   transition: none;
+ }
+
+ &:disabled,
+ &:disabled:hover {
+   cursor: not-allowed;
+ }
+}
+
+/**
+* Margin 0 added becuase Safari has margin on buttons.
+* Needs `:where` pseudoclass to reduce specificity so class overrides
+*    for margin can happen where used.
+*/
+:where(.button) {
+ margin: 0;
 }
 
+/**
+* Primary brand clickable style
+*/
+:where(.button--primary).button--brand {
+ border-color: var(--eds-theme-color-button-primary-brand-border);
+ background-color: var(--eds-theme-color-button-primary-brand-background);
+ color: var(--eds-theme-color-button-primary-brand-text);
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-primary-brand-border-hover);
+   background-color: var(--eds-theme-color-button-primary-brand-background-hover);
+   color: var(--eds-theme-color-button-primary-brand-text-hover);
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-primary-brand-border-active);
+   background-color: var(--eds-theme-color-button-primary-brand-background-active);
+   color: var(--eds-theme-color-button-primary-brand-text-active);
+ }
+}
+
+/**
+* Primary error clickable style
+*/
+:where(.button--primary).button--error {
+ border-color: var(--eds-theme-color-button-primary-error-border);
+ background-color: var(--eds-theme-color-button-primary-error-background);
+ color: var(--eds-theme-color-button-primary-error-text);
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-primary-error-border-hover);
+   background-color: var(--eds-theme-color-button-primary-error-background-hover);
+   color: var(--eds-theme-color-button-primary-error-text-hover);
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-primary-error-border-active);
+   background-color: var(--eds-theme-color-button-primary-error-background-active);
+   color: var(--eds-theme-color-button-primary-error-text-active);
+ }
+}
+
+/**
+* Secondary brand clickable style
+*/
+:where(.button--secondary).button--brand {
+ border-color: var(--eds-theme-color-button-secondary-brand-border);
+ background-color: var(--eds-theme-color-button-secondary-brand-background);
+ color: var(--eds-theme-color-button-secondary-brand-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-brand-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-brand-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-brand-background-hover);
+   color: var(--eds-theme-color-button-secondary-brand-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-brand-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-brand-border-active);
+   background-color: var(--eds-theme-color-button-secondary-brand-background-active);
+   color: var(--eds-theme-color-button-secondary-brand-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-brand-icon-focus);
+   }
+ }
+}
+
+/**
+* Secondary neutral clickable style
+*/
+:where(.button--secondary).button--neutral {
+ border-color: var(--eds-theme-color-button-secondary-neutral-border);
+ background-color: var(--eds-theme-color-button-secondary-neutral-background);
+ color: var(--eds-theme-color-button-secondary-neutral-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-neutral-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-neutral-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-neutral-background-hover);
+   color: var(--eds-theme-color-button-secondary-neutral-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-neutral-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-neutral-border-active);
+   background-color: var(--eds-theme-color-button-secondary-neutral-background-active);
+   color: var(--eds-theme-color-button-secondary-neutral-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-neutral-icon-active);
+   }
+ }
+}
+
+/**
+* Secondary success clickable style
+*/
+:where(.button--secondary).button--success {
+ border-color: var(--eds-theme-color-button-secondary-success-border);
+ background-color: var(--eds-theme-color-button-secondary-success-background);
+ color: var(--eds-theme-color-button-secondary-success-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-success-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-success-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-success-background-hover);
+   color: var(--eds-theme-color-button-secondary-success-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-success-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-success-border-active);
+   background-color: var(--eds-theme-color-button-secondary-success-background-active);
+   color: var(--eds-theme-color-button-secondary-success-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-success-icon-active);
+   }
+ }
+}
+
+/**
+* Secondary warning clickable style
+*/
+:where(.button--secondary).button--warning {
+ border-color: var(--eds-theme-color-button-secondary-warning-border);
+ background-color: var(--eds-theme-color-button-secondary-warning-background);
+ color: var(--eds-theme-color-button-secondary-warning-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-warning-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-warning-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-warning-background-hover);
+   color: var(--eds-theme-color-button-secondary-warning-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-warning-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-warning-border-active);
+   background-color: var(--eds-theme-color-button-secondary-warning-background-active);
+   color: var(--eds-theme-color-button-secondary-warning-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-warning-icon-active);
+   }
+ }
+}
+
+/**
+* Secondary error clickable style
+*/
+:where(.button--secondary).button--error {
+ border-color: var(--eds-theme-color-button-secondary-error-border);
+ background-color: var(--eds-theme-color-button-secondary-error-background);
+ color: var(--eds-theme-color-button-secondary-error-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-error-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-error-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-error-background-hover);
+   color: var(--eds-theme-color-button-secondary-error-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-error-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-error-border-active);
+   background-color: var(--eds-theme-color-button-secondary-error-background-active);
+   color: var(--eds-theme-color-button-secondary-error-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-error-icon-active);
+   }
+ }
+}
+
+/**
+* Icon brand clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--brand {
+ border-color: var(--eds-theme-color-button-icon-brand-border);
+ background-color: var(--eds-theme-color-button-icon-brand-background);
+ color: var(--eds-theme-color-button-icon-brand-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-brand);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-brand-border-hover);
+   background-color: var(--eds-theme-color-button-icon-brand-background-hover);
+   color: var(--eds-theme-color-button-icon-brand-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-brand-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-brand-border-active);
+   background-color: var(--eds-theme-color-button-icon-brand-background-active);
+   color: var(--eds-theme-color-button-icon-brand-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-brand-active);
+   }
+ }
+}
+
+/**
+* Icon neutral clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--neutral {
+ border-color: var(--eds-theme-color-button-icon-neutral-border);
+ background-color: var(--eds-theme-color-button-icon-neutral-background);
+ color: var(--eds-theme-color-button-icon-neutral-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-neutral);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-neutral-border-hover);
+   background-color: var(--eds-theme-color-button-icon-neutral-background-hover);
+   color: var(--eds-theme-color-button-icon-neutral-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-neutral-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-neutral-border-active);
+   background-color: var(--eds-theme-color-button-icon-neutral-background-active);
+   color: var(--eds-theme-color-button-icon-neutral-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-neutral-active);
+   }
+ }
+}
+
+/**
+* Icon success clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--success {
+ border-color: var(--eds-theme-color-button-icon-success-border);
+ background-color: var(--eds-theme-color-button-icon-success-background);
+ color: var(--eds-theme-color-button-icon-success-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-success);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-success-border-hover);
+   background-color: var(--eds-theme-color-button-icon-success-background-hover);
+   color: var(--eds-theme-color-button-icon-success-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-success-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-success-border-active);
+   background-color: var(--eds-theme-color-button-icon-success-background-active);
+   color: var(--eds-theme-color-button-icon-success-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-success-active);
+   }
+ }
+}
+
+/**
+* Icon warning clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--warning {
+ border-color: var(--eds-theme-color-button-icon-warning-border);
+ background-color: var(--eds-theme-color-button-icon-warning-background);
+ color: var(--eds-theme-color-button-icon-warning-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-warning);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-warning-border-hover);
+   background-color: var(--eds-theme-color-button-icon-warning-background-hover);
+   color: var(--eds-theme-color-button-icon-warning-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-warning-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-warning-border-active);
+   background-color: var(--eds-theme-color-button-icon-warning-background-active);
+   color: var(--eds-theme-color-button-icon-warning-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-warning-active);
+   }
+ }
+}
+
+/**
+* Icon error clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--error {
+ border-color: var(--eds-theme-color-button-icon-error-border);
+ background-color: var(--eds-theme-color-button-icon-error-background);
+ color: var(--eds-theme-color-button-icon-error-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-error);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-error-border-hover);
+   background-color: var(--eds-theme-color-button-icon-error-background-hover);
+   color: var(--eds-theme-color-button-icon-error-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-error-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-error-border-active);
+   background-color: var(--eds-theme-color-button-icon-error-background-active);
+   color: var(--eds-theme-color-button-icon-error-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-error-active);
+   }
+ }
+}
+
+/**
+* Small clickable style
+*/
+.button--sm {
+ font: var(--eds-theme-typography-button-label-sm);
+ /**
+  * Height is used instead of vertical padding because the icon size we use would
+  * cause the height to expand
+  */
+ height: var(--eds-size-3);
+ padding: 0 var(--eds-size-1);
+}
+
+/**
+* Medium clickable style
+*/
+.button--md {
+ /**
+  * Height is used instead of vertical padding because the icon size we use would
+  * cause the height to expand
+  */
+ height: var(--eds-size-4);
+ padding: 0 var(--eds-size-1);
+}
+
+/**
+* Large clickable style
+*/
+.button--lg {
+ /**
+  * Height is used instead of vertical padding because the icon size we use would
+  * cause the height to expand
+  */
+ height: var(--eds-size-5);
+ padding: 0 var(--eds-size-2);
+}
+
+/**
+* Full-width clickable style
+* A block clickable style that fills 100% of the width of its container
+*/
+.button--full-width {
+ width: 100%;
+}
+
+
 /**
  * Primary disabled button styles
  */
@@ -40,17 +507,6 @@
   }
 }
 
-/**
- * Link disabled button styles
- */
-.button--link {
-  &:disabled,
-  &:disabled:hover {
-    color: var(--eds-theme-color-text-disabled);
-    text-decoration-color: var(--eds-theme-color-text-disabled);
-  }
-}
-
 /**
  * Icon disabled button styles
  */
@@ -73,3 +529,65 @@
 .button.eds-is-loading svg path {
   stroke: var(--eds-theme-color-text-disabled);
 }
+
+/** TODO: Remove ability for buttons to look like the link component in the next major version */
+
+/**
+ * Link button styles
+ */
+ .button--link {
+  @mixin textLink;
+ 
+  /**
+   * Override default Clickable styles
+   */
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  /**
+   * Smaller gap between text and icon in link button style
+   */
+  gap: 0.25em;
+ 
+  &:disabled,
+  &:disabled:hover {
+    color: var(--eds-theme-color-text-disabled);
+    text-decoration-color: var(--eds-theme-color-text-disabled);
+  }
+ }
+ 
+ /**
+ * Needs `:where` pseudoclass to reduce specificity so class overrides
+ * for margin can happen where used, but needs to be specific enough to override preflight.
+ */
+ a:where(.button--link),
+ button:where(.button--link) {
+  /* 2px padding gives the text breathing room in the focus state */
+  padding: 2px;
+  /**
+   * -2px margin compensates for the padding so the link doesn't have too much space between it
+   *  and surrounding text
+   */
+  margin: -2px;
+ }
+ 
+ /**
+ * Link neutral clickable style
+ */
+ :where(.button--link).button--neutral {
+  text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration);
+ 
+  &:hover {
+    text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration-hover);
+  }
+ 
+  &:focus-visible {
+    background-color: var(--eds-theme-color-link-neutral-background-focus);
+  }
+ 
+  @supports not selector(:focus-visible) {
+    &:focus {
+      background-color: var(--eds-theme-color-link-neutral-background-focus);
+    }
+  }
+ }
\ No newline at end of file
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 4d7102e69..a10196075 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 import { Button } from './Button';
-import { SIZES, STATUSES, VARIANTS } from '../ClickableStyle';
+import { SIZES, STATUSES } from '../ClickableStyle';
 
 import Icon from '../Icon';
 
@@ -21,7 +21,7 @@ export default {
       control: {
         type: 'select',
       },
-      options: VARIANTS,
+      options: ['primary', 'secondary', 'icon'],
     },
     status: {
       control: {
@@ -274,37 +274,6 @@ export const IconButtonIconOnlySmall: StoryObj<Args> = {
   },
 };
 
-export const Link: StoryObj<Args> = {
-  args: { variant: 'link' },
-};
-
-export const LinkDisabled: StoryObj<Args> = {
-  args: { variant: 'link', disabled: true },
-};
-
-export const LinkRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Button
-        <Icon
-          name="open-in-new"
-          purpose="informative"
-          title="opens in a new tab"
-        />
-      </>
-    ),
-    variant: 'link',
-  },
-};
-
-export const LinkNeutral: StoryObj<Args> = {
-  args: {
-    status: 'neutral',
-    variant: 'link',
-  },
-};
-
 export const Destructive: StoryObj<Args> = {
   args: {
     status: 'error',
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 8476ddde5..b5ca2299d 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,14 +1,21 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React, { forwardRef } from 'react';
-import ClickableStyle from '../ClickableStyle';
-import type { ClickableStyleProps, VariantStatus } from '../ClickableStyle';
+import type { Size } from '../../util/variant-types';
+import type {
+  PrimaryStatus,
+  SecondaryStatus,
+  IconStatus,
+  LinkStatus,
+} from '../ClickableStyle/ClickableStyle';
 import LoadingIndicator from '../LoadingIndicator';
 
 import styles from './Button.module.css';
 
 type ButtonHTMLElementProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
+type ButtonVariants = IconStatus | PrimaryStatus | SecondaryStatus | LinkStatus;
+
 export type ButtonProps = ButtonHTMLElementProps & {
   /**
    * The button contents or label.
@@ -18,46 +25,44 @@ export type ButtonProps = ButtonHTMLElementProps & {
    * Toggles clickable that fills the full width of its container
    */
   fullWidth?: boolean;
-  'data-testid'?: string;
-  size?: ClickableStyleProps<'button'>['size'];
+  /**
+   * The size of the button on screen
+   */
+  size?: Extract<Size, 'sm' | 'md' | 'lg'>;
   /**
    * Disables the field and prevents editing the contents
    */
   disabled?: boolean;
   /**
    * Loading state passed down from higher level used to trigger loader and text change
-   * @deprecated - This will be removed in a future release
    */
   loading?: boolean;
   /**
-   * Determines type of clickable
+   * Determines type of clickable:
    * - **button** The clickable is a clickable button.
    * - **submit** The clickable is a submit clickable (submits form data).
    * - **reset** The clickable is a reset clickable (resets the form-data to its initial values)
    */
   type?: 'button' | 'reset' | 'submit';
-} & VariantStatus;
+  'data-testid'?: string;
+} & ButtonVariants;
 
 /**
  * `import {Button} from "@chanzuckerberg/eds";`
  *
- * Component for making buttons that do not navigate the user to another page.
- *
- * This component is called `Button` because it should be used to make `<button>` elements;
- * however, it can be styled to look like a link.
- *
- * If you need to style an `<a>` element to look like a button, please use the `Link` component.
- * If you need to style a different element or component (e.g. `Link` from `react-router`) to
- * look like a button or link, you can use the `ClickableStyle` component.
+ * Component for making buttons that do not navigate the user to another page. Use button to trigger actions, menus,
+ * or other in-page activity.
  *
- * In terms of the look and feel of the component in the UI, the `Button`, and `Link`, and `ClickableStyle`
- * components are exactly the same.
+ * - If you need to style a navigation anchor, please use the `Link` component.
+ * - If you need to style a different element or component to
+ *   look like a button or link, you can use the `ClickableStyle` component.
  */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       children,
       className,
+      fullWidth,
       loading,
       variant = 'secondary',
       status = 'brand',
@@ -71,33 +76,42 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const componentClassName = clsx(
       // Base styles
       styles['button'],
+      // Sizes
+      variant !== 'link' && [
+        size === 'sm' && styles['button--sm'],
+        size === 'md' && styles['button--md'],
+        size === 'lg' && styles['button--lg'],
+      ],
       // Variants
       variant === 'primary' && styles['button--primary'],
       variant === 'secondary' && styles['button--secondary'],
       variant === 'icon' && styles['button--icon'],
       variant === 'link' && styles['button--link'],
+      // Colors
+      status === 'brand' && styles['button--brand'],
+      status === 'neutral' && styles['button--neutral'],
+      status === 'success' && styles['button--success'],
+      status === 'warning' && styles['button--warning'],
+      status === 'error' && styles['button--error'],
       // Other options
+      fullWidth && styles['button--full-width'],
       disabled && styles['button--disabled'],
       loading && styles['eds-is-loading'],
       className,
     );
 
     return (
-      <ClickableStyle
-        as="button"
+      <button
         className={componentClassName}
         disabled={disabled}
         ref={ref}
-        size={size}
-        status={status}
         tabIndex={disabled ? -1 : undefined}
         type={type}
-        variant={variant}
         {...other}
       >
         {loading && <LoadingIndicator className="eds-is-loading" size="sm" />}
         {children}
-      </ClickableStyle>
+      </button>
     );
   },
 );
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
index 1239a7c9b..fd20c00fa 100644
--- a/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Button /> Default story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+  class="button button--lg button--secondary button--brand"
   type="button"
 >
   Button
@@ -11,7 +11,7 @@ exports[`<Button /> Default story renders snapshot 1`] = `
 
 exports[`<Button /> Destructive story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--error button button--primary"
+  class="button button--lg button--primary button--error"
   type="button"
 >
   Button
@@ -20,7 +20,7 @@ exports[`<Button /> Destructive story renders snapshot 1`] = `
 
 exports[`<Button /> DestructiveLeftIcon story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--error button button--primary"
+  class="button button--lg button--primary button--error"
   type="button"
 >
   <svg
@@ -40,7 +40,7 @@ exports[`<Button /> DestructiveLeftIcon story renders snapshot 1`] = `
 
 exports[`<Button /> FullWidth story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand clickable-style--full-width button button--secondary"
+  class="button button--lg button--secondary button--brand button--full-width"
   type="button"
 >
   Button
@@ -49,7 +49,7 @@ exports[`<Button /> FullWidth story renders snapshot 1`] = `
 
 exports[`<Button /> IconButtonDisabled story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon button--disabled"
+  class="button button--lg button--icon button--brand button--disabled"
   disabled=""
   tabindex="-1"
   type="button"
@@ -71,7 +71,7 @@ exports[`<Button /> IconButtonDisabled story renders snapshot 1`] = `
 
 exports[`<Button /> IconButtonIconOnly story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
+  class="button button--lg button--icon button--brand"
   type="button"
 >
   <svg
@@ -93,7 +93,7 @@ exports[`<Button /> IconButtonIconOnly story renders snapshot 1`] = `
 
 exports[`<Button /> IconButtonIconOnlySmall story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--sm clickable-style--icon clickable-style--brand button button--icon"
+  class="button button--sm button--icon button--brand"
   type="button"
 >
   <svg
@@ -115,7 +115,7 @@ exports[`<Button /> IconButtonIconOnlySmall story renders snapshot 1`] = `
 
 exports[`<Button /> IconButtonLeftIcon story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
+  class="button button--lg button--icon button--brand"
   type="button"
 >
   <svg
@@ -135,7 +135,7 @@ exports[`<Button /> IconButtonLeftIcon story renders snapshot 1`] = `
 
 exports[`<Button /> IconButtonLeftIconSmall story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--sm clickable-style--icon clickable-style--brand button button--icon"
+  class="button button--sm button--icon button--brand"
   type="button"
 >
   <svg
@@ -155,7 +155,7 @@ exports[`<Button /> IconButtonLeftIconSmall story renders snapshot 1`] = `
 
 exports[`<Button /> IconButtonRightIcon story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
+  class="button button--lg button--icon button--brand"
   type="button"
 >
   Button
@@ -175,7 +175,7 @@ exports[`<Button /> IconButtonRightIcon story renders snapshot 1`] = `
 
 exports[`<Button /> IconButtonRightIconSmall story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--sm clickable-style--icon clickable-style--brand button button--icon"
+  class="button button--sm button--icon button--brand"
   type="button"
 >
   Button
@@ -195,7 +195,7 @@ exports[`<Button /> IconButtonRightIconSmall story renders snapshot 1`] = `
 
 exports[`<Button /> IconError story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--error button button--icon"
+  class="button button--lg button--icon button--error"
   type="button"
 >
   Button
@@ -215,7 +215,7 @@ exports[`<Button /> IconError story renders snapshot 1`] = `
 
 exports[`<Button /> IconNeutral story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon"
+  class="button button--lg button--icon button--neutral"
   type="button"
 >
   Button
@@ -235,7 +235,7 @@ exports[`<Button /> IconNeutral story renders snapshot 1`] = `
 
 exports[`<Button /> IconSuccess story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--success button button--icon"
+  class="button button--lg button--icon button--success"
   type="button"
 >
   Button
@@ -255,7 +255,7 @@ exports[`<Button /> IconSuccess story renders snapshot 1`] = `
 
 exports[`<Button /> IconWarning story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--warning button button--icon"
+  class="button button--lg button--icon button--warning"
   type="button"
 >
   Button
@@ -273,61 +273,9 @@ exports[`<Button /> IconWarning story renders snapshot 1`] = `
 </button>
 `;
 
-exports[`<Button /> Link story renders snapshot 1`] = `
-<button
-  class="clickable-style clickable-style--link clickable-style--brand button button--link"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> LinkDisabled story renders snapshot 1`] = `
-<button
-  class="clickable-style clickable-style--link clickable-style--brand button button--link button--disabled"
-  disabled=""
-  tabindex="-1"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> LinkNeutral story renders snapshot 1`] = `
-<button
-  class="clickable-style clickable-style--link clickable-style--neutral button button--link"
-  type="button"
->
-  Button
-</button>
-`;
-
-exports[`<Button /> LinkRightIcon story renders snapshot 1`] = `
-<button
-  class="clickable-style clickable-style--link clickable-style--brand button button--link"
-  type="button"
->
-  Button
-  <svg
-    class="icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      opens in a new tab
-    </title>
-    <path
-      d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
-    />
-  </svg>
-</button>
-`;
-
 exports[`<Button /> Loading story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary button--disabled eds-is-loading"
+  class="button button--lg button--secondary button--brand button--disabled eds-is-loading"
   disabled=""
   tabindex="-1"
   type="button"
@@ -386,7 +334,7 @@ exports[`<Button /> Loading story renders snapshot 1`] = `
 
 exports[`<Button /> Primary story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+  class="button button--lg button--primary button--brand"
   type="button"
 >
   Button
@@ -395,7 +343,7 @@ exports[`<Button /> Primary story renders snapshot 1`] = `
 
 exports[`<Button /> PrimaryDisabled story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary button--disabled"
+  class="button button--lg button--primary button--brand button--disabled"
   disabled=""
   tabindex="-1"
   type="button"
@@ -406,7 +354,7 @@ exports[`<Button /> PrimaryDisabled story renders snapshot 1`] = `
 
 exports[`<Button /> PrimaryLeftIcon story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+  class="button button--lg button--primary button--brand"
   type="button"
 >
   <svg
@@ -426,7 +374,7 @@ exports[`<Button /> PrimaryLeftIcon story renders snapshot 1`] = `
 
 exports[`<Button /> PrimaryMedium story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--md clickable-style--primary clickable-style--brand button button--primary"
+  class="button button--md button--primary button--brand"
   type="button"
 >
   Button
@@ -435,7 +383,7 @@ exports[`<Button /> PrimaryMedium story renders snapshot 1`] = `
 
 exports[`<Button /> PrimaryRightIcon story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+  class="button button--lg button--primary button--brand"
   type="button"
 >
   Button
@@ -455,7 +403,7 @@ exports[`<Button /> PrimaryRightIcon story renders snapshot 1`] = `
 
 exports[`<Button /> PrimarySmall story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--sm clickable-style--primary clickable-style--brand button button--primary"
+  class="button button--sm button--primary button--brand"
   type="button"
 >
   Button
@@ -464,7 +412,7 @@ exports[`<Button /> PrimarySmall story renders snapshot 1`] = `
 
 exports[`<Button /> SecondaryDisabled story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary button--disabled"
+  class="button button--lg button--secondary button--brand button--disabled"
   disabled=""
   tabindex="-1"
   type="button"
@@ -475,7 +423,7 @@ exports[`<Button /> SecondaryDisabled story renders snapshot 1`] = `
 
 exports[`<Button /> SecondaryError story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--error button button--secondary"
+  class="button button--lg button--secondary button--error"
   type="button"
 >
   Button
@@ -484,7 +432,7 @@ exports[`<Button /> SecondaryError story renders snapshot 1`] = `
 
 exports[`<Button /> SecondaryLeftIcon story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+  class="button button--lg button--secondary button--brand"
   type="button"
 >
   <svg
@@ -504,7 +452,7 @@ exports[`<Button /> SecondaryLeftIcon story renders snapshot 1`] = `
 
 exports[`<Button /> SecondaryMedium story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--md clickable-style--secondary clickable-style--brand button button--secondary"
+  class="button button--md button--secondary button--brand"
   type="button"
 >
   Button
@@ -513,7 +461,7 @@ exports[`<Button /> SecondaryMedium story renders snapshot 1`] = `
 
 exports[`<Button /> SecondaryRightIcon story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+  class="button button--lg button--secondary button--brand"
   type="button"
 >
   Button
@@ -533,7 +481,7 @@ exports[`<Button /> SecondaryRightIcon story renders snapshot 1`] = `
 
 exports[`<Button /> SecondarySmall story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--sm clickable-style--secondary clickable-style--brand button button--secondary"
+  class="button button--sm button--secondary button--brand"
   type="button"
 >
   Button
@@ -542,7 +490,7 @@ exports[`<Button /> SecondarySmall story renders snapshot 1`] = `
 
 exports[`<Button /> SecondarySuccess story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--success button button--secondary"
+  class="button button--lg button--secondary button--success"
   type="button"
 >
   Button
@@ -551,7 +499,7 @@ exports[`<Button /> SecondarySuccess story renders snapshot 1`] = `
 
 exports[`<Button /> SecondaryWarning story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--warning button button--secondary"
+  class="button button--lg button--secondary button--warning"
   type="button"
 >
   Button
@@ -560,7 +508,7 @@ exports[`<Button /> SecondaryWarning story renders snapshot 1`] = `
 
 exports[`<Button /> Tertiary story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+  class="button button--lg button--secondary button--neutral"
   type="button"
 >
   Button
@@ -569,7 +517,7 @@ exports[`<Button /> Tertiary story renders snapshot 1`] = `
 
 exports[`<Button /> TertiaryDisabled story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary button--disabled"
+  class="button button--lg button--secondary button--neutral button--disabled"
   disabled=""
   tabindex="-1"
   type="button"
@@ -580,7 +528,7 @@ exports[`<Button /> TertiaryDisabled story renders snapshot 1`] = `
 
 exports[`<Button /> TertiaryLeftIcon story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+  class="button button--lg button--secondary button--neutral"
   type="button"
 >
   <svg
@@ -600,7 +548,7 @@ exports[`<Button /> TertiaryLeftIcon story renders snapshot 1`] = `
 
 exports[`<Button /> TertiaryMedium story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--md clickable-style--secondary clickable-style--neutral button button--secondary"
+  class="button button--md button--secondary button--neutral"
   type="button"
 >
   Button
@@ -609,7 +557,7 @@ exports[`<Button /> TertiaryMedium story renders snapshot 1`] = `
 
 exports[`<Button /> TertiaryRightIcon story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+  class="button button--lg button--secondary button--neutral"
   type="button"
 >
   Button
@@ -629,7 +577,7 @@ exports[`<Button /> TertiaryRightIcon story renders snapshot 1`] = `
 
 exports[`<Button /> TertiarySmall story renders snapshot 1`] = `
 <button
-  class="clickable-style clickable-style--sm clickable-style--secondary clickable-style--neutral button button--secondary"
+  class="button button--sm button--secondary button--neutral"
   type="button"
 >
   Button
@@ -638,7 +586,7 @@ exports[`<Button /> TertiarySmall story renders snapshot 1`] = `
 
 exports[`<Button /> passes class names down properly 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary exampleClassName"
+  class="button button--lg button--secondary button--brand exampleClassName"
   data-testid="example-class-name"
   type="button"
 >
@@ -648,7 +596,7 @@ exports[`<Button /> passes class names down properly 1`] = `
 
 exports[`<Button /> passes test ids down properly 1`] = `
 <button
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+  class="button button--lg button--secondary button--brand"
   data-testid="example-test-id"
   type="button"
 >
diff --git a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.ts.snap b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.ts.snap
index ea11ef497..38c708bda 100644
--- a/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.ts.snap
+++ b/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.ts.snap
@@ -5,13 +5,13 @@ exports[`<ButtonGroup /> Default story renders snapshot 1`] = `
   class="button-group button-group--spacing-1x"
 >
   <button
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+    class="button button--lg button--secondary button--neutral"
     type="button"
   >
     Button 1
   </button>
   <button
-    class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+    class="button button--lg button--primary button--brand"
     type="button"
   >
     Button 2
@@ -24,13 +24,13 @@ exports[`<ButtonGroup /> SpacingMax story renders snapshot 1`] = `
   class="button-group button-group--spacing-max"
 >
   <button
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+    class="button button--lg button--secondary button--neutral"
     type="button"
   >
     Button 1
   </button>
   <button
-    class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+    class="button button--lg button--primary button--brand"
     type="button"
   >
     Button 2
@@ -43,13 +43,13 @@ exports[`<ButtonGroup /> SpacingNone story renders snapshot 1`] = `
   class="button-group"
 >
   <button
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+    class="button button--lg button--secondary button--neutral"
     type="button"
   >
     Button 1
   </button>
   <button
-    class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+    class="button button--lg button--primary button--brand"
     type="button"
   >
     Button 2
@@ -62,13 +62,13 @@ exports[`<ButtonGroup /> Vertical story renders snapshot 1`] = `
   class="button-group button-group--spacing-1x button-group--vertical"
 >
   <button
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+    class="button button--lg button--secondary button--neutral"
     type="button"
   >
     Button 1
   </button>
   <button
-    class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+    class="button button--lg button--primary button--brand"
     type="button"
   >
     Button 2
@@ -81,31 +81,31 @@ exports[`<ButtonGroup /> WithFiveButtons story renders snapshot 1`] = `
   class="button-group button-group--spacing-1x"
 >
   <button
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     type="button"
   >
     Button 1
   </button>
   <button
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     type="button"
   >
     Button 2
   </button>
   <button
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     type="button"
   >
     Button 3
   </button>
   <button
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     type="button"
   >
     Button 4
   </button>
   <button
-    class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+    class="button button--lg button--primary button--brand"
     type="button"
   >
     Button 5
diff --git a/src/components/ClickableStyle/ClickableStyle.stories.tsx b/src/components/ClickableStyle/ClickableStyle.stories.tsx
index 969a6d093..b180b4e6c 100644
--- a/src/components/ClickableStyle/ClickableStyle.stories.tsx
+++ b/src/components/ClickableStyle/ClickableStyle.stories.tsx
@@ -1,7 +1,9 @@
 import type { StoryObj, Meta } from '@storybook/react';
+
 import React from 'react';
 
-import { ClickableStyle, STATUSES, VARIANTS } from './ClickableStyle';
+import { ClickableStyle, SIZES, STATUSES, VARIANTS } from './ClickableStyle';
+import Icon from '../Icon';
 
 export default {
   title: 'Components/ClickableStyle',
@@ -10,6 +12,7 @@ export default {
     status: 'brand',
     variant: 'primary',
     as: 'a',
+    children: 'example text',
   },
   parameters: {
     badges: ['1.0'],
@@ -29,6 +32,12 @@ export default {
       options: ['a', 'button'],
       control: { type: 'radio' },
     },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: SIZES,
+    },
   },
 } as Meta<Args>;
 
@@ -66,3 +75,112 @@ export const WithCustomElement: StoryObj<Args> = {
     },
   },
 };
+
+export const Primary: StoryObj<Args> = {
+  args: {
+    variant: 'primary',
+  },
+};
+
+export const PrimaryDisabled: StoryObj<Args> = {
+  args: {
+    disabled: true,
+    variant: 'primary',
+  },
+};
+
+export const PrimaryLeftIcon: StoryObj<Args> = {
+  args: {
+    children: (
+      <>
+        <Icon name="arrow-back" purpose="decorative" />
+        Button
+      </>
+    ),
+    variant: 'primary',
+  },
+};
+
+export const PrimaryRightIcon: StoryObj<Args> = {
+  args: {
+    children: (
+      <>
+        Button
+        <Icon name="arrow-forward" purpose="decorative" />
+      </>
+    ),
+    variant: 'primary',
+  },
+};
+
+export const PrimaryMedium: StoryObj<Args> = {
+  args: {
+    size: 'md',
+    variant: 'primary',
+  },
+};
+
+export const PrimarySmall: StoryObj<Args> = {
+  args: {
+    size: 'sm',
+    variant: 'primary',
+  },
+};
+
+export const SecondaryDisabled: StoryObj<Args> = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const SecondaryLeftIcon: StoryObj<Args> = {
+  args: {
+    children: (
+      <>
+        <Icon name="arrow-back" purpose="decorative" />
+        Button
+      </>
+    ),
+  },
+};
+
+export const TertiaryDisabled: StoryObj<Args> = {
+  args: {
+    status: 'neutral',
+    disabled: true,
+  },
+};
+
+export const IconButtonLeftIcon: StoryObj<Args> = {
+  args: {
+    children: (
+      <>
+        <Icon name="arrow-back" purpose="decorative" />
+        Button
+      </>
+    ),
+    variant: 'icon',
+  },
+};
+
+export const Link: StoryObj<Args> = {
+  args: { variant: 'link' },
+};
+
+export const LinkDisabled: StoryObj<Args> = {
+  args: { variant: 'link', disabled: true },
+};
+
+export const LinkNeutral: StoryObj<Args> = {
+  args: {
+    status: 'neutral',
+    variant: 'link',
+  },
+};
+
+export const Destructive: StoryObj<Args> = {
+  args: {
+    status: 'error',
+    variant: 'primary',
+  },
+};
diff --git a/src/components/ClickableStyle/ClickableStyle.test.ts b/src/components/ClickableStyle/ClickableStyle.test.ts
new file mode 100644
index 000000000..ca39e7fa4
--- /dev/null
+++ b/src/components/ClickableStyle/ClickableStyle.test.ts
@@ -0,0 +1,8 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import type { StoryFile } from '@storybook/testing-react';
+
+import * as stories from './ClickableStyle.stories';
+
+describe('<Button />', () => {
+  generateSnapshots(stories as StoryFile);
+});
diff --git a/src/components/ClickableStyle/ClickableStyle.tsx b/src/components/ClickableStyle/ClickableStyle.tsx
index 9339897df..f0146799f 100644
--- a/src/components/ClickableStyle/ClickableStyle.tsx
+++ b/src/components/ClickableStyle/ClickableStyle.tsx
@@ -19,22 +19,22 @@ export const SIZES = ['sm', 'md', 'lg'] as const;
 export type Size = (typeof SIZES)[number];
 
 // Define Discriminating unions for the valid statuses based on variant
-type IconStatus = {
+export type IconStatus = {
   variant?: Extract<Variant, 'icon'>;
   status?: Status;
 };
 
-type SecondaryStatus = {
+export type SecondaryStatus = {
   variant?: Extract<Variant, 'secondary'>;
   status?: Status;
 };
 
-type PrimaryStatus = {
+export type PrimaryStatus = {
   variant?: Extract<Variant, 'primary'>;
   status?: Extract<Status, 'brand' | 'error'>;
 };
 
-type LinkStatus = {
+export type LinkStatus = {
   variant?: Extract<Variant, 'link'>;
   status?: Extract<Status, 'brand' | 'neutral'>;
 };
@@ -84,15 +84,13 @@ export type ClickableStyleProps<IComponent extends React.ElementType> = {
 /**
  * `import {ClickableStyle} from "@chanzuckerberg/eds";`
  *
- * A helper component that contains all the styling for buttons and links.
+ * A helper component that contains all the styling for buttons-like controls and navigation links.
  *
  * If you're styling a `<button>` or `<a>` element, you can use the `Button`
  * and `Link` components (respectively). `ClickableStyle` should only be used
- * directly when styling other elements or components (e.g. `Link` from `react-router`)
- * to look like a button or link. Use the exported `VariantStatus` to augment the type
- * when using `ClickableStyle`.
+ * directly when styling other elements or components to look like a button or link.
  *
- * See the `Button` and `Link` stories for usage examples.
+ * Use the exported `VariantStatus` to augment the type when using `ClickableStyle`.
  */
 export const ClickableStyle = React.forwardRef(
   <IComponent extends React.ElementType>(
diff --git a/src/components/ClickableStyle/__snapshots__/ClickableStyle.test.ts.snap b/src/components/ClickableStyle/__snapshots__/ClickableStyle.test.ts.snap
new file mode 100644
index 000000000..f8cce046a
--- /dev/null
+++ b/src/components/ClickableStyle/__snapshots__/ClickableStyle.test.ts.snap
@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> Default story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
+>
+  link
+</a>
+`;
+
+exports[`<Button /> Destructive story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--error"
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> IconButtonLeftIcon story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand"
+>
+  <svg
+    aria-hidden="true"
+    class="icon"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
+    />
+  </svg>
+  Button
+</a>
+`;
+
+exports[`<Button /> Link story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--link clickable-style--brand"
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> LinkDisabled story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--link clickable-style--brand"
+  disabled=""
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> LinkNeutral story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--link clickable-style--neutral"
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> Primary story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> PrimaryDisabled story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
+  disabled=""
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> PrimaryLeftIcon story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
+>
+  <svg
+    aria-hidden="true"
+    class="icon"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
+    />
+  </svg>
+  Button
+</a>
+`;
+
+exports[`<Button /> PrimaryMedium story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--md clickable-style--primary clickable-style--brand"
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> PrimaryRightIcon story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
+>
+  Button
+  <svg
+    aria-hidden="true"
+    class="icon"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
+    />
+  </svg>
+</a>
+`;
+
+exports[`<Button /> PrimarySmall story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--sm clickable-style--primary clickable-style--brand"
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> SecondaryDisabled story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
+  disabled=""
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> SecondaryLeftIcon story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
+>
+  <svg
+    aria-hidden="true"
+    class="icon"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
+    />
+  </svg>
+  Button
+</a>
+`;
+
+exports[`<Button /> TertiaryDisabled story renders snapshot 1`] = `
+<a
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--neutral"
+  disabled=""
+>
+  example text
+</a>
+`;
+
+exports[`<Button /> WithCustomElement story renders snapshot 1`] = `
+<button
+  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
+>
+  Example Component
+</button>
+`;
diff --git a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
index 29c15444d..241a97398 100644
--- a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
+++ b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
@@ -576,7 +576,7 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
               class="ml-auto"
             >
               <button
-                class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
+                class="button button--lg button--icon button--brand"
                 type="button"
               >
                 <svg
@@ -824,7 +824,7 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
               class="ml-auto"
             >
               <button
-                class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
+                class="button button--lg button--icon button--brand"
                 type="button"
               >
                 <svg
@@ -871,7 +871,7 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
               class="ml-auto"
             >
               <button
-                class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
+                class="button button--lg button--icon button--brand"
                 type="button"
               >
                 <svg
@@ -918,7 +918,7 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
               class="ml-auto"
             >
               <button
-                class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
+                class="button button--lg button--icon button--brand"
                 type="button"
               >
                 <svg
diff --git a/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap b/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
index 146664248..160a669c1 100644
--- a/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
+++ b/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<Drawer /> Default story renders snapshot 1`] = `
         Drawer title
       </h2>
       <button
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon"
+        class="button button--lg button--icon button--neutral"
         type="button"
       >
         <svg
@@ -61,13 +61,13 @@ exports[`<Drawer /> Default story renders snapshot 1`] = `
         class="button-group button-group--spacing-1x"
       >
         <button
-          class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+          class="button button--lg button--primary button--brand"
           type="button"
         >
           Button 1
         </button>
         <button
-          class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+          class="button button--lg button--secondary button--brand"
           type="button"
         >
           Button 2
diff --git a/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap b/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
index 14b6323e7..c94add9e1 100644
--- a/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
+++ b/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
@@ -60,7 +60,7 @@ exports[`<FieldNote /> WithText story renders snapshot 1`] = `
       <li>
         Even 
         <a
-          class="clickable-style clickable-style--link clickable-style--brand link--link"
+          class="link link--link link--brand"
           href="#"
         >
           text links
diff --git a/src/components/FiltersDrawer/__snapshots__/FiltersDrawer.test.tsx.snap b/src/components/FiltersDrawer/__snapshots__/FiltersDrawer.test.tsx.snap
index 839db50e5..9c86bf31a 100644
--- a/src/components/FiltersDrawer/__snapshots__/FiltersDrawer.test.tsx.snap
+++ b/src/components/FiltersDrawer/__snapshots__/FiltersDrawer.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<Filters /> Default story renders snapshot 1`] = `
         Filters
       </h3>
       <button
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon"
+        class="button button--lg button--icon button--neutral"
         type="button"
       >
         <svg
@@ -133,7 +133,7 @@ exports[`<Filters /> OverflowInteractive story renders snapshot 1`] = `
         Filters
       </h3>
       <button
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon"
+        class="button button--lg button--icon button--neutral"
         type="button"
       >
         <svg
@@ -447,13 +447,13 @@ exports[`<Filters /> OverflowInteractive story renders snapshot 1`] = `
         class="button-group button-group--spacing-1x footer__button-group"
       >
         <button
-          class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary footer__button"
+          class="button button--lg button--secondary button--brand footer__button"
           type="button"
         >
           Clear All
         </button>
         <button
-          class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary footer__button"
+          class="button button--lg button--primary button--brand footer__button"
           type="button"
         >
           Apply
@@ -486,7 +486,7 @@ exports[`<Filters /> WithOnApplyAndCustomButtonGroup story renders snapshot 1`]
         Filters
       </h3>
       <button
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon"
+        class="button button--lg button--icon button--neutral"
         type="button"
       >
         <svg
@@ -578,7 +578,7 @@ exports[`<Filters /> WithOnApplyAndCustomButtonGroup story renders snapshot 1`]
         class="button-group button-group--spacing-1x footer__button-group button-group__apply-only"
       >
         <button
-          class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary footer__button"
+          class="button button--lg button--primary button--brand footer__button"
           type="button"
         >
           Apply
@@ -611,7 +611,7 @@ exports[`<Filters /> WithOnClear story renders snapshot 1`] = `
         Filters
       </h3>
       <button
-        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon"
+        class="button button--lg button--icon button--neutral"
         type="button"
       >
         <svg
@@ -703,7 +703,7 @@ exports[`<Filters /> WithOnClear story renders snapshot 1`] = `
         class="button-group button-group--spacing-1x footer__button-group"
       >
         <button
-          class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary footer__button"
+          class="button button--lg button--secondary button--brand footer__button"
           type="button"
         >
           Clear All
diff --git a/src/components/FiltersPopover/__snapshots__/FiltersPopover.test.tsx.snap b/src/components/FiltersPopover/__snapshots__/FiltersPopover.test.tsx.snap
index 709bdffd2..d6aad1a4c 100644
--- a/src/components/FiltersPopover/__snapshots__/FiltersPopover.test.tsx.snap
+++ b/src/components/FiltersPopover/__snapshots__/FiltersPopover.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<Filters /> Default story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r2:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary filters-button"
+    class="button button--lg button--secondary button--neutral filters-button"
     data-headlessui-state="open"
     id="headlessui-popover-button-:r0:"
     type="button"
@@ -45,7 +45,7 @@ exports[`<Filters /> OverflowInteractive story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:rq:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary filters-button"
+    class="button button--lg button--secondary button--neutral filters-button"
     data-headlessui-state="open"
     id="headlessui-popover-button-:ro:"
     type="button"
@@ -83,7 +83,7 @@ exports[`<Filters /> WithOnApplyAndCustomButtonGroup story renders snapshot 1`]
   <button
     aria-controls="headlessui-popover-panel-:ri:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary filters-button"
+    class="button button--lg button--secondary button--neutral filters-button"
     data-headlessui-state="open"
     id="headlessui-popover-button-:rg:"
     type="button"
@@ -121,7 +121,7 @@ exports[`<Filters /> WithOnClear story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:ra:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary filters-button"
+    class="button button--lg button--secondary button--neutral filters-button"
     data-headlessui-state="open"
     id="headlessui-popover-button-:r8:"
     type="button"
diff --git a/src/components/InputField/__snapshots__/InputField.test.tsx.snap b/src/components/InputField/__snapshots__/InputField.test.tsx.snap
index 8e74424c1..37d67e71b 100644
--- a/src/components/InputField/__snapshots__/InputField.test.tsx.snap
+++ b/src/components/InputField/__snapshots__/InputField.test.tsx.snap
@@ -154,7 +154,7 @@ exports[`<InputField /> InputWithin story renders snapshot 1`] = `
         class="input-field__input-within"
       >
         <button
-          class="clickable-style clickable-style--sm clickable-style--icon clickable-style--brand button button--icon"
+          class="button button--sm button--icon button--brand"
           type="button"
         >
           Button
diff --git a/src/components/Link/Link.module.css b/src/components/Link/Link.module.css
index 9a69a8c7e..24b72512c 100644
--- a/src/components/Link/Link.module.css
+++ b/src/components/Link/Link.module.css
@@ -1,11 +1,535 @@
+@import '../../design-tokens/mixins.css';
+
 /*------------------------------------*\
     # LINK
 \*------------------------------------*/
 
 /**
- * Link button with link variant styles.
+ * Styled clickable element that should look like a button or link.
+ */
+.link {
+  font: var(--eds-theme-typography-button-label);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  /* Adds a gap between children to automatically handle spacing between icons and text. */
+  gap: 0.75rem;
+  border-width: var(--eds-theme-border-width);
+  border-style: solid;
+  border-radius: var(--eds-theme-box-button-border-radius);
+  cursor: pointer;
+  /* Removes the underline in the case that the rendered element is an <a> tag. */
+  text-decoration: none;
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--eds-anim-fade-quick);
+  transition-timing-function: var(--eds-anim-ease);
+
+  :where(svg) {
+    /* Adds default size for icons passed in for consistency. */
+    --icon-size-default: 2em;
+    transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+
+    @media screen and (prefers-reduced-motion) {
+      transition: none;
+    }
+  }
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      @mixin focus;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion) {
+    transition: none;
+  }
+}
+
+/**
+ * Margin 0 added becuase Safari has margin on buttons.
+ * Needs `:where` pseudoclass to reduce specificity so class overrides
+ *    for margin can happen where used.
+ */
+:where(.link) {
+  margin: 0;
+}
+
+
+/**
+ * Link button styles
+ */
+ .link--link {
+  @mixin textLink;
+
+  display: inline;
+  /**
+   * Override default Clickable styles
+   */
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  /**
+   * Smaller gap between text and icon in link button style
+   */
+  gap: 0.25em;
+}
+
+/**
+ * Needs `:where` pseudoclass to reduce specificity so class overrides
+ * for margin can happen where used, but needs to be specific enough to override preflight.
+ */
+a:where(.link--link),
+button:where(.link--link) {
+  /* 2px padding gives the text breathing room in the focus state */
+  padding: 2px;
+  /**
+   * -2px margin compensates for the padding so the link doesn't have too much space between it
+   *  and surrounding text
+   */
+  margin: -2px;
+}
+
+/**
+ * Link neutral clickable style
+ */
+:where(.link--link).link--neutral {
+  text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration);
+
+  &:hover {
+    text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration-hover);
+  }
+
+  &:focus-visible {
+    background-color: var(--eds-theme-color-link-neutral-background-focus);
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      background-color: var(--eds-theme-color-link-neutral-background-focus);
+    }
+  }
+}
+
+/** TODO: Remove the below styles at the next major version, so links only have link-like look/feel */
+
+/**
+ * Primary brand clickable style
+ */
+:where(.link--primary).link--brand {
+  border-color: var(--eds-theme-color-button-primary-brand-border);
+  background-color: var(--eds-theme-color-button-primary-brand-background);
+  color: var(--eds-theme-color-button-primary-brand-text);
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-primary-brand-border-hover);
+    background-color: var(--eds-theme-color-button-primary-brand-background-hover);
+    color: var(--eds-theme-color-button-primary-brand-text-hover);
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-primary-brand-border-active);
+    background-color: var(--eds-theme-color-button-primary-brand-background-active);
+    color: var(--eds-theme-color-button-primary-brand-text-active);
+  }
+}
+
+/**
+ * Primary error clickable style
+ */
+:where(.link--primary).link--error {
+  border-color: var(--eds-theme-color-button-primary-error-border);
+  background-color: var(--eds-theme-color-button-primary-error-background);
+  color: var(--eds-theme-color-button-primary-error-text);
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-primary-error-border-hover);
+    background-color: var(--eds-theme-color-button-primary-error-background-hover);
+    color: var(--eds-theme-color-button-primary-error-text-hover);
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-primary-error-border-active);
+    background-color: var(--eds-theme-color-button-primary-error-background-active);
+    color: var(--eds-theme-color-button-primary-error-text-active);
+  }
+}
+
+/**
+ * Secondary brand clickable style
+ */
+:where(.link--secondary).link--brand {
+  border-color: var(--eds-theme-color-button-secondary-brand-border);
+  background-color: var(--eds-theme-color-button-secondary-brand-background);
+  color: var(--eds-theme-color-button-secondary-brand-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-secondary-brand-icon);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-secondary-brand-border-hover);
+    background-color: var(--eds-theme-color-button-secondary-brand-background-hover);
+    color: var(--eds-theme-color-button-secondary-brand-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-brand-icon-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-secondary-brand-border-active);
+    background-color: var(--eds-theme-color-button-secondary-brand-background-active);
+    color: var(--eds-theme-color-button-secondary-brand-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-brand-icon-focus);
+    }
+  }
+}
+
+/**
+ * Secondary neutral clickable style
+ */
+:where(.link--secondary).link--neutral {
+  border-color: var(--eds-theme-color-button-secondary-neutral-border);
+  background-color: var(--eds-theme-color-button-secondary-neutral-background);
+  color: var(--eds-theme-color-button-secondary-neutral-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-secondary-neutral-icon);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-secondary-neutral-border-hover);
+    background-color: var(--eds-theme-color-button-secondary-neutral-background-hover);
+    color: var(--eds-theme-color-button-secondary-neutral-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-neutral-icon-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-secondary-neutral-border-active);
+    background-color: var(--eds-theme-color-button-secondary-neutral-background-active);
+    color: var(--eds-theme-color-button-secondary-neutral-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-neutral-icon-active);
+    }
+  }
+}
+
+/**
+ * Secondary success clickable style
+ */
+:where(.link--secondary).link--success {
+  border-color: var(--eds-theme-color-button-secondary-success-border);
+  background-color: var(--eds-theme-color-button-secondary-success-background);
+  color: var(--eds-theme-color-button-secondary-success-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-secondary-success-icon);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-secondary-success-border-hover);
+    background-color: var(--eds-theme-color-button-secondary-success-background-hover);
+    color: var(--eds-theme-color-button-secondary-success-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-success-icon-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-secondary-success-border-active);
+    background-color: var(--eds-theme-color-button-secondary-success-background-active);
+    color: var(--eds-theme-color-button-secondary-success-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-success-icon-active);
+    }
+  }
+}
+
+/**
+ * Secondary warning clickable style
+ */
+:where(.link--secondary).link--warning {
+  border-color: var(--eds-theme-color-button-secondary-warning-border);
+  background-color: var(--eds-theme-color-button-secondary-warning-background);
+  color: var(--eds-theme-color-button-secondary-warning-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-secondary-warning-icon);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-secondary-warning-border-hover);
+    background-color: var(--eds-theme-color-button-secondary-warning-background-hover);
+    color: var(--eds-theme-color-button-secondary-warning-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-warning-icon-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-secondary-warning-border-active);
+    background-color: var(--eds-theme-color-button-secondary-warning-background-active);
+    color: var(--eds-theme-color-button-secondary-warning-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-warning-icon-active);
+    }
+  }
+}
+
+/**
+ * Secondary error clickable style
+ */
+:where(.link--secondary).link--error {
+  border-color: var(--eds-theme-color-button-secondary-error-border);
+  background-color: var(--eds-theme-color-button-secondary-error-background);
+  color: var(--eds-theme-color-button-secondary-error-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-secondary-error-icon);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-secondary-error-border-hover);
+    background-color: var(--eds-theme-color-button-secondary-error-background-hover);
+    color: var(--eds-theme-color-button-secondary-error-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-error-icon-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-secondary-error-border-active);
+    background-color: var(--eds-theme-color-button-secondary-error-background-active);
+    color: var(--eds-theme-color-button-secondary-error-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-secondary-error-icon-active);
+    }
+  }
+}
+
+/**
+ * Icon brand clickable style
+ * 
+ * A clickable style that strips out borders, backgrounds, etc.
+ *
+ * Use for Close "X" buttons, tooltip icons, and other.
+ */
+:where(.link--icon).link--brand {
+  border-color: var(--eds-theme-color-button-icon-brand-border);
+  background-color: var(--eds-theme-color-button-icon-brand-background);
+  color: var(--eds-theme-color-button-icon-brand-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-icon-brand);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-icon-brand-border-hover);
+    background-color: var(--eds-theme-color-button-icon-brand-background-hover);
+    color: var(--eds-theme-color-button-icon-brand-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-brand-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-icon-brand-border-active);
+    background-color: var(--eds-theme-color-button-icon-brand-background-active);
+    color: var(--eds-theme-color-button-icon-brand-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-brand-active);
+    }
+  }
+}
+
+/**
+ * Icon neutral clickable style
+ * 
+ * A clickable style that strips out borders, backgrounds, etc.
+ *
+ * Use for Close "X" buttons, tooltip icons, and other.
+ */
+:where(.link--icon).link--neutral {
+  border-color: var(--eds-theme-color-button-icon-neutral-border);
+  background-color: var(--eds-theme-color-button-icon-neutral-background);
+  color: var(--eds-theme-color-button-icon-neutral-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-icon-neutral);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-icon-neutral-border-hover);
+    background-color: var(--eds-theme-color-button-icon-neutral-background-hover);
+    color: var(--eds-theme-color-button-icon-neutral-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-neutral-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-icon-neutral-border-active);
+    background-color: var(--eds-theme-color-button-icon-neutral-background-active);
+    color: var(--eds-theme-color-button-icon-neutral-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-neutral-active);
+    }
+  }
+}
+
+/**
+ * Icon success clickable style
+ * 
+ * A clickable style that strips out borders, backgrounds, etc.
+ *
+ * Use for Close "X" buttons, tooltip icons, and other.
+ */
+:where(.link--icon).link--success {
+  border-color: var(--eds-theme-color-button-icon-success-border);
+  background-color: var(--eds-theme-color-button-icon-success-background);
+  color: var(--eds-theme-color-button-icon-success-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-icon-success);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-icon-success-border-hover);
+    background-color: var(--eds-theme-color-button-icon-success-background-hover);
+    color: var(--eds-theme-color-button-icon-success-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-success-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-icon-success-border-active);
+    background-color: var(--eds-theme-color-button-icon-success-background-active);
+    color: var(--eds-theme-color-button-icon-success-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-success-active);
+    }
+  }
+}
+
+/**
+ * Icon warning clickable style
+ * 
+ * A clickable style that strips out borders, backgrounds, etc.
+ *
+ * Use for Close "X" buttons, tooltip icons, and other.
+ */
+:where(.link--icon).link--warning {
+  border-color: var(--eds-theme-color-button-icon-warning-border);
+  background-color: var(--eds-theme-color-button-icon-warning-background);
+  color: var(--eds-theme-color-button-icon-warning-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-icon-warning);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-icon-warning-border-hover);
+    background-color: var(--eds-theme-color-button-icon-warning-background-hover);
+    color: var(--eds-theme-color-button-icon-warning-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-warning-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-icon-warning-border-active);
+    background-color: var(--eds-theme-color-button-icon-warning-background-active);
+    color: var(--eds-theme-color-button-icon-warning-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-warning-active);
+    }
+  }
+}
+
+/**
+ * Icon error clickable style
+ * 
+ * A clickable style that strips out borders, backgrounds, etc.
+ *
+ * Use for Close "X" buttons, tooltip icons, and other.
+ */
+:where(.link--icon).link--error {
+  border-color: var(--eds-theme-color-button-icon-error-border);
+  background-color: var(--eds-theme-color-button-icon-error-background);
+  color: var(--eds-theme-color-button-icon-error-text);
+
+  :where(svg) {
+    color: var(--eds-theme-color-button-icon-error);
+  }
+
+  &:hover {
+    border-color: var(--eds-theme-color-button-icon-error-border-hover);
+    background-color: var(--eds-theme-color-button-icon-error-background-hover);
+    color: var(--eds-theme-color-button-icon-error-text-hover);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-error-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--eds-theme-color-button-icon-error-border-active);
+    background-color: var(--eds-theme-color-button-icon-error-background-active);
+    color: var(--eds-theme-color-button-icon-error-text-active);
+    :where(svg) {
+      color: var(--eds-theme-color-button-icon-error-active);
+    }
+  }
+}
+
+/**
+ * Small link 
+ */
+ .link--sm {
+  font: var(--eds-theme-typography-button-label-sm);
+  /**
+   * Height is used instead of vertical padding because the icon size we use would
+   * cause the height to expand
+   */
+  height: var(--eds-size-3);
+  padding: 0 var(--eds-size-1);
+}
+
+/**
+ * Medium link style
+ */
+.link--md {
+  /**
+   * Height is used instead of vertical padding because the icon size we use would
+   * cause the height to expand
+   */
+  height: var(--eds-size-4);
+  padding: 0 var(--eds-size-1);
+}
+
+/**
+ * Large link style
+ */
+.link--lg {
+  /**
+   * Height is used instead of vertical padding because the icon size we use would
+   * cause the height to expand
+   */
+  height: var(--eds-size-5);
+  padding: 0 var(--eds-size-2);
+}
+
+/**
+ * Full-width link style
+ * A block link that fills 100% of the width of its container
+ * @deprecated ?
  */
-.link--link {
-  /*  Override display: inline-flex from ClickableStyle. */
-  display: inline; 
+ .link--full-width {
+  width: 100%;
 }
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
index f24aafece..a2725e76e 100644
--- a/src/components/Link/Link.stories.tsx
+++ b/src/components/Link/Link.stories.tsx
@@ -1,7 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
-import { Link } from './Link';
-import { SIZES, STATUSES, VARIANTS } from '../ClickableStyle';
+import { Link, type LinkProps } from './Link';
 
 import Icon from '../Icon';
 
@@ -13,7 +12,7 @@ export default {
   },
   args: {
     children: 'Link',
-    variant: 'secondary',
+    variant: 'link',
     status: 'brand',
     fullWidth: false,
     size: 'lg',
@@ -26,31 +25,41 @@ export default {
       control: {
         type: 'select',
       },
-      options: VARIANTS,
+      options: ['link'],
     },
     status: {
       control: {
         type: 'select',
       },
-      options: STATUSES,
+      options: ['brand', 'neutral'],
     },
     size: {
-      control: {
-        type: 'select',
+      table: {
+        disable: true,
       },
-      options: SIZES,
     },
     fullWidth: {
       control: 'boolean',
+      table: {
+        disable: true,
+      },
+    },
+    onClick: {
+      table: {
+        disable: true,
+      },
+    },
+    href: {
+      table: {
+        disable: true,
+      },
     },
   },
 } as Meta<Args>;
 
 type Args = React.ComponentProps<typeof Link>;
 
-export const Default: StoryObj<Args> = {
-  args: { variant: 'link' },
-};
+export const Default: StoryObj<Args> = {};
 
 export const LinkRightIcon: StoryObj<Args> = {
   args: {
@@ -64,300 +73,28 @@ export const LinkRightIcon: StoryObj<Args> = {
         />
       </>
     ),
-    variant: 'link',
   },
 };
 
 export const LinkNeutral: StoryObj<Args> = {
   args: {
     status: 'neutral',
-    variant: 'link',
-  },
-};
-
-export const Primary: StoryObj<Args> = {
-  args: { variant: 'primary' },
-};
-
-export const PrimaryLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Link
-      </>
-    ),
-    variant: 'primary',
-  },
-};
-
-export const PrimaryRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Link
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    variant: 'primary',
-  },
-};
-
-export const PrimaryMedium: StoryObj<Args> = {
-  args: { size: 'md', variant: 'primary' },
-};
-
-export const PrimarySmall: StoryObj<Args> = {
-  args: { size: 'sm', variant: 'primary' },
-};
-
-export const Secondary: StoryObj<Args> = {};
-
-export const SecondaryLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Link
-      </>
-    ),
-  },
-};
-
-export const SecondaryRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Link
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-  },
-};
-
-export const SecondaryMedium: StoryObj<Args> = {
-  args: {
-    size: 'md',
-  },
-};
-
-export const SecondarySmall: StoryObj<Args> = {
-  args: {
-    size: 'sm',
-  },
-};
-
-export const Tertiary: StoryObj<Args> = {
-  args: {
-    status: 'neutral',
-  },
-};
-
-export const TertiaryLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Link
-      </>
-    ),
-    status: 'neutral',
-  },
-};
-
-export const TertiaryRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Link
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'neutral',
-  },
-};
-
-export const TertiaryMedium: StoryObj<Args> = {
-  args: {
-    status: 'neutral',
-    size: 'md',
-  },
-};
-
-export const TertiarySmall: StoryObj<Args> = {
-  args: {
-    status: 'neutral',
-    size: 'sm',
-  },
-};
-
-export const IconClickableStyleLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Link
-      </>
-    ),
-    variant: 'icon',
-  },
-};
-
-export const IconClickableStyleRightIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Link
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    variant: 'icon',
-  },
-};
-
-export const IconClickableStyleIconOnly: StoryObj<Args> = {
-  args: {
-    children: <Icon name="arrow-back" purpose="informative" title="go back" />,
-    variant: 'icon',
-  },
-};
-
-export const IconClickableStyleLeftIconSmall: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Link
-      </>
-    ),
-    variant: 'icon',
-    size: 'sm',
-  },
-};
-
-export const IconClickableStyleRightIconSmall: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Link
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    variant: 'icon',
-    size: 'sm',
-  },
-};
-
-export const IconClickableStyleIconOnlySmall: StoryObj<Args> = {
-  args: {
-    children: <Icon name="arrow-back" purpose="informative" title="go back" />,
-    variant: 'icon',
-    size: 'sm',
-  },
-};
-
-export const Destructive: StoryObj<Args> = {
-  args: {
-    status: 'error',
-    variant: 'primary',
-  },
-};
-
-export const DestructiveLeftIcon: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        <Icon name="arrow-back" purpose="decorative" />
-        Link
-      </>
-    ),
-    status: 'error',
-    variant: 'primary',
-  },
-};
-
-export const FullWidth: StoryObj<Args> = {
-  args: { fullWidth: true, variant: 'secondary' },
-};
-
-export const SecondarySuccess: StoryObj<Args> = {
-  args: {
-    status: 'success',
-  },
-};
-
-export const SecondaryWarning: StoryObj<Args> = {
-  args: {
-    status: 'warning',
-  },
-};
-
-export const SecondaryError: StoryObj<Args> = {
-  args: {
-    status: 'error',
-  },
-};
-
-export const IconNeutral: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Link
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'neutral',
-    variant: 'icon',
   },
 };
 
-export const IconSuccess: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Link
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'success',
-    variant: 'icon',
-  },
-};
-
-export const IconWarning: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Link
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'warning',
-    variant: 'icon',
-  },
-};
-
-export const IconError: StoryObj<Args> = {
-  args: {
-    children: (
-      <>
-        Link
-        <Icon name="arrow-forward" purpose="decorative" />
-      </>
-    ),
-    status: 'error',
-    variant: 'icon',
-  },
-};
-
-export const LinkInParagraphContext = {
-  render: () => (
+export const LinkInParagraphContext: StoryObj<Args> = {
+  render: (
+    args: React.JSX.IntrinsicAttributes &
+      (LinkProps & React.RefAttributes<HTMLAnchorElement>),
+  ) => (
     <div>
       Lorem ipsum dolor sit amet,{' '}
-      <Link href="https://go.czi.team/eds">consectetur adipiscing elit</Link>.
-      Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis.
+      <Link {...args} href="https://go.czi.team/eds">
+        consectetur adipiscing elit
+      </Link>
+      . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis.
       Nullam sit amet iaculis erat. Nulla id tellus ante.{' '}
-      <Link href="https://go.czi.team/eds">
+      <Link {...args} href="https://go.czi.team/eds">
         Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est.
         Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non
         dui dignissim fermentum.
@@ -365,8 +102,10 @@ export const LinkInParagraphContext = {
       Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce
       vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas.
       Sed sed quam id nisl bibendum convallis. Proin suscipit, odio{' '}
-      <Link href="https://go.czi.team/eds">vel pulvinar</Link> euismod, risus
-      eros ullamcorper lectus, non blandit nulla dui eget massa.
+      <Link {...args} href="https://go.czi.team/eds">
+        vel pulvinar
+      </Link>{' '}
+      euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
     </div>
   ),
 };
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index 715f85e1d..20e394f5d 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React, { forwardRef } from 'react';
-import ClickableStyle from '../ClickableStyle';
-import type { ClickableStyleProps, VariantStatus } from '../ClickableStyle';
+import type { Size } from '../../util/variant-types';
+import type { VariantStatus } from '../ClickableStyle';
 import styles from './Link.module.css';
 
 type LinkHTMLElementProps = Omit<
@@ -16,48 +16,72 @@ export type LinkProps = LinkHTMLElementProps & {
    */
   children: ReactNode;
   /**
-   * Toggles clickable that fills the full width of its container
+   * Toggles link that fills the full width of its container
+   * @deprecated
    */
   fullWidth?: boolean;
   'data-testid'?: string;
-  size?: ClickableStyleProps<'a'>['size'];
+  /**
+   * Link size inherits from the surrounding text.
+   *
+   * **Deprecated**. This will be removed in the next major version.
+   * @deprecated
+   */
+  size?: Extract<Size, 'sm' | 'md' | 'lg'>;
 } & VariantStatus;
 
 /**
  * `import {Link} from "@chanzuckerberg/eds";`
  *
- * Component for making styled anchor tags.
+ * Component for making styled anchor tags. It supports neutral and brand statuses (all other variant/status combinations will be removed in a future release).
  *
- * This component is called Link because it should be used to make `<a>` elements;
- * however, it can be styled to look like a button.
+ * This component is called Link because it should be used to make `<a>` elements.
  *
- * If you need to style a `<button>` element to look like a link, please use the `Button` component.
- * If you need to style a different element or component (e.g. `Link` from `react-router`) to
- * look like a button or link, you can use the `ClickableStyle` component.
- *
- * In terms of the look and feel of the component in the UI, the `Button`, and `Link`, and `ClickableStyle`
- * components are exactly the same.
+ * - If you need to style a `<button>` element to look like a link, please use the `Button` component.
+ * - If you need to style a different element or component like a button or link, you can use the `ClickableStyle` component.
  */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   (
-    { className, variant = 'link', status = 'brand', size = 'lg', ...rest },
+    {
+      children,
+      className,
+      variant = 'link',
+      status = 'brand',
+      size = 'lg',
+      fullWidth,
+      ...rest
+    },
     ref,
   ) => {
     const componentClassName = clsx(
+      // Base styles
+      styles['link'],
+      // Sizes
+      variant !== 'link' && [
+        size === 'sm' && styles['link--sm'],
+        size === 'md' && styles['link--md'],
+        size === 'lg' && styles['link--lg'],
+      ],
+      // Variants
+      variant === 'primary' && styles['link--primary'],
+      variant === 'secondary' && styles['link--secondary'],
+      variant === 'icon' && styles['link--icon'],
       variant === 'link' && styles['link--link'],
+      // Colors
+      status === 'brand' && styles['link--brand'],
+      status === 'neutral' && styles['link--neutral'],
+      status === 'success' && styles['link--success'],
+      status === 'warning' && styles['link--warning'],
+      status === 'error' && styles['link--error'],
+      // Other options
+      fullWidth && styles['link--full-width'],
       className,
     );
 
     return (
-      <ClickableStyle
-        {...rest}
-        as="a"
-        className={componentClassName}
-        ref={ref}
-        size={size}
-        status={status}
-        variant={variant}
-      />
+      <a className={componentClassName} ref={ref} {...rest}>
+        {children}
+      </a>
     );
   },
 );
diff --git a/src/components/Link/__snapshots__/Link.test.tsx.snap b/src/components/Link/__snapshots__/Link.test.tsx.snap
index 096f4edef..e2fb7c818 100644
--- a/src/components/Link/__snapshots__/Link.test.tsx.snap
+++ b/src/components/Link/__snapshots__/Link.test.tsx.snap
@@ -2,261 +2,19 @@
 
 exports[`<Link /> Default story renders snapshot 1`] = `
 <a
-  class="clickable-style clickable-style--link clickable-style--brand link--link"
+  class="link link--link link--brand"
   href="https://go.czi.team/eds"
 >
   Link
 </a>
 `;
 
-exports[`<Link /> Destructive story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--error"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> DestructiveLeftIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--error"
-  href="https://go.czi.team/eds"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
-    />
-  </svg>
-  Link
-</a>
-`;
-
-exports[`<Link /> FullWidth story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand clickable-style--full-width"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> IconClickableStyleIconOnly story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  <svg
-    class="icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      go back
-    </title>
-    <path
-      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> IconClickableStyleIconOnlySmall story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--sm clickable-style--icon clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  <svg
-    class="icon"
-    fill="currentColor"
-    role="img"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>
-      go back
-    </title>
-    <path
-      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> IconClickableStyleLeftIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
-    />
-  </svg>
-  Link
-</a>
-`;
-
-exports[`<Link /> IconClickableStyleLeftIconSmall story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--sm clickable-style--icon clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
-    />
-  </svg>
-  Link
-</a>
-`;
-
-exports[`<Link /> IconClickableStyleRightIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> IconClickableStyleRightIconSmall story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--sm clickable-style--icon clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> IconError story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--error"
-  href="https://go.czi.team/eds"
->
-  Link
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> IconNeutral story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral"
-  href="https://go.czi.team/eds"
->
-  Link
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> IconSuccess story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--success"
-  href="https://go.czi.team/eds"
->
-  Link
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> IconWarning story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--icon clickable-style--warning"
-  href="https://go.czi.team/eds"
->
-  Link
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-    />
-  </svg>
-</a>
-`;
-
 exports[`<Link /> LinkInParagraphContext story renders snapshot 1`] = `
 <div>
   Lorem ipsum dolor sit amet,
    
   <a
-    class="clickable-style clickable-style--link clickable-style--brand link--link"
+    class="link link--link link--brand"
     href="https://go.czi.team/eds"
   >
     consectetur adipiscing elit
@@ -264,7 +22,7 @@ exports[`<Link /> LinkInParagraphContext story renders snapshot 1`] = `
   . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
    
   <a
-    class="clickable-style clickable-style--link clickable-style--brand link--link"
+    class="link link--link link--brand"
     href="https://go.czi.team/eds"
   >
     Aliquam pellentesque ipsum sagittis, commodo neque at, ornare est. Maecenas a malesuada sem, vitae euismod erat. Nullam molestie nunc non dui dignissim fermentum.
@@ -273,18 +31,19 @@ exports[`<Link /> LinkInParagraphContext story renders snapshot 1`] = `
   Aliquam id volutpat nulla, sed auctor orci. Fusce cursus leo nisi. Fusce vehicula vitae nisl nec ultricies. Cras ut enim nec magna semper egestas. Sed sed quam id nisl bibendum convallis. Proin suscipit, odio
    
   <a
-    class="clickable-style clickable-style--link clickable-style--brand link--link"
+    class="link link--link link--brand"
     href="https://go.czi.team/eds"
   >
     vel pulvinar
   </a>
-   euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
+   
+  euismod, risus eros ullamcorper lectus, non blandit nulla dui eget massa.
 </div>
 `;
 
 exports[`<Link /> LinkNeutral story renders snapshot 1`] = `
 <a
-  class="clickable-style clickable-style--link clickable-style--neutral link--link"
+  class="link link--link link--neutral"
   href="https://go.czi.team/eds"
 >
   Link
@@ -293,7 +52,7 @@ exports[`<Link /> LinkNeutral story renders snapshot 1`] = `
 
 exports[`<Link /> LinkRightIcon story renders snapshot 1`] = `
 <a
-  class="clickable-style clickable-style--link clickable-style--brand link--link"
+  class="link link--link link--brand"
   href="https://go.czi.team/eds"
 >
   Link
@@ -314,237 +73,9 @@ exports[`<Link /> LinkRightIcon story renders snapshot 1`] = `
 </a>
 `;
 
-exports[`<Link /> Primary story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> PrimaryLeftIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
-    />
-  </svg>
-  Link
-</a>
-`;
-
-exports[`<Link /> PrimaryMedium story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--md clickable-style--primary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> PrimaryRightIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> PrimarySmall story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--sm clickable-style--primary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> Secondary story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> SecondaryError story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--error"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> SecondaryLeftIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
-    />
-  </svg>
-  Link
-</a>
-`;
-
-exports[`<Link /> SecondaryMedium story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--md clickable-style--secondary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> SecondaryRightIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> SecondarySmall story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--sm clickable-style--secondary clickable-style--brand"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> SecondarySuccess story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--success"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> SecondaryWarning story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--warning"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> Tertiary story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> TertiaryLeftIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral"
-  href="https://go.czi.team/eds"
->
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"
-    />
-  </svg>
-  Link
-</a>
-`;
-
-exports[`<Link /> TertiaryMedium story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--md clickable-style--secondary clickable-style--neutral"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
-exports[`<Link /> TertiaryRightIcon story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral"
-  href="https://go.czi.team/eds"
->
-  Link
-  <svg
-    aria-hidden="true"
-    class="icon"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"
-    />
-  </svg>
-</a>
-`;
-
-exports[`<Link /> TertiarySmall story renders snapshot 1`] = `
-<a
-  class="clickable-style clickable-style--sm clickable-style--secondary clickable-style--neutral"
-  href="https://go.czi.team/eds"
->
-  Link
-</a>
-`;
-
 exports[`<Link /> passes class names down properly 1`] = `
 <a
-  class="clickable-style clickable-style--link clickable-style--brand link--link exampleClassName"
+  class="link link--link link--brand exampleClassName"
   data-testid="example-class-name"
   href="/"
 >
@@ -554,7 +85,7 @@ exports[`<Link /> passes class names down properly 1`] = `
 
 exports[`<Link /> passes test ids down properly 1`] = `
 <a
-  class="clickable-style clickable-style--link clickable-style--brand link--link"
+  class="link link--link link--brand"
   data-testid="example-test-id"
   href="/"
 >
diff --git a/src/components/Menu/__snapshots__/Menu.test.tsx.snap b/src/components/Menu/__snapshots__/Menu.test.tsx.snap
index 62d3bc5e8..b4768e53d 100644
--- a/src/components/Menu/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/Menu/__snapshots__/Menu.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<Menu /> Default story renders snapshot 1`] = `
     aria-controls="headlessui-menu-items-:r1:"
     aria-expanded="true"
     aria-haspopup="menu"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary menu__button"
+    class="button button--lg button--secondary button--neutral menu__button"
     data-headlessui-state="open"
     id="headlessui-menu-button-:r0:"
     type="button"
@@ -125,7 +125,7 @@ exports[`<Menu /> WithLongButtonText story renders snapshot 1`] = `
     aria-controls="headlessui-menu-items-:r7:"
     aria-expanded="true"
     aria-haspopup="menu"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary menu__button"
+    class="button button--lg button--secondary button--neutral menu__button"
     data-headlessui-state="open"
     id="headlessui-menu-button-:r6:"
     type="button"
@@ -158,7 +158,7 @@ exports[`<Menu /> WithShortButtonText story renders snapshot 1`] = `
     aria-controls="headlessui-menu-items-:rd:"
     aria-expanded="true"
     aria-haspopup="menu"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary menu__button"
+    class="button button--lg button--secondary button--neutral menu__button"
     data-headlessui-state="open"
     id="headlessui-menu-button-:rc:"
     type="button"
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 2a155a81c..8133012cf 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -57,13 +57,13 @@ exports[`Modal Brand story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -121,13 +121,13 @@ exports[`Modal ContentDefault story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -199,13 +199,13 @@ exports[`Modal Default story renders snapshot 1`] = `
         class="button-group button-group--spacing-1x flex w-full justify-end"
       >
         <button
-          class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+          class="button button--lg button--secondary button--neutral"
           type="button"
         >
           Button 2
         </button>
         <button
-          class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+          class="button button--lg button--primary button--brand"
           type="button"
         >
           Button 1
@@ -264,13 +264,13 @@ exports[`Modal Medium story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -328,13 +328,13 @@ exports[`Modal Mobile story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -401,13 +401,13 @@ exports[`Modal MobileBrand story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -465,13 +465,13 @@ exports[`Modal MobileLandscape story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -538,13 +538,13 @@ exports[`Modal MobileLandscapeBrand story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -677,13 +677,13 @@ exports[`Modal Small story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -741,13 +741,13 @@ exports[`Modal Tablet story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -814,13 +814,13 @@ exports[`Modal TabletBrand story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -911,13 +911,13 @@ exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
         class="button-group button-group--spacing-1x flex w-full justify-end"
       >
         <button
-          class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+          class="button button--lg button--secondary button--neutral"
           type="button"
         >
           Button 2
         </button>
         <button
-          class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+          class="button button--lg button--primary button--brand"
           type="button"
         >
           Button 1
@@ -1097,13 +1097,13 @@ exports[`Modal WithStepper story renders snapshot 1`] = `
       class="button-group button-group--spacing-1x flex w-full justify-end"
     >
       <button
-        class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+        class="button button--lg button--secondary button--neutral"
         type="button"
       >
         Button 2
       </button>
       <button
-        class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+        class="button button--lg button--primary button--brand"
         type="button"
       >
         Button 1
@@ -1154,13 +1154,13 @@ exports[`Modal WithoutCloseButton story renders snapshot 1`] = `
         class="button-group button-group--spacing-1x flex w-full justify-end"
       >
         <button
-          class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+          class="button button--lg button--secondary button--neutral"
           type="button"
         >
           Button 2
         </button>
         <button
-          class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+          class="button button--lg button--primary button--brand"
           type="button"
         >
           Button 1
diff --git a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap b/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
index ba2192325..d780d9dd9 100644
--- a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
+++ b/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
@@ -30,7 +30,7 @@ exports[`<PageLevelBanner /> Brand story renders snapshot 1`] = `
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
       <button
-        class="clickable-style clickable-style--link clickable-style--neutral button button--link"
+        class="button button--link button--neutral"
         type="button"
       >
         click into the course.
@@ -70,7 +70,7 @@ exports[`<PageLevelBanner /> BrandDismissable story renders snapshot 1`] = `
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
       <button
-        class="clickable-style clickable-style--link clickable-style--neutral button button--link"
+        class="button button--link button--neutral"
         type="button"
       >
         click into the course.
@@ -78,7 +78,7 @@ exports[`<PageLevelBanner /> BrandDismissable story renders snapshot 1`] = `
     </p>
   </div>
   <button
-    class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon banner__close-btn"
+    class="button button--lg button--icon button--neutral banner__close-btn"
     type="button"
   >
     <svg
@@ -129,7 +129,7 @@ exports[`<PageLevelBanner /> Error story renders snapshot 1`] = `
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
       <button
-        class="clickable-style clickable-style--link clickable-style--neutral button button--link"
+        class="button button--link button--neutral"
         type="button"
       >
         click into the course.
@@ -169,7 +169,7 @@ exports[`<PageLevelBanner /> ErrorDismissable story renders snapshot 1`] = `
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
       <button
-        class="clickable-style clickable-style--link clickable-style--neutral button button--link"
+        class="button button--link button--neutral"
         type="button"
       >
         click into the course.
@@ -177,7 +177,7 @@ exports[`<PageLevelBanner /> ErrorDismissable story renders snapshot 1`] = `
     </p>
   </div>
   <button
-    class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon banner__close-btn"
+    class="button button--lg button--icon button--neutral banner__close-btn"
     type="button"
   >
     <svg
@@ -251,7 +251,7 @@ exports[`<PageLevelBanner /> NoTitle story renders snapshot 1`] = `
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
       <button
-        class="clickable-style clickable-style--link clickable-style--neutral button button--link"
+        class="button button--link button--neutral"
         type="button"
       >
         click into the course.
@@ -291,7 +291,7 @@ exports[`<PageLevelBanner /> Success story renders snapshot 1`] = `
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
       <button
-        class="clickable-style clickable-style--link clickable-style--neutral button button--link"
+        class="button button--link button--neutral"
         type="button"
       >
         click into the course.
@@ -331,7 +331,7 @@ exports[`<PageLevelBanner /> SuccessDismissable story renders snapshot 1`] = `
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
       <button
-        class="clickable-style clickable-style--link clickable-style--neutral button button--link"
+        class="button button--link button--neutral"
         type="button"
       >
         click into the course.
@@ -339,7 +339,7 @@ exports[`<PageLevelBanner /> SuccessDismissable story renders snapshot 1`] = `
     </p>
   </div>
   <button
-    class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon banner__close-btn"
+    class="button button--lg button--icon button--neutral banner__close-btn"
     type="button"
   >
     <svg
@@ -390,7 +390,7 @@ exports[`<PageLevelBanner /> Warning story renders snapshot 1`] = `
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
       <button
-        class="clickable-style clickable-style--link clickable-style--neutral button button--link"
+        class="button button--link button--neutral"
         type="button"
       >
         click into the course.
@@ -430,7 +430,7 @@ exports[`<PageLevelBanner /> WarningDismissable story renders snapshot 1`] = `
       Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
        
       <button
-        class="clickable-style clickable-style--link clickable-style--neutral button button--link"
+        class="button button--link button--neutral"
         type="button"
       >
         click into the course.
@@ -438,7 +438,7 @@ exports[`<PageLevelBanner /> WarningDismissable story renders snapshot 1`] = `
     </p>
   </div>
   <button
-    class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral button button--icon banner__close-btn"
+    class="button button--lg button--icon button--neutral banner__close-btn"
     type="button"
   >
     <svg
diff --git a/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
index 25cdf3fee..23093c7cb 100644
--- a/src/components/Popover/__snapshots__/Popover.test.tsx.snap
+++ b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<Popover /> Bottom story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:rh:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:rf:"
@@ -32,7 +32,7 @@ exports[`<Popover /> BottomEnd story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1a:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r18:"
@@ -57,7 +57,7 @@ exports[`<Popover /> BottomStart story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r15:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r13:"
@@ -82,7 +82,7 @@ exports[`<Popover /> Default story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r2:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r0:"
@@ -107,7 +107,7 @@ exports[`<Popover /> FocusClickableElement story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r23:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r21:"
@@ -132,7 +132,7 @@ exports[`<Popover /> Left story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:rm:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:rk:"
@@ -157,7 +157,7 @@ exports[`<Popover /> LeftEnd story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1u:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r1s:"
@@ -182,7 +182,7 @@ exports[`<Popover /> LeftStart story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1p:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r1n:"
@@ -207,7 +207,7 @@ exports[`<Popover /> Right story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:rc:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:ra:"
@@ -232,7 +232,7 @@ exports[`<Popover /> RightEnd story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1k:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r1i:"
@@ -257,7 +257,7 @@ exports[`<Popover /> RightStart story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r1f:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r1d:"
@@ -282,7 +282,7 @@ exports[`<Popover /> Top story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r7:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:r5:"
@@ -307,7 +307,7 @@ exports[`<Popover /> TopEnd story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:r10:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:ru:"
@@ -332,7 +332,7 @@ exports[`<Popover /> TopStart story renders snapshot 1`] = `
   <button
     aria-controls="headlessui-popover-panel-:rr:"
     aria-expanded="true"
-    class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--brand button button--secondary"
+    class="button button--lg button--secondary button--brand"
     data-headlessui-state="open"
     data-testid="popover-trigger-button"
     id="headlessui-popover-button-:rp:"
diff --git a/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap b/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap
index 1292ab331..ae4b6cbd4 100644
--- a/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap
+++ b/src/components/SearchBar/__snapshots__/SearchBar.test.ts.snap
@@ -8,7 +8,7 @@ exports[`<SearchField /> Custom story renders snapshot 1`] = `
     style="margin-bottom: 1rem;"
   >
     <button
-      class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary search-button"
+      class="button button--lg button--primary button--brand search-button"
       type="button"
     >
       Search
@@ -68,7 +68,7 @@ exports[`<SearchField /> Custom story renders snapshot 1`] = `
       </svg>
     </div>
     <button
-      class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary search-button"
+      class="button button--lg button--primary button--brand search-button"
       type="button"
     >
       Search
@@ -111,7 +111,7 @@ exports[`<SearchField /> Default story renders snapshot 1`] = `
       </svg>
     </div>
     <button
-      class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary search-button"
+      class="button button--lg button--primary button--brand search-button"
       type="button"
     >
       Search
@@ -155,7 +155,7 @@ exports[`<SearchField /> Disabled story renders snapshot 1`] = `
       </svg>
     </div>
     <button
-      class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary button--disabled search-button"
+      class="button button--lg button--primary button--brand button--disabled search-button"
       disabled=""
       tabindex="-1"
       type="button"
@@ -171,7 +171,7 @@ exports[`<SearchField /> SearchButton story renders snapshot 1`] = `
   style="padding: 0.5rem; background-color: white;"
 >
   <button
-    class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary search-button"
+    class="button button--lg button--primary button--brand search-button"
     type="button"
   >
     Search
diff --git a/src/components/Section/__snapshots__/Section.test.ts.snap b/src/components/Section/__snapshots__/Section.test.ts.snap
index c4383d0ab..ec37554f7 100644
--- a/src/components/Section/__snapshots__/Section.test.ts.snap
+++ b/src/components/Section/__snapshots__/Section.test.ts.snap
@@ -195,7 +195,7 @@ exports[`<Section /> WithRight story renders snapshot 1`] = `
         class="section__right"
       >
         <button
-          class="clickable-style clickable-style--md clickable-style--primary clickable-style--brand button button--primary"
+          class="button button--md button--primary button--brand"
           type="button"
         >
           Button
diff --git a/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
index 57ed4f09b..0fe0d0e09 100644
--- a/src/components/Slider/__snapshots__/Slider.test.tsx.snap
+++ b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
@@ -413,7 +413,7 @@ exports[`<Slider /> UsingControlButtons story renders snapshot 1`] = `
   >
     <button
       aria-label="Decrement"
-      class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+      class="button button--lg button--secondary button--neutral"
       type="button"
     >
       –
@@ -448,7 +448,7 @@ exports[`<Slider /> UsingControlButtons story renders snapshot 1`] = `
     </p>
     <button
       aria-label="Increment"
-      class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+      class="button button--lg button--secondary button--neutral"
       type="button"
     >
       +
diff --git a/src/components/Table/__snapshots__/Table.test.ts.snap b/src/components/Table/__snapshots__/Table.test.ts.snap
index 2fbdde5f8..93e318cc3 100644
--- a/src/components/Table/__snapshots__/Table.test.ts.snap
+++ b/src/components/Table/__snapshots__/Table.test.ts.snap
@@ -160,7 +160,7 @@ exports[`<Table /> FiltersInteractive story renders snapshot 1`] = `
 <div>
   <div>
     <button
-      class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary filters-button"
+      class="button button--lg button--secondary button--neutral filters-button"
       type="button"
     >
       <svg
@@ -614,7 +614,7 @@ exports[`<Table /> SortableInteractive story renders snapshot 1`] = `
         class="table-header-cell"
       >
         <button
-          class="clickable-style clickable-style--link clickable-style--brand button button--link table-header-cell__sort-button"
+          class="button button--link button--brand table-header-cell__sort-button"
           type="button"
         >
           Sortable
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
index 1d0155864..e6ad63d05 100644
--- a/src/components/Tag/Tag.stories.tsx
+++ b/src/components/Tag/Tag.stories.tsx
@@ -4,6 +4,8 @@ import { Tag, VARIANTS } from './Tag';
 import Icon from '../Icon';
 import styles from './Tag.stories.module.css';
 
+const supportedVariants = VARIANTS.filter((variant) => variant !== 'yield');
+
 export default {
   title: 'Components/Tag',
   component: Tag,
@@ -35,7 +37,7 @@ export const Default: Story = {};
 export const Variants: Story = {
   render: (args) => (
     <div className={styles.tagList}>
-      {VARIANTS.map((variant) => {
+      {supportedVariants.map((variant) => {
         return (
           <Tag
             data-testid="test"
@@ -56,7 +58,7 @@ export const Variants: Story = {
 export const OutlineVariants: Story = {
   render: (args) => (
     <div className={styles.tagList}>
-      {VARIANTS.map((variant) => {
+      {supportedVariants.map((variant) => {
         return (
           <Tag
             key={variant}
@@ -81,7 +83,7 @@ export const WithIcon: Story = {
   },
   render: (args) => (
     <div className={styles.tagList}>
-      {VARIANTS.map((variant) => {
+      {supportedVariants.map((variant) => {
         return (
           <Tag
             key={variant}
@@ -107,7 +109,7 @@ export const WithLongTextAndIcon: Story = {
   },
   render: (args) => (
     <div className={styles.tagList}>
-      {VARIANTS.map((variant) => {
+      {supportedVariants.map((variant) => {
         return <Tag key={variant} {...args} hasOutline variant={variant} />;
       })}
     </div>
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 1fd7508de..7edee16da 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -8,6 +8,7 @@ export const VARIANTS = [
   'error',
   'success',
   'warning',
+  /** @deprecated */
   'yield',
   'brand',
 ] as const;
@@ -18,6 +19,8 @@ type Props = {
   /**
    * The color variant of the tag. It will update the content colors, background color, and border (when `hasOutline` is set to `true`).
    *
+   * **NOTE**: `yield` variant is deprecated and will be removed in a future release.
+   *
    * **Default is `"neutral"`**.
    */
   variant?: Variant;
diff --git a/src/components/Tag/__snapshots__/Tag.test.ts.snap b/src/components/Tag/__snapshots__/Tag.test.ts.snap
index c329bc19a..cd8010d5d 100644
--- a/src/components/Tag/__snapshots__/Tag.test.ts.snap
+++ b/src/components/Tag/__snapshots__/Tag.test.ts.snap
@@ -52,15 +52,6 @@ exports[`<Tag /> OutlineVariants story renders snapshot 1`] = `
       warning
     </span>
   </span>
-  <span
-    class="text text--sm text--bold-weight tag tag--yield tag--outline"
-  >
-    <span
-      class="tag__body"
-    >
-      yield
-    </span>
-  </span>
   <span
     class="text text--sm text--bold-weight tag tag--brand tag--outline"
   >
@@ -117,16 +108,6 @@ exports[`<Tag /> Variants story renders snapshot 1`] = `
       warning
     </span>
   </span>
-  <span
-    class="text text--sm text--bold-weight tag tag--yield"
-    data-testid="test"
-  >
-    <span
-      class="tag__body"
-    >
-      yield
-    </span>
-  </span>
   <span
     class="text text--sm text--bold-weight tag tag--brand"
     data-testid="test"
@@ -224,26 +205,6 @@ exports[`<Tag /> WithIcon story renders snapshot 1`] = `
       warning
     </span>
   </span>
-  <span
-    class="text text--sm text--bold-weight tag tag--yield tag--outline"
-  >
-    <svg
-      aria-hidden="true"
-      class="icon"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M10.65 19.8004L8.925 18.2254C7.15833 16.6087 5.5625 15.0046 4.1375 13.4129C2.7125 11.8212 2 10.0671 2 8.15039C2 6.58372 2.525 5.27539 3.575 4.22539C4.625 3.17539 5.93333 2.65039 7.5 2.65039C8.38333 2.65039 9.21667 2.83789 10 3.21289C10.7833 3.58789 11.45 4.10039 12 4.75039C12.55 4.10039 13.2167 3.58789 14 3.21289C14.7833 2.83789 15.6167 2.65039 16.5 2.65039C18.0667 2.65039 19.375 3.17539 20.425 4.22539C21.475 5.27539 22 6.58372 22 8.15039C22 10.0671 21.2917 11.8254 19.875 13.4254C18.4583 15.0254 16.85 16.6337 15.05 18.2504L13.35 19.8004C12.9667 20.1504 12.5167 20.3254 12 20.3254C11.4833 20.3254 11.0333 20.1504 10.65 19.8004Z"
-      />
-    </svg>
-    <span
-      class="tag__body"
-    >
-      yield
-    </span>
-  </span>
   <span
     class="text text--sm text--bold-weight tag tag--brand tag--outline"
   >
@@ -351,26 +312,6 @@ exports[`<Tag /> WithLongTextAndIcon story renders snapshot 1`] = `
       This tag has a really long text message
     </span>
   </span>
-  <span
-    class="text text--sm text--bold-weight tag tag--yield tag--outline"
-  >
-    <svg
-      aria-hidden="true"
-      class="icon"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
-      />
-    </svg>
-    <span
-      class="tag__body"
-    >
-      This tag has a really long text message
-    </span>
-  </span>
   <span
     class="text text--sm text--bold-weight tag tag--brand tag--outline"
   >
diff --git a/src/components/TimelineNav/__snapshots__/TimelineNav.test.ts.snap b/src/components/TimelineNav/__snapshots__/TimelineNav.test.ts.snap
index ed305a29d..eeba6f167 100644
--- a/src/components/TimelineNav/__snapshots__/TimelineNav.test.ts.snap
+++ b/src/components/TimelineNav/__snapshots__/TimelineNav.test.ts.snap
@@ -494,7 +494,7 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
     class="timeline-nav__body"
   >
     <button
-      class="clickable-style clickable-style--link clickable-style--neutral button button--link timeline-nav__back"
+      class="button button--link button--neutral timeline-nav__back"
       type="button"
     >
       <svg
diff --git a/yarn.lock b/yarn.lock
index 442d36212..63b563464 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -57,6 +57,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/code-frame@npm:7.23.5"
+  dependencies:
+    "@babel/highlight": "npm:^7.23.4"
+    chalk: "npm:^2.4.2"
+  checksum: 44e58529c9d93083288dc9e649c553c5ba997475a7b0758cc3ddc4d77b8a7d985dbe78cc39c9bbc61f26d50af6da1ddf0a3427eae8cc222a9370619b671ed8f5
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9, @babel/compat-data@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/compat-data@npm:7.23.3"
@@ -64,7 +74,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.22.0, @babel/core@npm:^7.22.9, @babel/core@npm:^7.7.5":
+"@babel/compat-data@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/compat-data@npm:7.23.5"
+  checksum: 088f14f646ecbddd5ef89f120a60a1b3389a50a9705d44603dca77662707d0175a5e0e0da3943c3298f1907a4ab871468656fbbf74bb7842cd8b0686b2c19736
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3":
   version: 7.23.3
   resolution: "@babel/core@npm:7.23.3"
   dependencies:
@@ -87,7 +104,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.22.9, @babel/generator@npm:^7.23.3, @babel/generator@npm:^7.7.2":
+"@babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2":
+  version: 7.23.5
+  resolution: "@babel/core@npm:7.23.5"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.23.5"
+    "@babel/generator": "npm:^7.23.5"
+    "@babel/helper-compilation-targets": "npm:^7.22.15"
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helpers": "npm:^7.23.5"
+    "@babel/parser": "npm:^7.23.5"
+    "@babel/template": "npm:^7.22.15"
+    "@babel/traverse": "npm:^7.23.5"
+    "@babel/types": "npm:^7.23.5"
+    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: f24265172610dbffe0e315b6a8e8f87cf87d2643c8915196adcddd81c66a8eaeb1b36fea851e2308961636a180089a5f10becaa340d5b707d5f64e2e5ffb2bc8
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/generator@npm:7.23.5"
+  dependencies:
+    "@babel/types": "npm:^7.23.5"
+    "@jridgewell/gen-mapping": "npm:^0.3.2"
+    "@jridgewell/trace-mapping": "npm:^0.3.17"
+    jsesc: "npm:^2.5.1"
+  checksum: 094af79c2e8fdb0cfd06b42ff6a39a8a95639bc987cace44f52ed5c46127f5469eb20ab5f4c8991fc00fa9c1445a1977cde8e44289d6be29ddbb315fb0fc1b45
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.23.3, @babel/generator@npm:^7.7.2":
   version: 7.23.3
   resolution: "@babel/generator@npm:7.23.3"
   dependencies:
@@ -130,7 +182,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.22.15":
+"@babel/helper-create-class-features-plugin@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.15"
   dependencies:
@@ -245,7 +297,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
   version: 7.22.5
   resolution: "@babel/helper-plugin-utils@npm:7.22.5"
   checksum: ab220db218089a2aadd0582f5833fd17fa300245999f5f8784b10f5a75267c4e808592284a29438a0da365e702f05acb369f99e1c915c02f9f9210ec60eab8ea
@@ -287,7 +339,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-skip-transparent-expression-wrappers@npm:^7.20.0, @babel/helper-skip-transparent-expression-wrappers@npm:^7.22.5":
+"@babel/helper-skip-transparent-expression-wrappers@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.22.5"
   dependencies:
@@ -312,6 +364,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/helper-string-parser@npm:7.23.4"
+  checksum: c352082474a2ee1d2b812bd116a56b2e8b38065df9678a32a535f151ec6f58e54633cc778778374f10544b930703cca6ddf998803888a636afa27e2658068a9c
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-validator-identifier@npm:7.22.20"
@@ -326,6 +385,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/helper-validator-option@npm:7.23.5"
+  checksum: 537cde2330a8aede223552510e8a13e9c1c8798afee3757995a7d4acae564124fe2bf7e7c3d90d62d3657434a74340a274b3b3b1c6f17e9a2be1f48af29cb09e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-wrap-function@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-wrap-function@npm:7.22.20"
@@ -348,6 +414,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/helpers@npm:7.23.5"
+  dependencies:
+    "@babel/template": "npm:^7.22.15"
+    "@babel/traverse": "npm:^7.23.5"
+    "@babel/types": "npm:^7.23.5"
+  checksum: 84a813db55e03b5f47cef1210eb22751dae5dc3605bf62ff9acd4c248d857f94cb43dc7299e0edcec9312b31088f0d77f881282df2957e65a322b5412801cc24
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.22.13":
   version: 7.22.20
   resolution: "@babel/highlight@npm:7.22.20"
@@ -359,7 +436,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.22.7, @babel/parser@npm:^7.23.3":
+"@babel/highlight@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/highlight@npm:7.23.4"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+  checksum: 62fef9b5bcea7131df4626d009029b1ae85332042f4648a4ce6e740c3fd23112603c740c45575caec62f260c96b11054d3be5987f4981a5479793579c3aac71f
+  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.3":
   version: 7.23.3
   resolution: "@babel/parser@npm:7.23.3"
   bin:
@@ -368,6 +456,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/parser@npm:7.23.5"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 828c250ace0c58f9dc311fd13ad3da34e86ed27a5c6b4183ce9d85be250e78eeb71a13f6d51a368c46f8cbe51106c726bfbb158bf46a89db3a168a0002d3050a
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
@@ -404,43 +501,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:^7.13.0":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.18.6"
-    "@babel/helper-plugin-utils": "npm:^7.18.6"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 49a78a2773ec0db56e915d9797e44fd079ab8a9b2e1716e0df07c92532f2c65d76aeda9543883916b8e0ff13606afeffa67c5b93d05b607bc87653ad18a91422
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.13.8":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.18.6"
-    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 949c9ddcdecdaec766ee610ef98f965f928ccc0361dd87cf9f88cf4896a6ccd62fce063d4494778e50da99dea63d270a1be574a62d6ab81cbe9d85884bf55a7d
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-optional-chaining@npm:^7.13.12":
-  version: 7.21.0
-  resolution: "@babel/plugin-proposal-optional-chaining@npm:7.21.0"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.20.0"
-    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 522cd133aff5c94c0ef36ff83c64f03deee183815da68b65b6950e81972ace3b514e032df07ea76d0f9ec8cc7a49578092907adfa17fccb4612117557c04a882
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-private-property-in-object@npm:7.21.0-placeholder-for-preset-env.2":
   version: 7.21.0-placeholder-for-preset-env.2
   resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.21.0-placeholder-for-preset-env.2"
@@ -704,9 +764,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.3"
+"@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"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -714,7 +774,7 @@ __metadata:
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 39407e5d92905a824d6ef115af70755b26a6b458639686092d7e05d0701f7ff42e995e2c5aab28d6ab5311752190667766417e58834b54c98fac78c857e30320
+  checksum: e2fc132c9033711d55209f4781e1fc73f0f4da5e0ca80a2da73dec805166b73c92a6e83571a8994cd2c893a28302e24107e90856202b24781bab734f800102bb
   languageName: node
   linkType: hard
 
@@ -742,18 +802,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.3"
+"@babel/plugin-transform-block-scoping@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: eb90a200e684e7025e40c4498e4c024cdfc1fab853eb5b4c6320ea637c88d9cb57cb353871e48ee313746d16ab7d89b3a330691753f197eef18b5280a6edb9b6
+  checksum: bbb965a3acdfb03559806d149efbd194ac9c983b260581a60efcb15eb9fbe20e3054667970800146d867446db1c1398f8e4ee87f4454233e49b8f8ce947bd99b
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.23.3":
+"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-class-properties@npm:7.23.3"
   dependencies:
@@ -765,22 +825,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-class-static-block@npm:7.23.3"
+"@babel/plugin-transform-class-static-block@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4"
   dependencies:
     "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.12.0
-  checksum: 1325e1d1989efbef4d48505e5c0c416d118be0e615c12a8d5581af032d0bc6ae00525c8fb4af68ba9098fa1578ec7738db0a9d362193b8507660d2a24124ddf4
+  checksum: c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-classes@npm:7.23.3"
+"@babel/plugin-transform-classes@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/plugin-transform-classes@npm:7.23.5"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-compilation-targets": "npm:^7.22.15"
@@ -793,7 +853,7 @@ __metadata:
     globals: "npm:^11.1.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: e4906f232ad588a6e2336b99f5171d9de5c10c8a017abb64d1b405e61528108498ca578538e0ec35faad45fc9ed0ec4c89a7600357229ffcc9ef26256c1f161b
+  checksum: f6c4fed2f48bdd46a4726b829ea2ddb5c9c97edd0e55dc53791d82927daad5725052b7e785a8b7e90a53b0606166b9c554469dc94f10fba59ca9642e997d97ee
   languageName: node
   linkType: hard
 
@@ -843,15 +903,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dynamic-import@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.3"
+"@babel/plugin-transform-dynamic-import@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: d1d379dbb1c22c02aa2f5a3f2f1885840aabc21b42e3d42746599f66004239f1ac830012552e6d42113e4defe0625fbf4865864ee3d52963e80125f8c9dad406
+  checksum: 57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845
   languageName: node
   linkType: hard
 
@@ -867,15 +927,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.3"
+"@babel/plugin-transform-export-namespace-from@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: c65e21e5b54135378cfbe7563e884d778ea0864b5950c7db85f984170f20c2e110675c8407b1803ffe587401e5990fbd53eb159c3b3a6d7593ae6f9ffdb83cc4
+  checksum: 9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93
   languageName: node
   linkType: hard
 
@@ -915,15 +975,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-json-strings@npm:7.23.3"
+"@babel/plugin-transform-json-strings@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-json-strings@npm:7.23.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: a5949613b8883a64ad2a0eb41d26a80ac226ea03db7cef8f57f4ca18045fdc834aee420548272a633510e7aa88ec3cb4e15d2e27ddc45f9ef5db09228f0478c1
+  checksum: f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de
   languageName: node
   linkType: hard
 
@@ -938,15 +998,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.3"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: cbab57a2bb6d5ddd621b91684845e576664862a6d7697fa9dddb796238330dd3dac21cda223f7b1553c9f650e0eebcd5d9bb1e478ed9ba937ce06dc6d0fbd0f6
+  checksum: 2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5
   languageName: node
   linkType: hard
 
@@ -973,7 +1033,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.23.3":
+"@babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.23.3"
   dependencies:
@@ -1035,33 +1095,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.3"
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: ea844a12a3ae5647d6d2ae0685fde48ae53e724ef9ce5d9fbf36e8f1ff0107f76a5349ef34c2a06984b3836c001748caf9701afb172bd7ba71a5dff79e16b434
+  checksum: a27d73ea134d3d9560a6b2e26ab60012fba15f1db95865aa0153c18f5ec82cfef6a7b3d8df74e3c2fca81534fa5efeb6cacaf7b08bdb7d123e3dafdd079886a3
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.3"
+"@babel/plugin-transform-numeric-separator@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: f5515532fac2bbf9da082eedc16fd597fb8b787e7a6d256d53dcd9daa054b8f695a312bfec888dd34c03d63dcc2c65c8249ac33c2e23bd3d4d246ce4d44d141d
+  checksum: 6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.23.3"
+"@babel/plugin-transform-object-rest-spread@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.23.4"
   dependencies:
     "@babel/compat-data": "npm:^7.23.3"
     "@babel/helper-compilation-targets": "npm:^7.22.15"
@@ -1070,7 +1130,7 @@ __metadata:
     "@babel/plugin-transform-parameters": "npm:^7.23.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: d2b7da61215e7319035405876f6228d7fb1c8cc709cccbea82a62ca6ed262d155aef70291da4c5564967cf3c941418cc67807ee3b603e63ef8e5ada2ea110ef6
+  checksum: 656f09c4ec629856e807d5b386559166ae417ff75943abce19656b2c6de5101dfd0aaf23f9074e854339370b4e09f57518d3202457046ee5b567ded531005479
   languageName: node
   linkType: hard
 
@@ -1086,15 +1146,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.3"
+"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 2c59c78cf8c7070be84f1087116508211323dacd93581529b95b31927b2fab67dd11aca363584e99bebc7e4e20720f2b59d99ade7e8cf1577732eef609a34c45
+  checksum: d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 0ef24e889d6151428953fc443af5f71f4dae73f373dc1b7f5dd3f6a61d511296eb77e9b870e8c2c02a933e3455ae24c1fa91738c826b72a4ff87e0337db527e8
   languageName: node
   linkType: hard
 
@@ -1122,7 +1195,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.23.3":
+"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-private-methods@npm:7.23.3"
   dependencies:
@@ -1134,9 +1207,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.3"
+"@babel/plugin-transform-private-property-in-object@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
@@ -1144,7 +1217,7 @@ __metadata:
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 7da96e903ac828f3ff60cded1377e57b02ed9960ca7d6645a5511ae66df96d67febc219d0b0ff16e7657e91afcb848c33c6c4604b82640df9a3c6ec3a5891a03
+  checksum: 02eef2ee98fa86ee5052ed9bf0742d6d22b510b5df2fcce0b0f5615d6001f7786c6b31505e7f1c2f446406d8fb33603a5316d957cfa5b8365cbf78ddcc24fa42
   languageName: node
   linkType: hard
 
@@ -1348,14 +1421,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.22.9, @babel/preset-env@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/preset-env@npm:7.23.3"
+"@babel/preset-env@npm:^7.23.2, @babel/preset-env@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/preset-env@npm:7.23.5"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.3"
+    "@babel/compat-data": "npm:^7.23.5"
     "@babel/helper-compilation-targets": "npm:^7.22.15"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-validator-option": "npm:^7.22.15"
+    "@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"
@@ -1379,25 +1452,25 @@ __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.3"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.23.4"
     "@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.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.3"
-    "@babel/plugin-transform-classes": "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-computed-properties": "npm:^7.23.3"
     "@babel/plugin-transform-destructuring": "npm:^7.23.3"
     "@babel/plugin-transform-dotall-regex": "npm:^7.23.3"
     "@babel/plugin-transform-duplicate-keys": "npm:^7.23.3"
-    "@babel/plugin-transform-dynamic-import": "npm:^7.23.3"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.23.4"
     "@babel/plugin-transform-exponentiation-operator": "npm:^7.23.3"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.23.3"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4"
     "@babel/plugin-transform-for-of": "npm:^7.23.3"
     "@babel/plugin-transform-function-name": "npm:^7.23.3"
-    "@babel/plugin-transform-json-strings": "npm:^7.23.3"
+    "@babel/plugin-transform-json-strings": "npm:^7.23.4"
     "@babel/plugin-transform-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.3"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4"
     "@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"
@@ -1405,15 +1478,15 @@ __metadata:
     "@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"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.3"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.23.3"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.23.3"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.4"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.23.4"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.23.4"
     "@babel/plugin-transform-object-super": "npm:^7.23.3"
-    "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.3"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.3"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.4"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.23.4"
     "@babel/plugin-transform-parameters": "npm:^7.23.3"
     "@babel/plugin-transform-private-methods": "npm:^7.23.3"
-    "@babel/plugin-transform-private-property-in-object": "npm:^7.23.3"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.23.4"
     "@babel/plugin-transform-property-literals": "npm:^7.23.3"
     "@babel/plugin-transform-regenerator": "npm:^7.23.3"
     "@babel/plugin-transform-reserved-words": "npm:^7.23.3"
@@ -1434,11 +1507,11 @@ __metadata:
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 90ca3a0966eb09248b41e451dc77da27fea373881fea6713ea5ca4f416733cba58f8dd5cd8708f20832a3b7a89b264ee4131cc0bf0c959a733b50e6f8c2f7187
+  checksum: 9c2c2ca7a8ac7ea5a36866f5c1df43936f60b4b5988693c574d531a2abfbcd2804d8a67db3560a8e505cf11e2c3e3031ce4104a84685cff6fbd46b884592146c
   languageName: node
   linkType: hard
 
-"@babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.22.5":
+"@babel/preset-flow@npm:^7.22.15":
   version: 7.23.3
   resolution: "@babel/preset-flow@npm:7.23.3"
   dependencies:
@@ -1464,7 +1537,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.22.5, @babel/preset-react@npm:^7.23.3":
+"@babel/preset-react@npm:^7.22.15, @babel/preset-react@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/preset-react@npm:7.23.3"
   dependencies:
@@ -1480,7 +1553,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.23.3":
+"@babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/preset-typescript@npm:7.23.3"
   dependencies:
@@ -1495,7 +1568,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/register@npm:^7.13.16":
+"@babel/register@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/register@npm:7.22.15"
   dependencies:
@@ -1517,7 +1590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.23.2
   resolution: "@babel/runtime@npm:7.23.2"
   dependencies:
@@ -1537,7 +1610,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.22.8, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.3":
+"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/traverse@npm:7.23.5"
+  dependencies:
+    "@babel/code-frame": "npm:^7.23.5"
+    "@babel/generator": "npm:^7.23.5"
+    "@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.5"
+    "@babel/types": "npm:^7.23.5"
+    debug: "npm:^4.1.0"
+    globals: "npm:^11.1.0"
+  checksum: 281cae2765caad88c7af6214eab3647db0e9cadc7ffcd3fd924f09fbb9bd09d97d6fb210794b7545c317ce417a30016636530043a455ba6922349e39c1ba622a
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/traverse@npm:7.23.3"
   dependencies:
@@ -1555,7 +1646,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.5, @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.3, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.5, @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.3, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.23.3
   resolution: "@babel/types@npm:7.23.3"
   dependencies:
@@ -1566,6 +1657,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.18.9, @babel/types@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/types@npm:7.23.5"
+  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: a623a4e7f396f1903659099da25bfa059694a49f42820f6b5288347f1646f0b37fb7cc550ba45644e9067149368ef34ccb1bd4a4251ec59b83b3f7765088f363
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -1608,7 +1710,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@chanzuckerberg/eds@workspace:."
   dependencies:
-    "@babel/preset-env": "npm:^7.23.3"
+    "@babel/preset-env": "npm:^7.23.5"
     "@babel/preset-react": "npm:^7.23.3"
     "@babel/preset-typescript": "npm:^7.23.3"
     "@chanzuckerberg/axe-storybook-testing": "npm:^7.1.3"
@@ -1617,47 +1719,46 @@ __metadata:
     "@chanzuckerberg/eslint-plugin-edu-react": "npm:^1.1.9"
     "@chanzuckerberg/eslint-plugin-stories": "npm:^3.2.14"
     "@chanzuckerberg/story-utils": "npm:^4.0.0"
-    "@commitlint/cli": "npm:^18.4.1"
-    "@commitlint/config-conventional": "npm:^18.4.0"
+    "@commitlint/cli": "npm:^18.4.3"
+    "@commitlint/config-conventional": "npm:^18.4.3"
     "@geometricpanda/storybook-addon-badges": "npm:^2.0.0"
     "@headlessui/react": "npm:^1.7.17"
-    "@omlet/cli": "npm:^1.0.1-beta.38"
+    "@omlet/cli": "npm:^1.0.1-beta.39"
     "@popperjs/core": "npm:^2.11.8"
     "@rollup/plugin-node-resolve": "npm:^15.2.3"
     "@rollup/plugin-typescript": "npm:^11.1.5"
     "@size-limit/file": "npm:^8.2.6"
-    "@storybook/addon-a11y": "npm:^7.5.3"
-    "@storybook/addon-docs": "npm:^7.5.3"
-    "@storybook/addon-essentials": "npm:^7.5.3"
-    "@storybook/addon-interactions": "npm:^7.5.3"
-    "@storybook/addon-links": "npm:^7.5.3"
+    "@storybook/addon-a11y": "npm:^7.6.3"
+    "@storybook/addon-essentials": "npm:^7.6.3"
+    "@storybook/addon-interactions": "npm:^7.6.3"
+    "@storybook/addon-links": "npm:^7.6.3"
     "@storybook/addon-styling": "npm:^1.3.7"
-    "@storybook/react": "npm:^7.5.3"
-    "@storybook/react-webpack5": "npm:^7.5.3"
+    "@storybook/react": "npm:^7.6.3"
+    "@storybook/react-webpack5": "npm:^7.6.3"
     "@storybook/testing-library": "npm:^0.2.2"
     "@storybook/testing-react": "npm:^2.0.1"
-    "@testing-library/jest-dom": "npm:^6.1.4"
-    "@testing-library/react": "npm:^14.1.0"
+    "@testing-library/jest-dom": "npm:^6.1.5"
+    "@testing-library/react": "npm:^14.1.2"
     "@testing-library/user-event": "npm:^14.5.1"
     "@tippyjs/react": "npm:^4.2.6"
-    "@types/jest": "npm:^29.5.8"
-    "@types/lodash": "npm:^4.14.201"
-    "@types/node": "npm:^20.9.0"
-    "@types/react": "npm:^18.2.37"
+    "@types/jest": "npm:^29.5.10"
+    "@types/lodash": "npm:^4.14.202"
+    "@types/node": "npm:^20.10.1"
+    "@types/react": "npm:^18.2.39"
     "@types/react-beautiful-dnd": "npm:^13.1.7"
-    "@types/react-dom": "npm:^18.2.15"
+    "@types/react-dom": "npm:^18.2.17"
     "@types/react-portal": "npm:^4.0.6"
     axe-core: "npm:4.8.2"
-    chromatic: "npm:^9.0.0"
+    chromatic: "npm:^9.1.0"
     clsx: "npm:^2.0.0"
     codecov: "npm:^3.8.3"
     copyfiles: "npm:^2.4.1"
-    eslint: "npm:^8.53.0"
+    eslint: "npm:^8.54.0"
     eslint-config-prettier: "npm:^9.0.0"
     eslint-plugin-jest: "npm:^27.6.0"
     eslint-plugin-prettier: "npm:^5.0.1"
     eslint-plugin-storybook: "npm:^0.6.15"
-    eslint-plugin-testing-library: "npm:^6.1.2"
+    eslint-plugin-testing-library: "npm:^6.2.0"
     graphemer: "npm:^1.4.0"
     husky: "npm:^8.0.3"
     identity-obj-proxy: "npm:^3.0.0"
@@ -1684,11 +1785,11 @@ __metadata:
     react-popper: "npm:^2.3.0"
     react-portal: "npm:^4.2.2"
     react-uid: "npm:^2.3.3"
-    rollup: "npm:^4.4.0"
+    rollup: "npm:^4.6.1"
     rollup-plugin-postcss: "npm:^4.0.2"
     size-limit: "npm:^8.2.6"
     standard-version: "npm:^9.5.0"
-    storybook: "npm:^7.5.3"
+    storybook: "npm:^7.6.3"
     style-dictionary: "npm:^3.9.0"
     stylelint: "npm:^15.11.0"
     stylelint-config-recommended: "npm:^13.0.0"
@@ -1775,15 +1876,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@commitlint/cli@npm:^18.4.1":
-  version: 18.4.1
-  resolution: "@commitlint/cli@npm:18.4.1"
+"@commitlint/cli@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/cli@npm:18.4.3"
   dependencies:
-    "@commitlint/format": "npm:^18.4.0"
-    "@commitlint/lint": "npm:^18.4.0"
-    "@commitlint/load": "npm:^18.4.1"
-    "@commitlint/read": "npm:^18.4.0"
-    "@commitlint/types": "npm:^18.4.0"
+    "@commitlint/format": "npm:^18.4.3"
+    "@commitlint/lint": "npm:^18.4.3"
+    "@commitlint/load": "npm:^18.4.3"
+    "@commitlint/read": "npm:^18.4.3"
+    "@commitlint/types": "npm:^18.4.3"
     execa: "npm:^5.0.0"
     lodash.isfunction: "npm:^3.0.9"
     resolve-from: "npm:5.0.0"
@@ -1791,90 +1892,90 @@ __metadata:
     yargs: "npm:^17.0.0"
   bin:
     commitlint: cli.js
-  checksum: 08354788971437ef6b4693564d1a0476b0f89ce89f9d0257f7885af525904c1ba2a0dafa7321d635bc7a034ea4dbef978f5b662ef524d545ec8e8db98888b54b
+  checksum: 45f469eb53484a707fe97a48784ef92af75bd831a208ccc4c1d747c9b449f3a180dcdeb29bb9f2f0a6f0691403a1021cd36a762fe2a17f4c254f25f1332f677f
   languageName: node
   linkType: hard
 
-"@commitlint/config-conventional@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/config-conventional@npm:18.4.0"
+"@commitlint/config-conventional@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/config-conventional@npm:18.4.3"
   dependencies:
     conventional-changelog-conventionalcommits: "npm:^7.0.2"
-  checksum: d9101033e13bb5caee0c6691675c2bb8f3d374ad24a19dd29a25d6c81702b5cf549d06b3a1238b53aeae5bf00c6072c61fd6f7370c40b3506c2d0f84f8038bc9
+  checksum: bb6c1559979002e79c5e7c575f57fd713638523cdadfa61754eaabb8aad042d688c859e82ccf58589bb9aa2a4497e820702744095c9b82f6018fbb3b5d75d08d
   languageName: node
   linkType: hard
 
-"@commitlint/config-validator@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/config-validator@npm:18.4.0"
+"@commitlint/config-validator@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/config-validator@npm:18.4.3"
   dependencies:
-    "@commitlint/types": "npm:^18.4.0"
+    "@commitlint/types": "npm:^18.4.3"
     ajv: "npm:^8.11.0"
-  checksum: 7bca5f64b4fa4f198e1af5884ec2e43983b5254e4813e6d05cdfd209f1bca30ff6e4dd79c4d94e35dd7e7ed696dddc1af785712349b66ab272733185600da1a4
+  checksum: e56aa321aa4f680ed78822f974e724e27c005c6c6b910ff59c3a2b0220c97ff4291e316674637ec28da6f8234952e2d20673d9851e049913474e8f24b4e2d376
   languageName: node
   linkType: hard
 
-"@commitlint/ensure@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/ensure@npm:18.4.0"
+"@commitlint/ensure@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/ensure@npm:18.4.3"
   dependencies:
-    "@commitlint/types": "npm:^18.4.0"
+    "@commitlint/types": "npm:^18.4.3"
     lodash.camelcase: "npm:^4.3.0"
     lodash.kebabcase: "npm:^4.1.1"
     lodash.snakecase: "npm:^4.1.1"
     lodash.startcase: "npm:^4.4.0"
     lodash.upperfirst: "npm:^4.3.1"
-  checksum: 84bc79e2636b5151a950d7c9b8dbe89da1565d570fd91e5f96d09dc23db7bb39cc57612eb26a706b51f43418ebb757b393275ae6a7da9a582665478432e8273d
+  checksum: 5c8c437ffef5b0d241a02d1c8967324765429d27e2ae882feb4fc96f53472e4c8d6ea6d86a64da7c97dd7efac07bc1f1c2a8babc1bbb56db48152a4f26f2ba69
   languageName: node
   linkType: hard
 
-"@commitlint/execute-rule@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/execute-rule@npm:18.4.0"
-  checksum: f1ce672f7102aeabd52bdef78b6b523bb0d7095951888e29fc61cc3e77508df557b863f7e66ea2bc11c14de6f647374cd200d22ea07579821523eff66ccf5880
+"@commitlint/execute-rule@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/execute-rule@npm:18.4.3"
+  checksum: 0f0e99e2f079872efe39915313f7d353a36dfac4432bb74ac60a526ca3c9b7bb55365a2e4627f99f4be3fb8ac4c6e745adcacfbdcbf940418f101ffaa10d5ae3
   languageName: node
   linkType: hard
 
-"@commitlint/format@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/format@npm:18.4.0"
+"@commitlint/format@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/format@npm:18.4.3"
   dependencies:
-    "@commitlint/types": "npm:^18.4.0"
+    "@commitlint/types": "npm:^18.4.3"
     chalk: "npm:^4.1.0"
-  checksum: ed19b16065f6163c8908bc242daee34610c869a62d9fa34f35ccf4dd97eae78cdcc7b36b12756cd94667d79c0a7ca2bd96b33594d0ab7d0faef57c49cb0e4097
+  checksum: 244515c99e60ce1e2c4106ee076554a082ab3655225c59c2bb4fab412f47e1d5e44c5e72a9b8907996eb947243f913347d20640a8da9c01b52e4cf247f1a9f94
   languageName: node
   linkType: hard
 
-"@commitlint/is-ignored@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/is-ignored@npm:18.4.0"
+"@commitlint/is-ignored@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/is-ignored@npm:18.4.3"
   dependencies:
-    "@commitlint/types": "npm:^18.4.0"
+    "@commitlint/types": "npm:^18.4.3"
     semver: "npm:7.5.4"
-  checksum: 2194e2dacbe8097b049c2d4251de4db6d09067daad5a6e7dc66d9d6afb92ef495f888055fd3eb05fd736ee5c85575092ca4b880563abde9f76c85cf37fc6e680
+  checksum: 01fd386bea9634dc7cee2a3f8f9916f4dabf9d3043d838b8ea3328ec622a777c4c637f4a80b639289e38429496535561cc7398b36e880b73fcc819d4f1427fb9
   languageName: node
   linkType: hard
 
-"@commitlint/lint@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/lint@npm:18.4.0"
+"@commitlint/lint@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/lint@npm:18.4.3"
   dependencies:
-    "@commitlint/is-ignored": "npm:^18.4.0"
-    "@commitlint/parse": "npm:^18.4.0"
-    "@commitlint/rules": "npm:^18.4.0"
-    "@commitlint/types": "npm:^18.4.0"
-  checksum: b7e2240f597f3c32f6b9bce0108cdf85db1ad1cf4f148ef4d1e6aa7d1c666c3d570ab05956c916115000b82c9e78580cae7c4ee738ea5eb31e966b51e91e4998
+    "@commitlint/is-ignored": "npm:^18.4.3"
+    "@commitlint/parse": "npm:^18.4.3"
+    "@commitlint/rules": "npm:^18.4.3"
+    "@commitlint/types": "npm:^18.4.3"
+  checksum: 800eba031df61addb7a8c36e8bb9e5585387eaa559d0156e74e591267462b7511cf4e051fb95ca54331624ed862a9f786282de57b93acc80b0bc552b5cb96028
   languageName: node
   linkType: hard
 
-"@commitlint/load@npm:^18.4.1":
-  version: 18.4.1
-  resolution: "@commitlint/load@npm:18.4.1"
+"@commitlint/load@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/load@npm:18.4.3"
   dependencies:
-    "@commitlint/config-validator": "npm:^18.4.0"
-    "@commitlint/execute-rule": "npm:^18.4.0"
-    "@commitlint/resolve-extends": "npm:^18.4.0"
-    "@commitlint/types": "npm:^18.4.0"
+    "@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"
     chalk: "npm:^4.1.0"
     cosmiconfig: "npm:^8.3.6"
@@ -1883,90 +1984,90 @@ __metadata:
     lodash.merge: "npm:^4.6.2"
     lodash.uniq: "npm:^4.5.0"
     resolve-from: "npm:^5.0.0"
-  checksum: 77cb8b02c39fd0a28214cea898811100b1b0c33047914a9294df862ad0c75965b3000ddb1806a5e89054141ce5217419b419d5d3d9bcf757e904f34b530d7474
+  checksum: 8fb8652f00f739c75493d3c805d5cc09e5bef8398eff26b9fbfd8d2be2b6a47758bab72650a3ab5202427c9e1936ea36270c40aca39f87fade38c7293194ee21
   languageName: node
   linkType: hard
 
-"@commitlint/message@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/message@npm:18.4.0"
-  checksum: 8d568fb78a860abd3c19e792e319f14fdbba0708593c3f9243047e8637cbae5d130a632dfa9513595510f2b0512e14f2abb4a4972760df6372273a3b45264db7
+"@commitlint/message@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/message@npm:18.4.3"
+  checksum: b81d59f5a295d0cffbab0edd212b1fa4cdd4fd05cc242bc95d6919c038be9d7022db2d6c0d8132c2910ee409cdce5ce6e472e12ac9bb2d3f6acb7a3db7bbeb99
   languageName: node
   linkType: hard
 
-"@commitlint/parse@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/parse@npm:18.4.0"
+"@commitlint/parse@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/parse@npm:18.4.3"
   dependencies:
-    "@commitlint/types": "npm:^18.4.0"
-    conventional-changelog-angular: "npm:^6.0.0"
+    "@commitlint/types": "npm:^18.4.3"
+    conventional-changelog-angular: "npm:^7.0.0"
     conventional-commits-parser: "npm:^5.0.0"
-  checksum: 32bc327a75aa353577ba998e97dc64a626e7e321c6e9df7ee5343fb08cfb1a635078060a5342fd5b48185e4734ee9302529615ad6991fafa729135329dfaa215
+  checksum: 696c60ecee20f9bfb5e19715ae777aca8e86b133ef709a66171c228b4f618ef15ba515e11274c46ff13df964ba69ab1ddec4055ddce1bc0a69f70b6d2301ccd5
   languageName: node
   linkType: hard
 
-"@commitlint/read@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/read@npm:18.4.0"
+"@commitlint/read@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/read@npm:18.4.3"
   dependencies:
-    "@commitlint/top-level": "npm:^18.4.0"
-    "@commitlint/types": "npm:^18.4.0"
+    "@commitlint/top-level": "npm:^18.4.3"
+    "@commitlint/types": "npm:^18.4.3"
     fs-extra: "npm:^11.0.0"
     git-raw-commits: "npm:^2.0.11"
     minimist: "npm:^1.2.6"
-  checksum: 8efac84f30cb45c7a1c56b51537758398f353302bc5532615a2db32ccf78da99c3d070123dd6703a7fea1d4839e85b65275cd7e526fc70a3eb0c20ec77edc165
+  checksum: ebc815effe4920c769f879947608c367b452f334d9a8e8c3140b7685920bb4ba092d36c5416781522c2e50178a4b91092c5661044c13a0d62dace60091f39706
   languageName: node
   linkType: hard
 
-"@commitlint/resolve-extends@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/resolve-extends@npm:18.4.0"
+"@commitlint/resolve-extends@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/resolve-extends@npm:18.4.3"
   dependencies:
-    "@commitlint/config-validator": "npm:^18.4.0"
-    "@commitlint/types": "npm:^18.4.0"
+    "@commitlint/config-validator": "npm:^18.4.3"
+    "@commitlint/types": "npm:^18.4.3"
     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: cc734f73a438b93ec14fe0fdc7476e374ecb71a1bba8c6ca0ac1d2e7578a5b1c3fb474d4fd355205dde1c07d09905f8a2a1014ca2a3f0757bf3184040a850bab
+  checksum: ef321ae425385e720763019a1dcf39b5daf65a661f6af43d69b7aad04eda21ce43487c7552b65f5611c96b45bfefabe63c9eaef20352f223812b5c9d489a600a
   languageName: node
   linkType: hard
 
-"@commitlint/rules@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/rules@npm:18.4.0"
+"@commitlint/rules@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/rules@npm:18.4.3"
   dependencies:
-    "@commitlint/ensure": "npm:^18.4.0"
-    "@commitlint/message": "npm:^18.4.0"
-    "@commitlint/to-lines": "npm:^18.4.0"
-    "@commitlint/types": "npm:^18.4.0"
+    "@commitlint/ensure": "npm:^18.4.3"
+    "@commitlint/message": "npm:^18.4.3"
+    "@commitlint/to-lines": "npm:^18.4.3"
+    "@commitlint/types": "npm:^18.4.3"
     execa: "npm:^5.0.0"
-  checksum: ca01def7ead8835c77dbb00d9827b708b6e035de89f89793039e157a96748dbe4ad64d8a1aa930ea6b8071165439f6ca45e473839f757dc64bf644423f4d1e1c
+  checksum: 857c66c1e4d2d24bb3f07a16576626ac27d103ff589afe59ea36d84276c62bd49005ed2e81f43cb430bbd29eb86eb23ebbfec9c58796654249f0064802b9eb62
   languageName: node
   linkType: hard
 
-"@commitlint/to-lines@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/to-lines@npm:18.4.0"
-  checksum: cb695da0b77fc13210353273bb99553d4e7804a7365d8424021851e89a4123744c3b5bd24e45bec5f2b70e0229dc21e7e49b966fc49973ebe70a4bcf7b68df41
+"@commitlint/to-lines@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/to-lines@npm:18.4.3"
+  checksum: c9d47868284168fbe94764a2abe3526010bd2d43fa9a7ac3946648408998efc1279827299346042d019120eb8f5692cc5a5c12159f8da49585e4c885c2e628a6
   languageName: node
   linkType: hard
 
-"@commitlint/top-level@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/top-level@npm:18.4.0"
+"@commitlint/top-level@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/top-level@npm:18.4.3"
   dependencies:
     find-up: "npm:^5.0.0"
-  checksum: 9b9ea05d7af393f0cd03c1f1060bde36820b3d0401bedc25c66687ae81c35014ee3c8bc99e206a1b5e8312da47ad51e0a7d40f2c6be31214f41e3f6411f1603f
+  checksum: b71581c9c485c2ca518b20021ed8d106ea6cd504453c9bed1436df2a620caec78a38bed1e3e8086c51e8b747a7ba6515569275ef29a6707349db6614cda70940
   languageName: node
   linkType: hard
 
-"@commitlint/types@npm:^18.4.0":
-  version: 18.4.0
-  resolution: "@commitlint/types@npm:18.4.0"
+"@commitlint/types@npm:^18.4.3":
+  version: 18.4.3
+  resolution: "@commitlint/types@npm:18.4.3"
   dependencies:
     chalk: "npm:^4.1.0"
-  checksum: 1b92fa78055c28986317d9ec6a2c8eea70a6fa9b799bbb5ab5950d65c96e6c443ec92cbeae3201fd916fda93c51a827d5d8abfb0236d7b3c04fc1c58f4a27071
+  checksum: 52dfc0ee835f3030fff25e45b4568e83eef818126a30f60860637c74de4919c5f9f1eab157622bb70facf9483f07898cfcb47efa484caf6443dd866942e460ec
   languageName: node
   linkType: hard
 
@@ -2221,10 +2322,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.53.0":
-  version: 8.53.0
-  resolution: "@eslint/js@npm:8.53.0"
-  checksum: a372d55aa2bbe0d9399acc8de3c892dcfe507fd914d29fde6826ae54a13452619be626aa7eb70b1ec4d4da5302b6ed8e8ac9bf1f830003f15c0ad56c30b4f520
+"@eslint/js@npm:8.54.0":
+  version: 8.54.0
+  resolution: "@eslint/js@npm:8.54.0"
+  checksum: 4d491ff234cd94b54499428cb3435623270ff8cc59950e13e6e1ac2fa350ec60502dac7bfd4f486523fee65ad7a358034570fe776b81b14dbfe5525d1e26e1d8
   languageName: node
   linkType: hard
 
@@ -2418,7 +2519,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@istanbuljs/schema@npm:^0.1.2, @istanbuljs/schema@npm:^0.1.3":
+"@istanbuljs/schema@npm:^0.1.2":
   version: 0.1.3
   resolution: "@istanbuljs/schema@npm:0.1.3"
   checksum: a9b1e49acdf5efc2f5b2359f2df7f90c5c725f2656f16099e8b2cd3a000619ecca9fc48cf693ba789cf0fd989f6e0df6a22bc05574be4223ecdbb7997d04384b
@@ -2703,7 +2804,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
   version: 1.4.15
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
   checksum: 89960ac087781b961ad918978975bcdf2051cd1741880469783c42de64239703eab9db5230d776d8e6a09d73bb5e4cb964e07d93ee6e2e7aea5a7d726e865c09
@@ -2815,68 +2916,68 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@omlet/cli-darwin-arm64@npm:1.0.1-beta.38":
-  version: 1.0.1-beta.38
-  resolution: "@omlet/cli-darwin-arm64@npm:1.0.1-beta.38"
+"@omlet/cli-darwin-arm64@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@omlet/cli-darwin-arm64@npm:1.1.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@omlet/cli-darwin-x64@npm:1.0.1-beta.38":
-  version: 1.0.1-beta.38
-  resolution: "@omlet/cli-darwin-x64@npm:1.0.1-beta.38"
+"@omlet/cli-darwin-x64@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@omlet/cli-darwin-x64@npm:1.1.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@omlet/cli-linux-arm64-gnu@npm:1.0.1-beta.38":
-  version: 1.0.1-beta.38
-  resolution: "@omlet/cli-linux-arm64-gnu@npm:1.0.1-beta.38"
+"@omlet/cli-linux-arm64-gnu@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@omlet/cli-linux-arm64-gnu@npm:1.1.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@omlet/cli-linux-arm64-musl@npm:1.0.1-beta.38":
-  version: 1.0.1-beta.38
-  resolution: "@omlet/cli-linux-arm64-musl@npm:1.0.1-beta.38"
+"@omlet/cli-linux-arm64-musl@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@omlet/cli-linux-arm64-musl@npm:1.1.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@omlet/cli-linux-x64-gnu@npm:1.0.1-beta.38":
-  version: 1.0.1-beta.38
-  resolution: "@omlet/cli-linux-x64-gnu@npm:1.0.1-beta.38"
+"@omlet/cli-linux-x64-gnu@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@omlet/cli-linux-x64-gnu@npm:1.1.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@omlet/cli-linux-x64-musl@npm:1.0.1-beta.38":
-  version: 1.0.1-beta.38
-  resolution: "@omlet/cli-linux-x64-musl@npm:1.0.1-beta.38"
+"@omlet/cli-linux-x64-musl@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@omlet/cli-linux-x64-musl@npm:1.1.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@omlet/cli-win32-x64-msvc@npm:1.0.1-beta.38":
-  version: 1.0.1-beta.38
-  resolution: "@omlet/cli-win32-x64-msvc@npm:1.0.1-beta.38"
+"@omlet/cli-win32-x64-msvc@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@omlet/cli-win32-x64-msvc@npm:1.1.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@omlet/cli@npm:^1.0.1-beta.38":
-  version: 1.0.1-beta.38
-  resolution: "@omlet/cli@npm:1.0.1-beta.38"
+"@omlet/cli@npm:^1.0.1-beta.39":
+  version: 1.1.0
+  resolution: "@omlet/cli@npm:1.1.0"
   dependencies:
     "@hapi/joi": "npm:^17.1.1"
     "@npmcli/ci-detect": "npm:^2.0.0"
-    "@omlet/cli-darwin-arm64": "npm:1.0.1-beta.38"
-    "@omlet/cli-darwin-x64": "npm:1.0.1-beta.38"
-    "@omlet/cli-linux-arm64-gnu": "npm:1.0.1-beta.38"
-    "@omlet/cli-linux-arm64-musl": "npm:1.0.1-beta.38"
-    "@omlet/cli-linux-x64-gnu": "npm:1.0.1-beta.38"
-    "@omlet/cli-linux-x64-musl": "npm:1.0.1-beta.38"
-    "@omlet/cli-win32-x64-msvc": "npm:1.0.1-beta.38"
+    "@omlet/cli-darwin-arm64": "npm:1.1.0"
+    "@omlet/cli-darwin-x64": "npm:1.1.0"
+    "@omlet/cli-linux-arm64-gnu": "npm:1.1.0"
+    "@omlet/cli-linux-arm64-musl": "npm:1.1.0"
+    "@omlet/cli-linux-x64-gnu": "npm:1.1.0"
+    "@omlet/cli-linux-x64-musl": "npm:1.1.0"
+    "@omlet/cli-win32-x64-msvc": "npm:1.1.0"
     colorette: "npm:^2.0.19"
     commander: "npm:^9.0.0"
     core-js: "npm:^3.29.1"
@@ -2923,7 +3024,7 @@ __metadata:
       optional: true
   bin:
     omlet: bin/omlet
-  checksum: bcca50a699f6f79dc5dc306ad9a7b0b2823537ac5563655e5a8b5188f5d326764e21727a428a95313c9db60a84061b365480a7780d0e3425ac69947ddbfb3a4a
+  checksum: af894a36b4990e69d07d9dd8c48099b9d74af23d9e854e12c782baf07341347733108e0b2f05defca588988969e66bab1a2e94ba3fb4d261c0821b03fb0c9460
   languageName: node
   linkType: hard
 
@@ -2957,7 +3058,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.5":
+"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11":
   version: 0.5.11
   resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11"
   dependencies:
@@ -3625,86 +3726,86 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.4.0"
+"@rollup/rollup-android-arm-eabi@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.6.1"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-android-arm64@npm:4.4.0"
+"@rollup/rollup-android-arm64@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-android-arm64@npm:4.6.1"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.4.0"
+"@rollup/rollup-darwin-arm64@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.6.1"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-darwin-x64@npm:4.4.0"
+"@rollup/rollup-darwin-x64@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-darwin-x64@npm:4.6.1"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.4.0"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.6.1"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.4.0"
+"@rollup/rollup-linux-arm64-gnu@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.6.1"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.4.0"
+"@rollup/rollup-linux-arm64-musl@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.6.1"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.4.0"
+"@rollup/rollup-linux-x64-gnu@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.6.1"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.4.0"
+"@rollup/rollup-linux-x64-musl@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.6.1"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.4.0"
+"@rollup/rollup-win32-arm64-msvc@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.6.1"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.4.0"
+"@rollup/rollup-win32-ia32-msvc@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.6.1"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.4.0"
+"@rollup/rollup-win32-x64-msvc@npm:4.6.1":
+  version: 4.6.1
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.6.1"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -3752,140 +3853,71 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@npm:^7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-a11y@npm:7.5.3"
+"@storybook/addon-a11y@npm:^7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-a11y@npm:7.6.3"
   dependencies:
-    "@storybook/addon-highlight": "npm:7.5.3"
-    "@storybook/channels": "npm:7.5.3"
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/theming": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/addon-highlight": "npm:7.6.3"
     axe-core: "npm:^4.2.0"
-    lodash: "npm:^4.17.21"
-    react-resize-detector: "npm:^7.1.2"
-  peerDependencies:
-    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: 1eedf02ff8d9a5e377de41b6d2af1dab4f46b59dfd9c2a39b9a063a67f95b3bcf2bdf08641e88a074f71dcde653387c3973d4f067a163e1cf3d45f9c1866519e
+  checksum: 03a41b66e25fe350cfbb7855bb44b8ffc20c2a7ccc66e2223a9f51fa04c4b8a69baceaa961635f29e2e862fc5c0607954eca1c64c3d3473afb41a21d655afffa
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-actions@npm:7.5.3"
+"@storybook/addon-actions@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-actions@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
+    "@storybook/core-events": "npm:7.6.3"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/theming": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@types/uuid": "npm:^9.0.1"
     dequal: "npm:^2.0.2"
-    lodash: "npm:^4.17.21"
     polished: "npm:^4.2.2"
-    prop-types: "npm:^15.7.2"
-    react-inspector: "npm:^6.0.0"
-    telejson: "npm:^7.2.0"
-    ts-dedent: "npm:^2.0.0"
     uuid: "npm:^9.0.0"
-  peerDependencies:
-    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: c98c63334d7c7bd8668ee5d88320fbd6f7b7a7a61ab873ec7a01b36a8180c43877900a561c2c5e7ee6af74cb41f6704b27829e379fa6f4d0dc65d879753f55fd
+  checksum: bba1af46d20019631df14f8d54f812ccb49c87b28085802991b4f351eeab8bcad918b92158e4ab25b6851e97466d30571ef59123ddda8e97a25d45d8825031c2
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-backgrounds@npm:7.5.3"
+"@storybook/addon-backgrounds@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-backgrounds@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/theming": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
     memoizerific: "npm:^1.11.3"
     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
-  peerDependenciesMeta:
-    react:
-      optional: true
-    react-dom:
-      optional: true
-  checksum: 2cd6dc41c6531d9e6ade1a1ec8a310a251ee12be66435fc5f6c5c011f405b1801a65bcbd67a72df0103cfa1f75650a39ca455c13aaf643f5a5482434227a99fe
+  checksum: ecee00eb4d50cda323b6aec1abcd018bc2b0498351888372f8356b4270bc9b8cbb000b8e957054df53041d48622099753a684936fa83947ff3e3c0cdea8333e7
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-controls@npm:7.5.3"
+"@storybook/addon-controls@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-controls@npm:7.6.3"
   dependencies:
-    "@storybook/blocks": "npm:7.5.3"
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/node-logger": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/theming": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/blocks": "npm:7.6.3"
     lodash: "npm:^4.17.21"
     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
-  peerDependenciesMeta:
-    react:
-      optional: true
-    react-dom:
-      optional: true
-  checksum: 818adf6158c4f4cf9dbb78247ae9796b0b478ad18ace39b0e71142cf10aaf59be4d000070aae6e22b9645f3903aa93803be2227ae12a57cf75ed493a1976a6aa
+  checksum: 242fb26d9ffdde70f41d4db3b8cba29d705aa3fc7badf1964bc66e83e2d4eb792c5df18104de08f84b6fd497744021f38b15bab6a58202399bfc068a8d5d5666
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:7.5.3, @storybook/addon-docs@npm:^7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-docs@npm:7.5.3"
+"@storybook/addon-docs@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-docs@npm:7.6.3"
   dependencies:
     "@jest/transform": "npm:^29.3.1"
     "@mdx-js/react": "npm:^2.1.5"
-    "@storybook/blocks": "npm:7.5.3"
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/csf-plugin": "npm:7.5.3"
-    "@storybook/csf-tools": "npm:7.5.3"
+    "@storybook/blocks": "npm:7.6.3"
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/components": "npm:7.6.3"
+    "@storybook/csf-plugin": "npm:7.6.3"
+    "@storybook/csf-tools": "npm:7.6.3"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/mdx2-csf": "npm:^1.0.0"
-    "@storybook/node-logger": "npm:7.5.3"
-    "@storybook/postinstall": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/react-dom-shim": "npm:7.5.3"
-    "@storybook/theming": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/node-logger": "npm:7.6.3"
+    "@storybook/postinstall": "npm:7.6.3"
+    "@storybook/preview-api": "npm:7.6.3"
+    "@storybook/react-dom-shim": "npm:7.6.3"
+    "@storybook/theming": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
     fs-extra: "npm:^11.1.0"
     remark-external-links: "npm:^8.0.0"
     remark-slug: "npm:^6.0.0"
@@ -3893,146 +3925,90 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 94923d1f9350ab87907848656fc4741b744909fc5397fdf72f0cecba33a2bd7993b8229a9da22c3b57dd1e213f0b1f41f17579aeb2c33ae34c1bdae98de9082f
-  languageName: node
-  linkType: hard
-
-"@storybook/addon-essentials@npm:^7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-essentials@npm:7.5.3"
-  dependencies:
-    "@storybook/addon-actions": "npm:7.5.3"
-    "@storybook/addon-backgrounds": "npm:7.5.3"
-    "@storybook/addon-controls": "npm:7.5.3"
-    "@storybook/addon-docs": "npm:7.5.3"
-    "@storybook/addon-highlight": "npm:7.5.3"
-    "@storybook/addon-measure": "npm:7.5.3"
-    "@storybook/addon-outline": "npm:7.5.3"
-    "@storybook/addon-toolbars": "npm:7.5.3"
-    "@storybook/addon-viewport": "npm:7.5.3"
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/node-logger": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
+  checksum: 985fe740ebf96d8d9232ef4c06e075b4c980164c2acffa97ac51a7e8055388af61db911cb70afbfafaae9857b3058e24572d4b57d4f32b31915925924710292e
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-essentials@npm:^7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-essentials@npm:7.6.3"
+  dependencies:
+    "@storybook/addon-actions": "npm:7.6.3"
+    "@storybook/addon-backgrounds": "npm:7.6.3"
+    "@storybook/addon-controls": "npm:7.6.3"
+    "@storybook/addon-docs": "npm:7.6.3"
+    "@storybook/addon-highlight": "npm:7.6.3"
+    "@storybook/addon-measure": "npm:7.6.3"
+    "@storybook/addon-outline": "npm:7.6.3"
+    "@storybook/addon-toolbars": "npm:7.6.3"
+    "@storybook/addon-viewport": "npm:7.6.3"
+    "@storybook/core-common": "npm:7.6.3"
+    "@storybook/manager-api": "npm:7.6.3"
+    "@storybook/node-logger": "npm:7.6.3"
+    "@storybook/preview-api": "npm:7.6.3"
     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: b3e0b317c7f24885ca997960a55ed5e09fa9d0c0a9d8ada0ac30914c6ffd2ab5d71e95a5c54e697674fa6cb90e53c5a90616a13ce2e402f8ceb98b881edc90be
+  checksum: ba67659f6560a234b1a85092cc5a62e06761f7d711148a0a19586ca1d160327f24244f35a165bb77d5a06ea6c4bf1d9e17a388dacc767facacfccfb339ebc0ff
   languageName: node
   linkType: hard
 
-"@storybook/addon-highlight@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-highlight@npm:7.5.3"
+"@storybook/addon-highlight@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-highlight@npm:7.6.3"
   dependencies:
-    "@storybook/core-events": "npm:7.5.3"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/preview-api": "npm:7.5.3"
-  checksum: 3f066154a6c1d89b1ffdf97a4fe64491e6a977ff21857f70e10fa64d279943a65993b5edee51595eb1995ab2425cbc6f15638ccb93b80180b66f181cfc0569c7
+  checksum: 668aace0212003053db7f44c821b32b5bdfb958285af4a417002fd0ba7d568d50fd403c93a4d9f7aced0037112ef1f3866bdcacc132e3f3233fc5777461eb0d1
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-interactions@npm:7.5.3"
+"@storybook/addon-interactions@npm:^7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-interactions@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/instrumenter": "npm:7.5.3"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/theming": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/types": "npm:7.6.3"
     jest-mock: "npm:^27.0.6"
     polished: "npm:^4.2.2"
     ts-dedent: "npm:^2.2.0"
-  peerDependencies:
-    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: e2da11748d3866043690afc9192e66fd3d3c1766967f094e7633333520dc45299ca30ad7cf5c261ed8250da39439f9ee628ecaa6541be84a65291047600f0733
+  checksum: 384419e5ac926944f33c9e844d93f35cad749f0649cbb75f340c1b309be88dca9bb288cb677ab75127dc533cb76e418074bbb3d8dd247e604a56604c6b7155ae
   languageName: node
   linkType: hard
 
-"@storybook/addon-links@npm:^7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-links@npm:7.5.3"
+"@storybook/addon-links@npm:^7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-links@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
-    "@storybook/csf": "npm:^0.1.0"
+    "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/router": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
-    prop-types: "npm:^15.7.2"
     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
   peerDependenciesMeta:
     react:
       optional: true
-    react-dom:
-      optional: true
-  checksum: 8917d4e3f75f032e595a9a4980a1f68b5490d0bca73fa661654fc1dd9775fb321635a936ce69e2065b7169e35fb338ef84c71e811d9a883b60b7304fbe8cf4cb
+  checksum: 3e581a5f8a27f1344daf88d1575aaf40db98f626b8518f50ee7f18b10480ee7dde8e48cf3f2023e4a7418d9ae157564fd35f473227474324ba23d0ffa9d42bf0
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-measure@npm:7.5.3"
+"@storybook/addon-measure@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-measure@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
     tiny-invariant: "npm:^1.3.1"
-  peerDependencies:
-    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: daf0b3e536714c834f3b9f418783b58bcad68334d065c3ce88a4c41bd8e91fd46b103400b803ee5f771dfaa2cafc172168ae359eb6616aee5119779c826af316
+  checksum: 5cc4ef63d9f4466040a2c889bfb260d0454420fcd5baf6d0ce45ce9482ab7ed51040bf6fa4ddbfde48cf06d47adcd11125cf7be865c01e2d3d007b941c9fdd63
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-outline@npm:7.5.3"
+"@storybook/addon-outline@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-outline@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
     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
-  peerDependenciesMeta:
-    react:
-      optional: true
-    react-dom:
-      optional: true
-  checksum: d3232cee9875bd7243cd07d693f36790dc5372c00e9bba310fd54c51a94cdf8a8bf9cf15f55bb24806383d186151531e1d82c10836c666409bade957c915f3b1
+  checksum: 050efebc93202c808834721001dcc9469e77ae81bfc93fa7abf578a2ca02b4e4d552ed999227fa922e147f241bb4d5ccb5794676fd1bacefd184a292e3e5f1cd
   languageName: node
   linkType: hard
 
@@ -4081,49 +4057,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-toolbars@npm:7.5.3"
-  dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/theming": "npm:7.5.3"
-  peerDependencies:
-    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: 75af8111b5efddd75a10d6bdacb5a74184ecb0926ea3e0ccd36a3794b26dafca59d2443c29199a5fac4e6121904cccaa3e66096034b771a987e457b923a317b2
+"@storybook/addon-toolbars@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-toolbars@npm:7.6.3"
+  checksum: f2c08c22bfa3014a1f078a016f6e130d5ca3080399022ad9bc01a530bd53cb21afea9cc4c8a64c56e5898bc0f946430fff5ea14abf12960bbbf5e3287671b988
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/addon-viewport@npm:7.5.3"
+"@storybook/addon-viewport@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/addon-viewport@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/theming": "npm:7.5.3"
     memoizerific: "npm:^1.11.3"
-    prop-types: "npm:^15.7.2"
-  peerDependencies:
-    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: fad017ff48446e8430bc876a06e23d52d935c69ab657d4e439965ebb3bd7121031c354258976ab92a8a5b33ab54bbdb1bcca92b6c6c8958217e6b269bcdc8e3d
+  checksum: 80c7e55f82f02c683180277e30e49affee153adf65081f4ffe6716c32984de8f4edc03047daf51ef2e8e0f4d4d25970eabb2010d7e22c49c4512671b1bf199e4
   languageName: node
   linkType: hard
 
@@ -4145,21 +4091,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/blocks@npm:7.5.3"
+"@storybook/blocks@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/blocks@npm:7.6.3"
   dependencies:
-    "@storybook/channels": "npm:7.5.3"
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/components": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
-    "@storybook/csf": "npm:^0.1.0"
-    "@storybook/docs-tools": "npm:7.5.3"
+    "@storybook/channels": "npm:7.6.3"
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/components": "npm:7.6.3"
+    "@storybook/core-events": "npm:7.6.3"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/docs-tools": "npm:7.6.3"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/theming": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/manager-api": "npm:7.6.3"
+    "@storybook/preview-api": "npm:7.6.3"
+    "@storybook/theming": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
     "@types/lodash": "npm:^4.14.167"
     color-convert: "npm:^2.0.1"
     dequal: "npm:^2.0.2"
@@ -4175,18 +4121,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: 68d981f833a44bd35a3ca9b97bc9db8e25b9961fcc9b81ef490aaee69c7dfcf9f745d9a98226985bd1daa9ee14c9a9fed8bf4002c5c4d9f3996a97f9d7bd3047
+  checksum: d536b0d894f0a6e895b12141046638a48c0d3b5d34470a6723eec5866e2510144170e5378522cb73c2b1255272da60bce653051a2fed775c6a63560d7ba38d60
   languageName: node
   linkType: hard
 
-"@storybook/builder-manager@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/builder-manager@npm:7.5.3"
+"@storybook/builder-manager@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/builder-manager@npm:7.6.3"
   dependencies:
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/manager": "npm:7.5.3"
-    "@storybook/node-logger": "npm:7.5.3"
+    "@storybook/core-common": "npm:7.6.3"
+    "@storybook/manager": "npm:7.6.3"
+    "@storybook/node-logger": "npm:7.6.3"
     "@types/ejs": "npm:^3.1.1"
     "@types/find-cache-dir": "npm:^3.2.1"
     "@yarnpkg/esbuild-plugin-pnp": "npm:^3.0.0-rc.10"
@@ -4199,36 +4145,37 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     process: "npm:^0.11.10"
     util: "npm:^0.12.4"
-  checksum: 1fb537b6be2a978be23b7a187a0756e6ae350c50083177a360dbcbe66374ef70334835086fbd3af5cba37dc6004962ccca773f413c5fc4bfb940839ed646d444
+  checksum: a9433ad725dd06b14887e083811327151f9b75d8bd496ec94a9f1de98693ff05c70ddff351260807f73703a47390cdcc1c998d3bea3bb7fac859d378ac10bde1
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack5@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/builder-webpack5@npm:7.5.3"
+"@storybook/builder-webpack5@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/builder-webpack5@npm:7.6.3"
   dependencies:
-    "@babel/core": "npm:^7.22.0"
-    "@storybook/channels": "npm:7.5.3"
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
-    "@storybook/core-webpack": "npm:7.5.3"
-    "@storybook/node-logger": "npm:7.5.3"
-    "@storybook/preview": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
+    "@babel/core": "npm:^7.23.2"
+    "@storybook/channels": "npm:7.6.3"
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/core-common": "npm:7.6.3"
+    "@storybook/core-events": "npm:7.6.3"
+    "@storybook/core-webpack": "npm:7.6.3"
+    "@storybook/node-logger": "npm:7.6.3"
+    "@storybook/preview": "npm:7.6.3"
+    "@storybook/preview-api": "npm:7.6.3"
     "@swc/core": "npm:^1.3.82"
     "@types/node": "npm:^18.0.0"
     "@types/semver": "npm:^7.3.4"
     babel-loader: "npm:^9.0.0"
-    babel-plugin-named-exports-order: "npm:^0.0.2"
     browser-assert: "npm:^1.2.1"
     case-sensitive-paths-webpack-plugin: "npm:^2.4.0"
     constants-browserify: "npm:^1.0.0"
     css-loader: "npm:^6.7.1"
+    es-module-lexer: "npm:^1.4.1"
     express: "npm:^4.17.3"
     fork-ts-checker-webpack-plugin: "npm:^8.0.0"
     fs-extra: "npm:^11.1.0"
     html-webpack-plugin: "npm:^5.5.0"
+    magic-string: "npm:^0.30.5"
     path-browserify: "npm:^1.0.1"
     process: "npm:^0.11.10"
     semver: "npm:^7.3.7"
@@ -4246,7 +4193,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 0e2805f8afb02ce5299f618b460393b3169215f6a6bab75483e8ab425cc875c835adfd837ea1a0e2087d2abd0f5abb38236297aa099e5f602533a4e0307185cd
+  checksum: 400c4f9a62b3c924051cd14b06b7311c47e2b752f1350d84fefb3258ef9dbf083b4ad3b9c97c45885056c3b20e29c617bcb88877e79dd760ac4d33b2a525e639
   languageName: node
   linkType: hard
 
@@ -4264,22 +4211,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/cli@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/cli@npm:7.5.3"
+"@storybook/channels@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/channels@npm:7.6.3"
   dependencies:
-    "@babel/core": "npm:^7.22.9"
-    "@babel/preset-env": "npm:^7.22.9"
-    "@babel/types": "npm:^7.22.5"
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/core-events": "npm:7.6.3"
+    "@storybook/global": "npm:^5.0.0"
+    qs: "npm:^6.10.0"
+    telejson: "npm:^7.2.0"
+    tiny-invariant: "npm:^1.3.1"
+  checksum: 378161310e5354985c900c7134584a1c9a31bc6a7ddad6e5f8baad24206b750fdd24a1dc48ef336657079837666923066db3ee1893b3b6bd89c43b458678d940
+  languageName: node
+  linkType: hard
+
+"@storybook/cli@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/cli@npm:7.6.3"
+  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.5.3"
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
-    "@storybook/core-server": "npm:7.5.3"
-    "@storybook/csf-tools": "npm:7.5.3"
-    "@storybook/node-logger": "npm:7.5.3"
-    "@storybook/telemetry": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/codemod": "npm:7.6.3"
+    "@storybook/core-common": "npm:7.6.3"
+    "@storybook/core-events": "npm:7.6.3"
+    "@storybook/core-server": "npm:7.6.3"
+    "@storybook/csf-tools": "npm:7.6.3"
+    "@storybook/node-logger": "npm:7.6.3"
+    "@storybook/telemetry": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
     "@types/semver": "npm:^7.3.4"
     "@yarnpkg/fslib": "npm:2.10.3"
     "@yarnpkg/libzip": "npm:2.3.0"
@@ -4296,7 +4257,7 @@ __metadata:
     get-port: "npm:^5.1.1"
     giget: "npm:^1.0.0"
     globby: "npm:^11.0.2"
-    jscodeshift: "npm:^0.14.0"
+    jscodeshift: "npm:^0.15.1"
     leven: "npm:^3.1.0"
     ora: "npm:^5.4.1"
     prettier: "npm:^2.8.0"
@@ -4312,7 +4273,7 @@ __metadata:
   bin:
     getstorybook: ./bin/index.js
     sb: ./bin/index.js
-  checksum: 07dcd8e96ea2e6b42a3c1fea7c030a3cfd36bc5ce88bc3c356a36e8fc928f972ba73aa34f2f00c1dfefd1bb51497342e492fb41cdc745606ab48668f9e1aed21
+  checksum: 59a8717106a19222831b8ca17912b6923dd86d80c9e425cb113bdbc02d49e51f7b6e055d6a2e7c8b47a65f97abaa112d79703f7913edf9448e5fbafaa53f9746
   languageName: node
   linkType: hard
 
@@ -4325,29 +4286,59 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/codemod@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/codemod@npm:7.5.3"
+"@storybook/client-logger@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/client-logger@npm:7.6.3"
   dependencies:
-    "@babel/core": "npm:^7.22.9"
-    "@babel/preset-env": "npm:^7.22.9"
-    "@babel/types": "npm:^7.22.5"
-    "@storybook/csf": "npm:^0.1.0"
-    "@storybook/csf-tools": "npm:7.5.3"
-    "@storybook/node-logger": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/global": "npm:^5.0.0"
+  checksum: d42c003e05c40b0ca1f27abf9d3133f888919ea38eef15a5f605cdb4485da50598a04ec8a04b7dfe31f046ac454e0eab807d14adb22284da9449500ca5a16a39
+  languageName: node
+  linkType: hard
+
+"@storybook/codemod@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/codemod@npm:7.6.3"
+  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.3"
+    "@storybook/node-logger": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
     "@types/cross-spawn": "npm:^6.0.2"
     cross-spawn: "npm:^7.0.3"
     globby: "npm:^11.0.2"
-    jscodeshift: "npm:^0.14.0"
+    jscodeshift: "npm:^0.15.1"
     lodash: "npm:^4.17.21"
     prettier: "npm:^2.8.0"
     recast: "npm:^0.23.1"
-  checksum: d927a373939386812c33ee1d71e8447fcc0424c91861259ce005806815d8dfc99d493f280d36bbe321e61a88680f1b5f4fbd2b7f674d2c4fa451555c5d427ea5
+  checksum: d09cca2bcf45148e05c7184aa6745fa04f11e32fddde2e9079060b09dffd2ce21abb32357d00c4e1f7eefcd62893f7395f8f9c16503cb5025e77f09830974b0b
+  languageName: node
+  linkType: hard
+
+"@storybook/components@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/components@npm:7.6.3"
+  dependencies:
+    "@radix-ui/react-select": "npm:^1.2.2"
+    "@radix-ui/react-toolbar": "npm:^1.0.4"
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/theming": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
+    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: 207de2dcc4854cd0a21bdd1b66710faf3495a63c626849543f51e3915fa6aefcc9e745b2f69d1a30b37f05f38f23b7cd5ee576e7f0e04c632ccef6601d28edbf
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:7.5.3, @storybook/components@npm:^7.0.12":
+"@storybook/components@npm:^7.0.12":
   version: 7.5.3
   resolution: "@storybook/components@npm:7.5.3"
   dependencies:
@@ -4368,17 +4359,48 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-client@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/core-client@npm:7.5.3"
+"@storybook/core-client@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/core-client@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-  checksum: 28677d292551c18094eb3045b773555ba843747ffe08fc4659f20acc273b3fd62e9b32bc186baad8320bb4147505884ee6141ce1db8bccc02a58b00de955e69c
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/preview-api": "npm:7.6.3"
+  checksum: 54b8129f7d0f73955b75b6048c3753af44da17b9afe29e0f31538ff9c7a0c228a70dc8f4eda6e8c272edb433c9b9abd4fe3ab43df8adfee6693e0b352d5f564f
+  languageName: node
+  linkType: hard
+
+"@storybook/core-common@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/core-common@npm:7.6.3"
+  dependencies:
+    "@storybook/core-events": "npm:7.6.3"
+    "@storybook/node-logger": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
+    "@types/find-cache-dir": "npm:^3.2.1"
+    "@types/node": "npm:^18.0.0"
+    "@types/node-fetch": "npm:^2.6.4"
+    "@types/pretty-hrtime": "npm:^1.0.0"
+    chalk: "npm:^4.1.0"
+    esbuild: "npm:^0.18.0"
+    esbuild-register: "npm:^3.5.0"
+    file-system-cache: "npm:2.3.0"
+    find-cache-dir: "npm:^3.0.0"
+    find-up: "npm:^5.0.0"
+    fs-extra: "npm:^11.1.0"
+    glob: "npm:^10.0.0"
+    handlebars: "npm:^4.7.7"
+    lazy-universal-dotenv: "npm:^4.0.0"
+    node-fetch: "npm:^2.0.0"
+    picomatch: "npm:^2.3.0"
+    pkg-dir: "npm:^5.0.0"
+    pretty-hrtime: "npm:^1.0.3"
+    resolve-from: "npm:^5.0.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 69b5319b52868f4e90ab5e01dcbd9032730fa3e92bed6961f57d13282bc019544ae5d7f9cbdca5bd4de571b9775aadb5fd63d80bb7f5e251adecdf8e38ce429f
   languageName: node
   linkType: hard
 
-"@storybook/core-common@npm:7.5.3, @storybook/core-common@npm:^7.0.12":
+"@storybook/core-common@npm:^7.0.12":
   version: 7.5.3
   resolution: "@storybook/core-common@npm:7.5.3"
   dependencies:
@@ -4418,25 +4440,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-server@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/core-server@npm:7.5.3"
+"@storybook/core-events@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/core-events@npm:7.6.3"
+  dependencies:
+    ts-dedent: "npm:^2.0.0"
+  checksum: 635f65d42909cf0e373818f6590f42029d6ccf689a8904618dbc5dfb8f8d736d0f1c59c52ef1daefda3693faec101017d919f99604ff60a7ce03ba286712a49f
+  languageName: node
+  linkType: hard
+
+"@storybook/core-server@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/core-server@npm:7.6.3"
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
     "@discoveryjs/json-ext": "npm:^0.5.3"
-    "@storybook/builder-manager": "npm:7.5.3"
-    "@storybook/channels": "npm:7.5.3"
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
-    "@storybook/csf": "npm:^0.1.0"
-    "@storybook/csf-tools": "npm:7.5.3"
+    "@storybook/builder-manager": "npm:7.6.3"
+    "@storybook/channels": "npm:7.6.3"
+    "@storybook/core-common": "npm:7.6.3"
+    "@storybook/core-events": "npm:7.6.3"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf-tools": "npm:7.6.3"
     "@storybook/docs-mdx": "npm:^0.1.0"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager": "npm:7.5.3"
-    "@storybook/node-logger": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/telemetry": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/manager": "npm:7.6.3"
+    "@storybook/node-logger": "npm:7.6.3"
+    "@storybook/preview-api": "npm:7.6.3"
+    "@storybook/telemetry": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
     "@types/detect-port": "npm:^1.3.0"
     "@types/node": "npm:^18.0.0"
     "@types/pretty-hrtime": "npm:^1.0.0"
@@ -4463,47 +4494,47 @@ __metadata:
     util-deprecate: "npm:^1.0.2"
     watchpack: "npm:^2.2.0"
     ws: "npm:^8.2.3"
-  checksum: 96e8a4c7a21778f0f8e86abcde9d990362e240e6bb2d18950f2d5a0f3a2b09a02df7093feec8e9c5d5be59dc23d8e7eb1de0ca1c5de8cc9bc33357ef3fb45954
+  checksum: 4b966a40bfa7bfbcde3679469e7ef795bdc6ed38a860db7724cc16aca42196bab1a87319f40f9bc167b5a9410e5d7b06751027c31a95c88dfa69d700c9fd18d1
   languageName: node
   linkType: hard
 
-"@storybook/core-webpack@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/core-webpack@npm:7.5.3"
+"@storybook/core-webpack@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/core-webpack@npm:7.6.3"
   dependencies:
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/node-logger": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/core-common": "npm:7.6.3"
+    "@storybook/node-logger": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
     "@types/node": "npm:^18.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 0df7fa9abac5839c48ba16d0a135a9ec48651dfca8674e26408b1d4648b64f73b6acd6e0ce38c43644b0564b66e0e2cd08c52f5b039313efc28e689ce42ffd79
+  checksum: 02135c30f78c041bda3da0f3b83327de090fbcbbcdb26de1a1ee83a10fd14413640d6af91f5fce0eaac2b4f431bf7d58bcc5a532c9ffe85e10927263fd52d608
   languageName: node
   linkType: hard
 
-"@storybook/csf-plugin@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/csf-plugin@npm:7.5.3"
+"@storybook/csf-plugin@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/csf-plugin@npm:7.6.3"
   dependencies:
-    "@storybook/csf-tools": "npm:7.5.3"
+    "@storybook/csf-tools": "npm:7.6.3"
     unplugin: "npm:^1.3.1"
-  checksum: 3252d8834e60b73fcb81601035e48b3847a1fdbef6ccce040b2685b100ca37c9faee4789124367c97e0a4cc018db323aa4f639ca1200b7921ef450276dd5d60e
+  checksum: 6c396b323d9b19b1e5a65fb8bcbc90d270fce08db80b00b297568bc7d3ae1d68bfef8e0df2600e1f6d5acf3b2e3ac671aecdd7d2bfeebd7d98c368cfa3e597ce
   languageName: node
   linkType: hard
 
-"@storybook/csf-tools@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/csf-tools@npm:7.5.3"
+"@storybook/csf-tools@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/csf-tools@npm:7.6.3"
   dependencies:
-    "@babel/generator": "npm:^7.22.9"
-    "@babel/parser": "npm:^7.22.7"
-    "@babel/traverse": "npm:^7.22.8"
-    "@babel/types": "npm:^7.22.5"
-    "@storybook/csf": "npm:^0.1.0"
-    "@storybook/types": "npm:7.5.3"
+    "@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.3"
     fs-extra: "npm:^11.1.0"
     recast: "npm:^0.23.1"
     ts-dedent: "npm:^2.0.0"
-  checksum: a6adc7f66ebd5ab39172c651587a8cf6efbeddf5ff82fb49494b7b1f090dde6f2fd30581bf236c88225ca480ba028ddbf2d06d68724b60daab475f58df51b8cc
+  checksum: d6c392ac2abdc9c187c2060e35e9506522602263c445d76eaf8b5a0cd8d26a9b95151edd14f81c622b2407ee8dfa2654765f45e43ebb056091da764af7644893
   languageName: node
   linkType: hard
 
@@ -4525,6 +4556,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "@storybook/csf@npm:0.1.2"
+  dependencies:
+    type-fest: "npm:^2.19.0"
+  checksum: 11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c
+  languageName: node
+  linkType: hard
+
 "@storybook/docs-mdx@npm:^0.1.0":
   version: 0.1.0
   resolution: "@storybook/docs-mdx@npm:0.1.0"
@@ -4532,17 +4572,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/docs-tools@npm:7.5.3"
+"@storybook/docs-tools@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/docs-tools@npm:7.6.3"
   dependencies:
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/core-common": "npm:7.6.3"
+    "@storybook/preview-api": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
     "@types/doctrine": "npm:^0.0.3"
+    assert: "npm:^2.1.0"
     doctrine: "npm:^3.0.0"
     lodash: "npm:^4.17.21"
-  checksum: f388cf81c01a2d9728346a5955e4e4017665b667729d0d8cc05c9f4c42c249e76fa9c7918e660a2ffa041ed1b71b2a901f497d5f95f129b120abf9401b8162af
+  checksum: 76b0a722a4e50d7cf46696ccaff17b93431861e4056a235e106e3d5620cd650415054117faabae7f21a5bb583c6b9a43ea3e3903700677f3cddb07922b0a3a75
   languageName: node
   linkType: hard
 
@@ -4553,19 +4594,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/instrumenter@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/instrumenter@npm:7.5.3"
-  dependencies:
-    "@storybook/channels": "npm:7.5.3"
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/core-events": "npm:7.5.3"
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/preview-api": "npm:7.5.3"
-  checksum: 58a0961538dd0a08dff03eea854b8848ab557dfd71ef316d2faa64b002e572eb5ae01419283519fdc56f410c5cb221a134643cea91c1dfbe180bc6ba33dded0a
-  languageName: node
-  linkType: hard
-
 "@storybook/manager-api@npm:7.5.3, @storybook/manager-api@npm:^7.0.12":
   version: 7.5.3
   resolution: "@storybook/manager-api@npm:7.5.3"
@@ -4592,10 +4620,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/manager@npm:7.5.3"
-  checksum: fb89da17538107985352ed33d286c3546eb2e9f290165b40c818de00fa9f0e86ad7979890573566a446f082bd876a91ce318e58e56657df0bfea7351331b75b2
+"@storybook/manager-api@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/manager-api@npm:7.6.3"
+  dependencies:
+    "@storybook/channels": "npm:7.6.3"
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/core-events": "npm:7.6.3"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/router": "npm:7.6.3"
+    "@storybook/theming": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    memoizerific: "npm:^1.11.3"
+    semver: "npm:^7.3.7"
+    store2: "npm:^2.14.2"
+    telejson: "npm:^7.2.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 9734eb3e82fb3b0071d72f2d5f80b22e2f7bd3da289ee60c3ce0c98b9e99a4dc2d5c17bd92b2b9979b9e31fa5d8da187261caec5aa1f0b5d52f0709c7ce7a3e9
+  languageName: node
+  linkType: hard
+
+"@storybook/manager@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/manager@npm:7.6.3"
+  checksum: 41afce59906eb0a8b6f4fc336e237c9e7d4bb05618126b7027fd60e9b06dd4d32e6d727d510fb2b0b8cfd7929fb6933d9fb585dd5311e30a7e830a0ee78e497c
   languageName: node
   linkType: hard
 
@@ -4613,31 +4664,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/postinstall@npm:7.5.3"
-  checksum: c9440e0c2e5f53b0ee7655717c67a52d5208acaf822ff6615e83b9babb7c0a4f3598d44ec1b7ce0781e4730e4112d88be2c6f930a772c2dca1ae7edd8d6da99f
+"@storybook/node-logger@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/node-logger@npm:7.6.3"
+  checksum: b9262abf473341d01a2b8b263ee8df11d88359e2246c7996cd065534cb11b6fd63885fa8728bded7c16b6d58bbed58bd98f58aac52dd2155b06a523fd1772937
   languageName: node
   linkType: hard
 
-"@storybook/preset-react-webpack@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/preset-react-webpack@npm:7.5.3"
+"@storybook/postinstall@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/postinstall@npm:7.6.3"
+  checksum: f28697ccac3aec67f051b952a1d9793d64876c93777203ca9f68441d27d4a035a4804bf108bf549ed840b26ed1e55f950c995e416db5965b5308a1e77d8cf089
+  languageName: node
+  linkType: hard
+
+"@storybook/preset-react-webpack@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/preset-react-webpack@npm:7.6.3"
   dependencies:
-    "@babel/preset-flow": "npm:^7.22.5"
-    "@babel/preset-react": "npm:^7.22.5"
-    "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.5"
-    "@storybook/core-webpack": "npm:7.5.3"
-    "@storybook/docs-tools": "npm:7.5.3"
-    "@storybook/node-logger": "npm:7.5.3"
-    "@storybook/react": "npm:7.5.3"
+    "@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.3"
+    "@storybook/docs-tools": "npm:7.6.3"
+    "@storybook/node-logger": "npm:7.6.3"
+    "@storybook/react": "npm:7.6.3"
     "@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"
     babel-plugin-add-react-displayname: "npm:^0.0.5"
-    babel-plugin-react-docgen: "npm:^4.2.1"
     fs-extra: "npm:^11.1.0"
-    react-refresh: "npm:^0.11.0"
+    magic-string: "npm:^0.30.5"
+    react-docgen: "npm:^7.0.0"
+    react-refresh: "npm:^0.14.0"
     semver: "npm:^7.3.7"
     webpack: "npm:5"
   peerDependencies:
@@ -4649,11 +4708,33 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: 8bfd6f838d498eb044dd76fef40227904c1a6ba9255f336a7138f327e4c225906e086db58b62c53ad93e26696f02758629aba273ce69063337e4987b32f2bde5
+  checksum: dd1eb0726e9cd6b1c956d12b3850d1e207c10e7ce2ac6d8604f627a2cc325f93a20f1ce46909ee65dac603fdca363b287c804977f0ec3aa369dad3019de7db41
+  languageName: node
+  linkType: hard
+
+"@storybook/preview-api@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/preview-api@npm:7.6.3"
+  dependencies:
+    "@storybook/channels": "npm:7.6.3"
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/core-events": "npm:7.6.3"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/types": "npm:7.6.3"
+    "@types/qs": "npm:^6.9.5"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    memoizerific: "npm:^1.11.3"
+    qs: "npm:^6.10.0"
+    synchronous-promise: "npm:^2.0.15"
+    ts-dedent: "npm:^2.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: a661168c5d9bf56ecdb120ef50d698f61fed3f216b997469d7d3b6c1d5e2b421a3799ea496c8e0fbd08b9a070a0edc99c750dead643f122f77046dd4f8945956
   languageName: node
   linkType: hard
 
-"@storybook/preview-api@npm:7.5.3, @storybook/preview-api@npm:^7.0.12":
+"@storybook/preview-api@npm:^7.0.12":
   version: 7.5.3
   resolution: "@storybook/preview-api@npm:7.5.3"
   dependencies:
@@ -4675,10 +4756,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/preview@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/preview@npm:7.5.3"
-  checksum: 5565d0c24ed9668d41e3430b4884911b8aa0586f6e93efd37f3554cdb26726548f2e2f86211294e4c9fadb05f367c51bf663d133fa9b3f1f9697726e6ad52eac
+"@storybook/preview@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/preview@npm:7.6.3"
+  checksum: 871971eed4f832c5c42a94a48b5b3a7da3f793d8a577d8b993c66956f9e8c71b24ea5d9fa0c519e378dc6777d2f05e984178fdaf67def75047e901800ee70bf4
   languageName: node
   linkType: hard
 
@@ -4700,23 +4781,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/react-dom-shim@npm:7.5.3"
+"@storybook/react-dom-shim@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/react-dom-shim@npm:7.6.3"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: a5eacbedc2467daa5fb26f404fcbed3c6583eeaa7c5cf0aff45c297c5c64d0459883b0abfe68a2a3073a312787d0cf2308138ba1c33ac6bb60ae222240be8679
+  checksum: 3691aab8ee0060a5817acc04d9a51e7c3959e81562a5974d64e504dbc86dacf871e463ca1076512fb6ee4472ba4b2f2ca39b4ece37ffffb3be068857739a490b
   languageName: node
   linkType: hard
 
-"@storybook/react-webpack5@npm:^7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/react-webpack5@npm:7.5.3"
+"@storybook/react-webpack5@npm:^7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/react-webpack5@npm:7.6.3"
   dependencies:
-    "@storybook/builder-webpack5": "npm:7.5.3"
-    "@storybook/preset-react-webpack": "npm:7.5.3"
-    "@storybook/react": "npm:7.5.3"
+    "@storybook/builder-webpack5": "npm:7.6.3"
+    "@storybook/preset-react-webpack": "npm:7.6.3"
+    "@storybook/react": "npm:7.6.3"
     "@types/node": "npm:^18.0.0"
   peerDependencies:
     "@babel/core": ^7.22.0
@@ -4728,21 +4809,21 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: e29e6255bedfb4c95b5e6dfda64a1bccc537f85a02256ff2dbc0de24b6a439e69722fa6f6de5af17830b4c7aa437ac463f5f92b4065127bc267a39cae720f70f
+  checksum: c728f23d94fbb8b5f66515d8ad9a7061f1ad5abebd8012f3275e17ee1a4e7b3eb71c0aa13b6bac02309e8c345d8ace3169bab60513efb36d0753723ff2a81eb9
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:7.5.3, @storybook/react@npm:^7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/react@npm:7.5.3"
+"@storybook/react@npm:7.6.3, @storybook/react@npm:^7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/react@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/core-client": "npm:7.5.3"
-    "@storybook/docs-tools": "npm:7.5.3"
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/core-client": "npm:7.6.3"
+    "@storybook/docs-tools": "npm:7.6.3"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/preview-api": "npm:7.5.3"
-    "@storybook/react-dom-shim": "npm:7.5.3"
-    "@storybook/types": "npm:7.5.3"
+    "@storybook/preview-api": "npm:7.6.3"
+    "@storybook/react-dom-shim": "npm:7.6.3"
+    "@storybook/types": "npm:7.6.3"
     "@types/escodegen": "npm:^0.0.6"
     "@types/estree": "npm:^0.0.51"
     "@types/node": "npm:^18.0.0"
@@ -4764,7 +4845,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: cc88bc53f0a96aebb76cda7d166426f76efcd02bb28d5fc4e34fddc92857579dc6e259548e5e61e95e32cec24a413a7ac27d40dabbdb3dd61a36e27e78637ba8
+  checksum: 6c1d94c764161b5c7a537aff623db7e308ab013f7afc1da8b96d96604a995952719d0f043f7c5235570ed29c5d3212f10ec86902fb7c5f69cb167a5d009c3179
   languageName: node
   linkType: hard
 
@@ -4782,19 +4863,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/telemetry@npm:7.5.3":
-  version: 7.5.3
-  resolution: "@storybook/telemetry@npm:7.5.3"
+"@storybook/router@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/router@npm:7.6.3"
   dependencies:
-    "@storybook/client-logger": "npm:7.5.3"
-    "@storybook/core-common": "npm:7.5.3"
-    "@storybook/csf-tools": "npm:7.5.3"
+    "@storybook/client-logger": "npm:7.6.3"
+    memoizerific: "npm:^1.11.3"
+    qs: "npm:^6.10.0"
+  checksum: 55128946c44dbce31d14ee398dda4deaf56908dab90e4954b4751a21f5497aa759c290ceab79188fa128daf4e960c8a317362ab6b4b2bcbc61cba98301dfc560
+  languageName: node
+  linkType: hard
+
+"@storybook/telemetry@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/telemetry@npm:7.6.3"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.3"
+    "@storybook/core-common": "npm:7.6.3"
+    "@storybook/csf-tools": "npm:7.6.3"
     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: a884642e4bf83cf0105c5fc251372e03644452ad9f1a155670f672f15825ab4c75fc3fd252de92f7c0d75b297b2b25b45b1e9a0327db4101d119bfb8de828b42
+  checksum: 98a8007f910b78a33ac305a97266c80e958206dbd4b33c18ac36d168687b89e61e6fbcd3bcfea71aa12d09aa5f08f1a503270fd7bc51d54d4ec57f0f6b04cc52
   languageName: node
   linkType: hard
 
@@ -4839,6 +4931,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/theming@npm:7.6.3"
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0"
+    "@storybook/client-logger": "npm:7.6.3"
+    "@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: ec12b906c6ed5e26450dc5c5e3b5290b2d5160f2f5c7615d8179d39fcf244ca4c2763626960eb042f4fb2280311f357f8b9cc358130e1683bff12d5bcbef3970
+  languageName: node
+  linkType: hard
+
 "@storybook/types@npm:7.5.3, @storybook/types@npm:^7.0.12":
   version: 7.5.3
   resolution: "@storybook/types@npm:7.5.3"
@@ -4851,6 +4958,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/types@npm:7.6.3":
+  version: 7.6.3
+  resolution: "@storybook/types@npm:7.6.3"
+  dependencies:
+    "@storybook/channels": "npm:7.6.3"
+    "@types/babel__core": "npm:^7.0.0"
+    "@types/express": "npm:^4.7.0"
+    file-system-cache: "npm:2.3.0"
+  checksum: 0c1d2caed9b879852f8362ee4f4b80f703e3fc2c9e5e1b0d737fdf13cea63c53c719f1569d9e421977b095a48b112ad2f9ce1ce022b55282355b261a132b5612
+  languageName: node
+  linkType: hard
+
 "@swc/core-darwin-arm64@npm:1.3.96":
   version: 1.3.96
   resolution: "@swc/core-darwin-arm64@npm:1.3.96"
@@ -5006,9 +5125,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^6.1.4":
-  version: 6.1.4
-  resolution: "@testing-library/jest-dom@npm:6.1.4"
+"@testing-library/jest-dom@npm:^6.1.5":
+  version: 6.1.5
+  resolution: "@testing-library/jest-dom@npm:6.1.5"
   dependencies:
     "@adobe/css-tools": "npm:^4.3.1"
     "@babel/runtime": "npm:^7.9.2"
@@ -5032,13 +5151,13 @@ __metadata:
       optional: true
     vitest:
       optional: true
-  checksum: e5a0cdb96eec509c0c85f2b7a0d08fc1c9f6c10aa49bba0d738bf4bb114c3472b92ace5067aedfaaf848ae13b38ba9296047c219aa24b66c87aa16de33341fdb
+  checksum: 3bc45dc9cb6dc49134e79ef636612b8639014bdd8c85c3741a78a92345147d03f9efeefc2f02ad306764a62f8c236b0e0ef3d5a68c16af1c51887be45d253f6b
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^14.1.0":
-  version: 14.1.0
-  resolution: "@testing-library/react@npm:14.1.0"
+"@testing-library/react@npm:^14.1.2":
+  version: 14.1.2
+  resolution: "@testing-library/react@npm:14.1.2"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
     "@testing-library/dom": "npm:^9.0.0"
@@ -5046,7 +5165,7 @@ __metadata:
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: d181f13cc684515dfe7ca0a961c75e5f506ffde897e5c96628bab71ddc264e67d1477ad7ad0615a1add1f82a6437143843c33c05292783ff0dc72d1a009c512f
+  checksum: 1664990ad9673403ee1d74c1c1b60ec30591d42a3fe1e2175c28cb935cd49bc9a4ba398707f702acc3278c3b0cb492ee57fe66f41ceb040c5da57de98cba5414
   languageName: node
   linkType: hard
 
@@ -5112,6 +5231,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__core@npm:^7.18.0":
+  version: 7.20.5
+  resolution: "@types/babel__core@npm:7.20.5"
+  dependencies:
+    "@babel/parser": "npm:^7.20.7"
+    "@babel/types": "npm:^7.20.7"
+    "@types/babel__generator": "npm:*"
+    "@types/babel__template": "npm:*"
+    "@types/babel__traverse": "npm:*"
+  checksum: c32838d280b5ab59d62557f9e331d3831f8e547ee10b4f85cb78753d97d521270cebfc73ce501e9fb27fe71884d1ba75e18658692c2f4117543f0fc4e3e118b3
+  languageName: node
+  linkType: hard
+
 "@types/babel__generator@npm:*":
   version: 7.6.7
   resolution: "@types/babel__generator@npm:7.6.7"
@@ -5131,7 +5263,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6":
+"@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"
   dependencies:
@@ -5182,6 +5314,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/doctrine@npm:^0.0.9":
+  version: 0.0.9
+  resolution: "@types/doctrine@npm:0.0.9"
+  checksum: 64ef06e6eea2f4f9684d259fedbcb8bf21c954630b96ea2e04875ca42763552b0ba3b01b3dd27ec0f9ea6f8b3b0dba4965d31d5a925cd4c6225fd13a93ae9354
+  languageName: node
+  linkType: hard
+
 "@types/ejs@npm:^3.1.1":
   version: 3.1.5
   resolution: "@types/ejs@npm:3.1.5"
@@ -5343,13 +5482,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest@npm:^29.5.8":
-  version: 29.5.8
-  resolution: "@types/jest@npm:29.5.8"
+"@types/jest@npm:^29.5.10":
+  version: 29.5.10
+  resolution: "@types/jest@npm:29.5.10"
   dependencies:
     expect: "npm:^29.0.0"
     pretty-format: "npm:^29.0.0"
-  checksum: a8194e26c642780d5b2e22170ac538f7975e04aeaa76d87f8e5ac921f7a8fffc5252029a9e6efacdb0ec4b45320322c8e1f27a5338083f49efbd3c6021314f7e
+  checksum: f31cdc9cf840a3bc2230148bb5cba1e0369e3180ae75d85804038905300dd8cfa1d989a4dbbd909633c04568d0c1a9251b2ee5c4197309ec033403dd2a08ea42
   languageName: node
   linkType: hard
 
@@ -5397,13 +5536,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.14.167, @types/lodash@npm:^4.14.201":
+"@types/lodash@npm:^4.14.167":
   version: 4.14.201
   resolution: "@types/lodash@npm:4.14.201"
   checksum: 9b56a2a650880045343055e63c7ad73df97188453aa3de8375dc97670748d467f6f4a3b59d689f4ae45dd947d4c0b3ecd873763910336238736056dce20cfe56
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.14.202":
+  version: 4.14.202
+  resolution: "@types/lodash@npm:4.14.202"
+  checksum: 1bb9760a5b1dda120132c4b987330d67979c95dbc22612678682cd61b00302e190f4207228f3728580059cdab5582362262e3819aea59960c1017bd2b9fb26f6
+  languageName: node
+  linkType: hard
+
 "@types/mdx@npm:^2.0.0":
   version: 2.0.10
   resolution: "@types/mdx@npm:2.0.10"
@@ -5449,7 +5595,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:^20.9.0":
+"@types/node@npm:*":
   version: 20.9.0
   resolution: "@types/node@npm:20.9.0"
   dependencies:
@@ -5467,6 +5613,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^20.10.1":
+  version: 20.10.3
+  resolution: "@types/node@npm:20.10.3"
+  dependencies:
+    undici-types: "npm:~5.26.4"
+  checksum: 7cb506abb0d570bb5133bd06a47115109a813b507323c985c3b4aef2993eed79b6bb62b82194cb5c558b4d349de3d199ee2e8c693b913065a1cd7f526cc65a68
+  languageName: node
+  linkType: hard
+
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.4
   resolution: "@types/normalize-package-data@npm:2.4.4"
@@ -5518,7 +5673,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.15":
+"@types/react-dom@npm:^18.0.0":
   version: 18.2.15
   resolution: "@types/react-dom@npm:18.2.15"
   dependencies:
@@ -5527,6 +5682,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:^18.2.17":
+  version: 18.2.17
+  resolution: "@types/react-dom@npm:18.2.17"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: fe0dbb3224b48515da8fe25559e3777d756a27c3f22903f0b1b020de8d68bd57eb1f0af62b52ee65d9632637950afed8cbad24d158c4f3d910d083d49bd73fba
+  languageName: node
+  linkType: hard
+
 "@types/react-portal@npm:^4.0.6":
   version: 4.0.6
   resolution: "@types/react-portal@npm:4.0.6"
@@ -5548,7 +5712,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.2.37":
+"@types/react@npm:*, @types/react@npm:>=16":
   version: 18.2.37
   resolution: "@types/react@npm:18.2.37"
   dependencies:
@@ -5559,6 +5723,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^18.2.39":
+  version: 18.2.41
+  resolution: "@types/react@npm:18.2.41"
+  dependencies:
+    "@types/prop-types": "npm:*"
+    "@types/scheduler": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 31a498a56ad3e825ae13799355fe49042c0cdbbe6f40003f39b6b9cf847ba1669393c22ba60e97b1072cf1c002b15432082cdd17e47c948430bdc1f0864829b9
+  languageName: node
+  linkType: hard
+
 "@types/resolve@npm:1.20.2":
   version: 1.20.2
   resolution: "@types/resolve@npm:1.20.2"
@@ -5566,6 +5741,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/resolve@npm:^1.20.2":
+  version: 1.20.6
+  resolution: "@types/resolve@npm:1.20.6"
+  checksum: dc35f5517606b6687cd971c0281ac58bdee2c50c051b030f04647d3991688be2259c304ee97e5b5d4b9936072c36767eb5933b54611a407d6557972bb6fea4f6
+  languageName: node
+  linkType: hard
+
 "@types/responselike@npm:^1.0.0":
   version: 1.0.3
   resolution: "@types/responselike@npm:1.0.3"
@@ -5647,6 +5829,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/uuid@npm:^9.0.1":
+  version: 9.0.7
+  resolution: "@types/uuid@npm:9.0.7"
+  checksum: c7321194aeba9ea173efd1e721403bdf4e7ae6945f8f8cdbc87c791f4b505ccf3dbc4a8883d90b394ef13b7c2dc778045792b05dbb23b3c746f8ea347804d448
+  languageName: node
+  linkType: hard
+
 "@types/yargs-parser@npm:*":
   version: 21.0.3
   resolution: "@types/yargs-parser@npm:21.0.3"
@@ -6519,7 +6708,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"assert@npm:^2.0.0":
+"assert@npm:^2.0.0, assert@npm:^2.1.0":
   version: 2.1.0
   resolution: "assert@npm:2.1.0"
   dependencies:
@@ -6539,24 +6728,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ast-types@npm:0.15.2":
-  version: 0.15.2
-  resolution: "ast-types@npm:0.15.2"
-  dependencies:
-    tslib: "npm:^2.0.1"
-  checksum: 81680bd5829cdec33524e9aa3434e23f3919c0c388927068a0ff2e8466f55b0f34eae53e0007b3668742910c289481ab4e1d486a5318f618ae2fc93b5e7e863b
-  languageName: node
-  linkType: hard
-
-"ast-types@npm:^0.14.2":
-  version: 0.14.2
-  resolution: "ast-types@npm:0.14.2"
-  dependencies:
-    tslib: "npm:^2.0.1"
-  checksum: 7c74b3090c90aa600b49a7a8cecc99e329f190600bcaa75ad087472a1a5a7ef23795a17ea00a74c2a8e822b336cd4f874e2e1b815a9877b4dba5e401566b0433
-  languageName: node
-  linkType: hard
-
 "ast-types@npm:^0.16.1":
   version: 0.16.1
   resolution: "ast-types@npm:0.16.1"
@@ -6720,13 +6891,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-named-exports-order@npm:^0.0.2":
-  version: 0.0.2
-  resolution: "babel-plugin-named-exports-order@npm:0.0.2"
-  checksum: 8e7bb1e8109d5f7ef7a579256adc93f9af095537d78b08bed3c439f1d02c3f9332e4cdbaf324e178fdee03a60b9489ce49482e5b75f71d79642e2e382f58bb02
-  languageName: node
-  linkType: hard
-
 "babel-plugin-polyfill-corejs2@npm:^0.4.6":
   version: 0.4.6
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.6"
@@ -6763,17 +6927,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-react-docgen@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "babel-plugin-react-docgen@npm:4.2.1"
-  dependencies:
-    ast-types: "npm:^0.14.2"
-    lodash: "npm:^4.17.15"
-    react-docgen: "npm:^5.0.0"
-  checksum: 5de78d0bf984c08e713cbc2244022e4fbbbb0a491d05db31dd89bc8e3940968f4ba03e27837e3cb6f44a9061c83f0287dcafd51885354deb3447e5bbc8763d3d
-  languageName: node
-  linkType: hard
-
 "babel-preset-current-node-syntax@npm:^1.0.0":
   version: 1.0.1
   resolution: "babel-preset-current-node-syntax@npm:1.0.1"
@@ -7096,28 +7249,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"c8@npm:^7.6.0":
-  version: 7.14.0
-  resolution: "c8@npm:7.14.0"
-  dependencies:
-    "@bcoe/v8-coverage": "npm:^0.2.3"
-    "@istanbuljs/schema": "npm:^0.1.3"
-    find-up: "npm:^5.0.0"
-    foreground-child: "npm:^2.0.0"
-    istanbul-lib-coverage: "npm:^3.2.0"
-    istanbul-lib-report: "npm:^3.0.0"
-    istanbul-reports: "npm:^3.1.4"
-    rimraf: "npm:^3.0.2"
-    test-exclude: "npm:^6.0.0"
-    v8-to-istanbul: "npm:^9.0.0"
-    yargs: "npm:^16.2.0"
-    yargs-parser: "npm:^20.2.9"
-  bin:
-    c8: bin/c8.js
-  checksum: 1b9ada019c999cb84d1dd2ace52aef84d91608214dfea612d97d66ef5285c7a75877569285955bfab58fea87f1d2edcdfee56ac1e3e93027df741cedf11e1aeb
-  languageName: node
-  linkType: hard
-
 "cacache@npm:^18.0.0":
   version: 18.0.0
   resolution: "cacache@npm:18.0.0"
@@ -7367,14 +7498,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "chromatic@npm:9.0.0"
+"chromatic@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "chromatic@npm:9.1.0"
   bin:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: c8e0aef55e6954b958a0c7564949e63a3e950690e46db0596397fbd232918c11422da8c5f2d9907e2d7be4a618009dbe74760572c40fc4d117cb3079d66f03b8
+  checksum: e015aebb77ee266fc3a3da7d366cfb6132b27f540236dd23bcd5ed5985a9727f5e6398eb1880127e791d37febba04f80654519073d7e31b69fc59c256d1d6401
   languageName: node
   linkType: hard
 
@@ -7684,7 +7815,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^2.19.0, commander@npm:^2.20.0":
+"commander@npm:^2.20.0":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
   checksum: 90c5b6898610cd075984c58c4f88418a4fb44af08c1b1415e9854c03171bec31b336b7f3e4cefe33de994b3f12b03c5e2d638da4316df83593b9e82554e7e95b
@@ -7872,12 +8003,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"conventional-changelog-angular@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "conventional-changelog-angular@npm:6.0.0"
+"conventional-changelog-angular@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "conventional-changelog-angular@npm:7.0.0"
   dependencies:
     compare-func: "npm:^2.0.0"
-  checksum: ddc59ead53a45b817d83208200967f5340866782b8362d5e2e34105fdfa3d3a31585ebbdec7750bdb9de53da869f847e8ca96634a9801f51e27ecf4e7ffe2bad
+  checksum: e7966d2fee5475e76263f30f8b714b2b592b5bf556df225b7091e5090831fc9a20b99598a7d2997e19c2ef8118c0a3150b1eba290786367b0f55a5ccfa804ec9
   languageName: node
   linkType: hard
 
@@ -9293,7 +9424,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-module-lexer@npm:^1.2.1":
+"es-module-lexer@npm:^1.2.1, es-module-lexer@npm:^1.4.1":
   version: 1.4.1
   resolution: "es-module-lexer@npm:1.4.1"
   checksum: cf453613468c417af6e189b03d9521804033fdd5a229a36fedec28d37ea929fccf6822d42abff1126eb01ba1d2aa2845a48d5d1772c0724f8204464d9d3855f6
@@ -9684,14 +9815,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-testing-library@npm:^6.1.2":
-  version: 6.1.2
-  resolution: "eslint-plugin-testing-library@npm:6.1.2"
+"eslint-plugin-testing-library@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "eslint-plugin-testing-library@npm:6.2.0"
   dependencies:
     "@typescript-eslint/utils": "npm:^5.58.0"
   peerDependencies:
     eslint: ^7.5.0 || ^8.0.0
-  checksum: 83399dae21422ca7e2ac99ff6666dffa64e31773132cb1854d00b29e8a6f6f167cc8f6f4e73112bef26a631d4c76e4b947aa6f7032d5c9cf1f7548de1f4b32bf
+  checksum: c523e668066fc1f68765e72c65565cb006489e7e8460efa1a4dbaf75f31d197a858a49fc7c9a43e26ffb37c0c611359ec585ab29976ff2b0276cd85cebb2890a
   languageName: node
   linkType: hard
 
@@ -9722,14 +9853,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.53.0":
-  version: 8.53.0
-  resolution: "eslint@npm:8.53.0"
+"eslint@npm:^8.54.0":
+  version: 8.54.0
+  resolution: "eslint@npm:8.54.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.2.0"
     "@eslint-community/regexpp": "npm:^4.6.1"
     "@eslint/eslintrc": "npm:^2.1.3"
-    "@eslint/js": "npm:8.53.0"
+    "@eslint/js": "npm:8.54.0"
     "@humanwhocodes/config-array": "npm:^0.11.13"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
     "@nodelib/fs.walk": "npm:^1.2.8"
@@ -9766,7 +9897,7 @@ __metadata:
     text-table: "npm:^0.2.0"
   bin:
     eslint: bin/eslint.js
-  checksum: e305a71ce2b9a8631b293266fe53e346c76f28bc8d004af33f10e537cf133db1fb87af3599376e70ed6e0f89a78be10c4f08ddd0c1c9c0c497cd143b4a270420
+  checksum: 379827964fd7885a4d48611a5237cf5c534eff0ad3d0c1a1d6a14d52ac6758f4efdccd924c9bb3a9aa4dc80a3446d48dc49f61733cd5bd5f74419d0240970e7b
   languageName: node
   linkType: hard
 
@@ -9823,17 +9954,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-to-babel@npm:^3.1.0":
-  version: 3.2.1
-  resolution: "estree-to-babel@npm:3.2.1"
-  dependencies:
-    "@babel/traverse": "npm:^7.1.6"
-    "@babel/types": "npm:^7.2.0"
-    c8: "npm:^7.6.0"
-  checksum: c3e51bf32606084faa6037bbaa6a69bbe73d21589c187aa70c8703c81c0ab56d2b32ae13a5d8346eb4fd575092415d62222677355acf8259d65f79c7cae5cebf
-  languageName: node
-  linkType: hard
-
 "estree-walker@npm:^0.6.1":
   version: 0.6.1
   resolution: "estree-walker@npm:0.6.1"
@@ -10435,16 +10555,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"foreground-child@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "foreground-child@npm:2.0.0"
-  dependencies:
-    cross-spawn: "npm:^7.0.0"
-    signal-exit: "npm:^3.0.2"
-  checksum: f36574ad8e19d69ce06fceac7d86161b863968e4ba292c14b7b40e5c464e3e9bcd7711250d33427d95cc2bb0d48cf101df9687433dbbc7fd3c7e4f595be8305e
-  languageName: node
-  linkType: hard
-
 "foreground-child@npm:^3.1.0":
   version: 3.1.1
   resolution: "foreground-child@npm:3.1.1"
@@ -12449,7 +12559,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-reports@npm:^3.1.3, istanbul-reports@npm:^3.1.4":
+"istanbul-reports@npm:^3.1.3":
   version: 3.1.6
   resolution: "istanbul-reports@npm:3.1.6"
   dependencies:
@@ -13028,19 +13138,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jscodeshift@npm:^0.14.0":
-  version: 0.14.0
-  resolution: "jscodeshift@npm:0.14.0"
-  dependencies:
-    "@babel/core": "npm:^7.13.16"
-    "@babel/parser": "npm:^7.13.16"
-    "@babel/plugin-proposal-class-properties": "npm:^7.13.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator": "npm:^7.13.8"
-    "@babel/plugin-proposal-optional-chaining": "npm:^7.13.12"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.13.8"
-    "@babel/preset-flow": "npm:^7.13.13"
-    "@babel/preset-typescript": "npm:^7.13.0"
-    "@babel/register": "npm:^7.13.16"
+"jscodeshift@npm:^0.15.1":
+  version: 0.15.1
+  resolution: "jscodeshift@npm:0.15.1"
+  dependencies:
+    "@babel/core": "npm:^7.23.0"
+    "@babel/parser": "npm:^7.23.0"
+    "@babel/plugin-transform-class-properties": "npm:^7.22.5"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.0"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.22.11"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.23.0"
+    "@babel/plugin-transform-private-methods": "npm:^7.22.5"
+    "@babel/preset-flow": "npm:^7.22.15"
+    "@babel/preset-typescript": "npm:^7.23.0"
+    "@babel/register": "npm:^7.22.15"
     babel-core: "npm:^7.0.0-bridge.0"
     chalk: "npm:^4.1.2"
     flow-parser: "npm:0.*"
@@ -13048,14 +13159,17 @@ __metadata:
     micromatch: "npm:^4.0.4"
     neo-async: "npm:^2.5.0"
     node-dir: "npm:^0.1.17"
-    recast: "npm:^0.21.0"
+    recast: "npm:^0.23.3"
     temp: "npm:^0.8.4"
     write-file-atomic: "npm:^2.3.0"
   peerDependencies:
     "@babel/preset-env": ^7.1.6
+  peerDependenciesMeta:
+    "@babel/preset-env":
+      optional: true
   bin:
     jscodeshift: bin/jscodeshift.js
-  checksum: fc355dde2287c026a682e8b38df5d8d1ff5c9ca044dfd558f2b6d17bb28f9257063bd0e47690814612e572804caa5383733c9d8ca8bc18e70bcee43e0458df59
+  checksum: 7cece7b99fe57de7d65bdd962c93b93f0080605cf7d7f1aad42da7c3beb824107067726ede681b703fd012293b7797b7f2fefbb1420b0e44a0fca669bb48e34c
   languageName: node
   linkType: hard
 
@@ -13762,6 +13876,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.5":
+  version: 0.30.5
+  resolution: "magic-string@npm:0.30.5"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
+  checksum: c8a6b25f813215ca9db526f3a407d6dc0bf35429c2b8111d6f1c2cf6cf6afd5e2d9f9cd189416a0e3959e20ecd635f73639f9825c73de1074b29331fe36ace59
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:^2.0.0, make-dir@npm:^2.1.0":
   version: 2.1.0
   resolution: "make-dir@npm:2.1.0"
@@ -14412,7 +14535,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"neo-async@npm:^2.5.0, neo-async@npm:^2.6.1, neo-async@npm:^2.6.2":
+"neo-async@npm:^2.5.0, neo-async@npm:^2.6.2":
   version: 2.6.2
   resolution: "neo-async@npm:2.6.2"
   checksum: 1a7948fea86f2b33ec766bc899c88796a51ba76a4afc9026764aedc6e7cde692a09067031e4a1bf6db4f978ccd99e7f5b6c03fe47ad9865c3d4f99050d67e002
@@ -14436,7 +14559,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-dir@npm:^0.1.10, node-dir@npm:^0.1.17":
+"node-dir@npm:^0.1.17":
   version: 0.1.17
   resolution: "node-dir@npm:0.1.17"
   dependencies:
@@ -16512,23 +16635,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-docgen@npm:^5.0.0":
-  version: 5.4.3
-  resolution: "react-docgen@npm:5.4.3"
-  dependencies:
-    "@babel/core": "npm:^7.7.5"
-    "@babel/generator": "npm:^7.12.11"
-    "@babel/runtime": "npm:^7.7.6"
-    ast-types: "npm:^0.14.2"
-    commander: "npm:^2.19.0"
+"react-docgen@npm:^7.0.0":
+  version: 7.0.1
+  resolution: "react-docgen@npm:7.0.1"
+  dependencies:
+    "@babel/core": "npm:^7.18.9"
+    "@babel/traverse": "npm:^7.18.9"
+    "@babel/types": "npm:^7.18.9"
+    "@types/babel__core": "npm:^7.18.0"
+    "@types/babel__traverse": "npm:^7.18.0"
+    "@types/doctrine": "npm:^0.0.9"
+    "@types/resolve": "npm:^1.20.2"
     doctrine: "npm:^3.0.0"
-    estree-to-babel: "npm:^3.1.0"
-    neo-async: "npm:^2.6.1"
-    node-dir: "npm:^0.1.10"
-    strip-indent: "npm:^3.0.0"
-  bin:
-    react-docgen: bin/react-docgen.js
-  checksum: 111f558e0891982c1a708fe912887a8681d04e230711f0f95a9d4a60b6179cf5efa7e1727995020c06bac97a310bb66e5805b53ca32d3998d0b166482ea95baa
+    resolve: "npm:^1.22.1"
+    strip-indent: "npm:^4.0.0"
+  checksum: 9df408444d4c6dd08748f38df5947f748e5108e11b515a3f7b887880f4f74fff8edd0461b58bb48911216ed456f8f71a75778e82d052b99ab197a43a4e26c551
   languageName: node
   linkType: hard
 
@@ -16585,15 +16706,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-inspector@npm:^6.0.0":
-  version: 6.0.2
-  resolution: "react-inspector@npm:6.0.2"
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0 || ^18.0.0
-  checksum: 5d23ad0f6f920458abd4c01af1b3cbdbe8846c254762fd6cfff4df119c54e08dd98ce8e91acacafb8173c19f07de2066df5b8e6cb19425751c1929a2620cbe77
-  languageName: node
-  linkType: hard
-
 "react-is@npm:18.1.0":
   version: 18.1.0
   resolution: "react-is@npm:18.1.0"
@@ -16669,10 +16781,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-refresh@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "react-refresh@npm:0.11.0"
-  checksum: 1275699e2edc39dbced9bdb00e2e167e3a2868e0c8ae117ba9551556368cfe70453068e5209240d827122aad5504a64c59a24b9b9a2a0ab932472c8750203ea3
+"react-refresh@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "react-refresh@npm:0.14.0"
+  checksum: 75941262ce3ed4fc79b52492943fd59692f29b84f30f3822713b7e920f28e85c62a4386f85cbfbaea95ed62d3e74209f0a0bb065904b7ab2f166a74ac3812e2a
   languageName: node
   linkType: hard
 
@@ -16711,18 +16823,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-resize-detector@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "react-resize-detector@npm:7.1.2"
-  dependencies:
-    lodash: "npm:^4.17.21"
-  peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: a8a564577f41622a3c98a2abef84b703de1ae20197819598aa738062162e2660a370fb7b0bc1598d5bcb0f8cb8b69337ea199e7c56fc507d32f6d0cd48a386df
-  languageName: node
-  linkType: hard
-
 "react-style-singleton@npm:^2.2.1":
   version: 2.2.1
   resolution: "react-style-singleton@npm:2.2.1"
@@ -16887,19 +16987,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recast@npm:^0.21.0":
-  version: 0.21.5
-  resolution: "recast@npm:0.21.5"
-  dependencies:
-    ast-types: "npm:0.15.2"
-    esprima: "npm:~4.0.0"
-    source-map: "npm:~0.6.1"
-    tslib: "npm:^2.0.1"
-  checksum: b41da2bcf7e705511db2f27d17420ace027de8dd167de9f19190d4988a1f80d112f60c095101ac2f145c8657ddde0c5133eb71df20504efaf3fd9d76ad07e15d
-  languageName: node
-  linkType: hard
-
-"recast@npm:^0.23.1":
+"recast@npm:^0.23.1, recast@npm:^0.23.3":
   version: 0.23.4
   resolution: "recast@npm:0.23.4"
   dependencies:
@@ -17365,22 +17453,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "rollup@npm:4.4.0"
-  dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.4.0"
-    "@rollup/rollup-android-arm64": "npm:4.4.0"
-    "@rollup/rollup-darwin-arm64": "npm:4.4.0"
-    "@rollup/rollup-darwin-x64": "npm:4.4.0"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.4.0"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.4.0"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.4.0"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.4.0"
-    "@rollup/rollup-linux-x64-musl": "npm:4.4.0"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.4.0"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.4.0"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.4.0"
+"rollup@npm:^4.6.1":
+  version: 4.6.1
+  resolution: "rollup@npm:4.6.1"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.6.1"
+    "@rollup/rollup-android-arm64": "npm:4.6.1"
+    "@rollup/rollup-darwin-arm64": "npm:4.6.1"
+    "@rollup/rollup-darwin-x64": "npm:4.6.1"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.6.1"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.6.1"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.6.1"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.6.1"
+    "@rollup/rollup-linux-x64-musl": "npm:4.6.1"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.6.1"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.6.1"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.6.1"
     fsevents: "npm:~2.3.2"
   dependenciesMeta:
     "@rollup/rollup-android-arm-eabi":
@@ -17411,7 +17499,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 365c553434290714022137607067c01027ab82fedde7937cf48f6881a4b94fcf94c40c583fe9ca8c4aa875ed1d8d3ad42cdfc07dc7f62141d6249b5c7563c1f1
+  checksum: 32fcbb3954597c27fe493d8dcebc24c3ddff8eab2150829cfb2161761038a9bd64873f51a90a6bfce522a70201318d764371e78ed294fc7aa019804f1dac7f08
   languageName: node
   linkType: hard
 
@@ -18130,15 +18218,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^7.5.3":
-  version: 7.5.3
-  resolution: "storybook@npm:7.5.3"
+"storybook@npm:^7.6.3":
+  version: 7.6.3
+  resolution: "storybook@npm:7.6.3"
   dependencies:
-    "@storybook/cli": "npm:7.5.3"
+    "@storybook/cli": "npm:7.6.3"
   bin:
     sb: ./index.js
     storybook: ./index.js
-  checksum: d5263aa78fd8f295d2770911b78cc13c00bf5ac3b67c017b9c7d388de915efd41c2091dc808122649c22c0904afb8e593ed5521d7086aea8cd12596d6df95a4b
+  checksum: b4b4641c6ce745379fa3a253182322692274d8e340be53c772e6e65b29566d6a72376422f5714c869f0e9239d83491539a7ff5a9a269440c4897d7cec6c0fb4e
   languageName: node
   linkType: hard
 
@@ -19698,7 +19786,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"v8-to-istanbul@npm:^9.0.0, v8-to-istanbul@npm:^9.0.1":
+"v8-to-istanbul@npm:^9.0.1":
   version: 9.1.3
   resolution: "v8-to-istanbul@npm:9.1.3"
   dependencies: