@guardian/stand 0.0.40 → 0.0.41

package/dist/components/TopBar/TopBarToolName/TopBarToolName.cjs

@@ -1,92 +1,68 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var reactAriaComponents = require('react-aria-components');
-var mergeDeep = require('../../../util/mergeDeep.cjs');
-var Favicon = require('../../Favicon/Favicon.cjs');
-var Icon = require('../../Icon/Icon.cjs');
-var TopBarItem = require('../TopBarItem/TopBarItem.cjs');
-var styles = require('./styles.cjs');
-
-function ToolName({
-  name,
-  favicon,
-  subsection,
-  subsectionIcon,
-  collapseBelow = "lg",
-  theme = {},
-  cssOverrides
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "left", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Favicon.Favicon, { ...favicon }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameTypography(mergedTheme, { collapseBelow })], children: name }),
-    subsection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.dividerStyles(mergedTheme, { collapseBelow }), children: "\xA0" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.subsectionStyles(mergedTheme, { collapseBelow }), children: [
-        subsectionIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "sm", children: subsectionIcon }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.subsectionTypography(mergedTheme), children: subsection })
-      ] })
-    ] })
-  ] }) });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../../util/mergeDeep.cjs");
+const require_Icon = require("../../Icon/Icon.cjs");
+const require_Favicon = require("../../Favicon/Favicon.cjs");
+const require_TopBarItem = require("../TopBarItem/TopBarItem.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/TopBarToolName/TopBarToolName.tsx
+function ToolName({ name, favicon, subsection, subsectionIcon, collapseBelow = "lg", theme = {}, cssOverrides }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultToolNameTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TopBarItem.TopBarItem, {
+		alignment: "left",
+		size: "sm",
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: [require_styles.toolNameStyles(mergedTheme), cssOverrides],
+			children: [
+				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Favicon.Favicon, { ...favicon }),
+				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+					css: [require_styles.toolNameTypography(mergedTheme, { collapseBelow })],
+					children: name
+				}),
+				subsection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+					css: require_styles.dividerStyles(mergedTheme, { collapseBelow }),
+					children: "\xA0"
+				}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+					css: require_styles.subsectionStyles(mergedTheme, { collapseBelow }),
+					children: [subsectionIcon && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+						size: "sm",
+						children: subsectionIcon
+					}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+						css: require_styles.subsectionTypography(mergedTheme),
+						children: subsection
+					})]
+				})] })
+			]
+		})
+	});
 }
-const TopBarToolName = ({
-  collapseBelow = "lg",
-  theme = {},
-  ...props
-}) => {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
-  if (("href" in props || "onPress" in props) && ("hoverText" in props || "collapsedHoverText" in props)) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      reactAriaComponents.Link,
-      {
-        css: styles.toolNameLinkStyles(mergedTheme),
-        href: props.href,
-        onPress: props.onPress,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              css: [
-                styles.toolNameHoverLinkStyles(mergedTheme, {
-                  collapseBelow
-                })
-              ],
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    css: styles.toolNameHoverLinkTextExpandedStyles({
-                      collapseBelow
-                    }),
-                    children: props.hoverText ?? props.collapsedHoverText
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    css: styles.toolNameHoverLinkTextCollapsedStyles({
-                      collapseBelow
-                    }),
-                    children: props.collapsedHoverText ?? props.hoverText
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ToolName,
-            {
-              theme: mergedTheme,
-              collapseBelow,
-              ...props
-            }
-          )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(ToolName, { theme: mergedTheme, collapseBelow, ...props });
+const TopBarToolName = ({ collapseBelow = "lg", theme = {}, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultToolNameTheme, theme);
+	if (("href" in props || "onPress" in props) && ("hoverText" in props || "collapsedHoverText" in props)) return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Link, {
+		css: require_styles.toolNameLinkStyles(mergedTheme),
+		href: props.href,
+		onPress: props.onPress,
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: [require_styles.toolNameHoverLinkStyles(mergedTheme, { collapseBelow })],
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+				css: require_styles.toolNameHoverLinkTextExpandedStyles({ collapseBelow }),
+				children: props.hoverText ?? props.collapsedHoverText
+			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+				css: require_styles.toolNameHoverLinkTextCollapsedStyles({ collapseBelow }),
+				children: props.collapsedHoverText ?? props.hoverText
+			})]
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ToolName, {
+			theme: mergedTheme,
+			collapseBelow,
+			...props
+		})]
+	});
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ToolName, {
+		theme: mergedTheme,
+		collapseBelow,
+		...props
+	});
 };
-
+//#endregion
 exports.TopBarToolName = TopBarToolName;

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

@@ -0,0 +1,10 @@
+import { TopBarToolNameProps } from "./types.cjs";
+
+//#region src/components/TopBar/TopBarToolName/TopBarToolName.d.ts
+declare const TopBarToolName: ({
+  collapseBelow,
+  theme,
+  ...props
+}: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TopBarToolName };

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

@@ -0,0 +1,10 @@
+import { TopBarToolNameProps } from "./types.js";
+
+//#region src/components/TopBar/TopBarToolName/TopBarToolName.d.ts
+declare const TopBarToolName: ({
+  collapseBelow,
+  theme,
+  ...props
+}: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TopBarToolName };

package/dist/components/TopBar/TopBarToolName/TopBarToolName.js

@@ -1,29 +1,67 @@
-import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { Link } from 'react-aria-components';
-import { mergeDeep } from '../../../util/mergeDeep.js';
-import { Favicon } from '../../Favicon/Favicon.js';
-import { Icon } from '../../Icon/Icon.js';
-import { TopBarItem } from '../TopBarItem/TopBarItem.js';
-import { defaultToolNameTheme, toolNameHoverLinkTextExpandedStyles, toolNameHoverLinkTextCollapsedStyles, toolNameHoverLinkStyles, toolNameLinkStyles, toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles } from './styles.js';
-
+import { mergeDeep } from "../../../util/mergeDeep.js";
+import { Icon } from "../../Icon/Icon.js";
+import { Favicon } from "../../Favicon/Favicon.js";
+import { TopBarItem } from "../TopBarItem/TopBarItem.js";
+import { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameHoverLinkStyles, toolNameHoverLinkTextCollapsedStyles, toolNameHoverLinkTextExpandedStyles, toolNameLinkStyles, toolNameStyles, toolNameTypography } from "./styles.js";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Link } from "react-aria-components";
+//#region src/components/TopBar/TopBarToolName/TopBarToolName.tsx
 function ToolName({ name, favicon, subsection, subsectionIcon, collapseBelow = "lg", theme = {}, cssOverrides }) {
-  const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
-  return jsx(TopBarItem, { alignment: "left", size: "sm", children: jsxs("div", { css: [toolNameStyles(mergedTheme), cssOverrides], children: [jsx(Favicon, { ...favicon }), jsx("div", { css: [toolNameTypography(mergedTheme, { collapseBelow })], children: name }), subsection && jsxs(Fragment, { children: [jsx("div", { css: dividerStyles(mergedTheme, { collapseBelow }), children: "\xA0" }), jsxs("div", { css: subsectionStyles(mergedTheme, { collapseBelow }), children: [subsectionIcon && jsx(Icon, { size: "sm", children: subsectionIcon }), jsx("div", { css: subsectionTypography(mergedTheme), children: subsection })] })] })] }) });
+	const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
+	return /* @__PURE__ */ jsx(TopBarItem, {
+		alignment: "left",
+		size: "sm",
+		children: /* @__PURE__ */ jsxs("div", {
+			css: [toolNameStyles(mergedTheme), cssOverrides],
+			children: [
+				/* @__PURE__ */ jsx(Favicon, { ...favicon }),
+				/* @__PURE__ */ jsx("div", {
+					css: [toolNameTypography(mergedTheme, { collapseBelow })],
+					children: name
+				}),
+				subsection && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					css: dividerStyles(mergedTheme, { collapseBelow }),
+					children: "\xA0"
+				}), /* @__PURE__ */ jsxs("div", {
+					css: subsectionStyles(mergedTheme, { collapseBelow }),
+					children: [subsectionIcon && /* @__PURE__ */ jsx(Icon, {
+						size: "sm",
+						children: subsectionIcon
+					}), /* @__PURE__ */ jsx("div", {
+						css: subsectionTypography(mergedTheme),
+						children: subsection
+					})]
+				})] })
+			]
+		})
+	});
 }
 const TopBarToolName = ({ collapseBelow = "lg", theme = {}, ...props }) => {
-  const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
-  if (("href" in props || "onPress" in props) && ("hoverText" in props || "collapsedHoverText" in props)) {
-    return jsxs(Link, { css: toolNameLinkStyles(mergedTheme), href: props.href, onPress: props.onPress, children: [jsxs("div", { css: [
-      toolNameHoverLinkStyles(mergedTheme, {
-        collapseBelow
-      })
-    ], children: [jsx("span", { css: toolNameHoverLinkTextExpandedStyles({
-      collapseBelow
-    }), children: props.hoverText ?? props.collapsedHoverText }), jsx("span", { css: toolNameHoverLinkTextCollapsedStyles({
-      collapseBelow
-    }), children: props.collapsedHoverText ?? props.hoverText })] }), jsx(ToolName, { theme: mergedTheme, collapseBelow, ...props })] });
-  }
-  return jsx(ToolName, { theme: mergedTheme, collapseBelow, ...props });
+	const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
+	if (("href" in props || "onPress" in props) && ("hoverText" in props || "collapsedHoverText" in props)) return /* @__PURE__ */ jsxs(Link, {
+		css: toolNameLinkStyles(mergedTheme),
+		href: props.href,
+		onPress: props.onPress,
+		children: [/* @__PURE__ */ jsxs("div", {
+			css: [toolNameHoverLinkStyles(mergedTheme, { collapseBelow })],
+			children: [/* @__PURE__ */ jsx("span", {
+				css: toolNameHoverLinkTextExpandedStyles({ collapseBelow }),
+				children: props.hoverText ?? props.collapsedHoverText
+			}), /* @__PURE__ */ jsx("span", {
+				css: toolNameHoverLinkTextCollapsedStyles({ collapseBelow }),
+				children: props.collapsedHoverText ?? props.hoverText
+			})]
+		}), /* @__PURE__ */ jsx(ToolName, {
+			theme: mergedTheme,
+			collapseBelow,
+			...props
+		})]
+	});
+	return /* @__PURE__ */ jsx(ToolName, {
+		theme: mergedTheme,
+		collapseBelow,
+		...props
+	});
 };
-
+//#endregion
 export { TopBarToolName };

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

@@ -1,14 +1,13 @@
-'use strict';
-
-var react = require('@emotion/react');
-var topBar = require('../../../styleD/build/typescript/component/topBar.cjs');
-var mq = require('../../../styleD/utils/semantic/mq.cjs');
-var typography = require('../../../styleD/utils/semantic/typography.cjs');
-
-const defaultToolNameTheme = topBar.componentTopBar.toolName;
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_typography = require("../../../styleD/utils/semantic/typography.cjs");
+const require_mq = require("../../../styleD/utils/semantic/mq.cjs");
+const require_topBar = require("../../../styleD/build/typescript/component/topBar.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/TopBar/TopBarToolName/styles.ts
+const defaultToolNameTheme = require_topBar.componentTopBar.toolName;
 const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
-  return react.css`
-		${typography.convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
+	return _emotion_react.css`
+		${require_typography.convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
 		background-color: ${theme.hoverLink.backgroundColor};
 		color: ${theme.hoverLink.color};
 		align-items: ${theme.alignItems};
@@ -21,35 +20,31 @@ const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
 		width: ${theme.hoverLink.width};
 		height: ${theme.hoverLink.height};
 
-		${mq.until[collapseBelow]} {
+		${require_mq.until[collapseBelow]} {
 			padding-left: ${theme.hoverLink.collapsed.paddingLeft};
 			padding-right: ${theme.hoverLink.collapsed.paddingRight};
 			justify-content: ${theme.hoverLink.collapsed.justifyContent};
 		}
 	`;
 };
-const toolNameHoverLinkTextExpandedStyles = ({
-  collapseBelow
-}) => {
-  return react.css`
-		${mq.until[collapseBelow]} {
+const toolNameHoverLinkTextExpandedStyles = ({ collapseBelow }) => {
+	return _emotion_react.css`
+		${require_mq.until[collapseBelow]} {
 			display: none;
 		}
 	`;
 };
-const toolNameHoverLinkTextCollapsedStyles = ({
-  collapseBelow
-}) => {
-  return react.css`
+const toolNameHoverLinkTextCollapsedStyles = ({ collapseBelow }) => {
+	return _emotion_react.css`
 		display: none;
 
-		${mq.until[collapseBelow]} {
+		${require_mq.until[collapseBelow]} {
 			display: block;
 		}
 	`;
 };
 const toolNameLinkStyles = (theme) => {
-  return react.css`
+	return _emotion_react.css`
 		text-decoration: ${theme.link.textDecoration};
 		color: ${theme.link.color};
 		position: ${theme.link.position};
@@ -70,7 +65,7 @@ const toolNameLinkStyles = (theme) => {
 	`;
 };
 const toolNameStyles = (theme) => {
-  return react.css`
+	return _emotion_react.css`
 		display: ${theme.display};
 		align-items: ${theme.alignItems};
 		gap: ${theme.gap};
@@ -78,38 +73,38 @@ const toolNameStyles = (theme) => {
 	`;
 };
 const toolNameTypography = (theme, { collapseBelow }) => {
-  return react.css`
-		${typography.convertTypographyToEmotionStringStyle(theme.typography)}
-		${mq.until[collapseBelow]} {
+	return _emotion_react.css`
+		${require_typography.convertTypographyToEmotionStringStyle(theme.typography)}
+		${require_mq.until[collapseBelow]} {
 			display: none;
 		}
 	`;
 };
 const dividerStyles = (theme, { collapseBelow }) => {
-  return react.css`
+	return _emotion_react.css`
 		border-right: ${theme.divider.border};
 		height: ${theme.divider.height};
-		${mq.until[collapseBelow]} {
+		${require_mq.until[collapseBelow]} {
 			display: none;
 		}
 	`;
 };
 const subsectionStyles = (theme, { collapseBelow }) => {
-  return react.css`
+	return _emotion_react.css`
 		display: ${theme.display};
 		align-items: ${theme.alignItems};
 		gap: ${theme.subsection.gap};
-		${mq.until[collapseBelow]} {
+		${require_mq.until[collapseBelow]} {
 			display: none;
 		}
 	`;
 };
 const subsectionTypography = (theme) => {
-  return react.css`
-		${typography.convertTypographyToEmotionStringStyle(theme.subsection.typography)}
+	return _emotion_react.css`
+		${require_typography.convertTypographyToEmotionStringStyle(theme.subsection.typography)}
 	`;
 };
-
+//#endregion
 exports.defaultToolNameTheme = defaultToolNameTheme;
 exports.dividerStyles = dividerStyles;
 exports.subsectionStyles = subsectionStyles;

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

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

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

@@ -1,11 +1,11 @@
-import { css } from '@emotion/react';
-import { componentTopBar } from '../../../styleD/build/typescript/component/topBar.js';
-import { until } from '../../../styleD/utils/semantic/mq.js';
-import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
-
+import { convertTypographyToEmotionStringStyle } from "../../../styleD/utils/semantic/typography.js";
+import { until } from "../../../styleD/utils/semantic/mq.js";
+import { componentTopBar } from "../../../styleD/build/typescript/component/topBar.js";
+import { css } from "@emotion/react";
+//#region src/components/TopBar/TopBarToolName/styles.ts
 const defaultToolNameTheme = componentTopBar.toolName;
 const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
-  return css`
+	return css`
 		${convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
 		background-color: ${theme.hoverLink.backgroundColor};
 		color: ${theme.hoverLink.color};
@@ -27,14 +27,14 @@ const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
 	`;
 };
 const toolNameHoverLinkTextExpandedStyles = ({ collapseBelow }) => {
-  return css`
+	return css`
 		${until[collapseBelow]} {
 			display: none;
 		}
 	`;
 };
 const toolNameHoverLinkTextCollapsedStyles = ({ collapseBelow }) => {
-  return css`
+	return css`
 		display: none;
 
 		${until[collapseBelow]} {
@@ -43,7 +43,7 @@ const toolNameHoverLinkTextCollapsedStyles = ({ collapseBelow }) => {
 	`;
 };
 const toolNameLinkStyles = (theme) => {
-  return css`
+	return css`
 		text-decoration: ${theme.link.textDecoration};
 		color: ${theme.link.color};
 		position: ${theme.link.position};
@@ -64,7 +64,7 @@ const toolNameLinkStyles = (theme) => {
 	`;
 };
 const toolNameStyles = (theme) => {
-  return css`
+	return css`
 		display: ${theme.display};
 		align-items: ${theme.alignItems};
 		gap: ${theme.gap};
@@ -72,7 +72,7 @@ const toolNameStyles = (theme) => {
 	`;
 };
 const toolNameTypography = (theme, { collapseBelow }) => {
-  return css`
+	return css`
 		${convertTypographyToEmotionStringStyle(theme.typography)}
 		${until[collapseBelow]} {
 			display: none;
@@ -80,7 +80,7 @@ const toolNameTypography = (theme, { collapseBelow }) => {
 	`;
 };
 const dividerStyles = (theme, { collapseBelow }) => {
-  return css`
+	return css`
 		border-right: ${theme.divider.border};
 		height: ${theme.divider.height};
 		${until[collapseBelow]} {
@@ -89,7 +89,7 @@ const dividerStyles = (theme, { collapseBelow }) => {
 	`;
 };
 const subsectionStyles = (theme, { collapseBelow }) => {
-  return css`
+	return css`
 		display: ${theme.display};
 		align-items: ${theme.alignItems};
 		gap: ${theme.subsection.gap};
@@ -99,9 +99,9 @@ const subsectionStyles = (theme, { collapseBelow }) => {
 	`;
 };
 const subsectionTypography = (theme) => {
-  return css`
+	return css`
 		${convertTypographyToEmotionStringStyle(theme.subsection.typography)}
 	`;
 };
-
+//#endregion
 export { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameHoverLinkStyles, toolNameHoverLinkTextCollapsedStyles, toolNameHoverLinkTextExpandedStyles, toolNameLinkStyles, toolNameStyles, toolNameTypography };

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

@@ -0,0 +1,44 @@
+import { DefaultProps } from "../../../util/types.cjs";
+import { IconProps } from "../../Icon/types.cjs";
+import { FaviconProps } from "../../Favicon/types.cjs";
+import { Breakpoint } from "../../../styleD/utils/semantic/mq.cjs";
+import { TopBarToolNameTheme } from "./styles.cjs";
+import { LinkProps } from "react-aria-components";
+
+//#region src/components/TopBar/TopBarToolName/types.d.ts
+interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme, LinkProps['className']>, Omit<LinkProps, 'children'> {
+  /**
+   * Name of the tool to display
+   */
+  name: string;
+  /**
+   * Icon to display
+   */
+  favicon: FaviconProps;
+  /**
+   * The breakpoint at which the tool name section collapses to only show the favicon. Can be set to any valid breakpoint (e.g. 'sm', 'md', 'lg', etc.).
+   */
+  collapseBelow?: Breakpoint;
+  /**
+   * The subsection or type of content that is represented on the page (optional)
+   * */
+  subsection?: string;
+  /**
+   * Icon that represents the content type (optional)
+   * */
+  subsectionIcon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+  /**
+   * Text to display on hover, labels the link
+   * e.g. 'Back to dashboard'
+   * If not provided, `collapsedHoverText` will be used for both expanded and collapsed states
+   */
+  hoverText?: string;
+  /**
+   * Shorter text to display on hover when collapsed, labels the link
+   * e.g. 'Back' or 'Home'
+   * If not provided, `hoverText` will be used for both expanded and collapsed states
+   */
+  collapsedHoverText?: string;
+}
+//#endregion
+export { TopBarToolNameProps };

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

@@ -0,0 +1,44 @@
+import { DefaultProps } from "../../../util/types.js";
+import { IconProps } from "../../Icon/types.js";
+import { FaviconProps } from "../../Favicon/types.js";
+import { Breakpoint } from "../../../styleD/utils/semantic/mq.js";
+import { TopBarToolNameTheme } from "./styles.js";
+import { LinkProps } from "react-aria-components";
+
+//#region src/components/TopBar/TopBarToolName/types.d.ts
+interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme, LinkProps['className']>, Omit<LinkProps, 'children'> {
+  /**
+   * Name of the tool to display
+   */
+  name: string;
+  /**
+   * Icon to display
+   */
+  favicon: FaviconProps;
+  /**
+   * The breakpoint at which the tool name section collapses to only show the favicon. Can be set to any valid breakpoint (e.g. 'sm', 'md', 'lg', etc.).
+   */
+  collapseBelow?: Breakpoint;
+  /**
+   * The subsection or type of content that is represented on the page (optional)
+   * */
+  subsection?: string;
+  /**
+   * Icon that represents the content type (optional)
+   * */
+  subsectionIcon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+  /**
+   * Text to display on hover, labels the link
+   * e.g. 'Back to dashboard'
+   * If not provided, `collapsedHoverText` will be used for both expanded and collapsed states
+   */
+  hoverText?: string;
+  /**
+   * Shorter text to display on hover when collapsed, labels the link
+   * e.g. 'Back' or 'Home'
+   * If not provided, `hoverText` will be used for both expanded and collapsed states
+   */
+  collapsedHoverText?: string;
+}
+//#endregion
+export { TopBarToolNameProps };