@guardian/stand 0.0.40 → 0.0.42

package/dist/components/TopBar/TopBarNavigation/TopBarNavigation.cjs

@@ -1,86 +1,71 @@
-'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');
-
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../../util/mergeDeep.cjs");
+const require_Icon = require("../../Icon/Icon.cjs");
+const require_Menu = require("../../Menu/Menu.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/TopBar/TopBarNavigation/TopBarNavigation.tsx
 const menuIndicator = "keyboard_arrow_down";
-function TopBarNavigation({
-  text,
-  size = "md",
-  isSelected = false,
-  icon,
-  menuChildren,
-  href,
-  onPress,
-  isDisabled,
-  alignment = "left",
-  theme = {},
-  cssOverrides,
-  className,
-  _menuOpen,
-  ...props
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTopBarNavigationTheme, theme);
-  const iconSize = size === "md" ? "lg" : "sm";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      css: styles.topBarNavigationDividerStyles(mergedTheme, { alignment }, _menuOpen),
-      children: menuChildren ? /* @__PURE__ */ jsxRuntime.jsxs(
-        Menu.Menu,
-        {
-          popoverProps: {
-            placement: _menuOpen ? "end" : void 0
-          },
-          size: _menuOpen ? "sm" : void 0,
-          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, _menuOpen),
-                  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, _menuOpen),
-            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 })
-          ]
-        }
-      )
-    }
-  );
+function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChildren, href, onPress, isDisabled, alignment = "left", theme = {}, cssOverrides, className, _menuOpen, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTopBarNavigationTheme, theme);
+	const iconSize = size === "md" ? "lg" : "sm";
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: require_styles.topBarNavigationDividerStyles(mergedTheme, { alignment }, _menuOpen),
+		children: menuChildren ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_Menu.Menu, {
+			popoverProps: { placement: _menuOpen ? "end" : void 0 },
+			size: _menuOpen ? "sm" : void 0,
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Menu.MenuToggle, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Pressable, {
+				isDisabled,
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("span", {
+					role: "button",
+					"data-disabled": isDisabled ? true : void 0,
+					css: [
+						require_styles.topBarNavigationStyles(mergedTheme, isSelected, _menuOpen),
+						require_styles.topBarNavigationTypographyStyles(mergedTheme, size),
+						cssOverrides
+					],
+					className,
+					...props,
+					children: [
+						/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+							size: iconSize,
+							children: icon
+						}),
+						/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+							css: require_styles.topBarNavigationTextStyles(mergedTheme),
+							children: text
+						}),
+						/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+							css: require_styles.topBarMenuIndicatorStyles(mergedTheme),
+							children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+								size: iconSize,
+								children: menuIndicator
+							})
+						})
+					]
+				})
+			}) }), menuChildren]
+		}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Link, {
+			css: [
+				require_styles.topBarNavigationStyles(mergedTheme, isSelected, _menuOpen),
+				require_styles.topBarNavigationTypographyStyles(mergedTheme, size),
+				cssOverrides
+			],
+			href,
+			onPress,
+			className,
+			isDisabled,
+			...props,
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+				size: iconSize,
+				children: icon
+			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+				css: require_styles.topBarNavigationTextStyles(mergedTheme),
+				children: text
+			})]
+		})
+	});
 }
-
+//#endregion
 exports.TopBarNavigation = TopBarNavigation;

package/dist/components/TopBar/TopBarNavigation/TopBarNavigation.d.cts

@@ -0,0 +1,21 @@
+import { TopBarNavigationProps } from "./types.cjs";
+
+//#region src/components/TopBar/TopBarNavigation/TopBarNavigation.d.ts
+declare function TopBarNavigation({
+  text,
+  size,
+  isSelected,
+  icon,
+  menuChildren,
+  href,
+  onPress,
+  isDisabled,
+  alignment,
+  theme,
+  cssOverrides,
+  className,
+  _menuOpen,
+  ...props
+}: TopBarNavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TopBarNavigation };

package/dist/components/TopBar/TopBarNavigation/TopBarNavigation.d.ts

@@ -0,0 +1,21 @@
+import { TopBarNavigationProps } from "./types.js";
+
+//#region src/components/TopBar/TopBarNavigation/TopBarNavigation.d.ts
+declare function TopBarNavigation({
+  text,
+  size,
+  isSelected,
+  icon,
+  menuChildren,
+  href,
+  onPress,
+  isDisabled,
+  alignment,
+  theme,
+  cssOverrides,
+  className,
+  _menuOpen,
+  ...props
+}: TopBarNavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TopBarNavigation };

package/dist/components/TopBar/TopBarNavigation/TopBarNavigation.js

@@ -1,25 +1,70 @@
-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 { defaultTopBarNavigationTheme, topBarNavigationTextStyles, topBarMenuIndicatorStyles, topBarNavigationStyles, topBarNavigationTypographyStyles, topBarNavigationDividerStyles } from './styles.js';
-
+import { mergeDeep } from "../../../util/mergeDeep.js";
+import { Icon } from "../../Icon/Icon.js";
+import { Menu as Menu$1, MenuToggle } from "../../Menu/Menu.js";
+import { defaultTopBarNavigationTheme, topBarMenuIndicatorStyles, topBarNavigationDividerStyles, topBarNavigationStyles, topBarNavigationTextStyles, topBarNavigationTypographyStyles } from "./styles.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Link, Pressable } from "react-aria-components";
+//#region src/components/TopBar/TopBarNavigation/TopBarNavigation.tsx
 const menuIndicator = "keyboard_arrow_down";
 function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChildren, href, onPress, isDisabled, alignment = "left", theme = {}, cssOverrides, className, _menuOpen, ...props }) {
-  const mergedTheme = mergeDeep(defaultTopBarNavigationTheme, theme);
-  const iconSize = size === "md" ? "lg" : "sm";
-  return jsx("div", { css: topBarNavigationDividerStyles(mergedTheme, { alignment }, _menuOpen), children: menuChildren ? jsxs(Menu, { popoverProps: {
-    placement: _menuOpen ? "end" : void 0
-  }, size: _menuOpen ? "sm" : void 0, children: [jsx(MenuToggle, { children: jsx(Pressable, { isDisabled, children: jsxs("span", { role: "button", "data-disabled": isDisabled ? true : void 0, css: [
-    topBarNavigationStyles(mergedTheme, isSelected, _menuOpen),
-    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, _menuOpen),
-    topBarNavigationTypographyStyles(mergedTheme, size),
-    cssOverrides
-  ], href, onPress, className, isDisabled, ...props, children: [jsx(Icon, { size: iconSize, children: icon }), jsx("span", { css: topBarNavigationTextStyles(mergedTheme), children: text })] }) });
+	const mergedTheme = mergeDeep(defaultTopBarNavigationTheme, theme);
+	const iconSize = size === "md" ? "lg" : "sm";
+	return /* @__PURE__ */ jsx("div", {
+		css: topBarNavigationDividerStyles(mergedTheme, { alignment }, _menuOpen),
+		children: menuChildren ? /* @__PURE__ */ jsxs(Menu$1, {
+			popoverProps: { placement: _menuOpen ? "end" : void 0 },
+			size: _menuOpen ? "sm" : void 0,
+			children: [/* @__PURE__ */ jsx(MenuToggle, { children: /* @__PURE__ */ jsx(Pressable, {
+				isDisabled,
+				children: /* @__PURE__ */ jsxs("span", {
+					role: "button",
+					"data-disabled": isDisabled ? true : void 0,
+					css: [
+						topBarNavigationStyles(mergedTheme, isSelected, _menuOpen),
+						topBarNavigationTypographyStyles(mergedTheme, size),
+						cssOverrides
+					],
+					className,
+					...props,
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							size: iconSize,
+							children: icon
+						}),
+						/* @__PURE__ */ jsx("span", {
+							css: topBarNavigationTextStyles(mergedTheme),
+							children: text
+						}),
+						/* @__PURE__ */ jsx("div", {
+							css: topBarMenuIndicatorStyles(mergedTheme),
+							children: /* @__PURE__ */ jsx(Icon, {
+								size: iconSize,
+								children: menuIndicator
+							})
+						})
+					]
+				})
+			}) }), menuChildren]
+		}) : /* @__PURE__ */ jsxs(Link, {
+			css: [
+				topBarNavigationStyles(mergedTheme, isSelected, _menuOpen),
+				topBarNavigationTypographyStyles(mergedTheme, size),
+				cssOverrides
+			],
+			href,
+			onPress,
+			className,
+			isDisabled,
+			...props,
+			children: [/* @__PURE__ */ jsx(Icon, {
+				size: iconSize,
+				children: icon
+			}), /* @__PURE__ */ jsx("span", {
+				css: topBarNavigationTextStyles(mergedTheme),
+				children: text
+			})]
+		})
+	});
 }
-
+//#endregion
 export { TopBarNavigation };

package/dist/components/TopBar/TopBarNavigation/styles.cjs

@@ -1,12 +1,11 @@
-'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;
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_typography = require("../../../styleD/utils/semantic/typography.cjs");
+const require_topBar = require("../../../styleD/build/typescript/component/topBar.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/TopBar/TopBarNavigation/styles.ts
+const defaultTopBarNavigationTheme = require_topBar.componentTopBar.navigation;
 const topBarNavigationStyles = (theme, selected, _menuOpen) => {
-  return react.css`
+	return _emotion_react.css`
 		display: ${theme.shared.display};
 		position: ${theme.shared.position};
 		align-items: ${theme.shared.alignItems};
@@ -31,7 +30,7 @@ const topBarNavigationStyles = (theme, selected, _menuOpen) => {
 			color: ${theme.shared.disabled.color};
 		}
 
-		${_menuOpen ? react.css`
+		${_menuOpen ? _emotion_react.css`
 					border-right: ${theme.shared.borderTop};
 					border-left: ${theme.unselected.borderBottom};
 					width: 100%;
@@ -50,7 +49,7 @@ const topBarNavigationStyles = (theme, selected, _menuOpen) => {
 						border-left: ${theme.selected.borderBottom};
 						background-color: ${theme.shared._menuOpen.selected.backgroundColor};
 					`}
-				` : react.css`
+				` : _emotion_react.css`
 					border-top: ${theme.shared.borderTop};
 					border-bottom: ${theme.unselected.borderBottom};
 
@@ -72,31 +71,31 @@ const topBarNavigationStyles = (theme, selected, _menuOpen) => {
 		text-decoration: ${theme.shared.textDecoration};
 	`;
 };
-const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => react.css`
-	${_menuOpen ? react.css`
+const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => _emotion_react.css`
+	${_menuOpen ? _emotion_react.css`
 				height: ${theme.shared._menuOpen.height};
 				border-bottom: ${theme.shared.divider};
-			` : react.css`
+			` : _emotion_react.css`
 				${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
 			`}
 `;
-const topBarNavigationTextStyles = (theme) => react.css`
+const topBarNavigationTextStyles = (theme) => _emotion_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)}
+	return size == "md" ? _emotion_react.css`
+				${require_typography.convertTypographyToEmotionStringStyle(theme.md.typography)}
+			` : _emotion_react.css`
+				${require_typography.convertTypographyToEmotionStringStyle(theme.sm.typography)}
 			`;
 };
 const topBarMenuIndicatorStyles = (theme) => {
-  return react.css`
+	return _emotion_react.css`
 		margin-top: ${theme.menuIndicator.margin.top};
 		margin-left: ${theme.menuIndicator.margin.left};
 	`;
 };
-
+//#endregion
 exports.defaultTopBarNavigationTheme = defaultTopBarNavigationTheme;
 exports.topBarMenuIndicatorStyles = topBarMenuIndicatorStyles;
 exports.topBarNavigationDividerStyles = topBarNavigationDividerStyles;

package/dist/components/TopBar/TopBarNavigation/styles.d.cts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../../util/types.cjs";
+import { ComponentTopBar } from "../../../styleD/build/typescript/component/topBar.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/TopBar/TopBarNavigation/styles.d.ts
+type TopBarNavigationTheme = Prettify<ComponentTopBar['navigation']>;
+type PartialTopBarNavigationTheme = Prettify<DeepPartial<TopBarNavigationTheme>>;
+//#endregion
+export { PartialTopBarNavigationTheme, TopBarNavigationTheme };

package/dist/components/TopBar/TopBarNavigation/styles.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../../util/types.js";
+import { ComponentTopBar } from "../../../styleD/build/typescript/component/topBar.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/TopBar/TopBarNavigation/styles.d.ts
+type TopBarNavigationTheme = Prettify<ComponentTopBar['navigation']>;
+type PartialTopBarNavigationTheme = Prettify<DeepPartial<TopBarNavigationTheme>>;
+//#endregion
+export { PartialTopBarNavigationTheme, TopBarNavigationTheme };

package/dist/components/TopBar/TopBarNavigation/styles.js

@@ -1,10 +1,10 @@
-import { css } from '@emotion/react';
-import { componentTopBar } from '../../../styleD/build/typescript/component/topBar.js';
-import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
-
+import { convertTypographyToEmotionStringStyle } from "../../../styleD/utils/semantic/typography.js";
+import { componentTopBar } from "../../../styleD/build/typescript/component/topBar.js";
+import { css } from "@emotion/react";
+//#region src/components/TopBar/TopBarNavigation/styles.ts
 const defaultTopBarNavigationTheme = componentTopBar.navigation;
 const topBarNavigationStyles = (theme, selected, _menuOpen) => {
-  return css`
+	return css`
 		display: ${theme.shared.display};
 		position: ${theme.shared.position};
 		align-items: ${theme.shared.alignItems};
@@ -82,17 +82,17 @@ const topBarNavigationTextStyles = (theme) => css`
 	margin-left: ${theme.text.margin.left};
 `;
 const topBarNavigationTypographyStyles = (theme, size) => {
-  return size == "md" ? css`
+	return size == "md" ? css`
 				${convertTypographyToEmotionStringStyle(theme.md.typography)}
 			` : css`
 				${convertTypographyToEmotionStringStyle(theme.sm.typography)}
 			`;
 };
 const topBarMenuIndicatorStyles = (theme) => {
-  return css`
+	return css`
 		margin-top: ${theme.menuIndicator.margin.top};
 		margin-left: ${theme.menuIndicator.margin.left};
 	`;
 };
-
+//#endregion
 export { defaultTopBarNavigationTheme, topBarMenuIndicatorStyles, topBarNavigationDividerStyles, topBarNavigationStyles, topBarNavigationTextStyles, topBarNavigationTypographyStyles };

package/dist/components/TopBar/TopBarNavigation/types.d.cts

@@ -0,0 +1,53 @@
+import { DefaultProps } from "../../../util/types.cjs";
+import { IconProps } from "../../Icon/types.cjs";
+import { TopBarNavigationTheme } from "./styles.cjs";
+import { PressEvent } from "react-aria-components";
+import { ReactNode } from "react";
+
+//#region src/components/TopBar/TopBarNavigation/types.d.ts
+interface TopBarNavigationProps extends DefaultProps<TopBarNavigationTheme> {
+  /**
+   * Text to display in navigation
+   */
+  text: string;
+  /**
+   * Size of the text and icons
+   */
+  size?: 'md' | 'sm';
+  /**
+   * Whether the component is the currently selected navigation
+   */
+  isSelected?: boolean;
+  /**
+   * Icon to display in navigation
+   */
+  icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+  /**
+   * Menu sections and items to render in the dropdown menu - only children of type MenuSection and MenuItem will be rendered.
+   * `href` and `onPress` will be ignored if this prop is supplied.
+   */
+  menuChildren?: ReactNode;
+  /**
+   * Link to navigate to
+   */
+  href?: string;
+  /**
+   * Handler for navigation on press
+   */
+  onPress?: (e: PressEvent) => void;
+  /**
+   * Whether the navigation is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Determines the alignment of the item within the top bar
+   */
+  alignment?: 'left' | 'right';
+  /**
+   * This is an internal prop used to determine if the item is within an open menu, which affects the styling of the item.
+   * It is not intended to be set by consumers of the component.
+   */
+  _menuOpen?: boolean;
+}
+//#endregion
+export { TopBarNavigationProps };

package/dist/components/TopBar/TopBarNavigation/types.d.ts

@@ -0,0 +1,53 @@
+import { DefaultProps } from "../../../util/types.js";
+import { IconProps } from "../../Icon/types.js";
+import { TopBarNavigationTheme } from "./styles.js";
+import { ReactNode } from "react";
+import { PressEvent } from "react-aria-components";
+
+//#region src/components/TopBar/TopBarNavigation/types.d.ts
+interface TopBarNavigationProps extends DefaultProps<TopBarNavigationTheme> {
+  /**
+   * Text to display in navigation
+   */
+  text: string;
+  /**
+   * Size of the text and icons
+   */
+  size?: 'md' | 'sm';
+  /**
+   * Whether the component is the currently selected navigation
+   */
+  isSelected?: boolean;
+  /**
+   * Icon to display in navigation
+   */
+  icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+  /**
+   * Menu sections and items to render in the dropdown menu - only children of type MenuSection and MenuItem will be rendered.
+   * `href` and `onPress` will be ignored if this prop is supplied.
+   */
+  menuChildren?: ReactNode;
+  /**
+   * Link to navigate to
+   */
+  href?: string;
+  /**
+   * Handler for navigation on press
+   */
+  onPress?: (e: PressEvent) => void;
+  /**
+   * Whether the navigation is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Determines the alignment of the item within the top bar
+   */
+  alignment?: 'left' | 'right';
+  /**
+   * This is an internal prop used to determine if the item is within an open menu, which affects the styling of the item.
+   * It is not intended to be set by consumers of the component.
+   */
+  _menuOpen?: boolean;
+}
+//#endregion
+export { TopBarNavigationProps };