@guardian/stand 0.0.16 → 0.0.17

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

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