@guardian/stand 0.0.17 → 0.0.18

package/dist/avatarButton.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var AvatarButton = require('./components/avatar-button/AvatarButton.cjs');
+
+
+
+exports.AvatarButton = AvatarButton.AvatarButton;

package/dist/avatarButton.js

@@ -0,0 +1 @@
+export { AvatarButton } from './components/avatar-button/AvatarButton.js';

package/dist/avatarLink.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var AvatarLink = require('./components/avatar-link/AvatarLink.cjs');
+
+
+
+exports.AvatarLink = AvatarLink.AvatarLink;

package/dist/avatarLink.js

@@ -0,0 +1 @@
+export { AvatarLink } from './components/avatar-link/AvatarLink.js';

package/dist/components/avatar/styles.cjs

@@ -25,6 +25,30 @@ const avatarStyles = (theme, { size, color }) => {
 		user-select: ${theme.shared["user-select"]};
 		color: ${theme.shared.color[color].text};
 		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+
+		&[data-avatar-context='interactive']:hover {
+			background-color: ${theme.shared.color[color][":hover"].background};
+
+			:has(> img) {
+				background-color: black;
+			}
+
+			img {
+				mask-image: linear-gradient(rgb(0 0 0 / 70%), rgb(0 0 0 / 70%));
+			}
+		}
+
+		&[data-avatar-context='interactive']:active {
+			background-color: ${theme.shared.color[color][":active"].background};
+
+			:has(> img) {
+				background-color: black;
+			}
+
+			img {
+				mask-image: linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%));
+			}
+		}
 	`;
 };
 

package/dist/components/avatar/styles.js

@@ -23,6 +23,30 @@ const avatarStyles = (theme, { size, color }) => {
 		user-select: ${theme.shared["user-select"]};
 		color: ${theme.shared.color[color].text};
 		${convertTypographyToEmotionStringStyle(theme[size].typography)}
+
+		&[data-avatar-context='interactive']:hover {
+			background-color: ${theme.shared.color[color][":hover"].background};
+
+			:has(> img) {
+				background-color: black;
+			}
+
+			img {
+				mask-image: linear-gradient(rgb(0 0 0 / 70%), rgb(0 0 0 / 70%));
+			}
+		}
+
+		&[data-avatar-context='interactive']:active {
+			background-color: ${theme.shared.color[color][":active"].background};
+
+			:has(> img) {
+				background-color: black;
+			}
+
+			img {
+				mask-image: linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%));
+			}
+		}
 	`;
 };
 

package/dist/components/avatar-button/AvatarButton.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Avatar = require('../avatar/Avatar.cjs');
+var styles = require('./styles.cjs');
+
+function AvatarButton(props) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultAvatarButtonTheme, props.theme ?? {});
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { css: styles.avatarButtonStyles(mergedTheme), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { ...props, "data-avatar-context": "interactive" }) });
+}
+
+exports.AvatarButton = AvatarButton;

package/dist/components/avatar-button/AvatarButton.js

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Button } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Avatar } from '../avatar/Avatar.js';
+import { defaultAvatarButtonTheme, avatarButtonStyles } from './styles.js';
+
+function AvatarButton(props) {
+  const mergedTheme = mergeDeep(defaultAvatarButtonTheme, props.theme ?? {});
+  return jsx(Button, { css: avatarButtonStyles(mergedTheme), ...props, children: jsx(Avatar, { ...props, "data-avatar-context": "interactive" }) });
+}
+
+export { AvatarButton };

package/dist/components/avatar-button/styles.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var react = require('@emotion/react');
+var styles = require('../avatar/styles.cjs');
+
+const defaultAvatarButtonTheme = styles.defaultAvatarTheme;
+const avatarButtonStyles = (theme) => {
+  return react.css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.link.width};
+		background: ${theme.shared.button.background};
+		border: ${theme.shared.button.border};
+		padding: ${theme.shared.button.padding};
+		cursor: ${theme.shared.button.cursor};
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared.link[":focus-visible"].outline};
+			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
+			border-radius: ${theme.shared["border-radius"]};
+		}
+		&[data-disabled],
+		&:disabled {
+			cursor: ${theme.shared.button[":disabled"].cursor};
+		}
+	`;
+};
+
+exports.avatarButtonStyles = avatarButtonStyles;
+exports.defaultAvatarButtonTheme = defaultAvatarButtonTheme;

package/dist/components/avatar-button/styles.js

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+import { defaultAvatarTheme } from '../avatar/styles.js';
+
+const defaultAvatarButtonTheme = defaultAvatarTheme;
+const avatarButtonStyles = (theme) => {
+  return css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.link.width};
+		background: ${theme.shared.button.background};
+		border: ${theme.shared.button.border};
+		padding: ${theme.shared.button.padding};
+		cursor: ${theme.shared.button.cursor};
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared.link[":focus-visible"].outline};
+			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
+			border-radius: ${theme.shared["border-radius"]};
+		}
+		&[data-disabled],
+		&:disabled {
+			cursor: ${theme.shared.button[":disabled"].cursor};
+		}
+	`;
+};
+
+export { avatarButtonStyles, defaultAvatarButtonTheme };

package/dist/components/avatar-link/AvatarLink.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Avatar = require('../avatar/Avatar.cjs');
+var styles = require('./styles.cjs');
+
+function AvatarLink(props) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultAvatarLinkTheme, props.theme ?? {});
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Link, { css: styles.avatarLinkStyles(mergedTheme), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { ...props, "data-avatar-context": "interactive" }) });
+}
+
+exports.AvatarLink = AvatarLink;

package/dist/components/avatar-link/AvatarLink.js

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Link } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Avatar } from '../avatar/Avatar.js';
+import { defaultAvatarLinkTheme, avatarLinkStyles } from './styles.js';
+
+function AvatarLink(props) {
+  const mergedTheme = mergeDeep(defaultAvatarLinkTheme, props.theme ?? {});
+  return jsx(Link, { css: avatarLinkStyles(mergedTheme), ...props, children: jsx(Avatar, { ...props, "data-avatar-context": "interactive" }) });
+}
+
+export { AvatarLink };

package/dist/components/avatar-link/styles.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var react = require('@emotion/react');
+var styles = require('../avatar/styles.cjs');
+
+const defaultAvatarLinkTheme = styles.defaultAvatarTheme;
+const avatarLinkStyles = (theme) => {
+  return react.css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.link.width};
+
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared.link[":focus-visible"].outline};
+			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
+			border-radius: ${theme.shared["border-radius"]};
+		}
+
+		text-decoration: ${theme.shared.link["text-decoration"]};
+	`;
+};
+
+exports.avatarLinkStyles = avatarLinkStyles;
+exports.defaultAvatarLinkTheme = defaultAvatarLinkTheme;

package/dist/components/avatar-link/styles.js

@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+import { defaultAvatarTheme } from '../avatar/styles.js';
+
+const defaultAvatarLinkTheme = defaultAvatarTheme;
+const avatarLinkStyles = (theme) => {
+  return css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.link.width};
+
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared.link[":focus-visible"].outline};
+			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
+			border-radius: ${theme.shared["border-radius"]};
+		}
+
+		text-decoration: ${theme.shared.link["text-decoration"]};
+	`;
+};
+
+export { avatarLinkStyles, defaultAvatarLinkTheme };

package/dist/components/inline-message/InlineMessage.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
+var Typography = require('../typography/Typography.cjs');
+var styles = require('./styles.cjs');
+
+function InlineMessage({
+  children,
+  level,
+  hideIcon = false,
+  icon,
+  theme = {},
+  cssOverrides,
+  className,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultInlineMessageTheme, theme);
+  const determinedIcon = React.useMemo(() => {
+    if (icon) {
+      return icon;
+    }
+    switch (level) {
+      case "error":
+        return "warning";
+      case "success":
+        return "check_circle";
+      case "information":
+      default:
+        return "info";
+    }
+  }, [icon, level]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      css: [styles.inlineMessageStyles(mergedTheme, { level }), cssOverrides],
+      className,
+      ...props,
+      children: [
+        !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { fill: mergedTheme[level].color, size: "md", children: determinedIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.Typography,
+          {
+            variant: "help-text-form-md",
+            theme: { color: mergedTheme[level].color },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.InlineMessage = InlineMessage;

package/dist/components/inline-message/InlineMessage.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useMemo } from 'react';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
+import { Typography } from '../typography/Typography.js';
+import { inlineMessageStyles, defaultInlineMessageTheme } from './styles.js';
+
+function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultInlineMessageTheme, theme);
+  const determinedIcon = useMemo(() => {
+    if (icon) {
+      return icon;
+    }
+    switch (level) {
+      case "error":
+        return "warning";
+      case "success":
+        return "check_circle";
+      case "information":
+      default:
+        return "info";
+    }
+  }, [icon, level]);
+  return jsxs("div", { css: [inlineMessageStyles(mergedTheme, { level }), cssOverrides], className, ...props, children: [!hideIcon && jsx(Icon, { fill: mergedTheme[level].color, size: "md", children: determinedIcon }), jsx(Typography, { variant: "help-text-form-md", theme: { color: mergedTheme[level].color }, children })] });
+}
+
+export { InlineMessage };

package/dist/components/inline-message/styles.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var react = require('@emotion/react');
+var inlineMessage = require('../../styleD/build/typescript/component/inlineMessage.cjs');
+
+const defaultInlineMessageTheme = inlineMessage.componentInlineMessage;
+const inlineMessageStyles = (theme, { level }) => {
+  return react.css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared["align-items"]};
+		gap: ${theme.shared.gap};
+		color: ${theme[level].color};
+	`;
+};
+
+exports.defaultInlineMessageTheme = defaultInlineMessageTheme;
+exports.inlineMessageStyles = inlineMessageStyles;

package/dist/components/inline-message/styles.js

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+import { componentInlineMessage } from '../../styleD/build/typescript/component/inlineMessage.js';
+
+const defaultInlineMessageTheme = componentInlineMessage;
+const inlineMessageStyles = (theme, { level }) => {
+  return css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared["align-items"]};
+		gap: ${theme.shared.gap};
+		color: ${theme[level].color};
+	`;
+};
+
+export { defaultInlineMessageTheme, inlineMessageStyles };

package/dist/index.cjs

@@ -9,6 +9,7 @@ var button = require('./styleD/build/typescript/component/button.cjs');
 var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
+var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
 var menu = require('./styleD/build/typescript/component/menu.cjs');
 var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
 var colors = require('./styleD/build/typescript/base/colors.cjs');
@@ -32,6 +33,7 @@ exports.componentButton = button.componentButton;
 exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentMenu = menu.componentMenu;
 exports.componentTopBar = TopBar.componentTopBar;
 exports.baseColors = colors.baseColors;

package/dist/index.js

@@ -7,6 +7,7 @@ export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
+export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
 export { componentMenu } from './styleD/build/typescript/component/menu.js';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';

package/dist/inline-message.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var InlineMessage = require('./components/inline-message/InlineMessage.cjs');
+var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
+
+
+
+exports.InlineMessage = InlineMessage.InlineMessage;
+exports.componentInlineMessage = inlineMessage.componentInlineMessage;

package/dist/inline-message.js

@@ -0,0 +1,2 @@
+export { InlineMessage } from './components/inline-message/InlineMessage.js';
+export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';

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

@@ -6,36 +6,58 @@
 	--component-avatar-shared-color-green-text: #24491d;
 	--component-avatar-shared-color-green-background: #cde4c9;
 	--component-avatar-shared-color-green-border: unset;
+	--component-avatar-shared-color-green-hover-background: #aed2a6;
+	--component-avatar-shared-color-green-active-background: #8ec183;
 	--component-avatar-shared-color-blue-text: #092f62;
 	--component-avatar-shared-color-blue-background: #c5d9f4;
 	--component-avatar-shared-color-blue-border: unset;
+	--component-avatar-shared-color-blue-hover-background: #93b9ec;
+	--component-avatar-shared-color-blue-active-background: #699ee5;
 	--component-avatar-shared-color-red-text: #65170e;
 	--component-avatar-shared-color-red-background: #f5c6c0;
 	--component-avatar-shared-color-red-border: unset;
+	--component-avatar-shared-color-red-hover-background: #eea198;
+	--component-avatar-shared-color-red-active-background: #e87c6f;
 	--component-avatar-shared-color-cyan-text: #00344e;
 	--component-avatar-shared-color-cyan-background: #b8d8e7;
 	--component-avatar-shared-color-cyan-border: unset;
+	--component-avatar-shared-color-cyan-hover-background: #8abed7;
+	--component-avatar-shared-color-cyan-active-background: #5ca5c8;
 	--component-avatar-shared-color-teal-text: #0e2729;
 	--component-avatar-shared-color-teal-background: #c5dfe1;
 	--component-avatar-shared-color-teal-border: unset;
+	--component-avatar-shared-color-teal-hover-background: #a0cace;
+	--component-avatar-shared-color-teal-active-background: #7bb5bb;
 	--component-avatar-shared-color-cool-purple-text: #394069;
 	--component-avatar-shared-color-cool-purple-background: #dbdff7;
 	--component-avatar-shared-color-cool-purple-border: unset;
+	--component-avatar-shared-color-cool-purple-hover-background: #c3caf3;
+	--component-avatar-shared-color-cool-purple-active-background: #acb5ee;
 	--component-avatar-shared-color-warm-purple-text: #381350;
 	--component-avatar-shared-color-warm-purple-background: #dac3e8;
 	--component-avatar-shared-color-warm-purple-border: unset;
+	--component-avatar-shared-color-warm-purple-hover-background: #c29dd9;
+	--component-avatar-shared-color-warm-purple-active-background: #aa76cb;
 	--component-avatar-shared-color-magenta-text: #581734;
 	--component-avatar-shared-color-magenta-background: #edc6d7;
 	--component-avatar-shared-color-magenta-border: unset;
+	--component-avatar-shared-color-magenta-hover-background: #e2a1be;
+	--component-avatar-shared-color-magenta-active-background: #d67ca4;
 	--component-avatar-shared-color-orange-text: #693c16;
 	--component-avatar-shared-color-orange-background: #fcddc6;
 	--component-avatar-shared-color-orange-border: unset;
+	--component-avatar-shared-color-orange-hover-background: #fac7a1;
+	--component-avatar-shared-color-orange-active-background: #f9b27c;
 	--component-avatar-shared-color-yellow-text: #5b4a0b;
 	--component-avatar-shared-color-yellow-background: #fbeebf;
 	--component-avatar-shared-color-yellow-border: unset;
+	--component-avatar-shared-color-yellow-hover-background: #f9e396;
+	--component-avatar-shared-color-yellow-active-background: #f6d86d;
 	--component-avatar-shared-color-outlined-text: #000000;
 	--component-avatar-shared-color-outlined-background: none;
 	--component-avatar-shared-color-outlined-border: 0.0625rem solid #8d8d8d;
+	--component-avatar-shared-color-outlined-hover-background: #ededed;
+	--component-avatar-shared-color-outlined-active-background: #dcdcdc;
 	--component-avatar-shared-display: inline-flex;
 	--component-avatar-shared-align-items: center;
 	--component-avatar-shared-justify-content: center;
@@ -43,6 +65,15 @@
 	--component-avatar-shared-flex-shrink: 0;
 	--component-avatar-shared-border-radius: 50%;
 	--component-avatar-shared-user-select: none;
+	--component-avatar-shared-link-width: fit-content;
+	--component-avatar-shared-link-focus-visible-outline: 0.125rem solid #0072a9;
+	--component-avatar-shared-link-focus-visible-outline-offset: 0.125rem;
+	--component-avatar-shared-link-text-decoration: none;
+	--component-avatar-shared-button-background: none;
+	--component-avatar-shared-button-border: none;
+	--component-avatar-shared-button-padding: 0;
+	--component-avatar-shared-button-cursor: pointer;
+	--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;

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

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-inline-message-shared-display: inline-flex;
+	--component-inline-message-shared-gap: 0.25rem;
+	--component-inline-message-shared-align-items: center;
+	--component-inline-message-shared-icon-size: 1.25rem;
+	--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-font-width: 95;
+	--component-inline-message-error-color: #8c2113;
+	--component-inline-message-success-color: #326528;
+	--component-inline-message-information-color: #00344e;
+}

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

@@ -146,4 +146,42 @@
 	--semantic-typography-interactive-md-font: normal 700 1rem/1 'Open Sans';
 	--semantic-typography-interactive-md-letter-spacing: -0.0125rem;
 	--semantic-typography-interactive-md-font-width: 95;
+	--semantic-typography-label-form-sm-font: normal 700 0.875rem/1.15 'Open Sans';
+	--semantic-typography-label-form-sm-letter-spacing: -0.0125rem;
+	--semantic-typography-label-form-sm-font-width: 95;
+	--semantic-typography-label-form-md-font: normal 700 1rem/1.15 'Open Sans';
+	--semantic-typography-label-form-md-letter-spacing: -0.03125rem;
+	--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-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-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-font-width: 88;
+	--semantic-typography-label-form-compact-md-font: normal 700 1rem/1.15
+		'Open Sans';
+	--semantic-typography-label-form-compact-md-letter-spacing: -0.0125rem;
+	--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-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-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-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-font-width: 88;
 }