@nationaldesignstudio/react 0.0.7 → 0.0.8

package/dist/tokens.css

@@ -332,6 +332,7 @@
   --leading-88: 88px;
   --leading-96: 96px;
   --leading-9: 11px;
+  --spacing-0: 0px;
   --spacing-10: 10px;
   --spacing-112: 112px;
   --spacing-11: 11px;
@@ -369,12 +370,18 @@
   --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;
@@ -402,6 +409,8 @@
   --spacing-brand-large-layout-grid-gap-large: 48px;
   --spacing-brand-large-layout-grid-gap-medium: 32px;
   --spacing-brand-large-layout-grid-gap-small: 24px;
+  --spacing-brand-large-layout-grid-gutter: 20px;
+  --spacing-brand-large-layout-grid-margin: 72px;
   --spacing-brand-large-layout-hero-gap-content-cta: 40px;
   --spacing-brand-large-layout-hero-padding-y-large: 112px;
   --spacing-brand-large-layout-hero-padding-y-medium: 96px;
@@ -416,12 +425,18 @@
   --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;
@@ -449,6 +464,8 @@
   --spacing-brand-medium-layout-grid-gap-large: 32px;
   --spacing-brand-medium-layout-grid-gap-medium: 24px;
   --spacing-brand-medium-layout-grid-gap-small: 20px;
+  --spacing-brand-medium-layout-grid-gutter: 0px;
+  --spacing-brand-medium-layout-grid-margin: 56px;
   --spacing-brand-medium-layout-hero-gap-content-cta: 32px;
   --spacing-brand-medium-layout-hero-padding-y-large: 80px;
   --spacing-brand-medium-layout-hero-padding-y-medium: 72px;
@@ -463,12 +480,18 @@
   --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;
@@ -496,6 +519,8 @@
   --spacing-brand-small-layout-grid-gap-large: 24px;
   --spacing-brand-small-layout-grid-gap-medium: 20px;
   --spacing-brand-small-layout-grid-gap-small: 16px;
+  --spacing-brand-small-layout-grid-gutter: 0px;
+  --spacing-brand-small-layout-grid-margin: 20px;
   --spacing-brand-small-layout-hero-gap-content-cta: 24px;
   --spacing-brand-small-layout-hero-padding-y-large: 64px;
   --spacing-brand-small-layout-hero-padding-y-medium: 56px;
@@ -896,6 +921,7 @@
   --leading-88: var(--leading-88);
   --leading-96: var(--leading-96);
   --leading-9: var(--leading-9);
+  --spacing-0: var(--spacing-0);
   --spacing-10: var(--spacing-10);
   --spacing-112: var(--spacing-112);
   --spacing-11: var(--spacing-11);
@@ -933,12 +959,18 @@
   --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);
@@ -966,6 +998,8 @@
   --spacing-brand-large-layout-grid-gap-large: var(--spacing-brand-large-layout-grid-gap-large);
   --spacing-brand-large-layout-grid-gap-medium: var(--spacing-brand-large-layout-grid-gap-medium);
   --spacing-brand-large-layout-grid-gap-small: var(--spacing-brand-large-layout-grid-gap-small);
+  --spacing-brand-large-layout-grid-gutter: var(--spacing-brand-large-layout-grid-gutter);
+  --spacing-brand-large-layout-grid-margin: var(--spacing-brand-large-layout-grid-margin);
   --spacing-brand-large-layout-hero-gap-content-cta: var(--spacing-brand-large-layout-hero-gap-content-cta);
   --spacing-brand-large-layout-hero-padding-y-large: var(--spacing-brand-large-layout-hero-padding-y-large);
   --spacing-brand-large-layout-hero-padding-y-medium: var(--spacing-brand-large-layout-hero-padding-y-medium);
@@ -980,12 +1014,18 @@
   --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);
@@ -1013,6 +1053,8 @@
   --spacing-brand-medium-layout-grid-gap-large: var(--spacing-brand-medium-layout-grid-gap-large);
   --spacing-brand-medium-layout-grid-gap-medium: var(--spacing-brand-medium-layout-grid-gap-medium);
   --spacing-brand-medium-layout-grid-gap-small: var(--spacing-brand-medium-layout-grid-gap-small);
+  --spacing-brand-medium-layout-grid-gutter: var(--spacing-brand-medium-layout-grid-gutter);
+  --spacing-brand-medium-layout-grid-margin: var(--spacing-brand-medium-layout-grid-margin);
   --spacing-brand-medium-layout-hero-gap-content-cta: var(--spacing-brand-medium-layout-hero-gap-content-cta);
   --spacing-brand-medium-layout-hero-padding-y-large: var(--spacing-brand-medium-layout-hero-padding-y-large);
   --spacing-brand-medium-layout-hero-padding-y-medium: var(--spacing-brand-medium-layout-hero-padding-y-medium);
@@ -1027,12 +1069,18 @@
   --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);
@@ -1060,6 +1108,8 @@
   --spacing-brand-small-layout-grid-gap-large: var(--spacing-brand-small-layout-grid-gap-large);
   --spacing-brand-small-layout-grid-gap-medium: var(--spacing-brand-small-layout-grid-gap-medium);
   --spacing-brand-small-layout-grid-gap-small: var(--spacing-brand-small-layout-grid-gap-small);
+  --spacing-brand-small-layout-grid-gutter: var(--spacing-brand-small-layout-grid-gutter);
+  --spacing-brand-small-layout-grid-margin: var(--spacing-brand-small-layout-grid-margin);
   --spacing-brand-small-layout-hero-gap-content-cta: var(--spacing-brand-small-layout-hero-gap-content-cta);
   --spacing-brand-small-layout-hero-padding-y-large: var(--spacing-brand-small-layout-hero-padding-y-large);
   --spacing-brand-small-layout-hero-padding-y-medium: var(--spacing-brand-small-layout-hero-padding-y-medium);
@@ -1130,6 +1180,8 @@
 
   /* Tailwind CSS Defaults */
 
+  --spacing: 2px;
+
   --color-white: color(srgb 1 1 1);
   --color-black: color(srgb 0 0 0);
 
@@ -3351,6 +3403,78 @@
 }
 
 
+@utility w-spacing-0 {
+  width: var(--spacing-0);
+}
+
+@utility h-spacing-0 {
+  height: var(--spacing-0);
+}
+
+@utility gap-spacing-0 {
+  gap: var(--spacing-0);
+}
+
+@utility p-spacing-0 {
+  padding: var(--spacing-0);
+}
+
+@utility px-spacing-0 {
+  padding-left: var(--spacing-0);
+  padding-right: var(--spacing-0);
+}
+
+@utility py-spacing-0 {
+  padding-top: var(--spacing-0);
+  padding-bottom: var(--spacing-0);
+}
+
+@utility pt-spacing-0 {
+  padding-top: var(--spacing-0);
+}
+
+@utility pr-spacing-0 {
+  padding-right: var(--spacing-0);
+}
+
+@utility pb-spacing-0 {
+  padding-bottom: var(--spacing-0);
+}
+
+@utility pl-spacing-0 {
+  padding-left: var(--spacing-0);
+}
+
+@utility m-spacing-0 {
+  margin: var(--spacing-0);
+}
+
+@utility mx-spacing-0 {
+  margin-left: var(--spacing-0);
+  margin-right: var(--spacing-0);
+}
+
+@utility my-spacing-0 {
+  margin-top: var(--spacing-0);
+  margin-bottom: var(--spacing-0);
+}
+
+@utility mt-spacing-0 {
+  margin-top: var(--spacing-0);
+}
+
+@utility mr-spacing-0 {
+  margin-right: var(--spacing-0);
+}
+
+@utility mb-spacing-0 {
+  margin-bottom: var(--spacing-0);
+}
+
+@utility ml-spacing-0 {
+  margin-left: var(--spacing-0);
+}
+
 @utility w-spacing-2 {
   width: var(--spacing-2);
 }
@@ -6015,6 +6139,222 @@
   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);
 }
@@ -6447,6 +6787,222 @@
   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);
 }
@@ -8391,37 +8947,181 @@
   margin-left: var(--spacing-brand-large-layout-grid-gap-small);
 }
 
-@utility w-spacing-brand-large-layout-hero-gap-content-cta {
-  width: var(--spacing-brand-large-layout-hero-gap-content-cta);
+@utility w-spacing-brand-large-layout-grid-gutter {
+  width: var(--spacing-brand-large-layout-grid-gutter);
 }
 
-@utility h-spacing-brand-large-layout-hero-gap-content-cta {
-  height: var(--spacing-brand-large-layout-hero-gap-content-cta);
+@utility h-spacing-brand-large-layout-grid-gutter {
+  height: var(--spacing-brand-large-layout-grid-gutter);
 }
 
-@utility gap-spacing-brand-large-layout-hero-gap-content-cta {
-  gap: var(--spacing-brand-large-layout-hero-gap-content-cta);
+@utility gap-spacing-brand-large-layout-grid-gutter {
+  gap: var(--spacing-brand-large-layout-grid-gutter);
 }
 
-@utility p-spacing-brand-large-layout-hero-gap-content-cta {
-  padding: var(--spacing-brand-large-layout-hero-gap-content-cta);
+@utility p-spacing-brand-large-layout-grid-gutter {
+  padding: var(--spacing-brand-large-layout-grid-gutter);
 }
 
-@utility px-spacing-brand-large-layout-hero-gap-content-cta {
-  padding-left: var(--spacing-brand-large-layout-hero-gap-content-cta);
-  padding-right: var(--spacing-brand-large-layout-hero-gap-content-cta);
+@utility px-spacing-brand-large-layout-grid-gutter {
+  padding-left: var(--spacing-brand-large-layout-grid-gutter);
+  padding-right: var(--spacing-brand-large-layout-grid-gutter);
 }
 
-@utility py-spacing-brand-large-layout-hero-gap-content-cta {
-  padding-top: var(--spacing-brand-large-layout-hero-gap-content-cta);
-  padding-bottom: var(--spacing-brand-large-layout-hero-gap-content-cta);
+@utility py-spacing-brand-large-layout-grid-gutter {
+  padding-top: var(--spacing-brand-large-layout-grid-gutter);
+  padding-bottom: var(--spacing-brand-large-layout-grid-gutter);
 }
 
-@utility pt-spacing-brand-large-layout-hero-gap-content-cta {
-  padding-top: var(--spacing-brand-large-layout-hero-gap-content-cta);
+@utility pt-spacing-brand-large-layout-grid-gutter {
+  padding-top: var(--spacing-brand-large-layout-grid-gutter);
 }
 
-@utility pr-spacing-brand-large-layout-hero-gap-content-cta {
+@utility pr-spacing-brand-large-layout-grid-gutter {
+  padding-right: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility pb-spacing-brand-large-layout-grid-gutter {
+  padding-bottom: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility pl-spacing-brand-large-layout-grid-gutter {
+  padding-left: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility m-spacing-brand-large-layout-grid-gutter {
+  margin: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility mx-spacing-brand-large-layout-grid-gutter {
+  margin-left: var(--spacing-brand-large-layout-grid-gutter);
+  margin-right: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility my-spacing-brand-large-layout-grid-gutter {
+  margin-top: var(--spacing-brand-large-layout-grid-gutter);
+  margin-bottom: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility mt-spacing-brand-large-layout-grid-gutter {
+  margin-top: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility mr-spacing-brand-large-layout-grid-gutter {
+  margin-right: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility mb-spacing-brand-large-layout-grid-gutter {
+  margin-bottom: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility ml-spacing-brand-large-layout-grid-gutter {
+  margin-left: var(--spacing-brand-large-layout-grid-gutter);
+}
+
+@utility w-spacing-brand-large-layout-grid-margin {
+  width: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility h-spacing-brand-large-layout-grid-margin {
+  height: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility gap-spacing-brand-large-layout-grid-margin {
+  gap: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility p-spacing-brand-large-layout-grid-margin {
+  padding: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility px-spacing-brand-large-layout-grid-margin {
+  padding-left: var(--spacing-brand-large-layout-grid-margin);
+  padding-right: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility py-spacing-brand-large-layout-grid-margin {
+  padding-top: var(--spacing-brand-large-layout-grid-margin);
+  padding-bottom: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility pt-spacing-brand-large-layout-grid-margin {
+  padding-top: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility pr-spacing-brand-large-layout-grid-margin {
+  padding-right: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility pb-spacing-brand-large-layout-grid-margin {
+  padding-bottom: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility pl-spacing-brand-large-layout-grid-margin {
+  padding-left: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility m-spacing-brand-large-layout-grid-margin {
+  margin: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility mx-spacing-brand-large-layout-grid-margin {
+  margin-left: var(--spacing-brand-large-layout-grid-margin);
+  margin-right: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility my-spacing-brand-large-layout-grid-margin {
+  margin-top: var(--spacing-brand-large-layout-grid-margin);
+  margin-bottom: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility mt-spacing-brand-large-layout-grid-margin {
+  margin-top: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility mr-spacing-brand-large-layout-grid-margin {
+  margin-right: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility mb-spacing-brand-large-layout-grid-margin {
+  margin-bottom: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility ml-spacing-brand-large-layout-grid-margin {
+  margin-left: var(--spacing-brand-large-layout-grid-margin);
+}
+
+@utility w-spacing-brand-large-layout-hero-gap-content-cta {
+  width: var(--spacing-brand-large-layout-hero-gap-content-cta);
+}
+
+@utility h-spacing-brand-large-layout-hero-gap-content-cta {
+  height: var(--spacing-brand-large-layout-hero-gap-content-cta);
+}
+
+@utility gap-spacing-brand-large-layout-hero-gap-content-cta {
+  gap: var(--spacing-brand-large-layout-hero-gap-content-cta);
+}
+
+@utility p-spacing-brand-large-layout-hero-gap-content-cta {
+  padding: var(--spacing-brand-large-layout-hero-gap-content-cta);
+}
+
+@utility px-spacing-brand-large-layout-hero-gap-content-cta {
+  padding-left: var(--spacing-brand-large-layout-hero-gap-content-cta);
+  padding-right: var(--spacing-brand-large-layout-hero-gap-content-cta);
+}
+
+@utility py-spacing-brand-large-layout-hero-gap-content-cta {
+  padding-top: var(--spacing-brand-large-layout-hero-gap-content-cta);
+  padding-bottom: var(--spacing-brand-large-layout-hero-gap-content-cta);
+}
+
+@utility pt-spacing-brand-large-layout-hero-gap-content-cta {
+  padding-top: var(--spacing-brand-large-layout-hero-gap-content-cta);
+}
+
+@utility pr-spacing-brand-large-layout-hero-gap-content-cta {
   padding-right: var(--spacing-brand-large-layout-hero-gap-content-cta);
 }
 
@@ -9399,6 +10099,222 @@
   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 h-spacing-brand-medium-component-button-height-large {
+  height: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility gap-spacing-brand-medium-component-button-height-large {
+  gap: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility p-spacing-brand-medium-component-button-height-large {
+  padding: var(--spacing-brand-medium-component-button-height-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 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 pt-spacing-brand-medium-component-button-height-large {
+  padding-top: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility pr-spacing-brand-medium-component-button-height-large {
+  padding-right: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility pb-spacing-brand-medium-component-button-height-large {
+  padding-bottom: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility pl-spacing-brand-medium-component-button-height-large {
+  padding-left: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility m-spacing-brand-medium-component-button-height-large {
+  margin: var(--spacing-brand-medium-component-button-height-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 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 mt-spacing-brand-medium-component-button-height-large {
+  margin-top: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility mr-spacing-brand-medium-component-button-height-large {
+  margin-right: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility mb-spacing-brand-medium-component-button-height-large {
+  margin-bottom: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility ml-spacing-brand-medium-component-button-height-large {
+  margin-left: var(--spacing-brand-medium-component-button-height-large);
+}
+
+@utility w-spacing-brand-medium-component-button-height-medium {
+  width: var(--spacing-brand-medium-component-button-height-medium);
+}
+
+@utility h-spacing-brand-medium-component-button-height-medium {
+  height: var(--spacing-brand-medium-component-button-height-medium);
+}
+
+@utility gap-spacing-brand-medium-component-button-height-medium {
+  gap: var(--spacing-brand-medium-component-button-height-medium);
+}
+
+@utility p-spacing-brand-medium-component-button-height-medium {
+  padding: var(--spacing-brand-medium-component-button-height-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);
 }
@@ -9780,55 +10696,271 @@
   padding-right: var(--spacing-brand-medium-component-button-padding-y-small);
 }
 
-@utility py-spacing-brand-medium-component-button-padding-y-small {
-  padding-top: var(--spacing-brand-medium-component-button-padding-y-small);
-  padding-bottom: var(--spacing-brand-medium-component-button-padding-y-small);
+@utility py-spacing-brand-medium-component-button-padding-y-small {
+  padding-top: var(--spacing-brand-medium-component-button-padding-y-small);
+  padding-bottom: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility pt-spacing-brand-medium-component-button-padding-y-small {
+  padding-top: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility pr-spacing-brand-medium-component-button-padding-y-small {
+  padding-right: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility pb-spacing-brand-medium-component-button-padding-y-small {
+  padding-bottom: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility pl-spacing-brand-medium-component-button-padding-y-small {
+  padding-left: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility m-spacing-brand-medium-component-button-padding-y-small {
+  margin: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility mx-spacing-brand-medium-component-button-padding-y-small {
+  margin-left: var(--spacing-brand-medium-component-button-padding-y-small);
+  margin-right: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility my-spacing-brand-medium-component-button-padding-y-small {
+  margin-top: var(--spacing-brand-medium-component-button-padding-y-small);
+  margin-bottom: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility mt-spacing-brand-medium-component-button-padding-y-small {
+  margin-top: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility mr-spacing-brand-medium-component-button-padding-y-small {
+  margin-right: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility mb-spacing-brand-medium-component-button-padding-y-small {
+  margin-bottom: var(--spacing-brand-medium-component-button-padding-y-small);
+}
+
+@utility ml-spacing-brand-medium-component-button-padding-y-small {
+  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-padding-y-small {
-  padding-top: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  padding-right: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  padding-bottom: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  padding-left: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  margin: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  margin-left: var(--spacing-brand-medium-component-button-padding-y-small);
-  margin-right: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  margin-top: var(--spacing-brand-medium-component-button-padding-y-small);
-  margin-bottom: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  margin-top: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  margin-right: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  margin-bottom: var(--spacing-brand-medium-component-button-padding-y-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-padding-y-small {
-  margin-left: var(--spacing-brand-medium-component-button-padding-y-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 {
@@ -11775,6 +12907,150 @@
   margin-left: var(--spacing-brand-medium-layout-grid-gap-small);
 }
 
+@utility w-spacing-brand-medium-layout-grid-gutter {
+  width: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility h-spacing-brand-medium-layout-grid-gutter {
+  height: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility gap-spacing-brand-medium-layout-grid-gutter {
+  gap: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility p-spacing-brand-medium-layout-grid-gutter {
+  padding: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility px-spacing-brand-medium-layout-grid-gutter {
+  padding-left: var(--spacing-brand-medium-layout-grid-gutter);
+  padding-right: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility py-spacing-brand-medium-layout-grid-gutter {
+  padding-top: var(--spacing-brand-medium-layout-grid-gutter);
+  padding-bottom: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility pt-spacing-brand-medium-layout-grid-gutter {
+  padding-top: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility pr-spacing-brand-medium-layout-grid-gutter {
+  padding-right: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility pb-spacing-brand-medium-layout-grid-gutter {
+  padding-bottom: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility pl-spacing-brand-medium-layout-grid-gutter {
+  padding-left: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility m-spacing-brand-medium-layout-grid-gutter {
+  margin: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility mx-spacing-brand-medium-layout-grid-gutter {
+  margin-left: var(--spacing-brand-medium-layout-grid-gutter);
+  margin-right: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility my-spacing-brand-medium-layout-grid-gutter {
+  margin-top: var(--spacing-brand-medium-layout-grid-gutter);
+  margin-bottom: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility mt-spacing-brand-medium-layout-grid-gutter {
+  margin-top: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility mr-spacing-brand-medium-layout-grid-gutter {
+  margin-right: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility mb-spacing-brand-medium-layout-grid-gutter {
+  margin-bottom: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility ml-spacing-brand-medium-layout-grid-gutter {
+  margin-left: var(--spacing-brand-medium-layout-grid-gutter);
+}
+
+@utility w-spacing-brand-medium-layout-grid-margin {
+  width: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility h-spacing-brand-medium-layout-grid-margin {
+  height: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility gap-spacing-brand-medium-layout-grid-margin {
+  gap: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility p-spacing-brand-medium-layout-grid-margin {
+  padding: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility px-spacing-brand-medium-layout-grid-margin {
+  padding-left: var(--spacing-brand-medium-layout-grid-margin);
+  padding-right: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility py-spacing-brand-medium-layout-grid-margin {
+  padding-top: var(--spacing-brand-medium-layout-grid-margin);
+  padding-bottom: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility pt-spacing-brand-medium-layout-grid-margin {
+  padding-top: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility pr-spacing-brand-medium-layout-grid-margin {
+  padding-right: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility pb-spacing-brand-medium-layout-grid-margin {
+  padding-bottom: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility pl-spacing-brand-medium-layout-grid-margin {
+  padding-left: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility m-spacing-brand-medium-layout-grid-margin {
+  margin: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility mx-spacing-brand-medium-layout-grid-margin {
+  margin-left: var(--spacing-brand-medium-layout-grid-margin);
+  margin-right: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility my-spacing-brand-medium-layout-grid-margin {
+  margin-top: var(--spacing-brand-medium-layout-grid-margin);
+  margin-bottom: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility mt-spacing-brand-medium-layout-grid-margin {
+  margin-top: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility mr-spacing-brand-medium-layout-grid-margin {
+  margin-right: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility mb-spacing-brand-medium-layout-grid-margin {
+  margin-bottom: var(--spacing-brand-medium-layout-grid-margin);
+}
+
+@utility ml-spacing-brand-medium-layout-grid-margin {
+  margin-left: var(--spacing-brand-medium-layout-grid-margin);
+}
+
 @utility w-spacing-brand-medium-layout-hero-gap-content-cta {
   width: var(--spacing-brand-medium-layout-hero-gap-content-cta);
 }
@@ -12673,114 +13949,330 @@
   padding-right: var(--spacing-brand-small-component-button-gap-button-group);
 }
 
-@utility pb-spacing-brand-small-component-button-gap-button-group {
-  padding-bottom: var(--spacing-brand-small-component-button-gap-button-group);
+@utility pb-spacing-brand-small-component-button-gap-button-group {
+  padding-bottom: var(--spacing-brand-small-component-button-gap-button-group);
+}
+
+@utility pl-spacing-brand-small-component-button-gap-button-group {
+  padding-left: var(--spacing-brand-small-component-button-gap-button-group);
+}
+
+@utility m-spacing-brand-small-component-button-gap-button-group {
+  margin: var(--spacing-brand-small-component-button-gap-button-group);
+}
+
+@utility mx-spacing-brand-small-component-button-gap-button-group {
+  margin-left: var(--spacing-brand-small-component-button-gap-button-group);
+  margin-right: var(--spacing-brand-small-component-button-gap-button-group);
+}
+
+@utility my-spacing-brand-small-component-button-gap-button-group {
+  margin-top: var(--spacing-brand-small-component-button-gap-button-group);
+  margin-bottom: var(--spacing-brand-small-component-button-gap-button-group);
+}
+
+@utility mt-spacing-brand-small-component-button-gap-button-group {
+  margin-top: var(--spacing-brand-small-component-button-gap-button-group);
+}
+
+@utility mr-spacing-brand-small-component-button-gap-button-group {
+  margin-right: var(--spacing-brand-small-component-button-gap-button-group);
+}
+
+@utility mb-spacing-brand-small-component-button-gap-button-group {
+  margin-bottom: var(--spacing-brand-small-component-button-gap-button-group);
+}
+
+@utility ml-spacing-brand-small-component-button-gap-button-group {
+  margin-left: var(--spacing-brand-small-component-button-gap-button-group);
+}
+
+@utility w-spacing-brand-small-component-button-gap-icon-text {
+  width: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility h-spacing-brand-small-component-button-gap-icon-text {
+  height: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility gap-spacing-brand-small-component-button-gap-icon-text {
+  gap: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility p-spacing-brand-small-component-button-gap-icon-text {
+  padding: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility px-spacing-brand-small-component-button-gap-icon-text {
+  padding-left: var(--spacing-brand-small-component-button-gap-icon-text);
+  padding-right: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility py-spacing-brand-small-component-button-gap-icon-text {
+  padding-top: var(--spacing-brand-small-component-button-gap-icon-text);
+  padding-bottom: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility pt-spacing-brand-small-component-button-gap-icon-text {
+  padding-top: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility pr-spacing-brand-small-component-button-gap-icon-text {
+  padding-right: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility pb-spacing-brand-small-component-button-gap-icon-text {
+  padding-bottom: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility pl-spacing-brand-small-component-button-gap-icon-text {
+  padding-left: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility m-spacing-brand-small-component-button-gap-icon-text {
+  margin: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility mx-spacing-brand-small-component-button-gap-icon-text {
+  margin-left: var(--spacing-brand-small-component-button-gap-icon-text);
+  margin-right: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility my-spacing-brand-small-component-button-gap-icon-text {
+  margin-top: var(--spacing-brand-small-component-button-gap-icon-text);
+  margin-bottom: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility mt-spacing-brand-small-component-button-gap-icon-text {
+  margin-top: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility mr-spacing-brand-small-component-button-gap-icon-text {
+  margin-right: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility mb-spacing-brand-small-component-button-gap-icon-text {
+  margin-bottom: var(--spacing-brand-small-component-button-gap-icon-text);
+}
+
+@utility ml-spacing-brand-small-component-button-gap-icon-text {
+  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-gap-button-group {
-  padding-left: var(--spacing-brand-small-component-button-gap-button-group);
+@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-gap-button-group {
-  margin: var(--spacing-brand-small-component-button-gap-button-group);
+@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-gap-button-group {
-  margin-left: var(--spacing-brand-small-component-button-gap-button-group);
-  margin-right: var(--spacing-brand-small-component-button-gap-button-group);
+@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-gap-button-group {
-  margin-top: var(--spacing-brand-small-component-button-gap-button-group);
-  margin-bottom: var(--spacing-brand-small-component-button-gap-button-group);
+@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-gap-button-group {
-  margin-top: var(--spacing-brand-small-component-button-gap-button-group);
+@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-gap-button-group {
-  margin-right: var(--spacing-brand-small-component-button-gap-button-group);
+@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-gap-button-group {
-  margin-bottom: var(--spacing-brand-small-component-button-gap-button-group);
+@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-gap-button-group {
-  margin-left: var(--spacing-brand-small-component-button-gap-button-group);
+@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-gap-icon-text {
-  width: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  height: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  gap: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  padding: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  padding-left: var(--spacing-brand-small-component-button-gap-icon-text);
-  padding-right: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  padding-top: var(--spacing-brand-small-component-button-gap-icon-text);
-  padding-bottom: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  padding-top: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  padding-right: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  padding-bottom: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  padding-left: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  margin: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  margin-left: var(--spacing-brand-small-component-button-gap-icon-text);
-  margin-right: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  margin-top: var(--spacing-brand-small-component-button-gap-icon-text);
-  margin-bottom: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  margin-top: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  margin-right: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  margin-bottom: var(--spacing-brand-small-component-button-gap-icon-text);
+@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-gap-icon-text {
-  margin-left: var(--spacing-brand-small-component-button-gap-icon-text);
+@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 {
@@ -13215,6 +14707,222 @@
   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);
 }
@@ -15159,6 +16867,150 @@
   margin-left: var(--spacing-brand-small-layout-grid-gap-small);
 }
 
+@utility w-spacing-brand-small-layout-grid-gutter {
+  width: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility h-spacing-brand-small-layout-grid-gutter {
+  height: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility gap-spacing-brand-small-layout-grid-gutter {
+  gap: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility p-spacing-brand-small-layout-grid-gutter {
+  padding: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility px-spacing-brand-small-layout-grid-gutter {
+  padding-left: var(--spacing-brand-small-layout-grid-gutter);
+  padding-right: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility py-spacing-brand-small-layout-grid-gutter {
+  padding-top: var(--spacing-brand-small-layout-grid-gutter);
+  padding-bottom: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility pt-spacing-brand-small-layout-grid-gutter {
+  padding-top: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility pr-spacing-brand-small-layout-grid-gutter {
+  padding-right: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility pb-spacing-brand-small-layout-grid-gutter {
+  padding-bottom: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility pl-spacing-brand-small-layout-grid-gutter {
+  padding-left: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility m-spacing-brand-small-layout-grid-gutter {
+  margin: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility mx-spacing-brand-small-layout-grid-gutter {
+  margin-left: var(--spacing-brand-small-layout-grid-gutter);
+  margin-right: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility my-spacing-brand-small-layout-grid-gutter {
+  margin-top: var(--spacing-brand-small-layout-grid-gutter);
+  margin-bottom: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility mt-spacing-brand-small-layout-grid-gutter {
+  margin-top: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility mr-spacing-brand-small-layout-grid-gutter {
+  margin-right: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility mb-spacing-brand-small-layout-grid-gutter {
+  margin-bottom: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility ml-spacing-brand-small-layout-grid-gutter {
+  margin-left: var(--spacing-brand-small-layout-grid-gutter);
+}
+
+@utility w-spacing-brand-small-layout-grid-margin {
+  width: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility h-spacing-brand-small-layout-grid-margin {
+  height: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility gap-spacing-brand-small-layout-grid-margin {
+  gap: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility p-spacing-brand-small-layout-grid-margin {
+  padding: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility px-spacing-brand-small-layout-grid-margin {
+  padding-left: var(--spacing-brand-small-layout-grid-margin);
+  padding-right: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility py-spacing-brand-small-layout-grid-margin {
+  padding-top: var(--spacing-brand-small-layout-grid-margin);
+  padding-bottom: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility pt-spacing-brand-small-layout-grid-margin {
+  padding-top: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility pr-spacing-brand-small-layout-grid-margin {
+  padding-right: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility pb-spacing-brand-small-layout-grid-margin {
+  padding-bottom: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility pl-spacing-brand-small-layout-grid-margin {
+  padding-left: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility m-spacing-brand-small-layout-grid-margin {
+  margin: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility mx-spacing-brand-small-layout-grid-margin {
+  margin-left: var(--spacing-brand-small-layout-grid-margin);
+  margin-right: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility my-spacing-brand-small-layout-grid-margin {
+  margin-top: var(--spacing-brand-small-layout-grid-margin);
+  margin-bottom: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility mt-spacing-brand-small-layout-grid-margin {
+  margin-top: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility mr-spacing-brand-small-layout-grid-margin {
+  margin-right: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility mb-spacing-brand-small-layout-grid-margin {
+  margin-bottom: var(--spacing-brand-small-layout-grid-margin);
+}
+
+@utility ml-spacing-brand-small-layout-grid-margin {
+  margin-left: var(--spacing-brand-small-layout-grid-margin);
+}
+
 @utility w-spacing-brand-small-layout-hero-gap-content-cta {
   width: var(--spacing-brand-small-layout-hero-gap-content-cta);
 }
@@ -16021,4 +17873,58 @@
 
 @utility ml-spacing-brand-small-layout-section-padding-y-small {
   margin-left: var(--spacing-brand-small-layout-section-padding-y-small);
-}
+}
+
+/* Grid Layout Utilities */
+
+@utility grid-container {
+  display: grid;
+  width: 100%;
+  max-width: var(--breakpoint-lg);
+  margin-inline: auto;
+  overflow-x: hidden;
+
+  /* Mobile (default): single column */
+  grid-template-columns: 1fr;
+  padding-inline: var(--spacing-brand-small-layout-grid-margin);
+
+  /* Tablet (md breakpoint+) */
+  @media (width >= 48rem) {
+    padding-inline: var(--spacing-brand-medium-layout-grid-margin);
+  }
+
+  /* Desktop (lg breakpoint+) */
+  @media (width >= 90rem) {
+    grid-template-columns: repeat(24, 1fr);
+    gap: var(--spacing-brand-large-layout-grid-gutter);
+    padding-inline: var(--spacing-brand-large-layout-grid-margin);
+  }
+}
+
+@utility col-full {
+  grid-column: 1 / -1;
+}
+
+@utility col-wide {
+  grid-column: 1 / -1;
+
+  @media (width >= 90rem) {
+    grid-column: 4 / 22; /* 18 columns centered */
+  }
+}
+
+@utility col-content {
+  grid-column: 1 / -1;
+
+  @media (width >= 90rem) {
+    grid-column: 7 / 19; /* Center 12 columns */
+  }
+}
+
+@utility col-narrow {
+  grid-column: 1 / -1;
+
+  @media (width >= 90rem) {
+    grid-column: 9 / 17; /* Center 8 columns */
+  }
+}