@guardian/stand 0.0.41 → 0.0.43

package/dist/styleD/build/css/component/radioGroup.css

@@ -15,7 +15,7 @@
 	--component-radio-group-shared-indicator-position: relative;
 	--component-radio-group-shared-indicator-after-position: absolute;
 	--component-radio-group-shared-indicator-after-border-radius: inherit;
-	--component-radio-group-shared-indicator-after-inset: 0;
+	--component-radio-group-shared-indicator-after-inset: 0px;
 	--component-radio-group-shared-indicator-after-scale: 0;
 	--component-radio-group-shared-indicator-border-radius: 50%;
 	--component-radio-group-shared-indicator-border: 0.0625rem solid #545454;
@@ -39,13 +39,13 @@
 	--component-radio-group-sm-gap: 1rem;
 	--component-radio-group-sm-typography-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--component-radio-group-sm-typography-letter-spacing: 0;
+	--component-radio-group-sm-typography-letter-spacing: 0rem;
 	--component-radio-group-sm-typography-font-width: 95;
 	--component-radio-group-sm-indicator-width: 1.25rem;
 	--component-radio-group-sm-indicator-height: 1.25rem;
 	--component-radio-group-md-gap: 1.25rem;
 	--component-radio-group-md-typography-font: normal 460 1rem/1.3 'Open Sans';
-	--component-radio-group-md-typography-letter-spacing: 0;
+	--component-radio-group-md-typography-letter-spacing: 0rem;
 	--component-radio-group-md-typography-font-width: 95;
 	--component-radio-group-md-indicator-width: 1.5rem;
 	--component-radio-group-md-indicator-height: 1.5rem;

package/dist/styleD/build/css/component/select.css

@@ -20,7 +20,7 @@
 	--component-select-shared-button-color: #545454;
 	--component-select-shared-button-typography-font: normal 460 1rem/1.3
 		'Open Sans';
-	--component-select-shared-button-typography-letter-spacing: 0;
+	--component-select-shared-button-typography-letter-spacing: 0rem;
 	--component-select-shared-button-typography-font-width: 95;
 	--component-select-shared-button-focused-outline: 0.125rem solid #0072a9;
 	--component-select-shared-button-focused-outline-offset: 0.125rem;
@@ -38,7 +38,7 @@
 	--component-select-shared-option-focused-background-color: inherit;
 	--component-select-shared-list-box-typography-font: normal 460 1rem/1.3
 		'Open Sans';
-	--component-select-shared-list-box-typography-letter-spacing: 0;
+	--component-select-shared-list-box-typography-letter-spacing: 0rem;
 	--component-select-shared-list-box-typography-font-width: 95;
 	--component-select-shared-list-box-border: 0.0625rem solid #cccccc;
 	--component-select-shared-list-box-background-color: #ffffff;

package/dist/styleD/build/css/component/tagTable.css

@@ -25,7 +25,7 @@
 	--component-tag-table-row-first-row-background-hover-color: #8ec183;
 	--component-tag-table-add-button-color: #ffffff;
 	--component-tag-table-add-button-padding-x: 10px;
-	--component-tag-table-add-button-padding-y: 0;
+	--component-tag-table-add-button-padding-y: 0px;
 	--component-tag-table-add-button-background-color: #8d8d8d;
 	--component-tag-table-add-button-background-hover-color: #545454;
 	--component-tag-table-add-button-font-weight: 400;

package/dist/styleD/build/css/component/textArea.css

@@ -22,9 +22,9 @@
 	--component-text-area-shared-focused-outline: 0.125rem auto #0072a9;
 	--component-text-area-shared-error-border: 0.0625rem solid #b42a19;
 	--component-text-area-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
-	--component-text-area-sm-typography-letter-spacing: 0;
+	--component-text-area-sm-typography-letter-spacing: 0rem;
 	--component-text-area-sm-typography-font-width: 95;
 	--component-text-area-md-typography-font: normal 460 1rem/1.3 'Open Sans';
-	--component-text-area-md-typography-letter-spacing: 0;
+	--component-text-area-md-typography-letter-spacing: 0rem;
 	--component-text-area-md-typography-font-width: 95;
 }

package/dist/styleD/build/css/component/textInput.css

@@ -22,10 +22,10 @@
 	--component-text-input-shared-error-border: 0.0625rem solid #b42a19;
 	--component-text-input-sm-height: 2rem;
 	--component-text-input-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
-	--component-text-input-sm-typography-letter-spacing: 0;
+	--component-text-input-sm-typography-letter-spacing: 0rem;
 	--component-text-input-sm-typography-font-width: 95;
 	--component-text-input-md-height: 2.5rem;
 	--component-text-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
-	--component-text-input-md-typography-letter-spacing: 0;
+	--component-text-input-md-typography-letter-spacing: 0rem;
 	--component-text-input-md-typography-font-width: 95;
 }

package/dist/styleD/build/css/component/topBar.css

@@ -82,7 +82,7 @@
 	--component-top-bar-tool-name-gap: 0.5rem;
 	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--component-top-bar-tool-name-typography-letter-spacing: 0;
+	--component-top-bar-tool-name-typography-letter-spacing: 0rem;
 	--component-top-bar-tool-name-typography-font-width: 100;
 	--component-top-bar-tool-name-divider-border: 0.0625rem solid #cccccc;
 	--component-top-bar-tool-name-divider-height: 2rem;
@@ -103,7 +103,7 @@
 	--component-top-bar-tool-name-hover-link-opacity: 0;
 	--component-top-bar-tool-name-hover-link-typography-font: normal 700
 		0.875rem/1.3 'Open Sans';
-	--component-top-bar-tool-name-hover-link-typography-letter-spacing: 0;
+	--component-top-bar-tool-name-hover-link-typography-letter-spacing: 0rem;
 	--component-top-bar-tool-name-hover-link-typography-font-width: 95;
 	--component-top-bar-tool-name-hover-link-position: absolute;
 	--component-top-bar-tool-name-hover-link-width: 100%;

package/dist/styleD/build/css/component/userMenu.css

@@ -9,17 +9,17 @@
 	--component-user-menu-container-padding-x: 0.25rem;
 	--component-user-menu-heading-font-weight: 700;
 	--component-user-menu-heading-font-size: 1.125rem;
-	--component-user-menu-heading-padding-top: 0;
-	--component-user-menu-heading-padding-right: 0;
-	--component-user-menu-heading-padding-bottom: 0;
-	--component-user-menu-heading-padding-left: 0;
+	--component-user-menu-heading-padding-top: 0px;
+	--component-user-menu-heading-padding-right: 0px;
+	--component-user-menu-heading-padding-bottom: 0px;
+	--component-user-menu-heading-padding-left: 0px;
 	--component-user-menu-heading-text-align: left;
 	--component-user-menu-label-font-weight: 700;
 	--component-user-menu-label-font-size: 0.875rem;
 	--component-user-menu-label-padding-top: 15px;
-	--component-user-menu-label-padding-right: 0;
+	--component-user-menu-label-padding-right: 0px;
 	--component-user-menu-label-padding-bottom: 0.375rem;
-	--component-user-menu-label-padding-left: 0;
+	--component-user-menu-label-padding-left: 0px;
 	--component-user-menu-label-text-align: left;
 	--component-user-menu-toggle-button-base-background-color: #ededed;
 	--component-user-menu-toggle-button-disabled-background-color: #dcdcdc;

package/dist/styleD/build/css/semantic/breakpoints.css

@@ -3,7 +3,7 @@
  */
 
 :root {
-	--semantic-breakpoints-sm: 0;
+	--semantic-breakpoints-sm: 0px;
 	--semantic-breakpoints-md: 830px;
 	--semantic-breakpoints-lg: 1056px;
 }

package/dist/styleD/build/css/semantic/colors.css

@@ -72,4 +72,5 @@
 	--semantic-colors-fill-error-strong: #b42a19;
 	--semantic-colors-fill-success-weak: #cde4c9;
 	--semantic-colors-fill-success-strong: #326528;
+	--semantic-colors-fill-neutral-weak: #ededed;
 }

package/dist/styleD/build/css/semantic/grid.css

@@ -9,6 +9,12 @@
 	--semantic-grid-margin-lg-px: 24px;
 	--semantic-grid-margin-md-px: 24px;
 	--semantic-grid-margin-sm-px: 16px;
+	--semantic-grid-margin-top-lg-px: 48px;
+	--semantic-grid-margin-top-md-px: 28px;
+	--semantic-grid-margin-top-sm-px: 24px;
+	--semantic-grid-margin-bottom-lg-px: 64px;
+	--semantic-grid-margin-bottom-md-px: 64px;
+	--semantic-grid-margin-bottom-sm-px: 64px;
 	--semantic-grid-columns-lg: 12;
 	--semantic-grid-columns-md: 12;
 	--semantic-grid-columns-sm: 12;

package/dist/styleD/build/css/semantic/radius.css

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-radius-corner-xs: 0.125rem;
+	--semantic-radius-corner-sm: 0.25rem;
+	--semantic-radius-corner-md: 0.5rem;
+}

package/dist/styleD/build/css/semantic/spacing.css

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-spacing-stack-xxs: 0.25rem;
+	--semantic-spacing-stack-xs: 0.5rem;
+	--semantic-spacing-stack-sm: 0.75rem;
+	--semantic-spacing-stack-md: 1rem;
+	--semantic-spacing-stack-lg: 2rem;
+	--semantic-spacing-stack-xl: 2.5rem;
+}

package/dist/styleD/build/css/semantic/typography.css

@@ -5,22 +5,22 @@
 :root {
 	--semantic-typography-title-sm-font: normal 700 1.125rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-sm-letter-spacing: 0;
+	--semantic-typography-title-sm-letter-spacing: 0rem;
 	--semantic-typography-title-sm-font-width: 100;
 	--semantic-typography-title-md-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-md-letter-spacing: 0;
+	--semantic-typography-title-md-letter-spacing: 0rem;
 	--semantic-typography-title-md-font-width: 100;
 	--semantic-typography-title-lg-font: normal 700 1.5rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-lg-letter-spacing: 0;
+	--semantic-typography-title-lg-letter-spacing: 0rem;
 	--semantic-typography-title-lg-font-width: 100;
 	--semantic-typography-title-xl-font: normal 700 2rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-xl-letter-spacing: 0;
+	--semantic-typography-title-xl-letter-spacing: 0rem;
 	--semantic-typography-title-xl-font-width: 100;
 	--semantic-typography-heading-xs-font: normal 700 0.75rem/1.15 'Open Sans';
-	--semantic-typography-heading-xs-letter-spacing: 0;
+	--semantic-typography-heading-xs-letter-spacing: 0rem;
 	--semantic-typography-heading-xs-font-width: 95;
 	--semantic-typography-heading-sm-font: normal 700 0.875rem/1.15 'Open Sans';
 	--semantic-typography-heading-sm-letter-spacing: -0.0125rem;
@@ -39,11 +39,11 @@
 	--semantic-typography-heading2-xl-font-width: 95;
 	--semantic-typography-heading-compact-xs-font: normal 700 0.75rem/1.15
 		'Open Sans';
-	--semantic-typography-heading-compact-xs-letter-spacing: 0;
+	--semantic-typography-heading-compact-xs-letter-spacing: 0rem;
 	--semantic-typography-heading-compact-xs-font-width: 88;
 	--semantic-typography-heading-compact-sm-font: normal 700 0.875rem/1.15
 		'Open Sans';
-	--semantic-typography-heading-compact-sm-letter-spacing: 0;
+	--semantic-typography-heading-compact-sm-letter-spacing: 0rem;
 	--semantic-typography-heading-compact-sm-font-width: 88;
 	--semantic-typography-heading-compact-md-font: normal 700 1rem/1.15
 		'Open Sans';
@@ -62,171 +62,171 @@
 	--semantic-typography-heading-compact2-xl-letter-spacing: -0.03125rem;
 	--semantic-typography-heading-compact2-xl-font-width: 88;
 	--semantic-typography-body-xs-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-body-xs-letter-spacing: 0;
+	--semantic-typography-body-xs-letter-spacing: 0rem;
 	--semantic-typography-body-xs-font-width: 95;
 	--semantic-typography-body-sm-font: normal 460 0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-sm-letter-spacing: 0;
+	--semantic-typography-body-sm-letter-spacing: 0rem;
 	--semantic-typography-body-sm-font-width: 95;
 	--semantic-typography-body-md-font: normal 460 1rem/1.3 'Open Sans';
-	--semantic-typography-body-md-letter-spacing: 0;
+	--semantic-typography-body-md-letter-spacing: 0rem;
 	--semantic-typography-body-md-font-width: 95;
 	--semantic-typography-body-lg-font: normal 460 1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-lg-letter-spacing: 0;
+	--semantic-typography-body-lg-letter-spacing: 0rem;
 	--semantic-typography-body-lg-font-width: 95;
 	--semantic-typography-body-xl-font: normal 460 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-xl-letter-spacing: 0;
+	--semantic-typography-body-xl-letter-spacing: 0rem;
 	--semantic-typography-body-xl-font-width: 95;
 	--semantic-typography-body-bold-xs-font: normal 700 0.75rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-xs-letter-spacing: 0;
+	--semantic-typography-body-bold-xs-letter-spacing: 0rem;
 	--semantic-typography-body-bold-xs-font-width: 95;
 	--semantic-typography-body-bold-sm-font: normal 700 0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-sm-letter-spacing: 0;
+	--semantic-typography-body-bold-sm-letter-spacing: 0rem;
 	--semantic-typography-body-bold-sm-font-width: 95;
 	--semantic-typography-body-bold-md-font: normal 700 1rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-md-letter-spacing: 0;
+	--semantic-typography-body-bold-md-letter-spacing: 0rem;
 	--semantic-typography-body-bold-md-font-width: 95;
 	--semantic-typography-body-bold-lg-font: normal 700 1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-lg-letter-spacing: 0;
+	--semantic-typography-body-bold-lg-letter-spacing: 0rem;
 	--semantic-typography-body-bold-lg-font-width: 95;
 	--semantic-typography-body-bold-xl-font: normal 700 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-xl-letter-spacing: 0;
+	--semantic-typography-body-bold-xl-letter-spacing: 0rem;
 	--semantic-typography-body-bold-xl-font-width: 95;
 	--semantic-typography-body-italic-xs-font: italic 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-xs-letter-spacing: 0;
+	--semantic-typography-body-italic-xs-letter-spacing: 0rem;
 	--semantic-typography-body-italic-xs-font-width: 95;
 	--semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-sm-letter-spacing: 0;
+	--semantic-typography-body-italic-sm-letter-spacing: 0rem;
 	--semantic-typography-body-italic-sm-font-width: 95;
 	--semantic-typography-body-italic-md-font: italic 460 1rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-md-letter-spacing: 0;
+	--semantic-typography-body-italic-md-letter-spacing: 0rem;
 	--semantic-typography-body-italic-md-font-width: 95;
 	--semantic-typography-body-italic-lg-font: italic 460 1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-lg-letter-spacing: 0;
+	--semantic-typography-body-italic-lg-letter-spacing: 0rem;
 	--semantic-typography-body-italic-lg-font-width: 95;
 	--semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-xl-letter-spacing: 0;
+	--semantic-typography-body-italic-xl-letter-spacing: 0rem;
 	--semantic-typography-body-italic-xl-font-width: 95;
 	--semantic-typography-body-italic-bold-xs-font: italic 700 0.75rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-xs-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-xs-letter-spacing: 0rem;
 	--semantic-typography-body-italic-bold-xs-font-width: 95;
 	--semantic-typography-body-italic-bold-sm-font: italic 700 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-sm-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-sm-letter-spacing: 0rem;
 	--semantic-typography-body-italic-bold-sm-font-width: 95;
 	--semantic-typography-body-italic-bold-md-font: italic 700 1rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-md-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-md-letter-spacing: 0rem;
 	--semantic-typography-body-italic-bold-md-font-width: 95;
 	--semantic-typography-body-italic-bold-lg-font: italic 700 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-lg-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-lg-letter-spacing: 0rem;
 	--semantic-typography-body-italic-bold-lg-font-width: 95;
 	--semantic-typography-body-italic-bold-xl-font: italic 700 1.25rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-xl-letter-spacing: 0;
+	--semantic-typography-body-italic-bold-xl-letter-spacing: 0rem;
 	--semantic-typography-body-italic-bold-xl-font-width: 95;
 	--semantic-typography-body-compact-xs-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-xs-letter-spacing: 0;
+	--semantic-typography-body-compact-xs-letter-spacing: 0rem;
 	--semantic-typography-body-compact-xs-font-width: 88;
 	--semantic-typography-body-compact-sm-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-sm-letter-spacing: 0;
+	--semantic-typography-body-compact-sm-letter-spacing: 0rem;
 	--semantic-typography-body-compact-sm-font-width: 88;
 	--semantic-typography-body-compact-md-font: normal 460 1rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-md-letter-spacing: 0;
+	--semantic-typography-body-compact-md-letter-spacing: 0rem;
 	--semantic-typography-body-compact-md-font-width: 88;
 	--semantic-typography-body-compact-lg-font: normal 460 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-lg-letter-spacing: 0;
+	--semantic-typography-body-compact-lg-letter-spacing: 0rem;
 	--semantic-typography-body-compact-lg-font-width: 88;
 	--semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-xl-letter-spacing: 0;
+	--semantic-typography-body-compact-xl-letter-spacing: 0rem;
 	--semantic-typography-body-compact-xl-font-width: 88;
 	--semantic-typography-body-compact-bold-xs-font: normal 700 0.75rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-xs-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-xs-letter-spacing: 0rem;
 	--semantic-typography-body-compact-bold-xs-font-width: 88;
 	--semantic-typography-body-compact-bold-sm-font: normal 700 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-sm-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-sm-letter-spacing: 0rem;
 	--semantic-typography-body-compact-bold-sm-font-width: 88;
 	--semantic-typography-body-compact-bold-md-font: normal 700 1rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-md-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-md-letter-spacing: 0rem;
 	--semantic-typography-body-compact-bold-md-font-width: 88;
 	--semantic-typography-body-compact-bold-lg-font: normal 700 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-lg-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-lg-letter-spacing: 0rem;
 	--semantic-typography-body-compact-bold-lg-font-width: 88;
 	--semantic-typography-body-compact-bold-xl-font: normal 700 1.25rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-xl-letter-spacing: 0;
+	--semantic-typography-body-compact-bold-xl-letter-spacing: 0rem;
 	--semantic-typography-body-compact-bold-xl-font-width: 88;
 	--semantic-typography-body-compact-italic-xs-font: italic 460 0.75rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-xs-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-xs-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-xs-font-width: 88;
 	--semantic-typography-body-compact-italic-sm-font: italic 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-sm-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-sm-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-sm-font-width: 88;
 	--semantic-typography-body-compact-italic-md-font: italic 460 1rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-md-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-md-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-md-font-width: 88;
 	--semantic-typography-body-compact-italic-lg-font: italic 460 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-lg-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-lg-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-lg-font-width: 88;
 	--semantic-typography-body-compact-italic-xl-font: italic 460 1.25rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-xl-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-xl-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-xl-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-xs-font: italic 700 0.75rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-bold-xs-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-xs-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-bold-xs-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-sm-font: italic 700
 		0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-italic-bold-sm-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-sm-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-bold-sm-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-md-font: italic 700 1rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-bold-md-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-md-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-bold-md-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-lg-font: italic 700
 		1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-italic-bold-lg-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-lg-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-bold-lg-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-xl-font: italic 700 1.25rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-bold-xl-letter-spacing: 0;
+	--semantic-typography-body-compact-italic-bold-xl-letter-spacing: 0rem;
 	--semantic-typography-body-compact-italic-bold-xl-font-width: 88;
 	--semantic-typography-meta-md-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-meta-md-letter-spacing: 0;
+	--semantic-typography-meta-md-letter-spacing: 0rem;
 	--semantic-typography-meta-md-font-width: 95;
 	--semantic-typography-meta-compact-md-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-meta-compact-md-letter-spacing: 0;
+	--semantic-typography-meta-compact-md-letter-spacing: 0rem;
 	--semantic-typography-meta-compact-md-font-width: 88;
 	--semantic-typography-article-body-md-font: normal 400 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-md-letter-spacing: 0;
+	--semantic-typography-article-body-md-letter-spacing: 0rem;
 	--semantic-typography-article-body-md-font-width: 100;
 	--semantic-typography-article-body-bold-md-font: normal 700 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-bold-md-letter-spacing: 0;
+	--semantic-typography-article-body-bold-md-letter-spacing: 0rem;
 	--semantic-typography-article-body-bold-md-font-width: 100;
 	--semantic-typography-article-body-italic-md-font: italic 400 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-italic-md-letter-spacing: 0;
+	--semantic-typography-article-body-italic-md-letter-spacing: 0rem;
 	--semantic-typography-article-body-italic-md-font-width: 100;
 	--semantic-typography-article-body-bold-italic-md-font: italic 700 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-bold-italic-md-letter-spacing: 0;
+	--semantic-typography-article-body-bold-italic-md-letter-spacing: 0rem;
 	--semantic-typography-article-body-bold-italic-md-font-width: 100;
 	--semantic-typography-interactive-xs-font: normal 700 0.75rem/1 'Open Sans';
-	--semantic-typography-interactive-xs-letter-spacing: 0;
+	--semantic-typography-interactive-xs-letter-spacing: 0rem;
 	--semantic-typography-interactive-xs-font-width: 95;
 	--semantic-typography-interactive-sm-font: normal 700 0.875rem/1 'Open Sans';
 	--semantic-typography-interactive-sm-letter-spacing: -0.0125rem;
@@ -242,15 +242,15 @@
 	--semantic-typography-label-form-md-font-width: 95;
 	--semantic-typography-label-form-inline-sm-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-label-form-inline-sm-letter-spacing: 0;
+	--semantic-typography-label-form-inline-sm-letter-spacing: 0rem;
 	--semantic-typography-label-form-inline-sm-font-width: 95;
 	--semantic-typography-label-form-inline-md-font: normal 460 1rem/1.3
 		'Open Sans';
-	--semantic-typography-label-form-inline-md-letter-spacing: 0;
+	--semantic-typography-label-form-inline-md-letter-spacing: 0rem;
 	--semantic-typography-label-form-inline-md-font-width: 95;
 	--semantic-typography-label-form-compact-sm-font: normal 700 0.875rem/1.15
 		'Open Sans';
-	--semantic-typography-label-form-compact-sm-letter-spacing: 0;
+	--semantic-typography-label-form-compact-sm-letter-spacing: 0rem;
 	--semantic-typography-label-form-compact-sm-font-width: 88;
 	--semantic-typography-label-form-compact-md-font: normal 700 1rem/1.15
 		'Open Sans';
@@ -258,18 +258,18 @@
 	--semantic-typography-label-form-compact-md-font-width: 88;
 	--semantic-typography-label-form-inline-compact-sm-font: normal 460
 		0.875rem/1.3 'Open Sans';
-	--semantic-typography-label-form-inline-compact-sm-letter-spacing: 0;
+	--semantic-typography-label-form-inline-compact-sm-letter-spacing: 0rem;
 	--semantic-typography-label-form-inline-compact-sm-font-width: 88;
 	--semantic-typography-label-form-inline-compact-md-font: normal 460 1rem/1.3
 		'Open Sans';
-	--semantic-typography-label-form-inline-compact-md-letter-spacing: 0;
+	--semantic-typography-label-form-inline-compact-md-letter-spacing: 0rem;
 	--semantic-typography-label-form-inline-compact-md-font-width: 88;
 	--semantic-typography-help-text-form-md-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-help-text-form-md-letter-spacing: 0;
+	--semantic-typography-help-text-form-md-letter-spacing: 0rem;
 	--semantic-typography-help-text-form-md-font-width: 95;
 	--semantic-typography-help-text-form-compact-md-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-help-text-form-compact-md-letter-spacing: 0;
+	--semantic-typography-help-text-form-compact-md-letter-spacing: 0rem;
 	--semantic-typography-help-text-form-compact-md-font-width: 88;
 }

package/dist/styleD/build/typescript/component/layout.cjs

@@ -39,7 +39,19 @@ const componentLayout = {
 	main: {
 		maxWidth: "1584px",
 		marginLeft: "auto",
-		marginRight: "auto"
+		marginRight: "auto",
+		sm: { padding: {
+			top: "24px",
+			bottom: "64px"
+		} },
+		md: { padding: {
+			top: "28px",
+			bottom: "64px"
+		} },
+		lg: { padding: {
+			top: "48px",
+			bottom: "64px"
+		} }
 	}
 };
 //#endregion

package/dist/styleD/build/typescript/component/layout.d.cts

@@ -46,6 +46,24 @@ declare const componentLayout: {
     maxWidth: string;
     marginLeft: string;
     marginRight: string;
+    sm: {
+      padding: {
+        top: string;
+        bottom: string;
+      };
+    };
+    md: {
+      padding: {
+        top: string;
+        bottom: string;
+      };
+    };
+    lg: {
+      padding: {
+        top: string;
+        bottom: string;
+      };
+    };
   };
 };
 type ComponentLayout = typeof componentLayout;

package/dist/styleD/build/typescript/component/layout.d.ts

@@ -46,6 +46,24 @@ declare const componentLayout: {
     maxWidth: string;
     marginLeft: string;
     marginRight: string;
+    sm: {
+      padding: {
+        top: string;
+        bottom: string;
+      };
+    };
+    md: {
+      padding: {
+        top: string;
+        bottom: string;
+      };
+    };
+    lg: {
+      padding: {
+        top: string;
+        bottom: string;
+      };
+    };
   };
 };
 type ComponentLayout = typeof componentLayout;

package/dist/styleD/build/typescript/component/layout.js

@@ -39,7 +39,19 @@ const componentLayout = {
 	main: {
 		maxWidth: "1584px",
 		marginLeft: "auto",
-		marginRight: "auto"
+		marginRight: "auto",
+		sm: { padding: {
+			top: "24px",
+			bottom: "64px"
+		} },
+		md: { padding: {
+			top: "28px",
+			bottom: "64px"
+		} },
+		lg: { padding: {
+			top: "48px",
+			bottom: "64px"
+		} }
 	}
 };
 //#endregion

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -78,7 +78,8 @@ const semanticColors = {
 		errorWeak: "#f5c6c0",
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
-		successStrong: "#326528"
+		successStrong: "#326528",
+		neutralWeak: "#ededed"
 	}
 };
 //#endregion

package/dist/styleD/build/typescript/semantic/colors.d.cts

@@ -79,6 +79,7 @@ declare const semanticColors: {
     errorStrong: string;
     successWeak: string;
     successStrong: string;
+    neutralWeak: string;
   };
 };
 type SemanticColors = typeof semanticColors;

package/dist/styleD/build/typescript/semantic/colors.d.ts

@@ -79,6 +79,7 @@ declare const semanticColors: {
     errorStrong: string;
     successWeak: string;
     successStrong: string;
+    neutralWeak: string;
   };
 };
 type SemanticColors = typeof semanticColors;

package/dist/styleD/build/typescript/semantic/colors.js

@@ -78,7 +78,8 @@ const semanticColors = {
 		errorWeak: "#f5c6c0",
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
-		successStrong: "#326528"
+		successStrong: "#326528",
+		neutralWeak: "#ededed"
 	}
 };
 //#endregion

package/dist/styleD/build/typescript/semantic/grid.cjs

@@ -11,7 +11,13 @@ const semanticGrid = {
 	margin: {
 		lgPx: "24px",
 		mdPx: "24px",
-		smPx: "16px"
+		smPx: "16px",
+		topLgPx: "48px",
+		topMdPx: "28px",
+		topSmPx: "24px",
+		bottomLgPx: "64px",
+		bottomMdPx: "64px",
+		bottomSmPx: "64px"
 	},
 	columns: {
 		lg: 12,

package/dist/styleD/build/typescript/semantic/grid.d.cts

@@ -12,6 +12,12 @@ declare const semanticGrid: {
     lgPx: string;
     mdPx: string;
     smPx: string;
+    topLgPx: string;
+    topMdPx: string;
+    topSmPx: string;
+    bottomLgPx: string;
+    bottomMdPx: string;
+    bottomSmPx: string;
   };
   columns: {
     lg: number;