@nationaldesignstudio/react 0.0.8 → 0.0.10

package/dist/tokens.css

@@ -1,8 +1,14 @@
 /**
- * Design Tokens for Tailwind CSS v4
- * Auto-generated - DO NOT EDIT
- * Generated from: @nds-design-system/tokens
+ * Design Tokens for Tailwind CSS v4 - @nationaldesignstudio/react
+ *
+ * Usage in your app's CSS:
+ *   @import "tailwindcss";
+ *   @import "@nationaldesignstudio/react/tokens.css";
  */
+
+/* Scan component source files for Tailwind class usage */
+@source "../src/components/**/*.tsx";
+
 :root {
   --breakpoint-lg: 90rem;
   --breakpoint-md: 48rem;
@@ -370,18 +376,12 @@
   --spacing-96: 96px;
   --spacing-brand-large-component-button-gap-button-group: 16px;
   --spacing-brand-large-component-button-gap-icon-text: 12px;
-  --spacing-brand-large-component-button-height-large: 56px;
-  --spacing-brand-large-component-button-height-medium: 40px;
-  --spacing-brand-large-component-button-height-small: 32px;
   --spacing-brand-large-component-button-padding-x-large: 32px;
   --spacing-brand-large-component-button-padding-x-medium: 24px;
   --spacing-brand-large-component-button-padding-x-small: 16px;
   --spacing-brand-large-component-button-padding-y-large: 20px;
   --spacing-brand-large-component-button-padding-y-medium: 16px;
   --spacing-brand-large-component-button-padding-y-small: 12px;
-  --spacing-brand-large-component-button-radius-large: 10px;
-  --spacing-brand-large-component-button-radius-medium: 8px;
-  --spacing-brand-large-component-button-radius-small: 6px;
   --spacing-brand-large-component-card-gap-internal: 24px;
   --spacing-brand-large-component-card-padding-large: 40px;
   --spacing-brand-large-component-card-padding-medium: 32px;
@@ -425,18 +425,12 @@
   --spacing-brand-large-layout-section-padding-y-small: 64px;
   --spacing-brand-medium-component-button-gap-button-group: 12px;
   --spacing-brand-medium-component-button-gap-icon-text: 12px;
-  --spacing-brand-medium-component-button-height-large: 48px;
-  --spacing-brand-medium-component-button-height-medium: 40px;
-  --spacing-brand-medium-component-button-height-small: 32px;
   --spacing-brand-medium-component-button-padding-x-large: 24px;
   --spacing-brand-medium-component-button-padding-x-medium: 20px;
   --spacing-brand-medium-component-button-padding-x-small: 16px;
   --spacing-brand-medium-component-button-padding-y-large: 16px;
   --spacing-brand-medium-component-button-padding-y-medium: 12px;
   --spacing-brand-medium-component-button-padding-y-small: 8px;
-  --spacing-brand-medium-component-button-radius-large: 8px;
-  --spacing-brand-medium-component-button-radius-medium: 6px;
-  --spacing-brand-medium-component-button-radius-small: 4px;
   --spacing-brand-medium-component-card-gap-internal: 20px;
   --spacing-brand-medium-component-card-padding-large: 32px;
   --spacing-brand-medium-component-card-padding-medium: 24px;
@@ -480,18 +474,12 @@
   --spacing-brand-medium-layout-section-padding-y-small: 48px;
   --spacing-brand-small-component-button-gap-button-group: 12px;
   --spacing-brand-small-component-button-gap-icon-text: 8px;
-  --spacing-brand-small-component-button-height-large: 40px;
-  --spacing-brand-small-component-button-height-medium: 36px;
-  --spacing-brand-small-component-button-height-small: 28px;
   --spacing-brand-small-component-button-padding-x-large: 20px;
   --spacing-brand-small-component-button-padding-x-medium: 16px;
   --spacing-brand-small-component-button-padding-x-small: 12px;
   --spacing-brand-small-component-button-padding-y-large: 12px;
   --spacing-brand-small-component-button-padding-y-medium: 10px;
   --spacing-brand-small-component-button-padding-y-small: 8px;
-  --spacing-brand-small-component-button-radius-large: 6px;
-  --spacing-brand-small-component-button-radius-medium: 4px;
-  --spacing-brand-small-component-button-radius-small: 4px;
   --spacing-brand-small-component-card-gap-internal: 16px;
   --spacing-brand-small-component-card-padding-large: 24px;
   --spacing-brand-small-component-card-padding-medium: 20px;
@@ -959,18 +947,12 @@
   --spacing-96: var(--spacing-96);
   --spacing-brand-large-component-button-gap-button-group: var(--spacing-brand-large-component-button-gap-button-group);
   --spacing-brand-large-component-button-gap-icon-text: var(--spacing-brand-large-component-button-gap-icon-text);
-  --spacing-brand-large-component-button-height-large: var(--spacing-brand-large-component-button-height-large);
-  --spacing-brand-large-component-button-height-medium: var(--spacing-brand-large-component-button-height-medium);
-  --spacing-brand-large-component-button-height-small: var(--spacing-brand-large-component-button-height-small);
   --spacing-brand-large-component-button-padding-x-large: var(--spacing-brand-large-component-button-padding-x-large);
   --spacing-brand-large-component-button-padding-x-medium: var(--spacing-brand-large-component-button-padding-x-medium);
   --spacing-brand-large-component-button-padding-x-small: var(--spacing-brand-large-component-button-padding-x-small);
   --spacing-brand-large-component-button-padding-y-large: var(--spacing-brand-large-component-button-padding-y-large);
   --spacing-brand-large-component-button-padding-y-medium: var(--spacing-brand-large-component-button-padding-y-medium);
   --spacing-brand-large-component-button-padding-y-small: var(--spacing-brand-large-component-button-padding-y-small);
-  --spacing-brand-large-component-button-radius-large: var(--spacing-brand-large-component-button-radius-large);
-  --spacing-brand-large-component-button-radius-medium: var(--spacing-brand-large-component-button-radius-medium);
-  --spacing-brand-large-component-button-radius-small: var(--spacing-brand-large-component-button-radius-small);
   --spacing-brand-large-component-card-gap-internal: var(--spacing-brand-large-component-card-gap-internal);
   --spacing-brand-large-component-card-padding-large: var(--spacing-brand-large-component-card-padding-large);
   --spacing-brand-large-component-card-padding-medium: var(--spacing-brand-large-component-card-padding-medium);
@@ -1014,18 +996,12 @@
   --spacing-brand-large-layout-section-padding-y-small: var(--spacing-brand-large-layout-section-padding-y-small);
   --spacing-brand-medium-component-button-gap-button-group: var(--spacing-brand-medium-component-button-gap-button-group);
   --spacing-brand-medium-component-button-gap-icon-text: var(--spacing-brand-medium-component-button-gap-icon-text);
-  --spacing-brand-medium-component-button-height-large: var(--spacing-brand-medium-component-button-height-large);
-  --spacing-brand-medium-component-button-height-medium: var(--spacing-brand-medium-component-button-height-medium);
-  --spacing-brand-medium-component-button-height-small: var(--spacing-brand-medium-component-button-height-small);
   --spacing-brand-medium-component-button-padding-x-large: var(--spacing-brand-medium-component-button-padding-x-large);
   --spacing-brand-medium-component-button-padding-x-medium: var(--spacing-brand-medium-component-button-padding-x-medium);
   --spacing-brand-medium-component-button-padding-x-small: var(--spacing-brand-medium-component-button-padding-x-small);
   --spacing-brand-medium-component-button-padding-y-large: var(--spacing-brand-medium-component-button-padding-y-large);
   --spacing-brand-medium-component-button-padding-y-medium: var(--spacing-brand-medium-component-button-padding-y-medium);
   --spacing-brand-medium-component-button-padding-y-small: var(--spacing-brand-medium-component-button-padding-y-small);
-  --spacing-brand-medium-component-button-radius-large: var(--spacing-brand-medium-component-button-radius-large);
-  --spacing-brand-medium-component-button-radius-medium: var(--spacing-brand-medium-component-button-radius-medium);
-  --spacing-brand-medium-component-button-radius-small: var(--spacing-brand-medium-component-button-radius-small);
   --spacing-brand-medium-component-card-gap-internal: var(--spacing-brand-medium-component-card-gap-internal);
   --spacing-brand-medium-component-card-padding-large: var(--spacing-brand-medium-component-card-padding-large);
   --spacing-brand-medium-component-card-padding-medium: var(--spacing-brand-medium-component-card-padding-medium);
@@ -1069,18 +1045,12 @@
   --spacing-brand-medium-layout-section-padding-y-small: var(--spacing-brand-medium-layout-section-padding-y-small);
   --spacing-brand-small-component-button-gap-button-group: var(--spacing-brand-small-component-button-gap-button-group);
   --spacing-brand-small-component-button-gap-icon-text: var(--spacing-brand-small-component-button-gap-icon-text);
-  --spacing-brand-small-component-button-height-large: var(--spacing-brand-small-component-button-height-large);
-  --spacing-brand-small-component-button-height-medium: var(--spacing-brand-small-component-button-height-medium);
-  --spacing-brand-small-component-button-height-small: var(--spacing-brand-small-component-button-height-small);
   --spacing-brand-small-component-button-padding-x-large: var(--spacing-brand-small-component-button-padding-x-large);
   --spacing-brand-small-component-button-padding-x-medium: var(--spacing-brand-small-component-button-padding-x-medium);
   --spacing-brand-small-component-button-padding-x-small: var(--spacing-brand-small-component-button-padding-x-small);
   --spacing-brand-small-component-button-padding-y-large: var(--spacing-brand-small-component-button-padding-y-large);
   --spacing-brand-small-component-button-padding-y-medium: var(--spacing-brand-small-component-button-padding-y-medium);
   --spacing-brand-small-component-button-padding-y-small: var(--spacing-brand-small-component-button-padding-y-small);
-  --spacing-brand-small-component-button-radius-large: var(--spacing-brand-small-component-button-radius-large);
-  --spacing-brand-small-component-button-radius-medium: var(--spacing-brand-small-component-button-radius-medium);
-  --spacing-brand-small-component-button-radius-small: var(--spacing-brand-small-component-button-radius-small);
   --spacing-brand-small-component-card-gap-internal: var(--spacing-brand-small-component-card-gap-internal);
   --spacing-brand-small-component-card-padding-large: var(--spacing-brand-small-component-card-padding-large);
   --spacing-brand-small-component-card-padding-medium: var(--spacing-brand-small-component-card-padding-medium);
@@ -6139,222 +6109,6 @@
   margin-left: var(--spacing-brand-large-component-button-gap-icon-text);
 }
 
-@utility w-spacing-brand-large-component-button-height-large {
-  width: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility h-spacing-brand-large-component-button-height-large {
-  height: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility gap-spacing-brand-large-component-button-height-large {
-  gap: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility p-spacing-brand-large-component-button-height-large {
-  padding: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility px-spacing-brand-large-component-button-height-large {
-  padding-left: var(--spacing-brand-large-component-button-height-large);
-  padding-right: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility py-spacing-brand-large-component-button-height-large {
-  padding-top: var(--spacing-brand-large-component-button-height-large);
-  padding-bottom: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility pt-spacing-brand-large-component-button-height-large {
-  padding-top: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility pr-spacing-brand-large-component-button-height-large {
-  padding-right: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility pb-spacing-brand-large-component-button-height-large {
-  padding-bottom: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility pl-spacing-brand-large-component-button-height-large {
-  padding-left: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility m-spacing-brand-large-component-button-height-large {
-  margin: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility mx-spacing-brand-large-component-button-height-large {
-  margin-left: var(--spacing-brand-large-component-button-height-large);
-  margin-right: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility my-spacing-brand-large-component-button-height-large {
-  margin-top: var(--spacing-brand-large-component-button-height-large);
-  margin-bottom: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility mt-spacing-brand-large-component-button-height-large {
-  margin-top: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility mr-spacing-brand-large-component-button-height-large {
-  margin-right: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility mb-spacing-brand-large-component-button-height-large {
-  margin-bottom: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility ml-spacing-brand-large-component-button-height-large {
-  margin-left: var(--spacing-brand-large-component-button-height-large);
-}
-
-@utility w-spacing-brand-large-component-button-height-medium {
-  width: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility h-spacing-brand-large-component-button-height-medium {
-  height: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility gap-spacing-brand-large-component-button-height-medium {
-  gap: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility p-spacing-brand-large-component-button-height-medium {
-  padding: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility px-spacing-brand-large-component-button-height-medium {
-  padding-left: var(--spacing-brand-large-component-button-height-medium);
-  padding-right: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility py-spacing-brand-large-component-button-height-medium {
-  padding-top: var(--spacing-brand-large-component-button-height-medium);
-  padding-bottom: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility pt-spacing-brand-large-component-button-height-medium {
-  padding-top: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility pr-spacing-brand-large-component-button-height-medium {
-  padding-right: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility pb-spacing-brand-large-component-button-height-medium {
-  padding-bottom: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility pl-spacing-brand-large-component-button-height-medium {
-  padding-left: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility m-spacing-brand-large-component-button-height-medium {
-  margin: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility mx-spacing-brand-large-component-button-height-medium {
-  margin-left: var(--spacing-brand-large-component-button-height-medium);
-  margin-right: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility my-spacing-brand-large-component-button-height-medium {
-  margin-top: var(--spacing-brand-large-component-button-height-medium);
-  margin-bottom: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility mt-spacing-brand-large-component-button-height-medium {
-  margin-top: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility mr-spacing-brand-large-component-button-height-medium {
-  margin-right: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility mb-spacing-brand-large-component-button-height-medium {
-  margin-bottom: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility ml-spacing-brand-large-component-button-height-medium {
-  margin-left: var(--spacing-brand-large-component-button-height-medium);
-}
-
-@utility w-spacing-brand-large-component-button-height-small {
-  width: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility h-spacing-brand-large-component-button-height-small {
-  height: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility gap-spacing-brand-large-component-button-height-small {
-  gap: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility p-spacing-brand-large-component-button-height-small {
-  padding: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility px-spacing-brand-large-component-button-height-small {
-  padding-left: var(--spacing-brand-large-component-button-height-small);
-  padding-right: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility py-spacing-brand-large-component-button-height-small {
-  padding-top: var(--spacing-brand-large-component-button-height-small);
-  padding-bottom: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility pt-spacing-brand-large-component-button-height-small {
-  padding-top: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility pr-spacing-brand-large-component-button-height-small {
-  padding-right: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility pb-spacing-brand-large-component-button-height-small {
-  padding-bottom: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility pl-spacing-brand-large-component-button-height-small {
-  padding-left: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility m-spacing-brand-large-component-button-height-small {
-  margin: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility mx-spacing-brand-large-component-button-height-small {
-  margin-left: var(--spacing-brand-large-component-button-height-small);
-  margin-right: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility my-spacing-brand-large-component-button-height-small {
-  margin-top: var(--spacing-brand-large-component-button-height-small);
-  margin-bottom: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility mt-spacing-brand-large-component-button-height-small {
-  margin-top: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility mr-spacing-brand-large-component-button-height-small {
-  margin-right: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility mb-spacing-brand-large-component-button-height-small {
-  margin-bottom: var(--spacing-brand-large-component-button-height-small);
-}
-
-@utility ml-spacing-brand-large-component-button-height-small {
-  margin-left: var(--spacing-brand-large-component-button-height-small);
-}
-
 @utility w-spacing-brand-large-component-button-padding-x-large {
   width: var(--spacing-brand-large-component-button-padding-x-large);
 }
@@ -6787,222 +6541,6 @@
   margin-left: var(--spacing-brand-large-component-button-padding-y-small);
 }
 
-@utility w-spacing-brand-large-component-button-radius-large {
-  width: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility h-spacing-brand-large-component-button-radius-large {
-  height: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility gap-spacing-brand-large-component-button-radius-large {
-  gap: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility p-spacing-brand-large-component-button-radius-large {
-  padding: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility px-spacing-brand-large-component-button-radius-large {
-  padding-left: var(--spacing-brand-large-component-button-radius-large);
-  padding-right: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility py-spacing-brand-large-component-button-radius-large {
-  padding-top: var(--spacing-brand-large-component-button-radius-large);
-  padding-bottom: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility pt-spacing-brand-large-component-button-radius-large {
-  padding-top: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility pr-spacing-brand-large-component-button-radius-large {
-  padding-right: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility pb-spacing-brand-large-component-button-radius-large {
-  padding-bottom: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility pl-spacing-brand-large-component-button-radius-large {
-  padding-left: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility m-spacing-brand-large-component-button-radius-large {
-  margin: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility mx-spacing-brand-large-component-button-radius-large {
-  margin-left: var(--spacing-brand-large-component-button-radius-large);
-  margin-right: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility my-spacing-brand-large-component-button-radius-large {
-  margin-top: var(--spacing-brand-large-component-button-radius-large);
-  margin-bottom: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility mt-spacing-brand-large-component-button-radius-large {
-  margin-top: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility mr-spacing-brand-large-component-button-radius-large {
-  margin-right: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility mb-spacing-brand-large-component-button-radius-large {
-  margin-bottom: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility ml-spacing-brand-large-component-button-radius-large {
-  margin-left: var(--spacing-brand-large-component-button-radius-large);
-}
-
-@utility w-spacing-brand-large-component-button-radius-medium {
-  width: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility h-spacing-brand-large-component-button-radius-medium {
-  height: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility gap-spacing-brand-large-component-button-radius-medium {
-  gap: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility p-spacing-brand-large-component-button-radius-medium {
-  padding: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility px-spacing-brand-large-component-button-radius-medium {
-  padding-left: var(--spacing-brand-large-component-button-radius-medium);
-  padding-right: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility py-spacing-brand-large-component-button-radius-medium {
-  padding-top: var(--spacing-brand-large-component-button-radius-medium);
-  padding-bottom: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility pt-spacing-brand-large-component-button-radius-medium {
-  padding-top: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility pr-spacing-brand-large-component-button-radius-medium {
-  padding-right: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility pb-spacing-brand-large-component-button-radius-medium {
-  padding-bottom: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility pl-spacing-brand-large-component-button-radius-medium {
-  padding-left: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility m-spacing-brand-large-component-button-radius-medium {
-  margin: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility mx-spacing-brand-large-component-button-radius-medium {
-  margin-left: var(--spacing-brand-large-component-button-radius-medium);
-  margin-right: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility my-spacing-brand-large-component-button-radius-medium {
-  margin-top: var(--spacing-brand-large-component-button-radius-medium);
-  margin-bottom: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility mt-spacing-brand-large-component-button-radius-medium {
-  margin-top: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility mr-spacing-brand-large-component-button-radius-medium {
-  margin-right: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility mb-spacing-brand-large-component-button-radius-medium {
-  margin-bottom: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility ml-spacing-brand-large-component-button-radius-medium {
-  margin-left: var(--spacing-brand-large-component-button-radius-medium);
-}
-
-@utility w-spacing-brand-large-component-button-radius-small {
-  width: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility h-spacing-brand-large-component-button-radius-small {
-  height: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility gap-spacing-brand-large-component-button-radius-small {
-  gap: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility p-spacing-brand-large-component-button-radius-small {
-  padding: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility px-spacing-brand-large-component-button-radius-small {
-  padding-left: var(--spacing-brand-large-component-button-radius-small);
-  padding-right: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility py-spacing-brand-large-component-button-radius-small {
-  padding-top: var(--spacing-brand-large-component-button-radius-small);
-  padding-bottom: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility pt-spacing-brand-large-component-button-radius-small {
-  padding-top: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility pr-spacing-brand-large-component-button-radius-small {
-  padding-right: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility pb-spacing-brand-large-component-button-radius-small {
-  padding-bottom: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility pl-spacing-brand-large-component-button-radius-small {
-  padding-left: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility m-spacing-brand-large-component-button-radius-small {
-  margin: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility mx-spacing-brand-large-component-button-radius-small {
-  margin-left: var(--spacing-brand-large-component-button-radius-small);
-  margin-right: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility my-spacing-brand-large-component-button-radius-small {
-  margin-top: var(--spacing-brand-large-component-button-radius-small);
-  margin-bottom: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility mt-spacing-brand-large-component-button-radius-small {
-  margin-top: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility mr-spacing-brand-large-component-button-radius-small {
-  margin-right: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility mb-spacing-brand-large-component-button-radius-small {
-  margin-bottom: var(--spacing-brand-large-component-button-radius-small);
-}
-
-@utility ml-spacing-brand-large-component-button-radius-small {
-  margin-left: var(--spacing-brand-large-component-button-radius-small);
-}
-
 @utility w-spacing-brand-large-component-card-gap-internal {
   width: var(--spacing-brand-large-component-card-gap-internal);
 }
@@ -10099,313 +9637,97 @@
   margin-left: var(--spacing-brand-medium-component-button-gap-icon-text);
 }
 
-@utility w-spacing-brand-medium-component-button-height-large {
-  width: var(--spacing-brand-medium-component-button-height-large);
+@utility w-spacing-brand-medium-component-button-padding-x-large {
+  width: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility h-spacing-brand-medium-component-button-height-large {
-  height: var(--spacing-brand-medium-component-button-height-large);
+@utility h-spacing-brand-medium-component-button-padding-x-large {
+  height: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility gap-spacing-brand-medium-component-button-height-large {
-  gap: var(--spacing-brand-medium-component-button-height-large);
+@utility gap-spacing-brand-medium-component-button-padding-x-large {
+  gap: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility p-spacing-brand-medium-component-button-height-large {
-  padding: var(--spacing-brand-medium-component-button-height-large);
+@utility p-spacing-brand-medium-component-button-padding-x-large {
+  padding: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility px-spacing-brand-medium-component-button-height-large {
-  padding-left: var(--spacing-brand-medium-component-button-height-large);
-  padding-right: var(--spacing-brand-medium-component-button-height-large);
+@utility px-spacing-brand-medium-component-button-padding-x-large {
+  padding-left: var(--spacing-brand-medium-component-button-padding-x-large);
+  padding-right: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility py-spacing-brand-medium-component-button-height-large {
-  padding-top: var(--spacing-brand-medium-component-button-height-large);
-  padding-bottom: var(--spacing-brand-medium-component-button-height-large);
+@utility py-spacing-brand-medium-component-button-padding-x-large {
+  padding-top: var(--spacing-brand-medium-component-button-padding-x-large);
+  padding-bottom: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility pt-spacing-brand-medium-component-button-height-large {
-  padding-top: var(--spacing-brand-medium-component-button-height-large);
+@utility pt-spacing-brand-medium-component-button-padding-x-large {
+  padding-top: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility pr-spacing-brand-medium-component-button-height-large {
-  padding-right: var(--spacing-brand-medium-component-button-height-large);
+@utility pr-spacing-brand-medium-component-button-padding-x-large {
+  padding-right: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility pb-spacing-brand-medium-component-button-height-large {
-  padding-bottom: var(--spacing-brand-medium-component-button-height-large);
+@utility pb-spacing-brand-medium-component-button-padding-x-large {
+  padding-bottom: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility pl-spacing-brand-medium-component-button-height-large {
-  padding-left: var(--spacing-brand-medium-component-button-height-large);
+@utility pl-spacing-brand-medium-component-button-padding-x-large {
+  padding-left: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility m-spacing-brand-medium-component-button-height-large {
-  margin: var(--spacing-brand-medium-component-button-height-large);
+@utility m-spacing-brand-medium-component-button-padding-x-large {
+  margin: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility mx-spacing-brand-medium-component-button-height-large {
-  margin-left: var(--spacing-brand-medium-component-button-height-large);
-  margin-right: var(--spacing-brand-medium-component-button-height-large);
+@utility mx-spacing-brand-medium-component-button-padding-x-large {
+  margin-left: var(--spacing-brand-medium-component-button-padding-x-large);
+  margin-right: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility my-spacing-brand-medium-component-button-height-large {
-  margin-top: var(--spacing-brand-medium-component-button-height-large);
-  margin-bottom: var(--spacing-brand-medium-component-button-height-large);
+@utility my-spacing-brand-medium-component-button-padding-x-large {
+  margin-top: var(--spacing-brand-medium-component-button-padding-x-large);
+  margin-bottom: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility mt-spacing-brand-medium-component-button-height-large {
-  margin-top: var(--spacing-brand-medium-component-button-height-large);
+@utility mt-spacing-brand-medium-component-button-padding-x-large {
+  margin-top: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility mr-spacing-brand-medium-component-button-height-large {
-  margin-right: var(--spacing-brand-medium-component-button-height-large);
+@utility mr-spacing-brand-medium-component-button-padding-x-large {
+  margin-right: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility mb-spacing-brand-medium-component-button-height-large {
-  margin-bottom: var(--spacing-brand-medium-component-button-height-large);
+@utility mb-spacing-brand-medium-component-button-padding-x-large {
+  margin-bottom: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility ml-spacing-brand-medium-component-button-height-large {
-  margin-left: var(--spacing-brand-medium-component-button-height-large);
+@utility ml-spacing-brand-medium-component-button-padding-x-large {
+  margin-left: var(--spacing-brand-medium-component-button-padding-x-large);
 }
 
-@utility w-spacing-brand-medium-component-button-height-medium {
-  width: var(--spacing-brand-medium-component-button-height-medium);
+@utility w-spacing-brand-medium-component-button-padding-x-medium {
+  width: var(--spacing-brand-medium-component-button-padding-x-medium);
 }
 
-@utility h-spacing-brand-medium-component-button-height-medium {
-  height: var(--spacing-brand-medium-component-button-height-medium);
+@utility h-spacing-brand-medium-component-button-padding-x-medium {
+  height: var(--spacing-brand-medium-component-button-padding-x-medium);
 }
 
-@utility gap-spacing-brand-medium-component-button-height-medium {
-  gap: var(--spacing-brand-medium-component-button-height-medium);
+@utility gap-spacing-brand-medium-component-button-padding-x-medium {
+  gap: var(--spacing-brand-medium-component-button-padding-x-medium);
 }
 
-@utility p-spacing-brand-medium-component-button-height-medium {
-  padding: var(--spacing-brand-medium-component-button-height-medium);
+@utility p-spacing-brand-medium-component-button-padding-x-medium {
+  padding: var(--spacing-brand-medium-component-button-padding-x-medium);
 }
 
-@utility px-spacing-brand-medium-component-button-height-medium {
-  padding-left: var(--spacing-brand-medium-component-button-height-medium);
-  padding-right: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility py-spacing-brand-medium-component-button-height-medium {
-  padding-top: var(--spacing-brand-medium-component-button-height-medium);
-  padding-bottom: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility pt-spacing-brand-medium-component-button-height-medium {
-  padding-top: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility pr-spacing-brand-medium-component-button-height-medium {
-  padding-right: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility pb-spacing-brand-medium-component-button-height-medium {
-  padding-bottom: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility pl-spacing-brand-medium-component-button-height-medium {
-  padding-left: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility m-spacing-brand-medium-component-button-height-medium {
-  margin: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility mx-spacing-brand-medium-component-button-height-medium {
-  margin-left: var(--spacing-brand-medium-component-button-height-medium);
-  margin-right: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility my-spacing-brand-medium-component-button-height-medium {
-  margin-top: var(--spacing-brand-medium-component-button-height-medium);
-  margin-bottom: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility mt-spacing-brand-medium-component-button-height-medium {
-  margin-top: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility mr-spacing-brand-medium-component-button-height-medium {
-  margin-right: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility mb-spacing-brand-medium-component-button-height-medium {
-  margin-bottom: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility ml-spacing-brand-medium-component-button-height-medium {
-  margin-left: var(--spacing-brand-medium-component-button-height-medium);
-}
-
-@utility w-spacing-brand-medium-component-button-height-small {
-  width: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility h-spacing-brand-medium-component-button-height-small {
-  height: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility gap-spacing-brand-medium-component-button-height-small {
-  gap: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility p-spacing-brand-medium-component-button-height-small {
-  padding: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility px-spacing-brand-medium-component-button-height-small {
-  padding-left: var(--spacing-brand-medium-component-button-height-small);
-  padding-right: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility py-spacing-brand-medium-component-button-height-small {
-  padding-top: var(--spacing-brand-medium-component-button-height-small);
-  padding-bottom: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility pt-spacing-brand-medium-component-button-height-small {
-  padding-top: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility pr-spacing-brand-medium-component-button-height-small {
-  padding-right: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility pb-spacing-brand-medium-component-button-height-small {
-  padding-bottom: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility pl-spacing-brand-medium-component-button-height-small {
-  padding-left: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility m-spacing-brand-medium-component-button-height-small {
-  margin: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility mx-spacing-brand-medium-component-button-height-small {
-  margin-left: var(--spacing-brand-medium-component-button-height-small);
-  margin-right: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility my-spacing-brand-medium-component-button-height-small {
-  margin-top: var(--spacing-brand-medium-component-button-height-small);
-  margin-bottom: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility mt-spacing-brand-medium-component-button-height-small {
-  margin-top: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility mr-spacing-brand-medium-component-button-height-small {
-  margin-right: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility mb-spacing-brand-medium-component-button-height-small {
-  margin-bottom: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility ml-spacing-brand-medium-component-button-height-small {
-  margin-left: var(--spacing-brand-medium-component-button-height-small);
-}
-
-@utility w-spacing-brand-medium-component-button-padding-x-large {
-  width: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility h-spacing-brand-medium-component-button-padding-x-large {
-  height: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility gap-spacing-brand-medium-component-button-padding-x-large {
-  gap: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility p-spacing-brand-medium-component-button-padding-x-large {
-  padding: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility px-spacing-brand-medium-component-button-padding-x-large {
-  padding-left: var(--spacing-brand-medium-component-button-padding-x-large);
-  padding-right: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility py-spacing-brand-medium-component-button-padding-x-large {
-  padding-top: var(--spacing-brand-medium-component-button-padding-x-large);
-  padding-bottom: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility pt-spacing-brand-medium-component-button-padding-x-large {
-  padding-top: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility pr-spacing-brand-medium-component-button-padding-x-large {
-  padding-right: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility pb-spacing-brand-medium-component-button-padding-x-large {
-  padding-bottom: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility pl-spacing-brand-medium-component-button-padding-x-large {
-  padding-left: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility m-spacing-brand-medium-component-button-padding-x-large {
-  margin: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility mx-spacing-brand-medium-component-button-padding-x-large {
-  margin-left: var(--spacing-brand-medium-component-button-padding-x-large);
-  margin-right: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility my-spacing-brand-medium-component-button-padding-x-large {
-  margin-top: var(--spacing-brand-medium-component-button-padding-x-large);
-  margin-bottom: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility mt-spacing-brand-medium-component-button-padding-x-large {
-  margin-top: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility mr-spacing-brand-medium-component-button-padding-x-large {
-  margin-right: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility mb-spacing-brand-medium-component-button-padding-x-large {
-  margin-bottom: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility ml-spacing-brand-medium-component-button-padding-x-large {
-  margin-left: var(--spacing-brand-medium-component-button-padding-x-large);
-}
-
-@utility w-spacing-brand-medium-component-button-padding-x-medium {
-  width: var(--spacing-brand-medium-component-button-padding-x-medium);
-}
-
-@utility h-spacing-brand-medium-component-button-padding-x-medium {
-  height: var(--spacing-brand-medium-component-button-padding-x-medium);
-}
-
-@utility gap-spacing-brand-medium-component-button-padding-x-medium {
-  gap: var(--spacing-brand-medium-component-button-padding-x-medium);
-}
-
-@utility p-spacing-brand-medium-component-button-padding-x-medium {
-  padding: var(--spacing-brand-medium-component-button-padding-x-medium);
-}
-
-@utility px-spacing-brand-medium-component-button-padding-x-medium {
-  padding-left: var(--spacing-brand-medium-component-button-padding-x-medium);
-  padding-right: var(--spacing-brand-medium-component-button-padding-x-medium);
+@utility px-spacing-brand-medium-component-button-padding-x-medium {
+  padding-left: var(--spacing-brand-medium-component-button-padding-x-medium);
+  padding-right: var(--spacing-brand-medium-component-button-padding-x-medium);
 }
 
 @utility py-spacing-brand-medium-component-button-padding-x-medium {
@@ -10747,222 +10069,6 @@
   margin-left: var(--spacing-brand-medium-component-button-padding-y-small);
 }
 
-@utility w-spacing-brand-medium-component-button-radius-large {
-  width: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility h-spacing-brand-medium-component-button-radius-large {
-  height: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility gap-spacing-brand-medium-component-button-radius-large {
-  gap: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility p-spacing-brand-medium-component-button-radius-large {
-  padding: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility px-spacing-brand-medium-component-button-radius-large {
-  padding-left: var(--spacing-brand-medium-component-button-radius-large);
-  padding-right: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility py-spacing-brand-medium-component-button-radius-large {
-  padding-top: var(--spacing-brand-medium-component-button-radius-large);
-  padding-bottom: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility pt-spacing-brand-medium-component-button-radius-large {
-  padding-top: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility pr-spacing-brand-medium-component-button-radius-large {
-  padding-right: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility pb-spacing-brand-medium-component-button-radius-large {
-  padding-bottom: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility pl-spacing-brand-medium-component-button-radius-large {
-  padding-left: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility m-spacing-brand-medium-component-button-radius-large {
-  margin: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility mx-spacing-brand-medium-component-button-radius-large {
-  margin-left: var(--spacing-brand-medium-component-button-radius-large);
-  margin-right: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility my-spacing-brand-medium-component-button-radius-large {
-  margin-top: var(--spacing-brand-medium-component-button-radius-large);
-  margin-bottom: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility mt-spacing-brand-medium-component-button-radius-large {
-  margin-top: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility mr-spacing-brand-medium-component-button-radius-large {
-  margin-right: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility mb-spacing-brand-medium-component-button-radius-large {
-  margin-bottom: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility ml-spacing-brand-medium-component-button-radius-large {
-  margin-left: var(--spacing-brand-medium-component-button-radius-large);
-}
-
-@utility w-spacing-brand-medium-component-button-radius-medium {
-  width: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility h-spacing-brand-medium-component-button-radius-medium {
-  height: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility gap-spacing-brand-medium-component-button-radius-medium {
-  gap: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility p-spacing-brand-medium-component-button-radius-medium {
-  padding: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility px-spacing-brand-medium-component-button-radius-medium {
-  padding-left: var(--spacing-brand-medium-component-button-radius-medium);
-  padding-right: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility py-spacing-brand-medium-component-button-radius-medium {
-  padding-top: var(--spacing-brand-medium-component-button-radius-medium);
-  padding-bottom: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility pt-spacing-brand-medium-component-button-radius-medium {
-  padding-top: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility pr-spacing-brand-medium-component-button-radius-medium {
-  padding-right: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility pb-spacing-brand-medium-component-button-radius-medium {
-  padding-bottom: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility pl-spacing-brand-medium-component-button-radius-medium {
-  padding-left: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility m-spacing-brand-medium-component-button-radius-medium {
-  margin: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility mx-spacing-brand-medium-component-button-radius-medium {
-  margin-left: var(--spacing-brand-medium-component-button-radius-medium);
-  margin-right: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility my-spacing-brand-medium-component-button-radius-medium {
-  margin-top: var(--spacing-brand-medium-component-button-radius-medium);
-  margin-bottom: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility mt-spacing-brand-medium-component-button-radius-medium {
-  margin-top: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility mr-spacing-brand-medium-component-button-radius-medium {
-  margin-right: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility mb-spacing-brand-medium-component-button-radius-medium {
-  margin-bottom: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility ml-spacing-brand-medium-component-button-radius-medium {
-  margin-left: var(--spacing-brand-medium-component-button-radius-medium);
-}
-
-@utility w-spacing-brand-medium-component-button-radius-small {
-  width: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility h-spacing-brand-medium-component-button-radius-small {
-  height: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility gap-spacing-brand-medium-component-button-radius-small {
-  gap: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility p-spacing-brand-medium-component-button-radius-small {
-  padding: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility px-spacing-brand-medium-component-button-radius-small {
-  padding-left: var(--spacing-brand-medium-component-button-radius-small);
-  padding-right: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility py-spacing-brand-medium-component-button-radius-small {
-  padding-top: var(--spacing-brand-medium-component-button-radius-small);
-  padding-bottom: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility pt-spacing-brand-medium-component-button-radius-small {
-  padding-top: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility pr-spacing-brand-medium-component-button-radius-small {
-  padding-right: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility pb-spacing-brand-medium-component-button-radius-small {
-  padding-bottom: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility pl-spacing-brand-medium-component-button-radius-small {
-  padding-left: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility m-spacing-brand-medium-component-button-radius-small {
-  margin: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility mx-spacing-brand-medium-component-button-radius-small {
-  margin-left: var(--spacing-brand-medium-component-button-radius-small);
-  margin-right: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility my-spacing-brand-medium-component-button-radius-small {
-  margin-top: var(--spacing-brand-medium-component-button-radius-small);
-  margin-bottom: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility mt-spacing-brand-medium-component-button-radius-small {
-  margin-top: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility mr-spacing-brand-medium-component-button-radius-small {
-  margin-right: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility mb-spacing-brand-medium-component-button-radius-small {
-  margin-bottom: var(--spacing-brand-medium-component-button-radius-small);
-}
-
-@utility ml-spacing-brand-medium-component-button-radius-small {
-  margin-left: var(--spacing-brand-medium-component-button-radius-small);
-}
-
 @utility w-spacing-brand-medium-component-card-gap-internal {
   width: var(--spacing-brand-medium-component-card-gap-internal);
 }
@@ -14059,222 +13165,6 @@
   margin-left: var(--spacing-brand-small-component-button-gap-icon-text);
 }
 
-@utility w-spacing-brand-small-component-button-height-large {
-  width: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility h-spacing-brand-small-component-button-height-large {
-  height: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility gap-spacing-brand-small-component-button-height-large {
-  gap: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility p-spacing-brand-small-component-button-height-large {
-  padding: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility px-spacing-brand-small-component-button-height-large {
-  padding-left: var(--spacing-brand-small-component-button-height-large);
-  padding-right: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility py-spacing-brand-small-component-button-height-large {
-  padding-top: var(--spacing-brand-small-component-button-height-large);
-  padding-bottom: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility pt-spacing-brand-small-component-button-height-large {
-  padding-top: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility pr-spacing-brand-small-component-button-height-large {
-  padding-right: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility pb-spacing-brand-small-component-button-height-large {
-  padding-bottom: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility pl-spacing-brand-small-component-button-height-large {
-  padding-left: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility m-spacing-brand-small-component-button-height-large {
-  margin: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility mx-spacing-brand-small-component-button-height-large {
-  margin-left: var(--spacing-brand-small-component-button-height-large);
-  margin-right: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility my-spacing-brand-small-component-button-height-large {
-  margin-top: var(--spacing-brand-small-component-button-height-large);
-  margin-bottom: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility mt-spacing-brand-small-component-button-height-large {
-  margin-top: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility mr-spacing-brand-small-component-button-height-large {
-  margin-right: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility mb-spacing-brand-small-component-button-height-large {
-  margin-bottom: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility ml-spacing-brand-small-component-button-height-large {
-  margin-left: var(--spacing-brand-small-component-button-height-large);
-}
-
-@utility w-spacing-brand-small-component-button-height-medium {
-  width: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility h-spacing-brand-small-component-button-height-medium {
-  height: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility gap-spacing-brand-small-component-button-height-medium {
-  gap: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility p-spacing-brand-small-component-button-height-medium {
-  padding: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility px-spacing-brand-small-component-button-height-medium {
-  padding-left: var(--spacing-brand-small-component-button-height-medium);
-  padding-right: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility py-spacing-brand-small-component-button-height-medium {
-  padding-top: var(--spacing-brand-small-component-button-height-medium);
-  padding-bottom: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility pt-spacing-brand-small-component-button-height-medium {
-  padding-top: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility pr-spacing-brand-small-component-button-height-medium {
-  padding-right: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility pb-spacing-brand-small-component-button-height-medium {
-  padding-bottom: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility pl-spacing-brand-small-component-button-height-medium {
-  padding-left: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility m-spacing-brand-small-component-button-height-medium {
-  margin: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility mx-spacing-brand-small-component-button-height-medium {
-  margin-left: var(--spacing-brand-small-component-button-height-medium);
-  margin-right: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility my-spacing-brand-small-component-button-height-medium {
-  margin-top: var(--spacing-brand-small-component-button-height-medium);
-  margin-bottom: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility mt-spacing-brand-small-component-button-height-medium {
-  margin-top: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility mr-spacing-brand-small-component-button-height-medium {
-  margin-right: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility mb-spacing-brand-small-component-button-height-medium {
-  margin-bottom: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility ml-spacing-brand-small-component-button-height-medium {
-  margin-left: var(--spacing-brand-small-component-button-height-medium);
-}
-
-@utility w-spacing-brand-small-component-button-height-small {
-  width: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility h-spacing-brand-small-component-button-height-small {
-  height: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility gap-spacing-brand-small-component-button-height-small {
-  gap: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility p-spacing-brand-small-component-button-height-small {
-  padding: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility px-spacing-brand-small-component-button-height-small {
-  padding-left: var(--spacing-brand-small-component-button-height-small);
-  padding-right: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility py-spacing-brand-small-component-button-height-small {
-  padding-top: var(--spacing-brand-small-component-button-height-small);
-  padding-bottom: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility pt-spacing-brand-small-component-button-height-small {
-  padding-top: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility pr-spacing-brand-small-component-button-height-small {
-  padding-right: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility pb-spacing-brand-small-component-button-height-small {
-  padding-bottom: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility pl-spacing-brand-small-component-button-height-small {
-  padding-left: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility m-spacing-brand-small-component-button-height-small {
-  margin: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility mx-spacing-brand-small-component-button-height-small {
-  margin-left: var(--spacing-brand-small-component-button-height-small);
-  margin-right: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility my-spacing-brand-small-component-button-height-small {
-  margin-top: var(--spacing-brand-small-component-button-height-small);
-  margin-bottom: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility mt-spacing-brand-small-component-button-height-small {
-  margin-top: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility mr-spacing-brand-small-component-button-height-small {
-  margin-right: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility mb-spacing-brand-small-component-button-height-small {
-  margin-bottom: var(--spacing-brand-small-component-button-height-small);
-}
-
-@utility ml-spacing-brand-small-component-button-height-small {
-  margin-left: var(--spacing-brand-small-component-button-height-small);
-}
-
 @utility w-spacing-brand-small-component-button-padding-x-large {
   width: var(--spacing-brand-small-component-button-padding-x-large);
 }
@@ -14707,222 +13597,6 @@
   margin-left: var(--spacing-brand-small-component-button-padding-y-small);
 }
 
-@utility w-spacing-brand-small-component-button-radius-large {
-  width: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility h-spacing-brand-small-component-button-radius-large {
-  height: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility gap-spacing-brand-small-component-button-radius-large {
-  gap: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility p-spacing-brand-small-component-button-radius-large {
-  padding: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility px-spacing-brand-small-component-button-radius-large {
-  padding-left: var(--spacing-brand-small-component-button-radius-large);
-  padding-right: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility py-spacing-brand-small-component-button-radius-large {
-  padding-top: var(--spacing-brand-small-component-button-radius-large);
-  padding-bottom: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility pt-spacing-brand-small-component-button-radius-large {
-  padding-top: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility pr-spacing-brand-small-component-button-radius-large {
-  padding-right: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility pb-spacing-brand-small-component-button-radius-large {
-  padding-bottom: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility pl-spacing-brand-small-component-button-radius-large {
-  padding-left: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility m-spacing-brand-small-component-button-radius-large {
-  margin: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility mx-spacing-brand-small-component-button-radius-large {
-  margin-left: var(--spacing-brand-small-component-button-radius-large);
-  margin-right: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility my-spacing-brand-small-component-button-radius-large {
-  margin-top: var(--spacing-brand-small-component-button-radius-large);
-  margin-bottom: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility mt-spacing-brand-small-component-button-radius-large {
-  margin-top: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility mr-spacing-brand-small-component-button-radius-large {
-  margin-right: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility mb-spacing-brand-small-component-button-radius-large {
-  margin-bottom: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility ml-spacing-brand-small-component-button-radius-large {
-  margin-left: var(--spacing-brand-small-component-button-radius-large);
-}
-
-@utility w-spacing-brand-small-component-button-radius-medium {
-  width: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility h-spacing-brand-small-component-button-radius-medium {
-  height: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility gap-spacing-brand-small-component-button-radius-medium {
-  gap: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility p-spacing-brand-small-component-button-radius-medium {
-  padding: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility px-spacing-brand-small-component-button-radius-medium {
-  padding-left: var(--spacing-brand-small-component-button-radius-medium);
-  padding-right: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility py-spacing-brand-small-component-button-radius-medium {
-  padding-top: var(--spacing-brand-small-component-button-radius-medium);
-  padding-bottom: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility pt-spacing-brand-small-component-button-radius-medium {
-  padding-top: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility pr-spacing-brand-small-component-button-radius-medium {
-  padding-right: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility pb-spacing-brand-small-component-button-radius-medium {
-  padding-bottom: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility pl-spacing-brand-small-component-button-radius-medium {
-  padding-left: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility m-spacing-brand-small-component-button-radius-medium {
-  margin: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility mx-spacing-brand-small-component-button-radius-medium {
-  margin-left: var(--spacing-brand-small-component-button-radius-medium);
-  margin-right: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility my-spacing-brand-small-component-button-radius-medium {
-  margin-top: var(--spacing-brand-small-component-button-radius-medium);
-  margin-bottom: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility mt-spacing-brand-small-component-button-radius-medium {
-  margin-top: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility mr-spacing-brand-small-component-button-radius-medium {
-  margin-right: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility mb-spacing-brand-small-component-button-radius-medium {
-  margin-bottom: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility ml-spacing-brand-small-component-button-radius-medium {
-  margin-left: var(--spacing-brand-small-component-button-radius-medium);
-}
-
-@utility w-spacing-brand-small-component-button-radius-small {
-  width: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility h-spacing-brand-small-component-button-radius-small {
-  height: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility gap-spacing-brand-small-component-button-radius-small {
-  gap: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility p-spacing-brand-small-component-button-radius-small {
-  padding: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility px-spacing-brand-small-component-button-radius-small {
-  padding-left: var(--spacing-brand-small-component-button-radius-small);
-  padding-right: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility py-spacing-brand-small-component-button-radius-small {
-  padding-top: var(--spacing-brand-small-component-button-radius-small);
-  padding-bottom: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility pt-spacing-brand-small-component-button-radius-small {
-  padding-top: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility pr-spacing-brand-small-component-button-radius-small {
-  padding-right: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility pb-spacing-brand-small-component-button-radius-small {
-  padding-bottom: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility pl-spacing-brand-small-component-button-radius-small {
-  padding-left: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility m-spacing-brand-small-component-button-radius-small {
-  margin: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility mx-spacing-brand-small-component-button-radius-small {
-  margin-left: var(--spacing-brand-small-component-button-radius-small);
-  margin-right: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility my-spacing-brand-small-component-button-radius-small {
-  margin-top: var(--spacing-brand-small-component-button-radius-small);
-  margin-bottom: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility mt-spacing-brand-small-component-button-radius-small {
-  margin-top: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility mr-spacing-brand-small-component-button-radius-small {
-  margin-right: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility mb-spacing-brand-small-component-button-radius-small {
-  margin-bottom: var(--spacing-brand-small-component-button-radius-small);
-}
-
-@utility ml-spacing-brand-small-component-button-radius-small {
-  margin-left: var(--spacing-brand-small-component-button-radius-small);
-}
-
 @utility w-spacing-brand-small-component-card-gap-internal {
   width: var(--spacing-brand-small-component-card-gap-internal);
 }
@@ -17889,12 +16563,12 @@
   padding-inline: var(--spacing-brand-small-layout-grid-margin);
 
   /* Tablet (md breakpoint+) */
-  @media (width >= 48rem) {
+  @media (width >= var(--breakpoint-md)) {
     padding-inline: var(--spacing-brand-medium-layout-grid-margin);
   }
 
   /* Desktop (lg breakpoint+) */
-  @media (width >= 90rem) {
+  @media (width >= var(--breakpoint-lg)) {
     grid-template-columns: repeat(24, 1fr);
     gap: var(--spacing-brand-large-layout-grid-gutter);
     padding-inline: var(--spacing-brand-large-layout-grid-margin);
@@ -17908,7 +16582,7 @@
 @utility col-wide {
   grid-column: 1 / -1;
 
-  @media (width >= 90rem) {
+  @media (width >= var(--breakpoint-lg)) {
     grid-column: 4 / 22; /* 18 columns centered */
   }
 }
@@ -17916,7 +16590,7 @@
 @utility col-content {
   grid-column: 1 / -1;
 
-  @media (width >= 90rem) {
+  @media (width >= var(--breakpoint-lg)) {
     grid-column: 7 / 19; /* Center 12 columns */
   }
 }
@@ -17924,7 +16598,17 @@
 @utility col-narrow {
   grid-column: 1 / -1;
 
-  @media (width >= 90rem) {
+  @media (width >= var(--breakpoint-lg)) {
     grid-column: 9 / 17; /* Center 8 columns */
   }
 }
+
+/* Custom font */
+@font-face {
+	font-family: "PP Neue Montreal";
+	src: url("./assets/fonts/PPNeueMontreal-Variable.woff2")
+		format("woff2-variations");
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
+}