@guardian/stand 0.0.16 → 0.0.18

package/dist/components/topbar/TopBar.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import React from 'react';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Avatar } from '../avatar/Avatar.js';
+import { topBarContainerLeftStyles, topBarContainerRightStyles, topBarStyles, defaultTopBarTheme } from './styles.js';
+import { TopBarItem } from './topBarItem/TopBarItem.js';
+import { TopBarNavigation } from './topBarNavigation/TopBarNavigation.js';
+import { TopBarToolName } from './topBarToolName/TopBarToolName.js';
+
+function TopBarSide({ children, alignment }) {
+  const items = [];
+  React.Children.forEach(children, (child, i) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === TopBarItem) {
+      items.push(React.cloneElement(child, {
+        key: `${child.key}-${i}`,
+        alignment
+      }));
+    }
+    if (child.type === TopBarNavigation) {
+      items.push(React.cloneElement(child, {
+        key: `${child.key}-${i}`,
+        alignment
+      }));
+    }
+  });
+  return jsx(Fragment, { children: items });
+}
+function TopBarContainerRight({ children }) {
+  return jsx(TopBarSide, { alignment: "right", children });
+}
+function TopBarContainerLeft({ children }) {
+  return jsx(TopBarSide, { alignment: "left", children });
+}
+function TopBar({ children, theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultTopBarTheme, theme);
+  let leftSide = null;
+  let rightSide = null;
+  let toolName = null;
+  let avatar = null;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === TopBarToolName) {
+      toolName ?? (toolName = child);
+    }
+    if (child.type === Avatar) {
+      avatar ?? (avatar = jsx(TopBarItem, { alignment: "right", children: child }));
+    }
+    if (child.type === TopBarContainerLeft) {
+      leftSide ?? (leftSide = child);
+    }
+    if (child.type === TopBarContainerRight) {
+      rightSide ?? (rightSide = child);
+    }
+  });
+  return jsxs("div", { css: [topBarStyles(mergedTheme), cssOverrides], className, ...props, children: [jsxs("div", { css: topBarContainerLeftStyles(mergedTheme), children: [toolName, leftSide] }), jsxs("div", { css: topBarContainerRightStyles(mergedTheme), children: [rightSide, avatar] })] });
+}
+
+export { TopBar, TopBarContainerLeft, TopBarContainerRight };

package/dist/components/topbar/styles.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var react = require('@emotion/react');
+var TopBar = require('../../styleD/build/typescript/component/TopBar.cjs');
+
+const defaultTopBarTheme = TopBar.componentTopBar;
+const topBarStyles = (theme) => {
+  return react.css`
+		background-color: ${theme["background-color"]};
+		height: ${theme.height};
+		border: ${theme.border};
+		display: ${theme.display};
+		justify-content: ${theme["justify-content"]};
+	`;
+};
+const topBarContainerLeftStyles = (theme) => {
+  return react.css`
+		display: ${theme.display};
+	`;
+};
+const topBarContainerRightStyles = (theme) => {
+  return react.css`
+		display: ${theme.display};
+	`;
+};
+
+exports.defaultTopBarTheme = defaultTopBarTheme;
+exports.topBarContainerLeftStyles = topBarContainerLeftStyles;
+exports.topBarContainerRightStyles = topBarContainerRightStyles;
+exports.topBarStyles = topBarStyles;

package/dist/components/topbar/styles.js

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+import { componentTopBar } from '../../styleD/build/typescript/component/TopBar.js';
+
+const defaultTopBarTheme = componentTopBar;
+const topBarStyles = (theme) => {
+  return css`
+		background-color: ${theme["background-color"]};
+		height: ${theme.height};
+		border: ${theme.border};
+		display: ${theme.display};
+		justify-content: ${theme["justify-content"]};
+	`;
+};
+const topBarContainerLeftStyles = (theme) => {
+  return css`
+		display: ${theme.display};
+	`;
+};
+const topBarContainerRightStyles = (theme) => {
+  return css`
+		display: ${theme.display};
+	`;
+};
+
+export { defaultTopBarTheme, topBarContainerLeftStyles, topBarContainerRightStyles, topBarStyles };

package/dist/components/topbar/topBarItem/TopBarItem.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var mergeDeep = require('../../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+
+function TopBarItem({
+  children,
+  alignment = "left",
+  theme = {},
+  cssOverrides,
+  className,
+  size = "md",
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTopBarItemTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      css: [styles.topBarItemStyles(mergedTheme, alignment, { size }), cssOverrides],
+      className,
+      ...props,
+      children
+    }
+  );
+}
+
+exports.TopBarItem = TopBarItem;

package/dist/components/topbar/topBarItem/TopBarItem.js

@@ -0,0 +1,10 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../../util/mergeDeep.js';
+import { topBarItemStyles, defaultTopBarItemTheme } from './styles.js';
+
+function TopBarItem({ children, alignment = "left", theme = {}, cssOverrides, className, size = "md", ...props }) {
+  const mergedTheme = mergeDeep(defaultTopBarItemTheme, theme);
+  return jsx("div", { css: [topBarItemStyles(mergedTheme, alignment, { size }), cssOverrides], className, ...props, children });
+}
+
+export { TopBarItem };

package/dist/components/topbar/topBarItem/styles.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var react = require('@emotion/react');
+var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
+
+const defaultTopBarItemTheme = TopBar.componentTopBar.Item;
+const topBarItemStyles = (theme, alignment, { size }) => {
+  return react.css`
+		display: ${theme.display};
+		align-items: ${theme["align-items"]};
+		height: ${theme.height};
+		padding: ${theme[size].padding.top} ${theme[size].padding.right}
+			${theme[size].padding.bottom} ${theme[size].padding.left};
+		${alignment === "left" ? "border-right" : "border-left"}: ${theme.border};
+		${alignment === "right" && "margin-left: auto"};
+	`;
+};
+
+exports.defaultTopBarItemTheme = defaultTopBarItemTheme;
+exports.topBarItemStyles = topBarItemStyles;

package/dist/components/topbar/topBarItem/styles.js

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
+
+const defaultTopBarItemTheme = componentTopBar.Item;
+const topBarItemStyles = (theme, alignment, { size }) => {
+  return css`
+		display: ${theme.display};
+		align-items: ${theme["align-items"]};
+		height: ${theme.height};
+		padding: ${theme[size].padding.top} ${theme[size].padding.right}
+			${theme[size].padding.bottom} ${theme[size].padding.left};
+		${alignment === "left" ? "border-right" : "border-left"}: ${theme.border};
+		${alignment === "right" && "margin-left: auto"};
+	`;
+};
+
+export { defaultTopBarItemTheme, topBarItemStyles };

package/dist/components/topbar/topBarNavigation/TopBarNavigation.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../../util/mergeDeep.cjs');
+var Icon = require('../../icon/Icon.cjs');
+var Menu = require('../../menu/Menu.cjs');
+var styles = require('./styles.cjs');
+
+const menuIndicator = "keyboard_arrow_down";
+function TopBarNavigation({
+  text,
+  size = "md",
+  isSelected = false,
+  icon,
+  menuChildren,
+  href,
+  onPress,
+  isDisabled,
+  alignment = "left",
+  theme = {},
+  cssOverrides,
+  className,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTopBarNavigationTheme, theme);
+  const iconSize = size === "md" ? "lg" : "sm";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.topBarNavigationDividerStyles(mergedTheme, { alignment }), children: menuChildren ? /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.MenuToggle, { children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Pressable, { isDisabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        role: "button",
+        "data-disabled": isDisabled ? true : void 0,
+        css: [
+          styles.topBarNavigationStyles(mergedTheme, isSelected),
+          styles.topBarNavigationTypographyStyles(mergedTheme, size),
+          cssOverrides
+        ],
+        className,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.topBarNavigationTextStyles(mergedTheme), children: text }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.topBarMenuIndicatorStyles(mergedTheme), children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: menuIndicator }) })
+        ]
+      }
+    ) }) }),
+    menuChildren
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.Link,
+    {
+      css: [
+        styles.topBarNavigationStyles(mergedTheme, isSelected),
+        styles.topBarNavigationTypographyStyles(mergedTheme, size),
+        cssOverrides
+      ],
+      href,
+      onPress,
+      className,
+      isDisabled,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.topBarNavigationTextStyles(mergedTheme), children: text })
+      ]
+    }
+  ) });
+}
+
+exports.TopBarNavigation = TopBarNavigation;

package/dist/components/topbar/topBarNavigation/TopBarNavigation.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { Pressable, Link } from 'react-aria-components';
+import { mergeDeep } from '../../../util/mergeDeep.js';
+import { Icon } from '../../icon/Icon.js';
+import { Menu, MenuToggle } from '../../menu/Menu.js';
+import { topBarNavigationTextStyles, topBarMenuIndicatorStyles, topBarNavigationStyles, topBarNavigationTypographyStyles, topBarNavigationDividerStyles, defaultTopBarNavigationTheme } from './styles.js';
+
+const menuIndicator = "keyboard_arrow_down";
+function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChildren, href, onPress, isDisabled, alignment = "left", theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultTopBarNavigationTheme, theme);
+  const iconSize = size === "md" ? "lg" : "sm";
+  return jsx("div", { css: topBarNavigationDividerStyles(mergedTheme, { alignment }), children: menuChildren ? jsxs(Menu, { children: [jsx(MenuToggle, { children: jsx(Pressable, { isDisabled, children: jsxs("span", { role: "button", "data-disabled": isDisabled ? true : void 0, css: [
+    topBarNavigationStyles(mergedTheme, isSelected),
+    topBarNavigationTypographyStyles(mergedTheme, size),
+    cssOverrides
+  ], className, ...props, children: [jsx(Icon, { size: iconSize, children: icon }), jsx("span", { css: topBarNavigationTextStyles(mergedTheme), children: text }), jsx("div", { css: topBarMenuIndicatorStyles(mergedTheme), children: jsx(Icon, { size: iconSize, children: menuIndicator }) })] }) }) }), menuChildren] }) : jsxs(Link, { css: [
+    topBarNavigationStyles(mergedTheme, isSelected),
+    topBarNavigationTypographyStyles(mergedTheme, size),
+    cssOverrides
+  ], href, onPress, className, isDisabled, ...props, children: [jsx(Icon, { size: iconSize, children: icon }), jsx("span", { css: topBarNavigationTextStyles(mergedTheme), children: text })] }) });
+}
+
+export { TopBarNavigation };

package/dist/components/topbar/topBarNavigation/styles.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+var react = require('@emotion/react');
+var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
+var typography = require('../../../styleD/utils/semantic/typography.cjs');
+
+const defaultTopBarNavigationTheme = TopBar.componentTopBar.Navigation;
+const topBarNavigationStyles = (theme, selected) => {
+  return react.css`
+		display: ${theme.shared.display};
+		position: ${theme.shared.position};
+		align-items: ${theme.shared["align-items"]};
+		height: ${theme.shared.height};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+		color: ${selected ? `${theme.selected.color}` : `${theme.unselected.color}`};
+		border-top: ${theme.shared["border-top"]};
+		border-bottom: ${theme.unselected["border-bottom"]};
+
+		&[data-hovered],
+		&:hover {
+			border-bottom: ${theme.selected["border-bottom"]};
+			cursor: ${theme.shared.cursor};
+		}
+
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared[":focus-visible"].outline};
+			border-bottom: ${theme.selected["border-bottom"]};
+			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.shared[":disabled"].cursor};
+			color: ${theme.shared[":disabled"].color};
+		}
+
+		${selected && `border-bottom: ${theme.selected["border-bottom"]};`}
+
+		text-decoration: ${theme.shared["text-decoration"]};
+	`;
+};
+const topBarNavigationDividerStyles = (theme, { alignment }) => react.css`
+	${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
+`;
+const topBarNavigationTextStyles = (theme) => react.css`
+	margin-left: ${theme.text.margin.left};
+`;
+const topBarNavigationTypographyStyles = (theme, size) => {
+  return size == "md" ? react.css`
+				${typography.convertTypographyToEmotionStringStyle(theme.md.typography)}
+			` : react.css`
+				${typography.convertTypographyToEmotionStringStyle(theme.sm.typography)}
+			`;
+};
+const topBarMenuIndicatorStyles = (theme) => {
+  return react.css`
+		margin-top: ${theme.menuIndicator.margin.top};
+		margin-left: ${theme.menuIndicator.margin.left};
+	`;
+};
+
+exports.defaultTopBarNavigationTheme = defaultTopBarNavigationTheme;
+exports.topBarMenuIndicatorStyles = topBarMenuIndicatorStyles;
+exports.topBarNavigationDividerStyles = topBarNavigationDividerStyles;
+exports.topBarNavigationStyles = topBarNavigationStyles;
+exports.topBarNavigationTextStyles = topBarNavigationTextStyles;
+exports.topBarNavigationTypographyStyles = topBarNavigationTypographyStyles;

package/dist/components/topbar/topBarNavigation/styles.js

@@ -0,0 +1,61 @@
+import { css } from '@emotion/react';
+import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
+import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
+
+const defaultTopBarNavigationTheme = componentTopBar.Navigation;
+const topBarNavigationStyles = (theme, selected) => {
+  return css`
+		display: ${theme.shared.display};
+		position: ${theme.shared.position};
+		align-items: ${theme.shared["align-items"]};
+		height: ${theme.shared.height};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+		color: ${selected ? `${theme.selected.color}` : `${theme.unselected.color}`};
+		border-top: ${theme.shared["border-top"]};
+		border-bottom: ${theme.unselected["border-bottom"]};
+
+		&[data-hovered],
+		&:hover {
+			border-bottom: ${theme.selected["border-bottom"]};
+			cursor: ${theme.shared.cursor};
+		}
+
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared[":focus-visible"].outline};
+			border-bottom: ${theme.selected["border-bottom"]};
+			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.shared[":disabled"].cursor};
+			color: ${theme.shared[":disabled"].color};
+		}
+
+		${selected && `border-bottom: ${theme.selected["border-bottom"]};`}
+
+		text-decoration: ${theme.shared["text-decoration"]};
+	`;
+};
+const topBarNavigationDividerStyles = (theme, { alignment }) => css`
+	${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
+`;
+const topBarNavigationTextStyles = (theme) => css`
+	margin-left: ${theme.text.margin.left};
+`;
+const topBarNavigationTypographyStyles = (theme, size) => {
+  return size == "md" ? css`
+				${convertTypographyToEmotionStringStyle(theme.md.typography)}
+			` : css`
+				${convertTypographyToEmotionStringStyle(theme.sm.typography)}
+			`;
+};
+const topBarMenuIndicatorStyles = (theme) => {
+  return css`
+		margin-top: ${theme.menuIndicator.margin.top};
+		margin-left: ${theme.menuIndicator.margin.left};
+	`;
+};
+
+export { defaultTopBarNavigationTheme, topBarMenuIndicatorStyles, topBarNavigationDividerStyles, topBarNavigationStyles, topBarNavigationTextStyles, topBarNavigationTypographyStyles };

package/dist/components/topbar/{toolName → topBarToolName}/TopBarToolName.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var mergeDeep = require('../../../util/mergeDeep.cjs');
 var Favicon = require('../../favicon/Favicon.cjs');
 var Icon = require('../../icon/Icon.cjs');
+var TopBarItem = require('../topBarItem/TopBarItem.cjs');
 var styles = require('./styles.cjs');
 
 const TopBarToolName = ({
@@ -15,7 +16,7 @@ const TopBarToolName = ({
   cssOverrides
 }) => {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "left", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
     /* @__PURE__ */ jsxRuntime.jsx(Favicon.Favicon, { ...favicon }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameTypography(mergedTheme)], children: name }),
     subsection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -25,7 +26,7 @@ const TopBarToolName = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.subsectionTypography(mergedTheme), children: subsection })
       ] })
     ] })
-  ] });
+  ] }) });
 };
 
 exports.TopBarToolName = TopBarToolName;

package/dist/components/topbar/topBarToolName/TopBarToolName.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../../util/mergeDeep.js';
+import { Favicon } from '../../favicon/Favicon.js';
+import { Icon } from '../../icon/Icon.js';
+import { TopBarItem } from '../topBarItem/TopBarItem.js';
+import { toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles, defaultToolNameTheme } from './styles.js';
+
+const TopBarToolName = ({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) => {
+  const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
+  return jsx(TopBarItem, { alignment: "left", size: "sm", children: jsxs("div", { css: [toolNameStyles(mergedTheme), cssOverrides], children: [jsx(Favicon, { ...favicon }), jsx("div", { css: [toolNameTypography(mergedTheme)], children: name }), subsection && jsxs(Fragment, { children: [jsx("div", { css: dividerStyles(mergedTheme), children: "\xA0" }), jsxs("div", { css: subsectionStyles(mergedTheme), children: [subsectionIcon && jsx(Icon, { size: "sm", children: subsectionIcon }), jsx("div", { css: subsectionTypography(mergedTheme), children: subsection })] })] })] }) });
+};
+
+export { TopBarToolName };

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/base/typography.css

@@ -29,9 +29,9 @@
 	--base-typography-size-36-rem: 2.25rem;
 	--base-typography-size-42-rem: 2.625rem;
 	--base-typography-size-48-rem: 3rem;
-	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-guardian-text-egyptian-normal: 400;
 	--base-typography-weight-guardian-text-egyptian-bold: 700;
+	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-open-sans-light: 340;
 	--base-typography-weight-open-sans-normal: 460;
 	--base-typography-weight-open-sans-semi-bold: 600;
@@ -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: 0px;
+	--base-typography-letter-spacing-default-px: 0;
 	--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: 0rem;
+	--base-typography-letter-spacing-default-rem: 0;
 }

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

@@ -3,12 +3,66 @@
  */
 
 :root {
+	--component-top-bar-background-color: #f6f6f6;
+	--component-top-bar-display: flex;
+	--component-top-bar-height: 4rem;
+	--component-top-bar-justify-content: space-between;
+	--component-top-bar-border: 0.0625rem solid #cccccc;
+	--component-top-bar-item-display: flex;
+	--component-top-bar-item-align-items: center;
+	--component-top-bar-item-height: 100%;
+	--component-top-bar-item-sm-padding-top: 0;
+	--component-top-bar-item-sm-padding-right: 0.75rem;
+	--component-top-bar-item-sm-padding-bottom: 0;
+	--component-top-bar-item-sm-padding-left: 0.75rem;
+	--component-top-bar-item-md-padding-top: 0;
+	--component-top-bar-item-md-padding-right: 1rem;
+	--component-top-bar-item-md-padding-bottom: 0;
+	--component-top-bar-item-md-padding-left: 1rem;
+	--component-top-bar-item-lg-padding-top: 0;
+	--component-top-bar-item-lg-padding-right: 1.5rem;
+	--component-top-bar-item-lg-padding-bottom: 0;
+	--component-top-bar-item-lg-padding-left: 1.5rem;
+	--component-top-bar-item-border: 0.0625rem solid #cccccc;
+	--component-top-bar-navigation-shared-display: inline-flex;
+	--component-top-bar-navigation-shared-position: relative;
+	--component-top-bar-navigation-shared-align-items: center;
+	--component-top-bar-navigation-shared-cursor: pointer;
+	--component-top-bar-navigation-shared-text-decoration: none;
+	--component-top-bar-navigation-shared-height: 100%;
+	--component-top-bar-navigation-shared-disabled-cursor: not-allowed;
+	--component-top-bar-navigation-shared-disabled-color: #999999;
+	--component-top-bar-navigation-shared-padding-top: 0;
+	--component-top-bar-navigation-shared-padding-right: 1rem;
+	--component-top-bar-navigation-shared-padding-bottom: 0;
+	--component-top-bar-navigation-shared-padding-left: 1rem;
+	--component-top-bar-navigation-shared-focus-visible-outline: 0.125rem solid
+		#0072a9;
+	--component-top-bar-navigation-shared-focus-visible-outline-offset: -0.0625rem;
+	--component-top-bar-navigation-shared-border-top: 0.5rem solid transparent;
+	--component-top-bar-navigation-shared-divider: 0.0625rem solid #cccccc;
+	--component-top-bar-navigation-text-margin-left: 0.375rem;
+	--component-top-bar-navigation-menu-indicator-margin-top: 0.375rem;
+	--component-top-bar-navigation-menu-indicator-margin-left: 0.125rem;
+	--component-top-bar-navigation-selected-color: #000000;
+	--component-top-bar-navigation-selected-border-bottom: 0.5rem solid #0072a9;
+	--component-top-bar-navigation-unselected-color: #545454;
+	--component-top-bar-navigation-unselected-border-bottom: 0.5rem solid
+		transparent;
+	--component-top-bar-navigation-md-typography-font: normal 700 1rem/1.15
+		'Open Sans';
+	--component-top-bar-navigation-md-typography-letter-spacing: -0.03125rem;
+	--component-top-bar-navigation-md-typography-font-width: 95;
+	--component-top-bar-navigation-sm-typography-font: normal 700 0.875rem/1.15
+		'Open Sans';
+	--component-top-bar-navigation-sm-typography-letter-spacing: -0.0125rem;
+	--component-top-bar-navigation-sm-typography-font-width: 95;
 	--component-top-bar-tool-name-display: flex;
 	--component-top-bar-tool-name-align-items: center;
 	--component-top-bar-tool-name-gap: 8px;
 	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--component-top-bar-tool-name-typography-letter-spacing: 0rem;
+	--component-top-bar-tool-name-typography-letter-spacing: 0;
 	--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;