@guardian/stand 0.0.15 → 0.0.17

package/dist/components/menu/styles.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+var react = require('@emotion/react');
+var menu = require('../../styleD/build/typescript/component/menu.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultMenuTheme = menu.componentMenu.menu;
+const menuStyles = (theme) => react.css`
+	display: ${theme.shared.display};
+	flex-direction: ${theme.shared["flex-direction"]};
+	border: ${theme.shared.border};
+	background: ${theme.shared["background-color"]};
+`;
+const defaultMenuSectionTheme = menu.componentMenu.menuSection;
+const menuSectionHeaderStyles = (theme, { size }) => react.css`
+	display: ${theme.header.shared.display};
+	align-items: ${theme.header.shared["align-items"]};
+	padding: ${theme.header.shared.padding.top}
+		${theme.header.shared.padding.right} ${theme.header.shared.padding.bottom}
+		${theme.header.shared.padding.left};
+	height: ${theme.header[size].height};
+	background: ${theme.header.shared["background-color"]};
+	color: ${theme.header.shared.color};
+	${typography.convertTypographyToEmotionStringStyle(theme.header[size].typography)}
+`;
+const defaultMenuItemTheme = menu.componentMenu.menuItem;
+const menuItemStyles = (theme, { description }, isFocusVisible = false) => react.css`
+	display: ${theme.shared.display};
+	grid-template-columns: ${theme.shared["grid-template-columns"]};
+	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
+	gap: ${theme.shared.gap};
+	align-items: ${theme.shared["align-items"]};
+	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"]};
+	}
+	&[data-hovered],
+	&:hover {
+		background: ${theme.shared[":hover"]["background-color"]};
+	}
+	${isFocusVisible ? react.css`
+				outline: ${theme.shared[":focus-visible"]["outline"]};
+				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+				background: ${theme.shared[":hover"]["background-color"]};
+			` : react.css`
+				outline: none;
+			`}
+`;
+const menuItemIconStyles = (theme, { size }) => react.css`
+	grid-area: ${theme.shared.icon["grid-area"]};
+	align-self: ${theme.shared.icon["align-self"]};
+	color: ${theme.shared.icon.color};
+	/* Ensure the line-height matches the font line-height of the label for alignment */
+	line-height: ${theme[size].icon["line-height"]};
+`;
+const menuItemLabelStyles = (theme) => react.css`
+	grid-area: ${theme.shared.label["grid-area"]};
+	color: ${theme.shared.label.color};
+	${typography.convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
+	)}
+`;
+const menuItemDescriptionStyles = (theme) => react.css`
+	grid-area: ${theme.shared.description["grid-area"]};
+	color: ${theme.shared.description.color};
+	${typography.convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
+`;
+const menuItemAsideStyles = (theme) => react.css`
+	grid-area: ${theme.shared.aside["grid-area"]};
+	justify-self: ${theme.shared.aside["justify-self"]};
+	align-self: ${theme.shared.aside["align-self"]};
+	color: ${theme.shared.aside.color};
+	${typography.convertTypographyToEmotionStringStyle(theme.shared.aside.typography)}
+`;
+const defaultMenuSeparatorTheme = menu.componentMenu.menuSeparator;
+const menuSeparatorStyles = (theme) => react.css`
+	background-color: ${theme.shared["background-color"]};
+	height: ${theme.shared.height};
+	width: ${theme.shared.width};
+`;
+const defaultMenuPopoverTheme = menu.componentMenu.menuPopover;
+const menuPopoverStyles = (theme, { size }) => react.css`
+	overflow: ${theme.shared.overflow};
+	max-width: ${theme[size]["max-width"]};
+	width: ${theme[size].width};
+	box-shadow: ${theme.shared.shadow};
+`;
+
+exports.defaultMenuItemTheme = defaultMenuItemTheme;
+exports.defaultMenuPopoverTheme = defaultMenuPopoverTheme;
+exports.defaultMenuSectionTheme = defaultMenuSectionTheme;
+exports.defaultMenuSeparatorTheme = defaultMenuSeparatorTheme;
+exports.defaultMenuTheme = defaultMenuTheme;
+exports.menuItemAsideStyles = menuItemAsideStyles;
+exports.menuItemDescriptionStyles = menuItemDescriptionStyles;
+exports.menuItemIconStyles = menuItemIconStyles;
+exports.menuItemLabelStyles = menuItemLabelStyles;
+exports.menuItemStyles = menuItemStyles;
+exports.menuPopoverStyles = menuPopoverStyles;
+exports.menuSectionHeaderStyles = menuSectionHeaderStyles;
+exports.menuSeparatorStyles = menuSeparatorStyles;
+exports.menuStyles = menuStyles;

package/dist/components/menu/styles.js

@@ -0,0 +1,89 @@
+import { css } from '@emotion/react';
+import { componentMenu } from '../../styleD/build/typescript/component/menu.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultMenuTheme = componentMenu.menu;
+const menuStyles = (theme) => css`
+	display: ${theme.shared.display};
+	flex-direction: ${theme.shared["flex-direction"]};
+	border: ${theme.shared.border};
+	background: ${theme.shared["background-color"]};
+`;
+const defaultMenuSectionTheme = componentMenu.menuSection;
+const menuSectionHeaderStyles = (theme, { size }) => css`
+	display: ${theme.header.shared.display};
+	align-items: ${theme.header.shared["align-items"]};
+	padding: ${theme.header.shared.padding.top}
+		${theme.header.shared.padding.right} ${theme.header.shared.padding.bottom}
+		${theme.header.shared.padding.left};
+	height: ${theme.header[size].height};
+	background: ${theme.header.shared["background-color"]};
+	color: ${theme.header.shared.color};
+	${convertTypographyToEmotionStringStyle(theme.header[size].typography)}
+`;
+const defaultMenuItemTheme = componentMenu.menuItem;
+const menuItemStyles = (theme, { description }, isFocusVisible = false) => css`
+	display: ${theme.shared.display};
+	grid-template-columns: ${theme.shared["grid-template-columns"]};
+	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
+	gap: ${theme.shared.gap};
+	align-items: ${theme.shared["align-items"]};
+	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"]};
+	}
+	&[data-hovered],
+	&:hover {
+		background: ${theme.shared[":hover"]["background-color"]};
+	}
+	${isFocusVisible ? css`
+				outline: ${theme.shared[":focus-visible"]["outline"]};
+				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+				background: ${theme.shared[":hover"]["background-color"]};
+			` : css`
+				outline: none;
+			`}
+`;
+const menuItemIconStyles = (theme, { size }) => css`
+	grid-area: ${theme.shared.icon["grid-area"]};
+	align-self: ${theme.shared.icon["align-self"]};
+	color: ${theme.shared.icon.color};
+	/* Ensure the line-height matches the font line-height of the label for alignment */
+	line-height: ${theme[size].icon["line-height"]};
+`;
+const menuItemLabelStyles = (theme) => css`
+	grid-area: ${theme.shared.label["grid-area"]};
+	color: ${theme.shared.label.color};
+	${convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
+	)}
+`;
+const menuItemDescriptionStyles = (theme) => css`
+	grid-area: ${theme.shared.description["grid-area"]};
+	color: ${theme.shared.description.color};
+	${convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
+`;
+const menuItemAsideStyles = (theme) => css`
+	grid-area: ${theme.shared.aside["grid-area"]};
+	justify-self: ${theme.shared.aside["justify-self"]};
+	align-self: ${theme.shared.aside["align-self"]};
+	color: ${theme.shared.aside.color};
+	${convertTypographyToEmotionStringStyle(theme.shared.aside.typography)}
+`;
+const defaultMenuSeparatorTheme = componentMenu.menuSeparator;
+const menuSeparatorStyles = (theme) => css`
+	background-color: ${theme.shared["background-color"]};
+	height: ${theme.shared.height};
+	width: ${theme.shared.width};
+`;
+const defaultMenuPopoverTheme = componentMenu.menuPopover;
+const menuPopoverStyles = (theme, { size }) => css`
+	overflow: ${theme.shared.overflow};
+	max-width: ${theme[size]["max-width"]};
+	width: ${theme[size].width};
+	box-shadow: ${theme.shared.shadow};
+`;
+
+export { defaultMenuItemTheme, defaultMenuPopoverTheme, defaultMenuSectionTheme, defaultMenuSeparatorTheme, defaultMenuTheme, menuItemAsideStyles, menuItemDescriptionStyles, menuItemIconStyles, menuItemLabelStyles, menuItemStyles, menuPopoverStyles, menuSectionHeaderStyles, menuSeparatorStyles, menuStyles };

package/dist/components/tag-picker/TagTable.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react$1 = require('@emotion/react');
-var react = require('react');
+var react = require('@emotion/react');
+var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var styles = require('./styles.cjs');
 
@@ -28,10 +28,10 @@ function TagTable({
   cssOverrides
 }) {
   const canDrag = !!onReorder;
-  const [localRows, setLocalRows] = react.useState(() => [...rows]);
-  const localRowsRef = react.useRef(localRows);
+  const [localRows, setLocalRows] = React.useState(() => [...rows]);
+  const localRowsRef = React.useRef(localRows);
   localRowsRef.current = localRows;
-  react.useEffect(() => {
+  React.useEffect(() => {
     setLocalRows([...rows]);
   }, [rows]);
   const filtered = localRows.filter(filterRows);
@@ -99,7 +99,7 @@ function TagTable({
                   reactAriaComponents.Cell,
                   {
                     css: [
-                      react$1.css`
+                      react.css`
 											width: 1%;
 										`
                     ],
@@ -111,7 +111,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 											position: relative;
 											width: 15%;
 										`
@@ -124,7 +124,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 										width: 50%;
 									`
                     ],
@@ -137,7 +137,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 											width: 20%;
 										`
                     ],
@@ -149,7 +149,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 											text-align: center;
 											width: 10%;
 										`
@@ -172,7 +172,7 @@ function TagTable({
                   {
                     css: [
                       styles.tagTableCellStyles(theme),
-                      react$1.css`
+                      react.css`
 											text-align: center;
 											width: 10%;
 										`

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;

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 };