@guardian/stand 0.0.39 → 0.0.41

package/dist/components/TopBar/TopBar.js

@@ -1,111 +1,153 @@
-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 { Icon } from '../Icon/Icon.js';
-import { defaultTopBarTheme, topBarCollapsedNavMenuButtonStyles, topBarCollapsedNavMenuPopoverStyles, topBarContainerStyles, topBarSpacerStyles, topBarStyles } from './styles.js';
-import { TopBarItem } from './TopBarItem/TopBarItem.js';
-import { TopBarNavigation } from './TopBarNavigation/TopBarNavigation.js';
-import { TopBarToolName } from './TopBarToolName/TopBarToolName.js';
-import { AvatarLink } from '../AvatarLink/AvatarLink.js';
-import { AvatarButton } from '../AvatarButton/AvatarButton.js';
-
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { Avatar } from "../Avatar/Avatar.js";
+import { AvatarButton } from "../AvatarButton/AvatarButton.js";
+import { AvatarLink } from "../AvatarLink/AvatarLink.js";
+import { TopBarItem } from "./TopBarItem/TopBarItem.js";
+import { TopBarToolName } from "./TopBarToolName/TopBarToolName.js";
+import { TopBarNavigation } from "./TopBarNavigation/TopBarNavigation.js";
+import { useResize } from "../../util/useResize.js";
+import { defaultTopBarTheme, topBarCollapsedNavMenuButtonStyles, topBarCollapsedNavMenuPopoverStyles, topBarContainerStyles, topBarSpacerStyles, topBarStyles } from "./styles.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Button, DialogTrigger, Popover } from "react-aria-components";
+//#region src/components/TopBar/TopBar.tsx
 function TopBarSide({ children, alignment, theme }) {
-  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}`,
-        theme: theme?.item,
-        alignment
-      }));
-    }
-    if (child.type === TopBarNavigation) {
-      items.push(React.cloneElement(child, {
-        key: `${child.key}-${i}`,
-        theme: theme?.navigation,
-        alignment
-      }));
-    }
-  });
-  return jsx(Fragment, { children: items });
+	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}`,
+			theme: theme?.item,
+			alignment
+		}));
+		if (child.type === TopBarNavigation) items.push(React.cloneElement(child, {
+			key: `${child.key}-${i}`,
+			theme: theme?.navigation,
+			alignment
+		}));
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: items });
 }
 function TopBarContainerRight({ children, theme }) {
-  return jsx(TopBarSide, { alignment: "right", theme, children });
+	return /* @__PURE__ */ jsx(TopBarSide, {
+		alignment: "right",
+		theme,
+		children
+	});
 }
 function TopBarContainerLeft({ children, theme }) {
-  return jsx(TopBarSide, { alignment: "left", theme, children });
+	return /* @__PURE__ */ jsx(TopBarSide, {
+		alignment: "left",
+		theme,
+		children
+	});
 }
 function TopBar({ children, collapseBelow = {
-  toolName: "lg",
-  containerLeft: "lg"
+	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;
-  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, collapseBelow: collapseBelow.toolName }));
-    }
-    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) {
-      leftSide ?? (leftSide = React.cloneElement(child, { theme: mergedTheme }));
-    }
-    if (child.type === TopBarContainerRight) {
-      rightSide ?? (rightSide = React.cloneElement(child, { theme: mergedTheme }));
-    }
-  });
-  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, { fill: mergedTheme.collapsedNavMenu.button.color, size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, 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 })] });
+	const [menuOpen, setMenuOpen] = React.useState(false);
+	const buttonRef = React.useRef(null);
+	const mergedTheme = mergeDeep(defaultTopBarTheme, theme);
+	let leftSide;
+	let rightSide;
+	let toolName;
+	let avatar;
+	React.Children.forEach(children, (child) => {
+		if (!React.isValidElement(child)) return;
+		/**
+		* Accepts a tool name that will always be rendered on the left hand side
+		*/
+		if (child.type === TopBarToolName) toolName ??= React.cloneElement(child, {
+			theme: mergedTheme.toolName,
+			collapseBelow: collapseBelow.toolName
+		});
+		/**
+		* Accepts an avatar that will always be rendered on the right hand side, within an item for styling
+		*/
+		if (child.type === Avatar || child.type === AvatarLink || child.type === AvatarButton) avatar ??= /* @__PURE__ */ jsx(TopBarItem, {
+			theme: mergedTheme.item,
+			alignment: "right",
+			children: child
+		});
+		/**
+		* Other items must be defined as part of the LHS or RHS
+		*/
+		if (child.type === TopBarContainerLeft) leftSide ??= React.cloneElement(child, { theme: mergedTheme });
+		if (child.type === TopBarContainerRight) rightSide ??= React.cloneElement(child, { theme: mergedTheme });
+	});
+	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 /* @__PURE__ */ jsxs("div", {
+		css: [topBarStyles(mergedTheme), cssOverrides],
+		className,
+		...props,
+		children: [
+			leftSideMenuItems.length > 0 && /* @__PURE__ */ jsx("div", {
+				css: topBarContainerStyles(mergedTheme, { showUntil: collapseBelow.containerLeft }),
+				children: /* @__PURE__ */ jsxs(DialogTrigger, {
+					isOpen: menuOpen,
+					onOpenChange: (isOpen) => {
+						setMenuOpen(isOpen);
+					},
+					children: [/* @__PURE__ */ jsx(Button, {
+						"aria-label": "Navigation Menu",
+						ref: buttonRef,
+						css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen),
+						children: /* @__PURE__ */ jsx(TopBarItem, {
+							alignment: "left",
+							size: "sm",
+							theme: mergedTheme.item,
+							"aria-label": "Navigation Menu",
+							children: /* @__PURE__ */ jsx(Icon, {
+								fill: mergedTheme.collapsedNavMenu.button.color,
+								size: "lg",
+								children: menuOpen ? "close" : "menu"
+							})
+						})
+					}), /* @__PURE__ */ jsx(Popover, {
+						css: topBarCollapsedNavMenuPopoverStyles(mergedTheme),
+						offset: mergedTheme.collapsedNavMenu.popover.offset,
+						containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding,
+						shouldFlip: false,
+						children: leftSideMenuItems
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				css: topBarContainerStyles(mergedTheme),
+				children: toolName
+			}),
+			/* @__PURE__ */ jsx("div", {
+				css: topBarContainerStyles(mergedTheme, { collapseBelow: collapseBelow.containerLeft }),
+				children: leftSide
+			}),
+			/* @__PURE__ */ jsx("div", {
+				css: [topBarSpacerStyles(mergedTheme), topBarContainerStyles(mergedTheme)],
+				children: rightSide
+			}),
+			/* @__PURE__ */ jsx("div", {
+				css: topBarContainerStyles(mergedTheme),
+				children: avatar
+			})
+		]
+	});
 }
-
+//#endregion
 export { TopBar, TopBarContainerLeft, TopBarContainerRight };

package/dist/components/TopBar/TopBarItem/TopBarItem.cjs

@@ -1,32 +1,15 @@
-'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",
-  _menuOpen,
-  ...props
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTopBarItemTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      css: [
-        styles.topBarItemStyles(mergedTheme, alignment, { size }, _menuOpen),
-        cssOverrides
-      ],
-      className,
-      ...props,
-      children
-    }
-  );
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../../util/mergeDeep.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/TopBar/TopBarItem/TopBarItem.tsx
+function TopBarItem({ children, alignment = "left", theme = {}, cssOverrides, className, size = "md", _menuOpen, ...props }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: [require_styles.topBarItemStyles(require_mergeDeep.mergeDeep(require_styles.defaultTopBarItemTheme, theme), alignment, { size }, _menuOpen), cssOverrides],
+		className,
+		...props,
+		children
+	});
 }
-
+//#endregion
 exports.TopBarItem = TopBarItem;

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

@@ -0,0 +1,15 @@
+import { TopBarItemProps } from "./types.cjs";
+
+//#region src/components/TopBar/TopBarItem/TopBarItem.d.ts
+declare function TopBarItem({
+  children,
+  alignment,
+  theme,
+  cssOverrides,
+  className,
+  size,
+  _menuOpen,
+  ...props
+}: TopBarItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TopBarItem };

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

@@ -0,0 +1,15 @@
+import { TopBarItemProps } from "./types.js";
+
+//#region src/components/TopBar/TopBarItem/TopBarItem.d.ts
+declare function TopBarItem({
+  children,
+  alignment,
+  theme,
+  cssOverrides,
+  className,
+  size,
+  _menuOpen,
+  ...props
+}: TopBarItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TopBarItem };

package/dist/components/TopBar/TopBarItem/TopBarItem.js

@@ -1,13 +1,14 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { mergeDeep } from '../../../util/mergeDeep.js';
-import { defaultTopBarItemTheme, topBarItemStyles } from './styles.js';
-
+import { mergeDeep } from "../../../util/mergeDeep.js";
+import { defaultTopBarItemTheme, topBarItemStyles } from "./styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+//#region src/components/TopBar/TopBarItem/TopBarItem.tsx
 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 }, _menuOpen),
-    cssOverrides
-  ], className, ...props, children });
+	return /* @__PURE__ */ jsx("div", {
+		css: [topBarItemStyles(mergeDeep(defaultTopBarItemTheme, theme), alignment, { size }, _menuOpen), cssOverrides],
+		className,
+		...props,
+		children
+	});
 }
-
+//#endregion
 export { TopBarItem };

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

@@ -1,27 +1,26 @@
-'use strict';
-
-var react = require('@emotion/react');
-var topBar = require('../../../styleD/build/typescript/component/topBar.cjs');
-
-const defaultTopBarItemTheme = topBar.componentTopBar.item;
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_topBar = require("../../../styleD/build/typescript/component/topBar.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/TopBar/TopBarItem/styles.ts
+const defaultTopBarItemTheme = require_topBar.componentTopBar.item;
 const topBarItemStyles = (theme, alignment, { size }, _menuOpen) => {
-  return react.css`
+	return _emotion_react.css`
 		display: ${theme.display};
 		align-items: ${theme.alignItems};
 		height: ${theme.height};
 		padding: ${theme[size].padding.top} ${theme[size].padding.right}
 			${theme[size].padding.bottom} ${theme[size].padding.left};
 
-		${_menuOpen ? react.css`
+		${_menuOpen ? _emotion_react.css`
 					height: 64px;
 					justify-content: center;
 					border-bottom: ${theme.border};
-				` : react.css`
+				` : _emotion_react.css`
 					${alignment === "left" ? "border-right" : "border-left"}: ${theme.border};
 					${alignment === "right" && "margin-left: auto"};
 				`}
 	`;
 };
-
+//#endregion
 exports.defaultTopBarItemTheme = defaultTopBarItemTheme;
 exports.topBarItemStyles = topBarItemStyles;

package/dist/components/TopBar/TopBarItem/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/TopBarItem/styles.d.ts
+type TopBarItemTheme = Prettify<ComponentTopBar['item']>;
+type PartialTopBarItemTheme = Prettify<DeepPartial<TopBarItemTheme>>;
+//#endregion
+export { PartialTopBarItemTheme, TopBarItemTheme };

package/dist/components/TopBar/TopBarItem/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/TopBarItem/styles.d.ts
+type TopBarItemTheme = Prettify<ComponentTopBar['item']>;
+type PartialTopBarItemTheme = Prettify<DeepPartial<TopBarItemTheme>>;
+//#endregion
+export { PartialTopBarItemTheme, TopBarItemTheme };

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

@@ -1,9 +1,9 @@
-import { css } from '@emotion/react';
-import { componentTopBar } from '../../../styleD/build/typescript/component/topBar.js';
-
+import { componentTopBar } from "../../../styleD/build/typescript/component/topBar.js";
+import { css } from "@emotion/react";
+//#region src/components/TopBar/TopBarItem/styles.ts
 const defaultTopBarItemTheme = componentTopBar.item;
 const topBarItemStyles = (theme, alignment, { size }, _menuOpen) => {
-  return css`
+	return css`
 		display: ${theme.display};
 		align-items: ${theme.alignItems};
 		height: ${theme.height};
@@ -20,5 +20,5 @@ const topBarItemStyles = (theme, alignment, { size }, _menuOpen) => {
 				`}
 	`;
 };
-
+//#endregion
 export { defaultTopBarItemTheme, topBarItemStyles };

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { DefaultProps } from "../../../util/types.cjs";
+import { TopBarItemTheme } from "./styles.cjs";
+
+//#region src/components/TopBar/TopBarItem/types.d.ts
+interface TopBarItemProps extends DefaultProps<TopBarItemTheme>, React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  /**
+   * Determines the alignment of the item within the top bar
+   */
+  alignment?: 'left' | 'right';
+  /**
+   * Determines how much width the item takes up in the top bar, defaults to `'md'`
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * 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 { TopBarItemProps };

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { DefaultProps } from "../../../util/types.js";
+import { TopBarItemTheme } from "./styles.js";
+
+//#region src/components/TopBar/TopBarItem/types.d.ts
+interface TopBarItemProps extends DefaultProps<TopBarItemTheme>, React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  /**
+   * Determines the alignment of the item within the top bar
+   */
+  alignment?: 'left' | 'right';
+  /**
+   * Determines how much width the item takes up in the top bar, defaults to `'md'`
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * 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 { TopBarItemProps };