@guardian/stand 0.0.27 → 0.0.28

package/dist/components/form/Form.cjs

@@ -31,7 +31,7 @@ function FormInputContainer({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag,
     {
-      css: [styles.formInputContainerStyles(mergedTheme, { size }), cssOverrides],
+      css: [styles.formInputContainerStyles(mergedTheme), cssOverrides],
       isDisabled,
       ...props,
       children: [

package/dist/components/form/Form.js

@@ -11,7 +11,7 @@ function FormInputContainer({ as: Component, size = "md", label, description, er
   }
   const mergedTheme = mergeDeep(mergeDeep(defaultFormInputContainerTheme, theme), formInputContainerTheme ?? {});
   const Tag = Component;
-  return jsxs(Tag, { css: [formInputContainerStyles(mergedTheme, { size }), cssOverrides], isDisabled, ...props, children: [label && jsx(Label, { css: formInputLabelStyles(mergedTheme, { size, isDisabled }), children: label }), description && jsx("div", { css: formInputDescriptionStyles(mergedTheme, { isDisabled }), children: description }), children, error && jsx(FieldError, { children: jsx(InlineMessage, { level: "error", children: error }) })] });
+  return jsxs(Tag, { css: [formInputContainerStyles(mergedTheme), cssOverrides], isDisabled, ...props, children: [label && jsx(Label, { css: formInputLabelStyles(mergedTheme, { size, isDisabled }), children: label }), description && jsx("div", { css: formInputDescriptionStyles(mergedTheme, { isDisabled }), children: description }), children, error && jsx(FieldError, { children: jsx(InlineMessage, { level: "error", children: error }) })] });
 }
 
 export { FormInputContainer };

package/dist/components/form/styles.cjs

@@ -5,15 +5,12 @@ var form = require('../../styleD/build/typescript/component/form.cjs');
 var typography = require('../../styleD/utils/semantic/typography.cjs');
 
 const defaultFormInputContainerTheme = form.componentForm.input;
-const formInputContainerStyles = (theme, {
-  size
-}) => {
+const formInputContainerStyles = (theme) => {
   return react.css`
 		display: ${theme.shared.container.display};
 		flex-direction: ${theme.shared.container["flex-direction"]};
 		gap: ${theme.shared.container.gap};
 		width: ${theme.shared.container.width};
-		max-width: ${theme[size].container["max-width"]};
 	`;
 };
 const formInputLabelStyles = (theme, {

package/dist/components/form/styles.js

@@ -3,13 +3,12 @@ import { componentForm } from '../../styleD/build/typescript/component/form.js';
 import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
 
 const defaultFormInputContainerTheme = componentForm.input;
-const formInputContainerStyles = (theme, { size }) => {
+const formInputContainerStyles = (theme) => {
   return css`
 		display: ${theme.shared.container.display};
 		flex-direction: ${theme.shared.container["flex-direction"]};
 		gap: ${theme.shared.container.gap};
 		width: ${theme.shared.container.width};
-		max-width: ${theme[size].container["max-width"]};
 	`;
 };
 const formInputLabelStyles = (theme, { isDisabled, size }) => {

package/dist/components/select/styles.cjs

@@ -7,7 +7,6 @@ var typography = require('../../styleD/utils/semantic/typography.cjs');
 const defaultSelectTheme = select.componentSelect;
 const popoverStyles = (theme) => {
   return react.css`
-		max-width: ${theme.shared.maxWidth};
 		width: ${theme.shared.width};
 	`;
 };
@@ -50,7 +49,6 @@ const listBoxStyles = (theme) => {
 		background-color: ${theme.shared.listBox.backgroundColor};
 		border: ${theme.shared.listBox.border};
 		box-shadow: ${theme.shared.listBox.shadow};
-		max-width: ${theme.shared.maxWidth};
 		width: ${theme.shared.width};
 		outline: none;
 	`;

package/dist/components/select/styles.js

@@ -5,7 +5,6 @@ import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semant
 const defaultSelectTheme = componentSelect;
 const popoverStyles = (theme) => {
   return css`
-		max-width: ${theme.shared.maxWidth};
 		width: ${theme.shared.width};
 	`;
 };
@@ -48,7 +47,6 @@ const listBoxStyles = (theme) => {
 		background-color: ${theme.shared.listBox.backgroundColor};
 		border: ${theme.shared.listBox.border};
 		box-shadow: ${theme.shared.listBox.shadow};
-		max-width: ${theme.shared.maxWidth};
 		width: ${theme.shared.width};
 		outline: none;
 	`;

package/dist/components/topbar/TopBar.cjs

@@ -2,12 +2,17 @@
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
+var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
+var useResize = require('../../util/useResize.cjs');
 var Avatar = require('../avatar/Avatar.cjs');
+var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 var TopBarItem = require('./topBarItem/TopBarItem.cjs');
 var TopBarNavigation = require('./topBarNavigation/TopBarNavigation.cjs');
 var TopBarToolName = require('./topBarToolName/TopBarToolName.cjs');
+var AvatarLink = require('../avatar-link/AvatarLink.cjs');
+var AvatarButton = require('../avatar-button/AvatarButton.cjs');
 
 function TopBarSide({
   children,
@@ -54,16 +59,22 @@ function TopBarContainerLeft({
 }
 function TopBar({
   children,
+  collapseBelow = {
+    toolName: "lg",
+    containerLeft: "lg"
+  },
   theme = {},
   cssOverrides,
   className,
   ...props
 }) {
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultTopBarTheme, theme);
-  let leftSide = null;
-  let rightSide = null;
-  let toolName = null;
-  let avatar = null;
+  let leftSide;
+  let rightSide;
+  let toolName;
+  let avatar;
   React.Children.forEach(children, (child) => {
     if (!React.isValidElement(child)) {
       return;
@@ -71,10 +82,10 @@ function TopBar({
     if (child.type === TopBarToolName.TopBarToolName) {
       toolName ?? (toolName = React.cloneElement(
         child,
-        { theme: mergedTheme.ToolName }
+        { theme: mergedTheme.ToolName, collapseBelow: collapseBelow.toolName }
       ));
     }
-    if (child.type === Avatar.Avatar) {
+    if (child.type === Avatar.Avatar || child.type === AvatarLink.AvatarLink || child.type === AvatarButton.AvatarButton) {
       avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
@@ -90,6 +101,43 @@ function TopBar({
       ));
     }
   });
+  const leftSideMenuItems = [];
+  if (leftSide) {
+    React.Children.forEach(
+      leftSide.props.children,
+      (child) => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+        if (child.type === TopBarNavigation.TopBarNavigation) {
+          leftSideMenuItems.push(
+            React.cloneElement(
+              child,
+              {
+                theme: mergedTheme.Navigation,
+                alignment: "left",
+                _menuOpen: menuOpen
+              }
+            )
+          );
+        }
+        if (child.type === TopBarItem.TopBarItem) {
+          leftSideMenuItems.push(
+            React.cloneElement(child, {
+              theme: mergedTheme.Item,
+              alignment: "left",
+              _menuOpen: menuOpen
+            })
+          );
+        }
+      }
+    );
+  }
+  useResize.useResize(() => {
+    if (menuOpen) {
+      setMenuOpen(false);
+    }
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -97,14 +145,72 @@ function TopBar({
       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
-        ] })
+        leftSideMenuItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            css: styles.topBarContainerStyles(mergedTheme, {
+              showUntil: collapseBelow.containerLeft
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              reactAriaComponents.DialogTrigger,
+              {
+                isOpen: menuOpen,
+                onOpenChange: (isOpen) => {
+                  setMenuOpen(isOpen);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactAriaComponents.Button,
+                    {
+                      "aria-label": "Navigation Menu",
+                      ref: buttonRef,
+                      css: styles.topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        TopBarItem.TopBarItem,
+                        {
+                          alignment: "left",
+                          size: "sm",
+                          theme: mergedTheme.Item,
+                          "aria-label": "Navigation Menu",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "lg", children: menuOpen ? "close" : "menu" })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactAriaComponents.Popover,
+                    {
+                      css: styles.topBarCollapsedNavMenuPopoverStyles(mergedTheme),
+                      offset: 12,
+                      children: leftSideMenuItems
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.topBarContainerStyles(mergedTheme), children: toolName }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            css: styles.topBarContainerStyles(mergedTheme, {
+              collapseBelow: collapseBelow.containerLeft
+            }),
+            children: leftSide
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            css: [
+              styles.topBarSpacerStyles(mergedTheme),
+              styles.topBarContainerStyles(mergedTheme)
+            ],
+            children: rightSide
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.topBarContainerStyles(mergedTheme), children: avatar })
       ]
     }
   );

package/dist/components/topbar/TopBar.js

@@ -1,11 +1,16 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import React from 'react';
+import { DialogTrigger, Button, Popover } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
+import { useResize } from '../../util/useResize.js';
 import { Avatar } from '../avatar/Avatar.js';
-import { topBarContainerLeftStyles, topBarContainerRightStyles, topBarStyles, defaultTopBarTheme } from './styles.js';
+import { Icon } from '../icon/Icon.js';
+import { topBarCollapsedNavMenuButtonStyles, topBarCollapsedNavMenuPopoverStyles, topBarContainerStyles, topBarSpacerStyles, topBarStyles, defaultTopBarTheme } from './styles.js';
 import { TopBarItem } from './topBarItem/TopBarItem.js';
 import { TopBarNavigation } from './topBarNavigation/TopBarNavigation.js';
 import { TopBarToolName } from './topBarToolName/TopBarToolName.js';
+import { AvatarLink } from '../avatar-link/AvatarLink.js';
+import { AvatarButton } from '../avatar-button/AvatarButton.js';
 
 function TopBarSide({ children, alignment, theme }) {
   const items = [];
@@ -36,20 +41,25 @@ function TopBarContainerRight({ children, theme }) {
 function TopBarContainerLeft({ children, theme }) {
   return jsx(TopBarSide, { alignment: "left", theme, children });
 }
-function TopBar({ children, theme = {}, cssOverrides, className, ...props }) {
+function TopBar({ children, collapseBelow = {
+  toolName: "lg",
+  containerLeft: "lg"
+}, theme = {}, cssOverrides, className, ...props }) {
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
   const mergedTheme = mergeDeep(defaultTopBarTheme, theme);
-  let leftSide = null;
-  let rightSide = null;
-  let toolName = null;
-  let avatar = null;
+  let leftSide;
+  let rightSide;
+  let toolName;
+  let avatar;
   React.Children.forEach(children, (child) => {
     if (!React.isValidElement(child)) {
       return;
     }
     if (child.type === TopBarToolName) {
-      toolName ?? (toolName = React.cloneElement(child, { theme: mergedTheme.ToolName }));
+      toolName ?? (toolName = React.cloneElement(child, { theme: mergedTheme.ToolName, collapseBelow: collapseBelow.toolName }));
     }
-    if (child.type === Avatar) {
+    if (child.type === Avatar || child.type === AvatarLink || child.type === AvatarButton) {
       avatar ?? (avatar = jsx(TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
@@ -59,7 +69,43 @@ function TopBar({ children, theme = {}, cssOverrides, className, ...props }) {
       rightSide ?? (rightSide = React.cloneElement(child, { theme: mergedTheme }));
     }
   });
-  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] })] });
+  const leftSideMenuItems = [];
+  if (leftSide) {
+    React.Children.forEach(leftSide.props.children, (child) => {
+      if (!React.isValidElement(child)) {
+        return;
+      }
+      if (child.type === TopBarNavigation) {
+        leftSideMenuItems.push(React.cloneElement(child, {
+          theme: mergedTheme.Navigation,
+          alignment: "left",
+          _menuOpen: menuOpen
+        }));
+      }
+      if (child.type === TopBarItem) {
+        leftSideMenuItems.push(React.cloneElement(child, {
+          theme: mergedTheme.Item,
+          alignment: "left",
+          _menuOpen: menuOpen
+        }));
+      }
+    });
+  }
+  useResize(() => {
+    if (menuOpen) {
+      setMenuOpen(false);
+    }
+  });
+  return jsxs("div", { css: [topBarStyles(mergedTheme), cssOverrides], className, ...props, children: [leftSideMenuItems.length > 0 && jsx("div", { css: topBarContainerStyles(mergedTheme, {
+    showUntil: collapseBelow.containerLeft
+  }), children: jsxs(DialogTrigger, { isOpen: menuOpen, onOpenChange: (isOpen) => {
+    setMenuOpen(isOpen);
+  }, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: 12, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
+    collapseBelow: collapseBelow.containerLeft
+  }), children: leftSide }), jsx("div", { css: [
+    topBarSpacerStyles(mergedTheme),
+    topBarContainerStyles(mergedTheme)
+  ], children: rightSide }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: avatar })] });
 }
 
 export { TopBar, TopBarContainerLeft, TopBarContainerRight };

package/dist/components/topbar/styles.cjs

@@ -2,6 +2,7 @@
 
 var react = require('@emotion/react');
 var TopBar = require('../../styleD/build/typescript/component/TopBar.cjs');
+var mq = require('../../styleD/utils/semantic/mq.cjs');
 
 const defaultTopBarTheme = TopBar.componentTopBar;
 const topBarStyles = (theme) => {
@@ -13,18 +14,61 @@ const topBarStyles = (theme) => {
 		justify-content: ${theme["justify-content"]};
 	`;
 };
-const topBarContainerLeftStyles = (theme) => {
+const topBarContainerStyles = (theme, {
+  collapseBelow,
+  showUntil
+} = {}) => {
   return react.css`
 		display: ${theme.display};
+
+		${collapseBelow && react.css`
+			${mq.until[collapseBelow]} {
+				display: none;
+			}
+		`}
+
+		${showUntil && react.css`
+			${mq.from[showUntil]} {
+				display: none;
+			}
+		`}
 	`;
 };
-const topBarContainerRightStyles = (theme) => {
+const topBarSpacerStyles = (theme) => {
   return react.css`
-		display: ${theme.display};
+		margin-left: ${theme.spacer["margin-left"]};
+	`;
+};
+const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
+  return react.css`
+		margin: ${theme.collapsedNavMenu.button.margin};
+		padding: ${theme.collapsedNavMenu.button.padding};
+		background: ${theme.collapsedNavMenu.button.background};
+		border: ${theme.collapsedNavMenu.button.border};
+		cursor: ${theme.collapsedNavMenu.button.cursor};
+
+		&[data-hovered] {
+			background-color: ${theme.collapsedNavMenu.button.hovered["background-color"]};
+		}
+
+		${menuOpen && react.css`
+			background-color: ${theme.collapsedNavMenu.button.active["background-color"]};
+		`}
+	`;
+};
+const topBarCollapsedNavMenuPopoverStyles = (theme) => {
+  return react.css`
+		left: ${theme.collapsedNavMenu.popover.left};
+		top: ${theme.collapsedNavMenu.popover.top};
+		background-color: ${theme.collapsedNavMenu.popover["background-color"]};
+		border-left: ${theme.collapsedNavMenu.popover.border};
+		border-right: ${theme.collapsedNavMenu.popover.border};
 	`;
 };
 
 exports.defaultTopBarTheme = defaultTopBarTheme;
-exports.topBarContainerLeftStyles = topBarContainerLeftStyles;
-exports.topBarContainerRightStyles = topBarContainerRightStyles;
+exports.topBarCollapsedNavMenuButtonStyles = topBarCollapsedNavMenuButtonStyles;
+exports.topBarCollapsedNavMenuPopoverStyles = topBarCollapsedNavMenuPopoverStyles;
+exports.topBarContainerStyles = topBarContainerStyles;
+exports.topBarSpacerStyles = topBarSpacerStyles;
 exports.topBarStyles = topBarStyles;

package/dist/components/topbar/styles.js

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { componentTopBar } from '../../styleD/build/typescript/component/TopBar.js';
+import { until, from } from '../../styleD/utils/semantic/mq.js';
 
 const defaultTopBarTheme = componentTopBar;
 const topBarStyles = (theme) => {
@@ -11,15 +12,53 @@ const topBarStyles = (theme) => {
 		justify-content: ${theme["justify-content"]};
 	`;
 };
-const topBarContainerLeftStyles = (theme) => {
+const topBarContainerStyles = (theme, { collapseBelow, showUntil } = {}) => {
   return css`
 		display: ${theme.display};
+
+		${collapseBelow && css`
+			${until[collapseBelow]} {
+				display: none;
+			}
+		`}
+
+		${showUntil && css`
+			${from[showUntil]} {
+				display: none;
+			}
+		`}
 	`;
 };
-const topBarContainerRightStyles = (theme) => {
+const topBarSpacerStyles = (theme) => {
   return css`
-		display: ${theme.display};
+		margin-left: ${theme.spacer["margin-left"]};
+	`;
+};
+const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
+  return css`
+		margin: ${theme.collapsedNavMenu.button.margin};
+		padding: ${theme.collapsedNavMenu.button.padding};
+		background: ${theme.collapsedNavMenu.button.background};
+		border: ${theme.collapsedNavMenu.button.border};
+		cursor: ${theme.collapsedNavMenu.button.cursor};
+
+		&[data-hovered] {
+			background-color: ${theme.collapsedNavMenu.button.hovered["background-color"]};
+		}
+
+		${menuOpen && css`
+			background-color: ${theme.collapsedNavMenu.button.active["background-color"]};
+		`}
+	`;
+};
+const topBarCollapsedNavMenuPopoverStyles = (theme) => {
+  return css`
+		left: ${theme.collapsedNavMenu.popover.left};
+		top: ${theme.collapsedNavMenu.popover.top};
+		background-color: ${theme.collapsedNavMenu.popover["background-color"]};
+		border-left: ${theme.collapsedNavMenu.popover.border};
+		border-right: ${theme.collapsedNavMenu.popover.border};
 	`;
 };
 
-export { defaultTopBarTheme, topBarContainerLeftStyles, topBarContainerRightStyles, topBarStyles };
+export { defaultTopBarTheme, topBarCollapsedNavMenuButtonStyles, topBarCollapsedNavMenuPopoverStyles, topBarContainerStyles, topBarSpacerStyles, topBarStyles };

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

@@ -11,13 +11,17 @@ function TopBarItem({
   cssOverrides,
   className,
   size = "md",
+  _menuOpen,
   ...props
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultTopBarItemTheme, theme);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      css: [styles.topBarItemStyles(mergedTheme, alignment, { size }), cssOverrides],
+      css: [
+        styles.topBarItemStyles(mergedTheme, alignment, { size }, _menuOpen),
+        cssOverrides
+      ],
       className,
       ...props,
       children

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

@@ -2,9 +2,12 @@ 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 }) {
+function TopBarItem({ children, alignment = "left", theme = {}, cssOverrides, className, size = "md", _menuOpen, ...props }) {
   const mergedTheme = mergeDeep(defaultTopBarItemTheme, theme);
-  return jsx("div", { css: [topBarItemStyles(mergedTheme, alignment, { size }), cssOverrides], className, ...props, children });
+  return jsx("div", { css: [
+    topBarItemStyles(mergedTheme, alignment, { size }, _menuOpen),
+    cssOverrides
+  ], className, ...props, children });
 }
 
 export { TopBarItem };

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

@@ -4,15 +4,22 @@ var react = require('@emotion/react');
 var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
 
 const defaultTopBarItemTheme = TopBar.componentTopBar.Item;
-const topBarItemStyles = (theme, alignment, { size }) => {
+const topBarItemStyles = (theme, alignment, { size }, _menuOpen) => {
   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"};
+
+		${_menuOpen ? react.css`
+					height: 64px;
+					justify-content: center;
+					border-bottom: ${theme.border};
+				` : react.css`
+					${alignment === "left" ? "border-right" : "border-left"}: ${theme.border};
+					${alignment === "right" && "margin-left: auto"};
+				`}
 	`;
 };
 

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

@@ -2,15 +2,22 @@ import { css } from '@emotion/react';
 import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
 
 const defaultTopBarItemTheme = componentTopBar.Item;
-const topBarItemStyles = (theme, alignment, { size }) => {
+const topBarItemStyles = (theme, alignment, { size }, _menuOpen) => {
   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"};
+
+		${_menuOpen ? css`
+					height: 64px;
+					justify-content: center;
+					border-bottom: ${theme.border};
+				` : css`
+					${alignment === "left" ? "border-right" : "border-left"}: ${theme.border};
+					${alignment === "right" && "margin-left: auto"};
+				`}
 	`;
 };