@guardian/stand 0.0.60 → 0.0.62

package/dist/components/TextInput/styles.cjs

@@ -36,8 +36,8 @@ const textInputStyles = (theme, { size, isInvalid }) => {
 		}
 
 		${isInvalid && _emotion_react.css`
-			border: ${theme.shared.error.border};
-		`}
+				border: ${theme.shared.error.border};
+			`}
 	`;
 };
 //#endregion

package/dist/components/TextInput/styles.d.cts

@@ -1,7 +1,7 @@
 import { Prettify } from "../../util/types.cjs";
 import { ComponentTextInput } from "../../styleD/build/typescript/component/textInput.cjs";
+import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/TextInput/styles.d.ts
 type TextInputTheme = Prettify<ComponentTextInput>;
 //#endregion

package/dist/components/TextInput/styles.d.ts

@@ -1,7 +1,7 @@
 import { Prettify } from "../../util/types.js";
 import { ComponentTextInput } from "../../styleD/build/typescript/component/textInput.js";
+import "./types.js";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/TextInput/styles.d.ts
 type TextInputTheme = Prettify<ComponentTextInput>;
 //#endregion

package/dist/components/TextInput/styles.js

@@ -36,8 +36,8 @@ const textInputStyles = (theme, { size, isInvalid }) => {
 		}
 
 		${isInvalid && css`
-			border: ${theme.shared.error.border};
-		`}
+				border: ${theme.shared.error.border};
+			`}
 	`;
 };
 //#endregion

package/dist/components/TextInput/types.d.cts

@@ -1,7 +1,6 @@
 import { FormInputContainerDefaultProps } from "../Form/types.cjs";
 import { TextInputTheme } from "./styles.cjs";
 import { TextFieldProps } from "react-aria-components";
-
 //#region src/components/TextInput/types.d.ts
 interface TextInputProps extends FormInputContainerDefaultProps<TextFieldProps, TextInputTheme> {
   /** Temporary text that occupies the text input when it is empty */

package/dist/components/TextInput/types.d.ts

@@ -1,7 +1,6 @@
 import { FormInputContainerDefaultProps } from "../Form/types.js";
 import { TextInputTheme } from "./styles.js";
 import { TextFieldProps } from "react-aria-components";
-
 //#region src/components/TextInput/types.d.ts
 interface TextInputProps extends FormInputContainerDefaultProps<TextFieldProps, TextInputTheme> {
   /** Temporary text that occupies the text input when it is empty */

package/dist/components/Tooltip/Tooltip.cjs

@@ -0,0 +1,42 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_Typography = require("../Typography/Typography.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/Tooltip/Tooltip.tsx
+const Tooltip = ({ children, placement = "end", theme = {}, cssOverrides, className, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTooltipTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.TooltipTrigger, {
+		delay: 0,
+		closeDelay: 0,
+		...props,
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+			"aria-label": "Information",
+			css: require_styles.tooltipTriggerStyles(mergedTheme),
+			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+				size: "xs",
+				symbol: "question_mark"
+			})
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Tooltip, {
+			css: [require_styles.tooltipStyles(mergedTheme), cssOverrides],
+			placement,
+			className,
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TooltipArrow, { theme: mergedTheme }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "metaMd",
+				theme: { color: mergedTheme.shared.color },
+				children
+			})]
+		})]
+	});
+};
+const TooltipArrow = ({ theme }) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.OverlayArrow, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "9",
+	height: "14",
+	viewBox: "0 0 9 14",
+	css: require_styles.tooltipArrowStyles(theme),
+	children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M0 6.928 9 0v13.856z" })
+}) });
+//#endregion
+exports.Tooltip = Tooltip;

package/dist/components/Tooltip/Tooltip.d.cts

@@ -0,0 +1,5 @@
+import { TooltipProps } from "./types.cjs";
+//#region src/components/Tooltip/Tooltip.d.ts
+declare const Tooltip: ({ children, placement, theme, cssOverrides, className, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Tooltip };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import { TooltipProps } from "./types.js";
+//#region src/components/Tooltip/Tooltip.d.ts
+declare const Tooltip: ({ children, placement, theme, cssOverrides, className, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Tooltip };

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,42 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { Typography } from "../Typography/Typography.js";
+import { defaultTooltipTheme, tooltipArrowStyles, tooltipStyles, tooltipTriggerStyles } from "./styles.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Button, OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
+//#region src/components/Tooltip/Tooltip.tsx
+const Tooltip$1 = ({ children, placement = "end", theme = {}, cssOverrides, className, ...props }) => {
+	const mergedTheme = mergeDeep(defaultTooltipTheme, theme);
+	return /* @__PURE__ */ jsxs(TooltipTrigger, {
+		delay: 0,
+		closeDelay: 0,
+		...props,
+		children: [/* @__PURE__ */ jsx(Button, {
+			"aria-label": "Information",
+			css: tooltipTriggerStyles(mergedTheme),
+			children: /* @__PURE__ */ jsx(Icon, {
+				size: "xs",
+				symbol: "question_mark"
+			})
+		}), /* @__PURE__ */ jsxs(Tooltip, {
+			css: [tooltipStyles(mergedTheme), cssOverrides],
+			placement,
+			className,
+			children: [/* @__PURE__ */ jsx(TooltipArrow, { theme: mergedTheme }), /* @__PURE__ */ jsx(Typography, {
+				variant: "metaMd",
+				theme: { color: mergedTheme.shared.color },
+				children
+			})]
+		})]
+	});
+};
+const TooltipArrow = ({ theme }) => /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "9",
+	height: "14",
+	viewBox: "0 0 9 14",
+	css: tooltipArrowStyles(theme),
+	children: /* @__PURE__ */ jsx("path", { d: "M0 6.928 9 0v13.856z" })
+}) });
+//#endregion
+export { Tooltip$1 as Tooltip };

package/dist/components/Tooltip/styles.cjs

@@ -0,0 +1,58 @@
+const require_tooltip = require("../../styleD/build/typescript/component/tooltip.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Tooltip/styles.ts
+const defaultTooltipTheme = require_tooltip.componentTooltip;
+const tooltipTriggerStyles = (theme) => _emotion_react.css`
+	display: inline-flex;
+	appearance: none;
+	border: none;
+	padding: 0;
+	width: ${theme.trigger.size};
+	height: ${theme.trigger.size};
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	color: ${theme.shared.color};
+	background-color: ${theme.shared.backgroundColor};
+`;
+const tooltipStyles = (theme) => _emotion_react.css`
+	padding: ${theme.tooltip.padding};
+	max-width: ${theme.tooltip.maxWidth};
+	background-color: ${theme.shared.backgroundColor};
+	border-radius: ${theme.tooltip.borderRadius};
+	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
+
+	&[data-placement='top'] {
+		margin-bottom: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(-90deg) translateX(3px);
+		}
+	}
+
+	&[data-placement='bottom'] {
+		margin-top: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(90deg) translateX(3px);
+		}
+	}
+
+	&[data-placement='right'] {
+		margin-left: ${theme.tooltip.offset};
+	}
+
+	&[data-placement='left'] {
+		margin-right: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(180deg);
+		}
+	}
+`;
+const tooltipArrowStyles = (theme) => _emotion_react.css`
+	display: block;
+	fill: ${theme.shared.backgroundColor};
+`;
+//#endregion
+exports.defaultTooltipTheme = defaultTooltipTheme;
+exports.tooltipArrowStyles = tooltipArrowStyles;
+exports.tooltipStyles = tooltipStyles;
+exports.tooltipTriggerStyles = tooltipTriggerStyles;

package/dist/components/Tooltip/styles.d.cts

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentTooltip } from "../../styleD/build/typescript/component/tooltip.cjs";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Tooltip/styles.d.ts
+type TooltipTheme = Prettify<ComponentTooltip>;
+type PartialTooltipTheme = Prettify<DeepPartial<TooltipTheme>>;
+//#endregion
+export { PartialTooltipTheme, TooltipTheme };

package/dist/components/Tooltip/styles.d.ts

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentTooltip } from "../../styleD/build/typescript/component/tooltip.js";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Tooltip/styles.d.ts
+type TooltipTheme = Prettify<ComponentTooltip>;
+type PartialTooltipTheme = Prettify<DeepPartial<TooltipTheme>>;
+//#endregion
+export { PartialTooltipTheme, TooltipTheme };

package/dist/components/Tooltip/styles.js

@@ -0,0 +1,55 @@
+import { componentTooltip } from "../../styleD/build/typescript/component/tooltip.js";
+import { css } from "@emotion/react";
+//#region src/components/Tooltip/styles.ts
+const defaultTooltipTheme = componentTooltip;
+const tooltipTriggerStyles = (theme) => css`
+	display: inline-flex;
+	appearance: none;
+	border: none;
+	padding: 0;
+	width: ${theme.trigger.size};
+	height: ${theme.trigger.size};
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	color: ${theme.shared.color};
+	background-color: ${theme.shared.backgroundColor};
+`;
+const tooltipStyles = (theme) => css`
+	padding: ${theme.tooltip.padding};
+	max-width: ${theme.tooltip.maxWidth};
+	background-color: ${theme.shared.backgroundColor};
+	border-radius: ${theme.tooltip.borderRadius};
+	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
+
+	&[data-placement='top'] {
+		margin-bottom: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(-90deg) translateX(3px);
+		}
+	}
+
+	&[data-placement='bottom'] {
+		margin-top: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(90deg) translateX(3px);
+		}
+	}
+
+	&[data-placement='right'] {
+		margin-left: ${theme.tooltip.offset};
+	}
+
+	&[data-placement='left'] {
+		margin-right: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(180deg);
+		}
+	}
+`;
+const tooltipArrowStyles = (theme) => css`
+	display: block;
+	fill: ${theme.shared.backgroundColor};
+`;
+//#endregion
+export { defaultTooltipTheme, tooltipArrowStyles, tooltipStyles, tooltipTriggerStyles };

package/dist/components/Tooltip/types.d.cts

@@ -0,0 +1,8 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { TooltipTheme } from "./styles.cjs";
+//#region src/components/Tooltip/types.d.ts
+type TooltipProps = DefaultPropsWithChildren<TooltipTheme> & {
+  placement?: 'top' | 'bottom' | 'start' | 'end';
+};
+//#endregion
+export { TooltipProps };

package/dist/components/Tooltip/types.d.ts

@@ -0,0 +1,8 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { TooltipTheme } from "./styles.js";
+//#region src/components/Tooltip/types.d.ts
+type TooltipProps = DefaultPropsWithChildren<TooltipTheme> & {
+  placement?: 'top' | 'bottom' | 'start' | 'end';
+};
+//#endregion
+export { TooltipProps };

package/dist/components/TopBar/TopBar.cjs

@@ -10,7 +10,7 @@ const require_TopBarNavigation = require("./TopBarNavigation/TopBarNavigation.cj
 const require_useResize = require("../../util/useResize.cjs");
 const require_styles = require("./styles.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
 //#region src/components/TopBar/TopBar.tsx

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

@@ -1,28 +1,14 @@
 import { TopBarTheme } from "./styles.cjs";
 import { TopBarProps } from "./types.cjs";
-
 //#region src/components/TopBar/TopBar.d.ts
-declare function TopBarContainerRight({
-  children,
-  theme
-}: {
+declare function TopBarContainerRight({ children, theme }: {
   children: TopBarProps['children'];
   theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TopBarContainerLeft({
-  children,
-  theme
-}: {
+declare function TopBarContainerLeft({ children, theme }: {
   children: TopBarProps['children'];
   theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TopBar({
-  children,
-  collapseBelow,
-  theme,
-  cssOverrides,
-  className,
-  ...props
-}: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TopBar({ children, collapseBelow, theme, cssOverrides, className, ...props }: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { TopBar, TopBarContainerLeft, TopBarContainerRight };

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

@@ -1,28 +1,14 @@
 import { TopBarTheme } from "./styles.js";
 import { TopBarProps } from "./types.js";
-
 //#region src/components/TopBar/TopBar.d.ts
-declare function TopBarContainerRight({
-  children,
-  theme
-}: {
+declare function TopBarContainerRight({ children, theme }: {
   children: TopBarProps['children'];
   theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TopBarContainerLeft({
-  children,
-  theme
-}: {
+declare function TopBarContainerLeft({ children, theme }: {
   children: TopBarProps['children'];
   theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TopBar({
-  children,
-  collapseBelow,
-  theme,
-  cssOverrides,
-  className,
-  ...props
-}: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TopBar({ children, collapseBelow, theme, cssOverrides, className, ...props }: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { TopBar, TopBarContainerLeft, TopBarContainerRight };

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

@@ -1,15 +1,5 @@
 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;
+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

@@ -1,15 +1,5 @@
 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;
+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/styles.cjs

@@ -11,13 +11,13 @@ const topBarItemStyles = (theme, alignment, { size }, _menuOpen) => {
 			${theme[size].padding.bottom} ${theme[size].padding.left};
 
 		${_menuOpen ? _emotion_react.css`
-					height: 64px;
-					justify-content: center;
-					border-bottom: ${theme.border};
-				` : _emotion_react.css`
-					${alignment === "left" ? "border-right" : "border-left"}: ${theme.border};
-					${alignment === "right" && "margin-left: auto"};
-				`}
+						height: 64px;
+						justify-content: center;
+						border-bottom: ${theme.border};
+					` : _emotion_react.css`
+						${alignment === "left" ? "border-right" : "border-left"}: ${theme.border};
+						${alignment === "right" && "margin-left: auto"};
+					`}
 	`;
 };
 //#endregion

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

@@ -1,7 +1,7 @@
 import { DeepPartial, Prettify } from "../../../util/types.cjs";
 import { ComponentTopBar } from "../../../styleD/build/typescript/component/topBar.cjs";
+import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/TopBar/TopBarItem/styles.d.ts
 type TopBarItemTheme = Prettify<ComponentTopBar['item']>;
 type PartialTopBarItemTheme = Prettify<DeepPartial<TopBarItemTheme>>;

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

@@ -1,7 +1,7 @@
 import { DeepPartial, Prettify } from "../../../util/types.js";
 import { ComponentTopBar } from "../../../styleD/build/typescript/component/topBar.js";
+import "./types.js";
 import { SerializedStyles } from "@emotion/react";
-
 //#region src/components/TopBar/TopBarItem/styles.d.ts
 type TopBarItemTheme = Prettify<ComponentTopBar['item']>;
 type PartialTopBarItemTheme = Prettify<DeepPartial<TopBarItemTheme>>;

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

@@ -11,13 +11,13 @@ const topBarItemStyles = (theme, alignment, { size }, _menuOpen) => {
 			${theme[size].padding.bottom} ${theme[size].padding.left};
 
 		${_menuOpen ? css`
-					height: 64px;
-					justify-content: center;
-					border-bottom: ${theme.border};
-				` : css`
-					${alignment === "left" ? "border-right" : "border-left"}: ${theme.border};
-					${alignment === "right" && "margin-left: auto"};
-				`}
+						height: 64px;
+						justify-content: center;
+						border-bottom: ${theme.border};
+					` : css`
+						${alignment === "left" ? "border-right" : "border-left"}: ${theme.border};
+						${alignment === "right" && "margin-left: auto"};
+					`}
 	`;
 };
 //#endregion

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

@@ -1,7 +1,6 @@
 /// <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;

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

@@ -1,7 +1,6 @@
 /// <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;

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

@@ -1,21 +1,5 @@
 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;
+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

@@ -1,21 +1,5 @@
 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;
+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/styles.cjs

@@ -30,53 +30,53 @@ const topBarNavigationStyles = (theme, selected, _menuOpen) => {
 		}
 
 		${_menuOpen ? _emotion_react.css`
-					border-right: ${theme.shared.borderTop};
-					border-left: ${theme.unselected.borderBottom};
-					width: 100%;
+						border-right: ${theme.shared.borderTop};
+						border-left: ${theme.unselected.borderBottom};
+						width: 100%;
 
-					&[data-hovered],
-					&:hover {
-						border-left: ${theme.selected.borderBottom};
-					}
+						&[data-hovered],
+						&:hover {
+							border-left: ${theme.selected.borderBottom};
+						}
 
-					&[data-focus-visible],
-					&:focus-visible {
-						border-left: ${theme.selected.borderBottom};
-					}
+						&[data-focus-visible],
+						&:focus-visible {
+							border-left: ${theme.selected.borderBottom};
+						}
 
-					${selected && `
+						${selected && `
 						border-left: ${theme.selected.borderBottom};
 						background-color: ${theme.shared._menuOpen.selected.backgroundColor};
 					`}
-				` : _emotion_react.css`
-					border-top: ${theme.shared.borderTop};
-					border-bottom: ${theme.unselected.borderBottom};
+					` : _emotion_react.css`
+						border-top: ${theme.shared.borderTop};
+						border-bottom: ${theme.unselected.borderBottom};
 
-					&[data-hovered],
-					&:hover {
-						border-bottom: ${theme.selected.borderBottom};
-					}
+						&[data-hovered],
+						&:hover {
+							border-bottom: ${theme.selected.borderBottom};
+						}
 
-					&[data-focus-visible],
-					&:focus-visible {
-						border-bottom: ${theme.selected.borderBottom};
-					}
+						&[data-focus-visible],
+						&:focus-visible {
+							border-bottom: ${theme.selected.borderBottom};
+						}
 
-					${selected && `
+						${selected && `
 						border-bottom: ${theme.selected.borderBottom};
 					`}
-				`}
+					`}
 
 		text-decoration: ${theme.shared.textDecoration};
 	`;
 };
 const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => _emotion_react.css`
 	${_menuOpen ? _emotion_react.css`
-				height: ${theme.shared._menuOpen.height};
-				border-bottom: ${theme.shared.divider};
-			` : _emotion_react.css`
-				${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
-			`}
+					height: ${theme.shared._menuOpen.height};
+					border-bottom: ${theme.shared.divider};
+				` : _emotion_react.css`
+					${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
+				`}
 `;
 const topBarNavigationTextStyles = (theme, { hasIcon }) => _emotion_react.css`
 	${hasIcon && `margin-left: ${theme.text.margin.left};`}

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

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