@guardian/stand 0.0.42 → 0.0.44

package/dist/components/Form/Form.cjs

@@ -6,7 +6,7 @@ const require_types = require("./types.cjs");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
 //#region src/components/Form/Form.tsx
-function FormInputContainer({ as: Component, size = "md", label, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
+function FormInputContainer({ as: Component, size = "md", label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
 	if (!require_types.ALLOWED_FORM_CONTAINERS.includes(Component)) return null;
 	const mergedTheme = require_mergeDeep.mergeDeep(require_mergeDeep.mergeDeep(require_styles.defaultFormInputContainerTheme, theme), formInputContainerTheme ?? {});
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(Component, {
@@ -19,7 +19,7 @@ function FormInputContainer({ as: Component, size = "md", label, description, er
 					size,
 					isDisabled
 				}),
-				children: label
+				children: renderLabel ? renderLabel(label) : label
 			}),
 			description && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
 				css: require_styles.formInputDescriptionStyles(mergedTheme, { isDisabled }),

package/dist/components/Form/Form.js

@@ -5,7 +5,7 @@ import { ALLOWED_FORM_CONTAINERS } from "./types.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { FieldError, Label } from "react-aria-components";
 //#region src/components/Form/Form.tsx
-function FormInputContainer({ as: Component, size = "md", label, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
+function FormInputContainer({ as: Component, size = "md", label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
 	if (!ALLOWED_FORM_CONTAINERS.includes(Component)) return null;
 	const mergedTheme = mergeDeep(mergeDeep(defaultFormInputContainerTheme, theme), formInputContainerTheme ?? {});
 	return /* @__PURE__ */ jsxs(Component, {
@@ -18,7 +18,7 @@ function FormInputContainer({ as: Component, size = "md", label, description, er
 					size,
 					isDisabled
 				}),
-				children: label
+				children: renderLabel ? renderLabel(label) : label
 			}),
 			description && /* @__PURE__ */ jsx("div", {
 				css: formInputDescriptionStyles(mergedTheme, { isDisabled }),

package/dist/components/Form/types.d.cts

@@ -11,9 +11,15 @@ type FormInputContainerDefaultProps<ReactAriaInput extends {
    */
   size?: keyof Omit<ComponentTheme, 'shared'>;
   /**
-   * The label text for the form field
+   * The label text for the form field.
    */
   label?: string;
+  /**
+   * Custom render function for the label. Receives the `label` string and returns a ReactNode.
+   * Use this to add icons, badges, or other visual enhancements alongside the label text.
+   * Ensure the returned node still includes the label text so the field remains accessible.
+   */
+  renderLabel?: (label: string) => ReactNode;
   /**
    * The description text for the form field
    */

package/dist/components/Form/types.d.ts

@@ -11,9 +11,15 @@ type FormInputContainerDefaultProps<ReactAriaInput extends {
    */
   size?: keyof Omit<ComponentTheme, 'shared'>;
   /**
-   * The label text for the form field
+   * The label text for the form field.
    */
   label?: string;
+  /**
+   * Custom render function for the label. Receives the `label` string and returns a ReactNode.
+   * Use this to add icons, badges, or other visual enhancements alongside the label text.
+   * Ensure the returned node still includes the label text so the field remains accessible.
+   */
+  renderLabel?: (label: string) => ReactNode;
   /**
    * The description text for the form field
    */

package/dist/components/Layout/Layout.cjs

@@ -45,9 +45,13 @@ function LayoutSidebar({ as: Component = "aside", children, layoutSmBreakpoint =
 /**
 * Places children into the main grid area of the Layout.
 */
-function LayoutMain({ as: Component = "main", children, fluid = true, theme = {}, cssOverrides, ...props }) {
+function LayoutMain({ as: Component = "main", children, fluid = true, paddingTop = true, paddingBottom = true, theme = {}, cssOverrides, ...props }) {
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Component, {
-		css: [require_styles.mainLayoutStyles(require_mergeDeep.mergeDeep(require_styles.defaultMainTheme, theme), { fluid }), cssOverrides],
+		css: [require_styles.mainLayoutStyles(require_mergeDeep.mergeDeep(require_styles.defaultMainTheme, theme), {
+			fluid,
+			paddingTop,
+			paddingBottom
+		}), cssOverrides],
 		...props,
 		children
 	});

package/dist/components/Layout/Layout.js

@@ -44,9 +44,13 @@ function LayoutSidebar({ as: Component = "aside", children, layoutSmBreakpoint =
 /**
 * Places children into the main grid area of the Layout.
 */
-function LayoutMain({ as: Component = "main", children, fluid = true, theme = {}, cssOverrides, ...props }) {
+function LayoutMain({ as: Component = "main", children, fluid = true, paddingTop = true, paddingBottom = true, theme = {}, cssOverrides, ...props }) {
 	return /* @__PURE__ */ jsx(Component, {
-		css: [mainLayoutStyles(mergeDeep(defaultMainTheme, theme), { fluid }), cssOverrides],
+		css: [mainLayoutStyles(mergeDeep(defaultMainTheme, theme), {
+			fluid,
+			paddingTop,
+			paddingBottom
+		}), cssOverrides],
 		...props,
 		children
 	});

package/dist/components/Layout/styles.cjs

@@ -21,7 +21,7 @@ const sidebarLayoutStyles = () => {
 		grid-area: sidebar;
 	`;
 };
-const mainLayoutStyles = (theme, { fluid }) => {
+const mainLayoutStyles = (theme, { fluid, paddingTop, paddingBottom }) => {
 	return _emotion_react.css`
 		grid-area: main;
 		${fluid ? "" : _emotion_react.css`
@@ -29,6 +29,32 @@ const mainLayoutStyles = (theme, { fluid }) => {
 					margin-left: ${theme.marginLeft};
 					margin-right: ${theme.marginRight};
 				`}
+		${paddingTop ? _emotion_react.css`
+					${require_mq.from.sm} {
+						padding-top: ${theme.sm.padding.top};
+					}
+
+					${require_mq.from.md} {
+						padding-top: ${theme.md.padding.top};
+					}
+
+					${require_mq.from.lg} {
+						padding-top: ${theme.lg.padding.top};
+					}
+				` : ""}
+		${paddingBottom ? _emotion_react.css`
+					${require_mq.from.sm} {
+						padding-bottom: ${theme.sm.padding.bottom};
+					}
+
+					${require_mq.from.md} {
+						padding-bottom: ${theme.md.padding.bottom};
+					}
+
+					${require_mq.from.lg} {
+						padding-bottom: ${theme.lg.padding.bottom};
+					}
+				` : ""}
 	`;
 };
 const layoutStyles = (theme) => {

package/dist/components/Layout/styles.js

@@ -20,7 +20,7 @@ const sidebarLayoutStyles = () => {
 		grid-area: sidebar;
 	`;
 };
-const mainLayoutStyles = (theme, { fluid }) => {
+const mainLayoutStyles = (theme, { fluid, paddingTop, paddingBottom }) => {
 	return css`
 		grid-area: main;
 		${fluid ? "" : css`
@@ -28,6 +28,32 @@ const mainLayoutStyles = (theme, { fluid }) => {
 					margin-left: ${theme.marginLeft};
 					margin-right: ${theme.marginRight};
 				`}
+		${paddingTop ? css`
+					${from.sm} {
+						padding-top: ${theme.sm.padding.top};
+					}
+
+					${from.md} {
+						padding-top: ${theme.md.padding.top};
+					}
+
+					${from.lg} {
+						padding-top: ${theme.lg.padding.top};
+					}
+				` : ""}
+		${paddingBottom ? css`
+					${from.sm} {
+						padding-bottom: ${theme.sm.padding.bottom};
+					}
+
+					${from.md} {
+						padding-bottom: ${theme.md.padding.bottom};
+					}
+
+					${from.lg} {
+						padding-bottom: ${theme.lg.padding.bottom};
+					}
+				` : ""}
 	`;
 };
 const layoutStyles = (theme) => {

package/dist/components/Layout/types.d.cts

@@ -12,6 +12,16 @@ interface MainProps extends DefaultPropsWithChildren<MainTheme>, React.HTMLAttri
    * This can be used to prevent the layout from becoming too stretched on very wide screens.
    */
   fluid?: boolean;
+  /**
+   * When `true`, applies vertical padding to the main content area.
+   * This is enabled by default and can be disabled when the consumer wants to handle vertical spacing themselves
+   */
+  paddingTop?: boolean;
+  /**
+   * When `true`, applies bottom padding to the main content area.
+   * This is enabled by default, and can be disabled when the consumer wants to handle vertical spacing themselves
+   */
+  paddingBottom?: boolean;
   as?: React.ElementType;
 }
 interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme>, React.HTMLAttributes<HTMLElement> {

package/dist/components/Layout/types.d.ts

@@ -12,6 +12,16 @@ interface MainProps extends DefaultPropsWithChildren<MainTheme>, React.HTMLAttri
    * This can be used to prevent the layout from becoming too stretched on very wide screens.
    */
   fluid?: boolean;
+  /**
+   * When `true`, applies vertical padding to the main content area.
+   * This is enabled by default and can be disabled when the consumer wants to handle vertical spacing themselves
+   */
+  paddingTop?: boolean;
+  /**
+   * When `true`, applies bottom padding to the main content area.
+   * This is enabled by default, and can be disabled when the consumer wants to handle vertical spacing themselves
+   */
+  paddingBottom?: boolean;
   as?: React.ElementType;
 }
 interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme>, React.HTMLAttributes<HTMLElement> {

package/dist/index.cjs

@@ -34,6 +34,8 @@ const require_grid$1 = require("./styleD/build/typescript/semantic/grid.cjs");
 const require_typography$2 = require("./styleD/build/typescript/semantic/typography.cjs");
 const require_sizing$1 = require("./styleD/build/typescript/semantic/sizing.cjs");
 const require_shadow = require("./styleD/build/typescript/semantic/shadow.cjs");
+const require_radius$1 = require("./styleD/build/typescript/semantic/radius.cjs");
+const require_spacing$1 = require("./styleD/build/typescript/semantic/spacing.cjs");
 exports.baseColors = require_colors.baseColors;
 exports.baseRadius = require_radius.baseRadius;
 exports.baseSizing = require_sizing.baseSizing;
@@ -66,6 +68,8 @@ exports.componentUserMenu = require_userMenu.componentUserMenu;
 exports.semanticBreakpoints = require_breakpoints.semanticBreakpoints;
 exports.semanticColors = require_colors$1.semanticColors;
 exports.semanticGrid = require_grid$1.semanticGrid;
+exports.semanticRadius = require_radius$1.semanticRadius;
 exports.semanticShadow = require_shadow.semanticShadow;
 exports.semanticSizing = require_sizing$1.semanticSizing;
+exports.semanticSpacing = require_spacing$1.semanticSpacing;
 exports.semanticTypography = require_typography$2.semanticTypography;

package/dist/index.d.cts

@@ -33,4 +33,6 @@ import { SemanticColors, semanticColors } from "./styleD/build/typescript/semant
 import { SemanticGrid, semanticGrid } from "./styleD/build/typescript/semantic/grid.cjs";
 import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semantic/sizing.cjs";
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticShadow, type SemanticSizing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticShadow, semanticSizing, semanticTypography };
+import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
+import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -33,4 +33,6 @@ import { SemanticColors, semanticColors } from "./styleD/build/typescript/semant
 import { SemanticGrid, semanticGrid } from "./styleD/build/typescript/semantic/grid.js";
 import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticShadow, type SemanticSizing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticShadow, semanticSizing, semanticTypography };
+import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
+import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -33,4 +33,6 @@ import { semanticGrid } from "./styleD/build/typescript/semantic/grid.js";
 import { semanticTypography } from "./styleD/build/typescript/semantic/typography.js";
 import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
-export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticShadow, semanticSizing, semanticTypography };
+import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
+import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

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

@@ -51,9 +51,9 @@
 	--base-typography-letter-spacing-densest-px: -1px;
 	--base-typography-letter-spacing-denser-px: -0.5px;
 	--base-typography-letter-spacing-dense-px: -0.2px;
-	--base-typography-letter-spacing-default-px: 0;
+	--base-typography-letter-spacing-default-px: 0px;
 	--base-typography-letter-spacing-densest-rem: -0.0625rem;
 	--base-typography-letter-spacing-denser-rem: -0.03125rem;
 	--base-typography-letter-spacing-dense-rem: -0.0125rem;
-	--base-typography-letter-spacing-default-rem: 0;
+	--base-typography-letter-spacing-default-rem: 0rem;
 }

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

@@ -21,7 +21,7 @@
 	--component-alert-banner-shared-content-color: #000000;
 	--component-alert-banner-shared-content-typography-font: normal 460
 		0.875rem/1.3 'Open Sans';
-	--component-alert-banner-shared-content-typography-letter-spacing: 0;
+	--component-alert-banner-shared-content-typography-letter-spacing: 0rem;
 	--component-alert-banner-shared-content-typography-font-width: 95;
 	--component-alert-banner-shared-content-icon-color: #545454;
 	--component-alert-banner-information-background-color: #e8f0fb;

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

@@ -14,7 +14,7 @@
 	--component-autocomplete-listbox-border-style: solid;
 	--component-autocomplete-listbox-border-color: #8d8d8d;
 	--component-autocomplete-listbox-padding-y: 8px;
-	--component-autocomplete-listbox-padding-x: 0;
+	--component-autocomplete-listbox-padding-x: 0px;
 	--component-autocomplete-listbox-background-color: #ffffff;
 	--component-autocomplete-listbox-item-padding-y: 8px;
 	--component-autocomplete-listbox-item-padding-x: 12px;

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

@@ -76,7 +76,7 @@
 	--component-avatar-shared-button-disabled-cursor: not-allowed;
 	--component-avatar-sm-size: 2rem;
 	--component-avatar-sm-typography-font: normal 700 0.75rem/1 'Open Sans';
-	--component-avatar-sm-typography-letter-spacing: 0;
+	--component-avatar-sm-typography-letter-spacing: 0rem;
 	--component-avatar-sm-typography-font-width: 95;
 	--component-avatar-md-size: 2.5rem;
 	--component-avatar-md-typography-font: normal 700 0.875rem/1 'Open Sans';

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

@@ -33,7 +33,7 @@
 	--component-button-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-primary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
-	--component-button-primary-xs-typography-letter-spacing: 0;
+	--component-button-primary-xs-typography-letter-spacing: 0rem;
 	--component-button-primary-xs-typography-font-width: 95;
 	--component-button-primary-xs-icon-size: 1.125rem;
 	--component-button-primary-xs-icon-gap: 0.25rem;
@@ -95,7 +95,7 @@
 	--component-button-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-secondary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
-	--component-button-secondary-xs-typography-letter-spacing: 0;
+	--component-button-secondary-xs-typography-letter-spacing: 0rem;
 	--component-button-secondary-xs-typography-font-width: 95;
 	--component-button-secondary-xs-icon-size: 1.125rem;
 	--component-button-secondary-xs-icon-gap: 0.25rem;
@@ -157,7 +157,7 @@
 	--component-button-tertiary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-tertiary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
-	--component-button-tertiary-xs-typography-letter-spacing: 0;
+	--component-button-tertiary-xs-typography-letter-spacing: 0rem;
 	--component-button-tertiary-xs-typography-font-width: 95;
 	--component-button-tertiary-xs-icon-size: 1.125rem;
 	--component-button-tertiary-xs-icon-gap: 0.25rem;

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

@@ -39,11 +39,11 @@
 	--component-checkbox-input-shared-disabled-indicator-selected-background-color: #dcdcdc;
 	--component-checkbox-input-sm-typography-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--component-checkbox-input-sm-typography-letter-spacing: 0;
+	--component-checkbox-input-sm-typography-letter-spacing: 0rem;
 	--component-checkbox-input-sm-typography-font-width: 95;
 	--component-checkbox-input-sm-indicator-size: 1.25rem;
 	--component-checkbox-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
-	--component-checkbox-input-md-typography-letter-spacing: 0;
+	--component-checkbox-input-md-typography-letter-spacing: 0rem;
 	--component-checkbox-input-md-typography-font-width: 95;
 	--component-checkbox-input-md-indicator-size: 1.5rem;
 	--component-checkbox-group-shared-display: flex;

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

@@ -96,7 +96,7 @@
 	--component-date-picker-calendar-header-shared-button-disabled-color: #999999;
 	--component-date-picker-calendar-grid-shared-typography-font: normal 460
 		0.875rem/1.3 'Open Sans';
-	--component-date-picker-calendar-grid-shared-typography-letter-spacing: 0;
+	--component-date-picker-calendar-grid-shared-typography-letter-spacing: 0rem;
 	--component-date-picker-calendar-grid-shared-typography-font-width: 95;
 	--component-date-picker-calendar-grid-shared-border-collapse: collapse;
 	--component-date-picker-calendar-grid-shared-border-spacing: 0;

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

@@ -12,6 +12,6 @@
 	--component-favicon-user-select: none;
 	--component-favicon-typography-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--component-favicon-typography-letter-spacing: 0;
+	--component-favicon-typography-letter-spacing: 0rem;
 	--component-favicon-typography-font-width: 100;
 }

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

@@ -12,7 +12,7 @@
 	--component-form-input-shared-description-color: #545454;
 	--component-form-input-shared-description-typography-font: normal 460
 		0.875rem/1.3 'Open Sans';
-	--component-form-input-shared-description-typography-letter-spacing: 0;
+	--component-form-input-shared-description-typography-letter-spacing: 0rem;
 	--component-form-input-shared-description-typography-font-width: 95;
 	--component-form-input-shared-description-disabled-color: #999999;
 	--component-form-input-sm-label-typography-font: normal 700 0.875rem/1.15

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

@@ -10,7 +10,7 @@
 	--component-inline-message-shared-icon-align-self: flex-start;
 	--component-inline-message-shared-typography-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--component-inline-message-shared-typography-letter-spacing: 0;
+	--component-inline-message-shared-typography-letter-spacing: 0rem;
 	--component-inline-message-shared-typography-font-width: 95;
 	--component-inline-message-error-color: #8c2113;
 	--component-inline-message-success-color: #326528;

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

@@ -27,4 +27,10 @@
 	--component-layout-main-max-width: 1584px;
 	--component-layout-main-margin-left: auto;
 	--component-layout-main-margin-right: auto;
+	--component-layout-main-sm-padding-top: 24px;
+	--component-layout-main-sm-padding-bottom: 64px;
+	--component-layout-main-md-padding-top: 28px;
+	--component-layout-main-md-padding-bottom: 64px;
+	--component-layout-main-lg-padding-top: 48px;
+	--component-layout-main-lg-padding-bottom: 64px;
 }

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

@@ -45,13 +45,13 @@
 	--component-menu-menu-item-shared-label-color: #000000;
 	--component-menu-menu-item-shared-label-typography-font: normal 460 1rem/1.3
 		'Open Sans';
-	--component-menu-menu-item-shared-label-typography-letter-spacing: 0;
+	--component-menu-menu-item-shared-label-typography-letter-spacing: 0rem;
 	--component-menu-menu-item-shared-label-typography-font-width: 95;
 	--component-menu-menu-item-shared-description-grid-area: description;
 	--component-menu-menu-item-shared-description-color: #545454;
 	--component-menu-menu-item-shared-description-typography-font: normal 460
 		0.875rem/1.3 'Open Sans';
-	--component-menu-menu-item-shared-description-typography-letter-spacing: 0;
+	--component-menu-menu-item-shared-description-typography-letter-spacing: 0rem;
 	--component-menu-menu-item-shared-description-typography-font-width: 95;
 	--component-menu-menu-item-shared-aside-grid-area: aside;
 	--component-menu-menu-item-shared-aside-justify-self: end;
@@ -59,7 +59,7 @@
 	--component-menu-menu-item-shared-aside-color: #000000;
 	--component-menu-menu-item-shared-aside-typography-font: normal 460 1rem/1.3
 		'Open Sans';
-	--component-menu-menu-item-shared-aside-typography-letter-spacing: 0;
+	--component-menu-menu-item-shared-aside-typography-letter-spacing: 0rem;
 	--component-menu-menu-item-shared-aside-typography-font-width: 95;
 	--component-menu-menu-item-shared-last-child-border-bottom: none;
 	--component-menu-menu-item-shared-hover-background-color: #f6f6f6;

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;
+}