@guardian/stand 0.0.41 → 0.0.43

package/dist/components/IntendedAudienceSignifier/IntendedAudienceSignifier.cjs

@@ -4,66 +4,47 @@ const require_FlagIcons = require("./FlagIcons.cjs");
 const require_styles = require("./styles.cjs");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 //#region src/components/IntendedAudienceSignifier/IntendedAudienceSignifier.tsx
-const sourceIcons = {
+const icons = {
 	UK: require_FlagIcons.ukFlag,
 	US: require_FlagIcons.usFlag,
 	AUS: require_FlagIcons.auFlag,
-	Global: require_FlagIcons.globeIcon
+	global: require_FlagIcons.globeIcon
 };
-const getSourceIconElement = (source, audience) => {
-	if (audience === "Global") return require_FlagIcons.globeIcon;
-	return sourceIcons[source];
-};
-const getIntendedAudienceIconElement = (source, audience) => {
-	if (audience === "Domestic for Domestic") return getSourceIconElement(source, audience);
-	if (audience === "Global" || audience === "Domestic For Global") return require_FlagIcons.globeIcon;
-	return sourceIcons[audience];
-};
-const getSourceDescription = (source, audience) => {
-	switch (audience) {
-		case "Global": return "Global";
-		case "Domestic For Global":
-		case "Domestic for Domestic":
+const getSourceDescription = (source) => {
+	switch (source) {
+		case "global": return "Global";
 		case "UK":
 		case "US":
 		case "AUS": return source;
 	}
 };
-const getAudienceDescription = (source, audience) => {
-	switch (audience) {
-		case "Global":
-		case "Domestic For Global": return "Global";
-		case "Domestic for Domestic": return "Domestic";
+const getTargetDescription = (source, target) => {
+	switch (target) {
+		case "global": return "Global";
 		case "UK":
 		case "US":
-		case "AUS": return audience === source ? "Domestic" : audience;
+		case "AUS": return target === source ? "Domestic" : target;
 	}
 };
-const getSignifierDescription = (source, audience) => {
-	return `${getSourceDescription(source, audience)} article for ${getAudienceDescription(source, audience)} audience`;
-};
 const AUDIENCE_NOT_KNOWN_DESCRIPTION = "Intended audience unknown";
-function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOverrides, className, ...props }) {
+const getSignifierDescription = (source, target) => {
+	if (!source || !target) return AUDIENCE_NOT_KNOWN_DESCRIPTION;
+	return `${getSourceDescription(source)} article for ${getTargetDescription(source, target)} audience`;
+};
+function IntendedAudienceSignifier({ source, target, theme = {}, cssOverrides, className, ...props }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultIntendedAudienceSignifierTheme, theme);
-	if (intendedAudience === "Don't know") return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-		...props,
-		className,
-		css: [require_styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
-		"aria-label": AUDIENCE_NOT_KNOWN_DESCRIPTION,
-		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: "Don‘t know" })
-	});
+	const description = getSignifierDescription(source, target);
 	const iconStyles = require_styles.intendedAudienceSignifierIconStyles(mergedTheme);
 	const chevronIconStyles = require_styles.intendedAudienceSignifierChevronIconStyles(mergedTheme);
-	const description = getSignifierDescription(source, intendedAudience);
-	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
 		...props,
 		className,
 		css: [require_styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
 		"aria-label": description,
-		children: [
+		children: target && source ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [
 			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
 				css: iconStyles,
-				children: getSourceIconElement(source, intendedAudience)
+				children: icons[source]
 			}),
 			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
 				css: chevronIconStyles,
@@ -71,9 +52,9 @@ function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOv
 			}),
 			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
 				css: iconStyles,
-				children: getIntendedAudienceIconElement(source, intendedAudience)
+				children: icons[target]
 			})
-		]
+		] }) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: "Don‘t know" })
 	});
 }
 //#endregion

package/dist/components/IntendedAudienceSignifier/IntendedAudienceSignifier.d.cts

@@ -3,7 +3,7 @@ import { IntendedAudienceSignifierProps } from "./types.cjs";
 //#region src/components/IntendedAudienceSignifier/IntendedAudienceSignifier.d.ts
 declare function IntendedAudienceSignifier({
   source,
-  intendedAudience,
+  target,
   theme,
   cssOverrides,
   className,

package/dist/components/IntendedAudienceSignifier/IntendedAudienceSignifier.d.ts

@@ -3,7 +3,7 @@ import { IntendedAudienceSignifierProps } from "./types.js";
 //#region src/components/IntendedAudienceSignifier/IntendedAudienceSignifier.d.ts
 declare function IntendedAudienceSignifier({
   source,
-  intendedAudience,
+  target,
   theme,
   cssOverrides,
   className,

package/dist/components/IntendedAudienceSignifier/IntendedAudienceSignifier.js

@@ -1,68 +1,49 @@
 import { mergeDeep } from "../../util/mergeDeep.js";
 import { DoubleChevronRightSvg, auFlag, globeIcon, ukFlag, usFlag } from "./FlagIcons.js";
 import { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierChevronIconStyles, intendedAudienceSignifierIconStyles, intendedAudienceSignifierStyles } from "./styles.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/IntendedAudienceSignifier/IntendedAudienceSignifier.tsx
-const sourceIcons = {
+const icons = {
 	UK: ukFlag,
 	US: usFlag,
 	AUS: auFlag,
-	Global: globeIcon
+	global: globeIcon
 };
-const getSourceIconElement = (source, audience) => {
-	if (audience === "Global") return globeIcon;
-	return sourceIcons[source];
-};
-const getIntendedAudienceIconElement = (source, audience) => {
-	if (audience === "Domestic for Domestic") return getSourceIconElement(source, audience);
-	if (audience === "Global" || audience === "Domestic For Global") return globeIcon;
-	return sourceIcons[audience];
-};
-const getSourceDescription = (source, audience) => {
-	switch (audience) {
-		case "Global": return "Global";
-		case "Domestic For Global":
-		case "Domestic for Domestic":
+const getSourceDescription = (source) => {
+	switch (source) {
+		case "global": return "Global";
 		case "UK":
 		case "US":
 		case "AUS": return source;
 	}
 };
-const getAudienceDescription = (source, audience) => {
-	switch (audience) {
-		case "Global":
-		case "Domestic For Global": return "Global";
-		case "Domestic for Domestic": return "Domestic";
+const getTargetDescription = (source, target) => {
+	switch (target) {
+		case "global": return "Global";
 		case "UK":
 		case "US":
-		case "AUS": return audience === source ? "Domestic" : audience;
+		case "AUS": return target === source ? "Domestic" : target;
 	}
 };
-const getSignifierDescription = (source, audience) => {
-	return `${getSourceDescription(source, audience)} article for ${getAudienceDescription(source, audience)} audience`;
-};
 const AUDIENCE_NOT_KNOWN_DESCRIPTION = "Intended audience unknown";
-function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOverrides, className, ...props }) {
+const getSignifierDescription = (source, target) => {
+	if (!source || !target) return AUDIENCE_NOT_KNOWN_DESCRIPTION;
+	return `${getSourceDescription(source)} article for ${getTargetDescription(source, target)} audience`;
+};
+function IntendedAudienceSignifier({ source, target, theme = {}, cssOverrides, className, ...props }) {
 	const mergedTheme = mergeDeep(defaultIntendedAudienceSignifierTheme, theme);
-	if (intendedAudience === "Don't know") return /* @__PURE__ */ jsx("div", {
-		...props,
-		className,
-		css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
-		"aria-label": AUDIENCE_NOT_KNOWN_DESCRIPTION,
-		children: /* @__PURE__ */ jsx("span", { children: "Don‘t know" })
-	});
+	const description = getSignifierDescription(source, target);
 	const iconStyles = intendedAudienceSignifierIconStyles(mergedTheme);
 	const chevronIconStyles = intendedAudienceSignifierChevronIconStyles(mergedTheme);
-	const description = getSignifierDescription(source, intendedAudience);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		...props,
 		className,
 		css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
 		"aria-label": description,
-		children: [
+		children: target && source ? /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("div", {
 				css: iconStyles,
-				children: getSourceIconElement(source, intendedAudience)
+				children: icons[source]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				css: chevronIconStyles,
@@ -70,9 +51,9 @@ function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOv
 			}),
 			/* @__PURE__ */ jsx("div", {
 				css: iconStyles,
-				children: getIntendedAudienceIconElement(source, intendedAudience)
+				children: icons[target]
 			})
-		]
+		] }) : /* @__PURE__ */ jsx("span", { children: "Don‘t know" })
 	});
 }
 //#endregion

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

@@ -2,11 +2,10 @@ import { DefaultProps } from "../../util/types.cjs";
 import { IntendedAudienceSignifierTheme } from "./styles.cjs";
 
 //#region src/components/IntendedAudienceSignifier/types.d.ts
-type Source = 'UK' | 'US' | 'AUS';
-type IntendedAudience = 'Global' | 'Domestic for Domestic' | 'Domestic For Global' | "Don't know" | 'UK' | 'US' | 'AUS';
+type SourceOrTarget = 'global' | 'UK' | 'US' | 'AUS';
 interface IntendedAudienceSignifierProps extends DefaultProps<IntendedAudienceSignifierTheme> {
-  source: Source;
-  intendedAudience: IntendedAudience;
+  source?: SourceOrTarget;
+  target?: SourceOrTarget;
 }
 //#endregion
 export { IntendedAudienceSignifierProps };

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

@@ -2,11 +2,10 @@ import { DefaultProps } from "../../util/types.js";
 import { IntendedAudienceSignifierTheme } from "./styles.js";
 
 //#region src/components/IntendedAudienceSignifier/types.d.ts
-type Source = 'UK' | 'US' | 'AUS';
-type IntendedAudience = 'Global' | 'Domestic for Domestic' | 'Domestic For Global' | "Don't know" | 'UK' | 'US' | 'AUS';
+type SourceOrTarget = 'global' | 'UK' | 'US' | 'AUS';
 interface IntendedAudienceSignifierProps extends DefaultProps<IntendedAudienceSignifierTheme> {
-  source: Source;
-  intendedAudience: IntendedAudience;
+  source?: SourceOrTarget;
+  target?: SourceOrTarget;
 }
 //#endregion
 export { IntendedAudienceSignifierProps };

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;