From 7b965ec219bcd95515045578549279dad2e251d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?=
 <48533432+mariannuar@users.noreply.github.com>
Date: Thu, 5 Sep 2024 16:32:29 -0600
Subject: [PATCH 01/44] Design tokens for Utility Menu

---
 src/tokens/figma.tokens.json | 102 ++++++++++++++++++++++-------------
 1 file changed, 65 insertions(+), 37 deletions(-)

diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
index a358402..0af6df5 100644
--- a/src/tokens/figma.tokens.json
+++ b/src/tokens/figma.tokens.json
@@ -2176,6 +2176,26 @@
       }
     }
   },
+  "components/utilityMenu": {
+    "utilityMenu": {
+      "color": {
+        "bg": {
+          "value": "{color.white}",
+          "type": "color"
+        },
+        "link": {
+          "default": {
+            "value": "{color.primary.darker}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{color.primary.dark}",
+            "type": "color"
+          }
+        }
+      }
+    }
+  },
   "components/pager": {
     "pager": {
       "color": {
@@ -2620,15 +2640,6 @@
         "pager.text.hover": "S:d5268cc95f0ca68a28f35d87395f9ce37893fe23,",
         "pager.text.focus": "S:d03b986e8d65e0c71a1837ec7325ffbce6d6aaa7,",
         "pager.fill.hover": "S:5bdc99f7ec11756cdef48ec3e13c9b4dd6f4ea81,",
-        "mainMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,",
-        "mainMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,",
-        "mainMenu.color.link.bg-hover": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,",
-        "mainMenu.color.link.label": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,",
-        "mainMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,",
-        "mainMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,",
-        "mainMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,",
-        "mainMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,",
-        "mainMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,",
         "link.default": "S:9fd4db376033a945bbc2bf5bfe8a698e68bd6f1a,",
         "link.hover": "S:e6b1afc9022d41b4217e773a9ab4abf90329cf46,",
         "color.fieldset.bg": "S:bfe975e6026fa7f0aa7fd11985d9ebaeb6565d17,",
@@ -2731,7 +2742,16 @@
         "color.grays.900": "S:d14dafeba041e023bd5c5d2c458c10f88801e824,",
         "color.grays.1000": "S:588f6731fa9753788b0b48bb7c575f3b94991a69,",
         "checkbox.color.label": "S:dd27f922df752738d999c185f11b67e77134feac,",
-        "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,"
+        "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,",
+        "utilityMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,",
+        "utilityMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,",
+        "utilityMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,",
+        "utilityMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,",
+        "utilityMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,",
+        "utilityMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,",
+        "utilityMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,",
+        "utilityMenu.color.link.default": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,",
+        "utilityMenu.color.link.hover": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,"
       },
       "selectedTokenSets": {
         "global": "enabled",
@@ -2758,7 +2778,8 @@
         "components/announcement": "enabled",
         "components/banner": "enabled",
         "components/footer": "enabled",
-        "components/header": "enabled"
+        "components/header": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:16908",
       "$figmaModeId": "23237:10",
@@ -2808,15 +2829,6 @@
         "pager.text.hover": "2e1149296e028f68d0590547182eb3fa046b0799",
         "pager.text.focus": "f597287eb8465595918f5af8c56a3f803417cf81",
         "pager.fill.hover": "e7c4c208bc4d7ed93b94794070642830984f1687",
-        "mainMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23",
-        "mainMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2",
-        "mainMenu.color.link.bg-hover": "29ea5911b9675ae3920cf9f26602f612fe9e33d5",
-        "mainMenu.color.link.label": "a28d88530a052b75025ad58244a622f52538ffdb",
-        "mainMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805",
-        "mainMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128",
-        "mainMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477",
-        "mainMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83",
-        "mainMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268",
         "link.default": "52f2a6ae3ef87bb2b4c96e2b8316e609a1f3e4e0",
         "link.hover": "602f312f7c40299996ccaf31cd8340e88ddcd6a8",
         "input.color.label": "40806b82869b549ff22858fd677df5c1c6d22cad",
@@ -2938,7 +2950,16 @@
         "checkbox.spacing.gap": "59fbad63c0994ee956f8790e994534f9f5f5e922",
         "checkbox.color.label": "4db65c0b61319b6c85cdb9c1b683d84e2f65ff52",
         "checkbox.color.label-disabled": "3a5dec39f06f92904d80c2096f9c439ae0b5d09a",
-        "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310"
+        "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310",
+        "utilityMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23",
+        "utilityMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2",
+        "utilityMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805",
+        "utilityMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128",
+        "utilityMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477",
+        "utilityMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83",
+        "utilityMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268",
+        "utilityMenu.color.link.default": "29ea5911b9675ae3920cf9f26602f612fe9e33d5",
+        "utilityMenu.color.link.hover": "a28d88530a052b75025ad58244a622f52538ffdb"
       }
     },
     {
@@ -2946,7 +2967,8 @@
       "name": "Emulsify Global",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "global": "enabled"
+        "global": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17089",
       "$figmaModeId": "23237:11",
@@ -2998,7 +3020,8 @@
       "name": "Emulsify Semantic",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "semantic": "enabled"
+        "semantic": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17133",
       "$figmaModeId": "23237:12",
@@ -3020,7 +3043,8 @@
       "name": "Emulsify Storybook only",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "storybook": "source"
+        "storybook": "source",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17144",
       "$figmaModeId": "23237:13",
@@ -3048,7 +3072,8 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled"
+        "components/textField": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17145",
       "$figmaModeId": "23237:14",
@@ -3094,15 +3119,6 @@
         "pager.text.hover": "067e5560a9bcaee73e961d449ec580cabede8a17",
         "pager.text.focus": "039853336af697ea5a3d09db6b64f78e7c45c35d",
         "pager.fill.hover": "64071b977256beb9e45651dbbe696ac3dfb389d3",
-        "mainMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8",
-        "mainMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071",
-        "mainMenu.color.link.bg-hover": "d2185c2db3e4a1b77be017df0fb5f3376c756f50",
-        "mainMenu.color.link.label": "4c190c6dffed1c15773123f079e53c195ae53054",
-        "mainMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d",
-        "mainMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592",
-        "mainMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb",
-        "mainMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1",
-        "mainMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91",
         "link.default": "3faaab82a9c834600aaa7ad75621d14583bd9974",
         "link.hover": "e44dbb7433cdb45720e896b1126e28c9bff490e4",
         "input.color.label": "1b07b68bbc2c3339a39e57980e5b0dd66e848174",
@@ -3174,7 +3190,16 @@
         "blockQuote.padding.y": "398508657cd7d1bbd686f838a27db3f0c3ee3f74",
         "checkbox.spacing.gap": "e4d2049d0ee84eceee61f25e3264c2526cfe746a",
         "checkbox.color.label": "d2a0283754f673d1b92c74eef12f3bbe06845d3b",
-        "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838"
+        "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838",
+        "utilityMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8",
+        "utilityMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071",
+        "utilityMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d",
+        "utilityMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592",
+        "utilityMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb",
+        "utilityMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1",
+        "utilityMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91",
+        "utilityMenu.color.link.default": "d2185c2db3e4a1b77be017df0fb5f3376c756f50",
+        "utilityMenu.color.link.hover": "4c190c6dffed1c15773123f079e53c195ae53054"
       }
     },
     {
@@ -3201,7 +3226,8 @@
         "components/table": "enabled",
         "components/tabs": "enabled",
         "components/textField": "enabled",
-        "semantic": "enabled"
+        "semantic": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "group": "WUP"
     },
@@ -3228,7 +3254,8 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled"
+        "components/textField": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "group": "WUP"
     }
@@ -3252,6 +3279,7 @@
       "components/input",
       "components/link",
       "components/mainMenu",
+      "components/utilityMenu",
       "components/pager",
       "components/radioButton",
       "components/selectdropdown",

From f772281545a3a1af193d0bd72507f93c5e470060 Mon Sep 17 00:00:00 2001
From: mariannuar <mariannuar@users.noreply.github.com>
Date: Thu, 5 Sep 2024 22:34:32 +0000
Subject: [PATCH 02/44] feat: create tokens

---
 src/components/tokens/_tokens.scss |  22 +++---
 src/tokens/transformed.tokens.json | 121 ++++++++++++++++++-----------
 2 files changed, 90 insertions(+), 53 deletions(-)

diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss
index 9aef387..6d43991 100644
--- a/src/components/tokens/_tokens.scss
+++ b/src/components/tokens/_tokens.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 22 Aug 2024 18:22:46 GMT
+ * Generated on Thu, 05 Sep 2024 22:34:29 GMT
  */
 
 :root {
@@ -66,6 +66,9 @@
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
+  --utility-menu-color-bg: #ffffff;
+  --utility-menu-color-link-default: #006089;
+  --utility-menu-color-link-hover: #0080b7;
   --main-menu-color-bg: #ffffff;
   --main-menu-color-link-bg: #ffffff;
   --main-menu-color-link-bg-hover: #9ce1ff;
@@ -399,14 +402,15 @@
   --token-set-order-14: components/input;
   --token-set-order-15: components/link;
   --token-set-order-16: components/mainMenu;
-  --token-set-order-17: components/pager;
-  --token-set-order-18: components/radioButton;
-  --token-set-order-19: components/selectdropdown;
-  --token-set-order-20: components/status;
-  --token-set-order-21: components/table;
-  --token-set-order-22: components/tabs;
-  --token-set-order-23: components/textField;
-  --token-set-order-24: storybook;
+  --token-set-order-17: components/utilityMenu;
+  --token-set-order-18: components/pager;
+  --token-set-order-19: components/radioButton;
+  --token-set-order-20: components/selectdropdown;
+  --token-set-order-21: components/status;
+  --token-set-order-22: components/table;
+  --token-set-order-23: components/tabs;
+  --token-set-order-24: components/textField;
+  --token-set-order-25: storybook;
   --emulsify-ui-kit-full: [object Object];
   --emulsify-global: [object Object];
   --emulsify-semantic: [object Object];
diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
index 228b773..b46e49d 100644
--- a/src/tokens/transformed.tokens.json
+++ b/src/tokens/transformed.tokens.json
@@ -323,6 +323,24 @@
       }
     }
   },
+  "utilityMenu": {
+    "color": {
+      "bg": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "link": {
+        "default": {
+          "value": "#006089",
+          "type": "color"
+        },
+        "hover": {
+          "value": "#0080b7",
+          "type": "color"
+        }
+      }
+    }
+  },
   "mainMenu": {
     "color": {
       "bg": {
@@ -2496,34 +2514,38 @@
       "type": "other"
     },
     "17": {
-      "value": "components/pager",
+      "value": "components/utilityMenu",
       "type": "other"
     },
     "18": {
-      "value": "components/radioButton",
+      "value": "components/pager",
       "type": "other"
     },
     "19": {
-      "value": "components/selectdropdown",
+      "value": "components/radioButton",
       "type": "other"
     },
     "20": {
-      "value": "components/status",
+      "value": "components/selectdropdown",
       "type": "other"
     },
     "21": {
-      "value": "components/table",
+      "value": "components/status",
       "type": "other"
     },
     "22": {
-      "value": "components/tabs",
+      "value": "components/table",
       "type": "other"
     },
     "23": {
-      "value": "components/textField",
+      "value": "components/tabs",
       "type": "other"
     },
     "24": {
+      "value": "components/textField",
+      "type": "other"
+    },
+    "25": {
       "value": "storybook",
       "type": "other"
     }
@@ -2630,15 +2652,6 @@
       "pager.text.hover": "S:d5268cc95f0ca68a28f35d87395f9ce37893fe23,",
       "pager.text.focus": "S:d03b986e8d65e0c71a1837ec7325ffbce6d6aaa7,",
       "pager.fill.hover": "S:5bdc99f7ec11756cdef48ec3e13c9b4dd6f4ea81,",
-      "mainMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,",
-      "mainMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,",
-      "mainMenu.color.link.bg-hover": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,",
-      "mainMenu.color.link.label": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,",
-      "mainMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,",
-      "mainMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,",
-      "mainMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,",
-      "mainMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,",
-      "mainMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,",
       "link.default": "S:9fd4db376033a945bbc2bf5bfe8a698e68bd6f1a,",
       "link.hover": "S:e6b1afc9022d41b4217e773a9ab4abf90329cf46,",
       "color.fieldset.bg": "S:bfe975e6026fa7f0aa7fd11985d9ebaeb6565d17,",
@@ -2741,7 +2754,16 @@
       "color.grays.900": "S:d14dafeba041e023bd5c5d2c458c10f88801e824,",
       "color.grays.1000": "S:588f6731fa9753788b0b48bb7c575f3b94991a69,",
       "checkbox.color.label": "S:dd27f922df752738d999c185f11b67e77134feac,",
-      "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,"
+      "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,",
+      "utilityMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,",
+      "utilityMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,",
+      "utilityMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,",
+      "utilityMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,",
+      "utilityMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,",
+      "utilityMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,",
+      "utilityMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,",
+      "utilityMenu.color.link.default": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,",
+      "utilityMenu.color.link.hover": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,"
     },
     "selectedTokenSets": {
       "global": "enabled",
@@ -2764,7 +2786,12 @@
       "components/table": "enabled",
       "components/tabs": "enabled",
       "components/textField": "enabled",
-      "semantic": "enabled"
+      "semantic": "enabled",
+      "components/announcement": "enabled",
+      "components/banner": "enabled",
+      "components/footer": "enabled",
+      "components/header": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:16908",
     "$figmaModeId": "23237:10",
@@ -2814,15 +2841,6 @@
       "pager.text.hover": "2e1149296e028f68d0590547182eb3fa046b0799",
       "pager.text.focus": "f597287eb8465595918f5af8c56a3f803417cf81",
       "pager.fill.hover": "e7c4c208bc4d7ed93b94794070642830984f1687",
-      "mainMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23",
-      "mainMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2",
-      "mainMenu.color.link.bg-hover": "29ea5911b9675ae3920cf9f26602f612fe9e33d5",
-      "mainMenu.color.link.label": "a28d88530a052b75025ad58244a622f52538ffdb",
-      "mainMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805",
-      "mainMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128",
-      "mainMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477",
-      "mainMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83",
-      "mainMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268",
       "link.default": "52f2a6ae3ef87bb2b4c96e2b8316e609a1f3e4e0",
       "link.hover": "602f312f7c40299996ccaf31cd8340e88ddcd6a8",
       "input.color.label": "40806b82869b549ff22858fd677df5c1c6d22cad",
@@ -2944,7 +2962,16 @@
       "checkbox.spacing.gap": "59fbad63c0994ee956f8790e994534f9f5f5e922",
       "checkbox.color.label": "4db65c0b61319b6c85cdb9c1b683d84e2f65ff52",
       "checkbox.color.label-disabled": "3a5dec39f06f92904d80c2096f9c439ae0b5d09a",
-      "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310"
+      "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310",
+      "utilityMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23",
+      "utilityMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2",
+      "utilityMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805",
+      "utilityMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128",
+      "utilityMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477",
+      "utilityMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83",
+      "utilityMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268",
+      "utilityMenu.color.link.default": "29ea5911b9675ae3920cf9f26602f612fe9e33d5",
+      "utilityMenu.color.link.hover": "a28d88530a052b75025ad58244a622f52538ffdb"
     },
     "type": "other",
     "value": "[object Object]"
@@ -2953,7 +2980,8 @@
     "id": "0a5c4562bd35f00ce8a339239980a3842147c0bd",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "global": "enabled"
+      "global": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17089",
     "$figmaModeId": "23237:11",
@@ -3006,7 +3034,8 @@
     "id": "ca91148967a5dcc80f7e50f6ccfe35b30efd5f2f",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "semantic": "enabled"
+      "semantic": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17133",
     "$figmaModeId": "23237:12",
@@ -3029,7 +3058,8 @@
     "id": "16a10d373d39988a75c7d612cd449a633f373c44",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "storybook": "source"
+      "storybook": "source",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17144",
     "$figmaModeId": "23237:13",
@@ -3058,7 +3088,8 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled"
+      "components/textField": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17145",
     "$figmaModeId": "23237:14",
@@ -3104,15 +3135,6 @@
       "pager.text.hover": "067e5560a9bcaee73e961d449ec580cabede8a17",
       "pager.text.focus": "039853336af697ea5a3d09db6b64f78e7c45c35d",
       "pager.fill.hover": "64071b977256beb9e45651dbbe696ac3dfb389d3",
-      "mainMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8",
-      "mainMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071",
-      "mainMenu.color.link.bg-hover": "d2185c2db3e4a1b77be017df0fb5f3376c756f50",
-      "mainMenu.color.link.label": "4c190c6dffed1c15773123f079e53c195ae53054",
-      "mainMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d",
-      "mainMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592",
-      "mainMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb",
-      "mainMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1",
-      "mainMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91",
       "link.default": "3faaab82a9c834600aaa7ad75621d14583bd9974",
       "link.hover": "e44dbb7433cdb45720e896b1126e28c9bff490e4",
       "input.color.label": "1b07b68bbc2c3339a39e57980e5b0dd66e848174",
@@ -3184,7 +3206,16 @@
       "blockQuote.padding.y": "398508657cd7d1bbd686f838a27db3f0c3ee3f74",
       "checkbox.spacing.gap": "e4d2049d0ee84eceee61f25e3264c2526cfe746a",
       "checkbox.color.label": "d2a0283754f673d1b92c74eef12f3bbe06845d3b",
-      "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838"
+      "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838",
+      "utilityMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8",
+      "utilityMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071",
+      "utilityMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d",
+      "utilityMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592",
+      "utilityMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb",
+      "utilityMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1",
+      "utilityMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91",
+      "utilityMenu.color.link.default": "d2185c2db3e4a1b77be017df0fb5f3376c756f50",
+      "utilityMenu.color.link.hover": "4c190c6dffed1c15773123f079e53c195ae53054"
     },
     "type": "other",
     "value": "[object Object]"
@@ -3212,7 +3243,8 @@
       "components/table": "enabled",
       "components/tabs": "enabled",
       "components/textField": "enabled",
-      "semantic": "enabled"
+      "semantic": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "group": "WUP",
     "type": "other",
@@ -3240,7 +3272,8 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled"
+      "components/textField": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "group": "WUP",
     "type": "other",

From 0c1283fd4964299622ac7953043cfbacf2615088 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Mon, 16 Sep 2024 12:37:08 -0500
Subject: [PATCH 03/44] feat: add social navigation

---
 .../breadcrumbs/breadcrumbs.component.yml     |  2 +-
 .../navigation/breadcrumbs/breadcrumbs.scss   | 40 +++++++-----
 .../navigation/breadcrumbs/breadcrumbs.twig   |  4 ++
 .../navigation/main/main.component.yml        |  2 +-
 .../navigation/social/_social-item.twig       | 63 +++++++++++++++++++
 .../navigation/social/_social-list.twig       | 20 ++++++
 .../navigation/social/social.component.yml    | 27 ++++++++
 src/components/navigation/social/social.scss  | 35 +++++++++++
 .../navigation/social/social.stories.js       | 13 ++++
 src/components/navigation/social/social.twig  |  8 +++
 10 files changed, 198 insertions(+), 16 deletions(-)
 create mode 100644 src/components/navigation/social/_social-item.twig
 create mode 100644 src/components/navigation/social/_social-list.twig
 create mode 100644 src/components/navigation/social/social.component.yml
 create mode 100644 src/components/navigation/social/social.scss
 create mode 100644 src/components/navigation/social/social.stories.js
 create mode 100644 src/components/navigation/social/social.twig

diff --git a/src/components/navigation/breadcrumbs/breadcrumbs.component.yml b/src/components/navigation/breadcrumbs/breadcrumbs.component.yml
index 6c4e853..513311b 100644
--- a/src/components/navigation/breadcrumbs/breadcrumbs.component.yml
+++ b/src/components/navigation/breadcrumbs/breadcrumbs.component.yml
@@ -1,7 +1,7 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
 
 name: Breadcrumbs
-group: Components/Menus
+group: Components/Navigation
 status: stable
 props:
   type: object
diff --git a/src/components/navigation/breadcrumbs/breadcrumbs.scss b/src/components/navigation/breadcrumbs/breadcrumbs.scss
index 3cbbabe..a840f5f 100644
--- a/src/components/navigation/breadcrumbs/breadcrumbs.scss
+++ b/src/components/navigation/breadcrumbs/breadcrumbs.scss
@@ -35,7 +35,7 @@
   flex-flow: row nowrap;
   position: relative;
   margin: 0;
-  padding: var(--spacing-md);
+  padding: 0;
   max-width: 100%;
   display: none;
 
@@ -115,8 +115,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: space(3);
-    width: space(3);
+    border: 0;
     z-index: 1;
     opacity: 0;
     visibility: hidden;
@@ -126,10 +125,10 @@
     left: 0;
     background: linear-gradient(
       90deg,
-      #{clr(background)} 75%,
-      #{clr(background, 0)} 100%
+      var(--button-color-bkg) 75%,
+      transparent 100%
     );
-    border-radius: space(2) 0 0 space(2);
+    border-radius: var(--button-radius) 0 0 var(--button-radius);
 
     [data-scroll-indicator='left'] &,
     [data-scroll-indicator='both'] & {
@@ -146,10 +145,10 @@
     right: 0;
     background: linear-gradient(
       90deg,
-      #{clr(background, 0)} 0%,
-      #{clr(background)} 25%
+      transparent 0%,
+      var(--button-color-bkg) 25%
     );
-    border-radius: 0 space(2) space(2) 0;
+    border-radius: 0 var(--button-radius) var(--button-radius) 0;
 
     [data-scroll-indicator='right'] &,
     [data-scroll-indicator='both'] & {
@@ -164,6 +163,12 @@
 
   .scroll__icon {
     display: flex;
+    height: var(--size-xl);
+    width: var(--size-xl);
+  }
+
+  .icon {
+    fill: var(--button-color-label);
   }
 }
 
@@ -173,11 +178,18 @@
   & {
     display: flex;
     white-space: nowrap;
-    background-color: clr(full-white);
-    border-radius: space(2);
-    margin-top: space(1.5);
-    margin-bottom: space(1.5) * -1;
-    padding: space(0.75) (space(1) + space(0.25)) space(0.75) space(2);
+    margin: 0;
+  }
+
+  // Main breadcrumb toggle.
+  .breadcrumbs__wrapper > & {
+    padding-left: var(--size-xl);
+    font-size: var(--font-size-x-small);
+    font-weight: var(--font-weight-primary-regular);
+  }
+
+  .icon {
+    fill: var(--button-color-label);
   }
 
   [data-breadcrumbs-overflow='expanded'] & {
diff --git a/src/components/navigation/breadcrumbs/breadcrumbs.twig b/src/components/navigation/breadcrumbs/breadcrumbs.twig
index 1537476..0217a00 100644
--- a/src/components/navigation/breadcrumbs/breadcrumbs.twig
+++ b/src/components/navigation/breadcrumbs/breadcrumbs.twig
@@ -18,6 +18,7 @@
     button__content: true,
     button__base_class: 'scroll',
     button__blockname: breadcrumbs__base_class,
+    button__style: 'primary',
     button__modifiers: ['left'],
     button__attributes: {
       'aria-hidden': 'true',
@@ -40,6 +41,7 @@
     button__content: true,
     button__base_class: 'scroll',
     button__blockname: breadcrumbs__base_class,
+    button__style: 'primary',
     button__type: 'filled',
     button__modifiers: ['right'],
     button__attributes: {
@@ -91,6 +93,8 @@
           button__content: true,
           button__base_class: 'toggle',
           button__blockname: breadcrumbs__base_class,
+          button__additional_classes: ['button'],
+          button__style: 'primary',
           button__attributes: {
             'aria-hidden': 'true',
             'tabindex': '-1',
diff --git a/src/components/navigation/main/main.component.yml b/src/components/navigation/main/main.component.yml
index 4290fff..1377614 100644
--- a/src/components/navigation/main/main.component.yml
+++ b/src/components/navigation/main/main.component.yml
@@ -1,7 +1,7 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
 
 name: Main Menu
-group: Components/Menus
+group: Components/Navigation
 status: stable
 props:
   type: object
diff --git a/src/components/navigation/social/_social-item.twig b/src/components/navigation/social/_social-item.twig
new file mode 100644
index 0000000..3ed1196
--- /dev/null
+++ b/src/components/navigation/social/_social-item.twig
@@ -0,0 +1,63 @@
+{% set item__modifiers = item__modifiers|default([]) %}
+{% set item__modifiers = item__modifiers|default([]) %}
+{% set item__attributes = item__attributes|default({}) %}
+
+{# Set link component as default #}
+{% set list__item %}
+{% if item.title %}
+	{% set link__content = item.title %}
+{% endif %}
+
+{% if item.text %}
+	{% set link__content = item.text %}
+{% endif %}
+
+{% if not item.url and not item.href %}
+	{% set link__attributes = link__attributes|merge({
+		'class': bem('placeholder', item__modifiers, menu__base_class),
+	}) %}
+	<span {{ add_attributes(link__attributes) }}>{{- link__content -}}</span>
+{% else %}
+	{# If drupal stringify the url object #}
+	{# See variable passed to menu_links macro #}
+		{% if directory %}
+			{% if item.url %}
+		{% set link__url = item.url|render %}
+		{% endif %}
+			{% if item.href %}
+		{% set link__url = item.href %}
+		{% endif %}
+	{% else %}
+		{% set link__url = item.url %}
+	{% endif %}
+
+	{% if link__url is empty %}
+		{% set link__base_class = 'placeholder' %}
+		{% set link__url = '#' %}
+	{% else %}
+		{% set link__blockname = menu__base_class %}
+	{% endif %}
+	{% embed "@components/link/link.twig" with {
+    link__style: 'icon',
+  } %}
+    {% block link__content %}
+      {% include "@components/icons/_icon.twig" with {
+        icon__name: item.title|lower,
+        icon__blockname: menu__base_class,
+      } %}
+      <span {{ bem('text', [], menu_class, ['visually-hidden']) }}>{{ item.title }}</span>
+    {% endblock %}
+  {% endembed %}
+{% endif %}
+{% endset %}
+
+{% embed "@components/lists/_list-item.twig" with {
+  list__item__base_class: 'item',
+  list__item__modifiers: item__modifiers,
+  list__item__blockname: item__blockname,
+  list__item__attributes: item__attributes,
+} %}
+	{% block list__item__content %}
+		{{- list__item -}}
+	{% endblock %}
+{% endembed %}
diff --git a/src/components/navigation/social/_social-list.twig b/src/components/navigation/social/_social-list.twig
new file mode 100644
index 0000000..ae543d1
--- /dev/null
+++ b/src/components/navigation/social/_social-list.twig
@@ -0,0 +1,20 @@
+{% set item__blockname = menu__base_class %}
+
+{% set menu__item %}
+{% block menu__item__content %}
+	{% for item in items %}
+		{% include "@components/navigation/social/_social-item.twig" %}
+	{% endfor %}
+{% endblock %}
+{% endset %}
+
+{# List #}
+{% embed "@components/lists/list.twig" with {
+  list__base_class: 'menu-list',
+  list__blockname: menu__base_class,
+  list__type: menu__list__type,
+}%}
+  {% block list__content %}
+    {{ menu__item }}
+  {% endblock %}
+{% endembed %}
diff --git a/src/components/navigation/social/social.component.yml b/src/components/navigation/social/social.component.yml
new file mode 100644
index 0000000..df17890
--- /dev/null
+++ b/src/components/navigation/social/social.component.yml
@@ -0,0 +1,27 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Social Menu
+group: Components/Navigation
+status: stable
+props:
+  type: object
+  required:
+    - items
+  properties:
+    items:
+      type: array
+      title: Social menu items
+      description: The items of the social menu.
+      data:
+        - title: 'Twitter'
+          url: '#'
+          icon: 'twitter'
+        - title: 'Facebook'
+          url: '#'
+          icon: 'facebook'
+        - title: 'Instagram'
+          url: '#'
+          icon: 'instagram'
+        - title: 'LinkedIn'
+          url: '#'
+          icon: 'linkedin'
diff --git a/src/components/navigation/social/social.scss b/src/components/navigation/social/social.scss
new file mode 100644
index 0000000..7284a93
--- /dev/null
+++ b/src/components/navigation/social/social.scss
@@ -0,0 +1,35 @@
+@use '../../../foundation/utility/utility' as *;
+@use '../../link/link.scss' as *;
+
+.social-nav__menu-list {
+  @include list-reset;
+
+  & {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: var(--spacing-md);
+  }
+}
+
+.social-nav__link {
+  @include link;
+
+  & {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: var(--spacing-sm);
+    text-decoration: none;
+  }
+
+  &:focus,
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.social-nav__icon {
+  height: var(--size-xl);
+  width: var(--size-xl);
+  fill: currentColor;
+}
diff --git a/src/components/navigation/social/social.stories.js b/src/components/navigation/social/social.stories.js
new file mode 100644
index 0000000..8f1c054
--- /dev/null
+++ b/src/components/navigation/social/social.stories.js
@@ -0,0 +1,13 @@
+// Markup.
+import socialNavTwig from './social.twig';
+import socialNavDataProps from './social.component.yml';
+
+// Data.
+const socialNavData = socialNavDataProps.props.properties.items.data;
+
+/**
+ * Storybook Definition.
+ */
+export default { title: 'Components/Navigation/Social' };
+
+export const social = () => socialNavTwig({ items: socialNavData });
diff --git a/src/components/navigation/social/social.twig b/src/components/navigation/social/social.twig
new file mode 100644
index 0000000..bd3648e
--- /dev/null
+++ b/src/components/navigation/social/social.twig
@@ -0,0 +1,8 @@
+{% embed "@components/navigation/base/menu.twig" with {
+  menu__name: 'Social Navigation',
+  menu__base_class: 'social-nav',
+} %}
+  {% block menu_list__content %}
+    {% include "@components/navigation/social/_social-list.twig" %}
+  {% endblock %}
+{% endembed %}

From 637322bb226107c62384641aaf747dd2c6f98b8f Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Mon, 16 Sep 2024 12:47:47 -0500
Subject: [PATCH 04/44] feat: resort pager navigation

---
 src/components/docs/cover/cover.twig          |  1 -
 .../docs/examples/assets/_footer.twig         |  4 +-
 .../docs/examples/assets/_header.twig         |  2 +-
 src/components/menus/_menu-item.twig          | 44 ---------
 src/components/menus/_menu-list.twig          | 15 ---
 src/components/menus/_menu.twig               | 45 ---------
 .../breadcrumbs/breadcrumbs.component.yml     | 20 ----
 .../menus/breadcrumbs/breadcrumbs.scss        | 39 --------
 .../menus/breadcrumbs/breadcrumbs.twig        | 27 ------
 .../menus/inline/inline-menu.component.yml    | 21 -----
 src/components/menus/inline/inline-menu.scss  | 21 -----
 src/components/menus/inline/inline-menu.twig  |  4 -
 .../menus/main-menu/_00-main-menu.scss        | 91 -------------------
 .../menus/main-menu/_01-main-menu-item.scss   | 73 ---------------
 .../menus/main-menu/_02-main-menu-link.scss   | 56 ------------
 .../menus/main-menu/_03-main-menu-toggle.scss | 68 --------------
 .../menus/main-menu/main-menu.component.yml   | 53 -----------
 src/components/menus/main-menu/main-menu.js   | 27 ------
 src/components/menus/main-menu/main-menu.scss |  4 -
 src/components/menus/main-menu/main-menu.twig | 23 -----
 src/components/menus/menus.stories.js         | 31 -------
 .../menus/social-menu/_social-menu-item.twig  |  8 --
 .../menus/social-menu/_social-menu-link.twig  | 13 ---
 .../social-menu/social-menu.component.yml     | 27 ------
 .../menus/social-menu/social-menu.scss        | 35 -------
 .../menus/social-menu/social-menu.twig        | 13 ---
 .../pager/pager-both-ellipses.component.yml   |  0
 .../pager/pager-first-last.component.yml      |  0
 .../pager/pager-next-ellipses.component.yml   |  0
 .../pager/pager-prev-ellipses.component.yml   |  0
 .../pager/pager.component.yml                 |  0
 .../{ => navigation}/pager/pager.scss         |  4 +-
 .../{ => navigation}/pager/pager.stories.js   |  4 +-
 .../{ => navigation}/pager/pager.twig         |  0
 34 files changed, 7 insertions(+), 766 deletions(-)
 delete mode 100644 src/components/menus/_menu-item.twig
 delete mode 100644 src/components/menus/_menu-list.twig
 delete mode 100644 src/components/menus/_menu.twig
 delete mode 100644 src/components/menus/breadcrumbs/breadcrumbs.component.yml
 delete mode 100644 src/components/menus/breadcrumbs/breadcrumbs.scss
 delete mode 100644 src/components/menus/breadcrumbs/breadcrumbs.twig
 delete mode 100644 src/components/menus/inline/inline-menu.component.yml
 delete mode 100644 src/components/menus/inline/inline-menu.scss
 delete mode 100644 src/components/menus/inline/inline-menu.twig
 delete mode 100644 src/components/menus/main-menu/_00-main-menu.scss
 delete mode 100644 src/components/menus/main-menu/_01-main-menu-item.scss
 delete mode 100644 src/components/menus/main-menu/_02-main-menu-link.scss
 delete mode 100644 src/components/menus/main-menu/_03-main-menu-toggle.scss
 delete mode 100644 src/components/menus/main-menu/main-menu.component.yml
 delete mode 100644 src/components/menus/main-menu/main-menu.js
 delete mode 100644 src/components/menus/main-menu/main-menu.scss
 delete mode 100644 src/components/menus/main-menu/main-menu.twig
 delete mode 100644 src/components/menus/menus.stories.js
 delete mode 100644 src/components/menus/social-menu/_social-menu-item.twig
 delete mode 100644 src/components/menus/social-menu/_social-menu-link.twig
 delete mode 100644 src/components/menus/social-menu/social-menu.component.yml
 delete mode 100644 src/components/menus/social-menu/social-menu.scss
 delete mode 100644 src/components/menus/social-menu/social-menu.twig
 rename src/components/{ => navigation}/pager/pager-both-ellipses.component.yml (100%)
 rename src/components/{ => navigation}/pager/pager-first-last.component.yml (100%)
 rename src/components/{ => navigation}/pager/pager-next-ellipses.component.yml (100%)
 rename src/components/{ => navigation}/pager/pager-prev-ellipses.component.yml (100%)
 rename src/components/{ => navigation}/pager/pager.component.yml (100%)
 rename src/components/{ => navigation}/pager/pager.scss (87%)
 rename src/components/{ => navigation}/pager/pager.stories.js (90%)
 rename src/components/{ => navigation}/pager/pager.twig (100%)

diff --git a/src/components/docs/cover/cover.twig b/src/components/docs/cover/cover.twig
index 1274348..74f07cb 100644
--- a/src/components/docs/cover/cover.twig
+++ b/src/components/docs/cover/cover.twig
@@ -1,7 +1,6 @@
 <div class="sb-cover" style="background-image: url({{_context.backgroundImage}})">
 
 	<h1 class="sb-cover__title">
-		<span class="sb_lozenge">BETA</span>
 		Emulsify UI Kit
 	</h1>
 	<p style="display: flex; gap: var(--spacing-lg);">
diff --git a/src/components/docs/examples/assets/_footer.twig b/src/components/docs/examples/assets/_footer.twig
index 97850d6..8b780a4 100644
--- a/src/components/docs/examples/assets/_footer.twig
+++ b/src/components/docs/examples/assets/_footer.twig
@@ -1,12 +1,12 @@
 <footer class="footer">
 	<div class="footer-content">
 		{% include "@components/docs/examples/assets/_logo.twig" %}
-		{% embed "@components/menus/social-menu/social-menu.twig" with {
+		{% embed "@components/navigation/social/social.twig" with {
 			menu_modifiers: ['footer']	
 		}%}
 			{% block list__content %}
 				{% for item in data.social_menu_items %}
-					{% include "@components/menus/social-menu/_social-menu-item.twig" %}
+					{% include "@components/navigation/social/_social-item.twig" %}
 				{% endfor %}
 			{% endblock %}
 		{% endembed %}
diff --git a/src/components/docs/examples/assets/_header.twig b/src/components/docs/examples/assets/_header.twig
index a712439..1c86fdc 100644
--- a/src/components/docs/examples/assets/_header.twig
+++ b/src/components/docs/examples/assets/_header.twig
@@ -1,5 +1,5 @@
 <header class="header">
 	{% include "@components/docs/examples/assets/_logo.twig" %}
-	{% include "@components/menus/main-menu/main-menu.twig" %}
+	{% include "@components/navigation/main/main.twig" %}
 	{% include "@components/button/button.twig" with { button__content: 'Donate' } %}
 </header>
diff --git a/src/components/menus/_menu-item.twig b/src/components/menus/_menu-item.twig
deleted file mode 100644
index 71afde7..0000000
--- a/src/components/menus/_menu-item.twig
+++ /dev/null
@@ -1,44 +0,0 @@
-{% if not item_modifiers %}
-	{% set item_modifiers = [] %}
-{% endif %}
-{# Pass original item modifiers down to children #}
-{% set original_item_modifiers = item_modifiers %}
-{% if item.in_active_trail == TRUE %}
-	{% set item_modifiers = item_modifiers|merge(['active']) %}
-{% endif %}
-{% if menu_level > 0 %}
-	{% set item_modifiers = item_modifiers|merge(['sub', 'sub-' ~ menu_level]) %}
-{% endif %}
-{% if item.below %}
-	{% set item_modifiers = item_modifiers|merge(['with-sub']) %}
-{% endif %}
-{# below could maybe be done without a loop? #}
-{% for modifier in item.modifiers %}
-	{% set item_modifiers = item_modifiers|merge([modifier]) %}
-{% endfor %}
-
-{% set list_item_label = item_label %}
-{% set list__item__base_class = item_base_class|default(menu_class ~ '__item') %}
-{% set list__item__modifiers = item_modifiers %}
-{% set list__item__blockname = item_blockname %}
-
-{% import "@components/menus/_menu.twig" as menus %}
-
-{% extends "@components/lists/_list-item.twig" %}
-{% block list__item__content %}
-	{# if drupal #}
-	{% if directory %}
-		{{ link(item.title, item.url, bem(item_base_class|default(menu_class ~ '__link'), item_modifiers)) }}
-	{% else %}
-		{% include "@components/link/link.twig" with {
-        link__content: item.title,
-        link__url: item.url,
-        link__base_class: item_base_class|default(menu_class ~ '__link'),
-        link__modifiers: item_modifiers,
-      } %}
-	{% endif %}
-	{% if item.below %}
-		<span class="expand-sub"></span>
-		{{ menus.menu_links(item.below, attributes, menu_level + 1, menu_class, menu_modifiers, menu_blockname, item_base_class, original_item_modifiers, item_blockname, directory) }}
-	{% endif %}
-{% endblock %}
diff --git a/src/components/menus/_menu-list.twig b/src/components/menus/_menu-list.twig
deleted file mode 100644
index 5d0845f..0000000
--- a/src/components/menus/_menu-list.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-{% set list__base_class = menu_class %}
-{% set list__modifiers = menu_modifiers %}
-{% set list__blockname = menu_blockname %}
-
-{# List #}
-{% extends "@components/lists/list.twig" %}
-{% block list__content %}
-	{% for item in items %}
-		{% include "@components/menus/_menu-item.twig" with {
-      list__item__base_class: item_base_class,
-      list__item__modifiers: item_modifiers,
-      list__item__blockname: item_blockname,
-    } %}
-	{% endfor %}
-{% endblock %}
diff --git a/src/components/menus/_menu.twig b/src/components/menus/_menu.twig
deleted file mode 100644
index 1384455..0000000
--- a/src/components/menus/_menu.twig
+++ /dev/null
@@ -1,45 +0,0 @@
-{#
-/**
- * @file
- * Theme override to display a menu.
- *
- * Available variables:
- * - menu_name: The machine name of the menu.
- * - items: A nested list of menu items. Each menu item contains:
- *   - attributes: HTML attributes for the menu item.
- *   - below: The menu item child items.
- *   - title: The menu link title.
- *   - url: The menu link url, instance of \Drupal\Core\Url
- *   - localized_options: Menu link localized options.
- *   - is_expanded: TRUE if the link has visible children within the current
- *     menu tree.
- *   - is_collapsed: TRUE if the link has children within the current menu tree
- *     that are not currently visible.
- *   - in_active_trail: TRUE if the link is in the active trail.
- */
-#}
-
-{#
-  We call a macro which calls itself to render the full tree.
-  @see http://twig.sensiolabs.org/doc/tags/macro.html
-#}
-{% macro menu_links(items, attributes, menu_level, menu_class, menu_modifiers, menu_blockname, item_base_class, item_modifiers, item_blockname, directory) %}
-  {% import _self as menus %}
-  {% if items %}
-
-    {# Set classes #}
-    {% set menu_class = menu_class|default('menu') %}
-    {% if not menu_modifiers %}
-      {% set menu_modifiers = [] %}
-    {% endif %}
-    {% if menu_level > 0 %}
-      {% set menu_modifiers = menu_modifiers|merge(['sub', 'sub-' ~ menu_level]) %}
-    {% endif %}
-
-    {% include "@components/menus/_menu-list.twig" %}
-  {% endif %}
-{% endmacro %}
-
-{% import _self as menus %}
-
-{{ menus.menu_links(items, attributes, 0, menu_class, menu_modifiers, menu_blockname, item_base_class, item_modifiers, item_blockname, directory) }}
diff --git a/src/components/menus/breadcrumbs/breadcrumbs.component.yml b/src/components/menus/breadcrumbs/breadcrumbs.component.yml
deleted file mode 100644
index 299cb31..0000000
--- a/src/components/menus/breadcrumbs/breadcrumbs.component.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
-
-name: Breadcrumbs
-group: Components/Menus
-status: stable
-props:
-  type: object
-  required:
-    - breadcrumb
-  properties:
-    breadcrumb:
-      type: array
-      title: Breadcrumb items
-      description: The items of the breadcrumb.
-      data:
-        - url: '#'
-          text: 'Home'
-        - url: '#'
-          text: 'Parent Page'
-        - text: 'Current Page'
diff --git a/src/components/menus/breadcrumbs/breadcrumbs.scss b/src/components/menus/breadcrumbs/breadcrumbs.scss
deleted file mode 100644
index 8faae34..0000000
--- a/src/components/menus/breadcrumbs/breadcrumbs.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@use '../../../foundation/utility/utility' as *;
-
-.breadcrumb {
-  @include list-reset;
-}
-
-.breadcrumb__item,
-.breadcrumb__link,
-.breadcrumb__link:link,
-.breadcrumb__link:visited,
-.breadcrumb__link:focus {
-  color: var(--breadcrumb-text-default);
-  text-decoration: none;
-}
-
-.breadcrumb__link:hover {
-  color: var(--breadcrumb-text-hover);
-}
-
-.breadcrumb__item {
-  display: inline-block;
-  font-size: 0.75rem;
-
-  &::after {
-    content: '/';
-  }
-
-  &:last-child {
-    color: var(--breadcrumb-text-default);
-
-    &::after {
-      content: '';
-    }
-  }
-}
-
-.breadcrumb_link:active {
-  color: var(--breadcrumb-text-default);
-}
diff --git a/src/components/menus/breadcrumbs/breadcrumbs.twig b/src/components/menus/breadcrumbs/breadcrumbs.twig
deleted file mode 100644
index 6ce88dc..0000000
--- a/src/components/menus/breadcrumbs/breadcrumbs.twig
+++ /dev/null
@@ -1,27 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a breadcrumb trail.
- *
- * Available variables:
- * - breadcrumb: Breadcrumb trail items.
- */
-#}
-{% set breadcrumb__base_class = 'breadcrumb' %}
-
-{% if breadcrumb %}
-  <nav role='navigation' aria-labelledby='system-breadcrumb'>
-    <h2 {{ bem('visually-hidden') }} id='system-breadcrumb'>{{ 'Breadcrumb'|t }}</h2>
-    <ol {{ bem(breadcrumb__base_class) }}>
-    {% for item in breadcrumb %}
-      <li {{ bem('item', [], breadcrumb__base_class) }}>
-        {% if item.url %}
-          <a {{ bem('link', [], breadcrumb__base_class) }} href="{{ item.url }}">{{ item.text }}</a>
-        {% else %}
-          {{ item.text }}
-        {% endif %}
-      </li>
-    {% endfor %}
-    </ol>
-  </nav>
-{% endif %}
diff --git a/src/components/menus/inline/inline-menu.component.yml b/src/components/menus/inline/inline-menu.component.yml
deleted file mode 100644
index 8295fca..0000000
--- a/src/components/menus/inline/inline-menu.component.yml
+++ /dev/null
@@ -1,21 +0,0 @@
-$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
-
-name: Inline Menu
-group: Components/Menus
-status: stable
-props:
-  type: object
-  required:
-    - inline_menu_items
-  properties:
-    inline_menu_items:
-      type: array
-      title: Inline menu items
-      description: The items of the inline menu.
-      data:
-        - title: 'Test'
-          url: '#'
-        - title: 'Number 2'
-          url: '#'
-        - title: 'Item Number 3'
-          url: '#'
diff --git a/src/components/menus/inline/inline-menu.scss b/src/components/menus/inline/inline-menu.scss
deleted file mode 100644
index fa297f8..0000000
--- a/src/components/menus/inline/inline-menu.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use '../../../foundation/breakpoints/breakpoints' as *;
-@use '../../../foundation/utility/utility' as *;
-@use '../../link/link.scss' as *;
-
-.inline-menu {
-  @include list-reset;
-
-  display: flex;
-  flex-flow: column wrap;
-  gap: var(--spacing-md);
-
-  @include breakpoint('medium') {
-    flex-flow: row wrap;
-    gap: var(--spacing-lg);
-    margin-bottom: 1em;
-  }
-}
-
-.inline-menu__link {
-  @include link;
-}
diff --git a/src/components/menus/inline/inline-menu.twig b/src/components/menus/inline/inline-menu.twig
deleted file mode 100644
index 988b13f..0000000
--- a/src/components/menus/inline/inline-menu.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{% include "@components/menus/_menu.twig" with {
-  menu_class: 'inline-menu',
-  items: inline_menu_items,
-} %}
diff --git a/src/components/menus/main-menu/_00-main-menu.scss b/src/components/menus/main-menu/_00-main-menu.scss
deleted file mode 100644
index dd91081..0000000
--- a/src/components/menus/main-menu/_00-main-menu.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@use '../../../foundation/breakpoints/breakpoints' as *;
-@use '../../../foundation/utility/utility' as *;
-
-/* Nav */
-.main-nav {
-  display: none;
-
-  @include breakpoint('medium') {
-    display: flex;
-    flex-flow: row nowrap;
-    gap: var(--spacing-md);
-  }
-
-  &--open {
-    background-color: clr(background);
-    display: block;
-    left: 0;
-    overflow-y: scroll;
-    position: absolute;
-    top: 134px;
-    right: 0;
-    width: 100%;
-  }
-}
-
-/* UL */
-.main-menu {
-  @include list-reset;
-
-  & {
-    border-bottom: 1px solid;
-    position: relative;
-    z-index: 10;
-  }
-
-  @include breakpoint('medium') {
-    border-bottom: none;
-  }
-}
-
-/*
- * Sub Navigation
- */
-
-/* UL (Nested) */
-.main-menu--sub {
-  border-bottom: none;
-  height: 0;
-  overflow: hidden;
-  background-color: var(--main-menu-color-dropdown-bg);
-  width: 100%;
-
-  @include breakpoint('medium') {
-    display: none;
-    height: auto;
-    left: 0;
-    overflow: visible;
-    padding: var(--spacing-sm) 0;
-    position: absolute;
-    top: 37px;
-    width: 315px;
-    z-index: 1;
-    font-size: 0.9rem;
-  }
-
-  &:hover {
-    @include breakpoint('medium') {
-      .main-menu__link--sub {
-        &.active,
-        &:active,
-        &:hover {
-          color: clr(background);
-          background-color: clr(accent-high);
-        }
-      }
-    }
-  }
-
-  /* See main-menu.js */
-  &-open {
-    height: auto;
-  }
-}
-
-.main-menu--sub-2 {
-  @include breakpoint('medium') {
-    display: none;
-
-    /* Never shown on large screens */
-  }
-}
diff --git a/src/components/menus/main-menu/_01-main-menu-item.scss b/src/components/menus/main-menu/_01-main-menu-item.scss
deleted file mode 100644
index 263bd5a..0000000
--- a/src/components/menus/main-menu/_01-main-menu-item.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-@use '../../../foundation/breakpoints/breakpoints' as *;
-
-.main-menu__item {
-  border-top: 1px solid;
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-
-  @include breakpoint('medium') {
-    border-top: none;
-    display: inline-block;
-
-    /* Only top level */
-    &:not(.main-menu__item--sub):hover {
-      background-color: var(--main-menu-color-link-bg);
-
-      & > .main-menu--sub {
-        display: block;
-      }
-    }
-  }
-
-  &:hover {
-    .main-menu__link::after {
-      color: var(--main-menu-color-link-label-hover);
-    }
-  }
-}
-
-.main-menu__item--with-sub:hover > a {
-  background: var(--main-menu-color-link-bg-hover);
-  color: var(--main-menu-color-link-label-hover);
-}
-
-/* Expand Button */
-.expand-sub {
-  background-color: var(--main-menu-color-link-bg);
-  cursor: pointer;
-  display: block;
-  width: 20%;
-  color: var(--main-menu-color-link-label);
-  position: relative;
-
-  @include breakpoint('medium') {
-    display: none;
-  }
-
-  /* Down triangle */
-  &::after {
-    border: 15px solid;
-    border-bottom-color: transparent;
-    border-left: 12px solid transparent;
-    border-right: 12px solid transparent;
-    content: '';
-    display: block;
-    position: absolute;
-    right: 50%;
-    top: 50%;
-    width: 0;
-  }
-
-  /* See main-menu.js */
-  &--open {
-    background-color: var(--main-menu-color-link-bg);
-    color: var(--main-menu-color-link-label);
-
-    &::after {
-      border-top-color: transparent;
-      border-bottom: 15px solid;
-      margin-top: -20px;
-    }
-  }
-}
diff --git a/src/components/menus/main-menu/_02-main-menu-link.scss b/src/components/menus/main-menu/_02-main-menu-link.scss
deleted file mode 100644
index 537de9f..0000000
--- a/src/components/menus/main-menu/_02-main-menu-link.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@use '../../../foundation/breakpoints/breakpoints' as *;
-
-.main-menu__link {
-  background: var(--main-menu-color-link-bg);
-  color: var(--main-menu-color-link-label);
-  display: block;
-  font-size: var(--font-size-h5);
-  line-height: var(--line-heights-none);
-  padding: var(--spacing-md) var(--spacing-lg);
-  text-decoration: none;
-  font-weight: bold;
-  text-transform: uppercase;
-
-  @include breakpoint('medium') {
-    border-bottom: none;
-    display: inline-block;
-    position: relative;
-    width: auto;
-
-    &.active,
-    &:active,
-    &:hover {
-      background: var(--main-menu-color-link-bg-hover);
-      color: var(--main-menu-color-link-label-hover);
-    }
-  }
-}
-
-/*
- * Sub Navigation Links
- */
-.main-menu__link--sub {
-  background-color: var(--main-menu-color-dropdown-bg);
-  color: var(--main-menu-color-dropdown-label);
-  font-size: var(--font-size-small);
-  padding: var(--spacing-md) var(--spacing-lg);
-  font-weight: bold;
-
-  @include breakpoint('medium') {
-    color: var(--main-menu-color-dropdown-label);
-    display: block;
-  }
-
-  &:hover {
-    background-color: var(--main-menu-color-dropdown-bg-hover);
-    color: var(--main-menu-color-dropdown-label-hover);
-  }
-}
-
-.main-menu--sub-2 {
-  background-color: var(--main-menu-color-dropdown-bg);
-}
-
-.main-menu__link--sub-2 {
-  padding-left: var(--spacing-sm);
-}
diff --git a/src/components/menus/main-menu/_03-main-menu-toggle.scss b/src/components/menus/main-menu/_03-main-menu-toggle.scss
deleted file mode 100644
index 1019746..0000000
--- a/src/components/menus/main-menu/_03-main-menu-toggle.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@use '../../../foundation/breakpoints/breakpoints' as *;
-@use '../../link/link.scss' as *;
-
-/* Toggle */
-.toggle-expand {
-  @include link;
-
-  & {
-    background: red;
-    display: flex;
-    display: inline-block;
-    padding: var(--spacing-sm);
-    text-decoration: none;
-    width: 100%;
-  }
-
-  @include breakpoint('medium') {
-    display: none;
-  }
-
-  /* See main-menu.js */
-  &--open {
-    background-color: clr(accent);
-  }
-}
-
-.toggle-expand__text {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: bold;
-
-  .toggle-expand--open & {
-    color: clr(background);
-  }
-}
-
-/* SVG icon */
-.toggle-expand__icon {
-  height: 3rem;
-  width: 3rem;
-  margin: 0 auto;
-}
-
-.toggle-expand__open {
-  display: inline-block;
-  text-align: center;
-
-  .toggle-expand--open & {
-    display: none;
-  }
-}
-
-.toggle-expand__close {
-  display: none;
-  text-align: center;
-
-  &::before {
-    color: clr(background);
-    content: 'X';
-    display: block;
-    font-size: 2.5rem;
-    line-height: 2;
-  }
-
-  .toggle-expand--open & {
-    display: inline-block;
-  }
-}
diff --git a/src/components/menus/main-menu/main-menu.component.yml b/src/components/menus/main-menu/main-menu.component.yml
deleted file mode 100644
index 82fd43f..0000000
--- a/src/components/menus/main-menu/main-menu.component.yml
+++ /dev/null
@@ -1,53 +0,0 @@
-$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
-
-name: Main Menu
-group: Components/Menus
-status: stable
-props:
-  type: object
-  required:
-    - menu_items
-  properties:
-    menu_items:
-      type: array
-      title: Main menu items
-      description: The items of the main menu.
-      data:
-        - title: 'Academics'
-          url: '#'
-          below:
-            - title: 'Menu Item 1 Sub 1'
-              url: '#'
-            - title: 'Menu Item 1 Sub 2'
-              url: '#'
-              below:
-                - title: 'Menu Item 1 Sub Sub 1'
-                  url: '#'
-                - title: 'Menu Item 1 Sub Sub 2'
-                  url: '#'
-            - title: 'Menu Item 1 Sub 3'
-              url: '#'
-            - title: 'Menu Item 1 Sub 4'
-              url: '#'
-        - title: 'Admissions'
-          url: '#'
-          below:
-            - title: 'Menu Item 2 Sub 1'
-              url: '#'
-            - title: 'Menu Item 2 Sub 2'
-              url: '#'
-            - title: 'Menu Item 2 Sub 3'
-              url: '#'
-        - title: 'Research'
-          url: '#'
-          below:
-            - title: 'Menu Item 3 Sub 1'
-              url: '#'
-            - title: 'Menu Item 3 Sub 2'
-              url: '#'
-            - title: 'Menu Item 3 Sub 3'
-              url: '#'
-            - title: 'Menu Item 3 Sub 4'
-              url: '#'
-        - title: 'About'
-          url: '#'
diff --git a/src/components/menus/main-menu/main-menu.js b/src/components/menus/main-menu/main-menu.js
deleted file mode 100644
index b9117f7..0000000
--- a/src/components/menus/main-menu/main-menu.js
+++ /dev/null
@@ -1,27 +0,0 @@
-Drupal.behaviors.mainMenu = {
-  attach(context) {
-    const toggleExpand = context.getElementById('toggle-expand');
-    const menu = context.getElementById('main-nav');
-    if (menu) {
-      const expandMenu = menu.getElementsByClassName('expand-sub');
-
-      // Mobile Menu Show/Hide.
-      toggleExpand.addEventListener('click', (e) => {
-        toggleExpand.classList.toggle('toggle-expand--open');
-        menu.classList.toggle('main-nav--open');
-        e.preventDefault();
-      });
-
-      // Expose mobile sub menu on click.
-      Array.from(expandMenu).forEach((item) => {
-        item.addEventListener('click', (e) => {
-          const menuItem = e.currentTarget;
-          const subMenu = menuItem.nextElementSibling;
-
-          menuItem.classList.toggle('expand-sub--open');
-          subMenu.classList.toggle('main-menu--sub-open');
-        });
-      });
-    }
-  },
-};
diff --git a/src/components/menus/main-menu/main-menu.scss b/src/components/menus/main-menu/main-menu.scss
deleted file mode 100644
index 3830955..0000000
--- a/src/components/menus/main-menu/main-menu.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@forward './00-main-menu';
-@forward './01-main-menu-item';
-@forward './02-main-menu-link';
-@forward './03-main-menu-toggle';
diff --git a/src/components/menus/main-menu/main-menu.twig b/src/components/menus/main-menu/main-menu.twig
deleted file mode 100644
index 7581090..0000000
--- a/src/components/menus/main-menu/main-menu.twig
+++ /dev/null
@@ -1,23 +0,0 @@
-{{ attach_library('emulsify/main-menu') }}
-
-<nav>
-	<a href="#" id="toggle-expand" class="toggle-expand">
-		<span class="toggle-expand__open">
-			{% include "@components/icons/_icon.twig" with {
-        icon__base_class: "icon",
-        icon__blockname: "toggle-expand",
-        icon__name: "menu",
-      } %}
-			<span class="toggle-expand__text">Menu</span>
-		</span>
-		<span class="toggle-expand__close">
-			<span class="toggle-expand__text">Close</span>
-		</span>
-	</a>
-	<div id="main-nav" class="main-nav">
-		{% include "@components/menus/_menu.twig" with {
-      menu_class: "main-menu",
-      items: menu_items,
-    } %}
-	</div>
-</nav>
diff --git a/src/components/menus/menus.stories.js b/src/components/menus/menus.stories.js
deleted file mode 100644
index 6c52e3d..0000000
--- a/src/components/menus/menus.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import breadcrumb from './breadcrumbs/breadcrumbs.twig';
-import inlineMenu from './inline/inline-menu.twig';
-import mainMenu from './main-menu/main-menu.twig';
-import socialMenu from './social-menu/social-menu.twig';
-
-import breadcrumbsDataProps from './breadcrumbs/breadcrumbs.component.yml';
-import inlineMenuDataProps from './inline/inline-menu.component.yml';
-import mainMenuDataProps from './main-menu/main-menu.component.yml';
-import socialMenuDataProps from './social-menu/social-menu.component.yml';
-
-import './main-menu/main-menu';
-
-const breadcrumbsData = breadcrumbsDataProps.props.properties.breadcrumb.data;
-const inlineMenuData =
-  inlineMenuDataProps.props.properties.inline_menu_items.data;
-const mainMenuData = mainMenuDataProps.props.properties.menu_items.data;
-const socialMenuData =
-  socialMenuDataProps.props.properties.social_menu_items.data;
-
-/**
- * Storybook Definition.
- */
-export default { title: 'Components/Menus' };
-
-export const breadcrumbs = () => breadcrumb({ breadcrumb: breadcrumbsData });
-
-export const inline = () => inlineMenu({ inline_menu_items: inlineMenuData });
-
-export const main = () => mainMenu({ menu_items: mainMenuData });
-
-export const social = () => socialMenu({ social_menu_items: socialMenuData });
diff --git a/src/components/menus/social-menu/_social-menu-item.twig b/src/components/menus/social-menu/_social-menu-item.twig
deleted file mode 100644
index 67ed680..0000000
--- a/src/components/menus/social-menu/_social-menu-item.twig
+++ /dev/null
@@ -1,8 +0,0 @@
-{% set list__item__base_class = 'item' %}
-{% set list__item__modifiers = item_modifiers %}
-{% set list__item__blockname = menu_class %}
-
-{% extends "@components/lists/_list-item.twig" %}
-{% block list__item__content %}
-	{% include "@components/menus/social-menu/_social-menu-link.twig" %}
-{% endblock %}
diff --git a/src/components/menus/social-menu/_social-menu-link.twig b/src/components/menus/social-menu/_social-menu-link.twig
deleted file mode 100644
index 0177bfe..0000000
--- a/src/components/menus/social-menu/_social-menu-link.twig
+++ /dev/null
@@ -1,13 +0,0 @@
-{% set link_url = item.url %}
-{% set link_base_class = 'link' %}
-{% set link_modifiers = item_modifiers %}
-{% set link_blockname = menu_class %}
-
-{% extends "@components/link/link.twig" %}
-{% block link__content %}
-	{% include "@components/icons/_icon.twig" with {
-    icon__name: item.icon,
-    icon__blockname: menu_class,
-  } %}
-	<span {{ bem('text', [], menu_class) }}>{{ item.title }}</span>
-{% endblock %}
diff --git a/src/components/menus/social-menu/social-menu.component.yml b/src/components/menus/social-menu/social-menu.component.yml
deleted file mode 100644
index bff6d85..0000000
--- a/src/components/menus/social-menu/social-menu.component.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
-
-name: Social Menu
-group: Components/Menus
-status: stable
-props:
-  type: object
-  required:
-    - social_menu_items
-  properties:
-    social_menu_items:
-      type: array
-      title: Social menu items
-      description: The items of the social menu.
-      data:
-        - title: 'Twitter'
-          url: '#'
-          icon: 'twitter'
-        - title: 'Facebook'
-          url: '#'
-          icon: 'facebook'
-        - title: 'Instagram'
-          url: '#'
-          icon: 'instagram'
-        - title: 'LinkedIn'
-          url: '#'
-          icon: 'linkedin'
diff --git a/src/components/menus/social-menu/social-menu.scss b/src/components/menus/social-menu/social-menu.scss
deleted file mode 100644
index 79ab8bc..0000000
--- a/src/components/menus/social-menu/social-menu.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@use '../../../foundation/utility/utility' as *;
-@use '../../link/link.scss' as *;
-
-.social-menu {
-  @include list-reset;
-
-  & {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: var(--spacing-sm);
-  }
-}
-
-.social-menu__link {
-  @include link;
-
-  & {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    gap: var(--spacing-sm);
-    text-decoration: none;
-  }
-
-  &:focus,
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.social-menu__icon {
-  height: var(--size-lg);
-  width: var(--size-lg);
-  fill: currentColor;
-}
diff --git a/src/components/menus/social-menu/social-menu.twig b/src/components/menus/social-menu/social-menu.twig
deleted file mode 100644
index bbf2375..0000000
--- a/src/components/menus/social-menu/social-menu.twig
+++ /dev/null
@@ -1,13 +0,0 @@
-{# Set classes #}
-{% set menu_class = 'social-menu' %}
-{% set list__base_class = menu_class %}
-{% set list__modifiers = menu_modifiers %}
-{% set list__blockname = menu_blockname %}
-
-{# List #}
-{% extends "@components/lists/list.twig" %}
-{% block list__content %}
-	{% for item in social_menu_items %}
-		{% include "@components/menus/social-menu/_social-menu-item.twig" %}
-	{% endfor %}
-{% endblock %}
diff --git a/src/components/pager/pager-both-ellipses.component.yml b/src/components/navigation/pager/pager-both-ellipses.component.yml
similarity index 100%
rename from src/components/pager/pager-both-ellipses.component.yml
rename to src/components/navigation/pager/pager-both-ellipses.component.yml
diff --git a/src/components/pager/pager-first-last.component.yml b/src/components/navigation/pager/pager-first-last.component.yml
similarity index 100%
rename from src/components/pager/pager-first-last.component.yml
rename to src/components/navigation/pager/pager-first-last.component.yml
diff --git a/src/components/pager/pager-next-ellipses.component.yml b/src/components/navigation/pager/pager-next-ellipses.component.yml
similarity index 100%
rename from src/components/pager/pager-next-ellipses.component.yml
rename to src/components/navigation/pager/pager-next-ellipses.component.yml
diff --git a/src/components/pager/pager-prev-ellipses.component.yml b/src/components/navigation/pager/pager-prev-ellipses.component.yml
similarity index 100%
rename from src/components/pager/pager-prev-ellipses.component.yml
rename to src/components/navigation/pager/pager-prev-ellipses.component.yml
diff --git a/src/components/pager/pager.component.yml b/src/components/navigation/pager/pager.component.yml
similarity index 100%
rename from src/components/pager/pager.component.yml
rename to src/components/navigation/pager/pager.component.yml
diff --git a/src/components/pager/pager.scss b/src/components/navigation/pager/pager.scss
similarity index 87%
rename from src/components/pager/pager.scss
rename to src/components/navigation/pager/pager.scss
index 441816f..12e5eed 100644
--- a/src/components/pager/pager.scss
+++ b/src/components/navigation/pager/pager.scss
@@ -1,5 +1,5 @@
-@use '../../foundation/breakpoints/breakpoints' as *;
-@use '../../foundation/utility/utility' as *;
+@use '../../../foundation/breakpoints/breakpoints' as *;
+@use '../../../foundation/utility/utility' as *;
 
 .pager {
   margin: var(--spacing-xl) 0;
diff --git a/src/components/pager/pager.stories.js b/src/components/navigation/pager/pager.stories.js
similarity index 90%
rename from src/components/pager/pager.stories.js
rename to src/components/navigation/pager/pager.stories.js
index 4506fe6..392e7af 100644
--- a/src/components/pager/pager.stories.js
+++ b/src/components/navigation/pager/pager.stories.js
@@ -1,5 +1,5 @@
 import pagerTwig from './pager.twig';
-import { mapDataToTwig } from '../../util/dataTransformers.js';
+import { mapDataToTwig } from '../../../util/dataTransformers.js';
 
 import { props as pagerProps } from './pager.component.yml';
 import { props as pagerNextEllipsesProps } from './pager-next-ellipses.component.yml';
@@ -16,7 +16,7 @@ const pagerFirstLastData = mapDataToTwig(pagerFirstLastProps.properties);
 /**
  * Storybook Definition.
  */
-export default { title: 'Components/Pager' };
+export default { title: 'Components/Navigation/Pager' };
 
 export const basic = () => pagerTwig(pagerData);
 export const withNext = () => pagerTwig(pagerNextEllipsesData);
diff --git a/src/components/pager/pager.twig b/src/components/navigation/pager/pager.twig
similarity index 100%
rename from src/components/pager/pager.twig
rename to src/components/navigation/pager/pager.twig

From 71a60b0bdb35520d588d411f9048c0513d2c287c Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Mon, 16 Sep 2024 15:31:05 -0500
Subject: [PATCH 05/44] feat: resorted tokens components and fix type token
 stories:

---
 assets/icons/chevronDown.svg                  |   1 -
 assets/icons/chevronUp.svg                    |   1 -
 .../navigation/main/_main-link.scss           |   4 +-
 .../border-tokens/border-tokens.stories.js    |  18 -
 .../color-tokens/colorTokens.stories.js       |  11 -
 .../fontSize-tokens/font-sizes.stories.js     |  11 -
 .../tokens/size-tokens/size-tokens.stories.js |  18 -
 .../tokens/type-scale/type-scale.stories.js   |  18 -
 .../tokens/type-scale/type-scale.twig         |  15 -
 src/foundation/breakpoints/_breakpoints.scss  |   2 +-
 .../breakpoints/breakpoints.stories.js        |   9 -
 src/foundation/breakpoints/breakpoints.twig   |  16 -
 src/foundation/breakpoints/breakpoints.yml    |  16 -
 src/foundation/motion/_motion.scss            |  56 +-
 src/foundation/spacing/_spacing.scss          |  82 +--
 src/foundation/spacing/spacing.stories.js     |   9 -
 src/foundation/spacing/spacing.twig           |  27 -
 src/foundation/spacing/spacing.yml            |  66 ---
 src/foundation/typography/body-styles.twig    |  25 -
 src/foundation/typography/body-styles.yml     |   8 -
 src/foundation/typography/heading-styles.twig |  29 -
 src/foundation/typography/heading-styles.yml  |   6 -
 src/foundation/typography/type-faces.twig     |  15 -
 src/foundation/typography/type-faces.yml      |  28 -
 .../typography/typography.stories.js          |  23 -
 .../{functions => utility}/_rem-calc.scss     |   0
 src/foundation/utility/cl-base.scss           |   7 +-
 src/layout/container/_container.scss          |  40 +-
 src/layout/container/container-base.yml       |   1 -
 src/layout/container/container.stories.js     |  11 +-
 src/layout/grid/_grid.scss                    |  10 +-
 .../border-radius-tokens.stories.js           |   4 +-
 .../border-radius}/border-radius-tokens.twig  |   0
 src/tokens/borders/borders.stories.js         |  18 +
 .../borders/borders.twig}                     |   0
 .../breakpoints/breakpoint.stories.js}        |   6 +-
 .../breakpoints/breakpoints.twig}             |   0
 src/tokens/colors/color.stories.js            |  11 +
 .../colors/color.twig}                        |   0
 src/tokens/figma.tokens.json                  | 463 ++++++++++++++--
 .../tokens/line-height/line-height.stories.js |   6 +-
 .../tokens/line-height/line-height.twig       |   2 +-
 .../motion/cl-motion.scss                     |   2 +-
 .../motion/motion.stories.js                  |   2 +-
 src/{foundation => tokens}/motion/motion.twig |   0
 src/{foundation => tokens}/motion/motion.yml  |   0
 .../opacity/opacity.stories.js}               |   6 +-
 .../opacity/opacity.twig}                     |   0
 src/tokens/sizes/sizes.stories.js             |  18 +
 .../sizes/sizes.twig}                         |   0
 .../spacing/spacing.stories.js}               |   6 +-
 .../spacing/spacing.twig}                     |   0
 src/tokens/tokens.scss                        | 117 +++-
 src/tokens/transformed.tokens.json            | 504 ++++++++++++++++--
 src/tokens/type-faces/type-faces.stories.js   |  18 +
 src/tokens/type-faces/type-faces.twig         |  15 +
 src/tokens/type-scale/type-scale.stories.js   |  18 +
 .../type-scale/type-scale.twig}               |   2 +-
 58 files changed, 1132 insertions(+), 669 deletions(-)
 delete mode 100644 assets/icons/chevronDown.svg
 delete mode 100644 assets/icons/chevronUp.svg
 delete mode 100644 src/components/tokens/border-tokens/border-tokens.stories.js
 delete mode 100644 src/components/tokens/color-tokens/colorTokens.stories.js
 delete mode 100644 src/components/tokens/fontSize-tokens/font-sizes.stories.js
 delete mode 100644 src/components/tokens/size-tokens/size-tokens.stories.js
 delete mode 100644 src/components/tokens/type-scale/type-scale.stories.js
 delete mode 100644 src/components/tokens/type-scale/type-scale.twig
 delete mode 100644 src/foundation/breakpoints/breakpoints.stories.js
 delete mode 100644 src/foundation/breakpoints/breakpoints.twig
 delete mode 100644 src/foundation/breakpoints/breakpoints.yml
 delete mode 100644 src/foundation/spacing/spacing.stories.js
 delete mode 100644 src/foundation/spacing/spacing.twig
 delete mode 100644 src/foundation/spacing/spacing.yml
 delete mode 100644 src/foundation/typography/body-styles.twig
 delete mode 100644 src/foundation/typography/body-styles.yml
 delete mode 100644 src/foundation/typography/heading-styles.twig
 delete mode 100644 src/foundation/typography/heading-styles.yml
 delete mode 100644 src/foundation/typography/type-faces.twig
 delete mode 100644 src/foundation/typography/type-faces.yml
 delete mode 100644 src/foundation/typography/typography.stories.js
 rename src/foundation/{functions => utility}/_rem-calc.scss (100%)
 delete mode 100644 src/layout/container/container-base.yml
 rename src/{components/tokens/border-radius-tokens => tokens/border-radius}/border-radius-tokens.stories.js (72%)
 rename src/{components/tokens/border-radius-tokens => tokens/border-radius}/border-radius-tokens.twig (100%)
 create mode 100644 src/tokens/borders/borders.stories.js
 rename src/{components/tokens/border-tokens/border-tokens.twig => tokens/borders/borders.twig} (100%)
 rename src/{components/tokens/breakpoint-tokens/breakpoint-tokens.stories.js => tokens/breakpoints/breakpoint.stories.js} (60%)
 rename src/{components/tokens/breakpoint-tokens/breakpoint-tokens.twig => tokens/breakpoints/breakpoints.twig} (100%)
 create mode 100644 src/tokens/colors/color.stories.js
 rename src/{components/tokens/color-tokens/color-tokens.twig => tokens/colors/color.twig} (100%)
 rename src/{components => }/tokens/line-height/line-height.stories.js (60%)
 rename src/{components => }/tokens/line-height/line-height.twig (94%)
 rename src/{foundation => tokens}/motion/cl-motion.scss (97%)
 rename src/{foundation => tokens}/motion/motion.stories.js (83%)
 rename src/{foundation => tokens}/motion/motion.twig (100%)
 rename src/{foundation => tokens}/motion/motion.yml (100%)
 rename src/{components/tokens/opacity-tokens/opacity-tokens.stories.js => tokens/opacity/opacity.stories.js} (59%)
 rename src/{components/tokens/opacity-tokens/opacity-tokens.twig => tokens/opacity/opacity.twig} (100%)
 create mode 100644 src/tokens/sizes/sizes.stories.js
 rename src/{components/tokens/size-tokens/size-tokens.twig => tokens/sizes/sizes.twig} (100%)
 rename src/{components/tokens/spacing-tokens/spacing-tokens.stories.js => tokens/spacing/spacing.stories.js} (59%)
 rename src/{components/tokens/spacing-tokens/spacing-tokens.twig => tokens/spacing/spacing.twig} (100%)
 create mode 100644 src/tokens/type-faces/type-faces.stories.js
 create mode 100644 src/tokens/type-faces/type-faces.twig
 create mode 100644 src/tokens/type-scale/type-scale.stories.js
 rename src/{components/tokens/fontSize-tokens/_fontSizes.twig => tokens/type-scale/type-scale.twig} (92%)

diff --git a/assets/icons/chevronDown.svg b/assets/icons/chevronDown.svg
deleted file mode 100644
index 961a314..0000000
--- a/assets/icons/chevronDown.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M24 30.15q-.3 0-.55-.1-.25-.1-.5-.35l-9.9-9.9q-.4-.4-.375-1.075.025-.675.425-1.075.5-.5 1.075-.425.575.075 1.025.475l8.8 8.8 8.8-8.8q.4-.4 1.075-.45.675-.05 1.075.45.5.4.425 1.05-.075.65-.475 1.1l-9.85 9.85q-.25.25-.5.35-.25.1-.55.1Z"/></svg>
\ No newline at end of file
diff --git a/assets/icons/chevronUp.svg b/assets/icons/chevronUp.svg
deleted file mode 100644
index 749a8e6..0000000
--- a/assets/icons/chevronUp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M13.1 29.65q-.45-.45-.475-1.05-.025-.6.425-1.05l9.9-9.9q.25-.25.5-.35.25-.1.55-.1.3 0 .55.1.25.1.5.35l9.9 9.85q.45.4.45 1.025 0 .625-.45 1.075-.45.45-1.075.45T32.8 29.6L24 20.85l-8.8 8.85q-.4.45-1.025.425-.625-.025-1.075-.475Z"/></svg>
\ No newline at end of file
diff --git a/src/components/navigation/main/_main-link.scss b/src/components/navigation/main/_main-link.scss
index f9e8cab..d4e8b1b 100644
--- a/src/components/navigation/main/_main-link.scss
+++ b/src/components/navigation/main/_main-link.scss
@@ -98,13 +98,13 @@
 
   &[aria-current='page'],
   &.main-nav__link--active {
-    padding-left: space(1.5);
+    padding-left: var(--spacing-lg);
   }
 
   .main-nav__item:last-child > & {
     @include breakpoint('medium') {
       border-bottom: 0;
-      padding-bottom: space(1);
+      padding-bottom: var(--spacing-lg);
     }
   }
 }
diff --git a/src/components/tokens/border-tokens/border-tokens.stories.js b/src/components/tokens/border-tokens/border-tokens.stories.js
deleted file mode 100644
index ff031d2..0000000
--- a/src/components/tokens/border-tokens/border-tokens.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import template from './border-tokens.twig';
-import figma from '../../../../config/configma.json';
-import tokens from '../../../tokens/transformed.tokens.json';
-
-const data = { border: tokens.border };
-
-export default {
-  title: 'Tokens/Border',
-};
-
-export const Border = () => template(data);
-
-Border.parameters = {
-  design: {
-    type: 'figma',
-    url: figma.url + figma.border,
-  },
-};
diff --git a/src/components/tokens/color-tokens/colorTokens.stories.js b/src/components/tokens/color-tokens/colorTokens.stories.js
deleted file mode 100644
index f6daf26..0000000
--- a/src/components/tokens/color-tokens/colorTokens.stories.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import template from './color-tokens.twig';
-
-import tokens from '../../../tokens/transformed.tokens.json';
-
-const data = { colors: tokens.colors };
-
-export default {
-  title: 'Tokens/Colors',
-};
-
-export const Colors = () => template(data);
diff --git a/src/components/tokens/fontSize-tokens/font-sizes.stories.js b/src/components/tokens/fontSize-tokens/font-sizes.stories.js
deleted file mode 100644
index e2be94b..0000000
--- a/src/components/tokens/fontSize-tokens/font-sizes.stories.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import fontSizeTemplate from './_fontSizes.twig';
-import tokens from '../../../tokens/transformed.tokens.json';
-
-/**
- * Storybook Definition.
- */
-export default { title: 'Tokens/Font Sizes' };
-
-const fontSizeData = { fontSize: tokens.fontSize };
-
-export const FontSizes = () => fontSizeTemplate(fontSizeData);
diff --git a/src/components/tokens/size-tokens/size-tokens.stories.js b/src/components/tokens/size-tokens/size-tokens.stories.js
deleted file mode 100644
index b47dcdc..0000000
--- a/src/components/tokens/size-tokens/size-tokens.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import template from './size-tokens.twig';
-import figma from '../../../../config/configma.json';
-import tokens from '../../../tokens/transformed.tokens.json';
-
-const data = { size: tokens.size };
-
-export default {
-  title: 'Tokens/Size',
-};
-
-export const Size = () => template(data);
-
-Size.parameters = {
-  design: {
-    type: 'figma',
-    url: figma.url + figma.size,
-  },
-};
diff --git a/src/components/tokens/type-scale/type-scale.stories.js b/src/components/tokens/type-scale/type-scale.stories.js
deleted file mode 100644
index e294a7f..0000000
--- a/src/components/tokens/type-scale/type-scale.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import template from './type-scale.twig';
-import figma from '../../../../config/configma.json';
-import tokens from '../../../tokens/transformed.tokens.json';
-
-const data = { fontSize: tokens.fontSize };
-
-export default {
-  title: 'Tokens/Type Scale',
-};
-
-export const TypeScale = () => template(data);
-
-TypeScale.parameters = {
-  design: {
-    type: 'figma',
-    url: figma.url + figma.typeScale,
-  },
-};
diff --git a/src/components/tokens/type-scale/type-scale.twig b/src/components/tokens/type-scale/type-scale.twig
deleted file mode 100644
index 976b94e..0000000
--- a/src/components/tokens/type-scale/type-scale.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-<div>
-  <h2 class="sb-title">Type Scale</h2>
-
-  <ul class="sb-list">
-    {% for fontSize, value in _context.fontSize|reverse %}
-      <li class="sb-list__item">
-        <span class="sb-list__value">{{value.value}}px</span>
-        <span class="sb-list__custom-property">
-          <code class="sb-custom-property-name">var(--font-size-{{fontSize}})</code>
-        </span>
-        <span class="sb-list__label" style="font-size: {{value.value}}px;">{{fontSize}}</span>
-      </li>
-    {% endfor %}
-  </ul>
-</div>
diff --git a/src/foundation/breakpoints/_breakpoints.scss b/src/foundation/breakpoints/_breakpoints.scss
index ecc4586..6f556fa 100644
--- a/src/foundation/breakpoints/_breakpoints.scss
+++ b/src/foundation/breakpoints/_breakpoints.scss
@@ -8,7 +8,7 @@
 // Global Breakpoints
 @use 'sass:map';
 @use 'sass:meta';
-@use '../functions/rem-calc' as *;
+@use '../utility/rem-calc' as *;
 
 $xsmall: rem-calc(610);
 $small: rem-calc(767);
diff --git a/src/foundation/breakpoints/breakpoints.stories.js b/src/foundation/breakpoints/breakpoints.stories.js
deleted file mode 100644
index 37395a1..0000000
--- a/src/foundation/breakpoints/breakpoints.stories.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import breakpointsTwig from './breakpoints.twig';
-import breakpointsData from './breakpoints.yml';
-
-export default {
-  title: 'Base/Breakpoints',
-};
-
-export const breakpoints = () =>
-  `<div class="cl-container">${breakpointsTwig(breakpointsData)}</div>`;
diff --git a/src/foundation/breakpoints/breakpoints.twig b/src/foundation/breakpoints/breakpoints.twig
deleted file mode 100644
index dd9d5c1..0000000
--- a/src/foundation/breakpoints/breakpoints.twig
+++ /dev/null
@@ -1,16 +0,0 @@
-{% set breakpoints__base_class = 'cl-table' %}
-
-<table {{ bem(breakpoints__base_class) }}>
-	<tr>
-		<th {{ bem('header', [], breakpoints__base_class) }}>Breakpoint</th>
-		<th {{ bem('header', [], breakpoints__base_class) }}>(SCSS) Variable</th>
-		<th {{ bem('header', [], breakpoints__base_class) }}>Width</th>
-	</tr>
-	{% for breakpoint in breakpoints %}
-		<tr {{ bem('bp-' ~ breakpoint.name|lower, [], breakpoints__base_class) }}>
-			<td>{{ breakpoint.name }}</td>
-			<td>{{ breakpoint.variable }}</td>
-			<td>{{ breakpoint.value }}</td>
-		</tr>
-	{% endfor %}
-</table>
diff --git a/src/foundation/breakpoints/breakpoints.yml b/src/foundation/breakpoints/breakpoints.yml
deleted file mode 100644
index bd9eb91..0000000
--- a/src/foundation/breakpoints/breakpoints.yml
+++ /dev/null
@@ -1,16 +0,0 @@
-breakpoints:
-  - name: Xsmall
-    variable: $xsmall
-    value: 600px
-  - name: Small
-    variable: $small
-    value: 905px
-  - name: Medium
-    variable: $medium
-    value: 1240px
-  - name: Large
-    variable: $large
-    value: 1440px
-  - name: Xlarge
-    variable: $xlarge
-    value: 1920px
diff --git a/src/foundation/motion/_motion.scss b/src/foundation/motion/_motion.scss
index 633f408..78e2305 100644
--- a/src/foundation/motion/_motion.scss
+++ b/src/foundation/motion/_motion.scss
@@ -45,13 +45,9 @@ $transition-timing-function-base: ease-in-out;
   $hide-position: 'false'
 ) {
   @if $hide-position == 'true' {
-    & {
-      animation: hidden, position-change;
-    }
+    animation: hidden, position-change;
   } @else {
-    & {
-      animation: hidden;
-    }
+    animation: hidden;
   }
 
   & {
@@ -76,51 +72,3 @@ $transition-timing-function-base: ease-in-out;
     }
   }
 }
-
-@mixin animate-slide-up-fade-in(
-  $speed: $transition-duration-base,
-  $delay: 0ms
-) {
-  & {
-    animation: slide-up $speed;
-    animation-fill-mode: forwards;
-    animation-delay: $delay;
-  }
-
-  @keyframes slide-up {
-    0% {
-      transform: translateY(#{space(3)});
-      opacity: 0;
-    }
-
-    20% {
-      transform: translateY(#{space(3)});
-      opacity: 0;
-    }
-
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-}
-
-@mixin animate-grow-fade($speed: $transition-duration-base, $delay: 300ms) {
-  & {
-    animation: grow-fade $speed;
-    animation-fill-mode: forwards;
-    animation-delay: $delay;
-  }
-
-  @keyframes grow-fade {
-    0% {
-      opacity: 0;
-      transform: scale(0.25);
-    }
-
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
diff --git a/src/foundation/spacing/_spacing.scss b/src/foundation/spacing/_spacing.scss
index d691e92..29fafc9 100644
--- a/src/foundation/spacing/_spacing.scss
+++ b/src/foundation/spacing/_spacing.scss
@@ -1,77 +1,23 @@
-@use 'sass:map';
-@use '../breakpoints/breakpoints' as bp;
-
-$size-spacing-14: 12rem;
-$size-spacing-13: 10rem;
-$size-spacing-12: 6rem;
-$size-spacing-11: 5rem;
-$size-spacing-10: 4rem;
-$size-spacing-9: 3rem;
-$size-spacing-8: 2.5rem;
-$size-spacing-7: 2rem;
-$size-spacing-6: 1.5rem;
-$size-spacing-5: 1rem;
-$size-spacing-4: 0.75rem;
-$size-spacing-3: 0.5rem;
-$size-spacing-33: 0.33rem;
-$size-spacing-2: 0.25rem;
-$size-spacing-1: 0.125rem;
-/* stylelint-disable-next-line length-zero-no-unit */
-$size-spacing-0: 0rem;
-$spacings: (
-  12: $size-spacing-14,
-  10: $size-spacing-13,
-  6: $size-spacing-12,
-  5: $size-spacing-11,
-  4: $size-spacing-10,
-  3: $size-spacing-9,
-  2.5: $size-spacing-8,
-  2: $size-spacing-7,
-  1.5: $size-spacing-6,
-  1: $size-spacing-5,
-  0.75: $size-spacing-4,
-  0.5: $size-spacing-3,
-  0.33: $size-spacing-33,
-  0.25: $size-spacing-2,
-  0.125: $size-spacing-1,
-  0: $size-spacing-0,
-);
-
-@function space($item) {
-  @if map.has-key($map: $spacings, $key: $item) {
-    @return map.get($spacings, $item);
-  } @else {
-    /* stylelint-disable-next-line at-rule-no-unknown */
-
-    @error 'space(#{$item}); does not exist in the $spacings map. See _spacing.scss for available parameters.';
-  }
-}
+@use 'sass:math';
+@use '../breakpoints/breakpoints' as *;
 
 @mixin section-padding-top($multiplier: 1) {
   & {
-    padding-top: space(2);
+    padding-top: var(--spacing-xl);
   }
 
-  @include bp.breakpoint('small') {
-    padding-top: #{space(2.5) * $multiplier};
-  }
-
-  @include bp.breakpoint('large') {
-    padding-top: #{space(3) * $multiplier};
+  @include breakpoint('large') {
+    padding-top: calc(var(--spacing-xl) * #{$multiplier});
   }
 }
 
 @mixin section-padding-bottom($multiplier: 1) {
   & {
-    padding-bottom: space(2);
-  }
-
-  @include bp.breakpoint('small') {
-    padding-bottom: #{space(2.5) * $multiplier};
+    padding-bottom: var(--spacing-xl);
   }
 
-  @include bp.breakpoint('large') {
-    padding-bottom: #{space(3) * $multiplier};
+  @include breakpoint('large') {
+    padding-bottom: calc(var(--spacing-xl) * #{$multiplier});
   }
 }
 
@@ -82,20 +28,20 @@ $spacings: (
 
 @mixin margin-gap-top($multiplier: 1) {
   & {
-    margin-top: #{space(2) * $multiplier};
+    margin-top: calc(var(--spacing-xl) * #{$multiplier});
   }
 
-  @include bp.breakpoint('large') {
-    margin-top: #{space(3) * $multiplier};
+  @include breakpoint('large') {
+    margin-top: calc(var(--spacing-2xl) * #{$multiplier});
   }
 }
 
 @mixin margin-gap-bottom($multiplier: 1) {
   &:not(:last-child) {
-    margin-bottom: #{space(2) * $multiplier};
+    margin-bottom: calc(var(--spacing-xl) * #{$multiplier});
 
-    @include bp.breakpoint('large') {
-      margin-bottom: #{space(3) * $multiplier};
+    @include breakpoint('large') {
+      margin-bottom: calc(var(--spacing-2xl) * #{$multiplier});
     }
   }
 }
diff --git a/src/foundation/spacing/spacing.stories.js b/src/foundation/spacing/spacing.stories.js
deleted file mode 100644
index 71e283a..0000000
--- a/src/foundation/spacing/spacing.stories.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import spacingTwig from './spacing.twig';
-import spacingData from './spacing.yml';
-
-export default {
-  title: 'Base/Spacing',
-};
-
-export const Spacing = () =>
-  `<div class="cl-container">${spacingTwig(spacingData)}</div>`;
diff --git a/src/foundation/spacing/spacing.twig b/src/foundation/spacing/spacing.twig
deleted file mode 100644
index 9fff646..0000000
--- a/src/foundation/spacing/spacing.twig
+++ /dev/null
@@ -1,27 +0,0 @@
-{% set spacing__base_class = 'cl-table' %}
-
-<table {{ bem(spacing__base_class) }}>
-	<tr>
-	  <th {{ bem('header', [], spacing__base_class) }}>usage</th>
-		<th {{ bem('header', [], spacing__base_class) }}>rem</th>
-		<th {{ bem('header', [], spacing__base_class) }}>px</th>
-		<th {{ bem('header', [], spacing__base_class) }}>token name</th>
-		<th {{ bem('header', [], spacing__base_class) }}>example</th>
-	</tr>
-	{% for space in spacing %}
-		<tr>
-		  <td>{{ space.usage}}</td>
-			<td>{{ space.rem }}</td>
-			<td>{{ space.px }}</td>
-			<td>{{ space.tokenName }}</td>
-			<td>
-			  <span class="cl-spacing-visualization__wrapper"  style="gap: {{space.px}}">
-					<span class="cl-spacing-visualization"></span>
-					<span class="cl-spacing-visualization"></span>
-					<span class="cl-spacing-visualization"></span>
-					<span class="cl-spacing-visualization"></span>
-				</span>
-			</td>
-		</tr>
-	{% endfor %}
-</table>
diff --git a/src/foundation/spacing/spacing.yml b/src/foundation/spacing/spacing.yml
deleted file mode 100644
index c8458bf..0000000
--- a/src/foundation/spacing/spacing.yml
+++ /dev/null
@@ -1,66 +0,0 @@
-spacing:
-  - usage: space(10);
-    tokenName: $size-spacing-13
-    rem: 10rem
-    px: 160px
-    example: something
-  - usage: space(6);
-    tokenName: $size-spacing-12
-    rem: 6rem
-    px: 96px
-    example: something
-  - usage: space(5);
-    tokenName: $size-spacing-11
-    rem: 5rem
-    px: 80px
-    example: something
-  - usage: space(4);
-    tokenName: $size-spacing-10
-    rem: 4rem
-    px: 64px
-    example: something
-  - usage: space(3);
-    tokenName: $size-spacing-9
-    rem: 3rem
-    px: 48px
-    example: something
-  - usage: space(2.5);
-    tokenName: $size-spacing-8
-    rem: 2.5rem
-    px: 40px
-    example: something
-  - usage: space(2);
-    tokenName: $size-spacing-7
-    rem: 2rem
-    px: 32px
-    example: something
-  - usage: space(1.5);
-    tokenName: $size-spacing-6
-    rem: 1.5rem
-    px: 24px
-    example: something
-  - usage: space(1);
-    tokenName: $size-spacing-5
-    rem: 1rem
-    px: 16px
-    example: something
-  - usage: space(0.75);
-    tokenName: $size-spacing-4
-    rem: 0.75rem
-    px: 12px
-    example: something
-  - usage: space(0.5);
-    tokenName: $size-spacing-3
-    rem: 0.5rem
-    px: 6px
-    example: something
-  - usage: space(0.25);
-    tokenName: $size-spacing-2
-    rem: 0.25rem
-    px: 4px
-    example: something
-  - usage: space(0.125);
-    tokenName: $size-spacing-1
-    rem: 0.125rem
-    px: 2px
-    example: something
diff --git a/src/foundation/typography/body-styles.twig b/src/foundation/typography/body-styles.twig
deleted file mode 100644
index 7621679..0000000
--- a/src/foundation/typography/body-styles.twig
+++ /dev/null
@@ -1,25 +0,0 @@
-{% set type__base_class = 'cl-type' %}
-
-<h2>Type Styles use SASS Mixins to capture their entire style</h2>
-<p>Like heading styles, body styles may include only a
-	<code>font</code>
-	attribute. However, in order to keep implementation consistent, all typography definitions across the codebase must implement the relevant sass mixin and not mix or omit parts of any typography style.</p>
-
-<ul {{ bem(type__base_class) }}>
-	{% for size, value in body_sizes %}
-		{% set body_styles = 'body-' ~ size %}
-		<li {{ bem('item', ['body-styles'], type__base_class, ['text-field']) }}>
-			<div {{ bem('sample', [], type__base_class, [body_styles]) }}>
-				<strong>Body
-					{{ size }}</strong><br/><p>Enim eget nec sit scelerisque lacus. Porttitor senectus vulputate mattis tortor odio vitae. Dui et, ut ipsum aliquet sit tempor. Amet consectetur purus justo feugiat mattis sit ultricies odio. Pellentesque pellentesque sit sed porttitor duis interdum.</p>
-			</div>
-			<details class="cl-info">
-				<summary>Font Details</summary>
-				<strong>variable:</strong>
-				<code>@include body-{{ size }}</code>
-				<br/><strong>font:</strong>
-				{{ value }}
-			</details>
-		</li>
-	{% endfor %}
-</ul>
diff --git a/src/foundation/typography/body-styles.yml b/src/foundation/typography/body-styles.yml
deleted file mode 100644
index 161f1d8..0000000
--- a/src/foundation/typography/body-styles.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-body_sizes:
-  xl: "400 clamp( 1.5rem, 1.5rem + 0.2778vw, 1.75rem )/1.65 'Rubik', sans-serif"
-  xl-condensed: "400 clamp( 1.5rem, 1.5rem + 0.2778vw, 1.75rem )/1.4 'Rubik', sans-serif"
-  l: "400 clamp( 1.25rem, 1.25rem + 0.2778vw, 1.5rem )/1.4 'Rubik', sans-serif"
-  l-condensed: "400 clamp( 1.25rem, 1.25rem + 0.2778vw, 1.5rem )/1.4 'Rubik', sans-serif"
-  default: "400 clamp( 0.9375rem, 0.9375rem + 0.2778vw, 1rem )/1.65 'Rubik', sans-serif"
-  default-condensed: "400 clamp( 0.9375rem, 0.9375rem + 0.2778vw, 1rem )/1.4 'Rubik', sans-serif"
-  s: "400 clamp( 0.8125rem, 0.8125rem + 0.2778vw, 0.875rem )/1.65 'Rubik', sans-serif"
diff --git a/src/foundation/typography/heading-styles.twig b/src/foundation/typography/heading-styles.twig
deleted file mode 100644
index a7bd397..0000000
--- a/src/foundation/typography/heading-styles.twig
+++ /dev/null
@@ -1,29 +0,0 @@
-{% set type__base_class = 'cl-type' %}
-
-<p>Type Styles use SASS Mixins to capture their entire style</p>
-<br/>
-<ul {{ bem(type__base_class) }}>
-	{% for level, value in headings %}
-		<li {{ bem('item', [], type__base_class) }}>
-			{% set heading__modifiers = [level, 'heading-styles'] %}
-			<div {{ bem('heading', heading__modifiers, []) }}>
-				Heading
-				{{ level }}
-			</div>
-			<details class="cl-info">
-				<summary>Font Details</summary>
-				<strong>Usage:</strong>
-				<code>@include
-					{{ level }}</code>
-				<br/><strong>font:</strong>
-				{{ value }}
-				{%- for spacing, spacing_value in letter_spacing %}
-					{% if spacing == level -%}<br/><strong>letter-spacing:</strong>
-
-						{{ spacing_value }}
-					{%- endif %}
-				{% endfor %}
-			</details>
-		</li>
-	{% endfor %}
-</ul>
diff --git a/src/foundation/typography/heading-styles.yml b/src/foundation/typography/heading-styles.yml
deleted file mode 100644
index 43f1ca5..0000000
--- a/src/foundation/typography/heading-styles.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-headings:
-  h1: '400 clamp( 2.75rem, 2.75rem + 1.1458vw, 4.125rem )/1.4 "Gabriela", serif'
-  h2: '400 clamp( 2.25rem, 2.25rem + 1.1458vw, 3rem )/1.4 "Gabriela", serif'
-  h3: '400 clamp( 1.75rem, 1.75rem + 1.1458vw, 2.25rem )/1.4 "Gabriela", serif'
-  h4: '400 clamp( 1.375rem, 1.375rem + 1.1458vw, 1.75rem )/1.4 "Gabriela", serif'
-  h5: '400 clamp( 1.25rem, 1.25rem + 1.1458vw, 1.375rem )/1.4 "Gabriela", serif'
diff --git a/src/foundation/typography/type-faces.twig b/src/foundation/typography/type-faces.twig
deleted file mode 100644
index a72f884..0000000
--- a/src/foundation/typography/type-faces.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-{% set type__base_class = 'cl-type' %}
-
-<ul {{ bem(type__base_class) }}>
-	{% for family in families %}
-		<li {{ bem('family', [], type__base_class) }}>
-			{% for style in family.styles %}
-				<div {{ bem('sample', [], type__base_class) }} style="font-size: var(--font-size-30); font-family: {{ family.id }}; font-weight: {{ style.weight }}; font-style: {{ style.style }}">
-					{{ family.name }}
-					-
-					{{ style.name }}
-				</div>
-			{% endfor %}
-		</li>
-	{% endfor %}
-</ul>
diff --git a/src/foundation/typography/type-faces.yml b/src/foundation/typography/type-faces.yml
deleted file mode 100644
index 57b529d..0000000
--- a/src/foundation/typography/type-faces.yml
+++ /dev/null
@@ -1,28 +0,0 @@
-families:
-  - name: Gabriela
-    id: 'Gabriela, sans-serif'
-    styles:
-      - name: Bold
-        weight: 600
-        style: normal
-  - name: Rubik
-    id: 'Rubik, sans-serif'
-    styles:
-      - name: Bold
-        weight: 600
-        style: normal
-      - name: Bold Italic
-        weight: 600
-        style: italic
-      - name: Medium
-        weight: 500
-        style: normal
-      - name: Medium Italic
-        weight: 500
-        style: italic
-      - name: Regular
-        weight: 400
-        style: normal
-      - name: Regular Italic
-        weight: 400
-        style: italic
diff --git a/src/foundation/typography/typography.stories.js b/src/foundation/typography/typography.stories.js
deleted file mode 100644
index 4cc1f86..0000000
--- a/src/foundation/typography/typography.stories.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// Twig templates
-import typeFaces from './type-faces.twig';
-import headingStyles from './heading-styles.twig';
-import bodyStyles from './body-styles.twig';
-
-// Data files
-import typeFacesData from './type-faces.yml';
-import headingStyleData from './heading-styles.yml';
-import bodyStyleData from './body-styles.yml';
-
-/**
- * Storybook Definition.
- */
-export default { title: 'Base/Typography' };
-
-export const TypeFaces = () =>
-  `<div class="cl-container">${typeFaces(typeFacesData)}</div>`;
-
-export const HeadingStyles = () =>
-  `<div class="cl-container">${headingStyles(headingStyleData)}</div>`;
-
-export const BodyStyles = () =>
-  `<div class="cl-container">${bodyStyles(bodyStyleData)}</div>`;
diff --git a/src/foundation/functions/_rem-calc.scss b/src/foundation/utility/_rem-calc.scss
similarity index 100%
rename from src/foundation/functions/_rem-calc.scss
rename to src/foundation/utility/_rem-calc.scss
diff --git a/src/foundation/utility/cl-base.scss b/src/foundation/utility/cl-base.scss
index aaa5b23..623ecf2 100644
--- a/src/foundation/utility/cl-base.scss
+++ b/src/foundation/utility/cl-base.scss
@@ -56,6 +56,7 @@
     flex-flow: row nowrap;
     align-items: center;
     gap: var(--spacing-xl);
+    line-height: normal;
     margin-bottom: var(--spacing-xl) !important;
     padding-bottom: var(--spacing-xl) !important;
     padding-left: var(--spacing-md) !important;
@@ -63,15 +64,15 @@
   }
 
   &__label {
-    width: 100px;
+    min-width: 100px;
   }
 
   &__value {
-    width: 100px;
+    min-width: 100px;
   }
 
   &__custom-property {
-    width: 250px;
+    min-width: 275px;
   }
 }
 
diff --git a/src/layout/container/_container.scss b/src/layout/container/_container.scss
index ec801bf..e882c96 100644
--- a/src/layout/container/_container.scss
+++ b/src/layout/container/_container.scss
@@ -103,16 +103,6 @@
 
   & {
     position: relative;
-    border: 1px solid var(--gin-border-color-layer);
-    background: var(--gin-bg-layer);
-    border-radius: var(--gin-border-l);
-    box-shadow: var(--gin-shadow-l1);
-    width: 100%;
-    display: inline-block;
-
-    @include breakpoint('large') {
-      width: auto;
-    }
   }
 
   + .container--with-bg {
@@ -147,20 +137,8 @@
   &--with-bg {
     @include section-padding(2);
 
-    // & {
-    //   background-color: clr(secondary);
-    // }
-
-    // &[data-component-theme*='primary'] {
-    //   background-color: clr(primary);
-    // }
-
-    // &[data-component-theme*='primary light'] {
-    //   background-color: clr(primary, light);
-    // }
-
-    + .container {
-      @include margin-gap-top;
+    & {
+      background-color: var(--color-primary-lighter);
     }
   }
 
@@ -195,7 +173,7 @@
       align-self: flex-start;
 
       .container__inner {
-        padding: space(2);
+        padding: var(--spacing-xl);
       }
     }
   }
@@ -204,28 +182,24 @@
 .container__heading {
   align-self: flex-start;
   max-width: var(--content-width);
-  margin-bottom: space(2);
+  margin: 0 0 var(--spacing-xl);
 
   &:is(h2) {
     @include h2;
-
-    color: clr(primary);
   }
 
   &:is(h3) {
     @include h3;
-
-    color: clr(primary);
   }
 
   &:not(:last-child) {
-    margin-bottom: space(1);
+    margin-bottom: var(--spacing-lg);
   }
 }
 
 .container__text {
   align-self: flex-start;
-  margin-bottom: space(2);
+  margin-bottom: var(--spacing-xl);
   max-width: var(--content-width-small);
 }
 
@@ -237,5 +211,5 @@
 .field__item:has(.container) {
   display: flex;
   justify-content: center;
-  margin-bottom: space(2);
+  margin-bottom: var(--spacing-xl);
 }
diff --git a/src/layout/container/container-base.yml b/src/layout/container/container-base.yml
deleted file mode 100644
index 7fad3b4..0000000
--- a/src/layout/container/container-base.yml
+++ /dev/null
@@ -1 +0,0 @@
-container__heading_level: 2
diff --git a/src/layout/container/container.stories.js b/src/layout/container/container.stories.js
index 4e2a222..6d4bac2 100644
--- a/src/layout/container/container.stories.js
+++ b/src/layout/container/container.stories.js
@@ -1,8 +1,6 @@
 // Component Twig
 import containerTwig from './container.twig';
 
-import containerBaseData from './container-base.yml';
-
 // Menu Location
 export default {
   title: 'Layout/Container',
@@ -51,6 +49,14 @@ export default {
       defaultValue: 'Container content placeholder text',
     },
   },
+  args: {
+    backgroundColor: false,
+    width: 'standard',
+    spacing: '',
+    alignment: 'center',
+    heading: 'This is an example container heading',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget eleifend ex, non ullamcorper tellus. Nullam in lectus a nulla feugiat ultricies in sed lectus. Maecenas tincidunt eu massa sit amet molestie.',
+  },
 };
 
 // Component Examples
@@ -63,7 +69,6 @@ export const container = ({
   text,
 }) =>
   containerTwig({
-    ...containerBaseData,
     container__bg_color: backgroundColor,
     container__component_width: width,
     container__modifiers: [spacing],
diff --git a/src/layout/grid/_grid.scss b/src/layout/grid/_grid.scss
index f2d6621..7486d8a 100644
--- a/src/layout/grid/_grid.scss
+++ b/src/layout/grid/_grid.scss
@@ -14,10 +14,10 @@ $grids: (
 
 // Utilize custom properties so they can be re-scoped
 :root {
-  --grid-spacing: #{s.space(4)};
+  --grid-spacing: var(--spacing-2xl);
 
   @include breakpoint('medium') {
-    --grid-spacing: #{s.space(2)};
+    --grid-spacing: var(--spacing-xl);
   }
 }
 
@@ -30,14 +30,14 @@ $grids: (
   }
 
   &[data-grid-spacing='no-spacing'] {
-    --grid-spacing: #{s.space(0)};
+    --grid-spacing: 0;
   }
 
   &[data-grid-spacing='two-spacing'] {
-    --grid-spacing: #{s.space(4)};
+    --grid-spacing: var(--spacing-xl);
 
     @include breakpoint('medium') {
-      --grid-spacing: #{s.space(6)};
+      --grid-spacing: var(--spacing-2xl);
     }
   }
 
diff --git a/src/components/tokens/border-radius-tokens/border-radius-tokens.stories.js b/src/tokens/border-radius/border-radius-tokens.stories.js
similarity index 72%
rename from src/components/tokens/border-radius-tokens/border-radius-tokens.stories.js
rename to src/tokens/border-radius/border-radius-tokens.stories.js
index f520440..a041c71 100644
--- a/src/components/tokens/border-radius-tokens/border-radius-tokens.stories.js
+++ b/src/tokens/border-radius/border-radius-tokens.stories.js
@@ -1,6 +1,6 @@
 import template from './border-radius-tokens.twig';
-import figma from '../../../../config/configma.json';
-import tokens from '../../../tokens/transformed.tokens.json';
+import figma from '../../../config/configma.json';
+import tokens from '../transformed.tokens.json';
 
 const data = { radius: tokens.radius };
 
diff --git a/src/components/tokens/border-radius-tokens/border-radius-tokens.twig b/src/tokens/border-radius/border-radius-tokens.twig
similarity index 100%
rename from src/components/tokens/border-radius-tokens/border-radius-tokens.twig
rename to src/tokens/border-radius/border-radius-tokens.twig
diff --git a/src/tokens/borders/borders.stories.js b/src/tokens/borders/borders.stories.js
new file mode 100644
index 0000000..f4a9890
--- /dev/null
+++ b/src/tokens/borders/borders.stories.js
@@ -0,0 +1,18 @@
+import template from './borders.twig';
+import figma from '../../../config/configma.json';
+import tokens from '../transformed.tokens.json';
+
+const data = { border: tokens.border };
+
+export default {
+  title: 'Tokens/Borders',
+};
+
+export const Borders = () => template(data);
+
+Borders.parameters = {
+  design: {
+    type: 'figma',
+    url: figma.url + figma.border,
+  },
+};
diff --git a/src/components/tokens/border-tokens/border-tokens.twig b/src/tokens/borders/borders.twig
similarity index 100%
rename from src/components/tokens/border-tokens/border-tokens.twig
rename to src/tokens/borders/borders.twig
diff --git a/src/components/tokens/breakpoint-tokens/breakpoint-tokens.stories.js b/src/tokens/breakpoints/breakpoint.stories.js
similarity index 60%
rename from src/components/tokens/breakpoint-tokens/breakpoint-tokens.stories.js
rename to src/tokens/breakpoints/breakpoint.stories.js
index f5671f8..5f0e518 100644
--- a/src/components/tokens/breakpoint-tokens/breakpoint-tokens.stories.js
+++ b/src/tokens/breakpoints/breakpoint.stories.js
@@ -1,6 +1,6 @@
-import template from './breakpoint-tokens.twig';
-import figma from '../../../../config/configma.json';
-import tokens from '../../../tokens/transformed.tokens.json';
+import template from './breakpoints.twig';
+import figma from '../../../config/configma.json';
+import tokens from '../transformed.tokens.json';
 
 const data = { breakpoint: tokens.breakpoint };
 
diff --git a/src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig b/src/tokens/breakpoints/breakpoints.twig
similarity index 100%
rename from src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig
rename to src/tokens/breakpoints/breakpoints.twig
diff --git a/src/tokens/colors/color.stories.js b/src/tokens/colors/color.stories.js
new file mode 100644
index 0000000..3a499a4
--- /dev/null
+++ b/src/tokens/colors/color.stories.js
@@ -0,0 +1,11 @@
+import colorsTwig from './color.twig';
+
+import tokens from '../transformed.tokens.json';
+
+const colorsData = { colors: tokens.colors };
+
+export default {
+  title: 'Tokens/Colors',
+};
+
+export const Colors = () => colorsTwig(colorsData);
diff --git a/src/components/tokens/color-tokens/color-tokens.twig b/src/tokens/colors/color.twig
similarity index 100%
rename from src/components/tokens/color-tokens/color-tokens.twig
rename to src/tokens/colors/color.twig
diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
index 470b334..0af6df5 100644
--- a/src/tokens/figma.tokens.json
+++ b/src/tokens/figma.tokens.json
@@ -241,6 +241,178 @@
           "value": "#080b0c",
           "type": "color"
         }
+      },
+      "WUP": {
+        "gold": {
+          "100": {
+            "value": "#fff9f2",
+            "type": "color"
+          },
+          "200": {
+            "value": "#fff2e4",
+            "type": "color"
+          },
+          "300": {
+            "value": "#ffe5c6",
+            "type": "color"
+          },
+          "400": {
+            "value": "#ffd7a3",
+            "type": "color"
+          },
+          "500": {
+            "value": "#ffc875",
+            "type": "color"
+          },
+          "600": {
+            "value": "#ffb81c",
+            "type": "color"
+          },
+          "700": {
+            "value": "#e4a519",
+            "type": "color"
+          },
+          "800": {
+            "value": "#c68f16",
+            "type": "color"
+          },
+          "900": {
+            "value": "#a17412",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#72520d",
+            "type": "color"
+          }
+        },
+        "blue": {
+          "100": {
+            "value": "#f2f2f6",
+            "type": "color"
+          },
+          "200": {
+            "value": "#e4e5ed",
+            "type": "color"
+          },
+          "300": {
+            "value": "#c6c8db",
+            "type": "color"
+          },
+          "400": {
+            "value": "#a1a6c6",
+            "type": "color"
+          },
+          "500": {
+            "value": "#727baf",
+            "type": "color"
+          },
+          "600": {
+            "value": "#003594",
+            "type": "color"
+          },
+          "700": {
+            "value": "#002f84",
+            "type": "color"
+          },
+          "800": {
+            "value": "#002973",
+            "type": "color"
+          },
+          "900": {
+            "value": "#00225e",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#001842",
+            "type": "color"
+          }
+        },
+        "legacy": {
+          "gold": {
+            "100": {
+              "value": "#f9f6f2",
+              "type": "color"
+            },
+            "200": {
+              "value": "#f2ece4",
+              "type": "color"
+            },
+            "300": {
+              "value": "#e4d7c6",
+              "type": "color"
+            },
+            "400": {
+              "value": "#d6bfa1",
+              "type": "color"
+            },
+            "500": {
+              "value": "#c6a572",
+              "type": "color"
+            },
+            "600": {
+              "value": "#b58500",
+              "type": "color"
+            },
+            "700": {
+              "value": "#a27700",
+              "type": "color"
+            },
+            "800": {
+              "value": "#8c6700",
+              "type": "color"
+            },
+            "900": {
+              "value": "#725400",
+              "type": "color"
+            },
+            "1000": {
+              "value": "#513b00",
+              "type": "color"
+            }
+          },
+          "blue": {
+            "100": {
+              "value": "#f2f2f3",
+              "type": "color"
+            },
+            "200": {
+              "value": "#e4e4e7",
+              "type": "color"
+            },
+            "300": {
+              "value": "#c6c6cb",
+              "type": "color"
+            },
+            "400": {
+              "value": "#a2a3ac",
+              "type": "color"
+            },
+            "500": {
+              "value": "#737585",
+              "type": "color"
+            },
+            "600": {
+              "value": "#141b4d",
+              "type": "color"
+            },
+            "700": {
+              "value": "#121845",
+              "type": "color"
+            },
+            "800": {
+              "value": "#0f153c",
+              "type": "color"
+            },
+            "900": {
+              "value": "#0d1131",
+              "type": "color"
+            },
+            "1000": {
+              "value": "#090c22",
+              "type": "color"
+            }
+          }
+        }
       }
     },
     "font-family": {
@@ -1427,6 +1599,86 @@
       }
     }
   },
+  "components/announcement": {
+    "announcement": {
+      "background": {
+        "default": {
+          "value": "{color.white}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        }
+      },
+      "heading": {
+        "default": {
+          "value": "{color.primary.dark}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        }
+      },
+      "icon": {
+        "default": {
+          "value": "{color.primary.dark}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.link-hover-lighter}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        }
+      }
+    }
+  },
+  "components/banner": {
+    "banner": {
+      "button": {
+        "text": {
+          "value": "{color.text.body}",
+          "type": "color"
+        },
+        "border": {
+          "value": "{color.text.white}",
+          "type": "color"
+        },
+        "background": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "value": "{color.text.white}",
+        "type": "color",
+        "subheading": {
+          "value": "{color.text.white}",
+          "type": "color"
+        }
+      },
+      "background": {
+        "value": "{color.primary.darker}",
+        "type": "color"
+      },
+      "background-opacity": {
+        "value": "0.75",
+        "type": "opacity"
+      }
+    }
+  },
   "components/blockQuote": {
     "blockQuote": {
       "padding": {
@@ -1753,6 +2005,54 @@
       }
     }
   },
+  "components/footer": {
+    "footer": {
+      "background": {
+        "default": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.text.white}",
+          "type": "color"
+        }
+      },
+      "heading": {
+        "default": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.primary.dark}",
+          "type": "color"
+        }
+      },
+      "icon": {
+        "default": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.primary.dark}",
+          "type": "color"
+        }
+      }
+    }
+  },
+  "components/header": {
+    "header": {
+      "search": {
+        "background": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        },
+        "text-icon": {
+          "value": "{color.text.white}",
+          "type": "color"
+        }
+      }
+    }
+  },
   "components/input": {
     "input": {
       "gap": {
@@ -1876,6 +2176,26 @@
       }
     }
   },
+  "components/utilityMenu": {
+    "utilityMenu": {
+      "color": {
+        "bg": {
+          "value": "{color.white}",
+          "type": "color"
+        },
+        "link": {
+          "default": {
+            "value": "{color.primary.darker}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{color.primary.dark}",
+            "type": "color"
+          }
+        }
+      }
+    }
+  },
   "components/pager": {
     "pager": {
       "color": {
@@ -2320,15 +2640,6 @@
         "pager.text.hover": "S:d5268cc95f0ca68a28f35d87395f9ce37893fe23,",
         "pager.text.focus": "S:d03b986e8d65e0c71a1837ec7325ffbce6d6aaa7,",
         "pager.fill.hover": "S:5bdc99f7ec11756cdef48ec3e13c9b4dd6f4ea81,",
-        "mainMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,",
-        "mainMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,",
-        "mainMenu.color.link.bg-hover": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,",
-        "mainMenu.color.link.label": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,",
-        "mainMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,",
-        "mainMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,",
-        "mainMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,",
-        "mainMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,",
-        "mainMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,",
         "link.default": "S:9fd4db376033a945bbc2bf5bfe8a698e68bd6f1a,",
         "link.hover": "S:e6b1afc9022d41b4217e773a9ab4abf90329cf46,",
         "color.fieldset.bg": "S:bfe975e6026fa7f0aa7fd11985d9ebaeb6565d17,",
@@ -2431,11 +2742,19 @@
         "color.grays.900": "S:d14dafeba041e023bd5c5d2c458c10f88801e824,",
         "color.grays.1000": "S:588f6731fa9753788b0b48bb7c575f3b94991a69,",
         "checkbox.color.label": "S:dd27f922df752738d999c185f11b67e77134feac,",
-        "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,"
+        "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,",
+        "utilityMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,",
+        "utilityMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,",
+        "utilityMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,",
+        "utilityMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,",
+        "utilityMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,",
+        "utilityMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,",
+        "utilityMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,",
+        "utilityMenu.color.link.default": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,",
+        "utilityMenu.color.link.hover": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,"
       },
       "selectedTokenSets": {
         "global": "enabled",
-        "semantic": "enabled",
         "storybook": "enabled",
         "components/accordion": "enabled",
         "components/blockQuote": "enabled",
@@ -2454,7 +2773,13 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled"
+        "components/textField": "enabled",
+        "semantic": "enabled",
+        "components/announcement": "enabled",
+        "components/banner": "enabled",
+        "components/footer": "enabled",
+        "components/header": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:16908",
       "$figmaModeId": "23237:10",
@@ -2504,15 +2829,6 @@
         "pager.text.hover": "2e1149296e028f68d0590547182eb3fa046b0799",
         "pager.text.focus": "f597287eb8465595918f5af8c56a3f803417cf81",
         "pager.fill.hover": "e7c4c208bc4d7ed93b94794070642830984f1687",
-        "mainMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23",
-        "mainMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2",
-        "mainMenu.color.link.bg-hover": "29ea5911b9675ae3920cf9f26602f612fe9e33d5",
-        "mainMenu.color.link.label": "a28d88530a052b75025ad58244a622f52538ffdb",
-        "mainMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805",
-        "mainMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128",
-        "mainMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477",
-        "mainMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83",
-        "mainMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268",
         "link.default": "52f2a6ae3ef87bb2b4c96e2b8316e609a1f3e4e0",
         "link.hover": "602f312f7c40299996ccaf31cd8340e88ddcd6a8",
         "input.color.label": "40806b82869b549ff22858fd677df5c1c6d22cad",
@@ -2634,7 +2950,16 @@
         "checkbox.spacing.gap": "59fbad63c0994ee956f8790e994534f9f5f5e922",
         "checkbox.color.label": "4db65c0b61319b6c85cdb9c1b683d84e2f65ff52",
         "checkbox.color.label-disabled": "3a5dec39f06f92904d80c2096f9c439ae0b5d09a",
-        "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310"
+        "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310",
+        "utilityMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23",
+        "utilityMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2",
+        "utilityMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805",
+        "utilityMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128",
+        "utilityMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477",
+        "utilityMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83",
+        "utilityMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268",
+        "utilityMenu.color.link.default": "29ea5911b9675ae3920cf9f26602f612fe9e33d5",
+        "utilityMenu.color.link.hover": "a28d88530a052b75025ad58244a622f52538ffdb"
       }
     },
     {
@@ -2642,7 +2967,8 @@
       "name": "Emulsify Global",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "global": "enabled"
+        "global": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17089",
       "$figmaModeId": "23237:11",
@@ -2694,7 +3020,8 @@
       "name": "Emulsify Semantic",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "semantic": "enabled"
+        "semantic": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17133",
       "$figmaModeId": "23237:12",
@@ -2716,7 +3043,8 @@
       "name": "Emulsify Storybook only",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "storybook": "source"
+        "storybook": "source",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17144",
       "$figmaModeId": "23237:13",
@@ -2744,7 +3072,8 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled"
+        "components/textField": "enabled",
+        "components/utilityMenu": "disabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17145",
       "$figmaModeId": "23237:14",
@@ -2790,15 +3119,6 @@
         "pager.text.hover": "067e5560a9bcaee73e961d449ec580cabede8a17",
         "pager.text.focus": "039853336af697ea5a3d09db6b64f78e7c45c35d",
         "pager.fill.hover": "64071b977256beb9e45651dbbe696ac3dfb389d3",
-        "mainMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8",
-        "mainMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071",
-        "mainMenu.color.link.bg-hover": "d2185c2db3e4a1b77be017df0fb5f3376c756f50",
-        "mainMenu.color.link.label": "4c190c6dffed1c15773123f079e53c195ae53054",
-        "mainMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d",
-        "mainMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592",
-        "mainMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb",
-        "mainMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1",
-        "mainMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91",
         "link.default": "3faaab82a9c834600aaa7ad75621d14583bd9974",
         "link.hover": "e44dbb7433cdb45720e896b1126e28c9bff490e4",
         "input.color.label": "1b07b68bbc2c3339a39e57980e5b0dd66e848174",
@@ -2870,8 +3190,74 @@
         "blockQuote.padding.y": "398508657cd7d1bbd686f838a27db3f0c3ee3f74",
         "checkbox.spacing.gap": "e4d2049d0ee84eceee61f25e3264c2526cfe746a",
         "checkbox.color.label": "d2a0283754f673d1b92c74eef12f3bbe06845d3b",
-        "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838"
+        "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838",
+        "utilityMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8",
+        "utilityMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071",
+        "utilityMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d",
+        "utilityMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592",
+        "utilityMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb",
+        "utilityMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1",
+        "utilityMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91",
+        "utilityMenu.color.link.default": "d2185c2db3e4a1b77be017df0fb5f3376c756f50",
+        "utilityMenu.color.link.hover": "4c190c6dffed1c15773123f079e53c195ae53054"
       }
+    },
+    {
+      "id": "865132ed4de1f234ac10e07b09e233a0fbadd978",
+      "name": "Main",
+      "$figmaStyleReferences": {},
+      "selectedTokenSets": {
+        "global": "enabled",
+        "components/accordion": "enabled",
+        "components/blockQuote": "enabled",
+        "components/breadcrumbs": "enabled",
+        "components/button": "enabled",
+        "components/card": "enabled",
+        "components/checkbox": "enabled",
+        "components/cta": "enabled",
+        "components/fieldset": "enabled",
+        "components/input": "enabled",
+        "components/link": "enabled",
+        "components/mainMenu": "enabled",
+        "components/pager": "enabled",
+        "components/radioButton": "enabled",
+        "components/selectdropdown": "enabled",
+        "components/status": "enabled",
+        "components/table": "enabled",
+        "components/tabs": "enabled",
+        "components/textField": "enabled",
+        "semantic": "enabled",
+        "components/utilityMenu": "disabled"
+      },
+      "group": "WUP"
+    },
+    {
+      "id": "14ff327c549a6b3a1dd78f86615f1e5bed0e367d",
+      "name": "Gold",
+      "$figmaStyleReferences": {},
+      "selectedTokenSets": {
+        "global": "enabled",
+        "components/accordion": "enabled",
+        "components/blockQuote": "enabled",
+        "components/breadcrumbs": "enabled",
+        "components/button": "enabled",
+        "components/card": "enabled",
+        "components/checkbox": "enabled",
+        "components/cta": "enabled",
+        "components/fieldset": "enabled",
+        "components/input": "enabled",
+        "components/link": "enabled",
+        "components/mainMenu": "enabled",
+        "components/pager": "enabled",
+        "components/radioButton": "enabled",
+        "components/selectdropdown": "enabled",
+        "components/status": "enabled",
+        "components/table": "enabled",
+        "components/tabs": "enabled",
+        "components/textField": "enabled",
+        "components/utilityMenu": "disabled"
+      },
+      "group": "WUP"
     }
   ],
   "$metadata": {
@@ -2879,6 +3265,8 @@
       "global",
       "semantic",
       "components/accordion",
+      "components/announcement",
+      "components/banner",
       "components/blockQuote",
       "components/breadcrumbs",
       "components/button",
@@ -2886,9 +3274,12 @@
       "components/checkbox",
       "components/cta",
       "components/fieldset",
+      "components/footer",
+      "components/header",
       "components/input",
       "components/link",
       "components/mainMenu",
+      "components/utilityMenu",
       "components/pager",
       "components/radioButton",
       "components/selectdropdown",
diff --git a/src/components/tokens/line-height/line-height.stories.js b/src/tokens/line-height/line-height.stories.js
similarity index 60%
rename from src/components/tokens/line-height/line-height.stories.js
rename to src/tokens/line-height/line-height.stories.js
index a062544..28ee266 100644
--- a/src/components/tokens/line-height/line-height.stories.js
+++ b/src/tokens/line-height/line-height.stories.js
@@ -1,8 +1,8 @@
 import template from './line-height.twig';
-import figma from '../../../../config/configma.json';
-import tokens from '../../../tokens/transformed.tokens.json';
+import figma from '../../../config/configma.json';
+import tokens from '../transformed.tokens.json';
 
-const data = { lineHeight: tokens.lineHeights };
+const data = { lineHeight: tokens['line-height'] };
 
 export default {
   title: 'Tokens/Line Height',
diff --git a/src/components/tokens/line-height/line-height.twig b/src/tokens/line-height/line-height.twig
similarity index 94%
rename from src/components/tokens/line-height/line-height.twig
rename to src/tokens/line-height/line-height.twig
index a600871..cdd8161 100644
--- a/src/components/tokens/line-height/line-height.twig
+++ b/src/tokens/line-height/line-height.twig
@@ -11,7 +11,7 @@
         <span class="sb-list__custom-property" style="width: 272px;">
           <code class="sb-custom-property-name">var(--line-heights-{{lineHeight}})</code>
         </span>
-        <span class="sb-list__visualization" style="max-width: 600px; line-height:var(--line-heights-{{lineHeight}})">{{text}}</span>
+        <span class="sb-list__visualization" style="max-width: 600px; line-height:var(--line-height-{{lineHeight}})">{{text}}</span>
       </li>
     {% endfor %}
   </ul>
diff --git a/src/foundation/motion/cl-motion.scss b/src/tokens/motion/cl-motion.scss
similarity index 97%
rename from src/foundation/motion/cl-motion.scss
rename to src/tokens/motion/cl-motion.scss
index acbf11e..8eb7056 100644
--- a/src/foundation/motion/cl-motion.scss
+++ b/src/tokens/motion/cl-motion.scss
@@ -1,4 +1,4 @@
-@use './motion' as *;
+@use '../../foundation/motion/motion' as *;
 
 .motion {
   padding: 0 1rem;
diff --git a/src/foundation/motion/motion.stories.js b/src/tokens/motion/motion.stories.js
similarity index 83%
rename from src/foundation/motion/motion.stories.js
rename to src/tokens/motion/motion.stories.js
index 4b2fbe1..726f487 100644
--- a/src/foundation/motion/motion.stories.js
+++ b/src/tokens/motion/motion.stories.js
@@ -5,7 +5,7 @@ import motionData from './motion.yml';
 /**
  * Add storybook definition for Animations.
  */
-export default { title: 'Base/Motion' };
+export default { title: 'Tokens/Motion' };
 
 export const Motion = () =>
   `<div class="cl-container">${motion(motionData)}</div>`;
diff --git a/src/foundation/motion/motion.twig b/src/tokens/motion/motion.twig
similarity index 100%
rename from src/foundation/motion/motion.twig
rename to src/tokens/motion/motion.twig
diff --git a/src/foundation/motion/motion.yml b/src/tokens/motion/motion.yml
similarity index 100%
rename from src/foundation/motion/motion.yml
rename to src/tokens/motion/motion.yml
diff --git a/src/components/tokens/opacity-tokens/opacity-tokens.stories.js b/src/tokens/opacity/opacity.stories.js
similarity index 59%
rename from src/components/tokens/opacity-tokens/opacity-tokens.stories.js
rename to src/tokens/opacity/opacity.stories.js
index ab6ca65..cf5aa97 100644
--- a/src/components/tokens/opacity-tokens/opacity-tokens.stories.js
+++ b/src/tokens/opacity/opacity.stories.js
@@ -1,6 +1,6 @@
-import template from './opacity-tokens.twig';
-import figma from '../../../../config/configma.json';
-import tokens from '../../../tokens/transformed.tokens.json';
+import template from './opacity.twig';
+import figma from '../../../config/configma.json';
+import tokens from '../transformed.tokens.json';
 
 const data = { opacity: tokens.opacity };
 
diff --git a/src/components/tokens/opacity-tokens/opacity-tokens.twig b/src/tokens/opacity/opacity.twig
similarity index 100%
rename from src/components/tokens/opacity-tokens/opacity-tokens.twig
rename to src/tokens/opacity/opacity.twig
diff --git a/src/tokens/sizes/sizes.stories.js b/src/tokens/sizes/sizes.stories.js
new file mode 100644
index 0000000..0705786
--- /dev/null
+++ b/src/tokens/sizes/sizes.stories.js
@@ -0,0 +1,18 @@
+import sizeTwig from './sizes.twig';
+import figma from '../../../config/configma.json';
+import tokens from '../transformed.tokens.json';
+
+const sizeData = { size: tokens.size };
+
+export default {
+  title: 'Tokens/Sizes',
+};
+
+export const Sizes = () => sizeTwig(sizeData);
+
+Sizes.parameters = {
+  design: {
+    type: 'figma',
+    url: figma.url + figma.size,
+  },
+};
diff --git a/src/components/tokens/size-tokens/size-tokens.twig b/src/tokens/sizes/sizes.twig
similarity index 100%
rename from src/components/tokens/size-tokens/size-tokens.twig
rename to src/tokens/sizes/sizes.twig
diff --git a/src/components/tokens/spacing-tokens/spacing-tokens.stories.js b/src/tokens/spacing/spacing.stories.js
similarity index 59%
rename from src/components/tokens/spacing-tokens/spacing-tokens.stories.js
rename to src/tokens/spacing/spacing.stories.js
index 814d506..06e5117 100644
--- a/src/components/tokens/spacing-tokens/spacing-tokens.stories.js
+++ b/src/tokens/spacing/spacing.stories.js
@@ -1,6 +1,6 @@
-import template from './spacing-tokens.twig';
-import figma from '../../../../config/configma.json';
-import tokens from '../../../tokens/transformed.tokens.json';
+import template from './spacing.twig';
+import figma from '../../../config/configma.json';
+import tokens from '../transformed.tokens.json';
 
 const data = { spacing: tokens.spacing };
 
diff --git a/src/components/tokens/spacing-tokens/spacing-tokens.twig b/src/tokens/spacing/spacing.twig
similarity index 100%
rename from src/components/tokens/spacing-tokens/spacing-tokens.twig
rename to src/tokens/spacing/spacing.twig
diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index b1d97a5..58e256a 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -65,6 +65,9 @@
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
+  --utility-menu-color-bg: #fff;
+  --utility-menu-color-link-default: #006089;
+  --utility-menu-color-link-hover: #0080b7;
   --main-menu-color-bg: #fff;
   --main-menu-color-link-bg: #fff;
   --main-menu-color-link-bg-hover: #9ce1ff;
@@ -89,6 +92,14 @@
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;
   --input-bkg: #fff;
+  --header-search-background: #006089;
+  --header-search-text-icon: #fff;
+  --footer-background-default: #006089;
+  --footer-background-light: #fff;
+  --footer-heading-default: #9ce1ff;
+  --footer-heading-dark: #0080b7;
+  --footer-icon-default: #9ce1ff;
+  --footer-icon-dark: #0080b7;
   --fieldset-color-bg: #fff;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
@@ -135,10 +146,10 @@
   --button-radius: 0.25rem;
   --button-radius-hover: 0.25rem;
   --button-radius-focus: 0.25rem;
-  --button-border-width-outline-focus: 2px;
-  --button-border-width-border: 2px;
-  --button-border-width-border-hover: 2px;
-  --button-border-width-border-focus: 2px;
+  --button-border-width-outline-focus: 1px;
+  --button-border-width-border: 1px;
+  --button-border-width-border-hover: 1px;
+  --button-border-width-border-focus: 1px;
   --button-text-case: uppercase;
   --button-border-color: #005f89;
   --button-border-color-hover: #00405b;
@@ -149,6 +160,21 @@
   --breadcrumb-text-hover: #192125;
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
+  --banner-button-text: #00202e;
+  --banner-button-border: #fff;
+  --banner-button-background: #9ce1ff;
+  --banner-text: #fff;
+  --banner-background: #006089;
+  --banner-background-opacity: 0.75;
+  --announcement-background-default: #fff;
+  --announcement-background-light: #9ce1ff;
+  --announcement-background-dark: #006089;
+  --announcement-heading-default: #0080b7;
+  --announcement-heading-light: #9ce1ff;
+  --announcement-heading-dark: #006089;
+  --announcement-icon-default: #0080b7;
+  --announcement-icon-dark: #00405b;
+  --announcement-icon-light: #9ce1ff;
   --accordion-header: [object Object];
   --accordion-p: [object Object];
   --accordion-color-body: #00202e;
@@ -190,6 +216,46 @@
   --color-grays-800: #192125;
   --color-grays-900: #101618;
   --color-grays-1000: #080b0c;
+  --color-wup-gold-100: #fff9f2;
+  --color-wup-gold-200: #fff2e4;
+  --color-wup-gold-300: #ffe5c6;
+  --color-wup-gold-400: #ffd7a3;
+  --color-wup-gold-500: #ffc875;
+  --color-wup-gold-600: #ffb81c;
+  --color-wup-gold-700: #e4a519;
+  --color-wup-gold-800: #c68f16;
+  --color-wup-gold-900: #a17412;
+  --color-wup-gold-1000: #72520d;
+  --color-wup-blue-100: #f2f2f6;
+  --color-wup-blue-200: #e4e5ed;
+  --color-wup-blue-300: #c6c8db;
+  --color-wup-blue-400: #a1a6c6;
+  --color-wup-blue-500: #727baf;
+  --color-wup-blue-600: #003594;
+  --color-wup-blue-700: #002f84;
+  --color-wup-blue-800: #002973;
+  --color-wup-blue-900: #00225e;
+  --color-wup-blue-1000: #001842;
+  --color-wup-legacy-gold-100: #f9f6f2;
+  --color-wup-legacy-gold-200: #f2ece4;
+  --color-wup-legacy-gold-300: #e4d7c6;
+  --color-wup-legacy-gold-400: #d6bfa1;
+  --color-wup-legacy-gold-500: #c6a572;
+  --color-wup-legacy-gold-600: #b58500;
+  --color-wup-legacy-gold-700: #a27700;
+  --color-wup-legacy-gold-800: #8c6700;
+  --color-wup-legacy-gold-900: #725400;
+  --color-wup-legacy-gold-1000: #513b00;
+  --color-wup-legacy-blue-100: #f2f2f3;
+  --color-wup-legacy-blue-200: #e4e4e7;
+  --color-wup-legacy-blue-300: #c6c6cb;
+  --color-wup-legacy-blue-400: #a2a3ac;
+  --color-wup-legacy-blue-500: #737585;
+  --color-wup-legacy-blue-600: #141b4d;
+  --color-wup-legacy-blue-700: #121845;
+  --color-wup-legacy-blue-800: #0f153c;
+  --color-wup-legacy-blue-900: #0d1131;
+  --color-wup-legacy-blue-1000: #090c22;
   --font-family-body: Inter;
   --font-family-heading: Inter;
   --spacing-xs: 0.125rem;
@@ -323,27 +389,34 @@
   --token-set-order-0: global;
   --token-set-order-1: semantic;
   --token-set-order-2: components/accordion;
-  --token-set-order-3: components/blockQuote;
-  --token-set-order-4: components/breadcrumbs;
-  --token-set-order-5: components/button;
-  --token-set-order-6: components/card;
-  --token-set-order-7: components/checkbox;
-  --token-set-order-8: components/cta;
-  --token-set-order-9: components/fieldset;
-  --token-set-order-10: components/input;
-  --token-set-order-11: components/link;
-  --token-set-order-12: components/mainMenu;
-  --token-set-order-13: components/pager;
-  --token-set-order-14: components/radioButton;
-  --token-set-order-15: components/selectdropdown;
-  --token-set-order-16: components/status;
-  --token-set-order-17: components/table;
-  --token-set-order-18: components/tabs;
-  --token-set-order-19: components/textField;
-  --token-set-order-20: storybook;
+  --token-set-order-3: components/announcement;
+  --token-set-order-4: components/banner;
+  --token-set-order-5: components/blockQuote;
+  --token-set-order-6: components/breadcrumbs;
+  --token-set-order-7: components/button;
+  --token-set-order-8: components/card;
+  --token-set-order-9: components/checkbox;
+  --token-set-order-10: components/cta;
+  --token-set-order-11: components/fieldset;
+  --token-set-order-12: components/footer;
+  --token-set-order-13: components/header;
+  --token-set-order-14: components/input;
+  --token-set-order-15: components/link;
+  --token-set-order-16: components/mainMenu;
+  --token-set-order-17: components/utilityMenu;
+  --token-set-order-18: components/pager;
+  --token-set-order-19: components/radioButton;
+  --token-set-order-20: components/selectdropdown;
+  --token-set-order-21: components/status;
+  --token-set-order-22: components/table;
+  --token-set-order-23: components/tabs;
+  --token-set-order-24: components/textField;
+  --token-set-order-25: storybook;
   --emulsify-ui-kit-full: [object Object];
   --emulsify-global: [object Object];
   --emulsify-semantic: [object Object];
   --emulsify-storybook-only: [object Object];
   --emulsify-components: [object Object];
+  --main: [object Object];
+  --gold: [object Object];
 }
diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
index 0ff172f..b46e49d 100644
--- a/src/tokens/transformed.tokens.json
+++ b/src/tokens/transformed.tokens.json
@@ -323,6 +323,24 @@
       }
     }
   },
+  "utilityMenu": {
+    "color": {
+      "bg": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "link": {
+        "default": {
+          "value": "#006089",
+          "type": "color"
+        },
+        "hover": {
+          "value": "#0080b7",
+          "type": "color"
+        }
+      }
+    }
+  },
   "mainMenu": {
     "color": {
       "bg": {
@@ -440,6 +458,50 @@
       "type": "color"
     }
   },
+  "header": {
+    "search": {
+      "background": {
+        "value": "#006089",
+        "type": "color"
+      },
+      "text-icon": {
+        "value": "#ffffff",
+        "type": "color"
+      }
+    }
+  },
+  "footer": {
+    "background": {
+      "default": {
+        "value": "#006089",
+        "type": "color"
+      },
+      "light": {
+        "value": "#ffffff",
+        "type": "color"
+      }
+    },
+    "heading": {
+      "default": {
+        "value": "#9ce1ff",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#0080b7",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "default": {
+        "value": "#9ce1ff",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#0080b7",
+        "type": "color"
+      }
+    }
+  },
   "fieldset": {
     "color": {
       "bg": {
@@ -764,6 +826,82 @@
       }
     }
   },
+  "banner": {
+    "button": {
+      "text": {
+        "value": "#00202e",
+        "type": "color"
+      },
+      "border": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "background": {
+        "value": "#9ce1ff",
+        "type": "color"
+      }
+    },
+    "text": {
+      "value": "#ffffff",
+      "type": "color",
+      "subheading": {
+        "value": "{color.text.white}",
+        "type": "color"
+      }
+    },
+    "background": {
+      "value": "#006089",
+      "type": "color"
+    },
+    "background-opacity": {
+      "value": 0.75,
+      "type": "opacity"
+    }
+  },
+  "announcement": {
+    "background": {
+      "default": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "light": {
+        "value": "#9ce1ff",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#006089",
+        "type": "color"
+      }
+    },
+    "heading": {
+      "default": {
+        "value": "#0080b7",
+        "type": "color"
+      },
+      "light": {
+        "value": "#9ce1ff",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#006089",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "default": {
+        "value": "#0080b7",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#00405b",
+        "type": "color"
+      },
+      "light": {
+        "value": "#9ce1ff",
+        "type": "color"
+      }
+    }
+  },
   "accordion": {
     "header": {
       "value": {
@@ -957,6 +1095,178 @@
         "value": "#080b0c",
         "type": "color"
       }
+    },
+    "WUP": {
+      "gold": {
+        "100": {
+          "value": "#fff9f2",
+          "type": "color"
+        },
+        "200": {
+          "value": "#fff2e4",
+          "type": "color"
+        },
+        "300": {
+          "value": "#ffe5c6",
+          "type": "color"
+        },
+        "400": {
+          "value": "#ffd7a3",
+          "type": "color"
+        },
+        "500": {
+          "value": "#ffc875",
+          "type": "color"
+        },
+        "600": {
+          "value": "#ffb81c",
+          "type": "color"
+        },
+        "700": {
+          "value": "#e4a519",
+          "type": "color"
+        },
+        "800": {
+          "value": "#c68f16",
+          "type": "color"
+        },
+        "900": {
+          "value": "#a17412",
+          "type": "color"
+        },
+        "1000": {
+          "value": "#72520d",
+          "type": "color"
+        }
+      },
+      "blue": {
+        "100": {
+          "value": "#f2f2f6",
+          "type": "color"
+        },
+        "200": {
+          "value": "#e4e5ed",
+          "type": "color"
+        },
+        "300": {
+          "value": "#c6c8db",
+          "type": "color"
+        },
+        "400": {
+          "value": "#a1a6c6",
+          "type": "color"
+        },
+        "500": {
+          "value": "#727baf",
+          "type": "color"
+        },
+        "600": {
+          "value": "#003594",
+          "type": "color"
+        },
+        "700": {
+          "value": "#002f84",
+          "type": "color"
+        },
+        "800": {
+          "value": "#002973",
+          "type": "color"
+        },
+        "900": {
+          "value": "#00225e",
+          "type": "color"
+        },
+        "1000": {
+          "value": "#001842",
+          "type": "color"
+        }
+      },
+      "legacy": {
+        "gold": {
+          "100": {
+            "value": "#f9f6f2",
+            "type": "color"
+          },
+          "200": {
+            "value": "#f2ece4",
+            "type": "color"
+          },
+          "300": {
+            "value": "#e4d7c6",
+            "type": "color"
+          },
+          "400": {
+            "value": "#d6bfa1",
+            "type": "color"
+          },
+          "500": {
+            "value": "#c6a572",
+            "type": "color"
+          },
+          "600": {
+            "value": "#b58500",
+            "type": "color"
+          },
+          "700": {
+            "value": "#a27700",
+            "type": "color"
+          },
+          "800": {
+            "value": "#8c6700",
+            "type": "color"
+          },
+          "900": {
+            "value": "#725400",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#513b00",
+            "type": "color"
+          }
+        },
+        "blue": {
+          "100": {
+            "value": "#f2f2f3",
+            "type": "color"
+          },
+          "200": {
+            "value": "#e4e4e7",
+            "type": "color"
+          },
+          "300": {
+            "value": "#c6c6cb",
+            "type": "color"
+          },
+          "400": {
+            "value": "#a2a3ac",
+            "type": "color"
+          },
+          "500": {
+            "value": "#737585",
+            "type": "color"
+          },
+          "600": {
+            "value": "#141b4d",
+            "type": "color"
+          },
+          "700": {
+            "value": "#121845",
+            "type": "color"
+          },
+          "800": {
+            "value": "#0f153c",
+            "type": "color"
+          },
+          "900": {
+            "value": "#0d1131",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#090c22",
+            "type": "color"
+          }
+        }
+      }
     }
   },
   "fontFamily": {
@@ -2148,74 +2458,94 @@
       "type": "other"
     },
     "3": {
-      "value": "components/blockQuote",
+      "value": "components/announcement",
       "type": "other"
     },
     "4": {
-      "value": "components/breadcrumbs",
+      "value": "components/banner",
       "type": "other"
     },
     "5": {
-      "value": "components/button",
+      "value": "components/blockQuote",
       "type": "other"
     },
     "6": {
-      "value": "components/card",
+      "value": "components/breadcrumbs",
       "type": "other"
     },
     "7": {
-      "value": "components/checkbox",
+      "value": "components/button",
       "type": "other"
     },
     "8": {
-      "value": "components/cta",
+      "value": "components/card",
       "type": "other"
     },
     "9": {
-      "value": "components/fieldset",
+      "value": "components/checkbox",
       "type": "other"
     },
     "10": {
-      "value": "components/input",
+      "value": "components/cta",
       "type": "other"
     },
     "11": {
-      "value": "components/link",
+      "value": "components/fieldset",
       "type": "other"
     },
     "12": {
-      "value": "components/mainMenu",
+      "value": "components/footer",
       "type": "other"
     },
     "13": {
-      "value": "components/pager",
+      "value": "components/header",
       "type": "other"
     },
     "14": {
-      "value": "components/radioButton",
+      "value": "components/input",
       "type": "other"
     },
     "15": {
-      "value": "components/selectdropdown",
+      "value": "components/link",
       "type": "other"
     },
     "16": {
-      "value": "components/status",
+      "value": "components/mainMenu",
       "type": "other"
     },
     "17": {
-      "value": "components/table",
+      "value": "components/utilityMenu",
       "type": "other"
     },
     "18": {
-      "value": "components/tabs",
+      "value": "components/pager",
       "type": "other"
     },
     "19": {
-      "value": "components/textField",
+      "value": "components/radioButton",
       "type": "other"
     },
     "20": {
+      "value": "components/selectdropdown",
+      "type": "other"
+    },
+    "21": {
+      "value": "components/status",
+      "type": "other"
+    },
+    "22": {
+      "value": "components/table",
+      "type": "other"
+    },
+    "23": {
+      "value": "components/tabs",
+      "type": "other"
+    },
+    "24": {
+      "value": "components/textField",
+      "type": "other"
+    },
+    "25": {
       "value": "storybook",
       "type": "other"
     }
@@ -2322,15 +2652,6 @@
       "pager.text.hover": "S:d5268cc95f0ca68a28f35d87395f9ce37893fe23,",
       "pager.text.focus": "S:d03b986e8d65e0c71a1837ec7325ffbce6d6aaa7,",
       "pager.fill.hover": "S:5bdc99f7ec11756cdef48ec3e13c9b4dd6f4ea81,",
-      "mainMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,",
-      "mainMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,",
-      "mainMenu.color.link.bg-hover": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,",
-      "mainMenu.color.link.label": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,",
-      "mainMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,",
-      "mainMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,",
-      "mainMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,",
-      "mainMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,",
-      "mainMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,",
       "link.default": "S:9fd4db376033a945bbc2bf5bfe8a698e68bd6f1a,",
       "link.hover": "S:e6b1afc9022d41b4217e773a9ab4abf90329cf46,",
       "color.fieldset.bg": "S:bfe975e6026fa7f0aa7fd11985d9ebaeb6565d17,",
@@ -2433,11 +2754,19 @@
       "color.grays.900": "S:d14dafeba041e023bd5c5d2c458c10f88801e824,",
       "color.grays.1000": "S:588f6731fa9753788b0b48bb7c575f3b94991a69,",
       "checkbox.color.label": "S:dd27f922df752738d999c185f11b67e77134feac,",
-      "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,"
+      "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,",
+      "utilityMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,",
+      "utilityMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,",
+      "utilityMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,",
+      "utilityMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,",
+      "utilityMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,",
+      "utilityMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,",
+      "utilityMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,",
+      "utilityMenu.color.link.default": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,",
+      "utilityMenu.color.link.hover": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,"
     },
     "selectedTokenSets": {
       "global": "enabled",
-      "semantic": "enabled",
       "storybook": "enabled",
       "components/accordion": "enabled",
       "components/blockQuote": "enabled",
@@ -2456,7 +2785,13 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled"
+      "components/textField": "enabled",
+      "semantic": "enabled",
+      "components/announcement": "enabled",
+      "components/banner": "enabled",
+      "components/footer": "enabled",
+      "components/header": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:16908",
     "$figmaModeId": "23237:10",
@@ -2506,15 +2841,6 @@
       "pager.text.hover": "2e1149296e028f68d0590547182eb3fa046b0799",
       "pager.text.focus": "f597287eb8465595918f5af8c56a3f803417cf81",
       "pager.fill.hover": "e7c4c208bc4d7ed93b94794070642830984f1687",
-      "mainMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23",
-      "mainMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2",
-      "mainMenu.color.link.bg-hover": "29ea5911b9675ae3920cf9f26602f612fe9e33d5",
-      "mainMenu.color.link.label": "a28d88530a052b75025ad58244a622f52538ffdb",
-      "mainMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805",
-      "mainMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128",
-      "mainMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477",
-      "mainMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83",
-      "mainMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268",
       "link.default": "52f2a6ae3ef87bb2b4c96e2b8316e609a1f3e4e0",
       "link.hover": "602f312f7c40299996ccaf31cd8340e88ddcd6a8",
       "input.color.label": "40806b82869b549ff22858fd677df5c1c6d22cad",
@@ -2636,7 +2962,16 @@
       "checkbox.spacing.gap": "59fbad63c0994ee956f8790e994534f9f5f5e922",
       "checkbox.color.label": "4db65c0b61319b6c85cdb9c1b683d84e2f65ff52",
       "checkbox.color.label-disabled": "3a5dec39f06f92904d80c2096f9c439ae0b5d09a",
-      "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310"
+      "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310",
+      "utilityMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23",
+      "utilityMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2",
+      "utilityMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805",
+      "utilityMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128",
+      "utilityMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477",
+      "utilityMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83",
+      "utilityMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268",
+      "utilityMenu.color.link.default": "29ea5911b9675ae3920cf9f26602f612fe9e33d5",
+      "utilityMenu.color.link.hover": "a28d88530a052b75025ad58244a622f52538ffdb"
     },
     "type": "other",
     "value": "[object Object]"
@@ -2645,7 +2980,8 @@
     "id": "0a5c4562bd35f00ce8a339239980a3842147c0bd",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "global": "enabled"
+      "global": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17089",
     "$figmaModeId": "23237:11",
@@ -2698,7 +3034,8 @@
     "id": "ca91148967a5dcc80f7e50f6ccfe35b30efd5f2f",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "semantic": "enabled"
+      "semantic": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17133",
     "$figmaModeId": "23237:12",
@@ -2721,7 +3058,8 @@
     "id": "16a10d373d39988a75c7d612cd449a633f373c44",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "storybook": "source"
+      "storybook": "source",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17144",
     "$figmaModeId": "23237:13",
@@ -2750,7 +3088,8 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled"
+      "components/textField": "enabled",
+      "components/utilityMenu": "disabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17145",
     "$figmaModeId": "23237:14",
@@ -2796,15 +3135,6 @@
       "pager.text.hover": "067e5560a9bcaee73e961d449ec580cabede8a17",
       "pager.text.focus": "039853336af697ea5a3d09db6b64f78e7c45c35d",
       "pager.fill.hover": "64071b977256beb9e45651dbbe696ac3dfb389d3",
-      "mainMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8",
-      "mainMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071",
-      "mainMenu.color.link.bg-hover": "d2185c2db3e4a1b77be017df0fb5f3376c756f50",
-      "mainMenu.color.link.label": "4c190c6dffed1c15773123f079e53c195ae53054",
-      "mainMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d",
-      "mainMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592",
-      "mainMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb",
-      "mainMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1",
-      "mainMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91",
       "link.default": "3faaab82a9c834600aaa7ad75621d14583bd9974",
       "link.hover": "e44dbb7433cdb45720e896b1126e28c9bff490e4",
       "input.color.label": "1b07b68bbc2c3339a39e57980e5b0dd66e848174",
@@ -2876,8 +3206,76 @@
       "blockQuote.padding.y": "398508657cd7d1bbd686f838a27db3f0c3ee3f74",
       "checkbox.spacing.gap": "e4d2049d0ee84eceee61f25e3264c2526cfe746a",
       "checkbox.color.label": "d2a0283754f673d1b92c74eef12f3bbe06845d3b",
-      "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838"
+      "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838",
+      "utilityMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8",
+      "utilityMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071",
+      "utilityMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d",
+      "utilityMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592",
+      "utilityMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb",
+      "utilityMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1",
+      "utilityMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91",
+      "utilityMenu.color.link.default": "d2185c2db3e4a1b77be017df0fb5f3376c756f50",
+      "utilityMenu.color.link.hover": "4c190c6dffed1c15773123f079e53c195ae53054"
+    },
+    "type": "other",
+    "value": "[object Object]"
+  },
+  "Main": {
+    "id": "865132ed4de1f234ac10e07b09e233a0fbadd978",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "global": "enabled",
+      "components/accordion": "enabled",
+      "components/blockQuote": "enabled",
+      "components/breadcrumbs": "enabled",
+      "components/button": "enabled",
+      "components/card": "enabled",
+      "components/checkbox": "enabled",
+      "components/cta": "enabled",
+      "components/fieldset": "enabled",
+      "components/input": "enabled",
+      "components/link": "enabled",
+      "components/mainMenu": "enabled",
+      "components/pager": "enabled",
+      "components/radioButton": "enabled",
+      "components/selectdropdown": "enabled",
+      "components/status": "enabled",
+      "components/table": "enabled",
+      "components/tabs": "enabled",
+      "components/textField": "enabled",
+      "semantic": "enabled",
+      "components/utilityMenu": "disabled"
+    },
+    "group": "WUP",
+    "type": "other",
+    "value": "[object Object]"
+  },
+  "Gold": {
+    "id": "14ff327c549a6b3a1dd78f86615f1e5bed0e367d",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "global": "enabled",
+      "components/accordion": "enabled",
+      "components/blockQuote": "enabled",
+      "components/breadcrumbs": "enabled",
+      "components/button": "enabled",
+      "components/card": "enabled",
+      "components/checkbox": "enabled",
+      "components/cta": "enabled",
+      "components/fieldset": "enabled",
+      "components/input": "enabled",
+      "components/link": "enabled",
+      "components/mainMenu": "enabled",
+      "components/pager": "enabled",
+      "components/radioButton": "enabled",
+      "components/selectdropdown": "enabled",
+      "components/status": "enabled",
+      "components/table": "enabled",
+      "components/tabs": "enabled",
+      "components/textField": "enabled",
+      "components/utilityMenu": "disabled"
     },
+    "group": "WUP",
     "type": "other",
     "value": "[object Object]"
   }
diff --git a/src/tokens/type-faces/type-faces.stories.js b/src/tokens/type-faces/type-faces.stories.js
new file mode 100644
index 0000000..57052d7
--- /dev/null
+++ b/src/tokens/type-faces/type-faces.stories.js
@@ -0,0 +1,18 @@
+import typeFacesTwig from './type-faces.twig';
+import figma from '../../../config/configma.json';
+import tokens from '../transformed.tokens.json';
+
+const typeFacesData = { fontFamily: tokens['font-family'] };
+
+export default {
+  title: 'Tokens/Type Faces',
+};
+
+export const TypeFaces = () => typeFacesTwig(typeFacesData);
+
+TypeFaces.parameters = {
+  design: {
+    type: 'figma',
+    url: figma.url + figma.typeScale,
+  },
+};
diff --git a/src/tokens/type-faces/type-faces.twig b/src/tokens/type-faces/type-faces.twig
new file mode 100644
index 0000000..5208c4f
--- /dev/null
+++ b/src/tokens/type-faces/type-faces.twig
@@ -0,0 +1,15 @@
+<div>
+  <h2 class="sb-title">Type Faces</h2>
+
+  <ul class="sb-list">
+    {% for fontFamily, value in _context.fontFamily %}
+      <li class="sb-list__item">
+        <span class="sb-list__value">{{value.value}}</span>
+        <span class="sb-list__custom-property">
+          <code class="sb-custom-property-name">var(--font-family-{{fontFamily}})</code>
+        </span>
+        <h2 class="sb-list__label" style="font-family: {{value.value}};">{{fontFamily}}</h2>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/src/tokens/type-scale/type-scale.stories.js b/src/tokens/type-scale/type-scale.stories.js
new file mode 100644
index 0000000..2f3961c
--- /dev/null
+++ b/src/tokens/type-scale/type-scale.stories.js
@@ -0,0 +1,18 @@
+import typeScaleTwig from './type-scale.twig';
+import figma from '../../../config/configma.json';
+import tokens from '../transformed.tokens.json';
+
+const typeScaleData = { fontSize: tokens['font-size'] };
+
+export default {
+  title: 'Tokens/Type Scale',
+};
+
+export const TypeScale = () => typeScaleTwig(typeScaleData);
+
+TypeScale.parameters = {
+  design: {
+    type: 'figma',
+    url: figma.url + figma.typeScale,
+  },
+};
diff --git a/src/components/tokens/fontSize-tokens/_fontSizes.twig b/src/tokens/type-scale/type-scale.twig
similarity index 92%
rename from src/components/tokens/fontSize-tokens/_fontSizes.twig
rename to src/tokens/type-scale/type-scale.twig
index f8c816a..4174fdc 100644
--- a/src/components/tokens/fontSize-tokens/_fontSizes.twig
+++ b/src/tokens/type-scale/type-scale.twig
@@ -1,5 +1,5 @@
 <div>
-	<h2 class="sb-title">Font Sizes</h2>
+	<h2 class="sb-title">Type Scale</h2>
 
 	<ul class="sb-list">
 		{% for fontSize, value in _context.fontSize|reverse %}

From 0377ad59e2bf6efc915c9c6286952929095b8f88 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Mon, 16 Sep 2024 17:18:00 -0500
Subject: [PATCH 06/44] feat: rework color tokens for various structures

---
 .../{_announcement.scss => announcement.scss} |   0
 src/components/announcement/announcement.twig |   1 +
 .../navigation/breadcrumbs/breadcrumbs.scss   |   2 -
 .../navigation/main/_main-item.scss           |   1 -
 .../navigation/main/_main-toggle.scss         |   2 -
 .../navigation/main/_main-wrapper.scss        |   2 -
 src/foundation/colors/_color-definitions.scss | 138 ----------------
 src/foundation/colors/cl-colors.scss          | 135 ----------------
 src/foundation/colors/color-properties.scss   |  93 -----------
 src/foundation/colors/colors.js               |  24 ---
 src/foundation/colors/colors.stories.js       |  12 --
 src/foundation/colors/colors.twig             |  31 ----
 src/foundation/colors/colors.yml              |  69 --------
 src/foundation/functions/_color.scss          | 148 ------------------
 src/foundation/utility/_utility.scss          |   7 +-
 src/foundation/utility/cl-base.scss           |  13 +-
 src/layout/container/_container.scss          |   1 -
 src/layout/placeholder/_placeholder.scss      |   2 -
 src/tokens/colors/color.stories.js            |   4 +-
 src/tokens/colors/color.twig                  |  43 +++--
 20 files changed, 45 insertions(+), 683 deletions(-)
 rename src/components/announcement/{_announcement.scss => announcement.scss} (100%)
 delete mode 100644 src/foundation/colors/_color-definitions.scss
 delete mode 100644 src/foundation/colors/cl-colors.scss
 delete mode 100644 src/foundation/colors/color-properties.scss
 delete mode 100644 src/foundation/colors/colors.js
 delete mode 100644 src/foundation/colors/colors.stories.js
 delete mode 100644 src/foundation/colors/colors.twig
 delete mode 100644 src/foundation/colors/colors.yml
 delete mode 100644 src/foundation/functions/_color.scss

diff --git a/src/components/announcement/_announcement.scss b/src/components/announcement/announcement.scss
similarity index 100%
rename from src/components/announcement/_announcement.scss
rename to src/components/announcement/announcement.scss
diff --git a/src/components/announcement/announcement.twig b/src/components/announcement/announcement.twig
index 3da9053..a4edb4e 100644
--- a/src/components/announcement/announcement.twig
+++ b/src/components/announcement/announcement.twig
@@ -38,6 +38,7 @@
     <div {{ bem('action', [announcement__variant], announcement__base_class) }}>
       {% include "@components/button/button.twig" with {
         button__content: announcement__button_text,
+        button__style: 'primary',
         button__attributes: {
           'href': announcement__button_url,
         }
diff --git a/src/components/navigation/breadcrumbs/breadcrumbs.scss b/src/components/navigation/breadcrumbs/breadcrumbs.scss
index a840f5f..590f6a5 100644
--- a/src/components/navigation/breadcrumbs/breadcrumbs.scss
+++ b/src/components/navigation/breadcrumbs/breadcrumbs.scss
@@ -1,7 +1,5 @@
 @use '../../../foundation/breakpoints/breakpoints' as *;
 @use '../../../foundation/motion/motion' as *;
-@use '../../../foundation/functions/color' as *;
-@use '../../../foundation/spacing/spacing' as *;
 @use '../../../foundation/utility/utility' as *;
 @use '../../link/link' as *;
 
diff --git a/src/components/navigation/main/_main-item.scss b/src/components/navigation/main/_main-item.scss
index 2d3429c..c623994 100644
--- a/src/components/navigation/main/_main-item.scss
+++ b/src/components/navigation/main/_main-item.scss
@@ -1,6 +1,5 @@
 @use '../../../foundation/breakpoints/breakpoints' as *;
 @use '../../../foundation/motion/motion' as *;
-@use '../../../foundation/functions/color' as *;
 
 .main-nav__item {
   position: relative;
diff --git a/src/components/navigation/main/_main-toggle.scss b/src/components/navigation/main/_main-toggle.scss
index cb6207d..dcff261 100644
--- a/src/components/navigation/main/_main-toggle.scss
+++ b/src/components/navigation/main/_main-toggle.scss
@@ -1,7 +1,5 @@
 @use '../../../foundation/breakpoints/breakpoints' as *;
 @use '../../../foundation/motion/motion' as *;
-@use '../../../foundation/functions/color' as *;
-@use '../../../foundation/spacing/spacing' as *;
 @use '../../../foundation/utility/utility' as *;
 
 .main-nav__toggle {
diff --git a/src/components/navigation/main/_main-wrapper.scss b/src/components/navigation/main/_main-wrapper.scss
index b9791fc..67e0aa9 100644
--- a/src/components/navigation/main/_main-wrapper.scss
+++ b/src/components/navigation/main/_main-wrapper.scss
@@ -1,7 +1,5 @@
 @use '../../../foundation/breakpoints/breakpoints' as *;
 @use '../../../foundation/motion/motion' as *;
-@use '../../../foundation/functions/color' as *;
-@use '../../../foundation/spacing/spacing' as *;
 
 .main-nav__menu-list-wrapper {
   @include transition;
diff --git a/src/foundation/colors/_color-definitions.scss b/src/foundation/colors/_color-definitions.scss
deleted file mode 100644
index 04e6d27..0000000
--- a/src/foundation/colors/_color-definitions.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-// - Color Palette Definitions : Use these via the `clr` function.
-// - Colors can be defined using any valid color value. (name, hex, rgb, rgba, hsl, hsla)
-// - Map structure should follow [theme_name] : [color_name] : [variant_name]
-// - [variant_name] is optional.
-// - If [variant_name] is present a 'base' definition is expected.
-// - Themes and colors should not have matching names.
-// - The default theme should contain all possible colors. Needed for fallback purposes.
-// - Additional themes can override default theme definitions or fallback
-// to the default theme's color definition.
-// $grey-25-solid: #f3f3f3ff !default;
-// $grey-100-25: #d0d0d040 !default;
-// $yellow-100: #fffdbdff !default;
-// $yellow-200: #fff675ff !default;
-// $yellow-300: #ffeb0aff !default;
-// $yellow-400: #e4c902ff !default;
-// $gray-100: #d0d0d0ff !default;
-// $gray-200: #b1b1b1ff !default;
-// $gray-300: #919292ff !default;
-// $gray-400: #727273ff !default;
-// $gray-500: #535353ff !default;
-// $gray-600: #333434ff !default;
-// $gray-700: #18191bff !default;
-// $purple-100: #e1d4ecff !default;
-// $purple-200: #ab86c2ff !default;
-// $purple-300: #6f439aff !default;
-// $purple-400: #553375ff !default;
-// $green-100: #c0f6e9ff !default;
-// $green-200: #3ae4b9ff !default;
-// $green-300: #117d62ff !default;
-// $green-400: #00472fff !default;
-// $blue-100: #97cdecff !default;
-// $blue-200: #41a4ddff !default;
-// $blue-300: #207cb1ff !default;
-// $blue-400: #1a2c57ff !default;
-// $red-100: #fab6a4ff !default;
-// $red-200: #f15b55ff !default;
-// $red-300: #b91d42ff !default;
-// $red-400: #610f22ff !default;
-// $neutral-warm: #ffeecdff !default;
-
-$color-palette: (
-  default: (
-    primary: (
-      base: #117d62,
-      dark: #00472f,
-      bright: #3ae4b9,
-      light: #c0f6e9,
-    ),
-    accent: (
-      base: #117d62,
-      dark: #00472f,
-      bright: #3ae4b9,
-      light: #c0f6e9,
-      soft: #dffaf4,
-    ),
-    background: (
-      base: #fff,
-      inverse: #18191b,
-    ),
-    text: (
-      base: #18191b,
-      inverse: #fff,
-    ),
-    neutral: (
-      base: #919292,
-      cold: #f3f1ed,
-      warm: #ffeecdff,
-      n50: #f3f3f3,
-      n75: #ccc,
-      n100: #d0d0d0,
-      n200: #b1b1b1,
-      n300: #919292,
-      n400: #727273,
-      n500: #535353,
-      n600: #333434,
-      n700: #18191bff,
-    ),
-    message: #117d62ff,
-    warning: #ffeb0aff,
-    error: #b91d42ff,
-    full-white: #fff,
-    full-black: #000,
-  ),
-  'green': (
-    accent: (
-      base: #117d62,
-      dark: #00472f,
-      bright: #3ae4b9,
-      light: #c0f6e9,
-      soft: #dffaf4,
-    ),
-  ),
-  'yellow': (
-    accent: (
-      base: #ffeb0a,
-      dark: #e4c902,
-      bright: #fff675,
-      light: #fffdbd,
-      soft: #fffdbd,
-    ),
-  ),
-  'purple': (
-    accent: (
-      base: #6f439a,
-      dark: #553375,
-      bright: #ab86c2,
-      light: #e1d4ec,
-      soft: #f0e9f5,
-    ),
-  ),
-  'blue': (
-    accent: (
-      base: #207cb1,
-      dark: #1a2c57,
-      bright: #41a4dd,
-      light: #97cdec,
-      soft: #cbe6f5,
-    ),
-  ),
-  'red': (
-    accent: (
-      base: #b91d42,
-      dark: #610f22,
-      bright: #f15b55,
-      light: #fab6a4,
-      soft: #fcdad1,
-    ),
-  ),
-  neutral: (
-    accent: (
-      base: #ffeecdff,
-      dark: #000,
-      bright: #fff,
-      light: #f3f3f3,
-      soft: #ededed,
-    ),
-  ),
-);
diff --git a/src/foundation/colors/cl-colors.scss b/src/foundation/colors/cl-colors.scss
deleted file mode 100644
index e9b9a1d..0000000
--- a/src/foundation/colors/cl-colors.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use '../functions/color' as *;
-@use './color-definitions' as *;
-
-// These styles only affect the colors "Usage" page in the component library
-.sb-show-main {
-  background-color: clr(background);
-  color: clr(text);
-  border-top: space(1) solid clr(accent);
-}
-
-.cl-colors {
-  padding: space(1);
-
-  &__list {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 0 space(2);
-    padding: 0;
-  }
-
-  &__item {
-    list-style: none;
-    padding: space(1);
-    transition: all 0.4s;
-    flex: 1 1 20%;
-    min-width: calc(#{space(1)} * 20);
-    min-height: calc(#{space(1)} * 18);
-    display: flex;
-    flex-flow: column wrap;
-    align-items: flex-start;
-    justify-content: flex-start;
-    font-weight: bold;
-  }
-
-  &__title {
-    font-size: 120%;
-    padding: space(0.25) 0;
-    display: block;
-    line-height: 1;
-  }
-
-  &__swatch {
-    display: block;
-    width: 100%;
-    padding: space(3);
-    margin: 0 0 space(0.5);
-  }
-
-  &__definition {
-    display: block;
-    width: 100%;
-    padding: space(0.25);
-    font-weight: normal;
-    color: clr(text);
-    white-space: pre-wrap;
-
-    &::before,
-    &::after {
-      display: none;
-    }
-  }
-
-  &__definition_item {
-    display: block;
-    cursor: pointer;
-    color: clr(text, 0.8);
-    margin: 0 0 space(0.25);
-    padding: space(0.25);
-    background-color: clr(text, 0.05);
-
-    &:hover {
-      color: clr(text);
-      background-color: clr(text, 0.1);
-    }
-  }
-}
-
-@mixin color-swatch($color, $variant: null) {
-  > .cl-colors__swatch {
-    background-color: clr($color, $variant);
-    box-shadow: 0 2px 10px clr(neutral, '100', 0.5);
-  }
-}
-
-// Display proper usage of the color with clr() function.
-// Display hex, rgba, and hsla definitions for reference.
-@mixin color-definition($color, $clrname, $variant: null) {
-  @if $variant {
-    $variant: ', ' + $variant;
-  }
-
-  > .cl-colors__definition {
-    &::before {
-      content: 'Usage: clr(#{$clrname}#{$variant})';
-    }
-
-    &::after {
-      content: '#{cnvrt-clr($color)}<br>rgba(#{cnvrt-clr($color, 'rgba')})<br>hsla(#{cnvrt-clr($color, 'hsla')})';
-    }
-  }
-}
-
-// Set color swatch styles based on defined color in $color-palette.
-@each $theme, $palette in $color-palette {
-  .cl-colors__list--#{$theme} {
-    background-color: clr(background);
-    padding: 0 0 space(2);
-    color: clr(text);
-  }
-
-  @each $clrname, $color in $palette {
-    @if meta.type-of($color) == map {
-      @each $variant, $value in $color {
-        @if $variant == 'base' {
-          .cl-colors__item--#{$clrname} {
-            @include color-swatch($clrname);
-            @include color-definition($value, $clrname);
-          }
-        } @else {
-          .cl-colors__item--#{$clrname}-#{$variant} {
-            @include color-swatch($clrname, $variant);
-            @include color-definition($value, $clrname, $variant);
-          }
-        }
-      }
-    } @else {
-      .cl-colors__item--#{$clrname} {
-        @include color-swatch($clrname);
-        @include color-definition($color, $clrname);
-      }
-    }
-  }
-}
diff --git a/src/foundation/colors/color-properties.scss b/src/foundation/colors/color-properties.scss
deleted file mode 100644
index fc9a35b..0000000
--- a/src/foundation/colors/color-properties.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use '../functions/color' as *;
-@use './color-definitions' as c;
-
-// Create CSS custom properties based on the color-palette map.
-// For each color variable (e.g. `text` and `background`) a css custom
-// property will be created. (e.g. `--c-text:` and `--c-background:`).
-:root {
-  // Create custom properties from the default theme.
-  @each $theme, $palette in c.$color-palette {
-    @if $theme == 'default' {
-      @each $name, $color in $palette {
-        @if meta.type-of($color) == map {
-          @each $clrname, $value in $color {
-            @if $clrname == 'base' {
-              --c-#{$name}: #{cnvrt-clr($value, $format)};
-            } @else {
-              --c-#{$name}-#{$clrname}: #{cnvrt-clr($value, $format)};
-            }
-          }
-        } @else {
-          --c-#{$name}: #{cnvrt-clr($color, $format)};
-        }
-      }
-    }
-  }
-
-  // Redefine the color custom properties when markup
-  // has a data-theme attribute set. This can be set
-  // on the body tag to affect the entire page or set
-  // on any tag within the page to affect it's children.
-  @each $theme, $palette in c.$color-palette {
-    [data-theme='#{$theme}'] {
-      @each $name, $color in $palette {
-        @if meta.type-of($color) == map {
-          @each $clrname, $value in $color {
-            @if $clrname == 'base' {
-              --c-#{$name}: #{cnvrt-clr($value, $format)};
-            } @else {
-              --c-#{$name}-#{$clrname}: #{cnvrt-clr($value, $format)};
-            }
-          }
-        } @else {
-          --c-#{$name}: #{cnvrt-clr($color, $format)};
-        }
-      }
-    }
-
-    [data-component-theme*='#{$theme}'] {
-      @each $name, $color in $palette {
-        @if meta.type-of($color) == map {
-          @each $clrname, $value in $color {
-            @if $clrname == 'base' {
-              --c-#{$name}: #{cnvrt-clr($value, $format)};
-            } @else {
-              --c-#{$name}-#{$clrname}: #{cnvrt-clr($value, $format)};
-            }
-          }
-        } @else {
-          --c-#{$name}: #{cnvrt-clr($color, $format)};
-        }
-      }
-    }
-  }
-
-  // Uncomment the following code to enable user-controllable dark mode via
-  // their OS or User-Agent setting.
-  // See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
-  // @media (prefers-color-scheme: dark) {
-  //   @each $theme, $palette in c.$color-palette {
-  //     // Change the following theme value to any theme you've defined in
-  //     // _01-color-definitions.scss to be the representative dark-mode.
-  //     @if ($theme == 'dark') {
-  //       @each $name, $color in $palette {
-  //         @if (meta.type-of($color) == map) {
-  //           @each $clrname, $value in $color {
-  //             @if ($clrname == 'base') {
-  //               --c-#{$name}: #{cnvrt-clr($value, $format)};
-  //             }
-  //             @else {
-  //               --c-#{$name}-#{$clrname}: #{cnvrt-clr($value, $format)};
-  //             }
-  //           }
-  //         }
-  //         @else {
-  //           --c-#{$name}: #{cnvrt-clr($color, $format)};
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-}
diff --git a/src/foundation/colors/colors.js b/src/foundation/colors/colors.js
deleted file mode 100644
index f2d7806..0000000
--- a/src/foundation/colors/colors.js
+++ /dev/null
@@ -1,24 +0,0 @@
-Drupal.behaviors.displayColorDefinitions = {
-  attach() {
-    function unquoted(el) {
-      return el.replace(/(^['"])|(['"]$)/g, '');
-    }
-    const elements = document.getElementsByClassName('cl-colors__definition');
-    if (elements) {
-      Array.prototype.forEach.call(elements, (element) => {
-        const stylesBefore = window.getComputedStyle(element, '::before');
-        const stylesAfter = window.getComputedStyle(element, '::after');
-        const contentBefore = stylesBefore.getPropertyValue('content');
-        const contentAfter = stylesAfter.getPropertyValue('content');
-        const spanBefore = document.createElement('span');
-        const spanAfter = document.createElement('span');
-        spanBefore.classList.add('cl-colors__definition_item');
-        spanAfter.classList.add('cl-colors__definition_item');
-        spanBefore.innerHTML = unquoted(contentBefore);
-        spanAfter.innerHTML = unquoted(contentAfter);
-        element.appendChild(spanBefore);
-        element.appendChild(spanAfter);
-      });
-    }
-  },
-};
diff --git a/src/foundation/colors/colors.stories.js b/src/foundation/colors/colors.stories.js
deleted file mode 100644
index 5fd3608..0000000
--- a/src/foundation/colors/colors.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import colorsTwig from './colors.twig';
-import colorsData from './colors.yml';
-import './colors';
-
-/**
- * Storybook Definition.
- */
-export default {
-  title: 'Base/Colors',
-};
-
-export const Colors = () => colorsTwig(colorsData);
diff --git a/src/foundation/colors/colors.twig b/src/foundation/colors/colors.twig
deleted file mode 100644
index 0ccb5cd..0000000
--- a/src/foundation/colors/colors.twig
+++ /dev/null
@@ -1,31 +0,0 @@
-{% set colors_base_class = "cl-colors" %}
-
-<div {{ bem(colors_base_class) }}>
-	{% include "@components/text/headings/heading.twig" with {
-    heading__level: 2,
-    heading: colors_heading,
-    heading__base_class: colors_base_class,
-  } %}
-
-	{% for palette in palettes %}
-		{% set theme_name = palette.theme_name %}
-		{% include "@components/text/headings/heading.twig" with {
-      heading__level: 3,
-      heading: palette.palette_heading,
-      heading__base_class: colors_base_class,
-    } %}
-		<ul {{ bem('list', [theme_name], colors_base_class) }} data-theme="{{ theme_name }}">
-			{% for color in palette.colors %}
-				{% set color_machine = color.name|lower|replace({' ': '-'}) %}
-				{% if color.color_reverse == TRUE %}
-					{% set colors_title_modifiers = ['reverse'] %}
-				{% endif %}
-				<li {{ bem("item", [color_machine], colors_base_class) }}>
-					<span {{ bem("swatch", colors_title_modifiers, colors_base_class) }}></span>
-					<span {{ bem("title", colors_title_modifiers, colors_base_class) }}>{{ color.name }}</span>
-					<span {{ bem("definition", colors_title_modifiers, colors_base_class) }}></span>
-				</li>
-			{% endfor %}
-		</ul>
-	{% endfor %}
-</div>
diff --git a/src/foundation/colors/colors.yml b/src/foundation/colors/colors.yml
deleted file mode 100644
index 84f7c9a..0000000
--- a/src/foundation/colors/colors.yml
+++ /dev/null
@@ -1,69 +0,0 @@
-colors_heading: 'Color Palettes:'
-palettes:
-  - palette_heading: 'Global Palette'
-    theme_name: 'default'
-    colors:
-      - name: 'Primary'
-      - name: 'Primary Dark'
-      - name: 'Primary Light'
-      - name: 'Primary Bright'
-      - name: 'Text'
-      - name: 'Text Inverse'
-      - name: 'Background'
-      - name: 'Background Inverse'
-      - name: 'Neutral'
-      - name: 'Neutral Warm'
-      - name: 'Neutral n100'
-      - name: 'Neutral n200'
-      - name: 'Neutral n300'
-      - name: 'Neutral n400'
-      - name: 'Neutral n500'
-      - name: 'Neutral n600'
-      - name: 'Neutral n700'
-      - name: 'Message'
-      - name: 'Warning'
-      - name: 'Error'
-      - name: 'Full White'
-      - name: 'Full Black'
-  - palette_heading: 'Red Accents'
-    theme_name: 'red'
-    colors:
-      - name: 'Accent'
-      - name: 'Accent Dark'
-      - name: 'Accent Light'
-      - name: 'Accent Bright'
-  - palette_heading: 'Yellow Accents'
-    theme_name: 'yellow'
-    colors:
-      - name: 'Accent'
-      - name: 'Accent Dark'
-      - name: 'Accent Light'
-      - name: 'Accent Bright'
-  - palette_heading: 'Green Accents'
-    theme_name: 'green'
-    colors:
-      - name: 'Accent'
-      - name: 'Accent Dark'
-      - name: 'Accent Light'
-      - name: 'Accent Bright'
-  - palette_heading: 'Blue Accents'
-    theme_name: 'blue'
-    colors:
-      - name: 'Accent'
-      - name: 'Accent Dark'
-      - name: 'Accent Light'
-      - name: 'Accent Bright'
-  - palette_heading: 'Purple Accents'
-    theme_name: 'purple'
-    colors:
-      - name: 'Accent'
-      - name: 'Accent Dark'
-      - name: 'Accent Light'
-      - name: 'Accent Bright'
-  - palette_heading: 'Neutral Accents'
-    theme_name: 'neutral'
-    colors:
-      - name: 'Accent'
-      - name: 'Accent Dark'
-      - name: 'Accent Light'
-      - name: 'Accent Bright'
diff --git a/src/foundation/functions/_color.scss b/src/foundation/functions/_color.scss
deleted file mode 100644
index a1abc56..0000000
--- a/src/foundation/functions/_color.scss
+++ /dev/null
@@ -1,148 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use '../colors/color-definitions' as c;
-
-// Convert color values to desire format.
-// Returns hex by default.
-// Optionally returns rgb, rgba, hsl, or hsla.
-@function cnvrt-clr($color, $format: null) {
-  @if meta.type-of($color) == color {
-    @if not $format or $format == 'hex' {
-      $ie-hex: ie_hex_str($color);
-      @return string.unquote('#' + str_slice($ie-hex, 4));
-    } @else if $format == 'rgb' {
-      @return color.red($color), color.green($color), color.blue($color);
-    } @else if $format == 'rgba' {
-      @return color.red($color), color.green($color), color.blue($color),
-        opacity($color);
-    } @else if $format == 'hsl' {
-      @return color.hue($color), color.saturation($color),
-        color.lightness($color);
-    } @else if $format == 'hsla' {
-      @return color.hue($color), color.saturation($color),
-        color.lightness($color), opacity($color);
-    } @else {
-      @return '#{$format} is not a valid color format';
-    }
-  } @else {
-    @return '#{$color} is not a valid color';
-  }
-}
-
-// This color function makes it easy for you to call a color by it's
-// functional name anywhere you need.
-// E.g. to use the `text` color, you type: `color: clr(text);`
-// How it works:
-// This function works in conjunction with the dynamic css custom properties
-// defined in the _01-color-definitions.scss. The item called in the
-// function is prefixed with `var(--c-` to call the custom property for that color.
-// E.g. `color: clr(text);` will return `color: hsla(var(--c-text), 1);`
-// This function also accepts an alpha number argument that will
-// return the color value as (hsl or rgb) + alpha.
-$format: 'rgb';
-@function clr(
-  $name,
-  $variant: null,
-  $alpha: 1,
-  $theme: default,
-  $format: #{$format}
-) {
-  // Coverage: clr(text)
-  @if not $variant {
-    @if meta.type-of(map.get(map.get(c.$color-palette, $theme), $name)) == map {
-      @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), 'base'), $format)),
-        $alpha #{')'};
-    } @else {
-      @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(c.$color-palette, $theme), $name), $format)),
-        $alpha #{')'};
-    }
-  }
-
-  // Return variant as alpha value.
-  // Coverage: clr(text, 0.5), clr(text, 0.5, contrast)
-  @if $variant != null and meta.type-of($variant) == number {
-    @if map.has-key(c.$color-palette, $alpha) {
-      // Return color value if it doesn't have variations or assume
-      // the base color from multi-dimensional array.
-      @if meta.type-of(map.get(map.get(c.$color-palette, $theme), $name)) == map
-      {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$alpha}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), 'base'), $format)),
-          $variant #{')'};
-      } @else {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$alpha}, cnvrt-clr(map.get(map.get(c.$color-palette, $theme), $name), $format)),
-          $variant #{')'};
-      }
-    } @else {
-      @if meta.type-of(map.get(map.get(c.$color-palette, $theme), $name)) == map
-      {
-        @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), 'base'), $format)),
-          $variant #{')'};
-      } @else {
-        @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(c.$color-palette, $theme), $name), $format)),
-          $variant #{')'};
-      }
-    }
-  }
-
-  // Coverage: clr(text, inverse),
-  // clr(text, inverse, 0.5), clr(text, contrast), clr(text, contrast, 0.5),
-  // clr(text, inverse, contrast), clr(text, inverse, 0.5, contrast)
-  @if $variant != null and meta.type-of($variant) == string {
-    // Return theme specific color if it's defined.
-    // Coverage: clr(text, contrast), clr(text, contrast, 0.5)
-    @if map.has-key(c.$color-palette, $variant) {
-      @if meta.type-of(map.get(map.get(c.$color-palette, $theme), $name)) == map
-      {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $variant), $name), 'base'), $format)),
-          $alpha #{')'};
-      } @else {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(c.$color-palette, $variant), $name), $format)),
-          $alpha #{')'};
-      }
-    }
-
-    // Coverage: clr(text, inverse), clr(text, inverse, 0.5),
-    // clr(text, inverse, contrast), clr(text, inverse, 0.5, contrast)
-    @if meta.type-of(map.get(map.get(c.$color-palette, #{$theme}), #{$name})) ==
-      map
-    {
-      // Coverage: clr(text, inverse),
-      // clr(text, inverse, 0.5), clr(text, contrast, 0.5),
-      // clr(text, inverse, 0.5, contrast)
-      @if meta.type-of($alpha) == number {
-        @if (
-          map.has-key(c.$color-palette, $variant) and
-            meta.type-of(map.get(map.get(c.$color-palette, $variant), $name)) ==
-            map
-        ) {
-          @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $variant), $name), 'base'), $format)),
-            $alpha #{')'};
-        } @else {
-          @if (
-            meta.type-of(map.get(map.get(c.$color-palette, $theme), $name)) ==
-              map
-          ) {
-            @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), 'base'), $format)),
-              $alpha #{')'};
-          } @else {
-            @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), $variant), $format)),
-              $alpha #{')'};
-          }
-        }
-      }
-
-      // Coverage: clr(text, inverse, contrast)
-      @else if map.has-key(c.$color-palette, #{$alpha}) {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}-#{$alpha}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, #{$alpha}), $name), $variant), $format)),
-          1 #{')'};
-      } @else {
-        @return 'Property #{$alpha} must be either an alpha number or theme name.';
-      }
-    } @else {
-      @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), $variant), $format)),
-        #{$alpha} #{')'};
-    }
-  }
-}
diff --git a/src/foundation/utility/_utility.scss b/src/foundation/utility/_utility.scss
index 8521405..18ac0ac 100644
--- a/src/foundation/utility/_utility.scss
+++ b/src/foundation/utility/_utility.scss
@@ -1,6 +1,3 @@
-@use '../functions/color';
-@use '../spacing/spacing';
-
 @mixin visually-hidden {
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
@@ -19,8 +16,8 @@
 // use-cases like `focus-within` that apply to an "outer" element when something
 // "inside" has focus. e.g. The utility nav search box.
 @mixin focus-styles {
-  outline: space(0.125) dotted clr(neutral, n500) !important;
-  outline-offset: space(0.125);
+  outline: var(--spacing-xs) dotted clr(neutral, n500) !important;
+  outline-offset: var(--spacing-xs);
 }
 
 @mixin focus {
diff --git a/src/foundation/utility/cl-base.scss b/src/foundation/utility/cl-base.scss
index 623ecf2..985921a 100644
--- a/src/foundation/utility/cl-base.scss
+++ b/src/foundation/utility/cl-base.scss
@@ -39,7 +39,7 @@
 
 .sb-subtitle {
   font-family: var(--font-family-body), serif !important;
-  font-size: var(--font-size-h4);
+  font-size: var(--font-size-h3);
   opacity: var(--opacity-80);
   margin: var(--spacing-2xl) 0 var(--spacing-md);
 }
@@ -57,8 +57,7 @@
     align-items: center;
     gap: var(--spacing-xl);
     line-height: normal;
-    margin-bottom: var(--spacing-xl) !important;
-    padding-bottom: var(--spacing-xl) !important;
+    padding-block: var(--spacing-xl) !important;
     padding-left: var(--spacing-md) !important;
     border-bottom: 1px solid rgb(0 0 0 / 20%);
   }
@@ -74,6 +73,14 @@
   &__custom-property {
     min-width: 275px;
   }
+
+  &__visualization {
+    display: block;
+    width: 50px;
+    height: 50px;
+    border-radius: var(--radius-sm);
+    box-shadow: 0 3px 6px rgb(0 0 0 / 25%);
+  }
 }
 
 .sb-custom-property-name {
diff --git a/src/layout/container/_container.scss b/src/layout/container/_container.scss
index e882c96..cbbf060 100644
--- a/src/layout/container/_container.scss
+++ b/src/layout/container/_container.scss
@@ -1,5 +1,4 @@
 @use '../../foundation/breakpoints/breakpoints' as *;
-@use '../../foundation/functions/color' as *;
 @use '../../foundation/spacing/spacing' as *;
 @use '../../foundation/typography/typography' as *;
 @use '../../foundation/motion/motion' as *;
diff --git a/src/layout/placeholder/_placeholder.scss b/src/layout/placeholder/_placeholder.scss
index 9f304d2..a2e68b3 100644
--- a/src/layout/placeholder/_placeholder.scss
+++ b/src/layout/placeholder/_placeholder.scss
@@ -1,5 +1,3 @@
-@use '../../foundation/functions/color';
-
 .place-holder {
   color: var(--color-text-body);
   border: 4px dashed var(--colors-sb-visualization);
diff --git a/src/tokens/colors/color.stories.js b/src/tokens/colors/color.stories.js
index 3a499a4..c9669f8 100644
--- a/src/tokens/colors/color.stories.js
+++ b/src/tokens/colors/color.stories.js
@@ -2,7 +2,9 @@ import colorsTwig from './color.twig';
 
 import tokens from '../transformed.tokens.json';
 
-const colorsData = { colors: tokens.colors };
+const colorsData = { colors: tokens.color };
+
+console.log(tokens.color);
 
 export default {
   title: 'Tokens/Colors',
diff --git a/src/tokens/colors/color.twig b/src/tokens/colors/color.twig
index 1317507..59bd4eb 100644
--- a/src/tokens/colors/color.twig
+++ b/src/tokens/colors/color.twig
@@ -1,28 +1,43 @@
 <div>
+  <h2 class="sb-title">Colors</h2>
+
   {% for color, value in _context.colors %}
-    <h2 class="sb-title">{{color}}</h2>
+    <h2 class="sb-subtitle">{{ color }}</h2>
     {% if value.value is defined %}
       <ul class="sb-list">
-        <li style="background: var(--colors-{{color}});" class="token-card">
-          <span>
-            {{color}}
-            <span>
-              <code class="sb-custom-property-name">var(--color-{{color}})</code>
-            </span>
+        <li class="sb-list__item" class="token-card">
+          <span class="sb-list__label">{{ color }}</span>
+          <span class="sb-list__value">{{value.value}}</span>
+          <span class="sb-list__custom-property">
+            <code class="sb-custom-property-name">var(--color-{{color}})</code>
           </span>
+          <span class="sb-list__visualization" style="background-color: var(--color-{{color}});"></span>
         </li>
       </ul>
     {% else %}
       <ul class="sb-list">
         {% for nestedColor, nestedValue in value %}
-          <li style="background: var(--colors-{{color}}-{{nestedColor}});" class="token-card">
-            <span>
-              {{nestedColor}}
-              <span>
-                <code class="sb-custom-property-name">var(--color-{{color}}-{{nestedColor}})</code>
+          {% if nestedValue.value is defined %}
+            <li class="sb-list__item" class="token-card">
+              <span class="sb-list__label">{{ nestedColor }}</span>
+              <span class="sb-list__value">{{nestedValue.value}}</span>
+              <span class="sb-list__custom-property">
+                <code class="sb-custom-property-name">var(--color-{{ color|lower }}-{{nestedColor}})</code>
               </span>
-            </span>
-          </li>
+              <span class="sb-list__visualization" style="background-color: var(--color-{{ color|lower }}-{{nestedColor}});"></span>
+            </li>
+          {% else %}
+            {% for colorFamily, colorFamilyValue in nestedValue %}
+              <li class="sb-list__item" class="token-card">
+                <span class="sb-list__label">{{ nestedColor }} {{ colorFamily }}</span>
+                <span class="sb-list__value">{{ colorFamilyValue.value }}</span>
+                <span class="sb-list__custom-property">
+                  <code class="sb-custom-property-name">var(--color-{{ color|lower }}-{{ nestedColor }}-{{colorFamily}})</code>
+                </span>
+                <span class="sb-list__visualization" style="background-color: var(--color-{{ color|lower }}-{{ nestedColor }}-{{colorFamily}});"></span>
+              </li>
+            {% endfor %}
+          {% endif %}
         {% endfor %}
       </ul>
     {% endif %}

From e1b17a66e3b50059e67e5a3b3d5b93c0be845501 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Tue, 17 Sep 2024 08:37:42 -0500
Subject: [PATCH 07/44] feat: relink normalize and update grid/container
 controls

---
 src/foundation/utility/_normalize.scss    | 23 ++++++++++++++++++++++-
 src/layout/container/_container.scss      | 15 ---------------
 src/layout/container/container.stories.js | 17 +++++++++--------
 src/layout/grid/grid.stories.js           |  4 +++-
 4 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/foundation/utility/_normalize.scss b/src/foundation/utility/_normalize.scss
index 46c13c4..70a5d33 100644
--- a/src/foundation/utility/_normalize.scss
+++ b/src/foundation/utility/_normalize.scss
@@ -1,2 +1,23 @@
 // Libraries.
-@use '~normalize.css/normalize';
+@use '../../../node_modules/normalize.css/normalize.css';
+
+/* Box sizing rules */
+html {
+  box-sizing: border-box;
+}
+
+/* Set core body defaults */
+body {
+  height: 100vh;
+  overflow: hidden auto;
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
+  max-width: 100vw;
+  margin: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
diff --git a/src/layout/container/_container.scss b/src/layout/container/_container.scss
index cbbf060..49071d1 100644
--- a/src/layout/container/_container.scss
+++ b/src/layout/container/_container.scss
@@ -179,8 +179,6 @@
 }
 
 .container__heading {
-  align-self: flex-start;
-  max-width: var(--content-width);
   margin: 0 0 var(--spacing-xl);
 
   &:is(h2) {
@@ -197,18 +195,5 @@
 }
 
 .container__text {
-  align-self: flex-start;
-  margin-bottom: var(--spacing-xl);
-  max-width: var(--content-width-small);
-}
-
-.clearfix {
-  float: none;
-  clear: both;
-}
-
-.field__item:has(.container) {
-  display: flex;
-  justify-content: center;
   margin-bottom: var(--spacing-xl);
 }
diff --git a/src/layout/container/container.stories.js b/src/layout/container/container.stories.js
index 6d4bac2..e875a4d 100644
--- a/src/layout/container/container.stories.js
+++ b/src/layout/container/container.stories.js
@@ -13,40 +13,41 @@ export default {
       defaultValue: false,
     },
     width: {
+      name: 'Container Width',
       control: { type: 'select' },
       options: {
-        'Content Small': 'compressed',
-        'Content Medium': 'standard',
-        'Content Large': 'extended',
+        Small: 'compressed',
+        Medium: 'standard',
+        Large: 'extended',
+        Max: 'max',
+        Full: 'full',
       },
-      defaultValue: 'standard',
     },
     spacing: {
+      name: 'Container Spacing',
       control: { type: 'select' },
       options: {
         '0x Spacing': 'no-spacing',
         '1x Spacing': '',
         '2x Spacing': 'two-spacing',
       },
-      defaultValue: '',
     },
     alignment: {
       name: 'Component Alignment',
       options: ['left', 'center', 'right'],
       type: 'select',
-      defaultValue: 'left',
     },
     heading: {
+      name: 'Container Heading',
       control: {
         type: 'text',
       },
-      defaultValue: 'Container Heading Placeholder',
     },
     text: {
+      name: 'Container Text',
       control: {
         type: 'text',
       },
-      defaultValue: 'Container content placeholder text',
     },
   },
   args: {
diff --git a/src/layout/grid/grid.stories.js b/src/layout/grid/grid.stories.js
index 5ef6bb1..21dad00 100644
--- a/src/layout/grid/grid.stories.js
+++ b/src/layout/grid/grid.stories.js
@@ -8,10 +8,12 @@ export default {
   title: 'Layout/Grid',
   argTypes: {
     columnNumber: {
+      name: 'Column Number',
       control: { type: 'select' },
       options: ['1', '2', '3', '4'],
     },
     gridSpacing: {
+      name: 'Grid Spacing',
       control: { type: 'select' },
       options: {
         '0x Spacing': 'no-spacing',
@@ -20,7 +22,7 @@ export default {
       },
     },
   },
-  arg: {
+  args: {
     columnNumber: '3',
     gridSpacing: '',
   },

From 803ba33be887cd504c8768cd14597f22fcda722d Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Thu, 19 Sep 2024 08:22:47 -0500
Subject: [PATCH 08/44] fix: accordion component and add text-with-image

---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 .../accordion/_accordion-controls.twig        |  44 ++++
 src/components/accordion/_accordion-item.twig |  20 +-
 .../accordion/accordion.component.yml         |  10 +
 src/components/accordion/accordion.js         |  84 ++++++--
 src/components/accordion/accordion.scss       | 202 +++++++++++-------
 src/components/accordion/accordion.stories.js |  49 +++--
 src/components/accordion/accordion.twig       | 103 +++------
 .../text-with-image.component.yml             |  36 ++++
 .../text-with-image/text-with-image.scss      | 164 ++++++++++++++
 .../text-with-image.stories.js                |  67 ++++++
 .../text-with-image/text-with-image.twig      |  87 ++++++++
 13 files changed, 683 insertions(+), 193 deletions(-)
 create mode 100644 src/components/accordion/_accordion-controls.twig
 create mode 100644 src/components/text-with-image/text-with-image.component.yml
 create mode 100644 src/components/text-with-image/text-with-image.scss
 create mode 100644 src/components/text-with-image/text-with-image.stories.js
 create mode 100644 src/components/text-with-image/text-with-image.twig

diff --git a/package-lock.json b/package-lock.json
index 536bfb4..1421297 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0-development",
       "license": "ISC",
       "dependencies": {
-        "@emulsify/core": "^2.2.1",
+        "@emulsify/core": "^2.2.2",
         "@percy/cli": "^1.28.2",
         "@percy/storybook": "^5.0.1"
       },
@@ -2402,9 +2402,9 @@
       }
     },
     "node_modules/@emulsify/core": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@emulsify/core/-/core-2.2.1.tgz",
-      "integrity": "sha512-fsfdPuVGAe0FvsnrHDMLUVTUEi8BBkvH4BUVERyBgAqKs4p3fgnhqVk9xGp3vyryLfjfSfHutC3TmviTkN7BuQ==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@emulsify/core/-/core-2.2.2.tgz",
+      "integrity": "sha512-EdisHw2d43oFZNResp8vJOdiMYkw53YRpOlqJnx/pptcBNmPw/7L5PhzB6xllq9jHq+d3BPw4iNR25SpXPqk3Q==",
       "dependencies": {
         "@babel/core": "^7.25.2",
         "@babel/eslint-parser": "^7.25.1",
diff --git a/package.json b/package.json
index 05278f6..dad9dbc 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     ]
   },
   "dependencies": {
-    "@emulsify/core": "^2.2.1",
+    "@emulsify/core": "^2.2.2",
     "@percy/cli": "^1.28.2",
     "@percy/storybook": "^5.0.1"
   },
diff --git a/src/components/accordion/_accordion-controls.twig b/src/components/accordion/_accordion-controls.twig
new file mode 100644
index 0000000..552ef17
--- /dev/null
+++ b/src/components/accordion/_accordion-controls.twig
@@ -0,0 +1,44 @@
+{#
+ # Available Variables:
+ # - none
+ #}
+
+{% embed "@components/lists/list.twig" with {
+  list__base_class: 'controls',
+  list__blockname: accordion__base_class,
+  list__addition_classes: ['js-accordion__controls'],
+  list__attributes: {'aria-label': 'Controls to Expand or Collapse all accordion items'},
+  } %}
+	{% block list__content %}
+		{% embed "@components/lists/_list-item.twig" with {
+      list__item__base_class: 'controls__item',
+      list__item__blockname: accordion__base_class,
+      }%}
+			{% block list__item__content %}
+				{% include "@components/button/button.twig" with {
+          button__content: 'Expand all',
+          button__base_class: 'toggle-all',
+          button__modifiers: ['expand'],
+          button__style: 'clean',
+          button__blockname: accordion__base_class,
+          button__additional_classes: ['button', 'js-accordion-item__toggle_all', 'js-accordion__toggle-all--expand'],
+          } %}
+			{% endblock %}
+		{% endembed %}
+		{% embed "@components/lists/_list-item.twig" with {
+      list__item__base_class: 'controls__item',
+      list__item__blockname: accordion__base_class,
+      }%}
+			{% block list__item__content %}
+				{% include "@components/button/button.twig" with {
+          button__content: 'Collapse all',
+          button__base_class: 'toggle-all',
+          button__modifiers: ['collapse'],
+          button__style: 'clean',
+          button__blockname: accordion__base_class,
+          button__additional_classes: ['button', 'js-accordion-item__toggle_all', 'js-accordion__toggle-all--collapse'],
+          } %}
+			{% endblock %}
+		{% endembed %}
+	{% endblock %}
+{% endembed %}
diff --git a/src/components/accordion/_accordion-item.twig b/src/components/accordion/_accordion-item.twig
index d52d8da..bc62ba6 100644
--- a/src/components/accordion/_accordion-item.twig
+++ b/src/components/accordion/_accordion-item.twig
@@ -20,18 +20,16 @@
   'class': bem('content', accordion__item__modifiers, accordion__item__base_class),
 }) %}
 
-{% set accordion__item__button__content %}
-{{ accordion__item__heading }}
-{% include "@components/icons/_icon.twig" with {
-    icon__name: 'chevron-down',
-    icon__blockname: accordion__item__base_class,
-    icon__decorative: true,
-  } %}
-{% endset %}
+{% if accordion__anchor %}
+	{% set accordion__item__attributes = accordion__item__attributes|merge({
+		'id': accordion__anchor,
+	}) %}
+{% endif %}
 
 {% set accordion__item__heading__content %}
 {% include "@components/button/button.twig" with {
-    button__content: accordion__item__button__content,
+    button__content: accordion__item__heading,
+    button__style: 'clean',
     button__base_class: 'toggle',
     button__additional_classes: ['js-accordion-item__toggle'],
     button__blockname: accordion__item__base_class,
@@ -49,8 +47,8 @@
   } %}
 	<div {{ add_attributes(accordion__item__content__attributes) }}>
 		{% block accordion__item__content %}
-			{% include "@components/text/text/01-paragraph.twig" with {
-        paragraph_content: accordion__item__content,
+			{% include "@components/text/text/text.twig" with {
+        text__content: accordion__item__content,
       } %}
 		{% endblock %}
 	</div>
diff --git a/src/components/accordion/accordion.component.yml b/src/components/accordion/accordion.component.yml
index b25ac8e..d15928d 100644
--- a/src/components/accordion/accordion.component.yml
+++ b/src/components/accordion/accordion.component.yml
@@ -9,6 +9,16 @@ props:
     - accordion__item__heading
     - accordion__item__content
   properties:
+    accordion__heading:
+      type: string
+      title: Heading
+      description: The heading of the accordion item.
+      data: This is the heading for the entire accordion.
+    accordion__text:
+      type: string
+      title: Accordion item content
+      description: The content of the accordion item.
+      data: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a condimentum justo, a consectetur lacus. Nullam sagittis dignissim tincidunt. Quisque et sodales erat.'
     accordion__item__heading:
       type: string
       title: Heading
diff --git a/src/components/accordion/accordion.js b/src/components/accordion/accordion.js
index 6f42400..2423d75 100644
--- a/src/components/accordion/accordion.js
+++ b/src/components/accordion/accordion.js
@@ -2,7 +2,7 @@ Drupal.behaviors.accordion = {
   attach(context) {
     // Selectors
     const items = context.querySelectorAll('.js-accordion-item');
-    const controls = context.querySelectorAll('.js-accordion__controls');
+    const controls = context.querySelectorAll('.accordion__controls__item');
     // Classes
     const itemToggle = '.js-accordion-item__toggle';
     const itemState = 'data-accordion-expanded';
@@ -20,14 +20,58 @@ Drupal.behaviors.accordion = {
       button.setAttribute(buttonState, 'false');
     };
 
+    /* eslint-disable */
+    /**
+     * getUrl
+     * @description Get the value of the anchor link in the URL.
+     * @returns The string value after the hash.
+     */
+    function getUrl() {
+      return (
+        window.location.protocol +
+        '//' +
+        window.location.host +
+        window.location.pathname
+      );
+    }
+    /* eslint-enable */
+
+    /**
+     * getAnchor
+     * @description Get the value of the anchor link in the URL.
+     * @return The string value after the hash.
+     */
+    function getAnchor() {
+      return document.URL.split('#').length > 1
+        ? document.URL.split('#')[1]
+        : null;
+    }
+
     // Toggle accordion content when toggle is activated.
     items.forEach((item) => {
       const button = item.querySelector(itemToggle);
 
+      const anchor = item.id;
+      // eslint-disable-next-line
+      const newUrl = `${getUrl()}` + '#' + `${anchor}`;
+
       // Hide all accordion content sections if JavaScript is enabled.
       collapse(item, button);
 
+      if (item.getAttribute('id') && item.getAttribute('id') === getAnchor()) {
+        expand(item, button);
+      }
+
       button.addEventListener('click', () => {
+        if (window.location.href !== newUrl) {
+          window.history.replaceState('', '', newUrl);
+        } else {
+          window.history.replaceState(
+            '',
+            '',
+            window.location.origin + window.location.pathname,
+          );
+        }
         // Toggle the item's state.
         return button.getAttribute(buttonState) === 'true'
           ? collapse(item, button)
@@ -38,26 +82,28 @@ Drupal.behaviors.accordion = {
     controls.forEach((control) => {
       // Get all items relevant to the control.
       const allItems =
-        control.parentNode.querySelectorAll('.js-accordion-item');
+        control.parentNode.parentNode.querySelectorAll('.js-accordion-item');
       // Add click listener on the parent <ul>
-      control.addEventListener('click', (e) => {
-        // Determine which control was activated. `action` will re turn a
-        // boolean. `true` if the expand control was clicked, otherwise false.
-        const action = e.target.classList.contains(
-          'js-accordion__toggle-all--expand',
-        );
-
-        // Iterate over
-        allItems.forEach((item) => {
-          const button = item.querySelector(itemToggle);
-
-          if (action === false) {
-            collapse(item, button);
-          } else {
-            expand(item, button);
-          }
+      control
+        .querySelector('.js-accordion-item__toggle_all')
+        .addEventListener('click', (e) => {
+          // Determine which control was activated. `action` will re turn a
+          // boolean. `true` if the expand control was clicked, otherwise false.
+          const action = e.target.classList.contains(
+            'js-accordion__toggle-all--expand',
+          );
+
+          // Iterate over
+          allItems.forEach((item) => {
+            const button = item.querySelector(itemToggle);
+
+            if (action === false) {
+              collapse(item, button);
+            } else {
+              expand(item, button);
+            }
+          });
         });
-      });
     });
   },
 };
diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index 6d716dc..3ddb0fb 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -1,123 +1,181 @@
-// The accordion group.
+@use 'sass:math';
+@use '../../foundation/breakpoints/breakpoints' as *;
+@use '../../foundation/typography/typography' as *;
+@use '../../foundation/utility/utility' as *;
+@use '../../foundation/motion/motion' as *;
+
+@mixin plusminus {
+  &::before,
+  &::after {
+    @include transition;
+
+    & {
+      content: '';
+      display: block;
+      position: absolute;
+      background: var(--tabs-color-text-default);
+      border-radius: var(--spacing-md);
+      inset: 0 0 0 auto;
+      margin: auto;
+    }
+  }
+
+  &::before {
+    height: var(--spacing-lg);
+    width: var(--spacing-xs);
+    transform: rotate(-180deg);
+    right: 0.45rem;
+  }
+
+  &::after {
+    height: var(--spacing-xs);
+    width: var(--spacing-lg);
+  }
+
+  &:hover {
+    &::before,
+    &::after {
+      background-color: var(--color-primary-default);
+    }
+  }
+
+  &[aria-expanded='true'] {
+    &::before {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
 .accordion {
-  padding-block: var(--spacing-sm);
+  box-shadow: none;
+  border: 0;
 }
 
+// The accordion group.
 .accordion__controls {
-  display: flex;
-  gap: var(--spacing-md);
+  @include list-reset;
+
+  & {
+    display: flex;
+    margin-bottom: var(--spacing-lg);
+  }
 }
 
 .accordion__controls__item {
   &:not(:last-child) {
-    padding-right: var(--spacing-sm);
-    margin-right: var(--spacing-sm);
+    padding-right: var(--spacing-lg);
+    margin-right: var(--spacing-lg);
+    border-right: 1px solid;
   }
 }
 
 .accordion-item__toggle {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-  width: 100%;
-  padding-right: var(--spacing-lg);
+  @include plusminus;
+
+  & {
+    background: none;
+    border: none;
+    display: flex;
+    gap: var(--spacing-lg);
+    align-items: center;
+    justify-content: flex-start;
+    text-align: start;
+    width: 100%;
+    padding: 0 var(--spacing-xl) 0 0;
+    position: relative;
+    cursor: pointer;
+  }
 
   &:hover {
-    color: var(--accordion-color-header-hover);
+    color: var(--color-primary-default);
   }
 }
 
-.accordion__icon {
-  height: var(--size-xl);
-  width: var(--size-xl);
-  pointer-events: none;
+.button.accordion__toggle-all {
+  @include plusminus;
 
-  .accordion__toggle-all--collapse & {
-    transform: rotate(180deg);
+  & {
+    display: flex;
+    gap: var(--spacing-lg);
+    align-items: center;
+    cursor: pointer;
+    padding: 0 var(--spacing-xl) 0 0;
+    line-height: var(--line-height-tight);
   }
-}
 
-.accordion__toggle-all {
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  display: flex;
-  color: var(--colors-text-body);
-  font-size: var(--font-size-body);
-  gap: var(--spacing-sm);
-  align-items: center;
+  &:hover,
+  &:focus {
+    color: var(--color-primary-default);
+  }
 
-  .accordion__icon {
-    fill: var(--colors-text-body);
-    height: var(--size-lg);
-    width: var(--size-lg);
+  &::before {
+    height: var(--spacing-lg);
+    width: var(--spacing-xs);
+    transform: rotate(-180deg);
+    right: calc(var(--spacing-lg) * 0.66);
   }
 
-  &:hover {
-    color: var(--accordion-color-header-hover);
+  &::after {
+    height: var(--spacing-xs);
+    width: var(--spacing-lg);
+    right: var(--spacing-sm);
+  }
 
-    .accordion__icon {
-      fill: var(--accordion-color-header-hover);
+  &--collapse {
+    &::before {
+      display: none;
     }
   }
 }
 
-// Individual accordion items.
-.accordion-item {
-  border-bottom: 1px solid var(--accordion-divider-color);
-  padding-top: calc(var(--spacing-lg) * 1.125);
-}
-
-.accordion-item__icon {
-  margin-left: auto;
-  fill: var(--accordion-color-body);
-  transition: transform 0.3s;
+.accordion__icon {
+  height: var(--spacing-lg);
+  width: var(--spacing-lg);
+  pointer-events: none;
 
-  [aria-expanded='true'] > & {
+  .accordion__toggle-all--collapse & {
     transform: rotate(180deg);
   }
 }
 
+// Individual accordion items.
+.accordion-item {
+  border-bottom: 1px solid;
+  padding: var(--spacing-lg) 0;
+  scroll-margin-top: var(--spacing-2xl);
+}
+
 .accordion-item__heading {
-  font-weight: normal;
+  @include h4;
+
   display: flex;
-  color: var(--accordion-color-header);
-  margin: 0 0 var(--font-size-lead);
+  margin: 0;
 
   &:hover {
-    color: var(--accordion-color-header-hover);
-
-    .accordion-item__icon {
-      fill: var(--accordion-color-header-hover);
-    }
+    color: clr(primary);
   }
+}
 
-  [data-accordion-expanded='false'] & {
-    color: var(--accordion-color-body);
+.accordion-item__icon {
+  height: var(--spacing-lg);
+  width: var(--spacing-lg);
+
+  [aria-expanded='true'] > & {
+    transform: rotate(180deg);
   }
 }
 
 .accordion-item__content {
-  overflow: hidden;
-  padding: 0 var(--spacing-lg);
-  color: var(--accordion-color-body);
-  font-family: var(--font-family-body);
+  margin-inline: 0;
+  max-width: 90ch;
+  line-height: var(--line-height-normal);
 
   [data-accordion-expanded='true'] & {
-    margin-bottom: var(--font-size-lead);
+    margin-block: var(--spacing-lg) var(--spacing-md);
   }
 
   [data-accordion-expanded='false'] & {
     max-height: 0;
+    overflow: hidden;
   }
 }
diff --git a/src/components/accordion/accordion.stories.js b/src/components/accordion/accordion.stories.js
index 188a016..536bed1 100644
--- a/src/components/accordion/accordion.stories.js
+++ b/src/components/accordion/accordion.stories.js
@@ -12,37 +12,56 @@ const accordionData = props.properties;
 export default {
   title: 'Components/Accordion',
   argTypes: {
+    width: {
+      name: 'Container Width',
+      control: { type: 'select' },
+      options: {
+        Small: 'compressed',
+        Medium: 'standard',
+      },
+    },
     heading: {
       name: 'Heading',
       type: 'string',
-      defaultValue: accordionData.accordion__item__heading.data,
     },
-    content: {
-      name: 'Content',
+    text: {
+      name: 'Intro',
+      type: 'string',
+    },
+    itemHeading: {
+      name: 'Item Heading',
       type: 'string',
-      defaultValue: accordionData.accordion__item__content.data,
     },
+    itemContent: {
+      name: 'Item Content',
+      type: 'string',
+    },
+  },
+  args: {
+    heading: accordionData.accordion__heading.data,
+    text: accordionData.accordion__text.data,
+    itemHeading: accordionData.accordion__item__heading.data,
+    itemContent: accordionData.accordion__item__content.data,
   },
-  decorators: [
-    (story) =>
-      `<div style="max-width: 890px; margin: 0 auto;">${story()}</div>`,
-  ],
 };
 
-export const Accordion = ({ heading, content }) =>
+export const Accordion = ({ width, heading, text, itemHeading, itemContent }) =>
   accordionTwig({
+    accordion__width: width,
+    accordion__heading: heading,
+    accordion__text: text,
     accordion__items: [
       {
-        accordion__item__heading: heading,
-        accordion__item__content: content,
+        accordion__item__heading: itemHeading,
+        accordion__item__content: itemContent,
       },
       {
-        accordion__item__heading: accordionData.accordion__item__heading.data,
-        accordion__item__content: accordionData.accordion__item__content.data,
+        accordion__item__heading: itemHeading,
+        accordion__item__content: itemContent,
       },
       {
-        accordion__item__heading: accordionData.accordion__item__heading.data,
-        accordion__item__content: accordionData.accordion__item__content.data,
+        accordion__item__heading: itemHeading,
+        accordion__item__content: itemContent,
       },
     ],
   });
diff --git a/src/components/accordion/accordion.twig b/src/components/accordion/accordion.twig
index 589117e..10c8118 100644
--- a/src/components/accordion/accordion.twig
+++ b/src/components/accordion/accordion.twig
@@ -1,6 +1,8 @@
 {#
  # Available Variables:
- # - accordion__heading
+ # - accordion__heading: (string)
+ # - accordion__items: (array)
+ # - accordion__show_controls: (boolean)
  #
  # Available Blocks:
  # - accordion__items
@@ -8,86 +10,45 @@
 
 {% set accordion__base_class = 'accordion' %}
 
-{% set expand_all__content %}
-Expand All
-{% include "@components/icons/_icon.twig" with {
-    icon__name: 'chevron-down',
-    icon__blockname: accordion__base_class,
-  } %}
-{% endset %}
-
-{% set collapse_all__content %}
-Collapse All
-{% include "@components/icons/_icon.twig" with {
-    icon__name: 'chevron-down',
-    icon__blockname: accordion__base_class,
-  } %}
-{% endset %}
-
 {% set accordion__attibutes = {
-  'class': bem(accordion__base_class),
+  'class': bem(accordion__base_class, accordion__modifiers, accordion__block_name),
 } %}
 
+{% if accordion__items|length >= 2 %}
+  {% set accordion__show_controls = true %}
+{% endif %}
+
+{% set accordion %}
 <div {{ add_attributes(accordion__attibutes) }}>
-	{% if accordion__heading %}
-		{% include "@components/text/headings/heading.twig" with {
-      heading__level: '2',
-      heading__blockname: accordion__base_class,
-      heading: accordion__heading,
-    } %}H
+	{% if accordion__show_controls %}
+		{% include "@components/accordion/_accordion-controls.twig" %}
 	{% endif %}
-	{% embed "@components/lists/list.twig" with {
-    list__base_class: 'controls',
-    list__blockname: accordion__base_class,
-    list__addition_classes: ['js-accordion__controls'],
-    list__attributes: {'aria-label': 'Controls to Expand or Collapse all accordion items'},
-  } %}
-		{% block list__content %}
-			{% embed "@components/lists/_list-item.twig" with {
-        list__item__base_class: 'controls__item',
-        list__item__blockname: accordion__base_class,
-      }%}
-				{% block list__item__content %}
-					{% include "@components/button/button.twig" with {
-            button__content: expand_all__content,
-            button__base_class: 'toggle-all',
-            button__modifiers: ['expand'],
-            button__blockname: accordion__base_class,
-            button__additional_classes: ['js-accordion__toggle-all--expand'],
-          } %}
-				{% endblock %}
-			{% endembed %}
-			{% embed "@components/lists/_list-item.twig" with {
-        list__item__base_class: 'controls__item',
-        list__item__blockname: accordion__base_class,
-      }%}
-				{% block list__item__content %}
-					{% include "@components/button/button.twig" with {
-            button__content: collapse_all__content,
-            button__base_class: 'toggle-all',
-            button__modifiers: ['collapse'],
-            button__blockname: accordion__base_class,
-            button__additional_classes: ['js-accordion__toggle-all--collapse'],
-          } %}
-				{% endblock %}
-			{% endembed %}
-		{% endblock %}
-	{% endembed %}
-
 	{% block accordion__items %}
 		{% for item in accordion__items %}
 			{# Create a unique ID for each accordion item #}
 			{% set unique_id = random('1234567890') ~ random('1234567890') ~ random('1234567890') ~ random('1234567890') %}
 			{% set accordion__item__content__id = 'accordion__item-' ~ unique_id ~ '-' ~ loop.index %}
-			{% include "@components/accordion/_accordion-item.twig" with {
-        accordion__item__heading: item.accordion__item__heading,
-        accordion__item__content: item.accordion__item__content,
-        accordion__item__heading__level: accordion__heading ? '3' : '2',
-        accordion__item__content__attributes: {
-          'id': accordion__item__content__id,
-        }
-      } %}
+      {% include "@components/accordion/_accordion-item.twig" with {
+          accordion__item__heading: item.accordion__item__heading,
+          accordion__item__content: item.accordion__item__content,
+          accordion__item__heading__level: accordion__heading ? '3' : '2',
+          accordion__item__content__attributes: {
+            'id': accordion__item__content__id,
+          }
+        } %}
 		{% endfor %}
 	{% endblock %}
-
 </div>
+{% endset %}
+
+{# Render the accordion within a generic container #}
+{% embed "@layout/container/container.twig" with {
+  container__component_width: accordion__width|default('compressed'),
+  container__component_alignment: accordion__alignment|default('center'),
+  container__heading: accordion__heading,
+  container__text: accordion__text,
+}%}
+	{% block container__content %}
+		{{ accordion }}
+	{% endblock %}
+{% endembed %}
diff --git a/src/components/text-with-image/text-with-image.component.yml b/src/components/text-with-image/text-with-image.component.yml
new file mode 100644
index 0000000..36a46d2
--- /dev/null
+++ b/src/components/text-with-image/text-with-image.component.yml
@@ -0,0 +1,36 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Text with Image
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - text_with_image__heading
+    - text_with_image__text
+  properties:
+    text_with_image__overline:
+      type: string
+      title: Title
+      description: 'An option overline that shows above the heading'
+      data: 'Bisons in the lab'
+    text_with_image__heading:
+      type: string
+      title: Title
+      description: The heading of the accordion item.
+      data: 'Selena Chase, NDSU Volleyball 24 Team'
+    text_with_image__text:
+      type: string
+      title: Content
+      description: 'Specifies the main content of the text with image'
+      data: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+    text_with_image__link__content:
+      type: string
+      title: Button Text
+      description: 'Specifies the link label'
+      data: 'Student Research Opportunities'
+    text_with_image__link__url:
+      type: string
+      title: Button URL
+      description: 'Specifies the URL the link will link to'
+      data: '#'
\ No newline at end of file
diff --git a/src/components/text-with-image/text-with-image.scss b/src/components/text-with-image/text-with-image.scss
new file mode 100644
index 0000000..168ed6d
--- /dev/null
+++ b/src/components/text-with-image/text-with-image.scss
@@ -0,0 +1,164 @@
+@use '../../foundation/breakpoints/breakpoints' as *;
+@use '../../foundation/typography/typography' as *;
+
+.text-with-image {
+  display: flex;
+
+  @include breakpoint('large') {
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &[data-image-position='left'] {
+    &[data-component-focus='image'] {
+      flex-direction: column-reverse;
+
+      @include breakpoint('large') {
+        flex-direction: row-reverse;
+      }
+    }
+
+    &[data-component-focus='equal'] {
+      flex-direction: column-reverse;
+
+      @include breakpoint('small') {
+        flex-direction: row-reverse;
+      }
+    }
+
+    &[data-component-focus='text'] {
+      flex-direction: column-reverse;
+
+      @include breakpoint('small') {
+        flex-direction: row-reverse;
+      }
+    }
+  }
+
+  &[data-image-position='right'] {
+    &[data-component-focus='image'] {
+      flex-direction: column-reverse;
+
+      @include breakpoint('large') {
+        flex-flow: row nowrap;
+      }
+    }
+
+    &[data-component-focus='equal'] {
+      flex-direction: column-reverse;
+
+      @include breakpoint('small') {
+        flex-flow: row nowrap;
+      }
+    }
+
+    &[data-component-focus='text'] {
+      flex-direction: column-reverse;
+
+      @include breakpoint('small') {
+        flex-flow: row nowrap;
+      }
+    }
+  }
+}
+
+.text-with-image__content {
+  flex: 1 1 auto;
+  word-break: break-word;
+  align-self: flex-start;
+  margin-left: auto;
+
+  @include breakpoint('large') {
+    flex: 1 50%;
+    margin: 0;
+  }
+
+  [data-image-position='left'] & {
+    @include breakpoint('small') {
+      padding-left: var(--spacing-xl);
+    }
+  }
+
+  [data-image-position='right'] & {
+    @include breakpoint('small') {
+      padding-right: var(--spacing-xl);
+    }
+  }
+
+  [data-component-focus='equal'] & {
+    flex: 1 1 50%;
+    width: 90%;
+
+    @include breakpoint('medium') {
+      width: 100%;
+    }
+  }
+
+  [data-component-focus='image'] & {
+    flex: 1 1 40%;
+    width: 90%;
+
+    @include breakpoint('large') {
+      width: 100%;
+    }
+  }
+
+  [data-component-focus='text'] & {
+    flex: 1 1 60%;
+    width: 90%;
+
+    @include breakpoint('large') {
+      width: 100%;
+    }
+  }
+}
+
+.text-with-image__media {
+  flex: 1 auto;
+  margin-bottom: var(--spacing-xl);
+  position: relative;
+  margin-right: auto;
+
+  @include breakpoint('large') {
+    margin-bottom: 0;
+    margin-right: 0;
+  }
+
+  [data-component-focus='equal'] & {
+    flex: 1 1 50%;
+    width: 80%;
+
+    @include breakpoint('medium') {
+      width: 50%;
+    }
+  }
+
+  [data-component-focus='image'] & {
+    flex: 1 1 60%;
+    width: 80%;
+
+    @include breakpoint('large') {
+      width: 100%;
+    }
+  }
+
+  [data-component-focus='text'] & {
+    flex: 1 1 40%;
+    width: 80%;
+
+    @include breakpoint('xsmall') {
+      width: 50%;
+    }
+  }
+}
+
+.text-with-image__heading {
+  @include h2;
+
+  margin-bottom: var(--spacing-lg);
+}
+
+.text-with-image__text {
+  margin-bottom: var(--spacing-lg);
+}
diff --git a/src/components/text-with-image/text-with-image.stories.js b/src/components/text-with-image/text-with-image.stories.js
new file mode 100644
index 0000000..82580c9
--- /dev/null
+++ b/src/components/text-with-image/text-with-image.stories.js
@@ -0,0 +1,67 @@
+// Twig templates
+import textWithImageTwig from './text-with-image.twig';
+// Data files
+import { props } from './text-with-image.component.yml';
+const textWithImageData = props.properties;
+
+/**
+ * Storybook Definition.
+ */
+export default {
+  title: 'Components/Text With Image',
+  argTypes: {
+    position: {
+      name: 'Image Position',
+      control: { type: 'select' },
+      options: {
+        Left: 'left',
+        Right: 'right',
+      },
+    },
+    focus: {
+      name: 'Component Focus',
+      control: { type: 'select' },
+      options: {
+        Equal: 'equal',
+        Image: 'image',
+        Text: 'text',
+      },
+    },
+    heading: {
+      name: 'Heading',
+      type: 'string',
+    },
+    text: {
+      name: 'Text',
+      type: 'string',
+    },
+    linkContent: {
+      name: 'Link Content (optional)',
+      type: 'string',
+    },
+  },
+  args: {
+    position: 'left',
+    focus: 'equal',
+    heading: textWithImageData.text_with_image__heading.data,
+    text: textWithImageData.text_with_image__text.data,
+    linkContent: textWithImageData.text_with_image__link__content.data,
+  },
+};
+
+export const TextWithImage = ({
+  position,
+  focus,
+  heading,
+  text,
+  linkContent,
+}) =>
+  textWithImageTwig({
+    text_with_image__position: position,
+    text_with_image__focus: focus,
+    text_with_image__heading: heading,
+    text_with_image__text: text,
+    text_with_image__link__content: linkContent,
+    text_with_image__link__url:
+      textWithImageData.text_with_image__link__url.data,
+  });
diff --git a/src/components/text-with-image/text-with-image.twig b/src/components/text-with-image/text-with-image.twig
new file mode 100644
index 0000000..d22c742
--- /dev/null
+++ b/src/components/text-with-image/text-with-image.twig
@@ -0,0 +1,87 @@
+{#
+ # Available Props:
+ # - text_with_image__width: feature (default) or highlight
+ # - text_with_image__position: image-left (default) or image-right
+ # - text_with_image__focus: equal (default), image, or text
+ #
+ # Available variables:
+ # - text_with_image__heading
+ # - text_with_image__subheading (optional)
+ # - text_with_image__text
+ #
+ # Available blocks:
+ # - text_with_image__image
+ #}
+
+{% set text_with_image__base_class = 'text-with-image' %}
+
+{% set text_with_image__attributes = {
+  'data-image-position': text_with_image__position|default('left'),
+  'data-component-focus': text_with_image__focus|default('equal'),
+  'class': bem(text_with_image__base_class, text_with_image__modifiers, text_with_image__blockname)
+} %}
+
+{% if text_with_image__copyright %}
+  {% set text_with_image__copyright_credit = '<p>' ~ text_with_image__copyright ~ '</p>'%}
+{% endif %}
+
+{% set text_content__image = text_with_image__caption ~ text_with_image__copyright_credit %}
+
+{% set text_with_image %}
+  <div {{ add_attributes(text_with_image__attributes) }}>
+    {# Content #}
+    <div {{ bem('content', [], text_with_image__base_class) }}>
+      {# Heading #}
+      {% if text_with_image__heading %}
+        {% include "@components/text/headings/heading.twig" with {
+          heading: text_with_image__heading,
+          heading__level: '2',
+          heading__blockname: text_with_image__base_class,
+        } %}
+      {% endif %}
+      {# Text #}
+      {% include "@components/text/text/text.twig" with {
+        text__content: text_with_image__text,
+        text__blockname: text_with_image__base_class,
+      } %}
+      {# optional link #}
+      {% if text_with_image__link__url %}
+        {% include "@components/link/link.twig" with {
+          link__content: text_with_image__link__content,
+          link__url: text_with_image__link__url,
+        } %}
+      {% endif %}
+    </div>
+    {# Image #}
+    <div {{ bem('media', text_with_image__modifiers, text_with_image__base_class) }}>
+      <div {{ bem('image', text_with_image__modifiers, text_with_image__base_class) }}>
+        {% block text_with_image__image %}
+          {% include "@components/image/responsive-image.twig" with {
+            output_image_tag: true,
+            image__sizes: '100vw',
+            image__src: 'https://picsum.photos/320/213',
+            image__srcset: 'https://picsum.photos/320/213 320w, https://picsum.photos/480/320 480w, https://picsum.photos/640/427 640w, https://picsum.photos/800/533 800w, https://picsum.photos/960/640 960w, https://picsum.photos/1120/747 1120w, https://picsum.photos/1280/853 1280w, https://picsum.photos/1440/960 1440w, https://picsum.photos/1600/1067 1600w, https://picsum.photos/1760/1173 1760w, https://picsum.photos/1920/1280 1920w, https://picsum.photos/2080/1387 2080w, https://picsum.photos/2240/1493 2240w, https://picsum.photos/2400/1600 2400w'
+          } %}
+        {% endblock %}
+      </div>
+
+      {% if text_with_image__show_captions
+        and text_content__image %}
+          {% include "@components/text/text/text.twig" with {
+            text__content: text_content__image,
+            text__base_class: 'caption-credit-wrapper',
+          } %}
+      {% endif %}
+    </div>
+  </div>
+{% endset %}
+
+{# Render the accordion within a generic container #}
+{% embed "@layout/container/container.twig" with {
+  container__component_width: 'standard',
+  container__component_alignment: 'center',
+}%}
+	{% block container__content %}
+		{{ text_with_image }}
+	{% endblock %}
+{% endembed %}

From e4f967733295e06e3388758250fc7d6cf8fd867f Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Thu, 19 Sep 2024 08:28:26 -0500
Subject: [PATCH 09/44] fix: consistent image twig variable structure

---
 src/components/image/_image.twig              | 20 +++++-----
 src/components/image/figure.component.yml     |  8 ++--
 src/components/image/figure.twig              | 20 +++++-----
 src/components/image/figure.yml               |  5 ---
 src/components/image/image.component.yml      |  8 ++--
 src/components/image/responsive-image.twig    | 40 +++++++++----------
 .../text-with-image.component.yml             |  2 +-
 7 files changed, 49 insertions(+), 54 deletions(-)
 delete mode 100644 src/components/image/figure.yml

diff --git a/src/components/image/_image.twig b/src/components/image/_image.twig
index e3783c5..0ce2572 100644
--- a/src/components/image/_image.twig
+++ b/src/components/image/_image.twig
@@ -1,16 +1,16 @@
-{% set image_base_class = image_base_class|default('image') %}
+{% set image__base_class = image__base_class|default('image') %}
 
 <img
-  {{ bem(image_base_class, image_modifiers, image_blockname) }}
-  {% if image_srcset %}
-    srcset="{{ image_srcset }}"
+  {{ bem(image__base_class, image__modifiers, image__blockname) }}
+  {% if image__srcset %}
+    srcset="{{ image__srcset }}"
   {% endif %}
-  {% if image_sizes %}
-    sizes="{{ image_sizes }}"
+  {% if image__sizes %}
+    sizes="{{ image__sizes }}"
   {% endif %}
-  src="{{ image_src }}"
-  alt="{{ image_alt }}"
-  {% if image_title %}
-    title="{{ image_title }}"
+  src="{{ image__src }}"
+  alt="{{ image__alt }}"
+  {% if image__title %}
+    title="{{ image__title }}"
   {% endif %}
 />
diff --git a/src/components/image/figure.component.yml b/src/components/image/figure.component.yml
index d392bdc..60e9195 100644
--- a/src/components/image/figure.component.yml
+++ b/src/components/image/figure.component.yml
@@ -14,22 +14,22 @@ props:
       title: Output image tag
       description: Specifies whether to output the image tag
       data: true
-    image_url:
+    image__url:
       type: string
       title: Image URL
       description: 'Specifies the URL that the image links to'
       data: '#'
-    image_src:
+    image__src:
       type: string
       title: Source
       description: 'Specifies the path to the image'
       data: 'https://placehold.co/1200x600'
-    image_alt:
+    image__alt:
       type: string
       title: Alternate text
       description: 'Specifies an alternate text for the image'
       data: 'This is the alt text'
-    image_caption:
+    image__caption:
       type: string
       title: Image caption
       description: 'Specifies the caption for the image'
diff --git a/src/components/image/figure.twig b/src/components/image/figure.twig
index 4667597..7a806fe 100644
--- a/src/components/image/figure.twig
+++ b/src/components/image/figure.twig
@@ -1,22 +1,22 @@
-{% set image_figure_base_class = image_figure_base_class|default('figure') %}
-{% set image_link_base_class = image_link_base_class|default('link') %}
+{% set image_figure__base_class = image_figure__base_class|default('figure') %}
+{% set image_link__base_class = image_link__base_class|default('link') %}
 
-<figure {{ bem(image_figure_base_class, image_figure_modifiers, image_figure_blockname) }}>
-	{% if image_url %}
-		<a {{ bem(image_link_base_class, image_link_modifiers, image_link_blockname|default(image_figure_base_class)) }} href="{{ image_url }}">
+<figure {{ bem(image_figure__base_class, image_figure__modifiers, image_figure__blockname) }}>
+	{% if image__url %}
+		<a {{ bem(image_link_base_class, image_link__modifiers, image_link__blockname|default(image_figure__base_class)) }} href="{{ image_url }}">
 		{% endif %}
 		{% block figure_content %}
 			{% include "@components/image/responsive-image.twig" with {
-        responsive_image_blockname: responsive_image_blockname|default(image_figure_base_class),
+        responsive_image__blockname: responsive_image__blockname|default(image_figure__base_class),
       } %}
 		{% endblock %}
-		{% if image_url %}
+		{% if image__url %}
 		</a>
 	{% endif %}
 
-	{% if image_caption %}
-		<figcaption {{ bem('caption', figcaption_modifiers, figcaption_blockname|default(image_figure_base_class)) }}>
-			{{ image_caption }}
+	{% if image__caption %}
+		<figcaption {{ bem('caption', figcaption__modifiers, figcaption__blockname|default(image_figure__base_class)) }}>
+			{{ image__caption }}
 		</figcaption>
 	{% endif %}
 </figure>
diff --git a/src/components/image/figure.yml b/src/components/image/figure.yml
deleted file mode 100644
index 6c6fe7d..0000000
--- a/src/components/image/figure.yml
+++ /dev/null
@@ -1,5 +0,0 @@
-output_image_tag: true
-image_url: '#'
-image_src: 'https://placehold.co/1200x600'
-image_alt: 'This is the alt text'
-image_caption: 'This is an image caption.'
diff --git a/src/components/image/image.component.yml b/src/components/image/image.component.yml
index 973abd6..aee6274 100644
--- a/src/components/image/image.component.yml
+++ b/src/components/image/image.component.yml
@@ -14,22 +14,22 @@ props:
       title: Output image tag
       description: Specifies whether to output the image tag
       data: true
-    image_src:
+    image__src:
       type: string
       title: Source
       description: 'Specifies the path to the image'
       data: 'https://placehold.co/320x180'
-    image_alt:
+    image__alt:
       type: string
       title: Alternate text
       description: 'Specifies an alternate text for the image'
       data: 'A 16 by 9 image'
-    image_srcset:
+    image__srcset:
       type: string
       title: Source Set Attribute
       description: The image's srcset attribute, which defines multiple image sources for different device resolutions.
       data: 'https://placehold.co/320x180 320w, https://placehold.co/480x270 480w, https://placehold.co/640x360 640w, https://placehold.co/800x450 800w, https://placehold.co/960x540 960w, https://placehold.co/1120x630 1120w, https://placehold.co/1280x720 1280w, https://placehold.co/1440x810 1440w, https://placehold.co/1600x900 1600w, https://placehold.co/1760x990 1760w, https://placehold.co/1920x1080 1920w, https://placehold.co/2080x1170 2080w, https://placehold.co/2240x1260 2240w'
-    image_sizes:
+    image__sizes:
       type: string
       title: Image sizes
       description: 'Specifies the intended display sizes of the image'
diff --git a/src/components/image/responsive-image.twig b/src/components/image/responsive-image.twig
index 2d35770..184f2c6 100644
--- a/src/components/image/responsive-image.twig
+++ b/src/components/image/responsive-image.twig
@@ -5,28 +5,28 @@
  # - output_image_tag: Whether or not to output an <img> tag instead of a <picture> tag.
  #}
 
-{% set responsive_image_base_class = responsive_image_base_class|default('image') %}
+{% set responsive_image__base_class = responsive_image__base_class|default('image') %}
 
 {% if output_image_tag %}
-	{% include "@components/image/_image.twig" with {
-    image_base_class: responsive_image_base_class,
-    image_modifiers: responsive_image_modifiers,
-    image_blockname: responsive_image_blockname,
-    image_srcset: image_srcset|default(img_element['#attributes'].srcset),
-    image_sizes: image_sizes|default(img_element['#attributes'].sizes),
-    image_src: image_src|default(img_element['#uri']),
-    image_alt: image_alt|default(img_element['#alt']),
-    image_title: image_title|default(img_element['#title']),
+  {% include "@components/image/_image.twig" with {
+    image__base_class: responsive_image__base_class,
+    image__modifiers: responsive_image__modifiers,
+    image__blockname: responsive_image__blockname,
+    image__srcset: image__srcset|default(img_element['#attributes'].srcset),
+    image__sizes: image__sizes|default(img_element['#attributes'].sizes),
+    image__src: image__src|default(img_element['#uri']),
+    image__alt: image__alt|default(img_element['#alt']),
+    image__title: image__title|default(img_element['#title']),
   } %}
 {% else %}
-	{% include "@components/image/_picture.twig" with {
-    picture_base_class: responsive_image_base_class,
-    picture_modifiers: responsive_image_modifiers,
-    picture_blockname: responsive_image_blockname,
-    image_srcset: image_srcset|default(img_element['#attributes'].srcset),
-    image_sizes: image_sizes|default(img_element['#attributes'].sizes),
-    image_src: image_src|default(img_element['#uri']),
-    image_alt: image_alt|default(img_element['#alt']),
-    image_title: image_title|default(img_element['#title']),
+  {% include "@components/image/_picture.twig" with {
+    picture__base_class: responsive_image__base_class,
+    picture__modifiers: responsive_image__modifiers,
+    picture__blockname: responsive_image__blockname,
+    image__srcset: image__srcset|default(img_element['#attributes'].srcset),
+    image__sizes: image__sizes|default(img_element['#attributes'].sizes),
+    image__src: image__src|default(img_element['#uri']),
+    image__alt: image__alt|default(img_element['#alt']),
+    image__title: image__title|default(img_element['#title']),
   } %}
-{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/src/components/text-with-image/text-with-image.component.yml b/src/components/text-with-image/text-with-image.component.yml
index 36a46d2..fef06a0 100644
--- a/src/components/text-with-image/text-with-image.component.yml
+++ b/src/components/text-with-image/text-with-image.component.yml
@@ -33,4 +33,4 @@ props:
       type: string
       title: Button URL
       description: 'Specifies the URL the link will link to'
-      data: '#'
\ No newline at end of file
+      data: '#'

From 3b37f0e1fe1b8fcc9d422d85c0d865b18160c9ec Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Thu, 19 Sep 2024 13:48:06 -0500
Subject: [PATCH 10/44] feat: refine tabs and implement overflow actions

---
 src/components/tabs/_tab-content.twig  |   8 +
 src/components/tabs/_tab-label.twig    |  37 +++
 src/components/tabs/_tab.scss          |   5 +-
 src/components/tabs/_tab.twig          |  38 ---
 src/components/tabs/tabs.component.yml |  30 ++-
 src/components/tabs/tabs.js            | 314 ++++++++++++++++++++++---
 src/components/tabs/tabs.scss          | 109 ++++++++-
 src/components/tabs/tabs.stories.js    |  12 +-
 src/components/tabs/tabs.twig          | 143 ++++++++---
 9 files changed, 563 insertions(+), 133 deletions(-)
 create mode 100644 src/components/tabs/_tab-content.twig
 create mode 100644 src/components/tabs/_tab-label.twig
 delete mode 100644 src/components/tabs/_tab.twig

diff --git a/src/components/tabs/_tab-content.twig b/src/components/tabs/_tab-content.twig
new file mode 100644
index 0000000..7c144db
--- /dev/null
+++ b/src/components/tabs/_tab-content.twig
@@ -0,0 +1,8 @@
+
+{% set tab__modifiers = tab__modifiers|default([]) %}
+
+<div id="{{ tab__content__id }}" {{ bem(tab__content__base_class, tab__modifiers, tab__content__blockname, [current_class])}}>
+  {% block tab__content__components %}
+    {{ tab__content }}
+  {% endblock %}
+</div>
diff --git a/src/components/tabs/_tab-label.twig b/src/components/tabs/_tab-label.twig
new file mode 100644
index 0000000..e144d9f
--- /dev/null
+++ b/src/components/tabs/_tab-label.twig
@@ -0,0 +1,37 @@
+{#
+/**
+ * @file
+ * Theme override for a local task link.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper element.
+ * - is_active: Whether the task item is an active tab.
+ * - link: A rendered link element.
+ *
+ * Note: This template renders the content for each task item in
+ * menu-local-tasks.html.twig.
+ *
+ * @see template_preprocess_menu_local_task()
+ */
+#}
+
+{% set tab__modifiers = tab__modifiers|default([]) %}
+{%
+  set link_classes = [
+    is_active ? 'is-active' : ''
+  ]
+%}
+
+{# if Storybook atoms example, add ul wrapper #}
+<li{{attributes}} {{ bem(tab__base_class, tab__modifiers, tab__blockname) }}>
+	{% set current_class = key == 0 ? ' is-active' : '' %}
+	{% if tab__icon %}
+		<a href="{{ tab__link }}" id="{{ tab__id }}" {{ bem('link', [], tab__base_class, [current_class])}}>
+			<span {{ bem('text', [], tab__base_class, [current_class])}}>{{ tab__label }}</span>
+		</a>
+	{% else %}
+		<a href="{{ tab__link }}" id="{{ tab__id }}" {{ bem('link', [], tab__base_class, [current_class])}}>
+      <span {{ bem('text', [], tab__base_class, [current_class])}}>{{ tab__label }}</span>
+    </a>
+	{% endif %}
+</li>
diff --git a/src/components/tabs/_tab.scss b/src/components/tabs/_tab.scss
index d7a0674..88b21df 100644
--- a/src/components/tabs/_tab.scss
+++ b/src/components/tabs/_tab.scss
@@ -1,7 +1,6 @@
 @use '../../foundation/breakpoints/breakpoints' as *;
 
-.tabs__link,
-.tabs__link--local-tasks {
+.tab__link {
   background-color: var(--tabs-color-bg-default);
   border-bottom: var(--size-md) solid var(--tabs-color-bg-default);
   color: var(--tabs-color-text-default);
@@ -14,7 +13,7 @@
   text-decoration: none;
   transition: color 0.3s;
 
-  @include breakpoint('large') {
+  @include breakpoint('medium') {
     display: inline-block;
     position: relative;
     top: var(--spacing-md);
diff --git a/src/components/tabs/_tab.twig b/src/components/tabs/_tab.twig
deleted file mode 100644
index b21adc9..0000000
--- a/src/components/tabs/_tab.twig
+++ /dev/null
@@ -1,38 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a local task link.
- *
- * Available variables:
- * - attributes: HTML attributes for the wrapper element.
- * - is_active: Whether the task item is an active tab.
- * - link: A rendered link element.
- *
- * Note: This template renders the content for each task item in
- * menu-local-tasks.html.twig.
- *
- * @see template_preprocess_menu_local_task()
- */
-#}
-{%
-  set link_classes = [
-    is_active ? 'is-active' : '',
-    'tabs__link--local-tasks'
-  ]
-%}
-
-{# if Storybook atoms example, add ul wrapper #}
-{% if example %}
-<ul class="tabs__nav">
-{% endif %}
-<li{{ attributes }}>
-  {# Detect if Drupal #}
-  {% if attributes %}
-    {{ link(link['#title'], link['#url'], { 'class' : link_classes }) }}
-  {% else %}
-    <a href="{{ tab_link }}" class="tabs__link tabs__link--local-tasks{% if key == 0 %} is-active{% endif %}">{{ tab_text }}</a>
-  {% endif %}
-</li>
-{% if example %}
-</ul>
-{% endif %}
diff --git a/src/components/tabs/tabs.component.yml b/src/components/tabs/tabs.component.yml
index 22b9336..b421039 100644
--- a/src/components/tabs/tabs.component.yml
+++ b/src/components/tabs/tabs.component.yml
@@ -11,9 +11,27 @@ props:
       title: Tab Items
       description: Array of tab items.
       data:
-        - tab_text: 'Tab 1'
-          tab_content: 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
-        - tab_text: 'Tab 2'
-          tab_content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
-        - tab_text: 'Tab 3'
-          tab_content: 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'
+        - tab__label: 'Tab 1'
+          tab__content: 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
+        - tab__label: 'Tab 2'
+          tab__content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
+        - tab__label: 'Tab 3'
+          tab__content: 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'
+        - tab__label: 'Tab 4'
+          tab__content: 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
+        - tab__label: 'Tab 5'
+          tab__content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
+        - tab__label: 'Tab 6'
+          tab__content: 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'
+        - tab__label: 'Tab 1'
+          tab__content: 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
+        - tab__label: 'Tab 2'
+          tab__content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
+        - tab__label: 'Tab 3'
+          tab__content: 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'
+        - tab__label: 'Tab 4'
+          tab__content: 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
+        - tab__label: 'Tab 5'
+          tab__content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
+        - tab__label: 'Tab 6'
+          tab__content: 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'
\ No newline at end of file
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 62ed273..7ed892d 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -1,59 +1,301 @@
 Drupal.behaviors.tabs = {
   attach(context) {
     const el = context.querySelectorAll('.tabs');
-    const tabNavigationLinks = context.querySelectorAll('.tabs__link');
-    const tabContentContainers = context.querySelectorAll('.tabs__tab');
-    let activeIndex = 0;
 
+    /* eslint-disable */
     /**
-     * goToTab
-     *
-     * @description Goes to a specific tab based on index. Returns nothing.
-     * @param {number} index The index of the tab to go to
+     * getUrl
+     * @description Get the value of the anchor link in the URL.
+     * @returns The string value after the hash.
      */
-    function goToTab(index) {
-      if (
-        index !== activeIndex &&
-        index >= 0 &&
-        index <= tabNavigationLinks.length
-      ) {
-        tabNavigationLinks[Number(activeIndex)].classList.remove('is-active');
-        tabNavigationLinks[Number(index)].classList.add('is-active');
-        tabContentContainers[Number(activeIndex)].classList.remove('is-active');
-        tabContentContainers[Number(index)].classList.add('is-active');
-        activeIndex = index;
-      }
+    function getUrl() {
+      return (
+        window.location.protocol +
+        '//' +
+        window.location.host +
+        window.location.pathname
+      );
     }
+    /* eslint-enable */
 
     /**
-     * handleClick
-     *
-     * @description Handles click event listeners on each of the links in the
-     *   tab navigation. Returns nothing.
-     * @param {HTMLElement} link The link to listen for events on
-     * @param {number} index The index of that link
+     * getAnchor
+     * @description Get the value of the anchor link in the URL.
+     * @return The string value after the hash.
      */
-    function handleClick(link, index) {
-      link.addEventListener('click', (e) => {
-        e.preventDefault();
-        goToTab(index);
-      });
+    function getAnchor() {
+      return document.URL.split('#').length > 1
+        ? document.URL.split('#')[1]
+        : null;
     }
 
     /**
      * init
-     *
      * @description Initializes the component by removing the no-js class from
      *   the component, and attaching event listeners to each of the nav items.
      *   Returns nothing.
      */
-    for (let e = 0; e < el.length; e += 1) {
-      el[Number(e)].classList.remove('no-js');
+    if (el.length) {
+      el.forEach((e) => {
+        e.classList.remove('no-js');
+
+        const tabNavigationLinks = e.querySelectorAll('.tab__link');
+        const tabContentContainers = e.querySelectorAll('.tabs__tab__content');
+        let activeIndex = 0;
+
+        tabNavigationLinks.forEach((link, index) => {
+          const anchor = link.href.split('#');
+          // eslint-disable-next-line
+          const newUrl = `${getUrl()}` + '#' + `${anchor[1]}`;
+
+          link.addEventListener('click', (l) => {
+            l.preventDefault();
+
+            if (
+              index !== activeIndex &&
+              index >= 0 &&
+              index <= tabNavigationLinks.length
+            ) {
+              tabNavigationLinks[Number(activeIndex)].classList.remove(
+                'is-active',
+              );
+              tabNavigationLinks[Number(index)].classList.add('is-active');
+              tabContentContainers[Number(activeIndex)].classList.remove(
+                'is-active',
+              );
+              tabContentContainers[Number(index)].classList.add('is-active');
+              activeIndex = index;
+            }
+            window.history.replaceState('', '', newUrl);
+          });
+
+          if (anchor[1] === getAnchor()) {
+            link.click();
+          }
+        });
+
+        tabContentContainers.forEach((tabContent) => {
+          if (tabContent.id === getAnchor()) {
+            const tabLink = context.querySelector(
+              `a[href="#${tabContent.id}"]`,
+            );
+            tabLink.click();
+          }
+        });
+      });
     }
+  },
+};
 
-    for (let i = 0; i < tabNavigationLinks.length; i += 1) {
-      const link = tabNavigationLinks[Number(i)];
-      handleClick(link, i);
+Drupal.behaviors.tabsNavScroll = {
+  attach(context) {
+    // Selectors.
+    const tabsGroup = context.querySelectorAll('.tabs');
+    if (!tabsGroup) {
+      return;
     }
+
+    tabsGroup.forEach((tabs) => {
+      const tabsWrapper = tabs.querySelector('.tabs__wrapper');
+      const tabsNav = tabs.querySelector('.tabs__nav');
+      const tabsControls = tabs.querySelectorAll('.tabs__scroll');
+      const tabsLinks = tabs.querySelectorAll('.tab__link');
+      const controlsWidth = tabs.querySelector(
+        '.tabs__scroll--left',
+      ).offsetWidth;
+      let scrollIndicatorDir;
+      /**
+       * getFirstVisible
+       * @description Get the first item that is visible (not overflown).
+       * @return The value of the left edge of the first fully visible item plus
+       * the width of the controls so that things aren't visually hidden by the
+       * absolutely positioned elements.
+       */
+      function getFirstVisible() {
+        const tabsLeft = tabsNav.getBoundingClientRect().left;
+        const tabsItems = tabsNav.querySelectorAll('.tabs__tab');
+        const visibleItems = [];
+
+        tabsItems.forEach((item) => {
+          if (item.getBoundingClientRect().left > tabsLeft + controlsWidth) {
+            visibleItems.push(item);
+          }
+        });
+
+        return visibleItems[1].offsetLeft - controlsWidth;
+      }
+
+      /**
+       * getLastHidden
+       * @description Get the last item that is overflown (not visible).
+       * @return The value of the left edge of the first partially hidden item
+       * minus the width of the controls so that things aren't visually hidden by
+       * the absolutely positioned elements.
+       */
+      function getLastHidden() {
+        const tabsLeft = tabsNav.getBoundingClientRect().left;
+        const tabsItems = tabsNav.querySelectorAll('.tabs__tab');
+        const hiddenItems = [];
+
+        tabsItems.forEach((item) => {
+          if (item.getBoundingClientRect().left < tabsLeft) {
+            hiddenItems.push(item);
+          }
+        });
+
+        return hiddenItems[hiddenItems.length - 1].offsetLeft - controlsWidth;
+      }
+
+      /**
+       * setOverflow
+       * @description Get the positions of the tabsy_nav to determine whether an
+       * overflow situation is in play.
+       */
+      function setOverflow() {
+        const tabsLeft = tabsWrapper.getBoundingClientRect().left;
+        const tabsRight = tabsWrapper.getBoundingClientRect().right;
+        const firsttabsLeft = tabs
+          .querySelector('.tabs__tab:first-child')
+          .getBoundingClientRect().left;
+        const lasttabsRight = Math.floor(
+          tabs.querySelector('.tabs__tab:last-child').getBoundingClientRect()
+            .right,
+        );
+
+        if (firsttabsLeft < tabsLeft) {
+          // If left side of first tabsy_item is < left side of tabsy_nav.
+          // And right side of last tabsy_item is > right side of tabsy_nav.
+          if (lasttabsRight > tabsRight) {
+            if (scrollIndicatorDir !== 'both') {
+              scrollIndicatorDir = 'both';
+              tabsWrapper.setAttribute('data-scroll-indicator', 'both');
+            }
+            // If left side of first tabsy_item is < left side of tabsy_nav.
+            // But right side of last tabsy_item is <= right side of tabsy_nav.
+          } else if (scrollIndicatorDir !== 'left') {
+            scrollIndicatorDir = 'left';
+            tabsWrapper.setAttribute('data-scroll-indicator', 'left');
+          }
+          // If left side of first tabsy_item is >= left side of tabsy_nav.
+          // And right side of last tabsy_item is > right side of tabsy_nav.
+        } else if (lasttabsRight > tabsRight) {
+          if (scrollIndicatorDir !== 'right') {
+            scrollIndicatorDir = 'right';
+            tabsWrapper.setAttribute('data-scroll-indicator', 'right');
+          }
+          // If left side of first tabsy_item is >= left side of tabsy_nav.
+          // And right side of last tabsy_item is <= right side of tabsy_nav.
+        } else {
+          scrollIndicatorDir = 'none';
+          tabsWrapper.setAttribute('data-scroll-indicator', 'none');
+        }
+      }
+
+      /**
+       * mouseNav
+       * @description Support mouse navigation when horizontal scrolling occurs.
+       */
+      function mouseNav(direction) {
+        tabsNav.scrollLeft =
+          direction === 'right' ? getFirstVisible() : getLastHidden();
+      }
+
+      /**
+       * ensureVisible
+       * @description Ensure the focused tab is fully visible (not overflown).
+       * @param {HTMLElement} item The focused item.
+       */
+      function ensureVisible(item) {
+        const tabsLeft = tabsWrapper.getBoundingClientRect().left;
+        const tabsRight = tabsWrapper.getBoundingClientRect().right;
+
+        // if right side overflows control, set to left + control.
+        if (
+          Math.floor(item.getBoundingClientRect().right) >
+          tabsRight - controlsWidth
+        ) {
+          // If overflow right or both.
+          if (
+            tabsWrapper.getAttribute('data-scroll-indicator') === 'right' ||
+            tabsWrapper.getAttribute('data-scroll-indicator') === 'both'
+          ) {
+            tabsWrapper.scrollLeft =
+              item.parentElement.offsetLeft - controlsWidth;
+          }
+        }
+        // If left side overflows control, set to left + control.
+        else if (
+          Math.floor(item.getBoundingClientRect().left) <
+          tabsLeft + controlsWidth
+        ) {
+          // If overflow left or both.
+          if (
+            tabsWrapper.getAttribute('data-scroll-indicator') === 'left' ||
+            tabsWrapper.getAttribute('data-scroll-indicator') === 'both'
+          ) {
+            tabsWrapper.scrollLeft =
+              item.parentElement.offsetLeft - controlsWidth;
+          }
+        }
+      }
+
+      /**
+       * debounce
+       * @description Debounce to only run a function at most once every 200ms.
+       * @param {} func The function to be run after the timeout.
+       */
+      function debounce(func) {
+        let timer;
+        return function debounceFunction(event) {
+          if (timer) clearTimeout(timer);
+          timer = setTimeout(func, 200, event);
+        };
+      }
+
+      /**
+       * linksListeners
+       * @description Support focus visualization.
+       */
+      tabsLinks.forEach((link) => {
+        link.addEventListener('focus', () => {
+          ensureVisible(link);
+        });
+      });
+
+      /**
+       * init
+       */
+      setOverflow();
+
+      tabsControls.forEach((control) => {
+        control.addEventListener('click', (e) => {
+          e.preventDefault();
+          setOverflow();
+          if (control.classList.contains('tabs__scroll--right')) {
+            mouseNav('right');
+          } else {
+            mouseNav('left');
+          }
+        });
+      });
+
+      tabsNav.addEventListener('scroll', () => {
+        setOverflow();
+      });
+
+      tabsNav.addEventListener('scroll', () => {
+        if (window.innerWidth > 1040) {
+          setOverflow();
+        }
+      });
+
+      // Listen for window resize.
+      window.addEventListener(
+        'resize',
+        debounce(function resizeListener() {
+          setOverflow();
+        }),
+      );
+    });
   },
 };
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 4382338..0b8fa30 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -1,21 +1,50 @@
 @forward './tab';
 @use '../../foundation/breakpoints/breakpoints' as *;
 @use '../../foundation/utility/utility' as *;
+@use '../../foundation/motion/motion' as *;
+
+/* Tab navigation wrapper */
+.tabs__wrapper {
+  position: relative;
+  overflow: hidden;
+}
 
 /* Tab Navigation */
 .tabs__nav {
   @include list-reset;
 
-  border-bottom: 1px solid var(--tabs-color-border-bottom);
-  padding-bottom: var(--spacing-md);
+  & {
+    border-bottom: 1px solid var(--tabs-color-border-bottom);
+    padding-bottom: var(--spacing-md);
+    display: flex;
+    flex-flow: row nowrap;
+    overflow: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    width: auto;
+    position: static;
+  }
 
-  @include breakpoint('large') {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include breakpoint('medium') {
     display: flex;
   }
 }
 
 /* Tab Content (hidden only in full #tabs js version) */
 .tabs__tab {
+  flex: 0 0 auto;
+  align-items: flex-end;
+  align-content: flex-end;
+  display: flex;
+  position: relative;
+}
+
+.tabs__tab__content {
+  padding: 1.5rem;
   display: none;
 
   &.is-active {
@@ -23,10 +52,6 @@
   }
 }
 
-.tabs__content {
-  padding: 1.5rem;
-}
-
 /* No-js fallback */
 .tabs.no-js {
   .tabs__tab.is-active {
@@ -34,8 +59,70 @@
   }
 }
 
-/* Drupal Local Tasks variant */
-.tabs__nav--local-tasks {
-  margin: var(--spacing-lg) 0 var(--spacing-md);
-  padding: 0;
+/* tab overflow scroll buttons */
+.tabs__scroll {
+  @include transition(opacity);
+
+  & {
+    position: absolute;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    padding: 0;
+  }
+
+  &--left {
+    left: 0;
+    background: linear-gradient(
+      90deg,
+      var(--tabs-color-bg-default) 75%,
+      transparent 100%
+    );
+    border-radius: var(--button-radius) 0 0 var(--button-radius);
+
+    [data-scroll-indicator='left'] &,
+    [data-scroll-indicator='both'] & {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    [data-scroll-indicator='right'] & {
+      @include animate-hidden;
+    }
+  }
+
+  &--right {
+    right: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--tabs-color-bg-default) 25%
+    );
+    border-radius: 0 var(--button-radius) var(--button-radius) 0;
+
+    [data-scroll-indicator='right'] &,
+    [data-scroll-indicator='both'] & {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    [data-scroll-indicator='left'] & {
+      @include animate-hidden;
+    }
+  }
+
+  .scroll__icon {
+    display: flex;
+    height: calc(var(--size-xl) + var(--size-lg) + var(--size-md));
+    width: calc(var(--size-xl) + var(--size-lg) + var(--size-md));
+  }
+
+  .icon {
+    fill: var(--button-color-bkg);
+  }
 }
diff --git a/src/components/tabs/tabs.stories.js b/src/components/tabs/tabs.stories.js
index 834b314..2081a7e 100644
--- a/src/components/tabs/tabs.stories.js
+++ b/src/components/tabs/tabs.stories.js
@@ -1,15 +1,15 @@
+// Twig templates
 import tabsTwig from './tabs.twig';
-
-import { props } from './tabs.component.yml';
-
-import './tabs';
+// Utility
 import { mapDataToTwig } from '../../util/dataTransformers';
+import './tabs';
+// Data
+import { props } from './tabs.component.yml';
+const tabData = mapDataToTwig(props.properties);
 
 /**
  * Storybook Definition.
  */
 export default { title: 'Components/Tabs' };
 
-const tabData = mapDataToTwig(props.properties);
-
 export const tabs = () => tabsTwig(tabData);
diff --git a/src/components/tabs/tabs.twig b/src/components/tabs/tabs.twig
index bcebd91..22eb1c5 100644
--- a/src/components/tabs/tabs.twig
+++ b/src/components/tabs/tabs.twig
@@ -1,45 +1,122 @@
 {#
 /**
  * @file
- * Theme override to display primary and secondary local tasks.
+ * Theme override to display primary and tabs local tasks.
  *
  * Available variables:
  * - primary: HTML list items representing primary tasks.
- * - secondary: HTML list items representing primary tasks.
+ * - tabs: HTML list items representing primary tasks.
+ * - field_heading: Optional heading for the tabs component.
+ * - field_tabs: The collection of tabs with title and content.
+ * - field_tabs_display: Defines how the tabs will visually display.
  *
- * Each item in these variables (primary and secondary) can be individually
- * themed in menu-local-task.html.twig.
  */
 #}
+{% set tabs__base_class = 'tabs' %}
+{% set tabs__modifiers = tabs__modifiers|default([]) %}
+{% set tabs__display = tabs__display|default('horiztonal-plain') %}
 
-{# Drupal Specific #}
-{% if primary %}
-  <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
-  <ul class="tabs__nav tabs__nav--local-tasks">{{ primary }}</ul>
-{% endif %}
-{% if secondary %}
-  <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
-  <ul>{{ secondary }}</ul>
+{# Create unique tab ids #}
+{% set tab_keys = tab_keys|default([]) %}
+{% if tab_keys|length == 0 %}
+	{% for key, tab in tab_items %}
+		{% set unique_id = random('1234567890') ~ random('1234567890') ~ random('1234567890') ~ random('1234567890') %}
+		{% set tab__id = 'tab' ~ '-' ~ unique_id %}
+		{% set tab_keys = tab_keys|merge({(loop.index - 1) : tab__id}) %}
+	{% endfor %}
 {% endif %}
 
-{# Component Library Specific (javascript version) #}
-{% if not primary %}
-{{ attach_library('emulsify/tabs') }}
-  <div id="tabs" class="tabs no-js">
-    <ul class="tabs__nav">
-      {% for key, tab in tabs %}
-        {% include "@components/tabs/_tab.twig" with {
-          tab_link: "#tab-" ~ key,
-          tab_text: tab.tab_text,
-        } %}
-      {% endfor %}
-    </ul>
-    {% for key, tab in tabs %}
-      <div class="tabs__tab{% if key == 0 %} is-active{% endif %}">
-        <div id="tab-{{ key }}" class="tabs__content">
-          <p>{{ tab.tab_content }}</p>
-        </div>
-      </div>
-    {% endfor %}
-  </div>
-{% endif %}
+{% set scroll_left %}
+{% embed "@components/button/button.twig" with {
+    button__content: true,
+    button__base_class: 'scroll',
+    button__blockname: tabs__base_class,
+    button__modifiers: ['left'],
+    button__attributes: {
+      'aria-hidden': 'true',
+      'tabindex': '-1',
+    },
+    button__icon: {
+      left: true,
+      name: 'chevronLeft',
+      decorative: true,
+    },
+    } %}
+	{% block button__content %}
+		<span {{ bem('visually-hidden') }}>Scroll Left</span>
+	{% endblock %}
+{% endembed %}
+{% endset %}
+
+{% set scroll_right %}
+{% embed "@components/button/button.twig" with {
+    button__content: true,
+    button__base_class: 'scroll',
+    button__blockname: tabs__base_class,
+    button__type: 'filled',
+    button__modifiers: ['right'],
+    button__attributes: {
+      'aria-hidden': 'true',
+      'tabindex': '-1',
+    },
+    button__icon: {
+      right: true,
+      name: 'chevronRight',
+      decorative: true,
+    },
+    } %}
+	{% block button__content %}
+		<span {{ bem('visually-hidden') }}>Scroll Right</span>
+	{% endblock %}
+{% endembed %}
+{% endset %}
+
+{% set tabs %}
+<div {{ bem(tabs__base_class, tabs__modifiers, tabs__blockname, ['no-js']) }} data-tabs-display="{{ tabs__display }}">
+	<div {{ bem('wrapper', tabs__modifiers, tabs__base_class) }}>
+		{{ scroll_left }}
+		<ul {{ bem('nav', [], tabs__base_class) }}>
+			{% for key, tab in tabs %}
+				{% set tab__name = tab.tab__label|lower|replace({' ': '-', '&': 'and'}) ~ '-' ~ key %}
+				{% include "@components/tabs/_tab-label.twig" with {
+					tab__base_class: 'tab',
+					tab__blockname: tabs__base_class,
+					tab__link: '#' ~ tab__name,
+					tab__id: tab__name ~ '-tab',
+					tab__label: tab.tab__label,
+					tab__icon: tab.tab__icon,
+				} %}
+			{% endfor %}
+		</ul>
+		{{ scroll_right }}
+	</div>
+	<div {{ bem('content', [], tabs__base_class)}}>
+		{% block tab__content %}
+			{% for key, tab in tabs %}
+				{% set tab__name = tab.tab__label|lower|replace({' ': '-', '&': 'and'}) ~ '-' ~ key %}
+				{% set current_class = key == 0 ? ' is-active' : '' %}
+				{% include "@components/tabs/_tab-content.twig" with {
+					tab__content__base_class: 'tab__content',
+					tab__content__blockname: tabs__base_class,
+					tab__base_class: 'tab',
+					tab__blockname: tabs__base_class,
+					tab__content__id: '#' ~ tab__name,
+					tab__content: tab.tab__content,
+				} %}
+			{% endfor %}
+		{% endblock %}
+	</div>
+</div>
+{% endset %}
+
+{% embed "@layout/container/container.twig" with {
+  container__component_width: container__component_width|default('extended'),
+  container__component_alignment: 'center',
+  container__heading: tabs__heading,
+  container__text: tabs__text,
+	container__theme: tab__component_theme,
+}%}
+	{% block container__content %}
+		{{ tabs }}
+	{% endblock %}
+{% endembed %}

From 9c21b9382ef13a08e731c567ee238dbf6c1e65f7 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Thu, 19 Sep 2024 13:56:46 -0500
Subject: [PATCH 11/44] feat: update emulsify core to latest

---
 package-lock.json                      | 428 +++++++++++++++----------
 package.json                           |   2 +-
 src/components/tabs/tabs.component.yml |   2 +-
 3 files changed, 264 insertions(+), 168 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1421297..9715442 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0-development",
       "license": "ISC",
       "dependencies": {
-        "@emulsify/core": "^2.2.2",
+        "@emulsify/core": "^2.2.3",
         "@percy/cli": "^1.28.2",
         "@percy/storybook": "^5.0.1"
       },
@@ -1951,9 +1951,9 @@
       }
     },
     "node_modules/@bundled-es-modules/memfs/node_modules/memfs": {
-      "version": "4.11.1",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.11.1.tgz",
-      "integrity": "sha512-LZcMTBAgqUUKNXZagcZxvXXfgF1bHX7Y7nQ0QyEiNbRJgE29GhgPd8Yna1VQcLlPiHt/5RFJMWYN9Uv/VPNvjQ==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.12.0.tgz",
+      "integrity": "sha512-74wDsex5tQDSClVkeK1vtxqYCAgCoXxx+K4NSHzgU/muYVYByFqa+0RnrPO9NM6naWm1+G9JmZ0p6QHhXmeYfA==",
       "dependencies": {
         "@jsonjoy.com/json-pack": "^1.0.3",
         "@jsonjoy.com/util": "^1.3.0",
@@ -2402,25 +2402,25 @@
       }
     },
     "node_modules/@emulsify/core": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@emulsify/core/-/core-2.2.2.tgz",
-      "integrity": "sha512-EdisHw2d43oFZNResp8vJOdiMYkw53YRpOlqJnx/pptcBNmPw/7L5PhzB6xllq9jHq+d3BPw4iNR25SpXPqk3Q==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@emulsify/core/-/core-2.2.3.tgz",
+      "integrity": "sha512-aVhlKr7M31OksKABivPGV6cuWJ3ETGSfM8Prh3qWmknS8IMXIIh81fMh7GW4DCfk6pm8SAZYHjkUe4F8Ktzh9Q==",
       "dependencies": {
         "@babel/core": "^7.25.2",
         "@babel/eslint-parser": "^7.25.1",
         "@babel/preset-env": "^7.25.4",
         "@emulsify/cli": "^1.11.0",
-        "@storybook/addon-a11y": "^8.3.0",
-        "@storybook/addon-actions": "^8.3.0",
-        "@storybook/addon-essentials": "^8.3.0",
-        "@storybook/addon-links": "^8.3.0",
+        "@storybook/addon-a11y": "^8.3.2",
+        "@storybook/addon-actions": "^8.3.2",
+        "@storybook/addon-essentials": "^8.3.2",
+        "@storybook/addon-links": "^8.3.2",
         "@storybook/addon-styling-webpack": "^1.0.0",
-        "@storybook/addon-themes": "^8.3.0",
-        "@storybook/html": "^8.3.0",
-        "@storybook/html-webpack5": "^8.3.0",
-        "@storybook/manager-api": "^8.3.0",
-        "@storybook/preview-api": "^8.3.0",
-        "@storybook/theming": "^8.3.0",
+        "@storybook/addon-themes": "^8.3.2",
+        "@storybook/html": "^8.3.2",
+        "@storybook/html-webpack5": "^8.3.2",
+        "@storybook/manager-api": "^8.3.2",
+        "@storybook/preview-api": "^8.3.2",
+        "@storybook/theming": "^8.3.2",
         "add-attributes-twig-extension": "^0.1.0",
         "autoprefixer": "^10.4.20",
         "babel-loader": "^9.2.1",
@@ -2466,10 +2466,10 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "regenerator-runtime": "^0.14.1",
-        "sass": "^1.78.0",
+        "sass": "^1.79.1",
         "sass-loader": "^16.0.1",
-        "storybook": "^8.3.0",
-        "style-dictionary": "^4.1.1",
+        "storybook": "^8.3.2",
+        "style-dictionary": "^4.1.2",
         "stylelint": "^16.9.0",
         "stylelint-config-standard-scss": "^13.1.0",
         "stylelint-prettier": "^5.0.0",
@@ -4987,11 +4987,11 @@
       }
     },
     "node_modules/@storybook/addon-a11y": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.3.0.tgz",
-      "integrity": "sha512-ub/O4tkeQFE3bXEg8VsH3HU9MmqD+CSwGN5QVJmnkCOzpwjnhaVtWFNVZ+3C2AsT0b3sW9llDaK4UgivglV8+A==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.3.2.tgz",
+      "integrity": "sha512-i0qyMp+MxzJ3UY3Absqwxhry4JqZo9yk1XLWld7hJpfAzmrulnaIctudQ940/OMFPcEIsOVdg8euz0IGW3HTNw==",
       "dependencies": {
-        "@storybook/addon-highlight": "8.3.0",
+        "@storybook/addon-highlight": "8.3.2",
         "axe-core": "^4.2.0"
       },
       "funding": {
@@ -4999,13 +4999,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.3.0.tgz",
-      "integrity": "sha512-HvAc3fW979JVw8CSKXZMouvgrJ2BNLNWaUB8jNokQb3Us00P6igVKLwg/pBV8GBgDr5Ng4pHYqi/ZH+xzEYFFw==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.3.2.tgz",
+      "integrity": "sha512-Ds2lNyEpeVO0TexoXEHpE3kRcA7rJm5X5nWz4PdvF7kiC1aX5ZMy2qEPZOH6Jvalysm+PChw4Ib+lCaoIFGOJg==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "@types/uuid": "^9.0.1",
@@ -5018,13 +5018,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.3.0.tgz",
-      "integrity": "sha512-qaV/QsXoviAmBYFszI/KN1CaI/LcACGX9RCBB54fMau3JuouIBU/zTl2jY2+BioCBk6oY8KqcnAS1coOZzlNXQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.3.2.tgz",
+      "integrity": "sha512-5dPyynGRp2ZAZrpG2tadbdBk7X7GySoRuZwkQebNFGv+JZ8LoeQ/qc8yUOL+vfWKFGqvjOmX5R55IUHLYsw2NQ==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "memoizerific": "^1.11.3",
@@ -5035,13 +5035,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.3.0.tgz",
-      "integrity": "sha512-Id4j6Neimkdq0OyfQ3qkHpKLisbN08M8pXHDI/A0VeF91xEGBdc1bJgS/EU+ifa24tr5SRYwlAlcBDAWJbZMfA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.3.2.tgz",
+      "integrity": "sha512-YHoSMWSR1fItPb5S/3gOIhn9T6HcWcTxEJrjuuDk1hySmBmA+ojVJqmcI5MoNG3XtGigSXGJ/K2wmU57wZH4xw==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "dequal": "^2.0.2",
@@ -5053,19 +5053,19 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.3.0.tgz",
-      "integrity": "sha512-LrvWBDX5Vi//82Q78QRbTsG+9rJU9JJFAVPk1NnLp2Yn0F4FueVzIw8AabAkZFy0LHPMGV+EHpkPtYz4Czkhgw==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.3.2.tgz",
+      "integrity": "sha512-DPmWhvnHap8bmtiJOYpmo9MYpuJW5QyV6MhmGhpe60A9yH9TRTIf3h7uGpyX3TgtrYxC07Sw/8GaY0UfendJGg==",
       "dependencies": {
         "@mdx-js/react": "^3.0.0",
-        "@storybook/blocks": "8.3.0",
-        "@storybook/csf-plugin": "8.3.0",
+        "@storybook/blocks": "8.3.2",
+        "@storybook/csf-plugin": "8.3.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/react-dom-shim": "8.3.0",
+        "@storybook/react-dom-shim": "8.3.2",
         "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "fs-extra": "^11.1.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -5079,23 +5079,23 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.3.0.tgz",
-      "integrity": "sha512-y+hlMnIoD+h/diY7BvIeySPCz/ZtJPPZfS/COQuPRXfPWCr37p9XLEz3E+m2spniAbgGv9KpvdqQd0kWcwwfiA==",
-      "dependencies": {
-        "@storybook/addon-actions": "8.3.0",
-        "@storybook/addon-backgrounds": "8.3.0",
-        "@storybook/addon-controls": "8.3.0",
-        "@storybook/addon-docs": "8.3.0",
-        "@storybook/addon-highlight": "8.3.0",
-        "@storybook/addon-measure": "8.3.0",
-        "@storybook/addon-outline": "8.3.0",
-        "@storybook/addon-toolbars": "8.3.0",
-        "@storybook/addon-viewport": "8.3.0",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.3.2.tgz",
+      "integrity": "sha512-r0wnw5dbqeVklSjMkA5dTLufmm20IZSskSmadbXOOZBKFqANm15LRGdQ7+Pfr8N0XF4//tFwnvIfw+hMmKGFEQ==",
+      "dependencies": {
+        "@storybook/addon-actions": "8.3.2",
+        "@storybook/addon-backgrounds": "8.3.2",
+        "@storybook/addon-controls": "8.3.2",
+        "@storybook/addon-docs": "8.3.2",
+        "@storybook/addon-highlight": "8.3.2",
+        "@storybook/addon-measure": "8.3.2",
+        "@storybook/addon-outline": "8.3.2",
+        "@storybook/addon-toolbars": "8.3.2",
+        "@storybook/addon-viewport": "8.3.2",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -5103,13 +5103,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.3.0.tgz",
-      "integrity": "sha512-bS1rqzbwGgeTKVLYEyY+6DzpafLtDLnoSF+KzRIiV7/1H30evhwVSzkgX1L2F6+ssS1n9WrRJeglniv9j+5mGQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.3.2.tgz",
+      "integrity": "sha512-JFL/JLBZfa89POgi8lBdt8TzzCS1bgN/X6Qj1MlTq3pxHYqO66eG8DtMLjpuXKOhs8Dhdgs9/uxy5Yd+MFVRmQ==",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -5118,13 +5118,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-links": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.3.0.tgz",
-      "integrity": "sha512-nUnoMPPuxM8yJ7LCrppsUrn3gwqt4E0si9fqIIb5IkB56vz48RxCO9MtO1qjwhWosfMdN6boHaOl1Qc6IxV3Lg==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.3.2.tgz",
+      "integrity": "sha512-CHp/3XSB/AWyoP9b2tNaaKNTyftLPIPWqMhqhH1V5irjXhLDpBBEkmgbvB19xJ4qCfDjjOjokSLmSBaVOnzv2g==",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@storybook/global": "^5.0.0",
@@ -5136,7 +5136,7 @@
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -5145,9 +5145,9 @@
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.3.0.tgz",
-      "integrity": "sha512-0TZ2ihzX0mRr1rNrFDieDsIKASZ2qUg3eHDkskLKOhxwoUHqsLzXlvS/scKZ+zb8pgjrvsBAsjyPstlrK+z0Zg==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.3.2.tgz",
+      "integrity": "sha512-5RPF2oEw5XnTmz2cvjqz2WGnqOrJ1NxXIuJc6QeO6EXQqqjPnj/9rV/MBmzMd9cjk8Ud8c4AA5+jJbl4IgcwhQ==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "tiny-invariant": "^1.3.1"
@@ -5157,13 +5157,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.3.0.tgz",
-      "integrity": "sha512-xTvBGgX6RIkKjQiAi9LvPGbGuBa6tsJS2jCmjwiei3SX3I56E6Bf3KASsFH2x8j9khMVsgQcfA3QDIhjwatdgw==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.3.2.tgz",
+      "integrity": "sha512-VxUYCHPCZQDwnj/9U4d6QLsfGi9wHGO0hOENjC5ZCwzMNCq6t7XNRToSsq4zUPucH5XKaQW2vyTdbNdUQiki4Q==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "ts-dedent": "^2.0.0"
@@ -5173,7 +5173,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-styling-webpack": {
@@ -5200,9 +5200,9 @@
       }
     },
     "node_modules/@storybook/addon-themes": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-8.3.0.tgz",
-      "integrity": "sha512-kAvpsQBrIMe7u8zU5+WoYKPhSo/MzgYXHARjYKhJYpsFatCv/npg/hLOiBlKWV5FzEqjQx9dAZiehXDF3JsCZw==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-8.3.2.tgz",
+      "integrity": "sha512-gCxKTFDSdDCb1jRotJmejjHQ0ZpQuwnNQp84xarqjZWbepQvdaucgxcqaL9jbRCvN3s/wG/qg04Bw3hykuVVgw==",
       "dependencies": {
         "ts-dedent": "^2.0.0"
       },
@@ -5211,25 +5211,25 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.3.0.tgz",
-      "integrity": "sha512-/3/jnd70tnvh3x1EL8axE4TR9EHwC+bBch1uIc3vH/lmyZBqSBVA50clz23FvjhykjcaKQogcugCuU1w5TJlBA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.3.2.tgz",
+      "integrity": "sha512-y3mokzvoeEE1ga96c8KX7anb9fU5wRGWZBsX7cQkm5ebXHsXjH2Y0pcdFnw6UxFbPMjh70LlZF9UhXnz7UC7Hw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.3.0.tgz",
-      "integrity": "sha512-6h/0mKipUG6w2o5IOzyhvC/2ifJlSNIA60hLkJ291g42+ilzkydpby9TBN7FcnrVL3Bv+oLgkDLBWVCqma/fyw==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.3.2.tgz",
+      "integrity": "sha512-AyXpQ2ntpRoNfOWPnaUX4CTWSj163ncgzcoUyBRWL/yiu/PcMK4tlQ141mWwoamAcXEVDK40Q0vWmRwZ06C2gw==",
       "dependencies": {
         "memoizerific": "^1.11.3"
       },
@@ -5238,13 +5238,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.3.0.tgz",
-      "integrity": "sha512-V7D5lv5R+GJya9cCZOCjmOVjhvP5J3KIaclQuuGGJda/ZD/SpwHcFOGSpo6sNR2UKHXXvb61oM8gRQQWDvqPlg==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.3.2.tgz",
+      "integrity": "sha512-z6XTg5fC5XT/8vYYtFqVhQtBYw5MkSlkQF5HM1ntxlEesN4tGd14SjFd24nWuoAHq4G5D2D8KNt41IoNdzeD1A==",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@storybook/global": "^5.0.0",
@@ -5268,7 +5268,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -5280,11 +5280,11 @@
       }
     },
     "node_modules/@storybook/builder-webpack5": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.3.0.tgz",
-      "integrity": "sha512-kJJjyWJ/ttUIRYJe6muMjWlXnH9nNmTvd4k5QY6AnblcxE/mXc1Z+D5lSzvStmZEAB/KaSHGrEuiSCReQrNTTQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.3.2.tgz",
+      "integrity": "sha512-+Jy/iI1DoXTyIYurTSVvuoIgsibpO2WeZo52I/eoNeAvD9HguxmiZ4sBek4f6850jM7TLNFnhhOS0/7GzucmHw==",
       "dependencies": {
-        "@storybook/core-webpack": "8.3.0",
+        "@storybook/core-webpack": "8.3.2",
         "@types/node": "^22.0.0",
         "@types/semver": "^7.3.4",
         "browser-assert": "^1.2.1",
@@ -5317,7 +5317,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -5360,28 +5360,30 @@
       }
     },
     "node_modules/@storybook/components": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.3.0.tgz",
-      "integrity": "sha512-SO/iTkmWp3aYCIy8DEhRMoOn6K7lcKTPNC/YjTvOFFzwq/CLq86WNqz6aX+wV5n6MvWTs7evSwMoz7lp4Lc4sw==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.3.2.tgz",
+      "integrity": "sha512-yB/ETNTNVZi8xvVsTMWvtiI4APRj2zzAa3nHyQO0X+DC4jjysT9D1ruL6jZJ/2DHMp7A9U6v2if83dby/kszfg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/core": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.3.0.tgz",
-      "integrity": "sha512-UeErpD0xRIP2nFA2TjPYxtEyv24O6VRfq2XXU5ki2QPYnxOxAPBbrMHCADjgBwNS4S2NUWTaVBYxybISVbrj+w==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-DVXs9AZzXHUKEhi5hKQ4gmH2ODFFM9hmd3odnlqenIINxGynbRtAGzU8pMhjrTRSrnlLr1liGew1IcY+hwkFjQ==",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@types/express": "^4.17.21",
+        "better-opn": "^3.0.2",
         "browser-assert": "^1.2.1",
         "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
         "esbuild-register": "^3.5.0",
         "express": "^4.19.2",
+        "jsdoc-type-pratt-parser": "^4.0.0",
         "process": "^0.11.10",
         "recast": "^0.23.5",
         "semver": "^7.6.2",
@@ -5394,9 +5396,9 @@
       }
     },
     "node_modules/@storybook/core-webpack": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.3.0.tgz",
-      "integrity": "sha512-lCuuB0dD+SKjF17QVX+YoQIlW30Dv/zK0k3Gt3mXdvYqjFXTx1FqWRmt1YFeUWaBQ0XF8GC+PN699KgwGH73tA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.3.2.tgz",
+      "integrity": "sha512-WOmtvnH7qZR6UaN3QsXRqj8xeztRDH5jms4f7+jnudB9xs+Fn7cEkns1SdMh0QK8BOt1bTCdoSwq2kFbszfgZA==",
       "dependencies": {
         "@types/node": "^22.0.0",
         "ts-dedent": "^2.0.0"
@@ -5406,7 +5408,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/csf": {
@@ -5418,9 +5420,9 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.3.0.tgz",
-      "integrity": "sha512-sCmeN/OVYj95TKkMqJqxbaztIbdv5jCrtrXuNg4oJaGzNucmMNAbmv2jK2tCNE6Uz2X9IMRcseFX/h9TgjyJ9A==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.3.2.tgz",
+      "integrity": "sha512-9UvoBkYDLzf/0e2lQMPyBCJHrrEMxvhL7fraVX2c5OxwVUwgQnHlgNR3zxzw1Nr/AWyC5OKYlaE1eM10JVm2GA==",
       "dependencies": {
         "unplugin": "^1.3.1"
       },
@@ -5429,7 +5431,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/global": {
@@ -5438,15 +5440,15 @@
       "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ=="
     },
     "node_modules/@storybook/html": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/html/-/html-8.3.0.tgz",
-      "integrity": "sha512-v09r70OyLMjxKoGl0a2H5XkMeLHuZXfAE3fkq/G5ovcvu3BwTFzNVPweu2xZHIIKv3pSivbgo/UsMWvZSDoXKg==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/html/-/html-8.3.2.tgz",
+      "integrity": "sha512-hGABYjBqoai4P5cJ98WINfObJNkBHobTPQ2zDk6WVNYdscUnLgVSJ4/oTUd/NrNL9AXVrqML4tmFDhEYmTvUhg==",
       "dependencies": {
-        "@storybook/components": "^8.3.0",
+        "@storybook/components": "^8.3.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "^8.3.0",
-        "@storybook/preview-api": "^8.3.0",
-        "@storybook/theming": "^8.3.0",
+        "@storybook/manager-api": "^8.3.2",
+        "@storybook/preview-api": "^8.3.2",
+        "@storybook/theming": "^8.3.2",
         "ts-dedent": "^2.0.0"
       },
       "engines": {
@@ -5457,18 +5459,18 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/html-webpack5": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/html-webpack5/-/html-webpack5-8.3.0.tgz",
-      "integrity": "sha512-hR4txwNg7Gm+Bsxj/In31EvOsEl2+oGrNqp7tL0B/BUlnbE36EZ8uXZx5ci1uNLQL7uoqyLDCwmFv24LeWQh7Q==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/html-webpack5/-/html-webpack5-8.3.2.tgz",
+      "integrity": "sha512-o+jgFL582EvNEfpj+9EAwSz/R+ETQ5ST5iBPsAm2ZVDpUyfClXJFPrX2KA3IA2GUA29ewbI3y7YWkAshzsj2GQ==",
       "dependencies": {
-        "@storybook/builder-webpack5": "8.3.0",
+        "@storybook/builder-webpack5": "8.3.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/html": "8.3.0",
-        "@storybook/preset-html-webpack": "8.3.0",
+        "@storybook/html": "8.3.2",
+        "@storybook/preset-html-webpack": "8.3.2",
         "@types/node": "^22.0.0"
       },
       "engines": {
@@ -5479,13 +5481,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/icons": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.10.tgz",
-      "integrity": "sha512-310apKdDcjbbX2VSLWPwhEwAgjxTzVagrwucVZIdGPErwiAppX8KvBuWZgPo+rQLVrtH8S+pw1dbUwjcE6d7og==",
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.12.tgz",
+      "integrity": "sha512-UxgyK5W3/UV4VrI3dl6ajGfHM4aOqMAkFLWe2KibeQudLf6NJpDrDMSHwZj+3iKC4jFU7dkKbbtH2h/al4sW3Q==",
       "engines": {
         "node": ">=14.0.0"
       },
@@ -5495,23 +5497,23 @@
       }
     },
     "node_modules/@storybook/manager-api": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.0.tgz",
-      "integrity": "sha512-5WBLEFHpe4H+9vZZLjNh7msIkyl9MPt4/C2nI+MXKZyU55xBBgiAy4fcD9aj02PcbhyR4JhLqbqmdeBe5Xafeg==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.2.tgz",
+      "integrity": "sha512-8FuwE3BGsLPF0H154+1X/4krSbvmH5xu5YmaVTVDV8DRPlBeRIlNV0HDiZfBvftF4EB7fRYolzghXQplHIX8Fg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/preset-html-webpack": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/preset-html-webpack/-/preset-html-webpack-8.3.0.tgz",
-      "integrity": "sha512-JVzBPP7Sho+ktNnkPlql3zIKlQsTU0V/A/BRGyh5gdshiFoh+YfWyAUs7Nv+xLksd3+bqdMOuj5JRwhRk07Oig==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/preset-html-webpack/-/preset-html-webpack-8.3.2.tgz",
+      "integrity": "sha512-y4AfMVdeXbcq9iJVCT4NuSID2+RYmrPFBoLGyp+jnQNt8GrMoOMoW7vbSHt4dyKInck8cfyCC23ITA+mCjxxHg==",
       "dependencies": {
-        "@storybook/core-webpack": "8.3.0",
+        "@storybook/core-webpack": "8.3.2",
         "@types/node": "^22.0.0",
         "html-loader": "^3.1.0",
         "webpack": "5"
@@ -5524,25 +5526,25 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/preview-api": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.3.0.tgz",
-      "integrity": "sha512-pHq/T7oWBfzc9TCIPYyJQUXuiUiFfmdrcYvuZE1kf46i7wXh9Q2/Kd3BUJWSCpBXUMoYfAxg9YysGljMII8LWA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.3.2.tgz",
+      "integrity": "sha512-bZvqahrS5oXkiVmqt9rPhlpo/xYLKT7QUWKKIDBRJDp+1mYbQhgsP5NhjUtUdaC+HSofAFzJmVFmixyquYsoGw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.3.0.tgz",
-      "integrity": "sha512-87X4cvgwFT1ll5SzXgQq6iGbkVCgxLBpBm58akF/hzpeRkwfJDncGi/A5hElOJrBg63IkznmSJE7tf9RkrboqQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.3.2.tgz",
+      "integrity": "sha512-fYL7jh9yFkiKIqRJedqTcrmyoVzS/cMxZD/EFfDRaonMVlLlYJQKocuvR1li1iyeKLvd5lxZsHuQ80c98AkDMA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -5550,7 +5552,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@storybook/storybook-deployer": {
@@ -5754,15 +5756,15 @@
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.0.tgz",
-      "integrity": "sha512-lJCarAzswZvUgBt/o1LMJp+07Io5G2VI1+Fw+bgn+92kRD8otCFwuMZIy0u7cEjHiEGqGnpzThlIki6vFjEXeA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.2.tgz",
+      "integrity": "sha512-JXAVc08Tlbu4GTTMGNmwUy69lShqSpJixAJc4bvWTnNAtPTRltiNJCg/KJ0GauEyRFk8ZR2Ha4KhN3DB1felNQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.0"
+        "storybook": "^8.3.2"
       }
     },
     "node_modules/@testing-library/dom": {
@@ -6133,9 +6135,9 @@
       }
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.12",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+      "version": "15.7.13",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
     },
     "node_modules/@types/qs": {
       "version": "6.9.16",
@@ -6148,9 +6150,9 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "node_modules/@types/react": {
-      "version": "18.3.6",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.6.tgz",
-      "integrity": "sha512-CnGaRYNu2iZlkGXGrOYtdg5mLK8neySj0woZ4e2wF/eli2E6Sazmq5X+Nrj6OBrrFVQfJWTUFeqAzoRhWQXYvg==",
+      "version": "18.3.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.8.tgz",
+      "integrity": "sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -7622,6 +7624,66 @@
         "twig": "^1.13.3"
       }
     },
+    "node_modules/better-opn": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
+      "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
+      "dependencies": {
+        "open": "^8.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/better-opn/node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/better-opn/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/better-opn/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/better-opn/node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/bfj": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-8.0.0.tgz",
@@ -16773,6 +16835,14 @@
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
       "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
     },
+    "node_modules/jsdoc-type-pratt-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz",
+      "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/jsdom": {
       "version": "20.0.3",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
@@ -23878,11 +23948,11 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.78.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
-      "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
+      "version": "1.79.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.1.tgz",
+      "integrity": "sha512-+mA7svoNKeL0DiJqZGeR/ZGUu8he4I8o3jyUcOFyo4eBJrwNgIMmAEwCMo/N2Y3wdjOBcRzoNxZIOtrtMX8EXg==",
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
+        "chokidar": "^4.0.0",
         "immutable": "^4.0.0",
         "source-map-js": ">=0.6.2 <2.0.0"
       },
@@ -23932,6 +24002,32 @@
         }
       }
     },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.0.tgz",
+      "integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.1.tgz",
+      "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==",
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -25272,11 +25368,11 @@
       }
     },
     "node_modules/storybook": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.3.0.tgz",
-      "integrity": "sha512-XKU+nem9OKX/juvJPwka1Q7DTpSbOe0IMp8ZyLQWorhFKpquJdUjryl7Z9GiFZyyTykCqH4ItQ7h8PaOmqVMOw==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.3.2.tgz",
+      "integrity": "sha512-jfDPtoPTtXcQ4O82u6+VE0V8q05hnj9NdmTVJvUxab796FoEbhk07xFLynOopfd9h9i0D/jc5Sf4C+iMe1bhmA==",
       "dependencies": {
-        "@storybook/core": "8.3.0"
+        "@storybook/core": "8.3.2"
       },
       "bin": {
         "getstorybook": "bin/index.cjs",
@@ -25595,9 +25691,9 @@
       }
     },
     "node_modules/style-dictionary": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.1.1.tgz",
-      "integrity": "sha512-NMHRE5TleL4vRux0k3BKR8kafmn+sz3w2zVBEgGfEdw+vhKfGX5TdeiOjhnm69/HrTeYUsY8J+7jnFf8RjoHiw==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.1.2.tgz",
+      "integrity": "sha512-ZQz+Qs38jq0Qb7IOKuj2Rnm81AziQJDV1E2/TnnKpfLajWKr3VAf8xfrFT1gA3+pHmx+M2bfabDTuMUJYJM2Lg==",
       "hasInstallScript": true,
       "dependencies": {
         "@bundled-es-modules/deepmerge": "^4.3.1",
diff --git a/package.json b/package.json
index dad9dbc..99a1f3e 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     ]
   },
   "dependencies": {
-    "@emulsify/core": "^2.2.2",
+    "@emulsify/core": "^2.2.3",
     "@percy/cli": "^1.28.2",
     "@percy/storybook": "^5.0.1"
   },
diff --git a/src/components/tabs/tabs.component.yml b/src/components/tabs/tabs.component.yml
index b421039..368f45a 100644
--- a/src/components/tabs/tabs.component.yml
+++ b/src/components/tabs/tabs.component.yml
@@ -34,4 +34,4 @@ props:
         - tab__label: 'Tab 5'
           tab__content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
         - tab__label: 'Tab 6'
-          tab__content: 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'
\ No newline at end of file
+          tab__content: 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'

From 7da633125fb944d711f87cda5deeefabcb86cd74 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Fri, 27 Sep 2024 11:06:51 -0500
Subject: [PATCH 12/44] feat: refine blockquote and accordion

---
 config/emulsify-core/storybook/main.js        |  7 --
 src/components/accordion/_accordion-item.twig |  2 +-
 src/components/announcement/announcement.twig |  2 +-
 .../blockquote/blockquote.component.yml       |  8 +--
 src/components/blockquote/blockquote.scss     | 24 +++----
 .../blockquote/blockquote.stories.js          | 32 ++++-----
 src/components/blockquote/blockquote.twig     | 38 +++++------
 src/components/card/card.twig                 |  4 +-
 src/components/tabs/tabs.js                   | 68 ++++++++++---------
 .../text-with-image/text-with-image.twig      |  2 +-
 .../heading.component.yml}                    |  0
 .../headings.scss => heading/heading.scss}    |  0
 .../text/{headings => heading}/heading.twig   |  0
 src/components/text/text.stories.js           |  4 +-
 src/layout/container/container.twig           |  3 +-
 15 files changed, 95 insertions(+), 99 deletions(-)
 rename src/components/text/{headings/headings.component.yml => heading/heading.component.yml} (100%)
 rename src/components/text/{headings/headings.scss => heading/heading.scss} (100%)
 rename src/components/text/{headings => heading}/heading.twig (100%)

diff --git a/config/emulsify-core/storybook/main.js b/config/emulsify-core/storybook/main.js
index 77d7781..d72cf5c 100644
--- a/config/emulsify-core/storybook/main.js
+++ b/config/emulsify-core/storybook/main.js
@@ -15,13 +15,6 @@ const configOverrides = {};
 //     '../../../@storybook/addon-themes',
 //     '../../../@storybook/addon-styling-webpack'
 //   ],
-//   core: {
-//     builder: 'webpack5',
-//   },
-//   framework: {
-//     name: '@storybook/html-webpack5',
-//     options: {},
-//   },
 //   docs: {
 //     autodocs: true,
 //   },
diff --git a/src/components/accordion/_accordion-item.twig b/src/components/accordion/_accordion-item.twig
index bc62ba6..7a7bce1 100644
--- a/src/components/accordion/_accordion-item.twig
+++ b/src/components/accordion/_accordion-item.twig
@@ -40,7 +40,7 @@
 {% endset %}
 
 <div {{ add_attributes(accordion__item__attributes) }}>
-	{% include "@components/text/headings/heading.twig" with {
+	{% include "@components/text/heading/heading.twig" with {
     heading__level: accordion__item__heading__level|default('2'),
     heading__blockname: accordion__item__base_class,
     heading: accordion__item__heading__content,
diff --git a/src/components/announcement/announcement.twig b/src/components/announcement/announcement.twig
index a4edb4e..511d9f6 100644
--- a/src/components/announcement/announcement.twig
+++ b/src/components/announcement/announcement.twig
@@ -27,7 +27,7 @@
   {% endif %}
   {# Render the main content #}
   <div {{ bem('content', [announcement__variant], announcement__base_class) }}>
-    {% include "@components/text/headings/heading.twig" with {
+    {% include "@components/text/heading/heading.twig" with {
       heading__level: announcement__heading__level|default('4'),
       heading: announcement__title,
     } %}
diff --git a/src/components/blockquote/blockquote.component.yml b/src/components/blockquote/blockquote.component.yml
index d641f19..97a07f3 100644
--- a/src/components/blockquote/blockquote.component.yml
+++ b/src/components/blockquote/blockquote.component.yml
@@ -6,15 +6,15 @@ status: stable
 props:
   type: object
   required:
-    - block_quote__quote
-    - block_quote__attribution
+    - blockquote__quote
+    - blockquote__attribution
   properties:
-    block_quote__quote:
+    blockquote__quote:
       type: string
       title: Quote
       description: The quote/content of the blockquote item.
       data: <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.</p>
-    block_quote__attribution:
+    blockquote__attribution:
       type: string
       title: Attribution
       description: The attribution of the blockquote item.
diff --git a/src/components/blockquote/blockquote.scss b/src/components/blockquote/blockquote.scss
index ad859a1..68f1cc8 100644
--- a/src/components/blockquote/blockquote.scss
+++ b/src/components/blockquote/blockquote.scss
@@ -1,9 +1,9 @@
-.block-quote {
+.blockquote {
   width: 573px;
-  padding: var(--block-quote-padding-x) 0;
+  padding: var(--blockquote-padding-x) 0;
 }
 
-.block-quote__quote {
+.blockquote__quote {
   border-left: none;
   margin: 0;
 
@@ -18,19 +18,19 @@
   }
 }
 
-.block-quote__blockquote {
-  [data-block-quote-style='bar-left'] & {
-    padding-left: var(--block-quote-padding-x);
+.blockquote__blockquote {
+  [data-blockquote-style='bar-left'] & {
+    padding-left: var(--blockquote-padding-x);
     border-left: var(--size-md) solid var(--color-text-body);
   }
 
-  [data-block-quote-style='bar-right'] & {
-    padding-right: var(--block-quote-padding-x);
+  [data-blockquote-style='bar-right'] & {
+    padding-right: var(--blockquote-padding-x);
     border-right: var(--size-md) solid var(--color-text-body);
     text-align: right;
   }
 
-  [data-block-quote-style='quote-left'] & {
+  [data-blockquote-style='quote-left'] & {
     position: relative;
 
     &::before {
@@ -41,13 +41,13 @@
       color: var(--color-text-body);
     }
 
-    .block-quote__quote p {
-      margin: var(--block-quote-padding-y) var(--paragraph-spacing-0);
+    .blockquote__quote p {
+      margin: var(--blockquote-padding-y) var(--paragraph-spacing-0);
     }
   }
 }
 
-.block-quote__attribution {
+.blockquote__attribution {
   font-size: var(--font-size-caption);
   color: var(--color-text-body);
 }
diff --git a/src/components/blockquote/blockquote.stories.js b/src/components/blockquote/blockquote.stories.js
index 6b4434c..cc6e067 100644
--- a/src/components/blockquote/blockquote.stories.js
+++ b/src/components/blockquote/blockquote.stories.js
@@ -13,12 +13,12 @@ export default {
     quote: {
       name: 'Quote',
       type: 'string',
-      defaultValue: blockquoteData.block_quote__quote.data,
+      defaultValue: blockquoteData.blockquote__quote.data,
     },
     attribution: {
       name: 'Attribution',
       type: 'string',
-      defaultValue: blockquoteData.block_quote__attribution.data,
+      defaultValue: blockquoteData.blockquote__attribution.data,
     },
     style: {
       name: 'Style',
@@ -36,25 +36,25 @@ export default {
 
 export const blockquote = ({ style, quote, attribution, ariaLabel }) => `
   ${blockquoteTwig({
-    block_quote__quote: blockquoteData.block_quote__quote.data,
-    block_quote__attribution: blockquoteData.block_quote__attribution.data,
-    block_quote__aria_label: 'Block Quote with bar graphic to the left',
+    blockquote__quote: blockquoteData.blockquote__quote.data,
+    blockquote__attribution: blockquoteData.blockquote__attribution.data,
+    blockquote__aria_label: 'Block Quote with bar graphic to the left',
   })}
   ${blockquoteTwig({
-    block_quote__quote: blockquoteData.block_quote__quote.data,
-    block_quote__style: 'bar-right',
-    block_quote__aria_label: 'Block Quote with bar graphic to the right',
+    blockquote__quote: blockquoteData.blockquote__quote.data,
+    blockquote__style: 'bar-right',
+    blockquote__aria_label: 'Block Quote with bar graphic to the right',
   })}
   ${blockquoteTwig({
-    block_quote__quote: blockquoteData.block_quote__quote.data,
-    block_quote__attribution: blockquoteData.block_quote__attribution.data,
-    block_quote__style: 'quote-left',
-    block_quote__aria_label: 'Block Quote with quote icon to the left',
+    blockquote__quote: blockquoteData.blockquote__quote.data,
+    blockquote__attribution: blockquoteData.blockquote__attribution.data,
+    blockquote__style: 'quote-left',
+    blockquote__aria_label: 'Block Quote with quote icon to the left',
   })}
   ${blockquoteTwig({
-    block_quote__quote: quote,
-    block_quote__attribution: attribution,
-    block_quote__style: style,
-    block_quote__aria_label: ariaLabel,
+    blockquote__quote: quote,
+    blockquote__attribution: attribution,
+    blockquote__style: style,
+    blockquote__aria_label: ariaLabel,
   })}
 `;
diff --git a/src/components/blockquote/blockquote.twig b/src/components/blockquote/blockquote.twig
index 2e1cbc2..9e72964 100644
--- a/src/components/blockquote/blockquote.twig
+++ b/src/components/blockquote/blockquote.twig
@@ -3,34 +3,34 @@
  # - pull_quote__style: bar-left, bar-right, or quote-left
  #
  # Available Variables:
- # - block_quote__quote (required)
- # - block_quote__attribution
- # - block_quote__aria_label
+ # - blockquote__quote (required)
+ # - blockquote__attribution
+ # - blockquote__aria_label
  #}
 
-{% set block_quote__base_class = 'block-quote' %}
-{% set block_quote__style = block_quote__style|default('bar-left') %}
-{% set block_quote__aria_label = block_quote__aria_label|default('Blockquote Element by Lorem Ipsum') %}
-{# If block_quote__attributes is not defined, set it to an empty object by default #}
-{% set block_quote__attributes = block_quote__attributes|default({}) %}
+{% set blockquote__base_class = 'blockquote' %}
+{% set blockquote__style = blockquote__style|default('bar-left') %}
+{% set blockquote__aria_label = blockquote__aria_label|default('Blockquote Element by Lorem Ipsum') %}
+{# If blockquote__attributes is not defined, set it to an empty object by default #}
+{% set blockquote__attributes = blockquote__attributes|default({}) %}
 
-{% set block_quote__attributes = block_quote__attributes|merge({
+{% set blockquote__attributes = blockquote__attributes|merge({
   'data-component-width': 'content',
-  'data-block-quote-style': block_quote__style,
-  'aria-label': block_quote__aria_label,
-  class: bem(block_quote__base_class, block_quote__modifiers, block_quote__blockname),
+  'data-blockquote-style': blockquote__style,
+  'aria-label': blockquote__aria_label,
+  class: bem(blockquote__base_class, blockquote__modifiers, blockquote__blockname),
 }) %}
 
-<aside {{ add_attributes(block_quote__attributes) }}>
-  <div {{ bem('inner', [], block_quote__base_class) }}>
-    <blockquote {{ bem('blockquote', [], block_quote__base_class) }}>
+<aside {{ add_attributes(blockquote__attributes) }}>
+  <div {{ bem('inner', [], blockquote__base_class) }}>
+    <blockquote {{ bem('blockquote', [], blockquote__base_class) }}>
       {% include "@components/text/text/02-blockquote.twig" with {
-        blockquote__content: block_quote__quote,
-        blockquote__blockname: block_quote__base_class,
+        blockquote__content: blockquote__quote,
+        blockquote__blockname: blockquote__base_class,
         blockquote__base_class: 'quote',
       } %}
-      {% if block_quote__attribution %}
-        <cite {{ bem('attribution', [], block_quote__base_class) }}>—{{ block_quote__attribution }}</cite>
+      {% if blockquote__attribution %}
+        <cite {{ bem('attribution', [], blockquote__base_class) }}>—{{ blockquote__attribution }}</cite>
       {% endif %}
     </blockquote>
   </div>
diff --git a/src/components/card/card.twig b/src/components/card/card.twig
index 5d403ab..fff543e 100644
--- a/src/components/card/card.twig
+++ b/src/components/card/card.twig
@@ -62,7 +62,7 @@
 
 		{# Subheading #}
 		{% if card__subheading %}
-			{% include "@components/text/headings/heading.twig" with {
+			{% include "@components/text/heading/heading.twig" with {
         heading__base_class: card__subheading__base_class|default('subheading'),
         heading__modifiers: card__subheading__modifiers,
         heading__blockname: card__base_class,
@@ -75,7 +75,7 @@
 		{# Heading #}
 		{% if card__heading %}
 			{{ title_prefix }}
-			{% include "@components/text/headings/heading.twig" with {
+			{% include "@components/text/heading/heading.twig" with {
         heading__base_class: card__heading__base_class|default('heading'),
         heading__modifiers: card__heading__modifiers,
         heading__blockname: card__base_class,
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 7ed892d..71fe98d 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -152,42 +152,44 @@ Drupal.behaviors.tabsNavScroll = {
        * overflow situation is in play.
        */
       function setOverflow() {
-        const tabsLeft = tabsWrapper.getBoundingClientRect().left;
-        const tabsRight = tabsWrapper.getBoundingClientRect().right;
-        const firsttabsLeft = tabs
-          .querySelector('.tabs__tab:first-child')
-          .getBoundingClientRect().left;
-        const lasttabsRight = Math.floor(
-          tabs.querySelector('.tabs__tab:last-child').getBoundingClientRect()
-            .right,
-        );
+        if (tabsWrapper) {
+          const tabsLeft = tabsWrapper.getBoundingClientRect().left;
+          const tabsRight = tabsWrapper.getBoundingClientRect().right;
+          const firsttabsLeft = tabs
+            .querySelector('.tabs__tab:first-child')
+            .getBoundingClientRect().left;
+          const lasttabsRight = Math.floor(
+            tabs.querySelector('.tabs__tab:last-child').getBoundingClientRect()
+              .right,
+          );
 
-        if (firsttabsLeft < tabsLeft) {
-          // If left side of first tabsy_item is < left side of tabsy_nav.
-          // And right side of last tabsy_item is > right side of tabsy_nav.
-          if (lasttabsRight > tabsRight) {
-            if (scrollIndicatorDir !== 'both') {
-              scrollIndicatorDir = 'both';
-              tabsWrapper.setAttribute('data-scroll-indicator', 'both');
-            }
+          if (firsttabsLeft < tabsLeft) {
             // If left side of first tabsy_item is < left side of tabsy_nav.
-            // But right side of last tabsy_item is <= right side of tabsy_nav.
-          } else if (scrollIndicatorDir !== 'left') {
-            scrollIndicatorDir = 'left';
-            tabsWrapper.setAttribute('data-scroll-indicator', 'left');
-          }
-          // If left side of first tabsy_item is >= left side of tabsy_nav.
-          // And right side of last tabsy_item is > right side of tabsy_nav.
-        } else if (lasttabsRight > tabsRight) {
-          if (scrollIndicatorDir !== 'right') {
-            scrollIndicatorDir = 'right';
-            tabsWrapper.setAttribute('data-scroll-indicator', 'right');
+            // And right side of last tabsy_item is > right side of tabsy_nav.
+            if (lasttabsRight > tabsRight) {
+              if (scrollIndicatorDir !== 'both') {
+                scrollIndicatorDir = 'both';
+                tabsWrapper.setAttribute('data-scroll-indicator', 'both');
+              }
+              // If left side of first tabsy_item is < left side of tabsy_nav.
+              // But right side of last tabsy_item is <= right side of tabsy_nav.
+            } else if (scrollIndicatorDir !== 'left') {
+              scrollIndicatorDir = 'left';
+              tabsWrapper.setAttribute('data-scroll-indicator', 'left');
+            }
+            // If left side of first tabsy_item is >= left side of tabsy_nav.
+            // And right side of last tabsy_item is > right side of tabsy_nav.
+          } else if (lasttabsRight > tabsRight) {
+            if (scrollIndicatorDir !== 'right') {
+              scrollIndicatorDir = 'right';
+              tabsWrapper.setAttribute('data-scroll-indicator', 'right');
+            }
+            // If left side of first tabsy_item is >= left side of tabsy_nav.
+            // And right side of last tabsy_item is <= right side of tabsy_nav.
+          } else {
+            scrollIndicatorDir = 'none';
+            tabsWrapper.setAttribute('data-scroll-indicator', 'none');
           }
-          // If left side of first tabsy_item is >= left side of tabsy_nav.
-          // And right side of last tabsy_item is <= right side of tabsy_nav.
-        } else {
-          scrollIndicatorDir = 'none';
-          tabsWrapper.setAttribute('data-scroll-indicator', 'none');
         }
       }
 
diff --git a/src/components/text-with-image/text-with-image.twig b/src/components/text-with-image/text-with-image.twig
index d22c742..3386918 100644
--- a/src/components/text-with-image/text-with-image.twig
+++ b/src/components/text-with-image/text-with-image.twig
@@ -33,7 +33,7 @@
     <div {{ bem('content', [], text_with_image__base_class) }}>
       {# Heading #}
       {% if text_with_image__heading %}
-        {% include "@components/text/headings/heading.twig" with {
+        {% include "@components/text/heading/heading.twig" with {
           heading: text_with_image__heading,
           heading__level: '2',
           heading__blockname: text_with_image__base_class,
diff --git a/src/components/text/headings/headings.component.yml b/src/components/text/heading/heading.component.yml
similarity index 100%
rename from src/components/text/headings/headings.component.yml
rename to src/components/text/heading/heading.component.yml
diff --git a/src/components/text/headings/headings.scss b/src/components/text/heading/heading.scss
similarity index 100%
rename from src/components/text/headings/headings.scss
rename to src/components/text/heading/heading.scss
diff --git a/src/components/text/headings/heading.twig b/src/components/text/heading/heading.twig
similarity index 100%
rename from src/components/text/headings/heading.twig
rename to src/components/text/heading/heading.twig
diff --git a/src/components/text/text.stories.js b/src/components/text/text.stories.js
index 5cca8ec..9610fcd 100644
--- a/src/components/text/text.stories.js
+++ b/src/components/text/text.stories.js
@@ -1,7 +1,7 @@
 import { mapDataToTwig } from '../../util/dataTransformers';
 
 /* Twigs */
-import heading from './headings/heading.twig';
+import heading from './heading/heading.twig';
 import blockquoteTemplate from './text/02-blockquote.twig';
 import preTemplate from './text/05-pre.twig';
 import paragraphTemplate from './text/03-inline-elements.twig';
@@ -9,7 +9,7 @@ import codeTemplate from './text/07-code.twig';
 
 /* Data */
 import { props as blockquoteProps } from './text/blockquote.component.yml';
-import { props as headingProps } from './headings/headings.component.yml';
+import { props as headingProps } from './heading/heading.component.yml';
 import { props as codeProps } from './text/code.component.yml';
 
 /**
diff --git a/src/layout/container/container.twig b/src/layout/container/container.twig
index 9e8fd9d..81ed6cc 100644
--- a/src/layout/container/container.twig
+++ b/src/layout/container/container.twig
@@ -36,7 +36,7 @@
     {% if container__heading or container__text %}
       <div {{ bem('intro', container__inner_modifiers, container__base_class) }}>
         {% if container__heading %}
-          {% include "@components/text/headings/heading.twig" with {
+          {% include "@components/text/heading/heading.twig" with {
             heading__level: container__heading_level|default('2'),
             heading: container__heading,
             heading__blockname: container__base_class,
@@ -54,6 +54,7 @@
 
     {% block container__content %}
       {% include "@layout/placeholder/placeholder.twig" with { place_holder: "Placeholder Content" } %}
+      {% include "emulsify-ui-kit:placeholder" with { place_holder: "Placeholder Content" } %}
     {% endblock %}
   </div>
   {% block container__suffix %}{% endblock %}

From cbd313fa70db20322325fc71c275a2451ca6cf02 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 27 Sep 2024 11:34:20 -0600
Subject: [PATCH 13/44] fix(feat-stories-cleanup): in accordion and blockquote

---
 src/components/accordion/accordion.scss    | 42 ++++++++++++++++----
 src/components/blockquote/blockquote.scss  |  8 ++--
 src/components/text/text/text.scss         |  2 +-
 src/tokens/tokens.scss                     |  2 -
 tokens/undefined/border-radius-tokens.twig | 16 ++++++++
 tokens/undefined/borders.twig              | 16 ++++++++
 tokens/undefined/breakpoints.twig          | 16 ++++++++
 tokens/undefined/color.twig                | 45 ++++++++++++++++++++++
 tokens/undefined/line-height.twig          | 18 +++++++++
 tokens/undefined/motion.twig               | 11 ++++++
 tokens/undefined/opacity.twig              | 16 ++++++++
 tokens/undefined/sizes.twig                | 16 ++++++++
 tokens/undefined/spacing.twig              | 21 ++++++++++
 tokens/undefined/type-faces.twig           | 15 ++++++++
 tokens/undefined/type-scale.twig           | 18 +++++++++
 util/undefined/controlData.yml             |  5 +++
 16 files changed, 253 insertions(+), 14 deletions(-)
 create mode 100644 tokens/undefined/border-radius-tokens.twig
 create mode 100644 tokens/undefined/borders.twig
 create mode 100644 tokens/undefined/breakpoints.twig
 create mode 100644 tokens/undefined/color.twig
 create mode 100644 tokens/undefined/line-height.twig
 create mode 100644 tokens/undefined/motion.twig
 create mode 100644 tokens/undefined/opacity.twig
 create mode 100644 tokens/undefined/sizes.twig
 create mode 100644 tokens/undefined/spacing.twig
 create mode 100644 tokens/undefined/type-faces.twig
 create mode 100644 tokens/undefined/type-scale.twig
 create mode 100644 util/undefined/controlData.yml

diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index 3ddb0fb..fadda50 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -13,7 +13,7 @@
       content: '';
       display: block;
       position: absolute;
-      background: var(--tabs-color-text-default);
+      background: var(--accordion-color-header);
       border-radius: var(--spacing-md);
       inset: 0 0 0 auto;
       margin: auto;
@@ -35,7 +35,7 @@
   &:hover {
     &::before,
     &::after {
-      background-color: var(--color-primary-default);
+      background-color: var(--accordion-color-header-hover);
     }
   }
 
@@ -84,10 +84,16 @@
     padding: 0 var(--spacing-xl) 0 0;
     position: relative;
     cursor: pointer;
+    text-transform: none;
   }
 
   &:hover {
-    color: var(--color-primary-default);
+    color: var(--accordion-color-header-hover);
+
+    &::before,
+    &::after {
+      background: var(--accordion-color-header-hover);
+    }
   }
 }
 
@@ -101,11 +107,13 @@
     cursor: pointer;
     padding: 0 var(--spacing-xl) 0 0;
     line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-primary-regular);
+    text-transform: none;
   }
 
-  &:hover,
-  &:focus {
-    color: var(--color-primary-default);
+  &::before,
+  &::after {
+    background: var(--accordion-color-header-hover);
   }
 
   &::before {
@@ -121,6 +129,16 @@
     right: var(--spacing-sm);
   }
 
+  &:hover,
+  &:focus {
+    text-decoration: none;
+
+    &::before,
+    &::after {
+      background: var(--accordion-color-header);
+    }
+  }
+
   &--collapse {
     &::before {
       display: none;
@@ -128,6 +146,15 @@
   }
 }
 
+.button[data-button-style='clean'].accordion__toggle-all {
+  color: var(--accordion-color-header-hover);
+
+  &:hover,
+  &:focus {
+    color: var(--accordion-color-header);
+  }
+}
+
 .accordion__icon {
   height: var(--spacing-lg);
   width: var(--spacing-lg);
@@ -150,9 +177,10 @@
 
   display: flex;
   margin: 0;
+  font-weight: var(--font-weight-primary-regular);
 
   &:hover {
-    color: clr(primary);
+    color: var(--accordion-color-header-hover);
   }
 }
 
diff --git a/src/components/blockquote/blockquote.scss b/src/components/blockquote/blockquote.scss
index 68f1cc8..9aaffe6 100644
--- a/src/components/blockquote/blockquote.scss
+++ b/src/components/blockquote/blockquote.scss
@@ -1,6 +1,6 @@
 .blockquote {
   width: 573px;
-  padding: var(--blockquote-padding-x) 0;
+  padding: var(--block-quote-padding-x) 0;
 }
 
 .blockquote__quote {
@@ -20,12 +20,12 @@
 
 .blockquote__blockquote {
   [data-blockquote-style='bar-left'] & {
-    padding-left: var(--blockquote-padding-x);
+    padding-left: var(--block-quote-padding-x);
     border-left: var(--size-md) solid var(--color-text-body);
   }
 
   [data-blockquote-style='bar-right'] & {
-    padding-right: var(--blockquote-padding-x);
+    padding-right: var(--block-quote-padding-x);
     border-right: var(--size-md) solid var(--color-text-body);
     text-align: right;
   }
@@ -42,7 +42,7 @@
     }
 
     .blockquote__quote p {
-      margin: var(--blockquote-padding-y) var(--paragraph-spacing-0);
+      margin: var(--block-quote-padding-y) var(--paragraph-spacing-0);
     }
   }
 }
diff --git a/src/components/text/text/text.scss b/src/components/text/text/text.scss
index be16c9d..903961f 100644
--- a/src/components/text/text/text.scss
+++ b/src/components/text/text/text.scss
@@ -16,7 +16,7 @@
 %blockquote,
 .blockquote {
   border-left: 4px solid var(--colors-text-body);
-  font-family: var(--font-families-secondary);
+  font-family: var(--font-family-secondary);
   font-size: var(--font-size-h5);
   padding: var(--spacing-lg) var(--spacing-xl);
 }
diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index 58e256a..af6ed35 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -78,9 +78,7 @@
   --main-menu-color-dropdown-label: #0080b7;
   --main-menu-color-dropdown-label-hover: #006089;
   --link-color-default: #005f89;
-  --link-color-inverse: #fff;
   --link-color-hover: #00202e;
-  --link-color-inverse-hover: #9ce1ff;
   --link-body: [object Object];
   --input-gap: 0.5rem;
   --input-padding-x: 1rem;
diff --git a/tokens/undefined/border-radius-tokens.twig b/tokens/undefined/border-radius-tokens.twig
new file mode 100644
index 0000000..04e4697
--- /dev/null
+++ b/tokens/undefined/border-radius-tokens.twig
@@ -0,0 +1,16 @@
+<div>
+  <h2 class="sb-title">Border Radius Tokens</h2>
+
+  <ul class="sb-list">
+    {% for radius, value in _context.radius %}
+      <li class="sb-list__item">
+        <span class="sb-list__label">{{radius}}</span>
+        <span class="sb-list__value">{{value.value}}px</span>
+        <span class="sb-list__custom-property">
+          <code class="sb-custom-property-name">var(--radius-{{radius}})</code>
+        </span>
+        <span class="sb-list__visualization" style="border-radius: {{value.value}}px; width: 75px; height: 75px; background: var(--colors-sb-visualization);"></span>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/tokens/undefined/borders.twig b/tokens/undefined/borders.twig
new file mode 100644
index 0000000..c13bbdd
--- /dev/null
+++ b/tokens/undefined/borders.twig
@@ -0,0 +1,16 @@
+<div>
+  <h2 class="sb-title">Border Tokens</h2>
+
+  <ul class="sb-list">
+    {% for border, value in _context.border %}
+      <li class="sb-list__item">
+        <span class="sb-list__label">{{border}}</span>
+        <span class="sb-list__value">{{value.value}}px</span>
+        <span class="sb-list__custom-property">
+          <code class=" sb-custom-property-name">var(--border-{{border}})</code>
+        </span>
+        <span class="sb-list__visualization" style="height: {{value.value}}px; background-color: var(--colors-sb-visualization); width: 300px;"></span>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/tokens/undefined/breakpoints.twig b/tokens/undefined/breakpoints.twig
new file mode 100644
index 0000000..69b1cfe
--- /dev/null
+++ b/tokens/undefined/breakpoints.twig
@@ -0,0 +1,16 @@
+<div>
+  <h2 class="sb-title">Breakpoint Tokens</h2>
+
+  <ul class="sb-list" style="overflow: scroll;">
+    {% for breakpoint, value in _context.breakpoint %}
+      <li class="sb-list__item" style="min-width: max-content;">
+        <span class="sb-list__label">{{breakpoint}}</span>
+        <span class="sb-list__value">{{value.value}}px</span>
+        <span class="sb-list__custom-property">
+          <code class=" sb-custom-property-name">var(--breakpoint-{{breakpoint}})</code>
+        </span>
+        <span class="sb-list__visualization" style="width: {{value.value}}px; height: 25px; background: var(--colors-sb-visualization); display: block; border-radius: var(--radius-sm);"></span>
+      </li>
+    </li>
+  </li>
+{% endfor %}</ul></div>
diff --git a/tokens/undefined/color.twig b/tokens/undefined/color.twig
new file mode 100644
index 0000000..59bd4eb
--- /dev/null
+++ b/tokens/undefined/color.twig
@@ -0,0 +1,45 @@
+<div>
+  <h2 class="sb-title">Colors</h2>
+
+  {% for color, value in _context.colors %}
+    <h2 class="sb-subtitle">{{ color }}</h2>
+    {% if value.value is defined %}
+      <ul class="sb-list">
+        <li class="sb-list__item" class="token-card">
+          <span class="sb-list__label">{{ color }}</span>
+          <span class="sb-list__value">{{value.value}}</span>
+          <span class="sb-list__custom-property">
+            <code class="sb-custom-property-name">var(--color-{{color}})</code>
+          </span>
+          <span class="sb-list__visualization" style="background-color: var(--color-{{color}});"></span>
+        </li>
+      </ul>
+    {% else %}
+      <ul class="sb-list">
+        {% for nestedColor, nestedValue in value %}
+          {% if nestedValue.value is defined %}
+            <li class="sb-list__item" class="token-card">
+              <span class="sb-list__label">{{ nestedColor }}</span>
+              <span class="sb-list__value">{{nestedValue.value}}</span>
+              <span class="sb-list__custom-property">
+                <code class="sb-custom-property-name">var(--color-{{ color|lower }}-{{nestedColor}})</code>
+              </span>
+              <span class="sb-list__visualization" style="background-color: var(--color-{{ color|lower }}-{{nestedColor}});"></span>
+            </li>
+          {% else %}
+            {% for colorFamily, colorFamilyValue in nestedValue %}
+              <li class="sb-list__item" class="token-card">
+                <span class="sb-list__label">{{ nestedColor }} {{ colorFamily }}</span>
+                <span class="sb-list__value">{{ colorFamilyValue.value }}</span>
+                <span class="sb-list__custom-property">
+                  <code class="sb-custom-property-name">var(--color-{{ color|lower }}-{{ nestedColor }}-{{colorFamily}})</code>
+                </span>
+                <span class="sb-list__visualization" style="background-color: var(--color-{{ color|lower }}-{{ nestedColor }}-{{colorFamily}});"></span>
+              </li>
+            {% endfor %}
+          {% endif %}
+        {% endfor %}
+      </ul>
+    {% endif %}
+  {% endfor %}
+</div>
diff --git a/tokens/undefined/line-height.twig b/tokens/undefined/line-height.twig
new file mode 100644
index 0000000..cdd8161
--- /dev/null
+++ b/tokens/undefined/line-height.twig
@@ -0,0 +1,18 @@
+{% set text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." %}
+
+<div>
+  <h2 class="sb-title">Line Heights</h2>
+
+  <ul class="sb-list" style="overflow: scroll;">
+    {% for lineHeight, value in _context.lineHeight|reverse %}
+      <li class="sb-list__item" style="min-width: max-content;">
+        <span class="sb-list__label" style="width: 100px;">{{lineHeight}}</span>
+        <span class="sb-list__value">{{value.value}}</span>
+        <span class="sb-list__custom-property" style="width: 272px;">
+          <code class="sb-custom-property-name">var(--line-heights-{{lineHeight}})</code>
+        </span>
+        <span class="sb-list__visualization" style="max-width: 600px; line-height:var(--line-height-{{lineHeight}})">{{text}}</span>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/tokens/undefined/motion.twig b/tokens/undefined/motion.twig
new file mode 100644
index 0000000..594c491
--- /dev/null
+++ b/tokens/undefined/motion.twig
@@ -0,0 +1,11 @@
+<div class="motion">
+  <h2>Motion</h2>
+  <div class="motion__grid">
+    {% for motion in motions %}
+      <div class="motion__grid-item">
+        <h3>{{ motion.name }}</h3>
+        <div class="demo-motion demo-motion--{{ motion.name|lower|replace({' ':'-'}) }}"></div>
+      </div>
+    {% endfor %}
+  </div>
+</div>
diff --git a/tokens/undefined/opacity.twig b/tokens/undefined/opacity.twig
new file mode 100644
index 0000000..6c135b7
--- /dev/null
+++ b/tokens/undefined/opacity.twig
@@ -0,0 +1,16 @@
+<div>
+  <h2 class="sb-title">Opacity Tokens</h2>
+
+  <ul class="sb-list">
+    {% for opacity, value in _context.opacity %}
+      <li class="sb-list__item">
+        <span class="sb-list__label">{{opacity}}</span>
+        <span class="sb-list__value">{{value.value}}</span>
+        <span class="sb-list__custom-property">
+          <code class=" sb-custom-property-name">var(--radius-{{opacity}})</code>
+        </span>
+        <span class="sb-list__visualization" style="opacity: {{value.value}}; display: block; width: 50px; height: 50px; background-color: var(--colors-sb-visualization); border-radius: var(--radius-sm);"></span>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/tokens/undefined/sizes.twig b/tokens/undefined/sizes.twig
new file mode 100644
index 0000000..a727eee
--- /dev/null
+++ b/tokens/undefined/sizes.twig
@@ -0,0 +1,16 @@
+<div>
+  <h2 class="sb-title">Size Tokens</h2>
+
+  <ul class="sb-list">
+    {% for size, value in _context.size %}
+      <li class="sb-list__item">
+        <span class="sb-list__label">{{size}}</span>
+        <span class="sb-list__value">{{value.value}}px</span>
+        <span class="sb-list__custom-property">
+          <code class=" sb-custom-property-name">var(--size-{{size}})</code>
+        </span>
+        <span class="sb-list__visualization" style="width: {{value.value}}px; height: {{value.value}}px; background-color: var(--colors-sb-visualization);"></span>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/tokens/undefined/spacing.twig b/tokens/undefined/spacing.twig
new file mode 100644
index 0000000..1f84cb1
--- /dev/null
+++ b/tokens/undefined/spacing.twig
@@ -0,0 +1,21 @@
+<div>
+  <h2 class="sb-title">Spacing Tokens</h2>
+
+  <ul class="sb-list">
+    {% for spacing, value in _context.spacing %}
+      <li class="sb-list__item">
+        <span class="sb-list__label">{{spacing}}</span>
+        <span class="sb-list__value">{{value.value}}px</span>
+        <span class="sb-list__custom-property">
+          <code class=" sb-custom-property-name">var(--spacing-{{spacing}})</code>
+        </span>
+
+        <ul class="sb-spacing-wrapper" style="gap: {{value.value}}px; padding-left: 0;">
+          {% for i in [1,1,1,1,1,1,1] %}
+            <li class="sb-list__visualization" style="width: 50px; height: 50px; background-color: var(--colors-sb-visualization);"></li>
+          {% endfor %}
+        </ul>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/tokens/undefined/type-faces.twig b/tokens/undefined/type-faces.twig
new file mode 100644
index 0000000..5208c4f
--- /dev/null
+++ b/tokens/undefined/type-faces.twig
@@ -0,0 +1,15 @@
+<div>
+  <h2 class="sb-title">Type Faces</h2>
+
+  <ul class="sb-list">
+    {% for fontFamily, value in _context.fontFamily %}
+      <li class="sb-list__item">
+        <span class="sb-list__value">{{value.value}}</span>
+        <span class="sb-list__custom-property">
+          <code class="sb-custom-property-name">var(--font-family-{{fontFamily}})</code>
+        </span>
+        <h2 class="sb-list__label" style="font-family: {{value.value}};">{{fontFamily}}</h2>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/tokens/undefined/type-scale.twig b/tokens/undefined/type-scale.twig
new file mode 100644
index 0000000..4174fdc
--- /dev/null
+++ b/tokens/undefined/type-scale.twig
@@ -0,0 +1,18 @@
+<div>
+	<h2 class="sb-title">Type Scale</h2>
+
+	<ul class="sb-list">
+		{% for fontSize, value in _context.fontSize|reverse %}
+			<li class="sb-list__item">
+				<span class="sb-list__label">{{fontSize}}</span>
+				<span class="sb-list__value">{{value.value}}px</span>
+				<span class="sb-list__custom-property">
+					<code class=" sb-custom-property-name">var(--font-size-{{fontSize}})</code>
+				</span>
+
+				<p style="font-size: var(--font-size-{{fontSize}}); margin: 0;">{{fontSize|capitalize}}
+				</p>
+			</li>
+		{% endfor %}
+	</ul>
+</div>
diff --git a/util/undefined/controlData.yml b/util/undefined/controlData.yml
new file mode 100644
index 0000000..3d7e17c
--- /dev/null
+++ b/util/undefined/controlData.yml
@@ -0,0 +1,5 @@
+color_variant:
+  - 'base'
+  - 'dark'
+  - 'light'
+  - 'bright'

From a7925a7a9d56a5cec96f91ef98624abcd57f204c Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 27 Sep 2024 12:39:49 -0600
Subject: [PATCH 14/44] fix(feat-stories-cleanup): in cards and announcement

---
 src/components/announcement/announcement.scss | 22 +++++++++----------
 src/components/card/card.scss                 |  2 --
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/announcement/announcement.scss b/src/components/announcement/announcement.scss
index ca4e8b8..4dd0201 100644
--- a/src/components/announcement/announcement.scss
+++ b/src/components/announcement/announcement.scss
@@ -42,11 +42,11 @@
 
 /* Variants -- Default style for announcements */
 .announcement--default {
-  background-color: var(--color-primary-lighter);
+  background-color: var(--announcement-background-default);
 }
 
 .announcement__content--default .heading {
-  color: var(--color-primary-darker);
+  color: var(--announcement-heading-default);
 }
 
 .announcement__content--default p {
@@ -55,11 +55,11 @@
 
 /* Variants -- Light style for announcements */
 .announcement--light {
-  background-color: var(--color-white);
+  background-color: var(--announcement-background-light);
 }
 
 .announcement__content--light .heading {
-  color: var(--color-primary-darker);
+  color: var(--announcement-heading-dark);
 }
 
 .announcement__content--light p {
@@ -68,17 +68,17 @@
 
 /* Variants -- Dark style for announcements */
 .announcement--dark {
-  background-color: var(--color-primary-darker);
+  background-color: var(--announcement-background-dark);
 }
 
 .announcement__content--dark p,
 .announcement__content--dark .heading {
-  color: var(--color-primary-lighter);
+  color: var(--announcement-heading-light);
 }
 
-.announcement__action--dark button,
-.announcement__action--dark button:hover,
-.announcement__action--dark button:focus {
-  color: var(--color-primary-darker);
-  background-color: var(--color-primary-lighter);
+.announcement__action--dark button[data-button-style='primary'],
+.announcement__action--dark button[data-button-style='primary']:hover,
+.announcement__action--dark button[data-button-style='primary']:focus {
+  color: var(--announcement-heading-dark);
+  background-color: var(--announcement-background-light);
 }
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index 4fa58d4..a9e6a2b 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -33,8 +33,6 @@
 }
 
 .card__subheading {
-  @include h4;
-
   & {
     color: var(--card-color-subheading);
     margin: 0 0 var(--spacing-md);

From 9be5b60f8e578374cd9ae407f054f59b6a387fd4 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 27 Sep 2024 12:49:19 -0600
Subject: [PATCH 15/44] fix(feat-stories-cleanup): accordion

---
 src/components/accordion/accordion.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index fadda50..56dd3ff 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -46,6 +46,10 @@
   }
 }
 
+.container__heading {
+  color: var(--accordion-color-header);
+}
+
 .accordion {
   box-shadow: none;
   border: 0;

From 475a246f30e3691a6a87be8c858d1c218c486f15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?=
 <48533432+mariannuar@users.noreply.github.com>
Date: Tue, 1 Oct 2024 17:45:52 -0600
Subject: [PATCH 16/44] Create branch

---
 src/tokens/figma.tokens.json | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
index 0af6df5..6749fed 100644
--- a/src/tokens/figma.tokens.json
+++ b/src/tokens/figma.tokens.json
@@ -2778,8 +2778,7 @@
         "components/announcement": "enabled",
         "components/banner": "enabled",
         "components/footer": "enabled",
-        "components/header": "enabled",
-        "components/utilityMenu": "disabled"
+        "components/header": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:16908",
       "$figmaModeId": "23237:10",
@@ -2967,8 +2966,7 @@
       "name": "Emulsify Global",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "global": "enabled",
-        "components/utilityMenu": "disabled"
+        "global": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17089",
       "$figmaModeId": "23237:11",
@@ -3020,8 +3018,7 @@
       "name": "Emulsify Semantic",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "semantic": "enabled",
-        "components/utilityMenu": "disabled"
+        "semantic": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17133",
       "$figmaModeId": "23237:12",
@@ -3043,8 +3040,7 @@
       "name": "Emulsify Storybook only",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "storybook": "source",
-        "components/utilityMenu": "disabled"
+        "storybook": "source"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17144",
       "$figmaModeId": "23237:13",
@@ -3072,8 +3068,7 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled",
-        "components/utilityMenu": "disabled"
+        "components/textField": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17145",
       "$figmaModeId": "23237:14",
@@ -3226,8 +3221,7 @@
         "components/table": "enabled",
         "components/tabs": "enabled",
         "components/textField": "enabled",
-        "semantic": "enabled",
-        "components/utilityMenu": "disabled"
+        "semantic": "enabled"
       },
       "group": "WUP"
     },
@@ -3254,8 +3248,7 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled",
-        "components/utilityMenu": "disabled"
+        "components/textField": "enabled"
       },
       "group": "WUP"
     }

From 556830c137ec64c0dab5a865eba7d442a9d8ec70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?=
 <48533432+mariannuar@users.noreply.github.com>
Date: Tue, 1 Oct 2024 17:47:01 -0600
Subject: [PATCH 17/44] new tokens for link inverse

---
 src/tokens/figma.tokens.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
index 6749fed..c2661fa 100644
--- a/src/tokens/figma.tokens.json
+++ b/src/tokens/figma.tokens.json
@@ -2115,6 +2115,14 @@
         "hover": {
           "value": "{color.link-hover}",
           "type": "color"
+        },
+        "inverse": {
+          "value": "{color.text.white}",
+          "type": "color"
+        },
+        "inverse-hover": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
         }
       },
       "body": {

From 1e50f5ac0d9ac240581f5dfc6efe85f56f13fce5 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Tue, 1 Oct 2024 17:52:54 -0600
Subject: [PATCH 18/44] feat(link-inverse-token): transform tokens

---
 src/tokens/tokens.scss             |  2 ++
 src/tokens/transformed.tokens.json | 29 +++++++++++++++--------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index af6ed35..7c6bbf3 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -79,6 +79,8 @@
   --main-menu-color-dropdown-label-hover: #006089;
   --link-color-default: #005f89;
   --link-color-hover: #00202e;
+  --link-color-inverse: #fff;
+  --link-color-inverse-hover: #9ce1ff;
   --link-body: [object Object];
   --input-gap: 0.5rem;
   --input-padding-x: 1rem;
diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
index b46e49d..e2a2c8c 100644
--- a/src/tokens/transformed.tokens.json
+++ b/src/tokens/transformed.tokens.json
@@ -394,6 +394,14 @@
       "hover": {
         "value": "#00202e",
         "type": "color"
+      },
+      "inverse": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "inverse-hover": {
+        "value": "#9ce1ff",
+        "type": "color"
       }
     },
     "body": {
@@ -2790,8 +2798,7 @@
       "components/announcement": "enabled",
       "components/banner": "enabled",
       "components/footer": "enabled",
-      "components/header": "enabled",
-      "components/utilityMenu": "disabled"
+      "components/header": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:16908",
     "$figmaModeId": "23237:10",
@@ -2980,8 +2987,7 @@
     "id": "0a5c4562bd35f00ce8a339239980a3842147c0bd",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "global": "enabled",
-      "components/utilityMenu": "disabled"
+      "global": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17089",
     "$figmaModeId": "23237:11",
@@ -3034,8 +3040,7 @@
     "id": "ca91148967a5dcc80f7e50f6ccfe35b30efd5f2f",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "semantic": "enabled",
-      "components/utilityMenu": "disabled"
+      "semantic": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17133",
     "$figmaModeId": "23237:12",
@@ -3058,8 +3063,7 @@
     "id": "16a10d373d39988a75c7d612cd449a633f373c44",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "storybook": "source",
-      "components/utilityMenu": "disabled"
+      "storybook": "source"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17144",
     "$figmaModeId": "23237:13",
@@ -3088,8 +3092,7 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled",
-      "components/utilityMenu": "disabled"
+      "components/textField": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17145",
     "$figmaModeId": "23237:14",
@@ -3243,8 +3246,7 @@
       "components/table": "enabled",
       "components/tabs": "enabled",
       "components/textField": "enabled",
-      "semantic": "enabled",
-      "components/utilityMenu": "disabled"
+      "semantic": "enabled"
     },
     "group": "WUP",
     "type": "other",
@@ -3272,8 +3274,7 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled",
-      "components/utilityMenu": "disabled"
+      "components/textField": "enabled"
     },
     "group": "WUP",
     "type": "other",

From 0ecd6a78f2dbb321ba36a6d40dac88d5f63a7c89 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Thu, 3 Oct 2024 13:26:53 -0500
Subject: [PATCH 19/44] PR FEEDBACK: accordion

---
 .../accordion/_accordion-controls.twig        |  22 ++-
 src/components/accordion/_accordion-item.twig |  13 +-
 src/components/accordion/accordion.scss       | 176 ++++++++----------
 src/components/docs/examples/basic.stories.js |   2 +-
 src/components/docs/examples/basic.twig       |   2 +-
 src/foundation/utility/_utility.scss          |   2 +-
 src/tokens/tokens.scss                        |  60 +++---
 src/tokens/transformed.tokens.json            |   2 +-
 tokens/undefined/border-radius-tokens.twig    |  26 +--
 tokens/undefined/borders.twig                 |  26 +--
 tokens/undefined/breakpoints.twig             |  26 +--
 tokens/undefined/line-height.twig             |   2 +-
 tokens/undefined/motion.yml                   |   5 +
 tokens/undefined/opacity.twig                 |  26 +--
 tokens/undefined/sizes.twig                   |  26 +--
 tokens/undefined/spacing.twig                 |  34 ++--
 16 files changed, 234 insertions(+), 216 deletions(-)
 create mode 100644 tokens/undefined/motion.yml

diff --git a/src/components/accordion/_accordion-controls.twig b/src/components/accordion/_accordion-controls.twig
index 552ef17..47250ff 100644
--- a/src/components/accordion/_accordion-controls.twig
+++ b/src/components/accordion/_accordion-controls.twig
@@ -3,6 +3,24 @@
  # - none
  #}
 
+{% set expand_button__content %}
+  {{'Expand all'}}
+  {% include "@components/icons/_icon.twig" with {
+    icon__name: 'angle-down',
+    icon__blockname: accordion__base_class,
+    icon__decorative: true,
+  } %}
+{% endset %}
+
+{% set collapse_button__content %}
+  {{'Collapse all'}}
+  {% include "@components/icons/_icon.twig" with {
+    icon__name: 'angle-down',
+    icon__blockname: accordion__base_class,
+    icon__decorative: true,
+  } %}
+{% endset %}
+
 {% embed "@components/lists/list.twig" with {
   list__base_class: 'controls',
   list__blockname: accordion__base_class,
@@ -16,7 +34,7 @@
       }%}
 			{% block list__item__content %}
 				{% include "@components/button/button.twig" with {
-          button__content: 'Expand all',
+          button__content: expand_button__content,
           button__base_class: 'toggle-all',
           button__modifiers: ['expand'],
           button__style: 'clean',
@@ -31,7 +49,7 @@
       }%}
 			{% block list__item__content %}
 				{% include "@components/button/button.twig" with {
-          button__content: 'Collapse all',
+          button__content: collapse_button__content,
           button__base_class: 'toggle-all',
           button__modifiers: ['collapse'],
           button__style: 'clean',
diff --git a/src/components/accordion/_accordion-item.twig b/src/components/accordion/_accordion-item.twig
index 7a7bce1..c09c58b 100644
--- a/src/components/accordion/_accordion-item.twig
+++ b/src/components/accordion/_accordion-item.twig
@@ -26,9 +26,18 @@
 	}) %}
 {% endif %}
 
+{% set accordion__item__cta__content %}
+  {{ accordion__item__heading }}
+  {% include "@components/icons/_icon.twig" with {
+    icon__name: 'angle-down',
+    icon__blockname: accordion__item__base_class,
+    icon__decorative: true,
+  } %}
+{% endset %}
+
 {% set accordion__item__heading__content %}
-{% include "@components/button/button.twig" with {
-    button__content: accordion__item__heading,
+  {% include "@components/button/button.twig" with {
+    button__content: accordion__item__cta__content,
     button__style: 'clean',
     button__base_class: 'toggle',
     button__additional_classes: ['js-accordion-item__toggle'],
diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index 181bd3f..5b4c489 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -4,47 +4,52 @@
 @use '../../foundation/utility/utility' as *;
 @use '../../foundation/motion/motion' as *;
 
-@mixin plusminus {
-  &::before,
-  &::after {
-    @include transition;
-
-    & {
-      content: '';
-      display: block;
-      position: absolute;
-      background: var(--accordion-color-header);
-      border-radius: var(--spacing-md);
-      inset: 0 0 0 auto;
-      margin: auto;
-    }
-  }
+// @mixin plusminus {
+//   &::before,
+//   &::after {
+//     @include transition;
+
+//     & {
+//       content: '';
+//       display: block;
+//       position: absolute;
+//       background: var(--color-text-body);
+//       border-radius: var(--spacing-md);
+//       inset: 0 0 0 auto;
+//       margin: auto;
+//     }
+//   }
+
+//   &::before {
+//     height: var(--spacing-lg);
+//     width: var(--spacing-xs);
+//     transform: rotate(-180deg);
+//     right: 0.45rem;
+//   }
+
+//   &::after {
+//     height: var(--spacing-xs);
+//     width: var(--spacing-lg);
+//   }
+
+//   &:hover {
+//     &::before,
+//     &::after {
+//       background-color: var(--accordion-color-header-hover);
+//     }
+//   }
+
+//   &[aria-expanded='true'] {
+
+//     &::before {
+//       transform: rotate(-90deg);
+//       fill: var(--accordion-color-header);
+//       background: var(--accordion-color-header);
+//     }
+//   }
+// }
 
-  &::before {
-    height: var(--spacing-lg);
-    width: var(--spacing-xs);
-    transform: rotate(-180deg);
-    right: 0.45rem;
-  }
 
-  &::after {
-    height: var(--spacing-xs);
-    width: var(--spacing-lg);
-  }
-
-  &:hover {
-    &::before,
-    &::after {
-      background-color: var(--accordion-color-header-hover);
-    }
-  }
-
-  &[aria-expanded='true'] {
-    &::before {
-      transform: rotate(-90deg);
-    }
-  }
-}
 
 .container__heading {
   color: var(--accordion-color-header);
@@ -74,7 +79,6 @@
 }
 
 .accordion-item__toggle {
-  @include plusminus;
 
   & {
     background: none;
@@ -85,69 +89,52 @@
     justify-content: flex-start;
     text-align: start;
     width: 100%;
-    padding: 0 var(--spacing-xl) 0 0;
+    padding: 0 var(--spacing-lg) 0 0;
     position: relative;
     cursor: pointer;
     text-transform: none;
   }
 
+  [data-accordion-expanded='true'] & {
+    color: var(--accordion-color-header);
+  }
+
   &:hover {
     color: var(--accordion-color-header-hover);
+  }
 
-    &::before,
-    &::after {
-      background: var(--accordion-color-header-hover);
-    }
+  .toggle__content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 
 .button.accordion__toggle-all {
-  @include plusminus;
 
   & {
     display: flex;
     gap: var(--spacing-lg);
     align-items: center;
     cursor: pointer;
-    padding: 0 var(--spacing-xl) 0 0;
+    padding: 0;
     line-height: var(--line-height-tight);
     font-weight: var(--font-weight-primary-regular);
     text-transform: none;
   }
 
-  &::before,
-  &::after {
-    background: var(--accordion-color-header-hover);
-  }
-
-  &::before {
-    height: var(--spacing-lg);
-    width: var(--spacing-xs);
-    transform: rotate(-180deg);
-    right: calc(var(--spacing-lg) * 0.66);
-  }
-
-  &::after {
-    height: var(--spacing-xs);
-    width: var(--spacing-lg);
-    right: var(--spacing-sm);
-  }
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-
-    &::before,
-    &::after {
-      background: var(--accordion-color-header);
-    }
-  }
-
   &--collapse {
     &::before {
       display: none;
     }
   }
+
+  .toggle-all__content {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--spacing-md);
+  }
 }
 
 .button[data-button-style='clean'].accordion__toggle-all {
@@ -196,49 +183,47 @@
   }
 
   &:hover {
-    color: var(--accordion-color-header);
+    color: var(--accordion-color-header-hover);
 
     .accordion__icon {
-      fill: var(--accordion-color-header);
+      fill: var(--accordion-color-header-hover);
     }
   }
 }
 
 .accordion-item__icon {
-  height: var(--spacing-lg);
-  width: var(--spacing-lg);
+  @include transition;
 
-  [aria-expanded='true'] > & {
-    transform: rotate(180deg);
+  & {
+    height: var(--size-xl);
+    width: var(--size-xl);
+  }
+
+  [aria-expanded='true'] & {
+    transform: rotate(-180deg);
+    fill: var(--accordion-color-header);
   }
 }
 
 .accordion-item__heading {
+  font-size: var(--font-size-h4);
   font-weight: normal;
   display: flex;
-  color: var(--accordion-color-header);
-  margin: 0 0 var(--font-size-lead);
+  color: var(--accordion-color-body);
+  margin: 0;
 
-  [data-accordion-expanded='false'] & {
-    color: var(--accordion-color-body);
+  [data-accordion-expanded='true'] & {
+    color: var(--accordion-color-header);
   }
 
-  &:hover {
+  &:hover{
     color: var(--accordion-color-header-hover);
 
-    [data-accordion-expanded='false'] & {
-      color: var(--accordion-color-header);
-
-      .accordion-item__toggle {
-        color: var(--accordion-color-header);
-      }
-    }
-
     .accordion-item__icon {
       fill: var(--accordion-color-header-hover);
 
       [data-accordion-expanded='false'] & {
-        fill: var(--accordion-color-header);
+        fill: var(--accordion-color-header-hover);
       }
     }
   }
@@ -251,6 +236,7 @@
 
   [data-accordion-expanded='true'] & {
     margin-block: var(--spacing-lg) var(--spacing-md);
+    padding-inline: var(--spacing-2xl);
   }
 
   [data-accordion-expanded='false'] & {
diff --git a/src/components/docs/examples/basic.stories.js b/src/components/docs/examples/basic.stories.js
index 642c283..10b5607 100644
--- a/src/components/docs/examples/basic.stories.js
+++ b/src/components/docs/examples/basic.stories.js
@@ -1,5 +1,5 @@
 import template from './basic.twig';
-import image from '../../../images/example/basic-camera-image.png';
+import image from '../../../../assets/images/example/basic-camera-image.png';
 import data from './basic.yml';
 
 export default {
diff --git a/src/components/docs/examples/basic.twig b/src/components/docs/examples/basic.twig
index d48e52e..f4a60b9 100644
--- a/src/components/docs/examples/basic.twig
+++ b/src/components/docs/examples/basic.twig
@@ -1,7 +1,7 @@
 <div class="example basic">
 	{% include "@components/docs/examples/assets/_header.twig" %}
 	<main class="basic text-long">
-		{% include "@components/menus/breadcrumbs/breadcrumbs.twig" with {
+		{% include "@components/navigation/breadcrumbs/breadcrumbs.twig" with {
 			breadcrumb: data.breadcrumb
 		} %}
 		<h1 class="page-title">Undergraduate Courses</h1>
diff --git a/src/foundation/utility/_utility.scss b/src/foundation/utility/_utility.scss
index 18ac0ac..771326f 100644
--- a/src/foundation/utility/_utility.scss
+++ b/src/foundation/utility/_utility.scss
@@ -16,7 +16,7 @@
 // use-cases like `focus-within` that apply to an "outer" element when something
 // "inside" has focus. e.g. The utility nav search box.
 @mixin focus-styles {
-  outline: var(--spacing-xs) dotted clr(neutral, n500) !important;
+  outline: var(--spacing-xs) dotted var(--color-emulsify-blue-900) !important;
   outline-offset: var(--spacing-xs);
 }
 
diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index 7c6bbf3..55042de 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -3,43 +3,43 @@
  */
 
 :root {
-  --colors-sb-background: #fff;
+  --colors-sb-background: #ffffff;
   --colors-sb-text-body: #00202e;
   --colors-sb-text-heading: #0080b7;
   --colors-sb-visualization: #009fe4;
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
-  --tabs-color-bg-default: #fff;
-  --tabs-color-bg-active: #fff;
-  --tabs-color-bg-hover: #fff;
+  --tabs-color-bg-default: #ffffff;
+  --tabs-color-bg-active: #ffffff;
+  --tabs-color-bg-hover: #ffffff;
   --tabs-color-text-default: #00202e;
   --tabs-color-text-active: #0080b7;
   --tabs-color-text-hover: #005f89;
   --tabs-color-border-bottom: #a9afb1;
   --tab-label: [object Object];
-  --table-color-cell-bg: #fff;
+  --table-color-cell-bg: #ffffff;
   --table-color-cell-bg-stripe: #9ce1ff;
   --table-color-cell-text: #00202e;
   --table-color-cell-icon: #005f89;
   --table-color-header-bg: #005f89;
-  --table-color-header-text: #fff;
+  --table-color-header-text: #ffffff;
   --table-color-header-icon: #9ce1ff;
   --table-color-border: #d4d7d8;
   --status-color-info-bg: #16bdde;
   --status-color-info-label: #272727;
   --status-color-danger-bg: #bd1919;
-  --status-color-danger-label: #fff;
+  --status-color-danger-label: #ffffff;
   --status-color-success-bg: #337b32;
-  --status-color-success-label: #fff;
+  --status-color-success-label: #ffffff;
   --status-color-warning-bg: #f6c40f;
-  --status-color-warning-label: #333;
+  --status-color-warning-label: #333333;
   --status-font-size-header: 1.3125rem;
   --selectdropdown-color-label: #00202e;
   --selectdropdown-color-label-disabled: #a9afb1;
-  --selectdropdown-color-button-fill: #fff;
+  --selectdropdown-color-button-fill: #ffffff;
   --selectdropdown-color-button-fill-hover: #e6f5fc;
-  --selectdropdown-color-button-fill-disabled: #fff;
+  --selectdropdown-color-button-fill-disabled: #ffffff;
   --selectdropdown-color-button-stroke: #7f878b;
   --selectdropdown-color-button-stroke-hover: #545f64;
   --selectdropdown-color-button-stroke-disabled: #a9afb1;
@@ -55,7 +55,7 @@
   --radio-color-button-stroke-disabled: #a9afb1;
   --radio-gap: 0.25rem;
   --pager-color-text-default: #29373d;
-  --pager-color-text-hover: #fff;
+  --pager-color-text-hover: #ffffff;
   --pager-color-text-focus: #0080b7;
   --pager-color-fill-hover: #0080b7;
   --pager-default: [object Object];
@@ -65,11 +65,11 @@
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
-  --utility-menu-color-bg: #fff;
+  --utility-menu-color-bg: #ffffff;
   --utility-menu-color-link-default: #006089;
   --utility-menu-color-link-hover: #0080b7;
-  --main-menu-color-bg: #fff;
-  --main-menu-color-link-bg: #fff;
+  --main-menu-color-bg: #ffffff;
+  --main-menu-color-link-bg: #ffffff;
   --main-menu-color-link-bg-hover: #9ce1ff;
   --main-menu-color-link-label: #0080b7;
   --main-menu-color-link-label-hover: #006089;
@@ -79,7 +79,7 @@
   --main-menu-color-dropdown-label-hover: #006089;
   --link-color-default: #005f89;
   --link-color-hover: #00202e;
-  --link-color-inverse: #fff;
+  --link-color-inverse: #ffffff;
   --link-color-inverse-hover: #9ce1ff;
   --link-body: [object Object];
   --input-gap: 0.5rem;
@@ -91,16 +91,16 @@
   --input-border-color: #7f878b;
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;
-  --input-bkg: #fff;
+  --input-bkg: #ffffff;
   --header-search-background: #006089;
-  --header-search-text-icon: #fff;
+  --header-search-text-icon: #ffffff;
   --footer-background-default: #006089;
-  --footer-background-light: #fff;
+  --footer-background-light: #ffffff;
   --footer-heading-default: #9ce1ff;
   --footer-heading-dark: #0080b7;
   --footer-icon-default: #9ce1ff;
   --footer-icon-dark: #0080b7;
-  --fieldset-color-bg: #fff;
+  --fieldset-color-bg: #ffffff;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
   --radius-fieldset: 0.25rem;
@@ -115,7 +115,7 @@
   --cta-color-heading-darker: #006089;
   --cta-color-eyebrow: #006089;
   --cta-color-body: #00202e;
-  --cta-color-button: #fff;
+  --cta-color-button: #ffffff;
   --cta-background: #9ce1ff;
   --cta-button-background: #009fe4;
   --cta-button-background-darker: #006089;
@@ -132,10 +132,10 @@
   --card-color-heading: #0080b7;
   --card-color-subheading: #006089;
   --button-color-bkg: #005f89;
-  --button-color-label: #fff;
+  --button-color-label: #ffffff;
   --button-color-bkg-hover: #00405b;
-  --button-color-label-hover: #fff;
-  --button-color-label-focus: #fff;
+  --button-color-label-hover: #ffffff;
+  --button-color-label-focus: #ffffff;
   --button-color-bkg-focus: #00405b;
   --button-padding-x: 1rem;
   --button-padding-x-hover: 1rem;
@@ -161,12 +161,12 @@
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
   --banner-button-text: #00202e;
-  --banner-button-border: #fff;
+  --banner-button-border: #ffffff;
   --banner-button-background: #9ce1ff;
-  --banner-text: #fff;
+  --banner-text: #ffffff;
   --banner-background: #006089;
   --banner-background-opacity: 0.75;
-  --announcement-background-default: #fff;
+  --announcement-background-default: #ffffff;
   --announcement-background-light: #9ce1ff;
   --announcement-background-dark: #006089;
   --announcement-heading-default: #0080b7;
@@ -189,13 +189,13 @@
   --color-text-body: #00202e;
   --color-text-body-lighter: #006089;
   --color-text-heading: #006089;
-  --color-text-white: #fff;
+  --color-text-white: #ffffff;
   --color-warning-default: #d80f0f;
   --color-link: #005f89;
   --color-link-hover: #00202e;
   --color-link-hover-lighter: #00405b;
-  --color-black: #000;
-  --color-white: #fff;
+  --color-black: #000000;
+  --color-white: #ffffff;
   --color-emulsify-blue-100: #e6f5fc;
   --color-emulsify-blue-200: #ccecfa;
   --color-emulsify-blue-300: #99d9f4;
diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
index 742024a..e2a2c8c 100644
--- a/src/tokens/transformed.tokens.json
+++ b/src/tokens/transformed.tokens.json
@@ -3280,4 +3280,4 @@
     "type": "other",
     "value": "[object Object]"
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/undefined/border-radius-tokens.twig b/tokens/undefined/border-radius-tokens.twig
index 04e4697..400dffd 100644
--- a/tokens/undefined/border-radius-tokens.twig
+++ b/tokens/undefined/border-radius-tokens.twig
@@ -1,16 +1,16 @@
 <div>
-  <h2 class="sb-title">Border Radius Tokens</h2>
+	<h2 class="sb-title">Border Radius Tokens</h2>
 
-  <ul class="sb-list">
-    {% for radius, value in _context.radius %}
-      <li class="sb-list__item">
-        <span class="sb-list__label">{{radius}}</span>
-        <span class="sb-list__value">{{value.value}}px</span>
-        <span class="sb-list__custom-property">
-          <code class="sb-custom-property-name">var(--radius-{{radius}})</code>
-        </span>
-        <span class="sb-list__visualization" style="border-radius: {{value.value}}px; width: 75px; height: 75px; background: var(--colors-sb-visualization);"></span>
-      </li>
-    {% endfor %}
-  </ul>
+	<ul class="sb-list">
+		{% for radius, value in _context.radius %}
+			<li class="sb-list__item">
+				<span class="sb-list__label">{{radius}}</span>
+				<span class="sb-list__value">{{value.value}}px</span>
+				<span class="sb-list__custom-property">
+					<code class="sb-custom-property-name">var(--radius-{{radius}})</code>
+				</span>
+				<span class="sb-list__visualization" style="border-radius: {{value.value}}px; width: 75px; height: 75px; background: var(--color-sb-visualization);"></span>
+			</li>
+		{% endfor %}
+	</ul>
 </div>
diff --git a/tokens/undefined/borders.twig b/tokens/undefined/borders.twig
index 5f794fd..c13bbdd 100644
--- a/tokens/undefined/borders.twig
+++ b/tokens/undefined/borders.twig
@@ -1,16 +1,16 @@
 <div>
-	<h2 class="sb-title">Border Tokens</h2>
+  <h2 class="sb-title">Border Tokens</h2>
 
-	<ul class="sb-list">
-		{% for border, value in _context.border %}
-			<li class="sb-list__item">
-				<span class="sb-list__label">{{border}}</span>
-				<span class="sb-list__value">{{value.value}}px</span>
-				<span class="sb-list__custom-property">
-					<code class=" sb-custom-property-name">var(--border-{{border}})</code>
-				</span>
-				<span class="sb-list__visualization" style="height: {{value.value}}px; background-color: var(--color-sb-visualization); width: 300px;"></span>
-			</li>
-		{% endfor %}
-	</ul>
+  <ul class="sb-list">
+    {% for border, value in _context.border %}
+      <li class="sb-list__item">
+        <span class="sb-list__label">{{border}}</span>
+        <span class="sb-list__value">{{value.value}}px</span>
+        <span class="sb-list__custom-property">
+          <code class=" sb-custom-property-name">var(--border-{{border}})</code>
+        </span>
+        <span class="sb-list__visualization" style="height: {{value.value}}px; background-color: var(--colors-sb-visualization); width: 300px;"></span>
+      </li>
+    {% endfor %}
+  </ul>
 </div>
diff --git a/tokens/undefined/breakpoints.twig b/tokens/undefined/breakpoints.twig
index c70cfc7..69b1cfe 100644
--- a/tokens/undefined/breakpoints.twig
+++ b/tokens/undefined/breakpoints.twig
@@ -1,16 +1,16 @@
 <div>
-	<h2 class="sb-title">Breakpoint Tokens</h2>
+  <h2 class="sb-title">Breakpoint Tokens</h2>
 
-	<ul class="sb-list" style="overflow: scroll;">
-		{% for breakpoint, value in _context.breakpoint %}
-			<li class="sb-list__item" style="min-width: max-content;">
-				<span class="sb-list__label">{{breakpoint}}</span>
-				<span class="sb-list__value">{{value.value}}px</span>
-				<span class="sb-list__custom-property">
-					<code class=" sb-custom-property-name">var(--breakpoint-{{breakpoint}})</code>
-				</span>
-				<span class="sb-list__visualization" style="width: {{value.value}}px; height: 25px; background: var(--color-sb-visualization); display: block; border-radius: var(--radius-sm);"></span>
-			</li>
-		</li>
-	</li>
+  <ul class="sb-list" style="overflow: scroll;">
+    {% for breakpoint, value in _context.breakpoint %}
+      <li class="sb-list__item" style="min-width: max-content;">
+        <span class="sb-list__label">{{breakpoint}}</span>
+        <span class="sb-list__value">{{value.value}}px</span>
+        <span class="sb-list__custom-property">
+          <code class=" sb-custom-property-name">var(--breakpoint-{{breakpoint}})</code>
+        </span>
+        <span class="sb-list__visualization" style="width: {{value.value}}px; height: 25px; background: var(--colors-sb-visualization); display: block; border-radius: var(--radius-sm);"></span>
+      </li>
+    </li>
+  </li>
 {% endfor %}</ul></div>
diff --git a/tokens/undefined/line-height.twig b/tokens/undefined/line-height.twig
index cca5137..cdd8161 100644
--- a/tokens/undefined/line-height.twig
+++ b/tokens/undefined/line-height.twig
@@ -1,7 +1,7 @@
 {% set text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." %}
 
 <div>
-	<h2 class="sb-title">Line Heights</h2>
+  <h2 class="sb-title">Line Heights</h2>
 
   <ul class="sb-list" style="overflow: scroll;">
     {% for lineHeight, value in _context.lineHeight|reverse %}
diff --git a/tokens/undefined/motion.yml b/tokens/undefined/motion.yml
new file mode 100644
index 0000000..6f1c886
--- /dev/null
+++ b/tokens/undefined/motion.yml
@@ -0,0 +1,5 @@
+motions:
+  - name: 'Fade'
+  - name: 'Slide Up'
+  - name: 'Slide Down'
+  - name: 'Expand'
diff --git a/tokens/undefined/opacity.twig b/tokens/undefined/opacity.twig
index 6c135b7..4516bf5 100644
--- a/tokens/undefined/opacity.twig
+++ b/tokens/undefined/opacity.twig
@@ -1,16 +1,16 @@
 <div>
-  <h2 class="sb-title">Opacity Tokens</h2>
+	<h2 class="sb-title">Opacity Tokens</h2>
 
-  <ul class="sb-list">
-    {% for opacity, value in _context.opacity %}
-      <li class="sb-list__item">
-        <span class="sb-list__label">{{opacity}}</span>
-        <span class="sb-list__value">{{value.value}}</span>
-        <span class="sb-list__custom-property">
-          <code class=" sb-custom-property-name">var(--radius-{{opacity}})</code>
-        </span>
-        <span class="sb-list__visualization" style="opacity: {{value.value}}; display: block; width: 50px; height: 50px; background-color: var(--colors-sb-visualization); border-radius: var(--radius-sm);"></span>
-      </li>
-    {% endfor %}
-  </ul>
+	<ul class="sb-list">
+		{% for opacity, value in _context.opacity %}
+			<li class="sb-list__item">
+				<span class="sb-list__label">{{opacity}}</span>
+				<span class="sb-list__value">{{value.value}}</span>
+				<span class="sb-list__custom-property">
+					<code class=" sb-custom-property-name">var(--radius-{{opacity}})</code>
+				</span>
+				<span class="sb-list__visualization" style="opacity: {{value.value}}; display: block; width: 50px; height: 50px; background-color: var(--color-sb-visualization); border-radius: var(--radius-sm);"></span>
+			</li>
+		{% endfor %}
+	</ul>
 </div>
diff --git a/tokens/undefined/sizes.twig b/tokens/undefined/sizes.twig
index a5a9ec7..a727eee 100644
--- a/tokens/undefined/sizes.twig
+++ b/tokens/undefined/sizes.twig
@@ -1,16 +1,16 @@
 <div>
-	<h2 class="sb-title">Size Tokens</h2>
+  <h2 class="sb-title">Size Tokens</h2>
 
-	<ul class="sb-list">
-		{% for size, value in _context.size %}
-			<li class="sb-list__item">
-				<span class="sb-list__label">{{size}}</span>
-				<span class="sb-list__value">{{value.value}}px</span>
-				<span class="sb-list__custom-property">
-					<code class=" sb-custom-property-name">var(--size-{{size}})</code>
-				</span>
-				<span class="sb-list__visualization" style="width: {{value.value}}px; height: {{value.value}}px; background-color: var(--color-sb-visualization);"></span>
-			</li>
-		{% endfor %}
-	</ul>
+  <ul class="sb-list">
+    {% for size, value in _context.size %}
+      <li class="sb-list__item">
+        <span class="sb-list__label">{{size}}</span>
+        <span class="sb-list__value">{{value.value}}px</span>
+        <span class="sb-list__custom-property">
+          <code class=" sb-custom-property-name">var(--size-{{size}})</code>
+        </span>
+        <span class="sb-list__visualization" style="width: {{value.value}}px; height: {{value.value}}px; background-color: var(--colors-sb-visualization);"></span>
+      </li>
+    {% endfor %}
+  </ul>
 </div>
diff --git a/tokens/undefined/spacing.twig b/tokens/undefined/spacing.twig
index 807469f..1f84cb1 100644
--- a/tokens/undefined/spacing.twig
+++ b/tokens/undefined/spacing.twig
@@ -1,21 +1,21 @@
 <div>
-	<h2 class="sb-title">Spacing Tokens</h2>
+  <h2 class="sb-title">Spacing Tokens</h2>
 
-	<ul class="sb-list">
-		{% for spacing, value in _context.spacing %}
-			<li class="sb-list__item">
-				<span class="sb-list__label">{{spacing}}</span>
-				<span class="sb-list__value">{{value.value}}px</span>
-				<span class="sb-list__custom-property">
-					<code class=" sb-custom-property-name">var(--spacing-{{spacing}})</code>
-				</span>
+  <ul class="sb-list">
+    {% for spacing, value in _context.spacing %}
+      <li class="sb-list__item">
+        <span class="sb-list__label">{{spacing}}</span>
+        <span class="sb-list__value">{{value.value}}px</span>
+        <span class="sb-list__custom-property">
+          <code class=" sb-custom-property-name">var(--spacing-{{spacing}})</code>
+        </span>
 
-				<ul class="sb-spacing-wrapper" style="gap: {{value.value}}px; padding-left: 0;">
-					{% for i in [1,1,1,1,1,1,1] %}
-						<li class="sb-list__visualization" style="width: 50px; height: 50px; background-color: var(--color-sb-visualization);"></li>
-					{% endfor %}
-				</ul>
-			</li>
-		{% endfor %}
-	</ul>
+        <ul class="sb-spacing-wrapper" style="gap: {{value.value}}px; padding-left: 0;">
+          {% for i in [1,1,1,1,1,1,1] %}
+            <li class="sb-list__visualization" style="width: 50px; height: 50px; background-color: var(--colors-sb-visualization);"></li>
+          {% endfor %}
+        </ul>
+      </li>
+    {% endfor %}
+  </ul>
 </div>

From 97d8d3b60a3083c73f60ee775529e55969908dcb Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Thu, 3 Oct 2024 13:45:21 -0500
Subject: [PATCH 20/44] PR FEEDBACK: announcement

---
 assets/icons/star-solid.svg                   |  1 +
 src/components/accordion/accordion.scss       | 54 +------------------
 src/components/accordion/accordion.twig       | 14 ++---
 src/components/announcement/announcement.scss | 14 ++++-
 src/components/announcement/announcement.twig |  9 ++--
 5 files changed, 26 insertions(+), 66 deletions(-)
 create mode 100644 assets/icons/star-solid.svg

diff --git a/assets/icons/star-solid.svg b/assets/icons/star-solid.svg
new file mode 100644
index 0000000..e0eec11
--- /dev/null
+++ b/assets/icons/star-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>
\ No newline at end of file
diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index 5b4c489..d863ed0 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -4,53 +4,7 @@
 @use '../../foundation/utility/utility' as *;
 @use '../../foundation/motion/motion' as *;
 
-// @mixin plusminus {
-//   &::before,
-//   &::after {
-//     @include transition;
-
-//     & {
-//       content: '';
-//       display: block;
-//       position: absolute;
-//       background: var(--color-text-body);
-//       border-radius: var(--spacing-md);
-//       inset: 0 0 0 auto;
-//       margin: auto;
-//     }
-//   }
-
-//   &::before {
-//     height: var(--spacing-lg);
-//     width: var(--spacing-xs);
-//     transform: rotate(-180deg);
-//     right: 0.45rem;
-//   }
-
-//   &::after {
-//     height: var(--spacing-xs);
-//     width: var(--spacing-lg);
-//   }
-
-//   &:hover {
-//     &::before,
-//     &::after {
-//       background-color: var(--accordion-color-header-hover);
-//     }
-//   }
-
-//   &[aria-expanded='true'] {
-
-//     &::before {
-//       transform: rotate(-90deg);
-//       fill: var(--accordion-color-header);
-//       background: var(--accordion-color-header);
-//     }
-//   }
-// }
-
-
-
+// Container for the accordion.
 .container__heading {
   color: var(--accordion-color-header);
 }
@@ -124,12 +78,6 @@
     text-transform: none;
   }
 
-  &--collapse {
-    &::before {
-      display: none;
-    }
-  }
-
   .toggle-all__content {
     display: flex;
     align-items: flex-end;
diff --git a/src/components/accordion/accordion.twig b/src/components/accordion/accordion.twig
index 10c8118..6fe5fb0 100644
--- a/src/components/accordion/accordion.twig
+++ b/src/components/accordion/accordion.twig
@@ -29,13 +29,13 @@
 			{% set unique_id = random('1234567890') ~ random('1234567890') ~ random('1234567890') ~ random('1234567890') %}
 			{% set accordion__item__content__id = 'accordion__item-' ~ unique_id ~ '-' ~ loop.index %}
       {% include "@components/accordion/_accordion-item.twig" with {
-          accordion__item__heading: item.accordion__item__heading,
-          accordion__item__content: item.accordion__item__content,
-          accordion__item__heading__level: accordion__heading ? '3' : '2',
-          accordion__item__content__attributes: {
-            'id': accordion__item__content__id,
-          }
-        } %}
+        accordion__item__heading: item.accordion__item__heading,
+        accordion__item__content: item.accordion__item__content,
+        accordion__item__heading__level: accordion__heading ? '3' : '2',
+        accordion__item__content__attributes: {
+          'id': accordion__item__content__id,
+        }
+      } %}
 		{% endfor %}
 	{% endblock %}
 </div>
diff --git a/src/components/announcement/announcement.scss b/src/components/announcement/announcement.scss
index 4dd0201..9877ea7 100644
--- a/src/components/announcement/announcement.scss
+++ b/src/components/announcement/announcement.scss
@@ -7,7 +7,7 @@
   padding: var(--spacing-xl);
 }
 
-.announcement__image {
+.announcement__icon {
   width: 3.5rem;
 }
 
@@ -45,6 +45,10 @@
   background-color: var(--announcement-background-default);
 }
 
+.announcement--default .announcement__icon {
+  fill: var(--announcement-heading-default);
+}
+
 .announcement__content--default .heading {
   color: var(--announcement-heading-default);
 }
@@ -58,6 +62,10 @@
   background-color: var(--announcement-background-light);
 }
 
+.announcement--light .announcement__icon {
+  fill: var(--announcement-heading-dark);
+}
+
 .announcement__content--light .heading {
   color: var(--announcement-heading-dark);
 }
@@ -71,6 +79,10 @@
   background-color: var(--announcement-background-dark);
 }
 
+.announcement--dark .announcement__icon {
+  fill: var(--announcement-heading-light);
+}
+
 .announcement__content--dark p,
 .announcement__content--dark .heading {
   color: var(--announcement-heading-light);
diff --git a/src/components/announcement/announcement.twig b/src/components/announcement/announcement.twig
index 511d9f6..aa45093 100644
--- a/src/components/announcement/announcement.twig
+++ b/src/components/announcement/announcement.twig
@@ -18,11 +18,10 @@
 <div {{ bem(announcement__base_class, [announcement__variant]) }} {{ add_attributes(additional_attributes) }}>
   {# Render the icon if provided #}
   {% if announcement__icon %}
-    {% include "@components/image/responsive-image.twig" with {
-      image_alt: 'icon',
-      output_image_tag: true,
-      image_src: announcement__icon,
-      responsive_image_blockname: announcement__base_class,
+    {% include "@components/icons/_icon.twig" with {
+      icon__name: 'star-solid',
+      icon__blockname: announcement__base_class,
+      icon__decorative: true,
     } %}
   {% endif %}
   {# Render the main content #}

From 636830b04393725a8e855927ebfc5b0d45535deb Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Thu, 3 Oct 2024 14:01:33 -0500
Subject: [PATCH 21/44] PR FEEDBACK: card

---
 src/components/card/card.twig | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/card/card.twig b/src/components/card/card.twig
index fff543e..be3f1de 100644
--- a/src/components/card/card.twig
+++ b/src/components/card/card.twig
@@ -49,10 +49,10 @@
 	{% block card__img %}
 		{% if card__image__src %}
 			{% include "@components/image/responsive-image.twig" with {
-        image_blockname: card__base_class,
+        image__blockname: card__base_class,
         output_image_tag: card__image__output_image_tag,
-        image_src: card__image__src,
-        image_alt: card__image__alt,
+        image__src: card__image__src,
+        image__alt: card__image__alt,
       } %}
 		{% endif %}
 	{% endblock %}

From 9a21f535bc50ef9e3b618fa210def0a88793a32c Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Thu, 3 Oct 2024 15:07:04 -0500
Subject: [PATCH 22/44] PR FEEDBACK: main menu

---
 .../navigation/base/_menu-item.twig           |  2 +-
 .../navigation/main/_main-link.scss           | 20 +++++++++++++++++--
 .../navigation/main/_main-list.scss           |  1 +
 .../navigation/main/_main-toggle.scss         |  9 +++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation/base/_menu-item.twig b/src/components/navigation/base/_menu-item.twig
index 22d834d..d30fda4 100644
--- a/src/components/navigation/base/_menu-item.twig
+++ b/src/components/navigation/base/_menu-item.twig
@@ -143,7 +143,7 @@
 				{% include "@components/navigation/base/menu-toggle/menu-toggle.twig" with {
 					menu_toggle__menu__level: 'level-' ~ (menu__level + 1),
 					menu_toggle__icon: {
-						name: 'chevronDown',
+						name: 'chevron-down',
 						right: true,
 					},
 					menu_toggle__menu__label: item.title ~ ' Menu' ,
diff --git a/src/components/navigation/main/_main-link.scss b/src/components/navigation/main/_main-link.scss
index d4e8b1b..f7a573d 100644
--- a/src/components/navigation/main/_main-link.scss
+++ b/src/components/navigation/main/_main-link.scss
@@ -27,7 +27,7 @@
   }
 
   &.main-nav__link--with-sub {
-    padding-right: var(--spacing-xl);
+    padding-right: calc(var(--spacing-xl) + var(--spacing-lg));
   }
 
   &.active,
@@ -80,7 +80,7 @@
   white-space: nowrap;
   width: auto;
   margin: 0;
-  padding: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-lg);
   display: flex;
   align-content: center;
   overflow: visible;
@@ -109,8 +109,24 @@
   }
 }
 
+.main-nav__item--level-0 {
+  &:hover { 
+    background-color: var(--main-menu-color-link-bg-hover);
+
+    // Make the level-0 link text color change on li hover
+    .main-nav__link--level-0.main-nav__link--with-sub {
+      color: var(--main-menu-color-link-label-hover);
+    }
+  }
+} 
+
 .main-nav__link--level-1,
 .main-nav__link--level-2 {
+
+  & {
+    font-size: var(--font-size-h6);
+  }
+
   @include breakpoint('small-down') {
     padding-left: var(--spacing-xl);
   }
diff --git a/src/components/navigation/main/_main-list.scss b/src/components/navigation/main/_main-list.scss
index e249419..e5bb7d5 100644
--- a/src/components/navigation/main/_main-list.scss
+++ b/src/components/navigation/main/_main-list.scss
@@ -26,6 +26,7 @@
 
   &:not(.main-nav__menu-list--sub) {
     display: none;
+    gap: var(--spacing-md);
 
     @include breakpoint('medium') {
       display: flex;
diff --git a/src/components/navigation/main/_main-toggle.scss b/src/components/navigation/main/_main-toggle.scss
index dcff261..dc79150 100644
--- a/src/components/navigation/main/_main-toggle.scss
+++ b/src/components/navigation/main/_main-toggle.scss
@@ -57,6 +57,14 @@
     }
   }
 
+  .main-nav__item--level-1.main-nav__item--with-sub & {
+    .icon {
+      height: var(--size-lg);
+      width: var(--size-lg);
+    }
+  }
+  
+
   .sub--open > &,
   &[aria-expanded='true'] {
     .icon {
@@ -70,6 +78,7 @@
 
     @include breakpoint('medium') {
       top: var(--spacing-md);
+      right: var(--spacing-lg);
     }
 
     @include breakpoint('small-down') {

From ba3dd34512cc1de963f626512b9e3d8133a2a541 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Thu, 3 Oct 2024 15:32:45 -0500
Subject: [PATCH 23/44] PR FEEDBACK: breadcrumbs

---
 .../navigation/breadcrumbs/breadcrumbs.scss   | 20 +++++++++++--------
 src/tokens/line-height/line-height.twig       |  2 +-
 tokens/undefined/line-height.twig             |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/navigation/breadcrumbs/breadcrumbs.scss b/src/components/navigation/breadcrumbs/breadcrumbs.scss
index 590f6a5..034e182 100644
--- a/src/components/navigation/breadcrumbs/breadcrumbs.scss
+++ b/src/components/navigation/breadcrumbs/breadcrumbs.scss
@@ -3,7 +3,7 @@
 @use '../../../foundation/utility/utility' as *;
 @use '../../link/link' as *;
 
-@mixin breadcrumb-spacer($position: '') {
+@mixin breadcrumb-nav($position: '') {
   &:not(:last-child) {
     background-size: var(--spacing-lg);
     background-repeat: no-repeat;
@@ -18,6 +18,13 @@
   }
 }
 
+@mixin breadcrumb-spacer {
+  &:not(:last-child)::after {
+    content: "/";
+    margin-left: var(--spacing-md);
+  }
+}
+
 .breadcrumbs__wrapper {
   display: flex;
   position: relative;
@@ -69,12 +76,9 @@
   @include breadcrumb-spacer;
 
   & {
-    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm)
-      var(--spacing-md);
-  }
-
-  &:last-child {
-    padding: var(--spacing-sm) var(--spacing-md);
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-sm);
   }
 
   .breadcrumbs__link {
@@ -171,7 +175,7 @@
 }
 
 .breadcrumbs__toggle {
-  @include breadcrumb-spacer('left');
+  @include breadcrumb-nav('left');
 
   & {
     display: flex;
diff --git a/src/tokens/line-height/line-height.twig b/src/tokens/line-height/line-height.twig
index cdd8161..4cfd232 100644
--- a/src/tokens/line-height/line-height.twig
+++ b/src/tokens/line-height/line-height.twig
@@ -11,7 +11,7 @@
         <span class="sb-list__custom-property" style="width: 272px;">
           <code class="sb-custom-property-name">var(--line-heights-{{lineHeight}})</code>
         </span>
-        <span class="sb-list__visualization" style="max-width: 600px; line-height:var(--line-height-{{lineHeight}})">{{text}}</span>
+        <span class="sb-list__visualization" style="width: auto; height: auto; max-width: 600px; padding: var(--spacing-lg); line-height:var(--line-height-{{lineHeight}})">{{text}}</span>
       </li>
     {% endfor %}
   </ul>
diff --git a/tokens/undefined/line-height.twig b/tokens/undefined/line-height.twig
index cdd8161..4cfd232 100644
--- a/tokens/undefined/line-height.twig
+++ b/tokens/undefined/line-height.twig
@@ -11,7 +11,7 @@
         <span class="sb-list__custom-property" style="width: 272px;">
           <code class="sb-custom-property-name">var(--line-heights-{{lineHeight}})</code>
         </span>
-        <span class="sb-list__visualization" style="max-width: 600px; line-height:var(--line-height-{{lineHeight}})">{{text}}</span>
+        <span class="sb-list__visualization" style="width: auto; height: auto; max-width: 600px; padding: var(--spacing-lg); line-height:var(--line-height-{{lineHeight}})">{{text}}</span>
       </li>
     {% endfor %}
   </ul>

From f13666b472697a73e48da6874484c1fe85d91e9c Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Thu, 3 Oct 2024 15:35:21 -0500
Subject: [PATCH 24/44] PR FEEDBACK: logo

---
 src/components/logo/logo.twig | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/logo/logo.twig b/src/components/logo/logo.twig
index fbfbeb0..d7c567e 100644
--- a/src/components/logo/logo.twig
+++ b/src/components/logo/logo.twig
@@ -17,11 +17,11 @@
     link__base_class: 'logo__link',
     link__url: logo__url|default('/'),
   } %}
-    {% block link_content %}
+    {% block link__content %}
       {% include "@components/image/responsive-image.twig" with {
         output_image_tag: true,
-        image_src: directory ? '/' ~ directory ~ '/assets/images/logo.png' : 'logo.png',
-        image_alt: 'Logo',
+        image__src: directory ? '/' ~ directory ~ '/assets/images/logo.png' : 'logo.png',
+        image__alt: 'Logo',
         responsive_image_blockname: 'logo',
       } %}
     {% endblock %}

From 6ff51b637ccbe30b1d26aa1862597f4951317a6e Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Fri, 4 Oct 2024 09:38:22 -0500
Subject: [PATCH 25/44] FIX: PAGES - change file names to get compiled and make
 the pages look as they should, again

---
 src/components/docs/examples/{_basic.scss => basic.scss}     | 0
 src/components/docs/examples/basic.stories.js                | 2 +-
 src/components/docs/examples/{_home.scss => home.scss}       | 0
 src/components/docs/examples/{_program.scss => program.scss} | 0
 4 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/docs/examples/{_basic.scss => basic.scss} (100%)
 rename src/components/docs/examples/{_home.scss => home.scss} (100%)
 rename src/components/docs/examples/{_program.scss => program.scss} (100%)

diff --git a/src/components/docs/examples/_basic.scss b/src/components/docs/examples/basic.scss
similarity index 100%
rename from src/components/docs/examples/_basic.scss
rename to src/components/docs/examples/basic.scss
diff --git a/src/components/docs/examples/basic.stories.js b/src/components/docs/examples/basic.stories.js
index 10b5607..8928b97 100644
--- a/src/components/docs/examples/basic.stories.js
+++ b/src/components/docs/examples/basic.stories.js
@@ -6,7 +6,7 @@ export default {
   title: 'Pages/Basic',
   decorators: [
     (story) =>
-      `<div style="background: var(--color-grays-700); padding: 0;margin:0;">${story()}</div>`,
+      `<div style="background: var(--color-grays-100); padding: 0;margin:0;">${story()}</div>`,
   ],
 };
 
diff --git a/src/components/docs/examples/_home.scss b/src/components/docs/examples/home.scss
similarity index 100%
rename from src/components/docs/examples/_home.scss
rename to src/components/docs/examples/home.scss
diff --git a/src/components/docs/examples/_program.scss b/src/components/docs/examples/program.scss
similarity index 100%
rename from src/components/docs/examples/_program.scss
rename to src/components/docs/examples/program.scss

From add19a163e124ec393864f47b169c3d52af814d1 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Fri, 18 Oct 2024 09:27:03 -0500
Subject: [PATCH 26/44] feat: package updates and updating actions to node 20

---
 .github/workflows/create-tokens.yml      |    2 +-
 .github/workflows/deploy-to-gh-pages.yml |    2 +-
 .github/workflows/release.yml            |    2 +-
 .github/workflows/tests.yml              |    4 +-
 package-lock.json                        | 3262 +++++++++++-----------
 package.json                             |   18 +-
 6 files changed, 1651 insertions(+), 1639 deletions(-)

diff --git a/.github/workflows/create-tokens.yml b/.github/workflows/create-tokens.yml
index 19a0b65..3100947 100644
--- a/.github/workflows/create-tokens.yml
+++ b/.github/workflows/create-tokens.yml
@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 16.13
+          node-version: 20
       - name: Install Node Dependencies
         run: npm ci
       # Transform Figma Tokens JSON to something Style Dictionary can read, then
diff --git a/.github/workflows/deploy-to-gh-pages.yml b/.github/workflows/deploy-to-gh-pages.yml
index 3a92ff9..b1f3286 100644
--- a/.github/workflows/deploy-to-gh-pages.yml
+++ b/.github/workflows/deploy-to-gh-pages.yml
@@ -48,7 +48,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: 20
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v3
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 904dd85..0092131 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -13,7 +13,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '16.13'
+          node-version: 20
       - name: Install
         run: npm install
       - name: Release
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index add98b4..f2cefa8 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -20,7 +20,7 @@ jobs:
         if: steps.component_changes.outputs.components == 'true'
         uses: actions/setup-node@v2
         with:
-          node-version: '16.13'
+          node-version: 20
       - name: Install dependencies
         if: steps.component_changes.outputs.components == 'true'
         run: npm ci
@@ -40,7 +40,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16.13'
+          node-version: 20
       - name: Install CLI
         run: npm install -g @emulsify/cli
       - name: Install starter
diff --git a/package-lock.json b/package-lock.json
index 9715442..ed4969a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,22 +9,22 @@
       "version": "0.0.0-development",
       "license": "ISC",
       "dependencies": {
-        "@emulsify/core": "^2.2.3",
-        "@percy/cli": "^1.28.2",
-        "@percy/storybook": "^5.0.1"
+        "@emulsify/core": "^2.3.0",
+        "@percy/cli": "^1.30.1",
+        "@percy/storybook": "^6.0.2"
       },
       "devDependencies": {
-        "@commitlint/cli": "^19.4.1",
-        "@commitlint/config-conventional": "^19.4.1",
+        "@commitlint/cli": "^19.5.0",
+        "@commitlint/config-conventional": "^19.5.0",
         "@semantic-release/changelog": "^6.0.2",
         "@semantic-release/commit-analyzer": "^13.0.0",
         "@semantic-release/git": "^10.0.1",
-        "@semantic-release/github": "^10.1.7",
+        "@semantic-release/github": "^11.0.0",
         "@semantic-release/release-notes-generator": "^14.0.0",
         "@storybook/storybook-deployer": "2.8.16",
-        "husky": "^9.1.5",
-        "lint-staged": "^15.2.9",
-        "semantic-release": "^23.0.4"
+        "husky": "^9.1.6",
+        "lint-staged": "^15.2.10",
+        "semantic-release": "^24.1.2"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -40,11 +40,11 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
-      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.7.tgz",
+      "integrity": "sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==",
       "dependencies": {
-        "@babel/highlight": "^7.24.7",
+        "@babel/highlight": "^7.25.7",
         "picocolors": "^1.0.0"
       },
       "engines": {
@@ -52,28 +52,28 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
-      "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.8.tgz",
+      "integrity": "sha512-ZsysZyXY4Tlx+Q53XdnOFmqwfB9QDTHYxaZYajWRoBLuLEAwI2UIbtxOjWh/cFaa9IKUlcB+DDuoskLuKu56JA==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
-      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.8.tgz",
+      "integrity": "sha512-Oixnb+DzmRT30qu9d3tJSQkxuygWm32DFykT4bRoORPa9hZ/L4KhVB/XiRm6KG+roIEM7DBQlmg27kw2HZkdZg==",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.0",
-        "@babel/helper-compilation-targets": "^7.25.2",
-        "@babel/helper-module-transforms": "^7.25.2",
-        "@babel/helpers": "^7.25.0",
-        "@babel/parser": "^7.25.0",
-        "@babel/template": "^7.25.0",
-        "@babel/traverse": "^7.25.2",
-        "@babel/types": "^7.25.2",
+        "@babel/code-frame": "^7.25.7",
+        "@babel/generator": "^7.25.7",
+        "@babel/helper-compilation-targets": "^7.25.7",
+        "@babel/helper-module-transforms": "^7.25.7",
+        "@babel/helpers": "^7.25.7",
+        "@babel/parser": "^7.25.8",
+        "@babel/template": "^7.25.7",
+        "@babel/traverse": "^7.25.7",
+        "@babel/types": "^7.25.8",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -97,9 +97,9 @@
       }
     },
     "node_modules/@babel/eslint-parser": {
-      "version": "7.25.1",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.1.tgz",
-      "integrity": "sha512-Y956ghgTT4j7rKesabkh5WeqgSFZVFwaPR0IWFm7KFHFmmJ4afbG49SmfW4S+GyRPx0Dy5jxEWA5t0rpxfElWg==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.8.tgz",
+      "integrity": "sha512-Po3VLMN7fJtv0nsOjBDSbO1J71UhzShE9MuOSkWEV9IZQXzhZklYtzKZ8ZD/Ij3a0JBv1AG3Ny2L3jvAHQVOGg==",
       "dependencies": {
         "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
         "eslint-visitor-keys": "^2.1.0",
@@ -130,50 +130,50 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.25.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.5.tgz",
-      "integrity": "sha512-abd43wyLfbWoxC6ahM8xTkqLpGB2iWBVyuKC9/srhFunCd1SDNrV1s72bBpK4hLj8KLzHBBcOblvLQZBNw9r3w==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.7.tgz",
+      "integrity": "sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==",
       "dependencies": {
-        "@babel/types": "^7.25.4",
+        "@babel/types": "^7.25.7",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
-        "jsesc": "^2.5.1"
+        "jsesc": "^3.0.2"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
-      "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.7.tgz",
+      "integrity": "sha512-4xwU8StnqnlIhhioZf1tqnVWeQ9pvH/ujS8hRfw/WOza+/a+1qv69BWNy+oY231maTCWgKWhfBU7kDpsds6zAA==",
       "dependencies": {
-        "@babel/types": "^7.24.7"
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.24.7.tgz",
-      "integrity": "sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.7.tgz",
+      "integrity": "sha512-12xfNeKNH7jubQNm7PAkzlLwEmCs1tfuX3UjIw6vP6QXi+leKh6+LyC/+Ed4EIQermwd58wsyh070yjDHFlNGg==",
       "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
+        "@babel/traverse": "^7.25.7",
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
-      "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.7.tgz",
+      "integrity": "sha512-DniTEax0sv6isaw6qSQSfV4gVRNtw2rte8HHM45t9ZR0xILaufBRNkpMifCRiAPyvL4ACD6v0gfCwCmtOQaV4A==",
       "dependencies": {
-        "@babel/compat-data": "^7.25.2",
-        "@babel/helper-validator-option": "^7.24.8",
-        "browserslist": "^4.23.1",
+        "@babel/compat-data": "^7.25.7",
+        "@babel/helper-validator-option": "^7.25.7",
+        "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
       },
@@ -190,16 +190,16 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.4.tgz",
-      "integrity": "sha512-ro/bFs3/84MDgDmMwbcHgDa8/E6J3QKNTk4xJJnVeFtGE+tL0K26E3pNxhYz2b67fJpt7Aphw5XcploKXuCvCQ==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.7",
-        "@babel/helper-member-expression-to-functions": "^7.24.8",
-        "@babel/helper-optimise-call-expression": "^7.24.7",
-        "@babel/helper-replace-supers": "^7.25.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
-        "@babel/traverse": "^7.25.4",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.7.tgz",
+      "integrity": "sha512-bD4WQhbkx80mAyj/WCm4ZHcF4rDxkoLFO6ph8/5/mQ3z4vAzltQXAmbc7GvVJx5H+lk5Mi5EmbTeox5nMGCsbw==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.7",
+        "@babel/helper-member-expression-to-functions": "^7.25.7",
+        "@babel/helper-optimise-call-expression": "^7.25.7",
+        "@babel/helper-replace-supers": "^7.25.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.7",
+        "@babel/traverse": "^7.25.7",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -218,12 +218,12 @@
       }
     },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.2.tgz",
-      "integrity": "sha512-+wqVGP+DFmqwFD3EH6TMTfUNeqDehV3E/dl+Sd54eaXqm17tEUNbEIn4sVivVowbvUpOtIGxdo3GoXyDH9N/9g==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.7.tgz",
+      "integrity": "sha512-byHhumTj/X47wJ6C6eLpK7wW/WBEcnUeb7D0FNc/jFQnQVw7DOso3Zz5u9x/zLrFVkHa89ZGDbkAa1D54NdrCQ==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.7",
-        "regexpu-core": "^5.3.1",
+        "@babel/helper-annotate-as-pure": "^7.25.7",
+        "regexpu-core": "^6.1.1",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -257,38 +257,38 @@
       }
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz",
-      "integrity": "sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.7.tgz",
+      "integrity": "sha512-O31Ssjd5K6lPbTX9AAYpSKrZmLeagt9uwschJd+Ixo6QiRyfpvgtVQp8qrDR9UNFjZ8+DO34ZkdrN+BnPXemeA==",
       "dependencies": {
-        "@babel/traverse": "^7.24.8",
-        "@babel/types": "^7.24.8"
+        "@babel/traverse": "^7.25.7",
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
-      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.7.tgz",
+      "integrity": "sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==",
       "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
+        "@babel/traverse": "^7.25.7",
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
-      "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.7.tgz",
+      "integrity": "sha512-k/6f8dKG3yDz/qCwSM+RKovjMix563SLxQFo0UhRNo239SP6n9u5/eLtKD6EAjwta2JHJ49CsD8pms2HdNiMMQ==",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.24.7",
-        "@babel/helper-simple-access": "^7.24.7",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "@babel/traverse": "^7.25.2"
+        "@babel/helper-module-imports": "^7.25.7",
+        "@babel/helper-simple-access": "^7.25.7",
+        "@babel/helper-validator-identifier": "^7.25.7",
+        "@babel/traverse": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -298,32 +298,32 @@
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz",
-      "integrity": "sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.7.tgz",
+      "integrity": "sha512-VAwcwuYhv/AT+Vfr28c9y6SHzTan1ryqrydSTFGjU0uDJHw3uZ+PduI8plCLkRsDnqK2DMEDmwrOQRsK/Ykjng==",
       "dependencies": {
-        "@babel/types": "^7.24.7"
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
-      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.7.tgz",
+      "integrity": "sha512-eaPZai0PiqCi09pPs3pAFfl/zYgGaE6IdXtYvmf0qlcDTd3WCtO7JWCcRd64e0EQrcYgiHibEZnOGsSY4QSgaw==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.0.tgz",
-      "integrity": "sha512-NhavI2eWEIz/H9dbrG0TuOicDhNexze43i5z7lEqwYm0WEZVTwnPpA0EafUTP7+6/W79HWIP2cTe3Z5NiSTVpw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.7.tgz",
+      "integrity": "sha512-kRGE89hLnPfcz6fTrlNU+uhgcwv0mBE4Gv3P9Ke9kLVJYpi4AMVVEElXvB5CabrPZW4nCM8P8UyyjrzCM0O2sw==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.7",
-        "@babel/helper-wrap-function": "^7.25.0",
-        "@babel/traverse": "^7.25.0"
+        "@babel/helper-annotate-as-pure": "^7.25.7",
+        "@babel/helper-wrap-function": "^7.25.7",
+        "@babel/traverse": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -333,13 +333,13 @@
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz",
-      "integrity": "sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.7.tgz",
+      "integrity": "sha512-iy8JhqlUW9PtZkd4pHM96v6BdJ66Ba9yWSE4z0W4TvSZwLBPkyDsiIU3ENe4SmrzRBs76F7rQXTy1lYC49n6Lw==",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.24.8",
-        "@babel/helper-optimise-call-expression": "^7.24.7",
-        "@babel/traverse": "^7.25.0"
+        "@babel/helper-member-expression-to-functions": "^7.25.7",
+        "@babel/helper-optimise-call-expression": "^7.25.7",
+        "@babel/traverse": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -349,84 +349,84 @@
       }
     },
     "node_modules/@babel/helper-simple-access": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
-      "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.25.7.tgz",
+      "integrity": "sha512-FPGAkJmyoChQeM+ruBGIDyrT2tKfZJO8NcxdC+CWNJi7N8/rZpSxK7yvBJ5O/nF1gfu5KzN7VKG3YVSLFfRSxQ==",
       "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
+        "@babel/traverse": "^7.25.7",
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz",
-      "integrity": "sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.7.tgz",
+      "integrity": "sha512-pPbNbchZBkPMD50K0p3JGcFMNLVUCuU/ABybm/PGNj4JiHrpmNyqqCphBk4i19xXtNV0JhldQJJtbSW5aUvbyA==",
       "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
+        "@babel/traverse": "^7.25.7",
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz",
+      "integrity": "sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
-      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz",
+      "integrity": "sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
-      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.7.tgz",
+      "integrity": "sha512-ytbPLsm+GjArDYXJ8Ydr1c/KJuutjF2besPNbIZnZ6MKUxi/uTA22t2ymmA4WFjZFpjiAMO0xuuJPqK2nvDVfQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-wrap-function": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.0.tgz",
-      "integrity": "sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.7.tgz",
+      "integrity": "sha512-MA0roW3JF2bD1ptAaJnvcabsVlNQShUaThyJbCDD4bCp8NEgiFvpoqRI2YS22hHlc2thjO/fTg2ShLMC3jygAg==",
       "dependencies": {
-        "@babel/template": "^7.25.0",
-        "@babel/traverse": "^7.25.0",
-        "@babel/types": "^7.25.0"
+        "@babel/template": "^7.25.7",
+        "@babel/traverse": "^7.25.7",
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.0.tgz",
-      "integrity": "sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.7.tgz",
+      "integrity": "sha512-Sv6pASx7Esm38KQpF/U/OXLwPPrdGHNKoeblRxgZRLXnAtnkEe4ptJPDtAZM7fBLadbc1Q07kQpSiGQ0Jg6tRA==",
       "dependencies": {
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.0"
+        "@babel/template": "^7.25.7",
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
-      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.25.7.tgz",
+      "integrity": "sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/helper-validator-identifier": "^7.25.7",
         "chalk": "^2.4.2",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.0.0"
@@ -500,11 +500,11 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
-      "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.8.tgz",
+      "integrity": "sha512-HcttkxzdPucv3nNFmfOOMfFf64KgdJVqm1KaCm25dPGMLElo9nsLvXeJECQg8UzPuBGLyTSA0ZzqCtDSzKTEoQ==",
       "dependencies": {
-        "@babel/types": "^7.25.4"
+        "@babel/types": "^7.25.8"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -514,12 +514,12 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
-      "version": "7.25.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.3.tgz",
-      "integrity": "sha512-wUrcsxZg6rqBXG05HG1FPYgsP6EvwF4WpBbxIpWIIYnH8wG0gzx3yZY3dtEHas4sTAOGkbTsc9EGPxwff8lRoA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.7.tgz",
+      "integrity": "sha512-UV9Lg53zyebzD1DwQoT9mzkEKa922LNUp5YkTJ6Uta0RbyXaQNUgcvSt7qIu1PpPzVb6rd10OVNTzkyBGeVmxQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/traverse": "^7.25.3"
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/traverse": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -529,11 +529,11 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.0.tgz",
-      "integrity": "sha512-Bm4bH2qsX880b/3ziJ8KD711LT7z4u8CFudmjqle65AZj/HNUFhEf90dqYv6O86buWvSBmeQDjv0Tn2aF/bIBA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.7.tgz",
+      "integrity": "sha512-GDDWeVLNxRIkQTnJn2pDOM1pkCgYdSqPeT1a9vh9yIqu2uzzgw1zcqEb+IJOhy+dTBMlNdThrDIksr2o09qrrQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -543,11 +543,11 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.0.tgz",
-      "integrity": "sha512-lXwdNZtTmeVOOFtwM/WDe7yg1PL8sYhRk/XH0FzbR2HDQ0xC+EnQ/JHeoMYSavtU115tnUk0q9CDyq8si+LMAA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.7.tgz",
+      "integrity": "sha512-wxyWg2RYaSUYgmd9MR0FyRGyeOMQE/Uzr1wzd/g5cf5bwi9A4v6HFdDm7y1MgDtod/fLOSTZY6jDgV0xU9d5bA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -557,13 +557,13 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.7.tgz",
-      "integrity": "sha512-+izXIbke1T33mY4MSNnrqhPXDz01WYhEf3yF5NbnUtkiNnm+XBZJl3kNfoK6NKmYlz/D07+l2GWVK/QfDkNCuQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.7.tgz",
+      "integrity": "sha512-Xwg6tZpLxc4iQjorYsyGMyfJE7nP5MV8t/Ka58BgiA7Jw0fRqQNcANlLfdJ/yvBt9z9LD2We+BEkT7vLqZRWng==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
-        "@babel/plugin-transform-optional-chaining": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.7",
+        "@babel/plugin-transform-optional-chaining": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -573,12 +573,12 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.0.tgz",
-      "integrity": "sha512-tggFrk1AIShG/RUQbEwt2Tr/E+ObkfwrPjR6BjbRvsx24+PSjK8zrq0GWPNCjo8qpRx4DuJzlcvWJqlm+0h3kw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.7.tgz",
+      "integrity": "sha512-UVATLMidXrnH+GMUIuxq55nejlj02HP7F5ETyBONzP6G87fPBogG4CH6kxrSrdIuAjdwNO9VzyaYsrZPscWUrw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/traverse": "^7.25.0"
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/traverse": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -645,34 +645,12 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-dynamic-import": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-export-namespace-from": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
-      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.3"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-syntax-import-assertions": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.6.tgz",
-      "integrity": "sha512-aABl0jHw9bZ2karQ/uUD6XP4u0SG22SJrOHFoL6XB1R7dTovOP4TzTlsxOYC5yQ1pdscVK2JTUnF6QL3ARoAiQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.7.tgz",
+      "integrity": "sha512-ZvZQRmME0zfJnDQnVBKYzHxXT7lYBB3Revz1GuS7oLXWMgqUPX4G+DDbT30ICClht9WKV34QVrZhSw6WdklwZQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -682,11 +660,11 @@
       }
     },
     "node_modules/@babel/plugin-syntax-import-attributes": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.7.tgz",
-      "integrity": "sha512-hbX+lKKeUMGihnK8nvKqmXBInriT3GVjzXKFriV3YC6APGxMbP8RZNFwy91+hocLXq90Mta+HshoB31802bb8A==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.7.tgz",
+      "integrity": "sha512-AqVo+dguCgmpi/3mYBdu9lkngOBlQ2w2vnNpa6gfiCxQZLzV4ZbhsXitJ2Yblkoe1VQwtHSaNmIaGll/26YWRw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -855,11 +833,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.7.tgz",
-      "integrity": "sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.7.tgz",
+      "integrity": "sha512-EJN2mKxDwfOUCPxMO6MUI58RN3ganiRAG/MS/S3HfB6QFNjroAMelQo/gybyYq97WerCBAZoyrAoW8Tzdq2jWg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -869,14 +847,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.4.tgz",
-      "integrity": "sha512-jz8cV2XDDTqjKPwVPJBIjORVEmSGYhdRa8e5k5+vN+uwcjSrSxUaebBRa4ko1jqNF2uxyg8G6XYk30Jv285xzg==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.8.tgz",
+      "integrity": "sha512-9ypqkozyzpG+HxlH4o4gdctalFGIjjdufzo7I2XPda0iBnZ6a+FO0rIEQcdSPXp02CkvGsII1exJhmROPQd5oA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/helper-remap-async-to-generator": "^7.25.0",
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/traverse": "^7.25.4"
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-remap-async-to-generator": "^7.25.7",
+        "@babel/traverse": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -886,13 +863,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.7.tgz",
-      "integrity": "sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.7.tgz",
+      "integrity": "sha512-ZUCjAavsh5CESCmi/xCpX1qcCaAglzs/7tmuvoFnJgA1dM7gQplsguljoTg+Ru8WENpX89cQyAtWoaE0I3X3Pg==",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/helper-remap-async-to-generator": "^7.24.7"
+        "@babel/helper-module-imports": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-remap-async-to-generator": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -902,11 +879,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.7.tgz",
-      "integrity": "sha512-yO7RAz6EsVQDaBH18IDJcMB1HnrUn2FJ/Jslc/WtPPWcjhpUJXU/rjbwmluzp7v/ZzWcEhTMXELnnsz8djWDwQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.7.tgz",
+      "integrity": "sha512-xHttvIM9fvqW+0a3tZlYcZYSBpSWzGBFIt/sYG3tcdSzBB8ZeVgz2gBP7Df+sM0N1850jrviYSSeUuc+135dmQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -916,11 +893,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.0.tgz",
-      "integrity": "sha512-yBQjYoOjXlFv9nlXb3f1casSHOZkWr29NX+zChVanLg5Nc157CrbEX9D7hxxtTpuFy7Q0YzmmWfJxzvps4kXrQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.7.tgz",
+      "integrity": "sha512-ZEPJSkVZaeTFG/m2PARwLZQ+OG0vFIhPlKHK/JdIMy8DbRJ/htz6LRrTFtdzxi9EHmcwbNPAKDnadpNSIW+Aow==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -930,12 +907,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-class-properties": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.4.tgz",
-      "integrity": "sha512-nZeZHyCWPfjkdU5pA/uHiTaDAFUEqkpzf1YoQT2NeSynCGYq9rxfyI3XpQbfx/a0hSnFH6TGlEXvae5Vi7GD8g==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.7.tgz",
+      "integrity": "sha512-mhyfEW4gufjIqYFo9krXHJ3ElbFLIze5IDp+wQTxoPd+mwFb1NxatNAwmv8Q8Iuxv7Zc+q8EkiMQwc9IhyGf4g==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.25.4",
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-create-class-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -945,13 +922,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-class-static-block": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.7.tgz",
-      "integrity": "sha512-HMXK3WbBPpZQufbMG4B46A90PkuuhN9vBCb5T8+VAHqvAqvcLi+2cKoukcpmUYkszLhScU3l1iudhrks3DggRQ==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.25.8.tgz",
+      "integrity": "sha512-e82gl3TCorath6YLf9xUwFehVvjvfqFhdOo4+0iVIVju+6XOi5XHkqB3P2AXnSwoeTX0HBoXq5gJFtvotJzFnQ==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+        "@babel/helper-create-class-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -961,15 +937,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.4.tgz",
-      "integrity": "sha512-oexUfaQle2pF/b6E0dwsxQtAol9TLSO88kQvym6HHBWFliV2lGdrPieX+WgMRLSJDVzdYywk7jXbLPuO2KLTLg==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.7",
-        "@babel/helper-compilation-targets": "^7.25.2",
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/helper-replace-supers": "^7.25.0",
-        "@babel/traverse": "^7.25.4",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.7.tgz",
+      "integrity": "sha512-9j9rnl+YCQY0IGoeipXvnk3niWicIB6kCsWRGLwX241qSXpbA4MKxtp/EdvFxsc4zI5vqfLxzOd0twIJ7I99zg==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.7",
+        "@babel/helper-compilation-targets": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-replace-supers": "^7.25.7",
+        "@babel/traverse": "^7.25.7",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -980,12 +956,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.7.tgz",
-      "integrity": "sha512-25cS7v+707Gu6Ds2oY6tCkUwsJ9YIDbggd9+cu9jzzDgiNq7hR/8dkzxWfKWnTic26vsI3EsCXNd4iEB6e8esQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.7.tgz",
+      "integrity": "sha512-QIv+imtM+EtNxg/XBKL3hiWjgdLjMOmZ+XzQwSgmBfKbfxUjBzGgVPklUuE55eq5/uVoh8gg3dqlrwR/jw3ZeA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/template": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/template": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -995,11 +971,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.8.tgz",
-      "integrity": "sha512-36e87mfY8TnRxc7yc6M9g9gOB7rKgSahqkIKwLpz4Ppk2+zC2Cy1is0uwtuSG6AE4zlTOUa+7JGz9jCJGLqQFQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.7.tgz",
+      "integrity": "sha512-xKcfLTlJYUczdaM1+epcdh1UGewJqr9zATgrNHcLBcV2QmfvPPEixo/sK/syql9cEmbr7ulu5HMFG5vbbt/sEA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1009,12 +985,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.7.tgz",
-      "integrity": "sha512-ZOA3W+1RRTSWvyqcMJDLqbchh7U4NRGqwRfFSVbOLS/ePIP4vHB5e8T8eXcuqyN1QkgKyj5wuW0lcS85v4CrSw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.7.tgz",
+      "integrity": "sha512-kXzXMMRzAtJdDEgQBLF4oaiT6ZCU3oWHgpARnTKDAqPkDJ+bs3NrZb310YYevR5QlRo3Kn7dzzIdHbZm1VzJdQ==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1024,11 +1000,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.7.tgz",
-      "integrity": "sha512-JdYfXyCRihAe46jUIliuL2/s0x0wObgwwiGxw/UbgJBr20gQBThrokO4nYKgWkD7uBaqM7+9x5TU7NkExZJyzw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.7.tgz",
+      "integrity": "sha512-by+v2CjoL3aMnWDOyCIg+yxU9KXSRa9tN6MbqggH5xvymmr9p4AMjYkNlQy4brMceBnUyHZ9G8RnpvT8wP7Cfg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1038,12 +1014,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.0.tgz",
-      "integrity": "sha512-YLpb4LlYSc3sCUa35un84poXoraOiQucUTTu8X1j18JV+gNa8E0nyUf/CjZ171IRGr4jEguF+vzJU66QZhn29g==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.7.tgz",
+      "integrity": "sha512-HvS6JF66xSS5rNKXLqkk7L9c/jZ/cdIVIcoPVrnl8IsVpLggTjXs8OWekbLHs/VtYDDh5WXnQyeE3PPUGm22MA==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.25.0",
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-create-regexp-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1053,12 +1029,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-dynamic-import": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.7.tgz",
-      "integrity": "sha512-sc3X26PhZQDb3JhORmakcbvkeInvxz+A8oda99lj7J60QRuPZvNAk9wQlTBS1ZynelDrDmTU4pw1tyc5d5ZMUg==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.8.tgz",
+      "integrity": "sha512-gznWY+mr4ZQL/EWPcbBQUP3BXS5FwZp8RUOw06BaRn8tQLzN4XLIxXejpHN9Qo8x8jjBmAAKp6FoS51AgkSA/A==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1068,12 +1043,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.7.tgz",
-      "integrity": "sha512-Rqe/vSc9OYgDajNIK35u7ot+KeCoetqQYFXM4Epf7M7ez3lWlOjrDjrwMei6caCVhfdw+mIKD4cgdGNy5JQotQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.7.tgz",
+      "integrity": "sha512-yjqtpstPfZ0h/y40fAXRv2snciYr0OAoMXY/0ClC7tm4C/nG5NJKmIItlaYlLbIVAWNfrYuy9dq1bE0SbX0PEg==",
       "dependencies": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1083,12 +1058,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-export-namespace-from": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.7.tgz",
-      "integrity": "sha512-v0K9uNYsPL3oXZ/7F9NNIbAj2jv1whUEtyA6aujhekLs56R++JDQuzRcP2/z4WX5Vg/c5lE9uWZA0/iUoFhLTA==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.8.tgz",
+      "integrity": "sha512-sPtYrduWINTQTW7FtOy99VCTWp4H23UX7vYcut7S4CIMEXU+54zKX9uCoGkLsWXteyaMXzVHgzWbLfQ1w4GZgw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1098,12 +1072,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.7.tgz",
-      "integrity": "sha512-wo9ogrDG1ITTTBsy46oGiN1dS9A7MROBTcYsfS8DtsImMkHk9JXJ3EWQM6X2SUw4x80uGPlwj0o00Uoc6nEE3g==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.7.tgz",
+      "integrity": "sha512-n/TaiBGJxYFWvpJDfsxSj9lEEE44BFM1EPGz4KEiTipTgkoFVVcCmzAL3qA7fdQU96dpo4gGf5HBx/KnDvqiHw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1113,13 +1087,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.25.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.1.tgz",
-      "integrity": "sha512-TVVJVdW9RKMNgJJlLtHsKDTydjZAbwIsn6ySBPQaEAUU5+gVvlJt/9nRmqVbsV/IBanRjzWoaAQKLoamWVOUuA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.7.tgz",
+      "integrity": "sha512-5MCTNcjCMxQ63Tdu9rxyN6cAWurqfrDZ76qvVPrGYdBxIj+EawuuxTu/+dgJlhK5eRz3v1gLwp6XwS8XaX2NiQ==",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.24.8",
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/traverse": "^7.25.1"
+        "@babel/helper-compilation-targets": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/traverse": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1129,12 +1103,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-json-strings": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.7.tgz",
-      "integrity": "sha512-2yFnBGDvRuxAaE/f0vfBKvtnvvqU8tGpMHqMNpTN2oWMKIR3NqFkjaAgGwawhqK/pIN2T3XdjGPdaG0vDhOBGw==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.8.tgz",
+      "integrity": "sha512-4OMNv7eHTmJ2YXs3tvxAfa/I43di+VcF+M4Wt66c88EAED1RoGaf1D64cL5FkRpNL+Vx9Hds84lksWvd/wMIdA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-json-strings": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1144,11 +1117,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-literals": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.2.tgz",
-      "integrity": "sha512-HQI+HcTbm9ur3Z2DkO+jgESMAMcYLuN/A7NRw9juzxAezN9AvqvUTnpKP/9kkYANz6u7dFlAyOu44ejuGySlfw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.7.tgz",
+      "integrity": "sha512-fwzkLrSu2fESR/cm4t6vqd7ebNIopz2QHGtjoU+dswQo/P6lwAG04Q98lliE3jkz/XqnbGFLnUcE0q0CVUf92w==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1158,12 +1131,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.7.tgz",
-      "integrity": "sha512-4D2tpwlQ1odXmTEIFWy9ELJcZHqrStlzK/dAOWYyxX3zT0iXQB6banjgeOJQXzEc4S0E0a5A+hahxPaEFYftsw==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.8.tgz",
+      "integrity": "sha512-f5W0AhSbbI+yY6VakT04jmxdxz+WsID0neG7+kQZbCOjuyJNdL5Nn4WIBm4hRpKnUcO9lP0eipUhFN12JpoH8g==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1173,11 +1145,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.7.tgz",
-      "integrity": "sha512-T/hRC1uqrzXMKLQ6UCwMT85S3EvqaBXDGf0FaMf4446Qx9vKwlghvee0+uuZcDUCZU5RuNi4781UQ7R308zzBw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.7.tgz",
+      "integrity": "sha512-Std3kXwpXfRV0QtQy5JJcRpkqP8/wG4XL7hSKZmGlxPlDqmpXtEPRmhF7ztnlTCtUN3eXRUJp+sBEZjaIBVYaw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1187,12 +1159,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.7.tgz",
-      "integrity": "sha512-9+pB1qxV3vs/8Hdmz/CulFB8w2tuu6EB94JZFsjdqxQokwGa9Unap7Bo2gGBGIvPmDIVvQrom7r5m/TCDMURhg==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.7.tgz",
+      "integrity": "sha512-CgselSGCGzjQvKzghCvDTxKHP3iooenLpJDO842ehn5D2G5fJB222ptnDwQho0WjEvg7zyoxb9P+wiYxiJX5yA==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-module-transforms": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1202,13 +1174,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.8.tgz",
-      "integrity": "sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.7.tgz",
+      "integrity": "sha512-L9Gcahi0kKFYXvweO6n0wc3ZG1ChpSFdgG+eV1WYZ3/dGbJK7vvk91FgGgak8YwRgrCuihF8tE/Xg07EkL5COg==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.24.8",
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/helper-simple-access": "^7.24.7"
+        "@babel/helper-module-transforms": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-simple-access": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1218,14 +1190,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.0.tgz",
-      "integrity": "sha512-YPJfjQPDXxyQWg/0+jHKj1llnY5f/R6a0p/vP4lPymxLu7Lvl4k2WMitqi08yxwQcCVUUdG9LCUj4TNEgAp3Jw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.7.tgz",
+      "integrity": "sha512-t9jZIvBmOXJsiuyOwhrIGs8dVcD6jDyg2icw1VL4A/g+FnWyJKwUfSSU2nwJuMV2Zqui856El9u+ElB+j9fV1g==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.25.0",
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "@babel/traverse": "^7.25.0"
+        "@babel/helper-module-transforms": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-validator-identifier": "^7.25.7",
+        "@babel/traverse": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1235,12 +1207,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-umd": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.7.tgz",
-      "integrity": "sha512-3aytQvqJ/h9z4g8AsKPLvD4Zqi2qT+L3j7XoFFu1XBlZWEl2/1kWnhmAbxpLgPrHSY0M6UA02jyTiwUVtiKR6A==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.7.tgz",
+      "integrity": "sha512-p88Jg6QqsaPh+EB7I9GJrIqi1Zt4ZBHUQtjw3z1bzEXcLh6GfPqzZJ6G+G1HBGKUNukT58MnKG7EN7zXQBCODw==",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-module-transforms": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1250,12 +1222,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.24.7.tgz",
-      "integrity": "sha512-/jr7h/EWeJtk1U/uz2jlsCioHkZk1JJZVcc8oQsJ1dUlaJD83f4/6Zeh2aHt9BIFokHIsSeDfhUmju0+1GPd6g==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.7.tgz",
+      "integrity": "sha512-BtAT9LzCISKG3Dsdw5uso4oV1+v2NlVXIIomKJgQybotJY3OwCwJmkongjHgwGKoZXd0qG5UZ12JUlDQ07W6Ow==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1265,11 +1237,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.7.tgz",
-      "integrity": "sha512-RNKwfRIXg4Ls/8mMTza5oPF5RkOW8Wy/WgMAp1/F1yZ8mMbtwXW+HDoJiOsagWrAhI5f57Vncrmr9XeT4CVapA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.7.tgz",
+      "integrity": "sha512-CfCS2jDsbcZaVYxRFo2qtavW8SpdzmBXC2LOI4oO0rP+JSRDxxF3inF4GcPsLgfb5FjkhXG5/yR/lxuRs2pySA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1279,12 +1251,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz",
-      "integrity": "sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.8.tgz",
+      "integrity": "sha512-Z7WJJWdQc8yCWgAmjI3hyC+5PXIubH9yRKzkl9ZEG647O9szl9zvmKLzpbItlijBnVhTUf1cpyWBsZ3+2wjWPQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1294,12 +1265,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-numeric-separator": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.7.tgz",
-      "integrity": "sha512-e6q1TiVUzvH9KRvicuxdBTUj4AdKSRwzIyFFnfnezpCfP2/7Qmbb8qbU2j7GODbl4JMkblitCQjKYUaX/qkkwA==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.8.tgz",
+      "integrity": "sha512-rm9a5iEFPS4iMIy+/A/PiS0QN0UyjPIeVvbU5EMZFKJZHt8vQnasbpo3T3EFcxzCeYO0BHfc4RqooCZc51J86Q==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1309,14 +1279,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.7.tgz",
-      "integrity": "sha512-4QrHAr0aXQCEFni2q4DqKLD31n2DL+RxcwnNjDFkSG0eNQ/xCavnRkfCUjsyqGC2OviNJvZOF/mQqZBw7i2C5Q==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.8.tgz",
+      "integrity": "sha512-LkUu0O2hnUKHKE7/zYOIjByMa4VRaV2CD/cdGz0AxU9we+VA3kDDggKEzI0Oz1IroG+6gUP6UmWEHBMWZU316g==",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.24.7"
+        "@babel/helper-compilation-targets": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/plugin-transform-parameters": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1326,12 +1295,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.7.tgz",
-      "integrity": "sha512-A/vVLwN6lBrMFmMDmPPz0jnE6ZGx7Jq7d6sT/Ev4H65RER6pZ+kczlf1DthF5N0qaPHBsI7UXiE8Zy66nmAovg==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.7.tgz",
+      "integrity": "sha512-pWT6UXCEW3u1t2tcAGtE15ornCBvopHj9Bps9D2DsH15APgNVOTwwczGckX+WkAvBmuoYKRCFa4DK+jM8vh5AA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/helper-replace-supers": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-replace-supers": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1341,12 +1310,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.7.tgz",
-      "integrity": "sha512-uLEndKqP5BfBbC/5jTwPxLh9kqPWWgzN/f8w6UwAIirAEqiIVJWWY312X72Eub09g5KF9+Zn7+hT7sDxmhRuKA==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.8.tgz",
+      "integrity": "sha512-EbQYweoMAHOn7iJ9GgZo14ghhb9tTjgOc88xFgYngifx7Z9u580cENCV159M4xDh3q/irbhSjZVpuhpC2gKBbg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1356,13 +1324,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-optional-chaining": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.8.tgz",
-      "integrity": "sha512-5cTOLSMs9eypEy8JUVvIKOu6NgvbJMnpG62VpIHrTmROdQ+L5mDAaI40g25k5vXti55JWNX5jCkq3HZxXBQANw==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.8.tgz",
+      "integrity": "sha512-q05Bk7gXOxpTHoQ8RSzGSh/LHVB9JEIkKnk3myAWwZHnYiTGYtbdrYkIsS8Xyh4ltKf7GNUSgzs/6P2bJtBAQg==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1372,11 +1339,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.7.tgz",
-      "integrity": "sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.7.tgz",
+      "integrity": "sha512-FYiTvku63me9+1Nz7TOx4YMtW3tWXzfANZtrzHhUZrz4d47EEtMQhzFoZWESfXuAMMT5mwzD4+y1N8ONAX6lMQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1386,12 +1353,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-private-methods": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.4.tgz",
-      "integrity": "sha512-ao8BG7E2b/URaUQGqN3Tlsg+M3KlHY6rJ1O1gXAEUnZoyNQnvKyH87Kfg+FoxSeyWUB8ISZZsC91C44ZuBFytw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.7.tgz",
+      "integrity": "sha512-KY0hh2FluNxMLwOCHbxVOKfdB5sjWG4M183885FmaqWWiGMhRZq4DQRKH6mHdEucbJnyDyYiZNwNG424RymJjA==",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.25.4",
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-create-class-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1401,14 +1368,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-private-property-in-object": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.7.tgz",
-      "integrity": "sha512-9z76mxwnwFxMyxZWEgdgECQglF2Q7cFLm0kMf8pGwt+GSJsY0cONKj/UuO4bOH0w/uAel3ekS4ra5CEAyJRmDA==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.8.tgz",
+      "integrity": "sha512-8Uh966svuB4V8RHHg0QJOB32QK287NBksJOByoKmHMp1TAobNniNalIkI2i5IPj5+S9NYCG4VIjbEuiSN8r+ow==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.7",
-        "@babel/helper-create-class-features-plugin": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+        "@babel/helper-annotate-as-pure": "^7.25.7",
+        "@babel/helper-create-class-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1418,11 +1384,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.7.tgz",
-      "integrity": "sha512-EMi4MLQSHfd2nrCqQEWxFdha2gBCqU4ZcCng4WBGZ5CJL4bBRW0ptdqqDdeirGZcpALazVVNJqRmsO8/+oNCBA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.7.tgz",
+      "integrity": "sha512-lQEeetGKfFi0wHbt8ClQrUSUMfEeI3MMm74Z73T9/kuz990yYVtfofjf3NuA42Jy3auFOpbjDyCSiIkTs1VIYw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1432,11 +1398,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz",
-      "integrity": "sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.7.tgz",
+      "integrity": "sha512-mgDoQCRjrY3XK95UuV60tZlFCQGXEtMg8H+IsW72ldw1ih1jZhzYXbJvghmAEpg5UVhhnCeia1CkGttUvCkiMQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.25.7",
         "regenerator-transform": "^0.15.2"
       },
       "engines": {
@@ -1447,11 +1413,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.7.tgz",
-      "integrity": "sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.7.tgz",
+      "integrity": "sha512-3OfyfRRqiGeOvIWSagcwUTVk2hXBsr/ww7bLn6TRTuXnexA+Udov2icFOxFX9abaj4l96ooYkcNN1qi2Zvqwng==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1461,11 +1427,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.7.tgz",
-      "integrity": "sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.7.tgz",
+      "integrity": "sha512-uBbxNwimHi5Bv3hUccmOFlUy3ATO6WagTApenHz9KzoIdn0XeACdB12ZJ4cjhuB2WSi80Ez2FWzJnarccriJeA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1475,12 +1441,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.7.tgz",
-      "integrity": "sha512-x96oO0I09dgMDxJaANcRyD4ellXFLLiWhuwDxKZX5g2rWP1bTPkBSwCYv96VDXVT1bD9aPj8tppr5ITIh8hBng==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.7.tgz",
+      "integrity": "sha512-Mm6aeymI0PBh44xNIv/qvo8nmbkpZze1KvR8MkEqbIREDxoiWTi18Zr2jryfRMwDfVZF9foKh060fWgni44luw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1490,11 +1456,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-sticky-regex": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.7.tgz",
-      "integrity": "sha512-kHPSIJc9v24zEml5geKg9Mjx5ULpfncj0wRpYtxbvKyTtHCYDkVE3aHQ03FrpEo4gEe2vrJJS1Y9CJTaThA52g==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.7.tgz",
+      "integrity": "sha512-ZFAeNkpGuLnAQ/NCsXJ6xik7Id+tHuS+NT+ue/2+rn/31zcdnupCdmunOizEaP0JsUmTFSTOPoQY7PkK2pttXw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1504,11 +1470,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-template-literals": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz",
-      "integrity": "sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.7.tgz",
+      "integrity": "sha512-SI274k0nUsFFmyQupiO7+wKATAmMFf8iFgq2O+vVFXZ0SV9lNfT1NGzBEhjquFmD8I9sqHLguH+gZVN3vww2AA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1518,11 +1484,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.8.tgz",
-      "integrity": "sha512-adNTUpDCVnmAE58VEqKlAA6ZBlNkMnWD0ZcW76lyNFN3MJniyGFZfNwERVk8Ap56MCnXztmDr19T4mPTztcuaw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.7.tgz",
+      "integrity": "sha512-OmWmQtTHnO8RSUbL0NTdtpbZHeNTnm68Gj5pA4Y2blFNh+V4iZR68V1qL9cI37J21ZN7AaCnkfdHtLExQPf2uA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1532,11 +1498,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.7.tgz",
-      "integrity": "sha512-U3ap1gm5+4edc2Q/P+9VrBNhGkfnf+8ZqppY71Bo/pzZmXhhLdqgaUl6cuB07O1+AQJtCLfaOmswiNbSQ9ivhw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.7.tgz",
+      "integrity": "sha512-BN87D7KpbdiABA+t3HbVqHzKWUDN3dymLaTnPFAMyc8lV+KN3+YzNhVRNdinaCPA4AUqx7ubXbQ9shRjYBl3SQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1546,12 +1512,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-property-regex": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.7.tgz",
-      "integrity": "sha512-uH2O4OV5M9FZYQrwc7NdVmMxQJOCCzFeYudlZSzUAHRFeOujQefa92E74TQDVskNHCzOXoigEuoyzHDhaEaK5w==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.7.tgz",
+      "integrity": "sha512-IWfR89zcEPQGB/iB408uGtSPlQd3Jpq11Im86vUgcmSTcoWAiQMCTOa2K2yNNqFJEBVICKhayctee65Ka8OB0w==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1561,12 +1527,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-regex": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.7.tgz",
-      "integrity": "sha512-hlQ96MBZSAXUq7ltkjtu3FJCCSMx/j629ns3hA3pXnBXjanNP0LHi+JpPeA81zaWgVK1VGH95Xuy7u0RyQ8kMg==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.7.tgz",
+      "integrity": "sha512-8JKfg/hiuA3qXnlLx8qtv5HWRbgyFx2hMMtpDDuU2rTckpKkGu4ycK5yYHwuEa16/quXfoxHBIApEsNyMWnt0g==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
-        "@babel/helper-plugin-utils": "^7.24.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1576,12 +1542,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-sets-regex": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.4.tgz",
-      "integrity": "sha512-qesBxiWkgN1Q+31xUE9RcMk79eOXXDCv6tfyGMRSs4RGlioSg2WVyQAm07k726cSE56pa+Kb0y9epX2qaXzTvA==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.7.tgz",
+      "integrity": "sha512-YRW8o9vzImwmh4Q3Rffd09bH5/hvY0pxg+1H1i0f7APoUeg12G7+HhLj9ZFNIrYkgBXhIijPJ+IXypN0hLTIbw==",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.25.2",
-        "@babel/helper-plugin-utils": "^7.24.8"
+        "@babel/helper-create-regexp-features-plugin": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1591,92 +1557,77 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.25.4.tgz",
-      "integrity": "sha512-W9Gyo+KmcxjGahtt3t9fb14vFRWvPpu5pT6GBlovAK6BTBcxgjfVMSQCfJl4oi35ODrxP6xx2Wr8LNST57Mraw==",
-      "dependencies": {
-        "@babel/compat-data": "^7.25.4",
-        "@babel/helper-compilation-targets": "^7.25.2",
-        "@babel/helper-plugin-utils": "^7.24.8",
-        "@babel/helper-validator-option": "^7.24.8",
-        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.25.3",
-        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.25.0",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.25.0",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.24.7",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.25.0",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.25.8.tgz",
+      "integrity": "sha512-58T2yulDHMN8YMUxiLq5YmWUnlDCyY1FsHM+v12VMx+1/FlrUj5tY50iDCpofFQEM8fMYOaY9YRvym2jcjn1Dg==",
+      "dependencies": {
+        "@babel/compat-data": "^7.25.8",
+        "@babel/helper-compilation-targets": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-validator-option": "^7.25.7",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.25.7",
+        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.25.7",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.25.7",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.25.7",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.25.7",
         "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-        "@babel/plugin-syntax-import-assertions": "^7.24.7",
-        "@babel/plugin-syntax-import-attributes": "^7.24.7",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-syntax-import-assertions": "^7.25.7",
+        "@babel/plugin-syntax-import-attributes": "^7.25.7",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
-        "@babel/plugin-transform-arrow-functions": "^7.24.7",
-        "@babel/plugin-transform-async-generator-functions": "^7.25.4",
-        "@babel/plugin-transform-async-to-generator": "^7.24.7",
-        "@babel/plugin-transform-block-scoped-functions": "^7.24.7",
-        "@babel/plugin-transform-block-scoping": "^7.25.0",
-        "@babel/plugin-transform-class-properties": "^7.25.4",
-        "@babel/plugin-transform-class-static-block": "^7.24.7",
-        "@babel/plugin-transform-classes": "^7.25.4",
-        "@babel/plugin-transform-computed-properties": "^7.24.7",
-        "@babel/plugin-transform-destructuring": "^7.24.8",
-        "@babel/plugin-transform-dotall-regex": "^7.24.7",
-        "@babel/plugin-transform-duplicate-keys": "^7.24.7",
-        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.25.0",
-        "@babel/plugin-transform-dynamic-import": "^7.24.7",
-        "@babel/plugin-transform-exponentiation-operator": "^7.24.7",
-        "@babel/plugin-transform-export-namespace-from": "^7.24.7",
-        "@babel/plugin-transform-for-of": "^7.24.7",
-        "@babel/plugin-transform-function-name": "^7.25.1",
-        "@babel/plugin-transform-json-strings": "^7.24.7",
-        "@babel/plugin-transform-literals": "^7.25.2",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
-        "@babel/plugin-transform-member-expression-literals": "^7.24.7",
-        "@babel/plugin-transform-modules-amd": "^7.24.7",
-        "@babel/plugin-transform-modules-commonjs": "^7.24.8",
-        "@babel/plugin-transform-modules-systemjs": "^7.25.0",
-        "@babel/plugin-transform-modules-umd": "^7.24.7",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
-        "@babel/plugin-transform-new-target": "^7.24.7",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
-        "@babel/plugin-transform-numeric-separator": "^7.24.7",
-        "@babel/plugin-transform-object-rest-spread": "^7.24.7",
-        "@babel/plugin-transform-object-super": "^7.24.7",
-        "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
-        "@babel/plugin-transform-optional-chaining": "^7.24.8",
-        "@babel/plugin-transform-parameters": "^7.24.7",
-        "@babel/plugin-transform-private-methods": "^7.25.4",
-        "@babel/plugin-transform-private-property-in-object": "^7.24.7",
-        "@babel/plugin-transform-property-literals": "^7.24.7",
-        "@babel/plugin-transform-regenerator": "^7.24.7",
-        "@babel/plugin-transform-reserved-words": "^7.24.7",
-        "@babel/plugin-transform-shorthand-properties": "^7.24.7",
-        "@babel/plugin-transform-spread": "^7.24.7",
-        "@babel/plugin-transform-sticky-regex": "^7.24.7",
-        "@babel/plugin-transform-template-literals": "^7.24.7",
-        "@babel/plugin-transform-typeof-symbol": "^7.24.8",
-        "@babel/plugin-transform-unicode-escapes": "^7.24.7",
-        "@babel/plugin-transform-unicode-property-regex": "^7.24.7",
-        "@babel/plugin-transform-unicode-regex": "^7.24.7",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.25.4",
+        "@babel/plugin-transform-arrow-functions": "^7.25.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.25.8",
+        "@babel/plugin-transform-async-to-generator": "^7.25.7",
+        "@babel/plugin-transform-block-scoped-functions": "^7.25.7",
+        "@babel/plugin-transform-block-scoping": "^7.25.7",
+        "@babel/plugin-transform-class-properties": "^7.25.7",
+        "@babel/plugin-transform-class-static-block": "^7.25.8",
+        "@babel/plugin-transform-classes": "^7.25.7",
+        "@babel/plugin-transform-computed-properties": "^7.25.7",
+        "@babel/plugin-transform-destructuring": "^7.25.7",
+        "@babel/plugin-transform-dotall-regex": "^7.25.7",
+        "@babel/plugin-transform-duplicate-keys": "^7.25.7",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.25.7",
+        "@babel/plugin-transform-dynamic-import": "^7.25.8",
+        "@babel/plugin-transform-exponentiation-operator": "^7.25.7",
+        "@babel/plugin-transform-export-namespace-from": "^7.25.8",
+        "@babel/plugin-transform-for-of": "^7.25.7",
+        "@babel/plugin-transform-function-name": "^7.25.7",
+        "@babel/plugin-transform-json-strings": "^7.25.8",
+        "@babel/plugin-transform-literals": "^7.25.7",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.25.8",
+        "@babel/plugin-transform-member-expression-literals": "^7.25.7",
+        "@babel/plugin-transform-modules-amd": "^7.25.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.25.7",
+        "@babel/plugin-transform-modules-systemjs": "^7.25.7",
+        "@babel/plugin-transform-modules-umd": "^7.25.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.25.7",
+        "@babel/plugin-transform-new-target": "^7.25.7",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.25.8",
+        "@babel/plugin-transform-numeric-separator": "^7.25.8",
+        "@babel/plugin-transform-object-rest-spread": "^7.25.8",
+        "@babel/plugin-transform-object-super": "^7.25.7",
+        "@babel/plugin-transform-optional-catch-binding": "^7.25.8",
+        "@babel/plugin-transform-optional-chaining": "^7.25.8",
+        "@babel/plugin-transform-parameters": "^7.25.7",
+        "@babel/plugin-transform-private-methods": "^7.25.7",
+        "@babel/plugin-transform-private-property-in-object": "^7.25.8",
+        "@babel/plugin-transform-property-literals": "^7.25.7",
+        "@babel/plugin-transform-regenerator": "^7.25.7",
+        "@babel/plugin-transform-reserved-words": "^7.25.7",
+        "@babel/plugin-transform-shorthand-properties": "^7.25.7",
+        "@babel/plugin-transform-spread": "^7.25.7",
+        "@babel/plugin-transform-sticky-regex": "^7.25.7",
+        "@babel/plugin-transform-template-literals": "^7.25.7",
+        "@babel/plugin-transform-typeof-symbol": "^7.25.7",
+        "@babel/plugin-transform-unicode-escapes": "^7.25.7",
+        "@babel/plugin-transform-unicode-property-regex": "^7.25.7",
+        "@babel/plugin-transform-unicode-regex": "^7.25.7",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.25.7",
         "@babel/preset-modules": "0.1.6-no-external-plugins",
         "babel-plugin-polyfill-corejs2": "^0.4.10",
         "babel-plugin-polyfill-corejs3": "^0.10.6",
         "babel-plugin-polyfill-regenerator": "^0.6.1",
-        "core-js-compat": "^3.37.1",
+        "core-js-compat": "^3.38.1",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -1707,11 +1658,6 @@
         "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@babel/regjsgen": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
-      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
-    },
     "node_modules/@babel/runtime": {
       "version": "7.25.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.4.tgz",
@@ -1736,28 +1682,28 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
-      "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.7.tgz",
+      "integrity": "sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==",
       "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/parser": "^7.25.0",
-        "@babel/types": "^7.25.0"
+        "@babel/code-frame": "^7.25.7",
+        "@babel/parser": "^7.25.7",
+        "@babel/types": "^7.25.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz",
-      "integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==",
-      "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.4",
-        "@babel/parser": "^7.25.4",
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.4",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.7.tgz",
+      "integrity": "sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.7",
+        "@babel/generator": "^7.25.7",
+        "@babel/parser": "^7.25.7",
+        "@babel/template": "^7.25.7",
+        "@babel/types": "^7.25.7",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -1766,12 +1712,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
-      "integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.8.tgz",
+      "integrity": "sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/helper-string-parser": "^7.25.7",
+        "@babel/helper-validator-identifier": "^7.25.7",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -1951,9 +1897,9 @@
       }
     },
     "node_modules/@bundled-es-modules/memfs/node_modules/memfs": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.12.0.tgz",
-      "integrity": "sha512-74wDsex5tQDSClVkeK1vtxqYCAgCoXxx+K4NSHzgU/muYVYByFqa+0RnrPO9NM6naWm1+G9JmZ0p6QHhXmeYfA==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.14.0.tgz",
+      "integrity": "sha512-JUeY0F/fQZgIod31Ja1eJgiSxLn7BfQlCnqhwXFBzFHEw63OdLK7VJUJ7bnzNsWgCyoUP5tEp1VRY8rDaYzqOA==",
       "dependencies": {
         "@jsonjoy.com/json-pack": "^1.0.3",
         "@jsonjoy.com/util": "^1.3.0",
@@ -1979,17 +1925,17 @@
       }
     },
     "node_modules/@commitlint/cli": {
-      "version": "19.4.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-19.4.1.tgz",
-      "integrity": "sha512-EerFVII3ZcnhXsDT9VePyIdCJoh3jEzygN1L37MjQXgPfGS6fJTWL/KHClVMod1d8w94lFC3l4Vh/y5ysVAz2A==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-19.5.0.tgz",
+      "integrity": "sha512-gaGqSliGwB86MDmAAKAtV9SV1SHdmN8pnGq4EJU4+hLisQ7IFfx4jvU4s+pk6tl0+9bv6yT+CaZkufOinkSJIQ==",
       "dev": true,
       "dependencies": {
-        "@commitlint/format": "^19.3.0",
-        "@commitlint/lint": "^19.4.1",
-        "@commitlint/load": "^19.4.0",
-        "@commitlint/read": "^19.4.0",
-        "@commitlint/types": "^19.0.3",
-        "execa": "^8.0.1",
+        "@commitlint/format": "^19.5.0",
+        "@commitlint/lint": "^19.5.0",
+        "@commitlint/load": "^19.5.0",
+        "@commitlint/read": "^19.5.0",
+        "@commitlint/types": "^19.5.0",
+        "tinyexec": "^0.3.0",
         "yargs": "^17.0.0"
       },
       "bin": {
@@ -2000,12 +1946,12 @@
       }
     },
     "node_modules/@commitlint/config-conventional": {
-      "version": "19.4.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-19.4.1.tgz",
-      "integrity": "sha512-D5S5T7ilI5roybWGc8X35OBlRXLAwuTseH1ro0XgqkOWrhZU8yOwBOslrNmSDlTXhXLq8cnfhQyC42qaUCzlXA==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-19.5.0.tgz",
+      "integrity": "sha512-OBhdtJyHNPryZKg0fFpZNOBM1ZDbntMvqMuSmpfyP86XSfwzGw4CaoYRG4RutUPg0BTK07VMRIkNJT6wi2zthg==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^19.0.3",
+        "@commitlint/types": "^19.5.0",
         "conventional-changelog-conventionalcommits": "^7.0.2"
       },
       "engines": {
@@ -2013,12 +1959,12 @@
       }
     },
     "node_modules/@commitlint/config-validator": {
-      "version": "19.0.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-19.0.3.tgz",
-      "integrity": "sha512-2D3r4PKjoo59zBc2auodrSCaUnCSALCx54yveOFwwP/i2kfEAQrygwOleFWswLqK0UL/F9r07MFi5ev2ohyM4Q==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-19.5.0.tgz",
+      "integrity": "sha512-CHtj92H5rdhKt17RmgALhfQt95VayrUo2tSqY9g2w+laAXyk7K/Ef6uPm9tn5qSIwSmrLjKaXK9eiNuxmQrDBw==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^19.0.3",
+        "@commitlint/types": "^19.5.0",
         "ajv": "^8.11.0"
       },
       "engines": {
@@ -2026,12 +1972,12 @@
       }
     },
     "node_modules/@commitlint/ensure": {
-      "version": "19.0.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-19.0.3.tgz",
-      "integrity": "sha512-SZEpa/VvBLoT+EFZVb91YWbmaZ/9rPH3ESrINOl0HD2kMYsjvl0tF7nMHh0EpTcv4+gTtZBAe1y/SS6/OhfZzQ==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-19.5.0.tgz",
+      "integrity": "sha512-Kv0pYZeMrdg48bHFEU5KKcccRfKmISSm9MvgIgkpI6m+ohFTB55qZlBW6eYqh/XDfRuIO0x4zSmvBjmOwWTwkg==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^19.0.3",
+        "@commitlint/types": "^19.5.0",
         "lodash.camelcase": "^4.3.0",
         "lodash.kebabcase": "^4.1.1",
         "lodash.snakecase": "^4.1.1",
@@ -2043,21 +1989,21 @@
       }
     },
     "node_modules/@commitlint/execute-rule": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-19.0.0.tgz",
-      "integrity": "sha512-mtsdpY1qyWgAO/iOK0L6gSGeR7GFcdW7tIjcNFxcWkfLDF5qVbPHKuGATFqRMsxcO8OUKNj0+3WOHB7EHm4Jdw==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-19.5.0.tgz",
+      "integrity": "sha512-aqyGgytXhl2ejlk+/rfgtwpPexYyri4t8/n4ku6rRJoRhGZpLFMqrZ+YaubeGysCP6oz4mMA34YSTaSOKEeNrg==",
       "dev": true,
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/format": {
-      "version": "19.3.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/format/-/format-19.3.0.tgz",
-      "integrity": "sha512-luguk5/aF68HiF4H23ACAfk8qS8AHxl4LLN5oxPc24H+2+JRPsNr1OS3Gaea0CrH7PKhArBMKBz5RX9sA5NtTg==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/format/-/format-19.5.0.tgz",
+      "integrity": "sha512-yNy088miE52stCI3dhG/vvxFo9e4jFkU1Mj3xECfzp/bIS/JUay4491huAlVcffOoMK1cd296q0W92NlER6r3A==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^19.0.3",
+        "@commitlint/types": "^19.5.0",
         "chalk": "^5.3.0"
       },
       "engines": {
@@ -2065,12 +2011,12 @@
       }
     },
     "node_modules/@commitlint/is-ignored": {
-      "version": "19.2.2",
-      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-19.2.2.tgz",
-      "integrity": "sha512-eNX54oXMVxncORywF4ZPFtJoBm3Tvp111tg1xf4zWXGfhBPKpfKG6R+G3G4v5CPlRROXpAOpQ3HMhA9n1Tck1g==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-19.5.0.tgz",
+      "integrity": "sha512-0XQ7Llsf9iL/ANtwyZ6G0NGp5Y3EQ8eDQSxv/SRcfJ0awlBY4tHFAvwWbw66FVUaWICH7iE5en+FD9TQsokZ5w==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^19.0.3",
+        "@commitlint/types": "^19.5.0",
         "semver": "^7.6.0"
       },
       "engines": {
@@ -2078,30 +2024,30 @@
       }
     },
     "node_modules/@commitlint/lint": {
-      "version": "19.4.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-19.4.1.tgz",
-      "integrity": "sha512-Ws4YVAZ0jACTv6VThumITC1I5AG0UyXMGua3qcf55JmXIXm/ejfaVKykrqx7RyZOACKVAs8uDRIsEsi87JZ3+Q==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-19.5.0.tgz",
+      "integrity": "sha512-cAAQwJcRtiBxQWO0eprrAbOurtJz8U6MgYqLz+p9kLElirzSCc0vGMcyCaA1O7AqBuxo11l1XsY3FhOFowLAAg==",
       "dev": true,
       "dependencies": {
-        "@commitlint/is-ignored": "^19.2.2",
-        "@commitlint/parse": "^19.0.3",
-        "@commitlint/rules": "^19.4.1",
-        "@commitlint/types": "^19.0.3"
+        "@commitlint/is-ignored": "^19.5.0",
+        "@commitlint/parse": "^19.5.0",
+        "@commitlint/rules": "^19.5.0",
+        "@commitlint/types": "^19.5.0"
       },
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/load": {
-      "version": "19.4.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-19.4.0.tgz",
-      "integrity": "sha512-I4lCWaEZYQJ1y+Y+gdvbGAx9pYPavqZAZ3/7/8BpWh+QjscAn8AjsUpLV2PycBsEx7gupq5gM4BViV9xwTIJuw==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-19.5.0.tgz",
+      "integrity": "sha512-INOUhkL/qaKqwcTUvCE8iIUf5XHsEPCLY9looJ/ipzi7jtGhgmtH7OOFiNvwYgH7mA8osUWOUDV8t4E2HAi4xA==",
       "dev": true,
       "dependencies": {
-        "@commitlint/config-validator": "^19.0.3",
-        "@commitlint/execute-rule": "^19.0.0",
-        "@commitlint/resolve-extends": "^19.1.0",
-        "@commitlint/types": "^19.0.3",
+        "@commitlint/config-validator": "^19.5.0",
+        "@commitlint/execute-rule": "^19.5.0",
+        "@commitlint/resolve-extends": "^19.5.0",
+        "@commitlint/types": "^19.5.0",
         "chalk": "^5.3.0",
         "cosmiconfig": "^9.0.0",
         "cosmiconfig-typescript-loader": "^5.0.0",
@@ -2114,21 +2060,21 @@
       }
     },
     "node_modules/@commitlint/message": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-19.0.0.tgz",
-      "integrity": "sha512-c9czf6lU+9oF9gVVa2lmKaOARJvt4soRsVmbR7Njwp9FpbBgste5i7l/2l5o8MmbwGh4yE1snfnsy2qyA2r/Fw==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-19.5.0.tgz",
+      "integrity": "sha512-R7AM4YnbxN1Joj1tMfCyBryOC5aNJBdxadTZkuqtWi3Xj0kMdutq16XQwuoGbIzL2Pk62TALV1fZDCv36+JhTQ==",
       "dev": true,
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/parse": {
-      "version": "19.0.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-19.0.3.tgz",
-      "integrity": "sha512-Il+tNyOb8VDxN3P6XoBBwWJtKKGzHlitEuXA5BP6ir/3loWlsSqDr5aecl6hZcC/spjq4pHqNh0qPlfeWu38QA==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-19.5.0.tgz",
+      "integrity": "sha512-cZ/IxfAlfWYhAQV0TwcbdR1Oc0/r0Ik1GEessDJ3Lbuma/MRO8FRQX76eurcXtmhJC//rj52ZSZuXUg0oIX0Fw==",
       "dev": true,
       "dependencies": {
-        "@commitlint/types": "^19.0.3",
+        "@commitlint/types": "^19.5.0",
         "conventional-changelog-angular": "^7.0.0",
         "conventional-commits-parser": "^5.0.0"
       },
@@ -2137,29 +2083,29 @@
       }
     },
     "node_modules/@commitlint/read": {
-      "version": "19.4.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/read/-/read-19.4.0.tgz",
-      "integrity": "sha512-r95jLOEZzKDakXtnQub+zR3xjdnrl2XzerPwm7ch1/cc5JGq04tyaNpa6ty0CRCWdVrk4CZHhqHozb8yZwy2+g==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/read/-/read-19.5.0.tgz",
+      "integrity": "sha512-TjS3HLPsLsxFPQj6jou8/CZFAmOP2y+6V4PGYt3ihbQKTY1Jnv0QG28WRKl/d1ha6zLODPZqsxLEov52dhR9BQ==",
       "dev": true,
       "dependencies": {
-        "@commitlint/top-level": "^19.0.0",
-        "@commitlint/types": "^19.0.3",
-        "execa": "^8.0.1",
+        "@commitlint/top-level": "^19.5.0",
+        "@commitlint/types": "^19.5.0",
         "git-raw-commits": "^4.0.0",
-        "minimist": "^1.2.8"
+        "minimist": "^1.2.8",
+        "tinyexec": "^0.3.0"
       },
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/resolve-extends": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-19.1.0.tgz",
-      "integrity": "sha512-z2riI+8G3CET5CPgXJPlzftH+RiWYLMYv4C9tSLdLXdr6pBNimSKukYP9MS27ejmscqCTVA4almdLh0ODD2KYg==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-19.5.0.tgz",
+      "integrity": "sha512-CU/GscZhCUsJwcKTJS9Ndh3AKGZTNFIOoQB2n8CmFnizE0VnEuJoum+COW+C1lNABEeqk6ssfc1Kkalm4bDklA==",
       "dev": true,
       "dependencies": {
-        "@commitlint/config-validator": "^19.0.3",
-        "@commitlint/types": "^19.0.3",
+        "@commitlint/config-validator": "^19.5.0",
+        "@commitlint/types": "^19.5.0",
         "global-directory": "^4.0.1",
         "import-meta-resolve": "^4.0.0",
         "lodash.mergewith": "^4.6.2",
@@ -2170,34 +2116,33 @@
       }
     },
     "node_modules/@commitlint/rules": {
-      "version": "19.4.1",
-      "resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-19.4.1.tgz",
-      "integrity": "sha512-AgctfzAONoVxmxOXRyxXIq7xEPrd7lK/60h2egp9bgGUMZK9v0+YqLOA+TH+KqCa63ZoCr8owP2YxoSSu7IgnQ==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-19.5.0.tgz",
+      "integrity": "sha512-hDW5TPyf/h1/EufSHEKSp6Hs+YVsDMHazfJ2azIk9tHPXS6UqSz1dIRs1gpqS3eMXgtkT7JH6TW4IShdqOwhAw==",
       "dev": true,
       "dependencies": {
-        "@commitlint/ensure": "^19.0.3",
-        "@commitlint/message": "^19.0.0",
-        "@commitlint/to-lines": "^19.0.0",
-        "@commitlint/types": "^19.0.3",
-        "execa": "^8.0.1"
+        "@commitlint/ensure": "^19.5.0",
+        "@commitlint/message": "^19.5.0",
+        "@commitlint/to-lines": "^19.5.0",
+        "@commitlint/types": "^19.5.0"
       },
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/to-lines": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/to-lines/-/to-lines-19.0.0.tgz",
-      "integrity": "sha512-vkxWo+VQU5wFhiP9Ub9Sre0FYe019JxFikrALVoD5UGa8/t3yOJEpEhxC5xKiENKKhUkTpEItMTRAjHw2SCpZw==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/to-lines/-/to-lines-19.5.0.tgz",
+      "integrity": "sha512-R772oj3NHPkodOSRZ9bBVNq224DOxQtNef5Pl8l2M8ZnkkzQfeSTr4uxawV2Sd3ui05dUVzvLNnzenDBO1KBeQ==",
       "dev": true,
       "engines": {
         "node": ">=v18"
       }
     },
     "node_modules/@commitlint/top-level": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/top-level/-/top-level-19.0.0.tgz",
-      "integrity": "sha512-KKjShd6u1aMGNkCkaX4aG1jOGdn7f8ZI8TR1VEuNqUOjWTOdcDSsmglinglJ18JTjuBX5I1PtjrhQCRcixRVFQ==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/top-level/-/top-level-19.5.0.tgz",
+      "integrity": "sha512-IP1YLmGAk0yWrImPRRc578I3dDUI5A2UBJx9FbSOjxe9sTlzFiwVJ+zeMLgAtHMtGZsC8LUnzmW1qRemkFU4ng==",
       "dev": true,
       "dependencies": {
         "find-up": "^7.0.0"
@@ -2207,9 +2152,9 @@
       }
     },
     "node_modules/@commitlint/types": {
-      "version": "19.0.3",
-      "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-19.0.3.tgz",
-      "integrity": "sha512-tpyc+7i6bPG9mvaBbtKUeghfyZSDgWquIDfMgqYtTbmZ9Y9VzEm2je9EYcQ0aoz5o7NvGS+rcDec93yO08MHYA==",
+      "version": "19.5.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-19.5.0.tgz",
+      "integrity": "sha512-DSHae2obMSMkAtTBSOulg5X7/z+rGLxcXQIkg3OmWvY6wifojge5uVMydfhUvs7yQj+V7jNmRZ2Xzl8GJyqRgg==",
       "dev": true,
       "dependencies": {
         "@types/conventional-commits-parser": "^5.0.0",
@@ -2402,25 +2347,25 @@
       }
     },
     "node_modules/@emulsify/core": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@emulsify/core/-/core-2.2.3.tgz",
-      "integrity": "sha512-aVhlKr7M31OksKABivPGV6cuWJ3ETGSfM8Prh3qWmknS8IMXIIh81fMh7GW4DCfk6pm8SAZYHjkUe4F8Ktzh9Q==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@emulsify/core/-/core-2.3.0.tgz",
+      "integrity": "sha512-2pKV85KOwXGDvBDQBgs+VMkSDOfY1rcHCCLy/9FvWzGqPME2AVSMOji0Do9Cfko+HlJzgi2xv/jFM8tOvZu4hQ==",
       "dependencies": {
-        "@babel/core": "^7.25.2",
-        "@babel/eslint-parser": "^7.25.1",
-        "@babel/preset-env": "^7.25.4",
+        "@babel/core": "^7.25.8",
+        "@babel/eslint-parser": "^7.25.8",
+        "@babel/preset-env": "^7.25.8",
         "@emulsify/cli": "^1.11.0",
-        "@storybook/addon-a11y": "^8.3.2",
-        "@storybook/addon-actions": "^8.3.2",
-        "@storybook/addon-essentials": "^8.3.2",
-        "@storybook/addon-links": "^8.3.2",
+        "@storybook/addon-a11y": "^8.3.5",
+        "@storybook/addon-actions": "^8.3.5",
+        "@storybook/addon-essentials": "^8.3.5",
+        "@storybook/addon-links": "^8.3.5",
         "@storybook/addon-styling-webpack": "^1.0.0",
-        "@storybook/addon-themes": "^8.3.2",
-        "@storybook/html": "^8.3.2",
-        "@storybook/html-webpack5": "^8.3.2",
-        "@storybook/manager-api": "^8.3.2",
-        "@storybook/preview-api": "^8.3.2",
-        "@storybook/theming": "^8.3.2",
+        "@storybook/addon-themes": "^8.3.5",
+        "@storybook/html": "^8.3.5",
+        "@storybook/html-webpack5": "^8.3.5",
+        "@storybook/manager-api": "^8.3.5",
+        "@storybook/preview-api": "^8.3.5",
+        "@storybook/theming": "^8.3.5",
         "add-attributes-twig-extension": "^0.1.0",
         "autoprefixer": "^10.4.20",
         "babel-loader": "^9.2.1",
@@ -2448,7 +2393,7 @@
         "image-minimizer-webpack-plugin": "^4.1.0",
         "imagemin": "^9.0.0",
         "imagemin-gifsicle": "^7.0.0",
-        "imagemin-jpegtran": "^7.0.0",
+        "imagemin-jpegtran": "^8.0.0",
         "imagemin-optipng": "^8.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
@@ -2466,11 +2411,11 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "regenerator-runtime": "^0.14.1",
-        "sass": "^1.79.1",
+        "sass": "^1.80.1",
         "sass-loader": "^16.0.1",
         "storybook": "^8.3.2",
-        "style-dictionary": "^4.1.2",
-        "stylelint": "^16.9.0",
+        "style-dictionary": "^4.1.3",
+        "stylelint": "^16.10.0",
         "stylelint-config-standard-scss": "^13.1.0",
         "stylelint-prettier": "^5.0.0",
         "stylelint-selector-bem-pattern": "^4.0.1",
@@ -2480,7 +2425,7 @@
         "twig-drupal-filters": "^3.2.0",
         "twig-testing-library": "^1.2.0",
         "twigjs-loader": "^1.0.3",
-        "webpack": "^5.91.0",
+        "webpack": "^5.95.0",
         "webpack-cli": "^5.1.4",
         "webpack-merge": "^6.0.1",
         "yaml": "^2.5.0"
@@ -3849,9 +3794,9 @@
       }
     },
     "node_modules/@jsonjoy.com/util": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.3.0.tgz",
-      "integrity": "sha512-Cebt4Vk7k1xHy87kHY7KSPLT77A7Ev7IfOblyLZhtYEhrdQ6fX4EoLq3xOQ3O/DRMEh2ok5nyC180E+ABS8Wmw==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.5.0.tgz",
+      "integrity": "sha512-ojoNsrIuPI9g6o8UxhraZQSyF2ByJanAY4cTFbc8Mf2AXEF4aQRGY1dJxyJpuyav8r9FGflEt/Ff3u5Nt6YMPA==",
       "engines": {
         "node": ">=10.0"
       },
@@ -4091,20 +4036,280 @@
         "@octokit/openapi-types": "^20.0.0"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz",
+      "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.4.1",
+        "@parcel/watcher-darwin-arm64": "2.4.1",
+        "@parcel/watcher-darwin-x64": "2.4.1",
+        "@parcel/watcher-freebsd-x64": "2.4.1",
+        "@parcel/watcher-linux-arm-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-musl": "2.4.1",
+        "@parcel/watcher-linux-x64-glibc": "2.4.1",
+        "@parcel/watcher-linux-x64-musl": "2.4.1",
+        "@parcel/watcher-win32-arm64": "2.4.1",
+        "@parcel/watcher-win32-ia32": "2.4.1",
+        "@parcel/watcher-win32-x64": "2.4.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
+      "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
+      "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
+      "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
+      "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
+      "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
+      "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
+      "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
+      "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
+      "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
+      "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
+      "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
+      "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@percy/cli": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.28.2.tgz",
-      "integrity": "sha512-hwibBu6zsjfWXIe8WFgrKizGjxkTzYcGQ4eOPcMQXfgK3yUZ24N5v8sqCOobRA/SbdD117zp2WUEkBRWCJ85gg==",
-      "dependencies": {
-        "@percy/cli-app": "1.28.2",
-        "@percy/cli-build": "1.28.2",
-        "@percy/cli-command": "1.28.2",
-        "@percy/cli-config": "1.28.2",
-        "@percy/cli-exec": "1.28.2",
-        "@percy/cli-snapshot": "1.28.2",
-        "@percy/cli-upload": "1.28.2",
-        "@percy/client": "1.28.2",
-        "@percy/logger": "1.28.2"
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.30.1.tgz",
+      "integrity": "sha512-9mLD6q5nT106+Qxkkw28GVxcL2vgqG9mO6Tp55MeEjySSh+EBpadsCUh93oDN64ZcRUObAE56B+sy4H8PkBLGQ==",
+      "dependencies": {
+        "@percy/cli-app": "1.30.1",
+        "@percy/cli-build": "1.30.1",
+        "@percy/cli-command": "1.30.1",
+        "@percy/cli-config": "1.30.1",
+        "@percy/cli-exec": "1.30.1",
+        "@percy/cli-snapshot": "1.30.1",
+        "@percy/cli-upload": "1.30.1",
+        "@percy/client": "1.30.1",
+        "@percy/logger": "1.30.1"
       },
       "bin": {
         "percy": "bin/run.cjs"
@@ -4114,36 +4319,36 @@
       }
     },
     "node_modules/@percy/cli-app": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.28.2.tgz",
-      "integrity": "sha512-UhuxmBRcgeyBnzV7ixiSqUlMdcBg7LyrTtDJWEjQ36SH0jJOAVu020cGcPLNDDTmqXDU7DsDoNifxtPzXT+d5w==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.30.1.tgz",
+      "integrity": "sha512-/ZLGjAFeQKHeaQI5xQ9w6lLljEKWXB/+QuIHl3kGK+NL1+cZtRBk6oDbWj+QRKxg/tr+3zvwjioNIdkDaXgXUQ==",
       "dependencies": {
-        "@percy/cli-command": "1.28.2",
-        "@percy/cli-exec": "1.28.2"
+        "@percy/cli-command": "1.30.1",
+        "@percy/cli-exec": "1.30.1"
       },
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@percy/cli-build": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.28.2.tgz",
-      "integrity": "sha512-VWfrgcOaN6rxSCwifQ5aJuGQDU2Nmq3lvvqZsVVSj3lBbE4KsEaxyoH2Hmm2pCOXi1DzOQ0+zHv+Ra+m4CyBvA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.30.1.tgz",
+      "integrity": "sha512-jr9URjHjYKBchUy7I0eh2agGzpN5Ct+A/Q+jlUbkR5N7AyXW3FbkbA6ZiPYXuG+i2Sjm1wuxMGPKMSIKTVZ3GQ==",
       "dependencies": {
-        "@percy/cli-command": "1.28.2"
+        "@percy/cli-command": "1.30.1"
       },
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@percy/cli-command": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.28.2.tgz",
-      "integrity": "sha512-UUa+dSpzTcXVjzvElL4wD315QYDuGrbnXObgaztyGWdufEbvLWflU4AiQZrxC5abDXQdNWQUAAizorA5dGhaCg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.30.1.tgz",
+      "integrity": "sha512-a8qoZu4IaPp6cKse5ovruI6oeuXJQR2D2aJGwDpnaBbryX4ArSX+x0LoI59SfdEisUxf5JPjiSPmixTmWUxqxA==",
       "dependencies": {
-        "@percy/config": "1.28.2",
-        "@percy/core": "1.28.2",
-        "@percy/logger": "1.28.2"
+        "@percy/config": "1.30.1",
+        "@percy/core": "1.30.1",
+        "@percy/logger": "1.30.1"
       },
       "bin": {
         "percy-cli-readme": "bin/readme.js"
@@ -4153,22 +4358,23 @@
       }
     },
     "node_modules/@percy/cli-config": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.28.2.tgz",
-      "integrity": "sha512-O1O2n16jOm6HCzGM207/NbX+IR7ezUaQGnExi4G5SbOYqZeBIrsKpbEi/SERBfg4Kexv16LrF6NLOs75N2oaSw==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.30.1.tgz",
+      "integrity": "sha512-Rgefm7jyYNdh86eEWj+TKeXhKC1+thlSzFQEraTaanhacBaVHDwEtd5x1hmRMQZPiI759cwVh+dFus3n8DwsaQ==",
       "dependencies": {
-        "@percy/cli-command": "1.28.2"
+        "@percy/cli-command": "1.30.1"
       },
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@percy/cli-exec": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.28.2.tgz",
-      "integrity": "sha512-tRvmoDJMb94XjA60a0lmN2XphzC/r70ruic+VfhFwEqDVoLY/6LxqjSXjehiSD5huXYDyPtaMeJo7oU1FxJyZg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.30.1.tgz",
+      "integrity": "sha512-XsXzfXUIrpKo/3CmgffgVurLlVFlThCO+Kc5IV83ggJhdFAVoJc9cSLOgZyrTBsKEprHmWi5Wn4RLMXhxlaGVg==",
       "dependencies": {
-        "@percy/cli-command": "1.28.2",
+        "@percy/cli-command": "1.30.1",
+        "@percy/logger": "1.30.1",
         "cross-spawn": "^7.0.3",
         "which": "^2.0.2"
       },
@@ -4177,11 +4383,11 @@
       }
     },
     "node_modules/@percy/cli-snapshot": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.28.2.tgz",
-      "integrity": "sha512-Qda4MKjKxoM/TEBjl54lCXMJAmQB6ZZheE96pJzEJzlPQtlj9r/moM3etCV+res0qaSOgx9BL0DncruvAwM/4g==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.30.1.tgz",
+      "integrity": "sha512-86ahSoh3PgbM8ZAL38PVz4X6NMTKsyHTfnGf8T0KH9/MLLp2uokJPJTIpXkPq4OeqzNEq2eOHzaRuXf5wOeHtw==",
       "dependencies": {
-        "@percy/cli-command": "1.28.2",
+        "@percy/cli-command": "1.30.1",
         "yaml": "^2.0.0"
       },
       "engines": {
@@ -4189,11 +4395,11 @@
       }
     },
     "node_modules/@percy/cli-upload": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.28.2.tgz",
-      "integrity": "sha512-vzH4wRdAFGvktNlh57p4s9Qq+rT0MsiQ/kh7pDvzQ1lJ6glpCBXSiiahMtkR8AP8gMMzxYONAuV/htB/t8sFUw==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.30.1.tgz",
+      "integrity": "sha512-wRR4yLI5tKGXz5Y6ZaufLRo2yKVGZVA4zZsYLTbQgmgPxnAYCc5/eu1C2cxfvgeCxNZqwmS6giqxMzfa5z9nKg==",
       "dependencies": {
-        "@percy/cli-command": "1.28.2",
+        "@percy/cli-command": "1.30.1",
         "fast-glob": "^3.2.11",
         "image-size": "^1.0.0"
       },
@@ -4202,23 +4408,24 @@
       }
     },
     "node_modules/@percy/client": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.28.2.tgz",
-      "integrity": "sha512-UoQ4WY8zJhwv/7vKJS+1vbeu/T7YckSmOp/moCoAnHY6QOIXYs7EGkNyeEw5iXoQYzMw6KkkLYPC7YC0rt5pSg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.30.1.tgz",
+      "integrity": "sha512-vaue3/dOykOWZ9ER/vecb9mkcuTe72wgCrYbzIcKNtSUc5AQEGiV5c8rGZav868i5YCtGejexWZ7PKDO05asag==",
       "dependencies": {
-        "@percy/env": "1.28.2",
-        "@percy/logger": "1.28.2"
+        "@percy/env": "1.30.1",
+        "@percy/logger": "1.30.1",
+        "pako": "^2.1.0"
       },
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@percy/config": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.28.2.tgz",
-      "integrity": "sha512-Q9NoenDuhRiY+eBGrw8FJmmU8hErTsjBxccUOvrfn0A4JXRvcFHitvrh85rXG/HhyT4bcoB9O93QhV6F9KTq7A==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.30.1.tgz",
+      "integrity": "sha512-wvI2QIf7/oLPsnrXGHFCLRdDY5BRFE3Smil8IY2ijtGUFWXRPsmRx2tjSdbZ/kpctkeyZappNHPzSiwi1MjJlA==",
       "dependencies": {
-        "@percy/logger": "1.28.2",
+        "@percy/logger": "1.30.1",
         "ajv": "^8.6.2",
         "cosmiconfig": "^8.0.0",
         "yaml": "^2.0.0"
@@ -4253,68 +4460,70 @@
       }
     },
     "node_modules/@percy/core": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.28.2.tgz",
-      "integrity": "sha512-7JkZrsLoHDD2bkhN4u5T/+0sC0UT73Lv1qF3lIMLu+Qjt1BhyKdnitbOnjFlrVOwqC5uNgr7/gvcULLVbJga8Q==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.30.1.tgz",
+      "integrity": "sha512-XQNPFO8ZmKWMMkWaa+IWN6Kzh7CXCwosLWK7OsEldK7N/CVNGmU8mkCwpqYlDXEeiahGfUxqCr4yHZS26OveyQ==",
       "hasInstallScript": true,
       "dependencies": {
-        "@percy/client": "1.28.2",
-        "@percy/config": "1.28.2",
-        "@percy/dom": "1.28.2",
-        "@percy/logger": "1.28.2",
-        "@percy/webdriver-utils": "1.28.2",
+        "@percy/client": "1.30.1",
+        "@percy/config": "1.30.1",
+        "@percy/dom": "1.30.1",
+        "@percy/logger": "1.30.1",
+        "@percy/webdriver-utils": "1.30.1",
         "content-disposition": "^0.5.4",
         "cross-spawn": "^7.0.3",
         "extract-zip": "^2.0.1",
         "fast-glob": "^3.2.11",
-        "micromatch": "^4.0.4",
+        "micromatch": "^4.0.8",
         "mime-types": "^2.1.34",
-        "path-to-regexp": "^6.2.0",
+        "pako": "^2.1.0",
+        "path-to-regexp": "^6.3.0",
         "rimraf": "^3.0.2",
-        "ws": "^8.0.0"
+        "ws": "^8.17.1",
+        "yaml": "^2.4.1"
       },
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@percy/dom": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.28.2.tgz",
-      "integrity": "sha512-bUU38EMowO+y+pnLzl0naikv0pVQvcrkrBm7K7eVGUt6orRTqr5Tr8bMV7Ooac4mlMwaZvCkAH7gPhiDAONUmw=="
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.30.1.tgz",
+      "integrity": "sha512-dYHVGETIXzwqchShfzOkCrGCqjw/KLsubUZR3PYWd6UtTWZ9kFWr9I6MzizPE4XfhJs5rQ0e0Keb29FrGTey5Q=="
     },
     "node_modules/@percy/env": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.28.2.tgz",
-      "integrity": "sha512-40UhiL5MylFN39pzzoyDKgult2ZmSbuc3ADrNGBx9zyMdFEoTLZg5BcFZoSUHHjPboe2jYZFYrRqoXxix++OfA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.30.1.tgz",
+      "integrity": "sha512-ib9Ty/zo/+kfQSRC7RyzxnrS5zzsaoWJLgvTUDwi4iv/UIvx6vrEp7YPE0FQu1VGoRoL7zxRKalTh06/kBAsXg==",
       "dependencies": {
-        "@percy/logger": "1.28.2"
+        "@percy/logger": "1.30.1"
       },
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@percy/logger": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.28.2.tgz",
-      "integrity": "sha512-ZF1iDjY9oBL+4WEqGuJ4JJaUdyUqGhdJtS+qDV8iqrQ6VngWBpO3lg0Uhy8RIkqUSLGKbwVbnxkfvA5kXx+yAw==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.30.1.tgz",
+      "integrity": "sha512-FaVW4YGmgPaW0OviMFUn7m7ski2uZQAeUJ/hg+IXFIN+zSreX2ORcsp+Fep2p+h5UjcZX5wFuf/8O3nth5YAfQ==",
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@percy/sdk-utils": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.28.2.tgz",
-      "integrity": "sha512-cMFz8AjZ2KunN0dVwzA+Wosk4B+6G9dUkh2YPhYvqs0KLcCyYs3s91IzOQmtBOYwAUVja/W/u6XmBHw0jaxg0A==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.30.1.tgz",
+      "integrity": "sha512-xdeaHEdQvytFEbNBYCFdu1ToD6T/BT6YtZYwfNKAYXwQqVbm4wr/3LVH+GUcxYZsBCxmeSyCrF4buspUhxTNJQ==",
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@percy/storybook": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/@percy/storybook/-/storybook-5.0.3.tgz",
-      "integrity": "sha512-Q1pi1x6Po89eejM2Z2ahKJ0M+qWgWHNcFmQ0Mu7mRrtafv41khwwZxQXrthcGK2R3fbbfYBXPANbJhALyNiZuw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@percy/storybook/-/storybook-6.0.2.tgz",
+      "integrity": "sha512-4NkElEIlbuo0HjS6sKiC19JzJwXOh996gwxu4p5QCx9pchnac30KlYAsJoYzu/2n+QrNBNEAe1atmC0eN9ldEg==",
       "dependencies": {
-        "@percy/cli-command": "^1.24.0",
+        "@percy/cli-command": "^1.28.5",
         "cross-spawn": "^7.0.3",
         "qs": "^6.11.0"
       },
@@ -4323,12 +4532,12 @@
       }
     },
     "node_modules/@percy/webdriver-utils": {
-      "version": "1.28.2",
-      "resolved": "https://registry.npmjs.org/@percy/webdriver-utils/-/webdriver-utils-1.28.2.tgz",
-      "integrity": "sha512-bD0UoR1/69xcsL2mhvZ4xQKhWJYbqUJUFMiNr8xqR55Z4dArbeN9S2ZYU6aMVRemuKyn7ki0ttNFHq0z2GFvGg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/@percy/webdriver-utils/-/webdriver-utils-1.30.1.tgz",
+      "integrity": "sha512-mXY40mUBLsdwFMKsZpg87K457a76Qi0Dq8+nZ0rLqYj5STZs3RQWbgi9qMI3ELoB3BqLzePqR9pL8J9WjvRXDg==",
       "dependencies": {
-        "@percy/config": "1.28.2",
-        "@percy/sdk-utils": "1.28.2"
+        "@percy/config": "1.30.1",
+        "@percy/sdk-utils": "1.30.1"
       },
       "engines": {
         "node": ">=14"
@@ -4667,9 +4876,9 @@
       }
     },
     "node_modules/@semantic-release/github": {
-      "version": "10.1.7",
-      "resolved": "https://registry.npmjs.org/@semantic-release/github/-/github-10.1.7.tgz",
-      "integrity": "sha512-QnhP4k1eqzYLz6a4kpWrUQeKJYXqHggveMykvUFbSquq07GF85BXvr/QLhpOD7bpDcmEfL8VnphRA7KT5i9lzQ==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@semantic-release/github/-/github-11.0.0.tgz",
+      "integrity": "sha512-Uon6G6gJD8U1JNvPm7X0j46yxNRJ8Ui6SgK4Zw5Ktu8RgjEft3BGn+l/RX1TTzhhO3/uUcKuqM+/9/ETFxWS/Q==",
       "dev": true,
       "dependencies": {
         "@octokit/core": "^6.0.0",
@@ -4693,7 +4902,7 @@
         "node": ">=20.8.1"
       },
       "peerDependencies": {
-        "semantic-release": ">=20.1.0"
+        "semantic-release": ">=24.1.0"
       }
     },
     "node_modules/@semantic-release/github/node_modules/@semantic-release/error": {
@@ -4987,11 +5196,11 @@
       }
     },
     "node_modules/@storybook/addon-a11y": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.3.2.tgz",
-      "integrity": "sha512-i0qyMp+MxzJ3UY3Absqwxhry4JqZo9yk1XLWld7hJpfAzmrulnaIctudQ940/OMFPcEIsOVdg8euz0IGW3HTNw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.3.6.tgz",
+      "integrity": "sha512-EeVzUN+WaLtz/DXVBL3rIGvP8+pTuJXA3lEz9CbTQXRO7QMhzTTXLKmp8xmSA2w5H01a8XpjLcZ5LYjdKrvw0g==",
       "dependencies": {
-        "@storybook/addon-highlight": "8.3.2",
+        "@storybook/addon-highlight": "8.3.6",
         "axe-core": "^4.2.0"
       },
       "funding": {
@@ -4999,13 +5208,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.3.2.tgz",
-      "integrity": "sha512-Ds2lNyEpeVO0TexoXEHpE3kRcA7rJm5X5nWz4PdvF7kiC1aX5ZMy2qEPZOH6Jvalysm+PChw4Ib+lCaoIFGOJg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.3.6.tgz",
+      "integrity": "sha512-nOqgl0WoZK2KwjaABaXMoIgrIHOQl9inOzJvqQau0HOtsvnXGXYfJXYnpjZenoZDoZXKbUDl0U2haDFx2a2fJw==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "@types/uuid": "^9.0.1",
@@ -5018,13 +5227,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.3.2.tgz",
-      "integrity": "sha512-5dPyynGRp2ZAZrpG2tadbdBk7X7GySoRuZwkQebNFGv+JZ8LoeQ/qc8yUOL+vfWKFGqvjOmX5R55IUHLYsw2NQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.3.6.tgz",
+      "integrity": "sha512-yBn+a8i5OJzJaX6Bx5MAkfei7c2nvq+RRmvuyvxw11rtDGR6Nz4OBBe56reWxo868wVUggpRTPJCMVe5tDYgVg==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "memoizerific": "^1.11.3",
@@ -5035,13 +5244,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.3.2.tgz",
-      "integrity": "sha512-YHoSMWSR1fItPb5S/3gOIhn9T6HcWcTxEJrjuuDk1hySmBmA+ojVJqmcI5MoNG3XtGigSXGJ/K2wmU57wZH4xw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.3.6.tgz",
+      "integrity": "sha512-9IMLHgtWPuFoRCt3hDsIk1FbkK5SlCMDW1DDwtTBIeWYYZLvptS42+vGVTeQ8v5SejmVzZkzuUdzu3p4sb3IcA==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "dequal": "^2.0.2",
@@ -5053,19 +5262,19 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.3.2.tgz",
-      "integrity": "sha512-DPmWhvnHap8bmtiJOYpmo9MYpuJW5QyV6MhmGhpe60A9yH9TRTIf3h7uGpyX3TgtrYxC07Sw/8GaY0UfendJGg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.3.6.tgz",
+      "integrity": "sha512-31Rk1TOhDIzGM2wNCUIB1xKuWtArW0D2Puua9warEXlQ3FtvwmxnPrwbIzw6ufYZDWPwl9phDYTcRh8WqZIoGg==",
       "dependencies": {
         "@mdx-js/react": "^3.0.0",
-        "@storybook/blocks": "8.3.2",
-        "@storybook/csf-plugin": "8.3.2",
+        "@storybook/blocks": "8.3.6",
+        "@storybook/csf-plugin": "8.3.6",
         "@storybook/global": "^5.0.0",
-        "@storybook/react-dom-shim": "8.3.2",
+        "@storybook/react-dom-shim": "8.3.6",
         "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "fs-extra": "^11.1.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -5079,23 +5288,23 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.3.2.tgz",
-      "integrity": "sha512-r0wnw5dbqeVklSjMkA5dTLufmm20IZSskSmadbXOOZBKFqANm15LRGdQ7+Pfr8N0XF4//tFwnvIfw+hMmKGFEQ==",
-      "dependencies": {
-        "@storybook/addon-actions": "8.3.2",
-        "@storybook/addon-backgrounds": "8.3.2",
-        "@storybook/addon-controls": "8.3.2",
-        "@storybook/addon-docs": "8.3.2",
-        "@storybook/addon-highlight": "8.3.2",
-        "@storybook/addon-measure": "8.3.2",
-        "@storybook/addon-outline": "8.3.2",
-        "@storybook/addon-toolbars": "8.3.2",
-        "@storybook/addon-viewport": "8.3.2",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.3.6.tgz",
+      "integrity": "sha512-MQPFvThlGU7wlda1xhBPQCmDh90cSSZ31OsVs1uC5kJh0aLbY2gYXPurq1G54kzrYo8SMfBxsXrCplz8Ir6UTg==",
+      "dependencies": {
+        "@storybook/addon-actions": "8.3.6",
+        "@storybook/addon-backgrounds": "8.3.6",
+        "@storybook/addon-controls": "8.3.6",
+        "@storybook/addon-docs": "8.3.6",
+        "@storybook/addon-highlight": "8.3.6",
+        "@storybook/addon-measure": "8.3.6",
+        "@storybook/addon-outline": "8.3.6",
+        "@storybook/addon-toolbars": "8.3.6",
+        "@storybook/addon-viewport": "8.3.6",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -5103,13 +5312,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.3.2.tgz",
-      "integrity": "sha512-JFL/JLBZfa89POgi8lBdt8TzzCS1bgN/X6Qj1MlTq3pxHYqO66eG8DtMLjpuXKOhs8Dhdgs9/uxy5Yd+MFVRmQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.3.6.tgz",
+      "integrity": "sha512-A7uU+1OPVXGpkklEUJjSl2VEEDLCSNvmffUJlvW1GjajsNFIHOW2CSD+KnfFlQyPxyVbnWAYLqUP4XJxoqrvDw==",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -5118,13 +5327,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-links": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.3.2.tgz",
-      "integrity": "sha512-CHp/3XSB/AWyoP9b2tNaaKNTyftLPIPWqMhqhH1V5irjXhLDpBBEkmgbvB19xJ4qCfDjjOjokSLmSBaVOnzv2g==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.3.6.tgz",
+      "integrity": "sha512-EGEH/kEjndEldbqyiJ8XSASkxqwzL/lgA/+6mHpa6Ljxhk1s5IMGcdA1ymJYJ2BpNdkUxRj/uxAa38eGcQiJ/g==",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@storybook/global": "^5.0.0",
@@ -5136,7 +5345,7 @@
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -5145,9 +5354,9 @@
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.3.2.tgz",
-      "integrity": "sha512-5RPF2oEw5XnTmz2cvjqz2WGnqOrJ1NxXIuJc6QeO6EXQqqjPnj/9rV/MBmzMd9cjk8Ud8c4AA5+jJbl4IgcwhQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.3.6.tgz",
+      "integrity": "sha512-VHWeGgYjhzhwb2WAqYW/qyEPqg5pwKR/XqFfd+3tEirUs/64olL1l3lzLwZ8Cm07cJ81T8Z4myywb9kObZfQlw==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "tiny-invariant": "^1.3.1"
@@ -5157,13 +5366,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.3.2.tgz",
-      "integrity": "sha512-VxUYCHPCZQDwnj/9U4d6QLsfGi9wHGO0hOENjC5ZCwzMNCq6t7XNRToSsq4zUPucH5XKaQW2vyTdbNdUQiki4Q==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.3.6.tgz",
+      "integrity": "sha512-+VXpM8SIHX2cn30qLlMvER9/6iioFRSn2sAfLniqy4RrcQmcMP+qgE7ZzbzExt7cneJh3VFsYqBS/HElu14Vgg==",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "ts-dedent": "^2.0.0"
@@ -5173,7 +5382,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-styling-webpack": {
@@ -5200,9 +5409,9 @@
       }
     },
     "node_modules/@storybook/addon-themes": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-8.3.2.tgz",
-      "integrity": "sha512-gCxKTFDSdDCb1jRotJmejjHQ0ZpQuwnNQp84xarqjZWbepQvdaucgxcqaL9jbRCvN3s/wG/qg04Bw3hykuVVgw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-8.3.6.tgz",
+      "integrity": "sha512-NX6zVWs0JVUg0xICL2v1zlb6eTAQYlE/vd6ATA4bNUNL5sabWGEd1w2ArQaHC9nTnfV60JuRQ8o3SvD7Gg0xMg==",
       "dependencies": {
         "ts-dedent": "^2.0.0"
       },
@@ -5211,25 +5420,25 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.3.2.tgz",
-      "integrity": "sha512-y3mokzvoeEE1ga96c8KX7anb9fU5wRGWZBsX7cQkm5ebXHsXjH2Y0pcdFnw6UxFbPMjh70LlZF9UhXnz7UC7Hw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.3.6.tgz",
+      "integrity": "sha512-FJH+lRoZXENfpMR/G09ZqB0TmL/k6bv07GN1ysoVs420tKRgjfz6uXaZz5COrhcdISr5mTNmG+mw9x7xXTfX3Q==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.3.2.tgz",
-      "integrity": "sha512-AyXpQ2ntpRoNfOWPnaUX4CTWSj163ncgzcoUyBRWL/yiu/PcMK4tlQ141mWwoamAcXEVDK40Q0vWmRwZ06C2gw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.3.6.tgz",
+      "integrity": "sha512-bL51v837W1cng/+0pypkoLsWKWmvux96zLOzqLCpcWAQ4OSMhW3foIWpCiFwMG/KY+GanoOocTx6i7j5hLtuTA==",
       "dependencies": {
         "memoizerific": "^1.11.3"
       },
@@ -5238,13 +5447,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.3.2.tgz",
-      "integrity": "sha512-z6XTg5fC5XT/8vYYtFqVhQtBYw5MkSlkQF5HM1ntxlEesN4tGd14SjFd24nWuoAHq4G5D2D8KNt41IoNdzeD1A==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.3.6.tgz",
+      "integrity": "sha512-Oc5jU6EzfsENjrd91KcKyEKBh60RT+8uyLi1RIrymC2C/mzZMTEoNIrbnQt0eIqbjlHxn6y9JMJxHu4NJ4EmZg==",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@storybook/global": "^5.0.0",
@@ -5268,7 +5477,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -5280,11 +5489,11 @@
       }
     },
     "node_modules/@storybook/builder-webpack5": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.3.2.tgz",
-      "integrity": "sha512-+Jy/iI1DoXTyIYurTSVvuoIgsibpO2WeZo52I/eoNeAvD9HguxmiZ4sBek4f6850jM7TLNFnhhOS0/7GzucmHw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.3.6.tgz",
+      "integrity": "sha512-Eqn2k8aA9f0o6IMQNAxGAMfSDeTP3YYCQAtOL5Gt5lgrqLV5JMTbZOfmaRBZ82ej/BBSAopnQKIJjQBBFx6kAQ==",
       "dependencies": {
-        "@storybook/core-webpack": "8.3.2",
+        "@storybook/core-webpack": "8.3.6",
         "@types/node": "^22.0.0",
         "@types/semver": "^7.3.4",
         "browser-assert": "^1.2.1",
@@ -5317,7 +5526,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -5360,21 +5569,21 @@
       }
     },
     "node_modules/@storybook/components": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.3.2.tgz",
-      "integrity": "sha512-yB/ETNTNVZi8xvVsTMWvtiI4APRj2zzAa3nHyQO0X+DC4jjysT9D1ruL6jZJ/2DHMp7A9U6v2if83dby/kszfg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.3.6.tgz",
+      "integrity": "sha512-TXuoGZY7X3iixF45lXkYOFk8k2q9OHcqHyHyem1gATLLQXgyOvDgzm+VB7uKBNzssRQPEE+La70nfG8bq/viRw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-DVXs9AZzXHUKEhi5hKQ4gmH2ODFFM9hmd3odnlqenIINxGynbRtAGzU8pMhjrTRSrnlLr1liGew1IcY+hwkFjQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.3.6.tgz",
+      "integrity": "sha512-frwfgf0EJ7QL29DWZ5bla/g0eOOWqJGd14t+VUBlpP920zB6sdDfo7+p9JoCjD9u08lGeFDqbPNKayUk+0qDag==",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@types/express": "^4.17.21",
@@ -5396,9 +5605,9 @@
       }
     },
     "node_modules/@storybook/core-webpack": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.3.2.tgz",
-      "integrity": "sha512-WOmtvnH7qZR6UaN3QsXRqj8xeztRDH5jms4f7+jnudB9xs+Fn7cEkns1SdMh0QK8BOt1bTCdoSwq2kFbszfgZA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.3.6.tgz",
+      "integrity": "sha512-ks306CFKD7FePQzRYyTjddiLsSriceblzv4rI+IjVtftkJvcEbxub2yWkV27kPP/e9kSd4Li3M34bX5mkiwkZA==",
       "dependencies": {
         "@types/node": "^22.0.0",
         "ts-dedent": "^2.0.0"
@@ -5408,7 +5617,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/csf": {
@@ -5420,9 +5629,9 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.3.2.tgz",
-      "integrity": "sha512-9UvoBkYDLzf/0e2lQMPyBCJHrrEMxvhL7fraVX2c5OxwVUwgQnHlgNR3zxzw1Nr/AWyC5OKYlaE1eM10JVm2GA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.3.6.tgz",
+      "integrity": "sha512-TJyJPFejO6Gyr3+bXqE/+LomQbivvfHEbee/GwtlRj0XF4KQlqnvuEdEdcK25JbD0NXT8AbyncEUmjoxE7ojQw==",
       "dependencies": {
         "unplugin": "^1.3.1"
       },
@@ -5431,7 +5640,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/global": {
@@ -5440,15 +5649,15 @@
       "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ=="
     },
     "node_modules/@storybook/html": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/html/-/html-8.3.2.tgz",
-      "integrity": "sha512-hGABYjBqoai4P5cJ98WINfObJNkBHobTPQ2zDk6WVNYdscUnLgVSJ4/oTUd/NrNL9AXVrqML4tmFDhEYmTvUhg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/html/-/html-8.3.6.tgz",
+      "integrity": "sha512-ZljrMcGVx/sp1xTcrZPm01mJfU5VBbbfOFq6ci0GGAF2RUv2JkEZkGGErJrEwJefh7fgagQpmiwg0OTHhjcsBg==",
       "dependencies": {
-        "@storybook/components": "^8.3.2",
+        "@storybook/components": "^8.3.6",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "^8.3.2",
-        "@storybook/preview-api": "^8.3.2",
-        "@storybook/theming": "^8.3.2",
+        "@storybook/manager-api": "^8.3.6",
+        "@storybook/preview-api": "^8.3.6",
+        "@storybook/theming": "^8.3.6",
         "ts-dedent": "^2.0.0"
       },
       "engines": {
@@ -5459,18 +5668,18 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/html-webpack5": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/html-webpack5/-/html-webpack5-8.3.2.tgz",
-      "integrity": "sha512-o+jgFL582EvNEfpj+9EAwSz/R+ETQ5ST5iBPsAm2ZVDpUyfClXJFPrX2KA3IA2GUA29ewbI3y7YWkAshzsj2GQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/html-webpack5/-/html-webpack5-8.3.6.tgz",
+      "integrity": "sha512-w6Ml6LFJuMOh4h1swgpVDRMn6YtvtOy6QmlPebHhbLc0Usn6NKyRa+BNjSjoSH7pBeIz3IMInfl5xFRLmaYDNw==",
       "dependencies": {
-        "@storybook/builder-webpack5": "8.3.2",
+        "@storybook/builder-webpack5": "8.3.6",
         "@storybook/global": "^5.0.0",
-        "@storybook/html": "8.3.2",
-        "@storybook/preset-html-webpack": "8.3.2",
+        "@storybook/html": "8.3.6",
+        "@storybook/preset-html-webpack": "8.3.6",
         "@types/node": "^22.0.0"
       },
       "engines": {
@@ -5481,7 +5690,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/icons": {
@@ -5497,23 +5706,23 @@
       }
     },
     "node_modules/@storybook/manager-api": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.2.tgz",
-      "integrity": "sha512-8FuwE3BGsLPF0H154+1X/4krSbvmH5xu5YmaVTVDV8DRPlBeRIlNV0HDiZfBvftF4EB7fRYolzghXQplHIX8Fg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.6.tgz",
+      "integrity": "sha512-Xt5VFZcL+G/9uzaHjzWFhxRNrP+4rPhSRKEvCZorAbC9+Hv+ZDs1JSZS5wMb4WKpXBZ0rwDVOLwngqbVtfRHuQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/preset-html-webpack": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/preset-html-webpack/-/preset-html-webpack-8.3.2.tgz",
-      "integrity": "sha512-y4AfMVdeXbcq9iJVCT4NuSID2+RYmrPFBoLGyp+jnQNt8GrMoOMoW7vbSHt4dyKInck8cfyCC23ITA+mCjxxHg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/preset-html-webpack/-/preset-html-webpack-8.3.6.tgz",
+      "integrity": "sha512-iE57y6JKma369O1ncs53WS2IeCirP2F1DJy5zam0sTzxndADU4MZEaQU5NTO2i8qZDSaz1y22vGO1xidzYWRWw==",
       "dependencies": {
-        "@storybook/core-webpack": "8.3.2",
+        "@storybook/core-webpack": "8.3.6",
         "@types/node": "^22.0.0",
         "html-loader": "^3.1.0",
         "webpack": "5"
@@ -5526,25 +5735,25 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/preview-api": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.3.2.tgz",
-      "integrity": "sha512-bZvqahrS5oXkiVmqt9rPhlpo/xYLKT7QUWKKIDBRJDp+1mYbQhgsP5NhjUtUdaC+HSofAFzJmVFmixyquYsoGw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.3.6.tgz",
+      "integrity": "sha512-/Wxvb7wbI2O2iH63arRQQyyojA630vibdshkFjuC/u1nYdptEV1jkxa0OYmbZbKCn4/ze6uH4hfsKOpDPV9SWg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.3.2.tgz",
-      "integrity": "sha512-fYL7jh9yFkiKIqRJedqTcrmyoVzS/cMxZD/EFfDRaonMVlLlYJQKocuvR1li1iyeKLvd5lxZsHuQ80c98AkDMA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.3.6.tgz",
+      "integrity": "sha512-9BO6VXIdli4GHSfiP/Z0gwAf7oQig3D/yWK2U1+91UWDV8nIAgnNBAi76U4ORC6MiK5MdkDfIikIxnLLeLnahA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -5552,7 +5761,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/storybook-deployer": {
@@ -5756,15 +5965,15 @@
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.2.tgz",
-      "integrity": "sha512-JXAVc08Tlbu4GTTMGNmwUy69lShqSpJixAJc4bvWTnNAtPTRltiNJCg/KJ0GauEyRFk8ZR2Ha4KhN3DB1felNQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.6.tgz",
+      "integrity": "sha512-LQjUk6GXRW9ELkoBKuqzQKFUW+ajfGPfVELcfs3/VQX61VhthJ4olov4bGPc04wsmmFMgN/qODxT485IwOHfPQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.2"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@testing-library/dom": {
@@ -5979,9 +6188,9 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.19.5",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.5.tgz",
-      "integrity": "sha512-y6W03tvrACO72aijJ5uF02FRq5cgDR9lUxddQ8vyF+GvmjJQqbzDcJngEjURc+ZsG31VI3hODNZJ2URj86pzmg==",
+      "version": "4.19.6",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
+      "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -6088,9 +6297,9 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.7",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
-      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA=="
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.11.tgz",
+      "integrity": "sha512-jzqWo/uQP/iqeGGTjhgFp2yaCrCYTauASQcpdzESNCkHjSprBJVcZP9KG9aQ0q+xcsXiKd/iuw/4dLjS3Odc7Q=="
     },
     "node_modules/@types/mdx": {
       "version": "2.0.13",
@@ -6150,9 +6359,9 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "node_modules/@types/react": {
-      "version": "18.3.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.8.tgz",
-      "integrity": "sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==",
+      "version": "18.3.11",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
+      "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -6852,14 +7061,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array-find-index": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -7102,9 +7303,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
-      "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.1.tgz",
+      "integrity": "sha512-qPC9o+kD8Tir0lzNGLeghbOrWMr3ZJpaRlCIb6Uobt/7N4FiEDvqUMnxzCHRHmg8vOg14kr5gVNyScRmbMaJ9g==",
       "engines": {
         "node": ">=4"
       }
@@ -8392,9 +8593,9 @@
       "integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ=="
     },
     "node_modules/browserslist": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
-      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz",
+      "integrity": "sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==",
       "funding": [
         {
           "type": "opencollective",
@@ -8410,8 +8611,8 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001646",
-        "electron-to-chromium": "^1.5.4",
+        "caniuse-lite": "^1.0.30001663",
+        "electron-to-chromium": "^1.5.28",
         "node-releases": "^2.0.18",
         "update-browserslist-db": "^1.1.0"
       },
@@ -8665,30 +8866,10 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-keys": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-      "integrity": "sha512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ==",
-      "dependencies": {
-        "camelcase": "^2.0.0",
-        "map-obj": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/camelcase-keys/node_modules/camelcase": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-      "integrity": "sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001651",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
-      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
+      "version": "1.0.30001669",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz",
+      "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==",
       "funding": [
         {
           "type": "opencollective",
@@ -9447,11 +9628,6 @@
       "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
       "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw=="
     },
-    "node_modules/console-stream": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/console-stream/-/console-stream-0.1.1.tgz",
-      "integrity": "sha512-QC/8l9e6ofi6nqZ5PawlDgzmMw3OxIXtvolBzap/F4UDBJlDaZRSNbL/lb41C29FcbSJncBFlJFj2WJoNyZRfQ=="
-    },
     "node_modules/constant-case": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-2.0.0.tgz",
@@ -9509,35 +9685,6 @@
         "node": ">=16"
       }
     },
-    "node_modules/conventional-changelog-writer": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-7.0.1.tgz",
-      "integrity": "sha512-Uo+R9neH3r/foIvQ0MKcsXkX642hdm9odUp7TqgFS7BsalTcjzRlIfWZrZR1gbxOozKucaKt5KAbjW8J8xRSmA==",
-      "dev": true,
-      "dependencies": {
-        "conventional-commits-filter": "^4.0.0",
-        "handlebars": "^4.7.7",
-        "json-stringify-safe": "^5.0.1",
-        "meow": "^12.0.1",
-        "semver": "^7.5.2",
-        "split2": "^4.0.0"
-      },
-      "bin": {
-        "conventional-changelog-writer": "cli.mjs"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/conventional-commits-filter": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-4.0.0.tgz",
-      "integrity": "sha512-rnpnibcSOdFcdclpFwWa+pPlZJhXE7l+XK04zxhbWrhgpR96h33QLz8hITTXbcYICxVr3HZFtbtUAQ+4LdBo9A==",
-      "dev": true,
-      "engines": {
-        "node": ">=16"
-      }
-    },
     "node_modules/conventional-commits-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz",
@@ -9573,9 +9720,9 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
     "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -9784,9 +9931,9 @@
       }
     },
     "node_modules/css-functions-list": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz",
-      "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
+      "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==",
       "engines": {
         "node": ">=12 || >=16"
       }
@@ -10143,17 +10290,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
-    "node_modules/currently-unhandled": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "integrity": "sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng==",
-      "dependencies": {
-        "array-find-index": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/dargs": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/dargs/-/dargs-8.1.0.tgz",
@@ -10236,11 +10372,11 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -10251,10 +10387,16 @@
         }
       }
     },
+    "node_modules/debug/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
     "node_modules/decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10711,6 +10853,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -10942,9 +11095,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.13",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz",
-      "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q=="
+      "version": "1.5.41",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.41.tgz",
+      "integrity": "sha512-dfdv/2xNjX0P8Vzme4cfzHqnPm5xsZXwsolTYr0eyW18IUmNyG08vL+fttvinTfhKfIKdRoqkDIC9e9iWQCNYQ=="
     },
     "node_modules/emittery": {
       "version": "0.13.1",
@@ -12144,16 +12297,16 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
-      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
         "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.6.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -12379,23 +12532,17 @@
       }
     },
     "node_modules/figures": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-      "integrity": "sha512-UxKlfCRuCBxSXU4C6t9scbDyWZ4VlaFFdojKtzJuSkuOBQ5CNFum+zZXFwHjo+CxBC1t6zlYPgHIgFjL8ggoEQ==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz",
+      "integrity": "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==",
       "dependencies": {
-        "escape-string-regexp": "^1.0.5",
-        "object-assign": "^4.1.0"
+        "is-unicode-supported": "^2.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/figures/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "engines": {
-        "node": ">=0.8.0"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/file-entry-cache": {
@@ -12474,12 +12621,12 @@
       }
     },
     "node_modules/file-type": {
-      "version": "19.4.1",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-19.4.1.tgz",
-      "integrity": "sha512-RuWzwF2L9tCHS76KR/Mdh+DwJZcFCzrhrPXpOw6MlEfl/o31fjpTikzcKlYuyeV7e7ftdCGVJTNOCzkYD/aLbw==",
+      "version": "19.6.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-19.6.0.tgz",
+      "integrity": "sha512-VZR5I7k5wkD0HgFnMsq5hOsSc710MJMu5Nc5QYsbe38NN5iPV/XTObYLc/cpttRTf6lX538+5uO1ZQRhYibiZQ==",
       "dependencies": {
         "get-stream": "^9.0.1",
-        "strtok3": "^8.1.0",
+        "strtok3": "^9.0.1",
         "token-types": "^6.0.0",
         "uint8array-extras": "^1.3.0"
       },
@@ -12517,12 +12664,12 @@
       }
     },
     "node_modules/file-type/node_modules/strtok3": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-8.1.0.tgz",
-      "integrity": "sha512-ExzDvHYPj6F6QkSNe/JxSlBxTh3OrI6wrAIz53ulxo1c4hBJ1bT9C/JrAthEKHWG9riVH3Xzg7B03Oxty6S2Lw==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-9.0.1.tgz",
+      "integrity": "sha512-ERPW+XkvX9W2A+ov07iy+ZFJpVdik04GhDA4eVogiG9hpC97Kem2iucyzhFxbFRvQ5o2UckFtKZdp1hkGvnrEw==",
       "dependencies": {
         "@tokenizer/token": "^0.3.0",
-        "peek-readable": "^5.1.4"
+        "peek-readable": "^5.3.1"
       },
       "engines": {
         "node": ">=16"
@@ -13816,9 +13963,9 @@
       }
     },
     "node_modules/hast-util-to-string": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
-      "integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz",
+      "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==",
       "dependencies": {
         "@types/hast": "^3.0.0"
       },
@@ -14016,9 +14163,9 @@
       }
     },
     "node_modules/html-webpack-plugin": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
-      "integrity": "sha512-iwaY4wzbe48AfKLZ/Cc8k0L+FKG6oSNRaZ8x5A/T/IVDGyXcbHncM9TdDa93wn0FsSm82FhTKW7f3vS61thXAw==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.2.tgz",
+      "integrity": "sha512-q7xp/FO9RGBVoTKNItkdX1jKLscLFkgn/dLVFNYbHVbfHLBk6DYW5nsQ8kCzIWcgKP/kUBocetjvav6lD8YfCQ==",
       "dependencies": {
         "@types/html-minifier-terser": "^6.0.0",
         "html-minifier-terser": "^6.0.2",
@@ -14118,9 +14265,9 @@
       }
     },
     "node_modules/husky": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.5.tgz",
-      "integrity": "sha512-rowAVRUBfI0b4+niA4SJMhfQwc107VLkBUgEYYAOQAbqDCnra1nYh83hF/MDmhYs9t9n1E3DuKOrs2LYNC+0Ag==",
+      "version": "9.1.6",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.6.tgz",
+      "integrity": "sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==",
       "dev": true,
       "bin": {
         "husky": "bin.js"
@@ -14203,6 +14350,20 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-dimensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/image-dimensions/-/image-dimensions-2.3.0.tgz",
+      "integrity": "sha512-8Ar3lsO6+/JLfnUeHnR8Jp/IyQR85Jut5t4Swy1yiXNwj/xM9h5V53v5KE/m/ZSMG4qGRopnSy37uPzKyQCv0A==",
+      "bin": {
+        "image-dimensions": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/image-minimizer-webpack-plugin": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/image-minimizer-webpack-plugin/-/image-minimizer-webpack-plugin-4.1.0.tgz",
@@ -14402,16 +14563,147 @@
       }
     },
     "node_modules/imagemin-jpegtran": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-jpegtran/-/imagemin-jpegtran-7.0.0.tgz",
-      "integrity": "sha512-MJoyTCW8YjMJf56NorFE41SR/WkaGA3IYk4JgvMlRwguJEEd3PnP9UxA8Y2UWjquz8d+On3Ds/03ZfiiLS8xTQ==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/imagemin-jpegtran/-/imagemin-jpegtran-8.0.0.tgz",
+      "integrity": "sha512-iGaaImltX4oJ1lmS9jb7Qw3NRusQnVBr7hYJuhyL0CHRV42pDMkIGBVCHKA9j9mcWHnO5Ryu3LV7t4fU4sC4xg==",
       "dependencies": {
-        "exec-buffer": "^3.0.0",
-        "is-jpg": "^2.0.0",
-        "jpegtran-bin": "^5.0.0"
+        "execa": "^9.4.0",
+        "file-type": "^19.5.0",
+        "image-dimensions": "^2.3.0",
+        "jpegtran-bin": "^7.0.0",
+        "uint8array-extras": "^1.4.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/@sindresorhus/merge-streams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/execa": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-9.4.1.tgz",
+      "integrity": "sha512-5eo/BRqZm3GYce+1jqX/tJ7duA2AnE39i88fuedNFUV8XxGxUpF3aWkBRfbUcjV49gCkvS/pzc0YrCPhaIewdg==",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "cross-spawn": "^7.0.3",
+        "figures": "^6.1.0",
+        "get-stream": "^9.0.0",
+        "human-signals": "^8.0.0",
+        "is-plain-obj": "^4.1.0",
+        "is-stream": "^4.0.1",
+        "npm-run-path": "^6.0.0",
+        "pretty-ms": "^9.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^4.0.0",
+        "yoctocolors": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/get-stream": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
+      "integrity": "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==",
+      "dependencies": {
+        "@sec-ant/readable-stream": "^0.4.1",
+        "is-stream": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/human-signals": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.0.tgz",
+      "integrity": "sha512-/1/GPCpDUCCYwlERiYjxoczfP0zfvZMU/OWgQPMya9AbAE24vseigFdhAMObpc8Q4lc/kjutPfUddDYyAmejnA==",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/is-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
+      "integrity": "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/npm-run-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
+      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
+      "dependencies": {
+        "path-key": "^4.0.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/strip-final-newline": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
+      "integrity": "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imagemin-jpegtran/node_modules/unicorn-magic": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+      "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/imagemin-optipng": {
@@ -14901,17 +15193,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-finite": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
-      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -15004,14 +15285,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-jpg": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz",
-      "integrity": "sha512-ODlO0ruzhkzD3sdynIainVP5eoOFNN85rxA1+cwwnPe4dKyX0r5+hxNO5XpCrxlHcmb9vkOit9mhRD2JVuimHg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/is-lower-case": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.3.tgz",
@@ -15276,6 +15549,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-unicode-supported": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz",
+      "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-upper-case": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.2.tgz",
@@ -15284,11 +15568,6 @@
         "upper-case": "^1.1.0"
       }
     },
-    "node_modules/is-utf8": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q=="
-    },
     "node_modules/is-weakref": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
@@ -16734,20 +17013,19 @@
       }
     },
     "node_modules/jpegtran-bin": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/jpegtran-bin/-/jpegtran-bin-5.0.2.tgz",
-      "integrity": "sha512-4FSmgIcr8d5+V6T1+dHbPZjaFH0ogVyP4UVsE+zri7S9YLO4qAT2our4IN3sW3STVgNTbqPermdIgt2XuAJ4EA==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jpegtran-bin/-/jpegtran-bin-7.0.0.tgz",
+      "integrity": "sha512-8ecI4vXIV7eI2+nzRQsHAVaQVBGDotUY76CJZhlYaBAljBnK/509+sGGCs8eJyiS5N4tOcYZS+8Q4KgzorqlBA==",
       "hasInstallScript": true,
       "dependencies": {
         "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "logalot": "^2.0.0"
+        "bin-wrapper": "^4.0.0"
       },
       "bin": {
         "jpegtran": "cli.js"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^14.13.1 || >=16.0.0"
       }
     },
     "node_modules/js-base64": {
@@ -16946,14 +17224,14 @@
       }
     },
     "node_modules/jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
       "bin": {
         "jsesc": "bin/jsesc"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
     "node_modules/json-buffer": {
@@ -17004,12 +17282,6 @@
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
       "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
     },
-    "node_modules/json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "dev": true
-    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -17173,9 +17445,9 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/lint-staged": {
-      "version": "15.2.9",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.9.tgz",
-      "integrity": "sha512-BZAt8Lk3sEnxw7tfxM7jeZlPRuT4M68O0/CwZhhaw6eeWu0Lz5eERE3m386InivXB64fp/mDID452h48tvKlRQ==",
+      "version": "15.2.10",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.10.tgz",
+      "integrity": "sha512-5dY5t743e1byO19P9I4b3x8HJwalIznL5E1FWYnU6OWw33KxNBSLAc6Cy7F2PsFEO8FKnLwjwm5hx7aMF0jzZg==",
       "dev": true,
       "dependencies": {
         "chalk": "~5.3.0",
@@ -17184,7 +17456,7 @@
         "execa": "~8.0.1",
         "lilconfig": "~3.1.2",
         "listr2": "~8.2.4",
-        "micromatch": "~4.0.7",
+        "micromatch": "~4.0.8",
         "pidtree": "~0.6.0",
         "string-argv": "~0.3.2",
         "yaml": "~2.5.0"
@@ -17617,34 +17889,14 @@
       "dev": true,
       "dependencies": {
         "ansi-styles": "^6.2.1",
-        "string-width": "^7.0.0",
-        "strip-ansi": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/logalot": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/logalot/-/logalot-2.1.0.tgz",
-      "integrity": "sha512-Ah4CgdSRfeCJagxQhcVNMi9BfGYyEKLa6d7OA6xSbld/Hg3Cf2QiOa1mDpmG7Ve8LOH6DN3mdttzjQAvWTyVkw==",
-      "dependencies": {
-        "figures": "^1.3.5",
-        "squeak": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/longest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
-      "integrity": "sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
     "node_modules/loose-envify": {
@@ -17658,23 +17910,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/loud-rejection": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "integrity": "sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==",
-      "dependencies": {
-        "currently-unhandled": "^0.4.1",
-        "signal-exit": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/loud-rejection/node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
-    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -17704,192 +17939,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/lpad-align": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/lpad-align/-/lpad-align-1.1.2.tgz",
-      "integrity": "sha512-MMIcFmmR9zlGZtBcFOows6c2COMekHCIFJz3ew/rRpKZ1wR4mXDPzvcVqLarux8M33X4TPSq2Jdw8WJj0q0KbQ==",
-      "dependencies": {
-        "get-stdin": "^4.0.1",
-        "indent-string": "^2.1.0",
-        "longest": "^1.0.0",
-        "meow": "^3.3.0"
-      },
-      "bin": {
-        "lpad-align": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/find-up": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-      "integrity": "sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==",
-      "dependencies": {
-        "path-exists": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/hosted-git-info": {
-      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
-    },
-    "node_modules/lpad-align/node_modules/indent-string": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "integrity": "sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg==",
-      "dependencies": {
-        "repeating": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/load-json-file": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-      "integrity": "sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==",
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^2.2.0",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0",
-        "strip-bom": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/meow": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-      "integrity": "sha512-TNdwZs0skRlpPpCUK25StC4VH+tP5GgeY1HQOOGP+lQ2xtdkN2VtT/5tiX9k3IWpkBPV9b3LsAWXn4GGi/PrSA==",
-      "dependencies": {
-        "camelcase-keys": "^2.0.0",
-        "decamelize": "^1.1.2",
-        "loud-rejection": "^1.0.0",
-        "map-obj": "^1.0.1",
-        "minimist": "^1.1.3",
-        "normalize-package-data": "^2.3.4",
-        "object-assign": "^4.0.1",
-        "read-pkg-up": "^1.0.1",
-        "redent": "^1.0.0",
-        "trim-newlines": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dependencies": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "node_modules/lpad-align/node_modules/parse-json": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-      "integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==",
-      "dependencies": {
-        "error-ex": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/path-exists": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-      "integrity": "sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==",
-      "dependencies": {
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/path-type": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-      "integrity": "sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==",
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/read-pkg": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-      "integrity": "sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ==",
-      "dependencies": {
-        "load-json-file": "^1.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/read-pkg-up": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "integrity": "sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==",
-      "dependencies": {
-        "find-up": "^1.0.0",
-        "read-pkg": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/lpad-align/node_modules/strip-bom": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-      "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
-      "dependencies": {
-        "is-utf8": "^0.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -17907,9 +17956,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
@@ -17930,14 +17979,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/map-or-similar": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
@@ -18401,6 +18442,11 @@
       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
       "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ=="
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="
+    },
     "node_modules/node-emoji": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.1.3.tgz",
@@ -21800,6 +21846,11 @@
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
       "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -21837,6 +21888,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-ms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
+      "integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-passwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
@@ -22179,9 +22241,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ=="
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -22210,9 +22272,9 @@
       }
     },
     "node_modules/peek-readable": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-5.1.4.tgz",
-      "integrity": "sha512-E7mY2VmKqw9jYuXrSWGHFuPCW2SLQenzXLF3amGaY6lXXg4/b3gj5HVM7h8ZjCO/nZS9ICs0Cz285+32FvNd/A==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-5.3.1.tgz",
+      "integrity": "sha512-GVlENSDW6KHaXcd9zkZltB7tCLosKB/4Hg0fqBJkAoBgYG2Tn1xtMgXtSUuMU9AK/gCm/tTdT8mgAeF4YNeeqw==",
       "engines": {
         "node": ">=14.16"
       },
@@ -22568,9 +22630,9 @@
       "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw=="
     },
     "node_modules/postcss-safe-parser": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz",
-      "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
       "funding": [
         {
           "type": "opencollective",
@@ -22846,6 +22908,20 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/pretty-ms": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.1.0.tgz",
+      "integrity": "sha512-o1piW0n3tgKIKCwk2vpM/vOV13zjJzvP37Ioze54YlTHE06m4tjEbzg9WsKkvTuyYln2DHjo5pY4qrZGI0otpw==",
+      "dependencies": {
+        "parse-ms": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -23233,36 +23309,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/read-pkg-up": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-11.0.0.tgz",
-      "integrity": "sha512-LOVbvF1Q0SZdjClSefZ0Nz5z8u+tIE7mV5NibzmE9VYmDe9CaBbAVtz1veOSZbofrdsilxuDAYnFenukZVp8/Q==",
-      "deprecated": "Renamed to read-package-up",
-      "dev": true,
-      "dependencies": {
-        "find-up-simple": "^1.0.0",
-        "read-pkg": "^9.0.0",
-        "type-fest": "^4.6.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/type-fest": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.14.0.tgz",
-      "integrity": "sha512-on5/Cw89wwqGZQu+yWO0gGMGu8VNxsaW9SB2HE8yJjllEk7IDTwnSN1dUVldYILhYPN5HzD7WAaw2cc/jBfn0Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/read-pkg/node_modules/parse-json": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-8.1.0.tgz",
@@ -23387,29 +23433,6 @@
         "node": ">= 10.13.0"
       }
     },
-    "node_modules/redent": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-      "integrity": "sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==",
-      "dependencies": {
-        "indent-string": "^2.1.0",
-        "strip-indent": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/redent/node_modules/indent-string": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "integrity": "sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg==",
-      "dependencies": {
-        "repeating": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -23508,14 +23531,14 @@
       }
     },
     "node_modules/regexpu-core": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
-      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.1.1.tgz",
+      "integrity": "sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==",
       "dependencies": {
-        "@babel/regjsgen": "^0.8.0",
         "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.1.0",
-        "regjsparser": "^0.9.1",
+        "regenerate-unicode-properties": "^10.2.0",
+        "regjsgen": "^0.8.0",
+        "regjsparser": "^0.11.0",
         "unicode-match-property-ecmascript": "^2.0.0",
         "unicode-match-property-value-ecmascript": "^2.1.0"
       },
@@ -23535,25 +23558,22 @@
         "node": ">=14"
       }
     },
+    "node_modules/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q=="
+    },
     "node_modules/regjsparser": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
-      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.11.1.tgz",
+      "integrity": "sha512-1DHODs4B8p/mQHU9kr+jv8+wIC9mtG4eBHxWxIq5mhjE3D5oORhCc6deRKzTjs9DcfRFmj9BHSDguZklqCGFWQ==",
       "dependencies": {
-        "jsesc": "~0.5.0"
+        "jsesc": "~3.0.2"
       },
       "bin": {
         "regjsparser": "bin/parser"
       }
     },
-    "node_modules/regjsparser/node_modules/jsesc": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      }
-    },
     "node_modules/rehype-external-links": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/rehype-external-links/-/rehype-external-links-3.0.0.tgz",
@@ -23623,17 +23643,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/repeating": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==",
-      "dependencies": {
-        "is-finite": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -23948,10 +23957,11 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.79.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.1.tgz",
-      "integrity": "sha512-+mA7svoNKeL0DiJqZGeR/ZGUu8he4I8o3jyUcOFyo4eBJrwNgIMmAEwCMo/N2Y3wdjOBcRzoNxZIOtrtMX8EXg==",
+      "version": "1.80.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.2.tgz",
+      "integrity": "sha512-9wXY8cGBlUmoUoT+vwOZOFCiS+naiWVjqlreN9ar9PudXbGwlMTFwCR5K9kB4dFumJ6ib98wZyAObJKsWf1nAA==",
       "dependencies": {
+        "@parcel/watcher": "^2.4.1",
         "chokidar": "^4.0.0",
         "immutable": "^4.0.0",
         "source-map-js": ">=0.6.2 <2.0.0"
@@ -24083,27 +24093,27 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "node_modules/semantic-release": {
-      "version": "23.0.6",
-      "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-23.0.6.tgz",
-      "integrity": "sha512-/r62F4PNhJZhyZYMobcpcACGwpFNQyaVcSmqZQXG50GMbHSBVZQLCvwafqxO1lDQKVgmGmyCEtOVYzwvzvyhVw==",
+      "version": "24.1.2",
+      "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-24.1.2.tgz",
+      "integrity": "sha512-hvEJ7yI97pzJuLsDZCYzJgmRxF8kiEJvNZhf0oiZQcexw+Ycjy4wbdsn/sVMURgNCu8rwbAXJdBRyIxM4pe32g==",
       "dev": true,
       "dependencies": {
-        "@semantic-release/commit-analyzer": "^12.0.0",
+        "@semantic-release/commit-analyzer": "^13.0.0-beta.1",
         "@semantic-release/error": "^4.0.0",
-        "@semantic-release/github": "^10.0.0",
+        "@semantic-release/github": "^11.0.0",
         "@semantic-release/npm": "^12.0.0",
-        "@semantic-release/release-notes-generator": "^13.0.0",
+        "@semantic-release/release-notes-generator": "^14.0.0-beta.1",
         "aggregate-error": "^5.0.0",
         "cosmiconfig": "^9.0.0",
         "debug": "^4.0.0",
         "env-ci": "^11.0.0",
-        "execa": "^8.0.0",
+        "execa": "^9.0.0",
         "figures": "^6.0.0",
-        "find-versions": "^5.1.0",
+        "find-versions": "^6.0.0",
         "get-stream": "^6.0.0",
         "git-log-parser": "^1.2.0",
         "hook-std": "^3.0.0",
-        "hosted-git-info": "^7.0.0",
+        "hosted-git-info": "^8.0.0",
         "import-from-esm": "^1.3.1",
         "lodash-es": "^4.17.21",
         "marked": "^12.0.0",
@@ -24111,7 +24121,7 @@
         "micromatch": "^4.0.2",
         "p-each-series": "^3.0.0",
         "p-reduce": "^3.0.0",
-        "read-pkg-up": "^11.0.0",
+        "read-package-up": "^11.0.0",
         "resolve-from": "^5.0.0",
         "semver": "^7.3.2",
         "semver-diff": "^4.0.0",
@@ -24125,67 +24135,22 @@
         "node": ">=20.8.1"
       }
     },
-    "node_modules/semantic-release/node_modules/@semantic-release/commit-analyzer": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@semantic-release/commit-analyzer/-/commit-analyzer-12.0.0.tgz",
-      "integrity": "sha512-qG+md5gdes+xa8zP7lIo1fWE17zRdO8yMCaxh9lyL65TQleoSv8WHHOqRURfghTytUh+NpkSyBprQ5hrkxOKVQ==",
-      "dev": true,
-      "dependencies": {
-        "conventional-changelog-angular": "^7.0.0",
-        "conventional-commits-filter": "^4.0.0",
-        "conventional-commits-parser": "^5.0.0",
-        "debug": "^4.0.0",
-        "import-from-esm": "^1.0.3",
-        "lodash-es": "^4.17.21",
-        "micromatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=20.8.1"
-      },
-      "peerDependencies": {
-        "semantic-release": ">=20.1.0"
-      }
-    },
     "node_modules/semantic-release/node_modules/@semantic-release/error": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@semantic-release/error/-/error-4.0.0.tgz",
       "integrity": "sha512-mgdxrHTLOjOddRVYIYDo0fR3/v61GNN1YGkfbrjuIKg/uMgCd+Qzo3UAXJ+woLQQpos4pl5Esuw5A7AoNlzjUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/semantic-release/node_modules/@semantic-release/release-notes-generator": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@semantic-release/release-notes-generator/-/release-notes-generator-13.0.0.tgz",
-      "integrity": "sha512-LEeZWb340keMYuREMyxrODPXJJ0JOL8D/mCl74B4LdzbxhtXV2LrPN2QBEcGJrlQhoqLO0RhxQb6masHytKw+A==",
-      "dev": true,
-      "dependencies": {
-        "conventional-changelog-angular": "^7.0.0",
-        "conventional-changelog-writer": "^7.0.0",
-        "conventional-commits-filter": "^4.0.0",
-        "conventional-commits-parser": "^5.0.0",
-        "debug": "^4.0.0",
-        "get-stream": "^7.0.0",
-        "import-from-esm": "^1.0.3",
-        "into-stream": "^7.0.0",
-        "lodash-es": "^4.17.21",
-        "read-pkg-up": "^11.0.0"
-      },
-      "engines": {
-        "node": ">=20.8.1"
-      },
-      "peerDependencies": {
-        "semantic-release": ">=20.1.0"
+      "dev": true,
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/semantic-release/node_modules/@semantic-release/release-notes-generator/node_modules/get-stream": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-7.0.1.tgz",
-      "integrity": "sha512-3M8C1EOFN6r8AMUhwUAACIoXZJEOufDU5+0gFFN5uNs6XYOralD2Pqkl7m046va6x77FwposWXbAhPPIOus7mQ==",
+    "node_modules/semantic-release/node_modules/@sindresorhus/merge-streams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
       "dev": true,
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -24234,13 +24199,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/semantic-release/node_modules/figures": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz",
-      "integrity": "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==",
+    "node_modules/semantic-release/node_modules/execa": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-9.4.1.tgz",
+      "integrity": "sha512-5eo/BRqZm3GYce+1jqX/tJ7duA2AnE39i88fuedNFUV8XxGxUpF3aWkBRfbUcjV49gCkvS/pzc0YrCPhaIewdg==",
       "dev": true,
       "dependencies": {
-        "is-unicode-supported": "^2.0.0"
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "cross-spawn": "^7.0.3",
+        "figures": "^6.1.0",
+        "get-stream": "^9.0.0",
+        "human-signals": "^8.0.0",
+        "is-plain-obj": "^4.1.0",
+        "is-stream": "^4.0.1",
+        "npm-run-path": "^6.0.0",
+        "pretty-ms": "^9.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^4.0.0",
+        "yoctocolors": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/semantic-release/node_modules/execa/node_modules/get-stream": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
+      "integrity": "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==",
+      "dev": true,
+      "dependencies": {
+        "@sec-ant/readable-stream": "^0.4.1",
+        "is-stream": "^4.0.1"
       },
       "engines": {
         "node": ">=18"
@@ -24250,15 +24242,16 @@
       }
     },
     "node_modules/semantic-release/node_modules/find-versions": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-5.1.0.tgz",
-      "integrity": "sha512-+iwzCJ7C5v5KgcBuueqVoNiHVoQpwiUK5XFLjf0affFTep+Wcw93tPvmb8tqujDNmzhBDPddnWV/qgWSXgq+Hg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-6.0.0.tgz",
+      "integrity": "sha512-2kCCtc+JvcZ86IGAz3Z2Y0A1baIz9fL31pH/0S1IqZr9Iwnjq8izfPtrCyQKO6TLMPELLsQMre7VDqeIKCsHkA==",
       "dev": true,
       "dependencies": {
-        "semver-regex": "^4.0.5"
+        "semver-regex": "^4.0.5",
+        "super-regex": "^1.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -24276,6 +24269,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/semantic-release/node_modules/hosted-git-info": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-8.0.0.tgz",
+      "integrity": "sha512-4nw3vOVR+vHUOT8+U4giwe2tcGv+R3pwwRidUe67DoMBTjhrfr6rZYJVVwdkBE+Um050SG+X9tf0Jo4fOpn01w==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^10.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/semantic-release/node_modules/human-signals": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.0.tgz",
+      "integrity": "sha512-/1/GPCpDUCCYwlERiYjxoczfP0zfvZMU/OWgQPMya9AbAE24vseigFdhAMObpc8Q4lc/kjutPfUddDYyAmejnA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
     "node_modules/semantic-release/node_modules/indent-string": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
@@ -24288,10 +24302,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/semantic-release/node_modules/is-unicode-supported": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.0.0.tgz",
-      "integrity": "sha512-FRdAyx5lusK1iHG0TWpVtk9+1i+GjrzRffhDg4ovQ7mcidMQ6mj+MhKPmvh7Xwyv5gIS06ns49CA7Sqg7lC22Q==",
+    "node_modules/semantic-release/node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/is-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
+      "integrity": "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==",
       "dev": true,
       "engines": {
         "node": ">=18"
@@ -24300,6 +24326,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/semantic-release/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true
+    },
+    "node_modules/semantic-release/node_modules/npm-run-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
+      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semantic-release/node_modules/p-reduce": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-3.0.0.tgz",
@@ -24312,6 +24360,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/semantic-release/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semantic-release/node_modules/semver-regex": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-4.0.5.tgz",
@@ -24324,6 +24384,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/semantic-release/node_modules/strip-final-newline": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
+      "integrity": "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semantic-release/node_modules/unicorn-magic": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+      "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -25086,6 +25170,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
       "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
       "dependencies": {
         "spdx-expression-parse": "^3.0.0",
         "spdx-license-ids": "^3.0.0"
@@ -25094,12 +25179,14 @@
     "node_modules/spdx-exceptions": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
-      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w=="
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
+      "dev": true
     },
     "node_modules/spdx-expression-parse": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
       "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
       "dependencies": {
         "spdx-exceptions": "^2.1.0",
         "spdx-license-ids": "^3.0.0"
@@ -25108,7 +25195,8 @@
     "node_modules/spdx-license-ids": {
       "version": "3.0.17",
       "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz",
-      "integrity": "sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg=="
+      "integrity": "sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==",
+      "dev": true
     },
     "node_modules/split-string": {
       "version": "3.1.0",
@@ -25158,77 +25246,6 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
       "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
     },
-    "node_modules/squeak": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/squeak/-/squeak-1.3.0.tgz",
-      "integrity": "sha512-YQL1ulInM+ev8nXX7vfXsCsDh6IqXlrremc1hzi77776BtpWgYJUMto3UM05GSAaGzJgWekszjoKDrVNB5XG+A==",
-      "dependencies": {
-        "chalk": "^1.0.0",
-        "console-stream": "^0.1.1",
-        "lpad-align": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/squeak/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/stack-utils": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
@@ -25368,11 +25385,11 @@
       }
     },
     "node_modules/storybook": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.3.2.tgz",
-      "integrity": "sha512-jfDPtoPTtXcQ4O82u6+VE0V8q05hnj9NdmTVJvUxab796FoEbhk07xFLynOopfd9h9i0D/jc5Sf4C+iMe1bhmA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.3.6.tgz",
+      "integrity": "sha512-9GVbtej6ZzPRUM7KRQ7848506FfHrUiJGqPuIQdoSJd09EmuEoLjmLAgEOmrHBQKgGYMaM7Vh9GsTLim6vwZTQ==",
       "dependencies": {
-        "@storybook/core": "8.3.2"
+        "@storybook/core": "8.3.6"
       },
       "bin": {
         "getstorybook": "bin/index.cjs",
@@ -25622,28 +25639,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/strip-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-      "integrity": "sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==",
-      "dependencies": {
-        "get-stdin": "^4.0.1"
-      },
-      "bin": {
-        "strip-indent": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/strip-indent/node_modules/get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -25691,9 +25686,9 @@
       }
     },
     "node_modules/style-dictionary": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.1.2.tgz",
-      "integrity": "sha512-ZQz+Qs38jq0Qb7IOKuj2Rnm81AziQJDV1E2/TnnKpfLajWKr3VAf8xfrFT1gA3+pHmx+M2bfabDTuMUJYJM2Lg==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.1.3.tgz",
+      "integrity": "sha512-KJTkMaFbwSdSsDm6m5M6ki7oQo9vMKV37Vyj0cFpkYw6ucqQKORRQNZT0KXUubxNTtbjv2tmy9wvDSayxS0Zzg==",
       "hasInstallScript": true,
       "dependencies": {
         "@bundled-es-modules/deepmerge": "^4.3.1",
@@ -25751,9 +25746,9 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "16.9.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.9.0.tgz",
-      "integrity": "sha512-31Nm3WjxGOBGpQqF43o3wO9L5AC36TPIe6030Lnm13H3vDMTcS21DrLh69bMX+DBilKqMMVLian4iG6ybBoNRQ==",
+      "version": "16.10.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.10.0.tgz",
+      "integrity": "sha512-z/8X2rZ52dt2c0stVwI9QL2AFJhLhbPkyfpDFcizs200V/g7v+UYY6SNcB9hKOLcDDX/yGLDsY/pX08sLkz9xQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -25773,17 +25768,17 @@
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
         "cosmiconfig": "^9.0.0",
-        "css-functions-list": "^3.2.2",
-        "css-tree": "^2.3.1",
-        "debug": "^4.3.6",
+        "css-functions-list": "^3.2.3",
+        "css-tree": "^3.0.0",
+        "debug": "^4.3.7",
         "fast-glob": "^3.3.2",
         "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^9.0.0",
+        "file-entry-cache": "^9.1.0",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.3.1",
-        "ignore": "^5.3.2",
+        "ignore": "^6.0.2",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
         "known-css-properties": "^0.34.0",
@@ -25792,14 +25787,13 @@
         "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.1",
-        "postcss": "^8.4.41",
+        "postcss": "^8.4.47",
         "postcss-resolve-nested-selector": "^0.1.6",
-        "postcss-safe-parser": "^7.0.0",
+        "postcss-safe-parser": "^7.0.1",
         "postcss-selector-parser": "^6.1.2",
         "postcss-value-parser": "^4.2.0",
         "resolve-from": "^5.0.0",
         "string-width": "^4.2.3",
-        "strip-ansi": "^7.1.0",
         "supports-hyperlinks": "^3.1.0",
         "svg-tags": "^1.0.0",
         "table": "^6.8.2",
@@ -26006,15 +26000,27 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
       "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA=="
     },
+    "node_modules/stylelint/node_modules/css-tree": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.0.0.tgz",
+      "integrity": "sha512-o88DVQ6GzsABn1+6+zo2ct801dBO5OASVyxbbvA2W20ue2puSh/VOuqUj90eUeMSX/xqGqBmOKiRQN7tJOuBXw==",
+      "dependencies": {
+        "mdn-data": "2.10.0",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/stylelint/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/stylelint/node_modules/file-entry-cache": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz",
-      "integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.1.0.tgz",
+      "integrity": "sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg==",
       "dependencies": {
         "flat-cache": "^5.0.0"
       },
@@ -26077,6 +26083,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylelint/node_modules/globby/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/stylelint/node_modules/ignore": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-6.0.2.tgz",
+      "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/stylelint/node_modules/ini": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
@@ -26090,6 +26112,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stylelint/node_modules/mdn-data": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.10.0.tgz",
+      "integrity": "sha512-qq7C3EtK3yJXMwz1zAab65pjl+UhohqMOctTgcqjLOWABqmwj+me02LSsCuEUxnst9X1lCBpoE0WArGKgdGDzw=="
+    },
     "node_modules/stylelint/node_modules/meow": {
       "version": "13.2.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
@@ -26125,31 +26152,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/stylelint/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/stylelint/node_modules/strip-ansi/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
     "node_modules/stylelint/node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -27053,6 +27055,12 @@
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
     },
+    "node_modules/tinyexec": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
+      "integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
+      "dev": true
+    },
     "node_modules/title-case": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz",
@@ -27296,14 +27304,6 @@
         "tree-kill": "cli.js"
       }
     },
-    "node_modules/trim-newlines": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/trim-repeated": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
@@ -28075,6 +28075,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
       "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
       "dependencies": {
         "spdx-correct": "^3.0.0",
         "spdx-expression-parse": "^3.0.0"
@@ -28136,9 +28137,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.94.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
-      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dependencies": {
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
@@ -28718,6 +28719,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yoctocolors": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.1.tgz",
+      "integrity": "sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/package.json b/package.json
index 99a1f3e..766a41f 100644
--- a/package.json
+++ b/package.json
@@ -56,21 +56,21 @@
     ]
   },
   "dependencies": {
-    "@emulsify/core": "^2.2.3",
-    "@percy/cli": "^1.28.2",
-    "@percy/storybook": "^5.0.1"
+    "@emulsify/core": "^2.3.0",
+    "@percy/cli": "^1.30.1",
+    "@percy/storybook": "^6.0.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.1.7",
+    "@semantic-release/github": "^11.0.0",
     "@semantic-release/release-notes-generator": "^14.0.0",
     "@storybook/storybook-deployer": "2.8.16",
-    "husky": "^9.1.5",
-    "lint-staged": "^15.2.9",
-    "semantic-release": "^23.0.4"
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "semantic-release": "^24.1.2"
   }
 }

From 8bc8981551158cc8872d72bdaf54dd48f6e81872 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Fri, 18 Oct 2024 09:35:02 -0500
Subject: [PATCH 27/44] fix: storybook build commands for percy netlify tests

---
 .github/workflows/deploy-to-gh-pages.yml | 2 +-
 .github/workflows/tests.yml              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy-to-gh-pages.yml b/.github/workflows/deploy-to-gh-pages.yml
index b1f3286..e763f0a 100644
--- a/.github/workflows/deploy-to-gh-pages.yml
+++ b/.github/workflows/deploy-to-gh-pages.yml
@@ -55,7 +55,7 @@ jobs:
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build Storybook
-        run: npm run storybook:build
+        run: npm run storybook-build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index f2cefa8..e8219c8 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -26,7 +26,7 @@ jobs:
         run: npm ci
       - name: Build storybook
         if: steps.component_changes.outputs.components == 'true'
-        run: npm run storybook:build
+        run: npm run storybook-build
       - name: Run Percy Tests
         if: steps.component_changes.outputs.components == 'true'
         run: npm run visreg-ci

From 5102d0817dc13b845a7144da19314a8d612ec76f Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Fri, 18 Oct 2024 09:51:21 -0500
Subject: [PATCH 28/44] fix: package name and version

---
 package-lock.json | 8 ++++----
 package.json      | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ed4969a..6e698e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "compound",
-  "version": "0.0.0-development",
+  "name": "Emulsify UI Kit",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "compound",
-      "version": "0.0.0-development",
+      "name": "Emulsify UI Kit",
+      "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
         "@emulsify/core": "^2.3.0",
diff --git a/package.json b/package.json
index 766a41f..0cb54a5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "compound",
-  "version": "0.0.0-development",
-  "description": "Compound is the default Emulsify system, and includes variants for the platforms that Emulsify supports.",
+  "name": "Emulsify UI Kit",
+  "version": "1.0.0",
+  "description": "Emulsify UI Kit is the default Emulsify system that include design token integration with Figma.",
   "main": "index.js",
   "type": "module",
   "scripts": {

From 39f1ce29caf291af037e26e538b15c5653839e59 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Fri, 18 Oct 2024 16:27:08 -0500
Subject: [PATCH 29/44] fix: color token referenes and add media box component

---
 src/components/accordion/_accordion-item.twig |   4 +-
 src/components/accordion/accordion.js         |   2 +-
 src/components/announcement/announcement.twig |   2 +-
 src/components/blockquote/blockquote.twig     |   2 +-
 src/components/card/card.twig                 |   6 +-
 src/components/image/_figure.twig             |  39 +++++++
 src/components/image/_image.twig              |  56 +++++++---
 src/components/image/_picture.twig            |  34 +++---
 src/components/image/_responsive-image.twig   |  32 ++++++
 src/components/image/figure.twig              |  22 ----
 .../{figure.component.yml => figure.yml}      |   0
 src/components/image/image.component.yml      |  36 ------
 src/components/image/image.twig               |  24 ++++
 src/components/image/image.yml                |  38 ++++++-
 src/components/image/images.stories.js        |  61 +++++-----
 src/components/link/link.scss                 |   8 +-
 src/components/lists/list.scss                |  27 ++---
 .../media-box/media-box.component.yml         |  35 ++++++
 src/components/media-box/media-box.stories.js |  87 +++++++++++++++
 src/components/media-box/media-box.twig       |  65 +++++++++++
 .../navigation/breadcrumbs/breadcrumbs.js     |   6 +-
 .../navigation/main/_main-toggle.scss         |  15 ++-
 .../text-with-image/text-with-image.twig      |   6 +-
 src/components/text/text.component.yml        |  15 +++
 src/components/text/text.scss                 | 104 ++++++++++++++++++
 src/components/text/text.stories.js           | 100 +++--------------
 src/components/text/text.twig                 |  31 ++++++
 .../heading/heading.component.yml             |   0
 .../{text => typography}/heading/heading.scss |  28 -----
 .../{text => typography}/heading/heading.twig |   0
 src/components/typography/text.stories.js     |  36 ++++++
 .../{text => typography}/text/_body.scss      |   0
 .../text/blockquote.twig}                     |   0
 .../text/blockquote.yml}                      |   0
 .../text/code.twig}                           |   0
 .../text/code.yml}                            |   0
 .../06-hr.twig => typography/text/hr.twig}    |   0
 .../text/inline-elements.twig}                |   0
 .../text/paragraph.twig}                      |   0
 .../05-pre.twig => typography/text/pre.twig}  |   0
 .../{text => typography}/text/text.scss       |   0
 .../{text => typography}/text/text.twig       |   0
 .../{videos => video}/_video-embed.twig       |   0
 .../{videos => video}/_video-html5.twig       |   0
 .../video-embed.component.yml                 |   0
 .../{videos => video}/video-embed.js          |   0
 .../video-html5.component.yml                 |   0
 src/components/{videos => video}/video.scss   |   0
 .../video.stories.js}                         |   0
 src/components/{videos => video}/video.twig   |   4 +-
 src/foundation/utility/_rem-calc.scss         |  11 +-
 src/layout/container/container.twig           |   4 +-
 src/tokens/colors/color.twig                  |   4 +-
 tokens/undefined/color.twig                   |   4 +-
 54 files changed, 653 insertions(+), 295 deletions(-)
 create mode 100644 src/components/image/_figure.twig
 create mode 100644 src/components/image/_responsive-image.twig
 delete mode 100644 src/components/image/figure.twig
 rename src/components/image/{figure.component.yml => figure.yml} (100%)
 delete mode 100644 src/components/image/image.component.yml
 create mode 100644 src/components/image/image.twig
 create mode 100644 src/components/media-box/media-box.component.yml
 create mode 100644 src/components/media-box/media-box.stories.js
 create mode 100644 src/components/media-box/media-box.twig
 create mode 100644 src/components/text/text.component.yml
 create mode 100644 src/components/text/text.scss
 create mode 100644 src/components/text/text.twig
 rename src/components/{text => typography}/heading/heading.component.yml (100%)
 rename src/components/{text => typography}/heading/heading.scss (59%)
 rename src/components/{text => typography}/heading/heading.twig (100%)
 create mode 100644 src/components/typography/text.stories.js
 rename src/components/{text => typography}/text/_body.scss (100%)
 rename src/components/{text/text/02-blockquote.twig => typography/text/blockquote.twig} (100%)
 rename src/components/{text/text/blockquote.component.yml => typography/text/blockquote.yml} (100%)
 rename src/components/{text/text/07-code.twig => typography/text/code.twig} (100%)
 rename src/components/{text/text/code.component.yml => typography/text/code.yml} (100%)
 rename src/components/{text/text/06-hr.twig => typography/text/hr.twig} (100%)
 rename src/components/{text/text/03-inline-elements.twig => typography/text/inline-elements.twig} (100%)
 rename src/components/{text/text/01-paragraph.twig => typography/text/paragraph.twig} (100%)
 rename src/components/{text/text/05-pre.twig => typography/text/pre.twig} (100%)
 rename src/components/{text => typography}/text/text.scss (100%)
 rename src/components/{text => typography}/text/text.twig (100%)
 rename src/components/{videos => video}/_video-embed.twig (100%)
 rename src/components/{videos => video}/_video-html5.twig (100%)
 rename src/components/{videos => video}/video-embed.component.yml (100%)
 rename src/components/{videos => video}/video-embed.js (100%)
 rename src/components/{videos => video}/video-html5.component.yml (100%)
 rename src/components/{videos => video}/video.scss (100%)
 rename src/components/{videos/videos.stories.js => video/video.stories.js} (100%)
 rename src/components/{videos => video}/video.twig (91%)

diff --git a/src/components/accordion/_accordion-item.twig b/src/components/accordion/_accordion-item.twig
index c09c58b..38f7983 100644
--- a/src/components/accordion/_accordion-item.twig
+++ b/src/components/accordion/_accordion-item.twig
@@ -49,14 +49,14 @@
 {% endset %}
 
 <div {{ add_attributes(accordion__item__attributes) }}>
-	{% include "@components/text/heading/heading.twig" with {
+	{% include "@components/typography/heading/heading.twig" with {
     heading__level: accordion__item__heading__level|default('2'),
     heading__blockname: accordion__item__base_class,
     heading: accordion__item__heading__content,
   } %}
 	<div {{ add_attributes(accordion__item__content__attributes) }}>
 		{% block accordion__item__content %}
-			{% include "@components/text/text/text.twig" with {
+			{% include "@components/typography/text/text.twig" with {
         text__content: accordion__item__content,
       } %}
 		{% endblock %}
diff --git a/src/components/accordion/accordion.js b/src/components/accordion/accordion.js
index 2423d75..534fc87 100644
--- a/src/components/accordion/accordion.js
+++ b/src/components/accordion/accordion.js
@@ -39,7 +39,7 @@ Drupal.behaviors.accordion = {
     /**
      * getAnchor
      * @description Get the value of the anchor link in the URL.
-     * @return The string value after the hash.
+     * @return {string} The string value after the hash.
      */
     function getAnchor() {
       return document.URL.split('#').length > 1
diff --git a/src/components/announcement/announcement.twig b/src/components/announcement/announcement.twig
index aa45093..96a04ef 100644
--- a/src/components/announcement/announcement.twig
+++ b/src/components/announcement/announcement.twig
@@ -26,7 +26,7 @@
   {% endif %}
   {# Render the main content #}
   <div {{ bem('content', [announcement__variant], announcement__base_class) }}>
-    {% include "@components/text/heading/heading.twig" with {
+    {% include "@components/typography/heading/heading.twig" with {
       heading__level: announcement__heading__level|default('4'),
       heading: announcement__title,
     } %}
diff --git a/src/components/blockquote/blockquote.twig b/src/components/blockquote/blockquote.twig
index 9e72964..3db56d7 100644
--- a/src/components/blockquote/blockquote.twig
+++ b/src/components/blockquote/blockquote.twig
@@ -24,7 +24,7 @@
 <aside {{ add_attributes(blockquote__attributes) }}>
   <div {{ bem('inner', [], blockquote__base_class) }}>
     <blockquote {{ bem('blockquote', [], blockquote__base_class) }}>
-      {% include "@components/text/text/02-blockquote.twig" with {
+      {% include "@components/typography/text/blockquote.twig" with {
         blockquote__content: blockquote__quote,
         blockquote__blockname: blockquote__base_class,
         blockquote__base_class: 'quote',
diff --git a/src/components/card/card.twig b/src/components/card/card.twig
index be3f1de..c78f538 100644
--- a/src/components/card/card.twig
+++ b/src/components/card/card.twig
@@ -62,7 +62,7 @@
 
 		{# Subheading #}
 		{% if card__subheading %}
-			{% include "@components/text/heading/heading.twig" with {
+			{% include "@components/typography/heading/heading.twig" with {
         heading__base_class: card__subheading__base_class|default('subheading'),
         heading__modifiers: card__subheading__modifiers,
         heading__blockname: card__base_class,
@@ -75,7 +75,7 @@
 		{# Heading #}
 		{% if card__heading %}
 			{{ title_prefix }}
-			{% include "@components/text/heading/heading.twig" with {
+			{% include "@components/typography/heading/heading.twig" with {
         heading__base_class: card__heading__base_class|default('heading'),
         heading__modifiers: card__heading__modifiers,
         heading__blockname: card__base_class,
@@ -90,7 +90,7 @@
 
 		{# Body #}
 		{% if card__body %}
-			{% include "@components/text/text/01-paragraph.twig" with {
+			{% include "@components/typography/text/paragraph.twig" with {
         paragraph_base_class: card__body__base_class|default('body'),
         paragraph_modifiers: card__body__modifiers,
         paragraph_blockname: card__base_class,
diff --git a/src/components/image/_figure.twig b/src/components/image/_figure.twig
new file mode 100644
index 0000000..9c4f0bc
--- /dev/null
+++ b/src/components/image/_figure.twig
@@ -0,0 +1,39 @@
+{% set figure__base_class = 'figure' %}
+{% set image__link__base_class = image__link__base_class|default('link') %}
+
+{% set figure__attributes = {
+  class: bem(figure__base_class, figure__modifiers, figure__blockname),
+} %}
+
+{% if figure__caption %}
+  {% set figure__attributes = figure__attributes|merge({
+    'aria-label': figure__caption,
+  }) %}
+{% endif %}
+
+<figure {{ add_attributes(figure__attributes) }}>
+  {% if image__url %}
+    <a {{ bem(image__link__base_class, image__link__modifiers, image__link__blockname|default(figure__base_class)) }} href="{{ image__url }}">
+  {% endif %}
+    {% block figure__content %}
+      {% include "@components/image/_responsive-image.twig" with {
+        responsive_image__blockname: responsive_image__blockname|default(figure__blockname),
+      } %}
+    {% endblock %}
+  {% if image__url %}
+    </a>
+  {% endif %}
+
+  <figcaption {{ bem('figure__caption', figcaption__modifiers, figcaption__blockname|default(figure__blockname)) }}>
+    {% if figure__caption and figure__show_caption %}
+      <span {{ bem('caption', figcaption__modifiers, figcaption__blockname|default(figure__blockname)) }}>
+        {{ figure__caption }}
+      </span>
+    {% endif %}
+    {% if figure__copyright and figure__show_copyright %}
+      <span {{ bem('copyright', figcaption__modifiers, figcaption__blockname|default(figure__blockname)) }}>
+        {{ figure__copyright }}
+      </span>
+    {% endif %}
+  </figcaption>
+</figure>
diff --git a/src/components/image/_image.twig b/src/components/image/_image.twig
index 0ce2572..9eaddc8 100644
--- a/src/components/image/_image.twig
+++ b/src/components/image/_image.twig
@@ -1,16 +1,44 @@
 {% set image__base_class = image__base_class|default('image') %}
 
-<img
-  {{ bem(image__base_class, image__modifiers, image__blockname) }}
-  {% if image__srcset %}
-    srcset="{{ image__srcset }}"
-  {% endif %}
-  {% if image__sizes %}
-    sizes="{{ image__sizes }}"
-  {% endif %}
-  src="{{ image__src }}"
-  alt="{{ image__alt }}"
-  {% if image__title %}
-    title="{{ image__title }}"
-  {% endif %}
-/>
+{% set image__attributes = image__attributes|default({
+  'class': bem(image__base_class, image__modifiers, image__blockname),
+  'src': image__src,
+}) %}
+
+{% if image__srcset %}
+  {% set image__attributes = image__attributes|merge({
+    'srcset': image__srcset,
+  }) %}
+{% endif %}
+
+{% if image__sizes %}
+  {% set image__attributes = image__attributes|merge({
+    'sizes': image__sizes,
+  }) %}
+{% endif %}
+
+{% if image__alt %}
+  {% set image__attributes = image__attributes|merge({
+    'alt': image__alt,
+  }) %}
+{% endif %}
+
+{% if image__title %}
+  {% set image__attributes = image__attributes|merge({
+    'title': image__title,
+  }) %}
+{% endif %}
+
+{% if image__width %}
+  {% set image__attributes = image__attributes|merge({
+    'title': image__width,
+  }) %}
+{% endif %}
+
+{% if image__height %}
+  {% set image__attributes = image__attributes|merge({
+    'title': image__height,
+  }) %}
+{% endif %}
+
+<img {{ add_attributes(image__attributes) }}/>
diff --git a/src/components/image/_picture.twig b/src/components/image/_picture.twig
index bb6a483..0723e27 100644
--- a/src/components/image/_picture.twig
+++ b/src/components/image/_picture.twig
@@ -1,19 +1,17 @@
-{% set picture_base_class = picture_base_class|default('picture') %}
+{% set picture__base_class = picture__base_class|default('picture') %}
 
-<picture {{ bem(picture_base_class, picture_modifiers, picture_blockname) }}>
-	{% if sources %}
-		{#
-		    Internet Explorer 9 doesn't recognise source elements that are wrapped in
-		    picture tags. See http://scottjehl.github.io/picturefill/#ie9
-		    #}
-		<!--[if IE 9]><video style="display: none;"><![endif]-->
-			{% for source_attributes in sources %}
-		<source{{source_attributes}}/>
-	{% endfor %}
-		<!--[if IE 9]></video><![endif]-->
-	{% endif %}
-	{# The controlling image, with the fallback image in srcset. #}
-	{% include "@components/image/_image.twig" with {
-    image_blockname: picture_image_blockname|default(picture_blockname),
-  } %}
-</picture>
+<div {{ bem(picture__base_class, picture__modifiers, picture__blockname) }}>
+{% block picture__content %}
+  <picture {{ bem(picture__base_class, picture__modifiers, picture__blockname) }}>
+    {% if sources %}
+      {% for source_attributes in sources %}
+        <source{{ source_attributes }}/>
+      {% endfor %}
+    {% endif %}
+    {# The controlling image, with the fallback image in srcset. #}
+    {% include "@components/image/_image.twig" with {
+      image__blockname: picture__image__blockname|default(picture__blockname),
+    } %}
+  </picture>
+{% endblock %}
+</div>
diff --git a/src/components/image/_responsive-image.twig b/src/components/image/_responsive-image.twig
new file mode 100644
index 0000000..d72d48f
--- /dev/null
+++ b/src/components/image/_responsive-image.twig
@@ -0,0 +1,32 @@
+{#
+ # Available variables:
+ # - sources: The attributes of the <source> tags for this <picture> tag.
+ # - img_element: The controlling image, with the fallback image in srcset.
+ # - output_image_tag: Whether or not to output an <img> tag instead of a <picture> tag.
+ #}
+
+{% set responsive_image__base_class = responsive_image__base_class|default('image') %}
+
+{% if output_image_tag %}
+  {% include "@components/image/_image.twig" with {
+    image__base_class: responsive_image__base_class,
+    image__modifiers: responsive_image__modifiers,
+    image__blockname: responsive_image__blockname,
+    image__srcset: image__srcset|default(img_element['#attributes'].srcset),
+    image__sizes: image__sizes|default(img_element['#attributes'].sizes),
+    image__src: image__src|default(img_element['#uri']),
+    image__alt: image__alt|default(img_element['#alt']),
+    image__title: image__title|default(img_element['#title']),
+  } %}
+{% else %}
+  {% include "@components/image/_picture.twig" with {
+    picture__base_class: responsive_image__base_class,
+    picture__modifiers: responsive_image__modifiers,
+    picture__blockname: responsive_image__blockname,
+    image__srcset: image__srcset|default(img_element['#attributes'].srcset),
+    image__sizes: image__sizes|default(img_element['#attributes'].sizes),
+    image__src: image__src|default(img_element['#uri']),
+    image__alt: image__alt|default(img_element['#alt']),
+    image__title: image__title|default(img_element['#title']),
+  } %}
+{% endif %}
diff --git a/src/components/image/figure.twig b/src/components/image/figure.twig
deleted file mode 100644
index 7a806fe..0000000
--- a/src/components/image/figure.twig
+++ /dev/null
@@ -1,22 +0,0 @@
-{% set image_figure__base_class = image_figure__base_class|default('figure') %}
-{% set image_link__base_class = image_link__base_class|default('link') %}
-
-<figure {{ bem(image_figure__base_class, image_figure__modifiers, image_figure__blockname) }}>
-	{% if image__url %}
-		<a {{ bem(image_link_base_class, image_link__modifiers, image_link__blockname|default(image_figure__base_class)) }} href="{{ image_url }}">
-		{% endif %}
-		{% block figure_content %}
-			{% include "@components/image/responsive-image.twig" with {
-        responsive_image__blockname: responsive_image__blockname|default(image_figure__base_class),
-      } %}
-		{% endblock %}
-		{% if image__url %}
-		</a>
-	{% endif %}
-
-	{% if image__caption %}
-		<figcaption {{ bem('caption', figcaption__modifiers, figcaption__blockname|default(image_figure__base_class)) }}>
-			{{ image__caption }}
-		</figcaption>
-	{% endif %}
-</figure>
diff --git a/src/components/image/figure.component.yml b/src/components/image/figure.yml
similarity index 100%
rename from src/components/image/figure.component.yml
rename to src/components/image/figure.yml
diff --git a/src/components/image/image.component.yml b/src/components/image/image.component.yml
deleted file mode 100644
index aee6274..0000000
--- a/src/components/image/image.component.yml
+++ /dev/null
@@ -1,36 +0,0 @@
-$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
-
-name: Image
-group: Components
-status: stable
-props:
-  type: object
-  required:
-    - image_src
-    - image_alt
-  properties:
-    output_image_tag:
-      type: boolean
-      title: Output image tag
-      description: Specifies whether to output the image tag
-      data: true
-    image__src:
-      type: string
-      title: Source
-      description: 'Specifies the path to the image'
-      data: 'https://placehold.co/320x180'
-    image__alt:
-      type: string
-      title: Alternate text
-      description: 'Specifies an alternate text for the image'
-      data: 'A 16 by 9 image'
-    image__srcset:
-      type: string
-      title: Source Set Attribute
-      description: The image's srcset attribute, which defines multiple image sources for different device resolutions.
-      data: 'https://placehold.co/320x180 320w, https://placehold.co/480x270 480w, https://placehold.co/640x360 640w, https://placehold.co/800x450 800w, https://placehold.co/960x540 960w, https://placehold.co/1120x630 1120w, https://placehold.co/1280x720 1280w, https://placehold.co/1440x810 1440w, https://placehold.co/1600x900 1600w, https://placehold.co/1760x990 1760w, https://placehold.co/1920x1080 1920w, https://placehold.co/2080x1170 2080w, https://placehold.co/2240x1260 2240w'
-    image__sizes:
-      type: string
-      title: Image sizes
-      description: 'Specifies the intended display sizes of the image'
-      data: '100vw'
diff --git a/src/components/image/image.twig b/src/components/image/image.twig
new file mode 100644
index 0000000..8e2e7a3
--- /dev/null
+++ b/src/components/image/image.twig
@@ -0,0 +1,24 @@
+{% if image__show_caption or image__show_copyright %}
+  {% set image_media %}
+    {% block figure_content %}
+      {% include "@components/image/_responsive-image.twig" with {
+        responsive_image__blockname: responsive_image__blockname|default(figure__blockname),
+      } %}
+    {% endblock %}
+  {% endset %}
+
+  {% embed "@components/image/_figure.twig" with {
+    figure__caption: image__caption,
+    figure__copyright: image__copyright,
+    figure__show_caption: image__show_caption,
+    figure__show_copyright: image__show_copyright,
+  } %}
+    {% block figure__content %}
+      {{ image_media }}
+    {% endblock %}
+  {% endembed %}
+{% else %}
+  {% block responsive_image %}
+    {% include "@components/image/_responsive-image.twig" %}
+  {% endblock %}
+{% endif %}
diff --git a/src/components/image/image.yml b/src/components/image/image.yml
index 7a0893c..71b1992 100644
--- a/src/components/image/image.yml
+++ b/src/components/image/image.yml
@@ -1,5 +1,33 @@
-output_image_tag: true
-image_srcset: 'https://placehold.co/320x180 320w, https://placehold.co/480x270 480w, https://placehold.co/640x360 640w, https://placehold.co/800x450 800w, https://placehold.co/960x540 960w, https://placehold.co/1120x630 1120w, https://placehold.co/1280x720 1280w, https://placehold.co/1440x810 1440w, https://placehold.co/1600x900 1600w, https://placehold.co/1760x990 1760w, https://placehold.co/1920x1080 1920w, https://placehold.co/2080x1170 2080w, https://placehold.co/2240x1260 2240w'
-image_sizes: '100vw'
-image_src: 'https://placehold.co/320x180'
-image_alt: 'A 16 by 9 image'
+responsive_images:
+  16x9:
+    output_image_tag: true
+    image__srcset: 'https://picsum.photos/320/180 320w, https://picsum.photos/480/270 480w, https://picsum.photos/640/360 640w, https://picsum.photos/800/450 800w, https://picsum.photos/960/540 960w, https://picsum.photos/1120/630 1120w, https://picsum.photos/1280/720 1280w, https://picsum.photos/1440/810 1440w, https://picsum.photos/1600/900 1600w, https://picsum.photos/1760/990 1760w, https://picsum.photos/1920/1080 1920w, https://picsum.photos/2080/1170 2080w, https://picsum.photos/2240/1260 2240w, https://picsum.photos/2400/1350 2400w'
+    image__sizes: '100vw'
+    image__src: 'https://picsum.photos/320/180'
+    image__alt: 'A 16 by 9 image'
+  3x2:
+    output_image_tag: true
+    image__srcset: 'https://picsum.photos/320/213 320w, https://picsum.photos/480/320 480w, https://picsum.photos/640/427 640w, https://picsum.photos/800/533 800w, https://picsum.photos/960/640 960w, https://picsum.photos/1120/747 1120w, https://picsum.photos/1280/853 1280w, https://picsum.photos/1440/960 1440w, https://picsum.photos/1600/1067 1600w, https://picsum.photos/1760/1173 1760w, https://picsum.photos/1920/1280 1920w, https://picsum.photos/2080/1387 2080w, https://picsum.photos/2240/1493 2240w, https://picsum.photos/2400/1600 2400w'
+    image__sizes: '100vw'
+    image__src: 'https://picsum.photos/320/213'
+    image__alt: 'A 3 by 2 image'
+  1x1:
+    output_image_tag: true
+    image__srcset: 'https://picsum.photos/320 320w, https://picsum.photos/480 480w, https://picsum.photos/640 640w, https://picsum.photos/800 800w, https://picsum.photos/960 960w, https://picsum.photos/1120 1120w, https://picsum.photos/1280 1280w, https://picsum.photos/1440 1440w, https://picsum.photos/1600 1600w, https://picsum.photos/1760 1760w, https://picsum.photos/1920 1920w, https://picsum.photos/2080 2080w, https://picsum.photos/2240 2240w, https://picsum.photos/2400 2400w'
+    image__sizes: '50vw'
+    image__src: 'https://picsum.photos/320'
+    image__alt: 'A 1 by 1 image'
+  1x1.6:
+    output_image_tag: true
+    image__srcset: 'https://picsum.photos/320/512 320w, https://picsum.photos/480/768 480w, https://picsum.photos/640/1024 640w, https://picsum.photos/800/1280 800w, https://picsum.photos/960/1536 960w, https://picsum.photos/1120/1792 1120w, https://picsum.photos/1280/2048 1280w, https://picsum.photos/1440/2304 1440w, https://picsum.photos/1600/2560 1600w, https://picsum.photos/1760/2816 1760w, https://picsum.photos/1920/3072 1920w, https://picsum.photos/2080/3328 2080w, https://picsum.photos/2240/3584 2240w, https://picsum.photos/2400/3840 2400w'
+    image__sizes: '100vw'
+    image__src: 'https://picsum.photos/320/512'
+    image__alt: 'A 1 by 1.6 image'
+  4x3:
+    output_image_tag: true
+    image__srcset: 'https://picsum.photos/320/240 320w, https://picsum.photos/480/360 480w, https://picsum.photos/640/480 640w, https://picsum.photos/800/600 800w, https://picsum.photos/960/720 960w, https://picsum.photos/1120/840 1120w, https://picsum.photos/1280/960 1280w, https://picsum.photos/1440/1080 1440w, https://picsum.photos/1600/1200 1600w, https://picsum.photos/1760/1320 1760w, https://picsum.photos/1920/1440 1920w, https://picsum.photos/2080/1560 2080w, https://picsum.photos/2240/1680 2240w, https://picsum.photos/2400/1800 2400w'
+    image__sizes: '100vw'
+    image__src: 'https://picsum.photos/320/240'
+    image__alt: 'A 4 by 3 image'
+image__caption: 'This is a sample caption associated with the figure.'
+image__copyright: 'Photo taken by John Doe'
\ No newline at end of file
diff --git a/src/components/image/images.stories.js b/src/components/image/images.stories.js
index ca595bb..4c6376f 100644
--- a/src/components/image/images.stories.js
+++ b/src/components/image/images.stories.js
@@ -1,33 +1,42 @@
-import imageTwig from './responsive-image.twig';
-import figureTwig from './figure.twig';
-
-import { props as imageProps } from './image.component.yml';
-import { props as figureProps } from './figure.component.yml';
-
-import { mapDataToTwig } from '../../util/dataTransformers.js';
-
-const svgIcons = require.context('../../../assets/icons/', true, /\.svg$/);
-const icons = [];
-svgIcons.keys().forEach((key) => {
-  const icon = key.split('./')[1].split('.')[0];
-  icons.push(icon);
-});
-
-const imageData = mapDataToTwig(imageProps.properties);
-const figureData = mapDataToTwig(figureProps.properties);
+import imageTwig from './image.twig';
+import imageData from './image.yml';
 
 /**
  * Storybook Definition.
  */
-
 export default {
-  title: 'Components/Media',
-  decorators: [
-    (story) =>
-      `<div style="max-width: 890px; margin: 0 auto;">${story()}</div>`,
-  ],
+  title: 'Components/Media/Image',
+  argTypes: {
+    show_caption: {
+      name: 'Show Image Caption',
+      type: 'boolean',
+    },
+    caption: {
+      name: 'Caption',
+      type: 'string',
+    },
+    show_copyright: {
+      name: 'Show Image Caption',
+      type: 'boolean',
+    },
+    copyright: {
+      name: 'Copyright',
+      type: 'string',
+    },
+  },
+  args: {
+    show_caption: true,
+    caption: imageData.image__caption,
+    show_copyright: true,
+    copyright: imageData.image__copyright,
+  },
 };
 
-export const Image = () => imageTwig(imageData);
-
-export const Figure = () => figureTwig(figureData);
+export const image = ({ show_caption, caption, show_copyright, copyright }) =>
+  imageTwig({
+    ...imageData.responsive_images['1x1'],
+    image__show_caption: show_caption,
+    image__show_copyright: show_copyright,
+    image__caption: caption,
+    image__copyright: copyright,
+  });
diff --git a/src/components/link/link.scss b/src/components/link/link.scss
index b4507e9..5c665b6 100644
--- a/src/components/link/link.scss
+++ b/src/components/link/link.scss
@@ -9,13 +9,13 @@
       content: '';
       display: inline-block;
       position: relative;
-      height: var(--size-md);
-      width: var(--size-md);
-      padding: var(--spacing-xs);
+      height: var(--size-lg);
+      width: var(--size-lg);
+      padding: 0;
       background-color: var(--link-color-default);
       mask-image: url('data:image/svg+xml;utf8,<svg width="9" height="9" viewBox="0 0 7 7" xmlns="http://www.w3.org/2000/svg"><path d="M5.75194 2.10284L1.07171 6.8102C0.94509 6.93681 0.798036 7.00012 0.630543 7.00012C0.463411 7.00012 0.316537 6.93681 0.189922 6.8102C0.0633074 6.68358 0 6.53653 0 6.36904C0 6.2019 0.0633074 6.05503 0.189922 5.92842L4.89729 1.24818H0.949612C0.777778 1.24818 0.630905 1.18705 0.508992 1.06477C0.386718 0.942861 0.325581 0.795988 0.325581 0.624153C0.325581 0.452318 0.386718 0.305264 0.508992 0.18299C0.630905 0.0610781 0.777778 0.00012207 0.949612 0.00012207H6.37597C6.5478 0.00012207 6.69468 0.0610781 6.81659 0.18299C6.93886 0.305264 7 0.452318 7 0.624153V6.05051C7 6.22234 6.93886 6.36922 6.81659 6.49113C6.69468 6.6134 6.5478 6.67454 6.37597 6.67454C6.20413 6.67454 6.05726 6.6134 5.93535 6.49113C5.81308 6.36922 5.75194 6.22234 5.75194 6.05051V2.10284Z"/></svg>');
       mask-repeat: no-repeat;
-      mask-position: right var(--spacing-xs);
+      mask-position: center center;
     }
   }
 
diff --git a/src/components/lists/list.scss b/src/components/lists/list.scss
index 7c06037..23df127 100644
--- a/src/components/lists/list.scss
+++ b/src/components/lists/list.scss
@@ -1,25 +1,12 @@
+@use '../../foundation/breakpoints/breakpoints' as *;
+@use '../../foundation/spacing/spacing' as *;
 @use '../../foundation/utility/utility' as *;
 
-ul {
+ul,
+ol,
+dl {
   @include list-reset;
 
-  line-height: var(--line-height-normal);
-  margin-bottom: var(--spacing-lg);
-  padding-left: var(--spacing-lg);
-  list-style-type: disc;
-}
-
-ol {
-  @include list-reset;
-
-  line-height: var(--line-height-normal);
-  margin-bottom: var(--spacing-lg);
-  padding-left: var(--spacing-lg);
-  list-style-type: decimal;
-}
-
-.text-field {
-  li {
-    padding-left: var(--spacing-sm);
-  }
+  margin-left: var(--spacing-md);
+  list-style-type: none;
 }
diff --git a/src/components/media-box/media-box.component.yml b/src/components/media-box/media-box.component.yml
new file mode 100644
index 0000000..cb5d59e
--- /dev/null
+++ b/src/components/media-box/media-box.component.yml
@@ -0,0 +1,35 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Media Box
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - media_box__media
+  properties:
+    media_box__heading:
+      type: string
+      title: Media Box heading
+      description: The main title/heading of the media box.
+      data: 'This is the card image alt text'
+    media_box__text:
+      type: string
+      title: Media Box text
+      description: The longer description area associated with the media box.
+      data: '<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit. Curabitur purus velit, luctus id scelerisque id, gravida vitae ante. Aenean condimentum, velit sed dignissim varius, libero metus auctor eros, vitae vulputate libero leo sit amet nunc. Duis ultricies massa ante, eget ornare turpis <a href="#">facilisis</a>.</p>'
+    media_box__media:
+      type: string
+      title: Media Box media
+      description: The image's source of the media box.
+      data: 'https://placehold.co/400'
+    media_box__caption:
+      type: string
+      title: Media Box caption
+      description: The caption associated with the media box.
+      data: 'This is a sample caption associated with the media box.'
+    media_box__copyright:
+      type: string
+      title: Media Box copyright
+      description: The copyright associated with the media box.
+      data: 'Photo taken by John Doe'
diff --git a/src/components/media-box/media-box.stories.js b/src/components/media-box/media-box.stories.js
new file mode 100644
index 0000000..79c0474
--- /dev/null
+++ b/src/components/media-box/media-box.stories.js
@@ -0,0 +1,87 @@
+// Twig templates
+import mediaBoxTwig from './media-box.twig';
+// Data files
+import { props } from './media-box.component.yml';
+const mediaBoxData = props.properties;
+
+import '../video/video-embed';
+
+/**
+ * Storybook Definition.
+ */
+export default {
+  title: 'Components/Media Box',
+  argTypes: {
+    type: {
+      name: 'Media Type',
+      control: { type: 'select' },
+      options: {
+        Image: 'image',
+        Video: 'video',
+      },
+    },
+    width: {
+      name: 'Media Box Width',
+      control: { type: 'select' },
+      options: {
+        Compact: 'compact',
+        Standard: 'standard',
+      },
+    },
+    heading: {
+      name: 'Heading',
+      type: 'string',
+    },
+    text: {
+      name: 'Text',
+      type: 'string',
+    },
+    show_caption: {
+      name: 'Show Media Caption',
+      type: 'boolean',
+    },
+    caption: {
+      name: 'Caption',
+      type: 'string',
+    },
+    show_copyright: {
+      name: 'Show Media Caption',
+      type: 'boolean',
+    },
+    copyright: {
+      name: 'Copyright',
+      type: 'string',
+    },
+  },
+  args: {
+    type: 'image',
+    width: 'compact',
+    heading: mediaBoxData.media_box__heading.data,
+    text: mediaBoxData.media_box__text.data,
+    show_caption: true,
+    caption: mediaBoxData.media_box__caption.data,
+    show_copyright: true,
+    copyright: mediaBoxData.media_box__copyright.data,
+  },
+};
+
+export const mediaBox = ({
+  type,
+  width,
+  heading,
+  text,
+  show_caption,
+  caption,
+  show_copyright,
+  copyright,
+}) =>
+  mediaBoxTwig({
+    media_box__type: type,
+    media_box__width: width,
+    media_box__show_caption: show_caption,
+    media_box__caption: caption,
+    media_box__show_copyright: show_copyright,
+    media_box__copyright: copyright,
+    media_box__heading: heading,
+    media_box__text: text,
+  });
diff --git a/src/components/media-box/media-box.twig b/src/components/media-box/media-box.twig
new file mode 100644
index 0000000..fbff4a9
--- /dev/null
+++ b/src/components/media-box/media-box.twig
@@ -0,0 +1,65 @@
+{#
+ # Available Props:
+ # - media_box__width: feature (default) or highlight
+ # - media_box__position: image-left (default) or image-right
+ # - media_box__focus: equal (default), image, or text
+ #
+ # Available variables:
+ # - media_box__heading
+ # - media_box__subheading (optional)
+ # - media_box__text
+ #
+ # Available blocks:
+ # - media_box__media
+ #}
+
+{% set media_box__base_class = 'media-box' %}
+{% set media_box__attributes = {
+  'class': bem(media_box__base_class, media_box__modifiers, media_box__blockname)
+} %}
+{% set media_box__container__modifiers = media_box__container__modifiers|default([]) %}
+
+{% set media_box %}
+  <div {{ add_attributes(media_box__attributes) }}>
+    {% block media_box__media %}
+      {% if media_box__type == 'image' %}
+        {% include "@components/image/image.twig" with {
+          output_image_tag: true,
+          image__show_caption: media_box__show_caption,
+          image__show_copyright: media_box__show_copyright,
+          image__sizes: '100vw',
+          image__src: 'https://picsum.photos/320/213',
+          image__srcset: 'https://picsum.photos/320/213 320w, https://picsum.photos/480/320 480w, https://picsum.photos/640/427 640w, https://picsum.photos/800/533 800w, https://picsum.photos/960/640 960w, https://picsum.photos/1120/747 1120w, https://picsum.photos/1280/853 1280w, https://picsum.photos/1440/960 1440w, https://picsum.photos/1600/1067 1600w, https://picsum.photos/1760/1173 1760w, https://picsum.photos/1920/1280 1920w, https://picsum.photos/2080/1387 2080w, https://picsum.photos/2240/1493 2240w, https://picsum.photos/2400/1600 2400w',
+          image__caption: media_box__caption,
+          image__copyright: media_box__copyright,
+        } %}
+      {% else %}
+        {% include "@components/video/video.twig" with {
+          video__type: 'html5',
+          video__urls: [
+            'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4',
+            'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-webm-file.webm'
+          ],
+          video__show_caption: media_box__show_caption,
+          video__show_copyright: media_box__show_copyright,
+          video__caption: media_box__caption,
+          video__copyright: media_box__copyright,
+          video__show_placeholder: true,
+        } %}
+      {% endif %}
+    {% endblock %}
+  </div>
+{% endset %}
+
+{# Render the accordion within a generic container #}
+{% embed "@layout/container/container.twig" with {
+  container__component_width: media_box__width,
+  container__component_alignment: 'center',
+  container__modifiers: media_box__container__modifiers,
+  container__heading: media_box__heading,
+  container__text: media_box__text,
+}%}
+	{% block container__content %}
+		{{ media_box }}
+	{% endblock %}
+{% endembed %}
diff --git a/src/components/navigation/breadcrumbs/breadcrumbs.js b/src/components/navigation/breadcrumbs/breadcrumbs.js
index 14dee4a..303d3c7 100644
--- a/src/components/navigation/breadcrumbs/breadcrumbs.js
+++ b/src/components/navigation/breadcrumbs/breadcrumbs.js
@@ -22,7 +22,7 @@ Drupal.behaviors.breadcrumbs = {
     /**
      * getFirstVisible
      * @description Get the first item that is visible (not overflown).
-     * @return The value of the left edge of the first fully visible item plus
+     * @return {number} The value of the left edge of the first fully visible item plus
      * the width of the controls so that things aren't visually hidden by the
      * absolutely positioned elements.
      */
@@ -47,7 +47,7 @@ Drupal.behaviors.breadcrumbs = {
     /**
      * getLastHidden
      * @description Get the last item that is overflown (not visible).
-     * @return The value of the left edge of the first partially hidden item
+     * @return {number} The value of the left edge of the first partially hidden item
      * minus the width of the controls so that things aren't visually hidden by
      * the absolutely positioned elements.
      */
@@ -113,7 +113,7 @@ Drupal.behaviors.breadcrumbs = {
 
     /**
      * mouseNav
-     * @description Support mouse navigation when horizontal scrolling occurs.
+     * @direction Support mouse navigation when horizontal scrolling occurs.
      */
     function mouseNav(direction) {
       breadcrumbs.scrollLeft =
diff --git a/src/components/navigation/main/_main-toggle.scss b/src/components/navigation/main/_main-toggle.scss
index dc79150..b9a6fa1 100644
--- a/src/components/navigation/main/_main-toggle.scss
+++ b/src/components/navigation/main/_main-toggle.scss
@@ -57,14 +57,6 @@
     }
   }
 
-  .main-nav__item--level-1.main-nav__item--with-sub & {
-    .icon {
-      height: var(--size-lg);
-      width: var(--size-lg);
-    }
-  }
-  
-
   .sub--open > &,
   &[aria-expanded='true'] {
     .icon {
@@ -151,4 +143,11 @@
       }
     }
   }
+
+  .main-nav__item--level-1.main-nav__item--with-sub & {
+    .icon {
+      height: var(--size-lg);
+      width: var(--size-lg);
+    }
+  }
 }
diff --git a/src/components/text-with-image/text-with-image.twig b/src/components/text-with-image/text-with-image.twig
index 3386918..c1089b1 100644
--- a/src/components/text-with-image/text-with-image.twig
+++ b/src/components/text-with-image/text-with-image.twig
@@ -33,14 +33,14 @@
     <div {{ bem('content', [], text_with_image__base_class) }}>
       {# Heading #}
       {% if text_with_image__heading %}
-        {% include "@components/text/heading/heading.twig" with {
+        {% include "@components/typography/heading/heading.twig" with {
           heading: text_with_image__heading,
           heading__level: '2',
           heading__blockname: text_with_image__base_class,
         } %}
       {% endif %}
       {# Text #}
-      {% include "@components/text/text/text.twig" with {
+      {% include "@components/typography/text/text.twig" with {
         text__content: text_with_image__text,
         text__blockname: text_with_image__base_class,
       } %}
@@ -67,7 +67,7 @@
 
       {% if text_with_image__show_captions
         and text_content__image %}
-          {% include "@components/text/text/text.twig" with {
+          {% include "@components/typography/text/text.twig" with {
             text__content: text_content__image,
             text__base_class: 'caption-credit-wrapper',
           } %}
diff --git a/src/components/text/text.component.yml b/src/components/text/text.component.yml
new file mode 100644
index 0000000..07599c3
--- /dev/null
+++ b/src/components/text/text.component.yml
@@ -0,0 +1,15 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Text
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - text__content
+  properties:
+    text__content:
+      type: string
+      title: Text Content
+      description: Formatted or Plain text provided by a textarea
+      data: <h1>Little Women (or Meg, Jo, Beth, and Amy)</h1><p>By Louisa May Alcott</p><h2>I. Playing Pilgrims</h2><p>"Christmas won't be Christmas without any <a href="#">presents</a>," grumbled Jo, lying on the rug.</p><p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p><p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p><p>"We've got father and mother and each other," said Beth contentedly, from her corner.</p><p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly,—</p><p>"We haven't got father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking of father far away, where the fighting was.</p><h3>Nobody spoke for a minute; then Meg said in an altered tone,—</h3><p>"You know the reason mother proposed not having any presents this Christmas was because it is going to be a hard winter for every one; and she thinks we ought not to spend money for pleasure, when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't;" and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p><p>"But I don't think the little we should spend would do any good. We've each got a dollar, and the army wouldn't be much helped by our giving that. I agree not to expect anything from mother or you, but I do want to buy <a href="#">Undine and Sintram</a> for myself; I've wanted it so long," said Jo, who was a bookworm.</p><h4>"I planned to spend mine in new music," said Beth, with a little sigh, which no one heard but the hearth-brush and kettle-holder.</h4><p>"I shall get a nice box of Faber's drawing-pencils; I really need them," said Amy decidedly.</p><p>"Mother didn't say anything about our money, and she won't wish us to give up everything. Let's each buy what we want, and have a little fun; I'm sure we work hard enough to earn it," cried Jo, examining the heels of her shoes in a gentlemanly manner.</p><p>"I know I do,—teaching those tiresome children nearly all day, when I'm longing to enjoy myself at home," began Meg, in the complaining tone again.</p><p>"You don't have half such a hard time as I do," said Jo. </p><blockquote>"How would you like to be shut up for hours with a nervous, fussy old lady, who keeps you trotting, is never satisfied, and worries you till you're ready to fly out of the window or cry?"</blockquote><p>"It's naughty to fret; but I do think washing dishes and keeping things tidy is the worst work in the world. It makes me cross; and my hands get so stiff, I can't practise well at all;" and Beth looked at her rough hands with a sigh that any one could hear that time.</p><p>"I don't believe any of you suffer as I do," cried Amy; "for you don't have to go to school with impertinent girls, who plague you if you don't know your lessons, and laugh at your dresses, and label your father if he isn't rich, and insult you when your nose isn't nice."<ul><li>"If you mean libel, I'd say so, and not talk about labels, as if papa was a pickle-bottle," advised Jo, laughing.</li><li>"I know what I mean, and you needn't be statirical about it. It's proper to use good words, and improve your vocabilary," returned Amy, with dignity.</li><li>"Don't peck at one another, children. Don't you wish we had the money papa lost when we were little, Jo? Dear me! how happy and good we'd be, if we had no worries!" said Meg, who could remember better times.</li><li>"You said the other day, you thought we were a deal happier than the King children, for they were fighting and fretting all the time, in spite of their money."</li><li>"So I did, Beth. Well, I think we are; for, though we do have to work, we make fun for ourselves, and are a pretty jolly set, as Jo would say."</li><li>"Jo does use such slang words!" observed Amy, with a reproving look at the long figure stretched on the rug. Jo immediately sat up, put her hands in her pockets, and began to whistle.</li><li>"Don't, Jo; it's so boyish!"</li><li>"That's why I do it."</li></ul><p>"I detest rude, unlady-like girls!"</p><p>"I hate affected, niminy-piminy chits!"</p><p>"'Birds in their little nests agree,'" sang Beth, the peace-maker, with such a funny face that both sharp voices softened to a laugh, and the "pecking" ended for that time.</p><p>"Really, girls, you are both to be blamed," said Meg, beginning to lecture in her elder-sisterly fashion. "You are old enough to leave off boyish tricks, and to behave better, Josephine. It didn't matter so much when you were a little girl; but now you are so tall, and turn up your hair, you should remember that you are a young lady."</p><ol><li>"If you mean libel, I'd say so, and not talk about labels, as if papa was a pickle-bottle," advised Jo, laughing.</li><li>"I know what I mean, and you needn't be statirical about it. It's proper to use good words, and improve your vocabilary," returned Amy, with dignity.</li><li>"Don't peck at one another, children. Don't you wish we had the money papa lost when we were little, Jo? Dear me! how happy and good we'd be, if we had no worries!" said Meg, who could remember better times.</li><li>"You said the other day, you thought we were a deal happier than the King children, for they were fighting and fretting all the time, in spite of their money."</li><li>"So I did, Beth. Well, I think we are; for, though we do have to work, we make fun for ourselves, and are a pretty jolly set, as Jo would say."</li><li>"Jo does use such slang words!" observed Amy, with a reproving look at the long figure stretched on the rug. Jo immediately sat up, put her hands in her pockets, and began to whistle.</li><li>"Don't, Jo; it's so boyish!"</li><li>"That's why I do it."</li></ol>
diff --git a/src/components/text/text.scss b/src/components/text/text.scss
new file mode 100644
index 0000000..ee3c189
--- /dev/null
+++ b/src/components/text/text.scss
@@ -0,0 +1,104 @@
+@use '../../foundation/breakpoints/breakpoints' as *;
+@use '../../foundation/spacing/spacing' as *;
+@use '../../foundation/typography/typography' as *;
+@use '../typography/text/text' as *;
+@use '../typography/heading/heading.scss' as *;
+@use '../link/link' as *;
+
+.text,
+.ck {
+  margin: 0;
+  z-index: 1;
+  position: relative;
+  word-break: break-word;
+
+  &[data-text-position='left'] {
+    margin-right: auto;
+  }
+
+  &[data-text-position='center'] {
+    margin-inline: auto;
+  }
+
+  &[data-text-position='right'] {
+    margin-left: auto;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.ck-editor__top.ck-reset_all {
+    position: relative;
+    z-index: 2;
+  }
+
+  // Paragraphs
+  p {
+    margin: 0;
+  }
+
+  p:not(:last-child) {
+    @extend %paragraph;
+  }
+
+  blockquote {
+    @extend %blockquote;
+  }
+
+  hr {
+    @extend %hr;
+  }
+
+  a {
+    @include link;
+  }
+
+  // Headings
+  h1 {
+    @extend %h1;
+  }
+
+  h2 {
+    @extend %h2;
+  }
+
+  h3 {
+    @extend %h3;
+  }
+
+  h4 {
+    @extend %h4;
+  }
+
+  h5 {
+    @extend %h5;
+  }
+
+  h6 {
+    @extend %h6;
+  }
+
+  // Lists
+  ul,
+  ol {
+    margin-bottom: var(--spacing-lg);
+    margin-left: var(--spacing-xl);
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin-bottom: var(--spacing-lg);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/src/components/text/text.stories.js b/src/components/text/text.stories.js
index 9610fcd..1566f47 100644
--- a/src/components/text/text.stories.js
+++ b/src/components/text/text.stories.js
@@ -1,92 +1,18 @@
-import { mapDataToTwig } from '../../util/dataTransformers';
+// Twig templates
+import textFieldTwig from './text.twig';
 
-/* Twigs */
-import heading from './heading/heading.twig';
-import blockquoteTemplate from './text/02-blockquote.twig';
-import preTemplate from './text/05-pre.twig';
-import paragraphTemplate from './text/03-inline-elements.twig';
-import codeTemplate from './text/07-code.twig';
-
-/* Data */
-import { props as blockquoteProps } from './text/blockquote.component.yml';
-import { props as headingProps } from './heading/heading.component.yml';
-import { props as codeProps } from './text/code.component.yml';
+// Data files
+import { props } from './text.component.yml';
+const textData = props.properties;
 
 /**
  * Storybook Definition.
  */
-
-const blockquoteData = mapDataToTwig(blockquoteProps.properties);
-const codeData = mapDataToTwig(codeProps.properties);
-const headingData = headingProps.example;
-
-export default { title: 'Components/Typography' };
-
-export const headings = () =>
-  `<div class="text-long"> ${headingData
-    .map((d) => heading(d))
-    .join('')}</div>`;
-
-export const blockquote = () => blockquoteTemplate(blockquoteData);
-
-export const preformatted = () => preTemplate();
-
-export const random = () => paragraphTemplate();
-
-export const code = () => codeTemplate(codeData);
-
-export const example =
-  () => `<section style="max-width: 700px; margin: 0 auto;" class="text-long text-field">
-<h1>Little Women (or Meg, Jo, Beth, and Amy)</h1>
-<p>By Louisa May Alcott</p>
-<h2>I. Playing Pilgrims</h2>
-<p>"Christmas won't be Christmas without any presents," grumbled Jo, lying on the rug.</p>
-<p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p>
-<p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p>
-<p>"We've got father and mother and each other," said Beth contentedly, from her corner.</p>
-<p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly,—</p>
-<p>"We haven't got father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking of father far away, where the fighting was.</p>
-<h3>Nobody spoke for a minute; then Meg said in an altered tone,—</h3>
-<p>"You know the reason mother proposed not having any presents this Christmas was because it is going to be a hard winter for every one; and she thinks we ought not to spend money for pleasure, when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't;" and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p>
-<p>"But I don't think the little we should spend would do any good. We've each got a dollar, and the army wouldn't be much helped by our giving that. I agree not to expect anything from mother or you, but I do want to buy Undine and Sintram for myself; I've wanted it so long," said Jo, who was a bookworm.</p>
-<h4>"I planned to spend mine in new music," said Beth, with a little sigh, which no one heard but the hearth-brush and kettle-holder.</h4>
-<p>"I shall get a nice box of Faber's drawing-pencils; I really need them," said Amy decidedly.</p>
-<p>"Mother didn't say anything about our money, and she won't wish us to give up everything. Let's each buy what we want, and have a little fun; I'm sure we work hard enough to earn it," cried Jo, examining the heels of her shoes in a gentlemanly manner.</p>
-<p>"I know I do,—teaching those tiresome children nearly all day, when I'm longing to enjoy myself at home," began Meg, in the complaining tone again.</p>
-<p>"You don't have half such a hard time as I do," said Jo. </p>
-
-<blockquote>
-"How would you like to be shut up for hours with a nervous, fussy old lady, who keeps you trotting, is never satisfied, and worries you till you're ready to fly out of the window or cry?"
-</blockquote>
-<p>"It's naughty to fret; but I do think washing dishes and keeping things tidy is the worst work in the world. It makes me cross; and my hands get so stiff, I can't practise well at all;" and Beth looked at her rough hands with a sigh that any one could hear that time.</p>
-<p>"I don't believe any of you suffer as I do," cried Amy; "for you don't have to go to school with impertinent girls, who plague you if you don't know your lessons, and laugh at your dresses, and label your father if he isn't rich, and insult you when your nose isn't nice."
-
-
-<ul>
-<li>"If you mean libel, I'd say so, and not talk about labels, as if papa was a pickle-bottle," advised Jo, laughing.</li>
-<li>"I know what I mean, and you needn't be statirical about it. It's proper to use good words, and improve your vocabilary," returned Amy, with dignity.</li>
-<li>"Don't peck at one another, children. Don't you wish we had the money papa lost when we were little, Jo? Dear me! how happy and good we'd be, if we had no worries!" said Meg, who could remember better times.</li>
-<li>"You said the other day, you thought we were a deal happier than the King children, for they were fighting and fretting all the time, in spite of their money."</li>
-<li>"So I did, Beth. Well, I think we are; for, though we do have to work, we make fun for ourselves, and are a pretty jolly set, as Jo would say."</li>
-<li>"Jo does use such slang words!" observed Amy, with a reproving look at the long figure stretched on the rug. Jo immediately sat up, put her hands in her pockets, and began to whistle.</li>
-<li>"Don't, Jo; it's so boyish!"</li>
-<li>"That's why I do it."</li>
-</ul>
-
-
-<p>"I detest rude, unlady-like girls!"</p>
-<p>"I hate affected, niminy-piminy chits!"</p>
-<p>"'Birds in their little nests agree,'" sang Beth, the peace-maker, with such a funny face that both sharp voices softened to a laugh, and the "pecking" ended for that time.</p>
-<p>"Really, girls, you are both to be blamed," said Meg, beginning to lecture in her elder-sisterly fashion. "You are old enough to leave off boyish tricks, and to behave better, Josephine. It didn't matter so much when you were a little girl; but now you are so tall, and turn up your hair, you should remember that you are a young lady."</p>
-
-<ol>
-<li>"If you mean libel, I'd say so, and not talk about labels, as if papa was a pickle-bottle," advised Jo, laughing.</li>
-<li>"I know what I mean, and you needn't be statirical about it. It's proper to use good words, and improve your vocabilary," returned Amy, with dignity.</li>
-<li>"Don't peck at one another, children. Don't you wish we had the money papa lost when we were little, Jo? Dear me! how happy and good we'd be, if we had no worries!" said Meg, who could remember better times.</li>
-<li>"You said the other day, you thought we were a deal happier than the King children, for they were fighting and fretting all the time, in spite of their money."</li>
-<li>"So I did, Beth. Well, I think we are; for, though we do have to work, we make fun for ourselves, and are a pretty jolly set, as Jo would say."</li>
-<li>"Jo does use such slang words!" observed Amy, with a reproving look at the long figure stretched on the rug. Jo immediately sat up, put her hands in her pockets, and began to whistle.</li>
-<li>"Don't, Jo; it's so boyish!"</li>
-<li>"That's why I do it."</li>
-</ol>
-</section>`;
+export default {
+  title: 'Components/Text',
+};
+
+export const Text = () =>
+  textFieldTwig({
+    text__content: textData.text__content.data,
+  });
diff --git a/src/components/text/text.twig b/src/components/text/text.twig
new file mode 100644
index 0000000..4b431a2
--- /dev/null
+++ b/src/components/text/text.twig
@@ -0,0 +1,31 @@
+{#
+ # Available Variables:
+ # - text__content - string with formatted HTML.
+ #
+ # Available Blocks:
+ # - text_content
+ #}
+
+{% set text_field__base_class = 'text' %}
+
+{% set text %}
+	{% block text_content %}
+		{{ text__content }}
+	{% endblock %}
+{% endset %}
+
+{# Render the text within a generic container #}
+{% embed "@layout/container/container.twig" with {
+  container__component_width: text__width|default('compressed'),
+  container__component_alignment: text__alignment|default('center'),
+  container__heading: text_field__heading,
+  container__text: text__text,
+	container__bg_color: text__bg_color,
+	container__modifiers: text_field__container_modifiers,
+}%}
+	{% block container__content %}
+		<div {{ bem('text', text__modifiers, text__block_name ) }}>
+			{{ text }}
+		</div>
+	{% endblock %}
+{% endembed %}
diff --git a/src/components/text/heading/heading.component.yml b/src/components/typography/heading/heading.component.yml
similarity index 100%
rename from src/components/text/heading/heading.component.yml
rename to src/components/typography/heading/heading.component.yml
diff --git a/src/components/text/heading/heading.scss b/src/components/typography/heading/heading.scss
similarity index 59%
rename from src/components/text/heading/heading.scss
rename to src/components/typography/heading/heading.scss
index 446abeb..2bd6abf 100644
--- a/src/components/text/heading/heading.scss
+++ b/src/components/typography/heading/heading.scss
@@ -32,31 +32,3 @@
 .h6 {
   @include h5;
 }
-
-/* TODO: BEM selectors should be applied to wysiwyg-created content */
-
-.text-long {
-  h1 {
-    @extend %h1;
-  }
-
-  h2 {
-    @extend %h2;
-  }
-
-  h3 {
-    @extend %h3;
-  }
-
-  h4 {
-    @extend %h4;
-  }
-
-  h5 {
-    @extend %h5;
-  }
-
-  h6 {
-    @extend %h6;
-  }
-}
diff --git a/src/components/text/heading/heading.twig b/src/components/typography/heading/heading.twig
similarity index 100%
rename from src/components/text/heading/heading.twig
rename to src/components/typography/heading/heading.twig
diff --git a/src/components/typography/text.stories.js b/src/components/typography/text.stories.js
new file mode 100644
index 0000000..2304613
--- /dev/null
+++ b/src/components/typography/text.stories.js
@@ -0,0 +1,36 @@
+import { mapDataToTwig } from '../../util/dataTransformers';
+
+/* Twigs */
+import heading from './heading/heading.twig';
+import blockquoteTemplate from './text/blockquote.twig';
+import preTemplate from './text/pre.twig';
+import paragraphTemplate from './text/inline-elements.twig';
+import codeTemplate from './text/code.twig';
+
+/* Data */
+import { props as blockquoteProps } from './text/blockquote.yml';
+import { props as headingProps } from './heading/heading.component.yml';
+import { props as codeProps } from './text/code.yml';
+
+/**
+ * Storybook Definition.
+ */
+
+const blockquoteData = mapDataToTwig(blockquoteProps.properties);
+const codeData = mapDataToTwig(codeProps.properties);
+const headingData = headingProps.example;
+
+export default { title: 'Components/Typography' };
+
+export const headings = () =>
+  `<div class="text-long"> ${headingData
+    .map((d) => heading(d))
+    .join('')}</div>`;
+
+export const blockquote = () => blockquoteTemplate(blockquoteData);
+
+export const preformatted = () => preTemplate();
+
+export const random = () => paragraphTemplate();
+
+export const code = () => codeTemplate(codeData);
diff --git a/src/components/text/text/_body.scss b/src/components/typography/text/_body.scss
similarity index 100%
rename from src/components/text/text/_body.scss
rename to src/components/typography/text/_body.scss
diff --git a/src/components/text/text/02-blockquote.twig b/src/components/typography/text/blockquote.twig
similarity index 100%
rename from src/components/text/text/02-blockquote.twig
rename to src/components/typography/text/blockquote.twig
diff --git a/src/components/text/text/blockquote.component.yml b/src/components/typography/text/blockquote.yml
similarity index 100%
rename from src/components/text/text/blockquote.component.yml
rename to src/components/typography/text/blockquote.yml
diff --git a/src/components/text/text/07-code.twig b/src/components/typography/text/code.twig
similarity index 100%
rename from src/components/text/text/07-code.twig
rename to src/components/typography/text/code.twig
diff --git a/src/components/text/text/code.component.yml b/src/components/typography/text/code.yml
similarity index 100%
rename from src/components/text/text/code.component.yml
rename to src/components/typography/text/code.yml
diff --git a/src/components/text/text/06-hr.twig b/src/components/typography/text/hr.twig
similarity index 100%
rename from src/components/text/text/06-hr.twig
rename to src/components/typography/text/hr.twig
diff --git a/src/components/text/text/03-inline-elements.twig b/src/components/typography/text/inline-elements.twig
similarity index 100%
rename from src/components/text/text/03-inline-elements.twig
rename to src/components/typography/text/inline-elements.twig
diff --git a/src/components/text/text/01-paragraph.twig b/src/components/typography/text/paragraph.twig
similarity index 100%
rename from src/components/text/text/01-paragraph.twig
rename to src/components/typography/text/paragraph.twig
diff --git a/src/components/text/text/05-pre.twig b/src/components/typography/text/pre.twig
similarity index 100%
rename from src/components/text/text/05-pre.twig
rename to src/components/typography/text/pre.twig
diff --git a/src/components/text/text/text.scss b/src/components/typography/text/text.scss
similarity index 100%
rename from src/components/text/text/text.scss
rename to src/components/typography/text/text.scss
diff --git a/src/components/text/text/text.twig b/src/components/typography/text/text.twig
similarity index 100%
rename from src/components/text/text/text.twig
rename to src/components/typography/text/text.twig
diff --git a/src/components/videos/_video-embed.twig b/src/components/video/_video-embed.twig
similarity index 100%
rename from src/components/videos/_video-embed.twig
rename to src/components/video/_video-embed.twig
diff --git a/src/components/videos/_video-html5.twig b/src/components/video/_video-html5.twig
similarity index 100%
rename from src/components/videos/_video-html5.twig
rename to src/components/video/_video-html5.twig
diff --git a/src/components/videos/video-embed.component.yml b/src/components/video/video-embed.component.yml
similarity index 100%
rename from src/components/videos/video-embed.component.yml
rename to src/components/video/video-embed.component.yml
diff --git a/src/components/videos/video-embed.js b/src/components/video/video-embed.js
similarity index 100%
rename from src/components/videos/video-embed.js
rename to src/components/video/video-embed.js
diff --git a/src/components/videos/video-html5.component.yml b/src/components/video/video-html5.component.yml
similarity index 100%
rename from src/components/videos/video-html5.component.yml
rename to src/components/video/video-html5.component.yml
diff --git a/src/components/videos/video.scss b/src/components/video/video.scss
similarity index 100%
rename from src/components/videos/video.scss
rename to src/components/video/video.scss
diff --git a/src/components/videos/videos.stories.js b/src/components/video/video.stories.js
similarity index 100%
rename from src/components/videos/videos.stories.js
rename to src/components/video/video.stories.js
diff --git a/src/components/videos/video.twig b/src/components/video/video.twig
similarity index 91%
rename from src/components/videos/video.twig
rename to src/components/video/video.twig
index 86b05ad..aa92606 100644
--- a/src/components/videos/video.twig
+++ b/src/components/video/video.twig
@@ -25,9 +25,9 @@
 
 <div {{ add_attributes(video__attributes) }}>
 	{% if video__type == 'embed' %}
-		{% include "@components/videos/_video-embed.twig" %}
+		{% include "@components/video/_video-embed.twig" %}
 	{% endif %}
 	{% if video__type == 'html5' %}
-		{% include "@components/videos/_video-html5.twig" %}
+		{% include "@components/video/_video-html5.twig" %}
 	{% endif %}
 </div>
diff --git a/src/foundation/utility/_rem-calc.scss b/src/foundation/utility/_rem-calc.scss
index 40f1d0a..dd9cb1e 100644
--- a/src/foundation/utility/_rem-calc.scss
+++ b/src/foundation/utility/_rem-calc.scss
@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:math';
 @use 'sass:meta';
 
@@ -21,7 +22,7 @@ $base-font-size: 100%;
 /// @returns {List} A list of converted values.
 @function rem-calc($values, $base: null) {
   $rem-values: ();
-  $count: length($values);
+  $count: list.length($values);
 
   // If no base is defined, defer to the global font size
   @if $base == null {
@@ -30,12 +31,12 @@ $base-font-size: 100%;
 
   // If the base font size is a %, then multiply it by 16px
   // This is because 100% font size = 16px in most all browsers
-  @if unit($base) == '%' {
+  @if math.unit($base) == '%' {
     $base: (math.div($base, 100%)) * 16px;
   }
 
   // Using rem as base allows correct scaling
-  @if unit($base) == 'rem' {
+  @if math.unit($base) == 'rem' {
     $base: strip-unit($base) * 16px;
   }
 
@@ -64,12 +65,12 @@ $base-font-size: 100%;
   }
 
   // Transform em into rem if someone hands over 'em's
-  @if unit($value) == 'em' {
+  @if math.unit($value) == 'em' {
     $value: strip-unit($value) * 1rem;
   }
 
   // Calculate rem if units for $value is not rem or em
-  @if unit($value) != 'rem' {
+  @if math.unit($value) != 'rem' {
     $value: math.div(strip-unit($value), strip-unit($base)) * 1rem;
   }
 
diff --git a/src/layout/container/container.twig b/src/layout/container/container.twig
index 81ed6cc..86bcbeb 100644
--- a/src/layout/container/container.twig
+++ b/src/layout/container/container.twig
@@ -36,7 +36,7 @@
     {% if container__heading or container__text %}
       <div {{ bem('intro', container__inner_modifiers, container__base_class) }}>
         {% if container__heading %}
-          {% include "@components/text/heading/heading.twig" with {
+          {% include "@components/typography/heading/heading.twig" with {
             heading__level: container__heading_level|default('2'),
             heading: container__heading,
             heading__blockname: container__base_class,
@@ -44,7 +44,7 @@
           } %}
         {% endif %}
         {% if container__text %}
-          {% include "@components/text/text/text.twig" with {
+          {% include "@components/typography/text/text.twig" with {
               text__blockname: container__base_class,
               text__content: container__text,
             } %}
diff --git a/src/tokens/colors/color.twig b/src/tokens/colors/color.twig
index 59bd4eb..c1aaf1f 100644
--- a/src/tokens/colors/color.twig
+++ b/src/tokens/colors/color.twig
@@ -22,9 +22,9 @@
               <span class="sb-list__label">{{ nestedColor }}</span>
               <span class="sb-list__value">{{nestedValue.value}}</span>
               <span class="sb-list__custom-property">
-                <code class="sb-custom-property-name">var(--color-{{ color|lower }}-{{nestedColor}})</code>
+                <code class="sb-custom-property-name">var(--color-{{ color|lower|replace({'emulsifyblue': 'emulsify-blue'}) }}-{{nestedColor}})</code>
               </span>
-              <span class="sb-list__visualization" style="background-color: var(--color-{{ color|lower }}-{{nestedColor}});"></span>
+              <span class="sb-list__visualization" style="background-color: var(--color-{{ color|lower|replace({'emulsifyblue': 'emulsify-blue'}) }}-{{nestedColor}});"></span>
             </li>
           {% else %}
             {% for colorFamily, colorFamilyValue in nestedValue %}
diff --git a/tokens/undefined/color.twig b/tokens/undefined/color.twig
index 59bd4eb..c1aaf1f 100644
--- a/tokens/undefined/color.twig
+++ b/tokens/undefined/color.twig
@@ -22,9 +22,9 @@
               <span class="sb-list__label">{{ nestedColor }}</span>
               <span class="sb-list__value">{{nestedValue.value}}</span>
               <span class="sb-list__custom-property">
-                <code class="sb-custom-property-name">var(--color-{{ color|lower }}-{{nestedColor}})</code>
+                <code class="sb-custom-property-name">var(--color-{{ color|lower|replace({'emulsifyblue': 'emulsify-blue'}) }}-{{nestedColor}})</code>
               </span>
-              <span class="sb-list__visualization" style="background-color: var(--color-{{ color|lower }}-{{nestedColor}});"></span>
+              <span class="sb-list__visualization" style="background-color: var(--color-{{ color|lower|replace({'emulsifyblue': 'emulsify-blue'}) }}-{{nestedColor}});"></span>
             </li>
           {% else %}
             {% for colorFamily, colorFamilyValue in nestedValue %}

From 3f104110c3325da73bda367722603ebc0e1f3493 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Fri, 18 Oct 2024 16:28:44 -0500
Subject: [PATCH 30/44] feat: adjust menu sub item spacing

---
 src/components/accordion/accordion.scss       |  4 +-
 src/components/image/image.yml                |  2 +-
 .../navigation/breadcrumbs/breadcrumbs.scss   |  2 +-
 .../navigation/main/_main-link.scss           |  7 +--
 src/tokens/tokens.scss                        | 60 +++++++++----------
 5 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index d863ed0..09f658a 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -33,7 +33,6 @@
 }
 
 .accordion-item__toggle {
-
   & {
     background: none;
     border: none;
@@ -66,7 +65,6 @@
 }
 
 .button.accordion__toggle-all {
-
   & {
     display: flex;
     gap: var(--spacing-lg);
@@ -164,7 +162,7 @@
     color: var(--accordion-color-header);
   }
 
-  &:hover{
+  &:hover {
     color: var(--accordion-color-header-hover);
 
     .accordion-item__icon {
diff --git a/src/components/image/image.yml b/src/components/image/image.yml
index 71b1992..4f0b1d1 100644
--- a/src/components/image/image.yml
+++ b/src/components/image/image.yml
@@ -30,4 +30,4 @@ responsive_images:
     image__src: 'https://picsum.photos/320/240'
     image__alt: 'A 4 by 3 image'
 image__caption: 'This is a sample caption associated with the figure.'
-image__copyright: 'Photo taken by John Doe'
\ No newline at end of file
+image__copyright: 'Photo taken by John Doe'
diff --git a/src/components/navigation/breadcrumbs/breadcrumbs.scss b/src/components/navigation/breadcrumbs/breadcrumbs.scss
index 034e182..0b746a2 100644
--- a/src/components/navigation/breadcrumbs/breadcrumbs.scss
+++ b/src/components/navigation/breadcrumbs/breadcrumbs.scss
@@ -20,7 +20,7 @@
 
 @mixin breadcrumb-spacer {
   &:not(:last-child)::after {
-    content: "/";
+    content: '/';
     margin-left: var(--spacing-md);
   }
 }
diff --git a/src/components/navigation/main/_main-link.scss b/src/components/navigation/main/_main-link.scss
index f7a573d..4032eb4 100644
--- a/src/components/navigation/main/_main-link.scss
+++ b/src/components/navigation/main/_main-link.scss
@@ -80,7 +80,7 @@
   white-space: nowrap;
   width: auto;
   margin: 0;
-  padding: var(--spacing-sm) var(--spacing-lg);
+  padding: var(--spacing-md) var(--spacing-lg);
   display: flex;
   align-content: center;
   overflow: visible;
@@ -110,7 +110,7 @@
 }
 
 .main-nav__item--level-0 {
-  &:hover { 
+  &:hover {
     background-color: var(--main-menu-color-link-bg-hover);
 
     // Make the level-0 link text color change on li hover
@@ -118,11 +118,10 @@
       color: var(--main-menu-color-link-label-hover);
     }
   }
-} 
+}
 
 .main-nav__link--level-1,
 .main-nav__link--level-2 {
-
   & {
     font-size: var(--font-size-h6);
   }
diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index 55042de..7c6bbf3 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -3,43 +3,43 @@
  */
 
 :root {
-  --colors-sb-background: #ffffff;
+  --colors-sb-background: #fff;
   --colors-sb-text-body: #00202e;
   --colors-sb-text-heading: #0080b7;
   --colors-sb-visualization: #009fe4;
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
-  --tabs-color-bg-default: #ffffff;
-  --tabs-color-bg-active: #ffffff;
-  --tabs-color-bg-hover: #ffffff;
+  --tabs-color-bg-default: #fff;
+  --tabs-color-bg-active: #fff;
+  --tabs-color-bg-hover: #fff;
   --tabs-color-text-default: #00202e;
   --tabs-color-text-active: #0080b7;
   --tabs-color-text-hover: #005f89;
   --tabs-color-border-bottom: #a9afb1;
   --tab-label: [object Object];
-  --table-color-cell-bg: #ffffff;
+  --table-color-cell-bg: #fff;
   --table-color-cell-bg-stripe: #9ce1ff;
   --table-color-cell-text: #00202e;
   --table-color-cell-icon: #005f89;
   --table-color-header-bg: #005f89;
-  --table-color-header-text: #ffffff;
+  --table-color-header-text: #fff;
   --table-color-header-icon: #9ce1ff;
   --table-color-border: #d4d7d8;
   --status-color-info-bg: #16bdde;
   --status-color-info-label: #272727;
   --status-color-danger-bg: #bd1919;
-  --status-color-danger-label: #ffffff;
+  --status-color-danger-label: #fff;
   --status-color-success-bg: #337b32;
-  --status-color-success-label: #ffffff;
+  --status-color-success-label: #fff;
   --status-color-warning-bg: #f6c40f;
-  --status-color-warning-label: #333333;
+  --status-color-warning-label: #333;
   --status-font-size-header: 1.3125rem;
   --selectdropdown-color-label: #00202e;
   --selectdropdown-color-label-disabled: #a9afb1;
-  --selectdropdown-color-button-fill: #ffffff;
+  --selectdropdown-color-button-fill: #fff;
   --selectdropdown-color-button-fill-hover: #e6f5fc;
-  --selectdropdown-color-button-fill-disabled: #ffffff;
+  --selectdropdown-color-button-fill-disabled: #fff;
   --selectdropdown-color-button-stroke: #7f878b;
   --selectdropdown-color-button-stroke-hover: #545f64;
   --selectdropdown-color-button-stroke-disabled: #a9afb1;
@@ -55,7 +55,7 @@
   --radio-color-button-stroke-disabled: #a9afb1;
   --radio-gap: 0.25rem;
   --pager-color-text-default: #29373d;
-  --pager-color-text-hover: #ffffff;
+  --pager-color-text-hover: #fff;
   --pager-color-text-focus: #0080b7;
   --pager-color-fill-hover: #0080b7;
   --pager-default: [object Object];
@@ -65,11 +65,11 @@
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
-  --utility-menu-color-bg: #ffffff;
+  --utility-menu-color-bg: #fff;
   --utility-menu-color-link-default: #006089;
   --utility-menu-color-link-hover: #0080b7;
-  --main-menu-color-bg: #ffffff;
-  --main-menu-color-link-bg: #ffffff;
+  --main-menu-color-bg: #fff;
+  --main-menu-color-link-bg: #fff;
   --main-menu-color-link-bg-hover: #9ce1ff;
   --main-menu-color-link-label: #0080b7;
   --main-menu-color-link-label-hover: #006089;
@@ -79,7 +79,7 @@
   --main-menu-color-dropdown-label-hover: #006089;
   --link-color-default: #005f89;
   --link-color-hover: #00202e;
-  --link-color-inverse: #ffffff;
+  --link-color-inverse: #fff;
   --link-color-inverse-hover: #9ce1ff;
   --link-body: [object Object];
   --input-gap: 0.5rem;
@@ -91,16 +91,16 @@
   --input-border-color: #7f878b;
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;
-  --input-bkg: #ffffff;
+  --input-bkg: #fff;
   --header-search-background: #006089;
-  --header-search-text-icon: #ffffff;
+  --header-search-text-icon: #fff;
   --footer-background-default: #006089;
-  --footer-background-light: #ffffff;
+  --footer-background-light: #fff;
   --footer-heading-default: #9ce1ff;
   --footer-heading-dark: #0080b7;
   --footer-icon-default: #9ce1ff;
   --footer-icon-dark: #0080b7;
-  --fieldset-color-bg: #ffffff;
+  --fieldset-color-bg: #fff;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
   --radius-fieldset: 0.25rem;
@@ -115,7 +115,7 @@
   --cta-color-heading-darker: #006089;
   --cta-color-eyebrow: #006089;
   --cta-color-body: #00202e;
-  --cta-color-button: #ffffff;
+  --cta-color-button: #fff;
   --cta-background: #9ce1ff;
   --cta-button-background: #009fe4;
   --cta-button-background-darker: #006089;
@@ -132,10 +132,10 @@
   --card-color-heading: #0080b7;
   --card-color-subheading: #006089;
   --button-color-bkg: #005f89;
-  --button-color-label: #ffffff;
+  --button-color-label: #fff;
   --button-color-bkg-hover: #00405b;
-  --button-color-label-hover: #ffffff;
-  --button-color-label-focus: #ffffff;
+  --button-color-label-hover: #fff;
+  --button-color-label-focus: #fff;
   --button-color-bkg-focus: #00405b;
   --button-padding-x: 1rem;
   --button-padding-x-hover: 1rem;
@@ -161,12 +161,12 @@
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
   --banner-button-text: #00202e;
-  --banner-button-border: #ffffff;
+  --banner-button-border: #fff;
   --banner-button-background: #9ce1ff;
-  --banner-text: #ffffff;
+  --banner-text: #fff;
   --banner-background: #006089;
   --banner-background-opacity: 0.75;
-  --announcement-background-default: #ffffff;
+  --announcement-background-default: #fff;
   --announcement-background-light: #9ce1ff;
   --announcement-background-dark: #006089;
   --announcement-heading-default: #0080b7;
@@ -189,13 +189,13 @@
   --color-text-body: #00202e;
   --color-text-body-lighter: #006089;
   --color-text-heading: #006089;
-  --color-text-white: #ffffff;
+  --color-text-white: #fff;
   --color-warning-default: #d80f0f;
   --color-link: #005f89;
   --color-link-hover: #00202e;
   --color-link-hover-lighter: #00405b;
-  --color-black: #000000;
-  --color-white: #ffffff;
+  --color-black: #000;
+  --color-white: #fff;
   --color-emulsify-blue-100: #e6f5fc;
   --color-emulsify-blue-200: #ccecfa;
   --color-emulsify-blue-300: #99d9f4;

From 7e27dcfafed5c627be812db3f1c56e6dec3669f2 Mon Sep 17 00:00:00 2001
From: callinmullaney <callinmullaney@users.noreply.github.com>
Date: Fri, 18 Oct 2024 21:29:30 +0000
Subject: [PATCH 31/44] feat: create tokens

---
 src/tokens/tokens.scss | 60 +++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index 7c6bbf3..55042de 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -3,43 +3,43 @@
  */
 
 :root {
-  --colors-sb-background: #fff;
+  --colors-sb-background: #ffffff;
   --colors-sb-text-body: #00202e;
   --colors-sb-text-heading: #0080b7;
   --colors-sb-visualization: #009fe4;
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
-  --tabs-color-bg-default: #fff;
-  --tabs-color-bg-active: #fff;
-  --tabs-color-bg-hover: #fff;
+  --tabs-color-bg-default: #ffffff;
+  --tabs-color-bg-active: #ffffff;
+  --tabs-color-bg-hover: #ffffff;
   --tabs-color-text-default: #00202e;
   --tabs-color-text-active: #0080b7;
   --tabs-color-text-hover: #005f89;
   --tabs-color-border-bottom: #a9afb1;
   --tab-label: [object Object];
-  --table-color-cell-bg: #fff;
+  --table-color-cell-bg: #ffffff;
   --table-color-cell-bg-stripe: #9ce1ff;
   --table-color-cell-text: #00202e;
   --table-color-cell-icon: #005f89;
   --table-color-header-bg: #005f89;
-  --table-color-header-text: #fff;
+  --table-color-header-text: #ffffff;
   --table-color-header-icon: #9ce1ff;
   --table-color-border: #d4d7d8;
   --status-color-info-bg: #16bdde;
   --status-color-info-label: #272727;
   --status-color-danger-bg: #bd1919;
-  --status-color-danger-label: #fff;
+  --status-color-danger-label: #ffffff;
   --status-color-success-bg: #337b32;
-  --status-color-success-label: #fff;
+  --status-color-success-label: #ffffff;
   --status-color-warning-bg: #f6c40f;
-  --status-color-warning-label: #333;
+  --status-color-warning-label: #333333;
   --status-font-size-header: 1.3125rem;
   --selectdropdown-color-label: #00202e;
   --selectdropdown-color-label-disabled: #a9afb1;
-  --selectdropdown-color-button-fill: #fff;
+  --selectdropdown-color-button-fill: #ffffff;
   --selectdropdown-color-button-fill-hover: #e6f5fc;
-  --selectdropdown-color-button-fill-disabled: #fff;
+  --selectdropdown-color-button-fill-disabled: #ffffff;
   --selectdropdown-color-button-stroke: #7f878b;
   --selectdropdown-color-button-stroke-hover: #545f64;
   --selectdropdown-color-button-stroke-disabled: #a9afb1;
@@ -55,7 +55,7 @@
   --radio-color-button-stroke-disabled: #a9afb1;
   --radio-gap: 0.25rem;
   --pager-color-text-default: #29373d;
-  --pager-color-text-hover: #fff;
+  --pager-color-text-hover: #ffffff;
   --pager-color-text-focus: #0080b7;
   --pager-color-fill-hover: #0080b7;
   --pager-default: [object Object];
@@ -65,11 +65,11 @@
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
-  --utility-menu-color-bg: #fff;
+  --utility-menu-color-bg: #ffffff;
   --utility-menu-color-link-default: #006089;
   --utility-menu-color-link-hover: #0080b7;
-  --main-menu-color-bg: #fff;
-  --main-menu-color-link-bg: #fff;
+  --main-menu-color-bg: #ffffff;
+  --main-menu-color-link-bg: #ffffff;
   --main-menu-color-link-bg-hover: #9ce1ff;
   --main-menu-color-link-label: #0080b7;
   --main-menu-color-link-label-hover: #006089;
@@ -79,7 +79,7 @@
   --main-menu-color-dropdown-label-hover: #006089;
   --link-color-default: #005f89;
   --link-color-hover: #00202e;
-  --link-color-inverse: #fff;
+  --link-color-inverse: #ffffff;
   --link-color-inverse-hover: #9ce1ff;
   --link-body: [object Object];
   --input-gap: 0.5rem;
@@ -91,16 +91,16 @@
   --input-border-color: #7f878b;
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;
-  --input-bkg: #fff;
+  --input-bkg: #ffffff;
   --header-search-background: #006089;
-  --header-search-text-icon: #fff;
+  --header-search-text-icon: #ffffff;
   --footer-background-default: #006089;
-  --footer-background-light: #fff;
+  --footer-background-light: #ffffff;
   --footer-heading-default: #9ce1ff;
   --footer-heading-dark: #0080b7;
   --footer-icon-default: #9ce1ff;
   --footer-icon-dark: #0080b7;
-  --fieldset-color-bg: #fff;
+  --fieldset-color-bg: #ffffff;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
   --radius-fieldset: 0.25rem;
@@ -115,7 +115,7 @@
   --cta-color-heading-darker: #006089;
   --cta-color-eyebrow: #006089;
   --cta-color-body: #00202e;
-  --cta-color-button: #fff;
+  --cta-color-button: #ffffff;
   --cta-background: #9ce1ff;
   --cta-button-background: #009fe4;
   --cta-button-background-darker: #006089;
@@ -132,10 +132,10 @@
   --card-color-heading: #0080b7;
   --card-color-subheading: #006089;
   --button-color-bkg: #005f89;
-  --button-color-label: #fff;
+  --button-color-label: #ffffff;
   --button-color-bkg-hover: #00405b;
-  --button-color-label-hover: #fff;
-  --button-color-label-focus: #fff;
+  --button-color-label-hover: #ffffff;
+  --button-color-label-focus: #ffffff;
   --button-color-bkg-focus: #00405b;
   --button-padding-x: 1rem;
   --button-padding-x-hover: 1rem;
@@ -161,12 +161,12 @@
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
   --banner-button-text: #00202e;
-  --banner-button-border: #fff;
+  --banner-button-border: #ffffff;
   --banner-button-background: #9ce1ff;
-  --banner-text: #fff;
+  --banner-text: #ffffff;
   --banner-background: #006089;
   --banner-background-opacity: 0.75;
-  --announcement-background-default: #fff;
+  --announcement-background-default: #ffffff;
   --announcement-background-light: #9ce1ff;
   --announcement-background-dark: #006089;
   --announcement-heading-default: #0080b7;
@@ -189,13 +189,13 @@
   --color-text-body: #00202e;
   --color-text-body-lighter: #006089;
   --color-text-heading: #006089;
-  --color-text-white: #fff;
+  --color-text-white: #ffffff;
   --color-warning-default: #d80f0f;
   --color-link: #005f89;
   --color-link-hover: #00202e;
   --color-link-hover-lighter: #00405b;
-  --color-black: #000;
-  --color-white: #fff;
+  --color-black: #000000;
+  --color-white: #ffffff;
   --color-emulsify-blue-100: #e6f5fc;
   --color-emulsify-blue-200: #ccecfa;
   --color-emulsify-blue-300: #99d9f4;

From 1a77bab739f0776c77052d491945c60ff3bd39a0 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Wed, 23 Oct 2024 10:14:36 -0600
Subject: [PATCH 32/44] fix(convert-components-sdc): fixes in announcement,
 accordion and breadcrumbs

---
 src/components/accordion/accordion.scss       | 124 ++++++++++--------
 src/components/announcement/announcement.scss |  13 +-
 .../navigation/breadcrumbs/breadcrumbs.scss   |   7 +-
 src/layout/container/_container.scss          |   2 +-
 4 files changed, 86 insertions(+), 60 deletions(-)

diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index 09f658a..8ff7754 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -32,6 +32,39 @@
   }
 }
 
+.button.accordion__toggle-all {
+  & {
+    display: flex;
+    gap: var(--spacing-lg);
+    align-items: center;
+    cursor: pointer;
+    padding: 0;
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-primary-regular);
+    text-transform: none;
+  }
+
+  .toggle-all__content {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+  }
+}
+
+.accordion-item__icon {
+  @include transition;
+
+  & {
+    height: var(--size-xl);
+    width: var(--size-xl);
+  }
+
+  [aria-expanded='true'] & {
+    transform: rotate(-180deg);
+    fill: var(--accordion-color-header);
+  }
+}
+
 .accordion-item__toggle {
   & {
     background: none;
@@ -50,10 +83,18 @@
 
   [data-accordion-expanded='true'] & {
     color: var(--accordion-color-header);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header);
+    }
   }
 
   &:hover {
     color: var(--accordion-color-header-hover);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header-hover);
+    }
   }
 
   .toggle__content {
@@ -64,31 +105,48 @@
   }
 }
 
-.button.accordion__toggle-all {
-  & {
-    display: flex;
-    gap: var(--spacing-lg);
-    align-items: center;
-    cursor: pointer;
-    padding: 0;
-    line-height: var(--line-height-tight);
-    font-weight: var(--font-weight-primary-regular);
-    text-transform: none;
+.accordion-item__heading {
+  font-size: var(--font-size-h4);
+  font-weight: normal;
+  display: flex;
+  color: var(--accordion-color-body);
+  margin: 0;
+
+  [data-accordion-expanded='true'] & {
+    color: var(--accordion-color-header);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header);
+    }
   }
 
-  .toggle-all__content {
-    display: flex;
-    align-items: flex-end;
-    gap: var(--spacing-md);
+  &:hover {
+    color: var(--accordion-color-header-hover);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header-hover);
+
+      [data-accordion-expanded='false'] & {
+        fill: var(--accordion-color-header);
+      }
+    }
   }
 }
 
 .button[data-button-style='clean'].accordion__toggle-all {
   color: var(--accordion-color-header-hover);
 
+  .accordion-item__icon {
+    fill: var(--accordion-color-header-hover);
+  }
+
   &:hover,
   &:focus {
     color: var(--accordion-color-header);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header);
+    }
   }
 }
 
@@ -137,44 +195,6 @@
   }
 }
 
-.accordion-item__icon {
-  @include transition;
-
-  & {
-    height: var(--size-xl);
-    width: var(--size-xl);
-  }
-
-  [aria-expanded='true'] & {
-    transform: rotate(-180deg);
-    fill: var(--accordion-color-header);
-  }
-}
-
-.accordion-item__heading {
-  font-size: var(--font-size-h4);
-  font-weight: normal;
-  display: flex;
-  color: var(--accordion-color-body);
-  margin: 0;
-
-  [data-accordion-expanded='true'] & {
-    color: var(--accordion-color-header);
-  }
-
-  &:hover {
-    color: var(--accordion-color-header-hover);
-
-    .accordion-item__icon {
-      fill: var(--accordion-color-header-hover);
-
-      [data-accordion-expanded='false'] & {
-        fill: var(--accordion-color-header-hover);
-      }
-    }
-  }
-}
-
 .accordion-item__content {
   margin-inline: 0;
   max-width: 90ch;
diff --git a/src/components/announcement/announcement.scss b/src/components/announcement/announcement.scss
index 9877ea7..eea7a7b 100644
--- a/src/components/announcement/announcement.scss
+++ b/src/components/announcement/announcement.scss
@@ -1,14 +1,23 @@
 @use '../../foundation/typography/typography' as *;
+@use '../../foundation/breakpoints/breakpoints' as *;
 
 .announcement {
   display: flex;
-  align-items: center;
-  column-gap: var(--spacing-xl);
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: var(--spacing-lg);
   padding: var(--spacing-xl);
+
+  @include breakpoint('medium') {
+    flex-direction: row;
+    column-gap: var(--spacing-xl);
+    align-items: center;
+  }
 }
 
 .announcement__icon {
   width: 3.5rem;
+  height: 3.5rem;
 }
 
 .announcement__content {
diff --git a/src/components/navigation/breadcrumbs/breadcrumbs.scss b/src/components/navigation/breadcrumbs/breadcrumbs.scss
index 0b746a2..50f138b 100644
--- a/src/components/navigation/breadcrumbs/breadcrumbs.scss
+++ b/src/components/navigation/breadcrumbs/breadcrumbs.scss
@@ -22,6 +22,8 @@
   &:not(:last-child)::after {
     content: '/';
     margin-left: var(--spacing-md);
+    color: var(--breadcrumb-text-default);
+    font-size: var(--font-size-x-small);
   }
 }
 
@@ -29,11 +31,6 @@
   display: flex;
   position: relative;
   z-index: 1;
-
-  @include breakpoint('medium') {
-    margin-left: calc(var(--spacing-lg) * -1);
-    margin-bottom: 0;
-  }
 }
 
 .breadcrumbs {
diff --git a/src/layout/container/_container.scss b/src/layout/container/_container.scss
index 49071d1..6c6b3a3 100644
--- a/src/layout/container/_container.scss
+++ b/src/layout/container/_container.scss
@@ -136,7 +136,7 @@
   &--with-bg {
     @include section-padding(2);
 
-    & {
+    &:not(:has(.breadcrumbs__wrapper)) {
       background-color: var(--color-primary-lighter);
     }
   }

From b0fbe1bce41ab8323c898ece32094c6cb2cb6840 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Wed, 23 Oct 2024 11:40:50 -0500
Subject: [PATCH 33/44] chore: rename file extension for semantic-release

---
 release.config.js => release.config.cjs | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename release.config.js => release.config.cjs (100%)

diff --git a/release.config.js b/release.config.cjs
similarity index 100%
rename from release.config.js
rename to release.config.cjs

From 55fd10d99f9e0dab4ed73f680013f7a03bbd6bbb Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Wed, 23 Oct 2024 21:08:59 -0500
Subject: [PATCH 34/44] fix: add system info for the CLI to install components

---
 project.emulsify.json       |  10 +-
 src/style.scss              |  29 -----
 src/stylesheets/mixins.scss | 228 ------------------------------------
 system.emulsify.json        | 132 +++++++++++++++++++--
 4 files changed, 132 insertions(+), 267 deletions(-)
 delete mode 100644 src/style.scss
 delete mode 100644 src/stylesheets/mixins.scss

diff --git a/project.emulsify.json b/project.emulsify.json
index 76a1062..29c9fff 100644
--- a/project.emulsify.json
+++ b/project.emulsify.json
@@ -12,8 +12,12 @@
     "checkout": "main"
   },
   "variant": {
-    "platform": "",
+    "platform": "drupal",
     "structureImplementations": [
+      {
+        "name": "components",
+        "directory": "./src/components/"
+      },
       {
         "name": "foundation",
         "directory": "./src/foundation/"
@@ -23,8 +27,8 @@
         "directory": "./src/layout/"
       },
       {
-        "name": "components",
-        "directory": "./src/components/"
+        "name": "tokens",
+        "directory": "./src/tokens/"
       }
     ]
   }
diff --git a/src/style.scss b/src/style.scss
deleted file mode 100644
index ec5e365..0000000
--- a/src/style.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-// External Libraries
-@import '~normalize.css/normalize';
-@import '~breakpoint-sass/stylesheets/breakpoint';
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
-
-// Components
-
-@import 'tokens/**/*';
-@import 'stylesheets/**/*';
-@import 'storybook-styles/**/*';
-@import 'docs/**/*';
-@import 'components/**/*';
-
-html {
-  box-sizing: border-box;
-}
-
-body {
-  color: var(--color-text-body);
-  font-family: var(--font-family-body);
-  font-size: var(--font-size-body);
-  line-height: var(--line-height-normal);
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: inherit;
-}
diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss
deleted file mode 100644
index 0f34c65..0000000
--- a/src/stylesheets/mixins.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-/*
- * General Mixins (put specific ones in component files where applicable)
-*/
-
-/* Mixin - Clearfix.
- * Adds clearfix based on http://bourbon.io/docs/#clearfix
- * use example =   @include cleafix
-*/
-
-@mixin clearfix {
-  &::after {
-    clear: both;
-    content: '';
-    display: table;
-  }
-}
-
-$outer-container-break: var(--breakpoint-sm);
-
-/// Mixin - Wrapper
-/// Outer container mixin for large screens
-@mixin wrapper(
-  $container-max-width: $max-width,
-  $outer-container-break: $small,
-  $v-margin: 0,
-  $v-padding: 0,
-  $h-padding: $space,
-  $h-padding-large: $h-padding
-) {
-  max-width: #{$container-max-width};
-  width: 100%;
-  margin: #{$v-margin} auto;
-  padding: #{$v-padding} #{$h-padding};
-
-  @include breakpoint($outer-container-break) {
-    padding: #{$v-padding} #{$h-padding-large};
-  }
-
-  @include breakpoint($container-max-width) {
-    padding-left: calc(
-      #{$h-padding-large} + calc(-50vw + calc(#{$container-max-width} / 2))
-    );
-    padding-right: calc(
-      #{$h-padding-large} + calc(-50vw + calc(#{$container-max-width} / 2))
-    );
-  }
-}
-
-// Mixin - Standard Margin
-@mixin margin {
-  margin-bottom: 1em;
-}
-
-@mixin no-bottom {
-  margin-bottom: 0;
-}
-
-@mixin list-reset {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-@mixin heading-xl(
-  $font-family: var(--font-family-heading),
-  $font-size: var(--font-size-h1),
-  $line-height: var(--line-height-none),
-  $color: var(--color-text-heading),
-  $color-link: inherit,
-  $color-link-hover: inherit,
-  $font-weight: 700,
-  $margin: var(--spacing-xl) 0 var(--spacing-lg)
-) {
-  color: $color;
-  font-family: $font-family;
-  font-weight: $font-weight;
-  font-style: normal;
-  font-size: $font-size;
-  line-height: $line-height;
-  margin: $margin;
-  width: auto;
-  text-wrap: balance;
-
-  &__link {
-    color: $color-link;
-
-    &:hover {
-      color: $color-link-hover;
-    }
-  }
-}
-
-@mixin heading-large(
-  $font-family: var(--font-family-heading),
-  $font-size: var(--font-size-h2),
-  $line-height: var(--line-height-none),
-  $color: var(--color-text-heading),
-  $color-link: inherit,
-  $color-link-hover: inherit,
-  $font-weight: 700,
-  $margin: var(--spacing-xl) 0 var(--spacing-lg)
-) {
-  color: $color;
-  font-family: $font-family;
-  font-weight: $font-weight;
-  font-style: normal;
-  font-size: $font-size;
-  line-height: $line-height;
-  margin: $margin;
-  width: auto;
-  text-wrap: balance;
-
-  &__link {
-    color: $color-link;
-
-    &:hover {
-      color: $color-link-hover;
-    }
-  }
-}
-
-@mixin heading-medium(
-  $font-family: var(--font-family-heading),
-  $font-size: var(--font-size-h3),
-  $line-height: var(--line-height-tight),
-  $color: var(--color-text-heading),
-  $color-link: inherit,
-  $color-link-hover: inherit,
-  $font-weight: 700,
-  $margin: var(--spacing-xl) 0 var(--spacing-lg)
-) {
-  color: $color;
-  font-family: $font-family;
-  font-weight: $font-weight;
-  font-style: normal;
-  font-size: $font-size;
-  line-height: $line-height;
-  margin: $margin;
-  width: auto;
-  text-wrap: balance;
-
-  &__link {
-    color: $color-link;
-
-    &:hover {
-      color: $color-link-hover;
-    }
-  }
-}
-
-@mixin heading-small(
-  $font-family: var(--font-family-heading),
-  $font-size: var(--font-size-h4),
-  $line-height: var(--line-height-tight),
-  $color: var(--color-text-heading),
-  $color-link: inherit,
-  $color-link-hover: inherit,
-  $font-weight: 600,
-  $margin: var(--spacing-xl) 0 var(--spacing-lg)
-) {
-  color: $color;
-  font-family: $font-family;
-  font-weight: $font-weight;
-  font-style: normal;
-  font-size: $font-size;
-  line-height: $line-height;
-  margin: $margin;
-  width: auto;
-  text-wrap: balance;
-
-  &__link {
-    color: $color-link;
-
-    &:hover {
-      color: $color-link-hover;
-    }
-  }
-}
-
-@mixin heading-xs(
-  $font-family: var(--font-family-heading),
-  $font-size: var(--font-size-h5),
-  $line-height: var(--line-height-tight),
-  $color: var(--color-text-heading),
-  $color-link: inherit,
-  $color-link-hover: inherit,
-  $font-weight: 600,
-  $margin: var(--spacing-2xl) 0 var(--spacing-lg)
-) {
-  color: $color;
-  font-family: $font-family;
-  font-weight: $font-weight;
-  font-style: normal;
-  font-size: $font-size;
-  line-height: $line-height;
-  margin: $margin;
-  width: auto;
-  text-wrap: balance;
-
-  &__link {
-    color: $color-link;
-
-    &:hover {
-      color: $color-link-hover;
-    }
-  }
-}
-
-@mixin link {
-  color: var(--link-color-default);
-  transition: all 0.15s;
-
-  &:hover {
-    color: var(--link-color-hover);
-  }
-}
-
-@mixin sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
diff --git a/system.emulsify.json b/system.emulsify.json
index 2dd17fc..993011e 100644
--- a/system.emulsify.json
+++ b/system.emulsify.json
@@ -12,37 +12,155 @@
     {
       "platform": "drupal",
       "structureImplementations": [
+        {
+          "name": "components",
+          "directory": "./src/components/"
+        }
+      ],
+      "directories": [
         {
           "name": "foundation",
-          "directory": "./src/foundation/"
+          "path": "./src/foundation",
+          "destinationPath": "./src/foundation",
+          "description": "Contains foundational sass functions for all components."
         },
         {
           "name": "layout",
-          "directory": "./src/layout/"
+          "path": "./src/layout",
+          "destinationPath": "./src/layout",
+          "description": "Contains base layout components"
         },
         {
-          "name": "components",
-          "directory": "./src/components/"
+          "name": "tokens",
+          "path": "./src/tokens",
+          "destinationPath": "./src/tokens",
+          "description": "Contains all the token stories"
+        },
+        {
+          "name": "util",
+          "path": "./src/util",
+          "destinationPath": "./src/util",
+          "description": "Various helper scripts for constructing stories"
         }
       ],
       "components": [
         {
-          "name": "images",
+          "name": "accordion",
+          "structure": "components",
+          "dependency": ["button", "container", "icons", "typography"]
+        },
+        {
+          "name": "announcement",
+          "structure": "components",
+          "dependency": ["button", "icons", "typography"]
+        },
+        {
+          "name": "audio-player",
+          "structure": "components",
+          "dependency": []
+        },
+        {
+          "name": "blockquote",
+          "structure": "components",
+          "dependency": ["typography"]
+        },
+        {
+          "name": "button",
+          "structure": "components",
+          "required": true,
+          "dependency": ["icons"]
+        },
+        {
+          "name": "card",
+          "structure": "components",
+          "required": true,
+          "dependency": ["link", "image", "typography"]
+        },
+        {
+          "name": "forms",
+          "structure": "components",
+          "required": true,
+          "dependency": []
+        },
+        {
+          "name": "icons",
+          "structure": "components",
+          "required": true,
+          "dependency": []
+        },
+        {
+          "name": "image",
           "structure": "components",
           "required": true,
           "dependency": []
         },
         {
-          "name": "links",
+          "name": "link",
           "structure": "components",
           "required": true,
           "dependency": []
         },
+        {
+          "name": "lists",
+          "structure": "components",
+          "required": true,
+          "dependency": []
+        },
+        {
+          "name": "logo",
+          "structure": "components",
+          "dependency": ["link", "image"]
+        },
+        {
+          "name": "media-box",
+          "structure": "components",
+          "dependency": ["container", "image", "video"]
+        },
+        {
+          "name": "navigation",
+          "structure": "components",
+          "required": true,
+          "dependency": ["button", "link", "list", "icons"]
+        },
+        {
+          "name": "status",
+          "structure": "components",
+          "required": true,
+          "dependency": []
+        },
+        {
+          "name": "tables",
+          "structure": "components",
+          "required": true,
+          "dependency": []
+        },
+        {
+          "name": "tabs",
+          "structure": "components",
+          "dependency": ["button", "container"]
+        },
         {
           "name": "text",
           "structure": "components",
           "required": true,
-          "dependency": ["links"]
+          "dependency": ["container"]
+        },
+        {
+          "name": "text-with-image",
+          "structure": "components",
+          "dependency": ["container", "image", "link", "typography"]
+        },
+        {
+          "name": "typography",
+          "structure": "components",
+          "required": true,
+          "dependency": []
+        },
+        {
+          "name": "video",
+          "structure": "components",
+          "required": true,
+          "dependency": []
         }
       ]
     }

From 9fed8232f93a836888dec4198b6ff39c1e427a34 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Thu, 24 Oct 2024 12:22:59 -0500
Subject: [PATCH 35/44] fix: add missing files to system install config

---
 src/foundation/typography/_fonts.scss | 163 ++------------------------
 system.emulsify.json                  |  14 +++
 2 files changed, 23 insertions(+), 154 deletions(-)

diff --git a/src/foundation/typography/_fonts.scss b/src/foundation/typography/_fonts.scss
index 6e4fb72..c0ea80f 100644
--- a/src/foundation/typography/_fonts.scss
+++ b/src/foundation/typography/_fonts.scss
@@ -1,154 +1,9 @@
-$font-url: '../../assets/fonts';
-
-/* Inter */
-
-@font-face {
-  font-family: Inter;
-  src: url('#{$font-url}/inter/Inter-Black.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  src: url('#{$font-url}/inter/Inter-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  src: url('#{$font-url}/inter/Inter-ExtraBold.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  src: url('#{$font-url}/inter/Inter-ExtraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  src: url('#{$font-url}/inter/Inter-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  src: url('#{$font-url}/inter/Inter-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  src: url('#{$font-url}/inter/Inter-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  src: url('#{$font-url}/inter/Inter-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  src: url('#{$font-url}/inter/Inter-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Sentinel */
-
-@font-face {
-  font-family: Sentinel;
-  src:
-    url('#{$font-url}/sentinel/Sentinel-Black.ttf') format('truetype'),
-    url('#{$font-url}/sentinel/Sentinel-Black.woff') format('woff'),
-    url('#{$font-url}/sentinel/Sentinel-Black.woff2') format('woff2');
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Sentinel;
-  src:
-    url('#{$font-url}/sentinel/Sentinel-Bold.woff') format('truetype'),
-    url('#{$font-url}/sentinel/Sentinel-Bold.woff') format('woff'),
-    url('#{$font-url}/sentinel/Sentinel-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Sentinel;
-  src:
-    url('#{$font-url}/sentinel/Sentinel-Light.woff') format('truetype'),
-    url('#{$font-url}/sentinel/Sentinel-Light.woff') format('woff'),
-    url('#{$font-url}/sentinel/Sentinel-Light.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Sentinel;
-  src:
-    url('#{$font-url}/sentinel/Sentinel-LightItalic.woff') format('truetype'),
-    url('#{$font-url}/sentinel/Sentinel-LightItalic.woff') format('woff'),
-    url('#{$font-url}/sentinel/Sentinel-LightItalic.woff2') format('woff2');
-  font-weight: 300;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Sentinel;
-  src:
-    url('#{$font-url}/sentinel/Sentinel-Medium.woff') format('truetype'),
-    url('#{$font-url}/sentinel/Sentinel-Medium.woff') format('woff'),
-    url('#{$font-url}/sentinel/Sentinel-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Sentinel;
-  src:
-    url('#{$font-url}/sentinel/Sentinel-MediumItalic.woff') format('truetype'),
-    url('#{$font-url}/sentinel/Sentinel-MediumItalic.woff') format('woff'),
-    url('#{$font-url}/sentinel/Sentinel-MediumItalic.woff2') format('woff2');
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Sentinel;
-  src:
-    url('#{$font-url}/sentinel/Sentinel-Semibold.woff') format('truetype'),
-    url('#{$font-url}/sentinel/Sentinel-Semibold.woff') format('woff'),
-    url('#{$font-url}/sentinel/Sentinel-Semibold.woff2') format('woff2');
-  font-weight: 600;
-  font-style: italic;
-  font-display: swap;
-}
+// $font-url: '../../assets/fonts';
+
+// @font-face {
+//   font-family: [font-family];
+//   src: url('#{$font-url}/[font-filename]') format('truetype');
+//   font-weight: 500;
+//   font-style: normal;
+//   font-display: swap;
+// }
diff --git a/system.emulsify.json b/system.emulsify.json
index 993011e..07f1152 100644
--- a/system.emulsify.json
+++ b/system.emulsify.json
@@ -43,6 +43,20 @@
           "description": "Various helper scripts for constructing stories"
         }
       ],
+      "files": [
+        {
+          "name": "configma",
+          "path": "./config/configma.json",
+          "destinationPath": "./config/configma.json",
+          "description": "Figma configuration file"
+        },
+        {
+          "name": "sd.config",
+          "path": "./config/sd.config.json",
+          "destinationPath": "./config/sd.config.json",
+          "description": "Style Dictionary configuration"
+        }
+      ],
       "components": [
         {
           "name": "accordion",

From 26ed4257fb8fd3a8176a2c0bc7d706a1a1d3d8a1 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Thu, 24 Oct 2024 13:28:49 -0500
Subject: [PATCH 36/44] fix: add icons and missing config files to system
 config

---
 src/layout/container/container.twig |  1 -
 src/tokens/tokens.scss              | 60 +++++++++----------
 system.emulsify.json                | 90 +++++++++++++++++++++++++++++
 3 files changed, 120 insertions(+), 31 deletions(-)

diff --git a/src/layout/container/container.twig b/src/layout/container/container.twig
index 86bcbeb..c5e12c5 100644
--- a/src/layout/container/container.twig
+++ b/src/layout/container/container.twig
@@ -54,7 +54,6 @@
 
     {% block container__content %}
       {% include "@layout/placeholder/placeholder.twig" with { place_holder: "Placeholder Content" } %}
-      {% include "emulsify-ui-kit:placeholder" with { place_holder: "Placeholder Content" } %}
     {% endblock %}
   </div>
   {% block container__suffix %}{% endblock %}
diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index 55042de..7c6bbf3 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -3,43 +3,43 @@
  */
 
 :root {
-  --colors-sb-background: #ffffff;
+  --colors-sb-background: #fff;
   --colors-sb-text-body: #00202e;
   --colors-sb-text-heading: #0080b7;
   --colors-sb-visualization: #009fe4;
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
-  --tabs-color-bg-default: #ffffff;
-  --tabs-color-bg-active: #ffffff;
-  --tabs-color-bg-hover: #ffffff;
+  --tabs-color-bg-default: #fff;
+  --tabs-color-bg-active: #fff;
+  --tabs-color-bg-hover: #fff;
   --tabs-color-text-default: #00202e;
   --tabs-color-text-active: #0080b7;
   --tabs-color-text-hover: #005f89;
   --tabs-color-border-bottom: #a9afb1;
   --tab-label: [object Object];
-  --table-color-cell-bg: #ffffff;
+  --table-color-cell-bg: #fff;
   --table-color-cell-bg-stripe: #9ce1ff;
   --table-color-cell-text: #00202e;
   --table-color-cell-icon: #005f89;
   --table-color-header-bg: #005f89;
-  --table-color-header-text: #ffffff;
+  --table-color-header-text: #fff;
   --table-color-header-icon: #9ce1ff;
   --table-color-border: #d4d7d8;
   --status-color-info-bg: #16bdde;
   --status-color-info-label: #272727;
   --status-color-danger-bg: #bd1919;
-  --status-color-danger-label: #ffffff;
+  --status-color-danger-label: #fff;
   --status-color-success-bg: #337b32;
-  --status-color-success-label: #ffffff;
+  --status-color-success-label: #fff;
   --status-color-warning-bg: #f6c40f;
-  --status-color-warning-label: #333333;
+  --status-color-warning-label: #333;
   --status-font-size-header: 1.3125rem;
   --selectdropdown-color-label: #00202e;
   --selectdropdown-color-label-disabled: #a9afb1;
-  --selectdropdown-color-button-fill: #ffffff;
+  --selectdropdown-color-button-fill: #fff;
   --selectdropdown-color-button-fill-hover: #e6f5fc;
-  --selectdropdown-color-button-fill-disabled: #ffffff;
+  --selectdropdown-color-button-fill-disabled: #fff;
   --selectdropdown-color-button-stroke: #7f878b;
   --selectdropdown-color-button-stroke-hover: #545f64;
   --selectdropdown-color-button-stroke-disabled: #a9afb1;
@@ -55,7 +55,7 @@
   --radio-color-button-stroke-disabled: #a9afb1;
   --radio-gap: 0.25rem;
   --pager-color-text-default: #29373d;
-  --pager-color-text-hover: #ffffff;
+  --pager-color-text-hover: #fff;
   --pager-color-text-focus: #0080b7;
   --pager-color-fill-hover: #0080b7;
   --pager-default: [object Object];
@@ -65,11 +65,11 @@
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
-  --utility-menu-color-bg: #ffffff;
+  --utility-menu-color-bg: #fff;
   --utility-menu-color-link-default: #006089;
   --utility-menu-color-link-hover: #0080b7;
-  --main-menu-color-bg: #ffffff;
-  --main-menu-color-link-bg: #ffffff;
+  --main-menu-color-bg: #fff;
+  --main-menu-color-link-bg: #fff;
   --main-menu-color-link-bg-hover: #9ce1ff;
   --main-menu-color-link-label: #0080b7;
   --main-menu-color-link-label-hover: #006089;
@@ -79,7 +79,7 @@
   --main-menu-color-dropdown-label-hover: #006089;
   --link-color-default: #005f89;
   --link-color-hover: #00202e;
-  --link-color-inverse: #ffffff;
+  --link-color-inverse: #fff;
   --link-color-inverse-hover: #9ce1ff;
   --link-body: [object Object];
   --input-gap: 0.5rem;
@@ -91,16 +91,16 @@
   --input-border-color: #7f878b;
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;
-  --input-bkg: #ffffff;
+  --input-bkg: #fff;
   --header-search-background: #006089;
-  --header-search-text-icon: #ffffff;
+  --header-search-text-icon: #fff;
   --footer-background-default: #006089;
-  --footer-background-light: #ffffff;
+  --footer-background-light: #fff;
   --footer-heading-default: #9ce1ff;
   --footer-heading-dark: #0080b7;
   --footer-icon-default: #9ce1ff;
   --footer-icon-dark: #0080b7;
-  --fieldset-color-bg: #ffffff;
+  --fieldset-color-bg: #fff;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
   --radius-fieldset: 0.25rem;
@@ -115,7 +115,7 @@
   --cta-color-heading-darker: #006089;
   --cta-color-eyebrow: #006089;
   --cta-color-body: #00202e;
-  --cta-color-button: #ffffff;
+  --cta-color-button: #fff;
   --cta-background: #9ce1ff;
   --cta-button-background: #009fe4;
   --cta-button-background-darker: #006089;
@@ -132,10 +132,10 @@
   --card-color-heading: #0080b7;
   --card-color-subheading: #006089;
   --button-color-bkg: #005f89;
-  --button-color-label: #ffffff;
+  --button-color-label: #fff;
   --button-color-bkg-hover: #00405b;
-  --button-color-label-hover: #ffffff;
-  --button-color-label-focus: #ffffff;
+  --button-color-label-hover: #fff;
+  --button-color-label-focus: #fff;
   --button-color-bkg-focus: #00405b;
   --button-padding-x: 1rem;
   --button-padding-x-hover: 1rem;
@@ -161,12 +161,12 @@
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
   --banner-button-text: #00202e;
-  --banner-button-border: #ffffff;
+  --banner-button-border: #fff;
   --banner-button-background: #9ce1ff;
-  --banner-text: #ffffff;
+  --banner-text: #fff;
   --banner-background: #006089;
   --banner-background-opacity: 0.75;
-  --announcement-background-default: #ffffff;
+  --announcement-background-default: #fff;
   --announcement-background-light: #9ce1ff;
   --announcement-background-dark: #006089;
   --announcement-heading-default: #0080b7;
@@ -189,13 +189,13 @@
   --color-text-body: #00202e;
   --color-text-body-lighter: #006089;
   --color-text-heading: #006089;
-  --color-text-white: #ffffff;
+  --color-text-white: #fff;
   --color-warning-default: #d80f0f;
   --color-link: #005f89;
   --color-link-hover: #00202e;
   --color-link-hover-lighter: #00405b;
-  --color-black: #000000;
-  --color-white: #ffffff;
+  --color-black: #000;
+  --color-white: #fff;
   --color-emulsify-blue-100: #e6f5fc;
   --color-emulsify-blue-200: #ccecfa;
   --color-emulsify-blue-300: #99d9f4;
diff --git a/system.emulsify.json b/system.emulsify.json
index 07f1152..7535eb4 100644
--- a/system.emulsify.json
+++ b/system.emulsify.json
@@ -55,6 +55,96 @@
           "path": "./config/sd.config.json",
           "destinationPath": "./config/sd.config.json",
           "description": "Style Dictionary configuration"
+        },
+        {
+          "name": "icon-angle-down",
+          "path": "./assets/icons/angle-down.svg",
+          "destinationPath": "./assets/icons/angle-down.svg",
+          "description": "Icon - Angle Down"
+        },
+        {
+          "name": "icon-arrow-left",
+          "path": "./assets/icons/arrowLeft.svg",
+          "destinationPath": "./assets/icons/arrowLeft.svg",
+          "description": "Icon - Arrow Left"
+        },
+        {
+          "name": "icon-arrow-right",
+          "path": "./assets/icons/arrowRight.svg",
+          "destinationPath": "./assets/icons/arrowRight.svg",
+          "description": "Icon - Arrow Right"
+        },
+        {
+          "name": "icon-chevron-down",
+          "path": "./assets/icons/chevron-down.svg",
+          "destinationPath": "./assets/icons/chevron-down.svg",
+          "description": "Icon - Chevron Down"
+        },
+        {
+          "name": "icon-chevron-left",
+          "path": "./assets/icons/chevronLeft.svg",
+          "destinationPath": "./assets/icons/chevronLeft.svg",
+          "description": "Icon - Chevron Left"
+        },
+        {
+          "name": "icon-chevron-right",
+          "path": "./assets/icons/chevronRight.svg",
+          "destinationPath": "./assets/icons/chevronRight.svg",
+          "description": "Icon - Chevron Right"
+        },
+        {
+          "name": "icon-circle-info",
+          "path": "./assets/icons/circle-info.svg",
+          "destinationPath": "./assets/icons/circle-info.svg",
+          "description": "Icon - Circle Info"
+        },
+        {
+          "name": "icon-facebook",
+          "path": "./assets/icons/facebook.svg",
+          "destinationPath": "./assets/icons/facebook.svg",
+          "description": "Icon - Facebook"
+        },
+        {
+          "name": "icon-instagram",
+          "path": "./assets/icons/instagram.svg",
+          "destinationPath": "./assets/icons/instagram.svg",
+          "description": "Icon - Instagram"
+        },
+        {
+          "name": "icon-linkedin",
+          "path": "./assets/icons/linkedin.svg",
+          "destinationPath": "./assets/icons/linkedin.svg",
+          "description": "Icon - Linkedin"
+        },
+        {
+          "name": "icon-menu-close",
+          "path": "./assets/icons/menu-close.svg",
+          "destinationPath": "./assets/icons/menu-close.svg",
+          "description": "Icon - Menu Close"
+        },
+        {
+          "name": "icon-menu",
+          "path": "./assets/icons/menu.svg",
+          "destinationPath": "./assets/icons/menu.svg",
+          "description": "Icon - Menu"
+        },
+        {
+          "name": "icon-star-solid",
+          "path": "./assets/icons/star-solid.svg",
+          "destinationPath": "./assets/icons/star-solid.svg",
+          "description": "Icon - Star Solid"
+        },
+        {
+          "name": "icon-triangle-exclamation",
+          "path": "./assets/icons/triangle-exclamation.svg",
+          "destinationPath": "./assets/icons/triangle-exclamation.svg",
+          "description": "Icon - Triangle Exclamation"
+        },
+        {
+          "name": "icon-twitter",
+          "path": "./assets/icons/twitter.svg",
+          "destinationPath": "./assets/icons/twitter.svg",
+          "description": "Icon - Twitter"
         }
       ],
       "components": [

From b2d30eae6664faf220d308a061c04fe85bec963a Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Thu, 24 Oct 2024 13:38:15 -0500
Subject: [PATCH 37/44] chore: use WACAG 2.2 AA standard

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ae62895..61fc178 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 # Emulsify UI kit vision
 
-The Emulsify UI Kit is a tool for designers and front-end engineers to build high-quality user interfaces effectively and efficiently while maintaining WCAG 2.1 AA standards and project performance goals.
+The Emulsify UI Kit is a tool for designers and front-end engineers to build high-quality user interfaces effectively and efficiently while maintaining WCAG 2.2 AA standards and project performance goals.
 
 The Emulsify UI Kit gives users access to a library of prebuilt tokens and components that follow accessibility best practices and are easy to customize. The components in the kit are fully responsive, carefully designed, and can be implemented for modification in every project.
 

From 542e60ca1c4d7be5483dae2753394e240d3c602e Mon Sep 17 00:00:00 2001
From: callinmullaney <callinmullaney@users.noreply.github.com>
Date: Thu, 24 Oct 2024 18:41:00 +0000
Subject: [PATCH 38/44] feat: create tokens

---
 src/tokens/tokens.scss | 60 +++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index 7c6bbf3..55042de 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -3,43 +3,43 @@
  */
 
 :root {
-  --colors-sb-background: #fff;
+  --colors-sb-background: #ffffff;
   --colors-sb-text-body: #00202e;
   --colors-sb-text-heading: #0080b7;
   --colors-sb-visualization: #009fe4;
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
-  --tabs-color-bg-default: #fff;
-  --tabs-color-bg-active: #fff;
-  --tabs-color-bg-hover: #fff;
+  --tabs-color-bg-default: #ffffff;
+  --tabs-color-bg-active: #ffffff;
+  --tabs-color-bg-hover: #ffffff;
   --tabs-color-text-default: #00202e;
   --tabs-color-text-active: #0080b7;
   --tabs-color-text-hover: #005f89;
   --tabs-color-border-bottom: #a9afb1;
   --tab-label: [object Object];
-  --table-color-cell-bg: #fff;
+  --table-color-cell-bg: #ffffff;
   --table-color-cell-bg-stripe: #9ce1ff;
   --table-color-cell-text: #00202e;
   --table-color-cell-icon: #005f89;
   --table-color-header-bg: #005f89;
-  --table-color-header-text: #fff;
+  --table-color-header-text: #ffffff;
   --table-color-header-icon: #9ce1ff;
   --table-color-border: #d4d7d8;
   --status-color-info-bg: #16bdde;
   --status-color-info-label: #272727;
   --status-color-danger-bg: #bd1919;
-  --status-color-danger-label: #fff;
+  --status-color-danger-label: #ffffff;
   --status-color-success-bg: #337b32;
-  --status-color-success-label: #fff;
+  --status-color-success-label: #ffffff;
   --status-color-warning-bg: #f6c40f;
-  --status-color-warning-label: #333;
+  --status-color-warning-label: #333333;
   --status-font-size-header: 1.3125rem;
   --selectdropdown-color-label: #00202e;
   --selectdropdown-color-label-disabled: #a9afb1;
-  --selectdropdown-color-button-fill: #fff;
+  --selectdropdown-color-button-fill: #ffffff;
   --selectdropdown-color-button-fill-hover: #e6f5fc;
-  --selectdropdown-color-button-fill-disabled: #fff;
+  --selectdropdown-color-button-fill-disabled: #ffffff;
   --selectdropdown-color-button-stroke: #7f878b;
   --selectdropdown-color-button-stroke-hover: #545f64;
   --selectdropdown-color-button-stroke-disabled: #a9afb1;
@@ -55,7 +55,7 @@
   --radio-color-button-stroke-disabled: #a9afb1;
   --radio-gap: 0.25rem;
   --pager-color-text-default: #29373d;
-  --pager-color-text-hover: #fff;
+  --pager-color-text-hover: #ffffff;
   --pager-color-text-focus: #0080b7;
   --pager-color-fill-hover: #0080b7;
   --pager-default: [object Object];
@@ -65,11 +65,11 @@
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
-  --utility-menu-color-bg: #fff;
+  --utility-menu-color-bg: #ffffff;
   --utility-menu-color-link-default: #006089;
   --utility-menu-color-link-hover: #0080b7;
-  --main-menu-color-bg: #fff;
-  --main-menu-color-link-bg: #fff;
+  --main-menu-color-bg: #ffffff;
+  --main-menu-color-link-bg: #ffffff;
   --main-menu-color-link-bg-hover: #9ce1ff;
   --main-menu-color-link-label: #0080b7;
   --main-menu-color-link-label-hover: #006089;
@@ -79,7 +79,7 @@
   --main-menu-color-dropdown-label-hover: #006089;
   --link-color-default: #005f89;
   --link-color-hover: #00202e;
-  --link-color-inverse: #fff;
+  --link-color-inverse: #ffffff;
   --link-color-inverse-hover: #9ce1ff;
   --link-body: [object Object];
   --input-gap: 0.5rem;
@@ -91,16 +91,16 @@
   --input-border-color: #7f878b;
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;
-  --input-bkg: #fff;
+  --input-bkg: #ffffff;
   --header-search-background: #006089;
-  --header-search-text-icon: #fff;
+  --header-search-text-icon: #ffffff;
   --footer-background-default: #006089;
-  --footer-background-light: #fff;
+  --footer-background-light: #ffffff;
   --footer-heading-default: #9ce1ff;
   --footer-heading-dark: #0080b7;
   --footer-icon-default: #9ce1ff;
   --footer-icon-dark: #0080b7;
-  --fieldset-color-bg: #fff;
+  --fieldset-color-bg: #ffffff;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
   --radius-fieldset: 0.25rem;
@@ -115,7 +115,7 @@
   --cta-color-heading-darker: #006089;
   --cta-color-eyebrow: #006089;
   --cta-color-body: #00202e;
-  --cta-color-button: #fff;
+  --cta-color-button: #ffffff;
   --cta-background: #9ce1ff;
   --cta-button-background: #009fe4;
   --cta-button-background-darker: #006089;
@@ -132,10 +132,10 @@
   --card-color-heading: #0080b7;
   --card-color-subheading: #006089;
   --button-color-bkg: #005f89;
-  --button-color-label: #fff;
+  --button-color-label: #ffffff;
   --button-color-bkg-hover: #00405b;
-  --button-color-label-hover: #fff;
-  --button-color-label-focus: #fff;
+  --button-color-label-hover: #ffffff;
+  --button-color-label-focus: #ffffff;
   --button-color-bkg-focus: #00405b;
   --button-padding-x: 1rem;
   --button-padding-x-hover: 1rem;
@@ -161,12 +161,12 @@
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
   --banner-button-text: #00202e;
-  --banner-button-border: #fff;
+  --banner-button-border: #ffffff;
   --banner-button-background: #9ce1ff;
-  --banner-text: #fff;
+  --banner-text: #ffffff;
   --banner-background: #006089;
   --banner-background-opacity: 0.75;
-  --announcement-background-default: #fff;
+  --announcement-background-default: #ffffff;
   --announcement-background-light: #9ce1ff;
   --announcement-background-dark: #006089;
   --announcement-heading-default: #0080b7;
@@ -189,13 +189,13 @@
   --color-text-body: #00202e;
   --color-text-body-lighter: #006089;
   --color-text-heading: #006089;
-  --color-text-white: #fff;
+  --color-text-white: #ffffff;
   --color-warning-default: #d80f0f;
   --color-link: #005f89;
   --color-link-hover: #00202e;
   --color-link-hover-lighter: #00405b;
-  --color-black: #000;
-  --color-white: #fff;
+  --color-black: #000000;
+  --color-white: #ffffff;
   --color-emulsify-blue-100: #e6f5fc;
   --color-emulsify-blue-200: #ccecfa;
   --color-emulsify-blue-300: #99d9f4;

From f7d1c9e4eff6f6a66e82ef8e140ab9a5395e4fee Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Thu, 24 Oct 2024 14:37:28 -0500
Subject: [PATCH 39/44] fix: develop command should generate dist directory
 before storybook runs

---
 package-lock.json | 4 ++--
 package.json      | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6e698e7..d2272ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "Emulsify UI Kit",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "Emulsify UI Kit",
-      "version": "1.0.0",
+      "version": "1.0.3",
       "license": "ISC",
       "dependencies": {
         "@emulsify/core": "^2.3.0",
diff --git a/package.json b/package.json
index 0cb54a5..289d6d4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Emulsify UI Kit",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Emulsify UI Kit is the default Emulsify system that include design token integration with Figma.",
   "main": "index.js",
   "type": "module",
@@ -9,7 +9,7 @@
     "build": "webpack --config node_modules/@emulsify/core/config/webpack/webpack.prod.js",
     "build-dev": "webpack --config node_modules/@emulsify/core/config/webpack/webpack.dev.js",
     "coverage": "npm run test && open-cli .coverage/lcov-report/index.html",
-    "develop": "concurrently --raw \"npm run webpack\" \"npm run storybook\"",
+    "develop": "npm run build-dev && concurrently --raw \"npm run webpack\" \"npm run storybook\"",
     "format": "npm run lint-fix; npm run prettier-fix",
     "husky:commit-msg": "commitlint --edit $1",
     "husky:pre-commit": "lint-staged",
@@ -24,7 +24,7 @@
     "storybook": "storybook dev -c node_modules/@emulsify/core/.storybook --ci -p 6006",
     "storybook-build": "npm run build && storybook build -c node_modules/@emulsify/core/.storybook -o .out",
     "storybook-deploy": "storybook-to-ghpages -o .out",
-    "style-dictionary:build": "node ./src/tokens/tokensTransform.js",
+    "style-dictionary:build": "node ./src/tokens/tokensTransform.mjs",
     "test": "jest --coverage  --config ./config/jest.config.js",
     "tokens:build": "npm run tokens:transform && npm run style-dictionary:build",
     "tokens:transform": "token-transformer ./src/tokens/figma.tokens.json ./src/tokens/transformed.tokens.json",

From a468685582568fbba7b93ef86c35fc9280e2d003 Mon Sep 17 00:00:00 2001
From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org>
Date: Thu, 24 Oct 2024 15:05:26 -0500
Subject: [PATCH 40/44] chore: version bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 289d6d4..acb576e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Emulsify UI Kit",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Emulsify UI Kit is the default Emulsify system that include design token integration with Figma.",
   "main": "index.js",
   "type": "module",

From ed9c0de56072b6e562701dbbc1625aa3bdc0d8c8 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Wed, 20 Nov 2024 16:03:53 -0600
Subject: [PATCH 41/44] fix(utility-menu): fixes typo

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index acb576e..8330896 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "storybook": "storybook dev -c node_modules/@emulsify/core/.storybook --ci -p 6006",
     "storybook-build": "npm run build && storybook build -c node_modules/@emulsify/core/.storybook -o .out",
     "storybook-deploy": "storybook-to-ghpages -o .out",
-    "style-dictionary:build": "node ./src/tokens/tokensTransform.mjs",
+    "style-dictionary:build": "node ./src/tokens/tokensTransform.js",
     "test": "jest --coverage  --config ./config/jest.config.js",
     "tokens:build": "npm run tokens:transform && npm run style-dictionary:build",
     "tokens:transform": "token-transformer ./src/tokens/figma.tokens.json ./src/tokens/transformed.tokens.json",

From 59c5b2c11fc4e18914bf78bcfda1fb23ac3ce268 Mon Sep 17 00:00:00 2001
From: mariannuar <mariannuar@users.noreply.github.com>
Date: Wed, 20 Nov 2024 22:04:39 +0000
Subject: [PATCH 42/44] feat: create tokens

---
 src/tokens/tokens.scss | 60 +++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
index 7c6bbf3..55042de 100644
--- a/src/tokens/tokens.scss
+++ b/src/tokens/tokens.scss
@@ -3,43 +3,43 @@
  */
 
 :root {
-  --colors-sb-background: #fff;
+  --colors-sb-background: #ffffff;
   --colors-sb-text-body: #00202e;
   --colors-sb-text-heading: #0080b7;
   --colors-sb-visualization: #009fe4;
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
-  --tabs-color-bg-default: #fff;
-  --tabs-color-bg-active: #fff;
-  --tabs-color-bg-hover: #fff;
+  --tabs-color-bg-default: #ffffff;
+  --tabs-color-bg-active: #ffffff;
+  --tabs-color-bg-hover: #ffffff;
   --tabs-color-text-default: #00202e;
   --tabs-color-text-active: #0080b7;
   --tabs-color-text-hover: #005f89;
   --tabs-color-border-bottom: #a9afb1;
   --tab-label: [object Object];
-  --table-color-cell-bg: #fff;
+  --table-color-cell-bg: #ffffff;
   --table-color-cell-bg-stripe: #9ce1ff;
   --table-color-cell-text: #00202e;
   --table-color-cell-icon: #005f89;
   --table-color-header-bg: #005f89;
-  --table-color-header-text: #fff;
+  --table-color-header-text: #ffffff;
   --table-color-header-icon: #9ce1ff;
   --table-color-border: #d4d7d8;
   --status-color-info-bg: #16bdde;
   --status-color-info-label: #272727;
   --status-color-danger-bg: #bd1919;
-  --status-color-danger-label: #fff;
+  --status-color-danger-label: #ffffff;
   --status-color-success-bg: #337b32;
-  --status-color-success-label: #fff;
+  --status-color-success-label: #ffffff;
   --status-color-warning-bg: #f6c40f;
-  --status-color-warning-label: #333;
+  --status-color-warning-label: #333333;
   --status-font-size-header: 1.3125rem;
   --selectdropdown-color-label: #00202e;
   --selectdropdown-color-label-disabled: #a9afb1;
-  --selectdropdown-color-button-fill: #fff;
+  --selectdropdown-color-button-fill: #ffffff;
   --selectdropdown-color-button-fill-hover: #e6f5fc;
-  --selectdropdown-color-button-fill-disabled: #fff;
+  --selectdropdown-color-button-fill-disabled: #ffffff;
   --selectdropdown-color-button-stroke: #7f878b;
   --selectdropdown-color-button-stroke-hover: #545f64;
   --selectdropdown-color-button-stroke-disabled: #a9afb1;
@@ -55,7 +55,7 @@
   --radio-color-button-stroke-disabled: #a9afb1;
   --radio-gap: 0.25rem;
   --pager-color-text-default: #29373d;
-  --pager-color-text-hover: #fff;
+  --pager-color-text-hover: #ffffff;
   --pager-color-text-focus: #0080b7;
   --pager-color-fill-hover: #0080b7;
   --pager-default: [object Object];
@@ -65,11 +65,11 @@
   --pager-padding-y: 0.5rem;
   --pager-padding-y-hover: 0.5rem;
   --pager-padding-y-focus: 0.5rem;
-  --utility-menu-color-bg: #fff;
+  --utility-menu-color-bg: #ffffff;
   --utility-menu-color-link-default: #006089;
   --utility-menu-color-link-hover: #0080b7;
-  --main-menu-color-bg: #fff;
-  --main-menu-color-link-bg: #fff;
+  --main-menu-color-bg: #ffffff;
+  --main-menu-color-link-bg: #ffffff;
   --main-menu-color-link-bg-hover: #9ce1ff;
   --main-menu-color-link-label: #0080b7;
   --main-menu-color-link-label-hover: #006089;
@@ -79,7 +79,7 @@
   --main-menu-color-dropdown-label-hover: #006089;
   --link-color-default: #005f89;
   --link-color-hover: #00202e;
-  --link-color-inverse: #fff;
+  --link-color-inverse: #ffffff;
   --link-color-inverse-hover: #9ce1ff;
   --link-body: [object Object];
   --input-gap: 0.5rem;
@@ -91,16 +91,16 @@
   --input-border-color: #7f878b;
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;
-  --input-bkg: #fff;
+  --input-bkg: #ffffff;
   --header-search-background: #006089;
-  --header-search-text-icon: #fff;
+  --header-search-text-icon: #ffffff;
   --footer-background-default: #006089;
-  --footer-background-light: #fff;
+  --footer-background-light: #ffffff;
   --footer-heading-default: #9ce1ff;
   --footer-heading-dark: #0080b7;
   --footer-icon-default: #9ce1ff;
   --footer-icon-dark: #0080b7;
-  --fieldset-color-bg: #fff;
+  --fieldset-color-bg: #ffffff;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
   --radius-fieldset: 0.25rem;
@@ -115,7 +115,7 @@
   --cta-color-heading-darker: #006089;
   --cta-color-eyebrow: #006089;
   --cta-color-body: #00202e;
-  --cta-color-button: #fff;
+  --cta-color-button: #ffffff;
   --cta-background: #9ce1ff;
   --cta-button-background: #009fe4;
   --cta-button-background-darker: #006089;
@@ -132,10 +132,10 @@
   --card-color-heading: #0080b7;
   --card-color-subheading: #006089;
   --button-color-bkg: #005f89;
-  --button-color-label: #fff;
+  --button-color-label: #ffffff;
   --button-color-bkg-hover: #00405b;
-  --button-color-label-hover: #fff;
-  --button-color-label-focus: #fff;
+  --button-color-label-hover: #ffffff;
+  --button-color-label-focus: #ffffff;
   --button-color-bkg-focus: #00405b;
   --button-padding-x: 1rem;
   --button-padding-x-hover: 1rem;
@@ -161,12 +161,12 @@
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
   --banner-button-text: #00202e;
-  --banner-button-border: #fff;
+  --banner-button-border: #ffffff;
   --banner-button-background: #9ce1ff;
-  --banner-text: #fff;
+  --banner-text: #ffffff;
   --banner-background: #006089;
   --banner-background-opacity: 0.75;
-  --announcement-background-default: #fff;
+  --announcement-background-default: #ffffff;
   --announcement-background-light: #9ce1ff;
   --announcement-background-dark: #006089;
   --announcement-heading-default: #0080b7;
@@ -189,13 +189,13 @@
   --color-text-body: #00202e;
   --color-text-body-lighter: #006089;
   --color-text-heading: #006089;
-  --color-text-white: #fff;
+  --color-text-white: #ffffff;
   --color-warning-default: #d80f0f;
   --color-link: #005f89;
   --color-link-hover: #00202e;
   --color-link-hover-lighter: #00405b;
-  --color-black: #000;
-  --color-white: #fff;
+  --color-black: #000000;
+  --color-white: #ffffff;
   --color-emulsify-blue-100: #e6f5fc;
   --color-emulsify-blue-200: #ccecfa;
   --color-emulsify-blue-300: #99d9f4;

From 65ef775cb039b8e40311d516543a5ca883d0dd32 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Thu, 21 Nov 2024 14:16:57 -0600
Subject: [PATCH 43/44] fix(utility-menu): revert fix because it wasn't a typo

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8330896..acb576e 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "storybook": "storybook dev -c node_modules/@emulsify/core/.storybook --ci -p 6006",
     "storybook-build": "npm run build && storybook build -c node_modules/@emulsify/core/.storybook -o .out",
     "storybook-deploy": "storybook-to-ghpages -o .out",
-    "style-dictionary:build": "node ./src/tokens/tokensTransform.js",
+    "style-dictionary:build": "node ./src/tokens/tokensTransform.mjs",
     "test": "jest --coverage  --config ./config/jest.config.js",
     "tokens:build": "npm run tokens:transform && npm run style-dictionary:build",
     "tokens:transform": "token-transformer ./src/tokens/figma.tokens.json ./src/tokens/transformed.tokens.json",

From a4b20525050b9ad85b0708dc49f73c718a8aad21 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Thu, 21 Nov 2024 14:22:42 -0600
Subject: [PATCH 44/44] fix(utility-menu): change extension of file

---
 src/tokens/{tokensTransform.js => tokensTransform.mjs} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/tokens/{tokensTransform.js => tokensTransform.mjs} (100%)

diff --git a/src/tokens/tokensTransform.js b/src/tokens/tokensTransform.mjs
similarity index 100%
rename from src/tokens/tokensTransform.js
rename to src/tokens/tokensTransform.mjs