@guardian/stand 0.0.16 → 0.0.18

package/README.md

@@ -181,3 +181,4 @@ Matrix generation in CI uses the same JSON file in the workflow `../.github/work
 - [Style Dictionary](https://guardian.github.io/stand/?path=/docs/style-dictionary--docs)
 - [Architecture Decision Records](https://guardian.github.io/stand/?path=/docs/architecture-decision-records--docs)
 - [Changelog](https://guardian.github.io/stand/?path=/docs/changelog--docs)
+- [Vision](https://guardian.github.io/stand/?path=/docs/vision--docs)

package/dist/TopBar.cjs

@@ -1,9 +1,15 @@
 'use strict';
 
-var TopBarToolName = require('./components/topbar/toolName/TopBarToolName.cjs');
-var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
+var TopBar$1 = require('./styleD/build/typescript/component/TopBar.cjs');
+var TopBarToolName = require('./components/topbar/topBarToolName/TopBarToolName.cjs');
+var TopBarNavigation = require('./components/topbar/topBarNavigation/TopBarNavigation.cjs');
+var TopBarItem = require('./components/topbar/topBarItem/TopBarItem.cjs');
+var TopBar = require('./components/topbar/TopBar.cjs');
 
 
 
+exports.componentTopBar = TopBar$1.componentTopBar;
 exports.TopBarToolName = TopBarToolName.TopBarToolName;
-exports.componentTopBar = TopBar.componentTopBar;
+exports.TopBarNavigation = TopBarNavigation.TopBarNavigation;
+exports.TopBarItem = TopBarItem.TopBarItem;
+exports.TopBar = TopBar.TopBar;

package/dist/TopBar.js

@@ -1,2 +1,5 @@
-export { TopBarToolName } from './components/topbar/toolName/TopBarToolName.js';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
+export { TopBarToolName } from './components/topbar/topBarToolName/TopBarToolName.js';
+export { TopBarNavigation } from './components/topbar/topBarNavigation/TopBarNavigation.js';
+export { TopBarItem } from './components/topbar/topBarItem/TopBarItem.js';
+export { TopBar } from './components/topbar/TopBar.js';

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/button/Button.cjs

@@ -7,7 +7,7 @@ var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function Button({
-  variant = "emphasised-primary",
+  variant = "primary",
   size = "md",
   theme = {},
   cssOverrides,

package/dist/components/button/Button.js

@@ -4,7 +4,7 @@ import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { buttonStyles, defaultButtonTheme } from './styles.js';
 
-function Button({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
+function Button({ variant = "primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
   const mergedTheme = mergeDeep(defaultButtonTheme, theme);
   const iconSize = size === "xs" ? "sm" : size;
   return jsx(Button$1, { ...props, css: [buttonStyles(mergedTheme, { variant, size }, !!icon), cssOverrides], children: composeRenderProps(props.children, (children) => (

package/dist/components/icon-button/IconButton.cjs

@@ -8,7 +8,7 @@ var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function IconButton({
-  variant = "emphasised-primary",
+  variant = "primary",
   size = "md",
   symbol,
   ariaLabel,

package/dist/components/icon-button/IconButton.js

@@ -5,7 +5,7 @@ import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { iconButtonStyles, defaultIconButtonTheme } from './styles.js';
 
-function IconButton({ variant = "emphasised-primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
+function IconButton({ variant = "primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultIconButtonTheme, theme);
   const buttonRef = useRef(null);
   useEffect(() => {

package/dist/components/icon-link-button/IconLinkButton.cjs

@@ -8,7 +8,7 @@ var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function IconLinkButton({
-  variant = "emphasised-primary",
+  variant = "primary",
   size = "md",
   symbol,
   ariaLabel,

package/dist/components/icon-link-button/IconLinkButton.js

@@ -5,7 +5,7 @@ import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { iconLinkButtonStyles, defaultIconLinkButtonTheme } from './styles.js';
 
-function IconLinkButton({ variant = "emphasised-primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
+function IconLinkButton({ variant = "primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultIconLinkButtonTheme, theme);
   const linkRef = useRef(null);
   useEffect(() => {

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/components/link-button/LinkButton.cjs

@@ -7,7 +7,7 @@ var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function LinkButton({
-  variant = "emphasised-primary",
+  variant = "primary",
   size = "md",
   theme = {},
   cssOverrides,

package/dist/components/link-button/LinkButton.js

@@ -4,7 +4,7 @@ import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { linkButtonStyles, defaultLinkButtonTheme } from './styles.js';
 
-function LinkButton({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
+function LinkButton({ variant = "primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
   const mergedTheme = mergeDeep(defaultLinkButtonTheme, theme);
   const iconSize = size === "xs" ? "sm" : size;
   return jsx(Link, { ...props, css: [

package/dist/components/menu/styles.cjs

@@ -33,6 +33,7 @@ const menuItemStyles = (theme, { description }, isFocusVisible = false) => react
 	padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 		${theme.shared.padding.bottom} ${theme.shared.padding.left};
 	border-bottom: ${theme.shared["border-bottom"]};
+	background: ${theme.shared["background-color"]};
 	&:last-child {
 		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
 	}

package/dist/components/menu/styles.js

@@ -31,6 +31,7 @@ const menuItemStyles = (theme, { description }, isFocusVisible = false) => css`
 	padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 		${theme.shared.padding.bottom} ${theme.shared.padding.left};
 	border-bottom: ${theme.shared["border-bottom"]};
+	background: ${theme.shared["background-color"]};
 	&:last-child {
 		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
 	}

package/dist/components/topbar/TopBar.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Avatar = require('../avatar/Avatar.cjs');
+var styles = require('./styles.cjs');
+var TopBarItem = require('./topBarItem/TopBarItem.cjs');
+var TopBarNavigation = require('./topBarNavigation/TopBarNavigation.cjs');
+var TopBarToolName = require('./topBarToolName/TopBarToolName.cjs');
+
+function TopBarSide({
+  children,
+  alignment
+}) {
+  const items = [];
+  React.Children.forEach(children, (child, i) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === TopBarItem.TopBarItem) {
+      items.push(
+        React.cloneElement(child, {
+          key: `${child.key}-${i}`,
+          alignment
+        })
+      );
+    }
+    if (child.type === TopBarNavigation.TopBarNavigation) {
+      items.push(
+        React.cloneElement(child, {
+          key: `${child.key}-${i}`,
+          alignment
+        })
+      );
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items });
+}
+function TopBarContainerRight({
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "right", children });
+}
+function TopBarContainerLeft({
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "left", children });
+}
+function TopBar({
+  children,
+  theme = {},
+  cssOverrides,
+  className,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.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.TopBarToolName) {
+      toolName ?? (toolName = child);
+    }
+    if (child.type === Avatar.Avatar) {
+      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "right", children: child }));
+    }
+    if (child.type === TopBarContainerLeft) {
+      leftSide ?? (leftSide = child);
+    }
+    if (child.type === TopBarContainerRight) {
+      rightSide ?? (rightSide = child);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      css: [styles.topBarStyles(mergedTheme), cssOverrides],
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.topBarContainerLeftStyles(mergedTheme), children: [
+          toolName,
+          leftSide
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.topBarContainerRightStyles(mergedTheme), children: [
+          rightSide,
+          avatar
+        ] })
+      ]
+    }
+  );
+}
+
+exports.TopBar = TopBar;
+exports.TopBarContainerLeft = TopBarContainerLeft;
+exports.TopBarContainerRight = TopBarContainerRight;