@guardian/stand 0.0.40 → 0.0.42

package/dist/components/AlertBanner/AlertBanner.cjs

@@ -1,64 +1,41 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var React = require('react');
-var mergeDeep = require('../../util/mergeDeep.cjs');
-var styles = require('./styles.cjs');
-var Icon = require('../Icon/Icon.cjs');
-var IconButton = require('../IconButton/IconButton.cjs');
-
-function AlertBanner({
-  level,
-  showIcon = false,
-  icon,
-  closeButtonProps,
-  children,
-  theme = {},
-  cssOverrides,
-  className,
-  ...props
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultAlertBannerTheme, theme);
-  const determinedIcon = React.useMemo(() => {
-    if (icon) {
-      return icon;
-    }
-    switch (level) {
-      case "error":
-        return "warning";
-      case "success":
-        return "sentiment_satisfied";
-      case "warning":
-        return "flag";
-      case "information":
-      default:
-        return "info";
-    }
-  }, [icon, level]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      css: [styles.alertBannerStyles(mergedTheme, { level }), cssOverrides],
-      className,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.alertBannerContentStyles(mergedTheme), children: [
-          showIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "md", fill: mergedTheme.shared.content.icon.color, children: determinedIcon }),
-          children
-        ] }),
-        closeButtonProps && /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton.IconButton,
-          {
-            variant: "tertiary",
-            size: "xs",
-            symbol: "close",
-            ariaLabel: "Close alert banner",
-            ...closeButtonProps
-          }
-        )
-      ]
-    }
-  );
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_IconButton = require("../IconButton/IconButton.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/AlertBanner/AlertBanner.tsx
+function AlertBanner({ level, showIcon = false, icon, closeButtonProps, children, theme = {}, cssOverrides, className, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultAlertBannerTheme, theme);
+	const determinedIcon = (0, react.useMemo)(() => {
+		if (icon) return icon;
+		switch (level) {
+			case "error": return "warning";
+			case "success": return "sentiment_satisfied";
+			case "warning": return "flag";
+			default: return "info";
+		}
+	}, [icon, level]);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: [require_styles.alertBannerStyles(mergedTheme, { level }), cssOverrides],
+		className,
+		...props,
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: require_styles.alertBannerContentStyles(mergedTheme),
+			children: [showIcon && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+				size: "md",
+				fill: mergedTheme.shared.content.icon.color,
+				children: determinedIcon
+			}), children]
+		}), closeButtonProps && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+			variant: "tertiary",
+			size: "xs",
+			symbol: "close",
+			ariaLabel: "Close alert banner",
+			...closeButtonProps
+		})]
+	});
 }
-
+//#endregion
 exports.AlertBanner = AlertBanner;

package/dist/components/AlertBanner/AlertBanner.d.cts

@@ -0,0 +1,16 @@
+import { AlertBannerProps } from "./types.cjs";
+
+//#region src/components/AlertBanner/AlertBanner.d.ts
+declare function AlertBanner({
+  level,
+  showIcon,
+  icon,
+  closeButtonProps,
+  children,
+  theme,
+  cssOverrides,
+  className,
+  ...props
+}: AlertBannerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { AlertBanner };

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -0,0 +1,16 @@
+import { AlertBannerProps } from "./types.js";
+
+//#region src/components/AlertBanner/AlertBanner.d.ts
+declare function AlertBanner({
+  level,
+  showIcon,
+  icon,
+  closeButtonProps,
+  children,
+  theme,
+  cssOverrides,
+  className,
+  ...props
+}: AlertBannerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { AlertBanner };

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,29 +1,40 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { useMemo } from 'react';
-import { mergeDeep } from '../../util/mergeDeep.js';
-import { defaultAlertBannerTheme, alertBannerContentStyles, alertBannerStyles } from './styles.js';
-import { Icon } from '../Icon/Icon.js';
-import { IconButton } from '../IconButton/IconButton.js';
-
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { alertBannerContentStyles, alertBannerStyles, defaultAlertBannerTheme } from "./styles.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/AlertBanner/AlertBanner.tsx
 function AlertBanner({ level, showIcon = false, icon, closeButtonProps, children, theme = {}, cssOverrides, className, ...props }) {
-  const mergedTheme = mergeDeep(defaultAlertBannerTheme, theme);
-  const determinedIcon = useMemo(() => {
-    if (icon) {
-      return icon;
-    }
-    switch (level) {
-      case "error":
-        return "warning";
-      case "success":
-        return "sentiment_satisfied";
-      case "warning":
-        return "flag";
-      case "information":
-      default:
-        return "info";
-    }
-  }, [icon, level]);
-  return jsxs("div", { css: [alertBannerStyles(mergedTheme, { level }), cssOverrides], className, ...props, children: [jsxs("div", { css: alertBannerContentStyles(mergedTheme), children: [showIcon && jsx(Icon, { size: "md", fill: mergedTheme.shared.content.icon.color, children: determinedIcon }), children] }), closeButtonProps && jsx(IconButton, { variant: "tertiary", size: "xs", symbol: "close", ariaLabel: "Close alert banner", ...closeButtonProps })] });
+	const mergedTheme = mergeDeep(defaultAlertBannerTheme, theme);
+	const determinedIcon = useMemo(() => {
+		if (icon) return icon;
+		switch (level) {
+			case "error": return "warning";
+			case "success": return "sentiment_satisfied";
+			case "warning": return "flag";
+			default: return "info";
+		}
+	}, [icon, level]);
+	return /* @__PURE__ */ jsxs("div", {
+		css: [alertBannerStyles(mergedTheme, { level }), cssOverrides],
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			css: alertBannerContentStyles(mergedTheme),
+			children: [showIcon && /* @__PURE__ */ jsx(Icon, {
+				size: "md",
+				fill: mergedTheme.shared.content.icon.color,
+				children: determinedIcon
+			}), children]
+		}), closeButtonProps && /* @__PURE__ */ jsx(IconButton, {
+			variant: "tertiary",
+			size: "xs",
+			symbol: "close",
+			ariaLabel: "Close alert banner",
+			...closeButtonProps
+		})]
+	});
 }
-
+//#endregion
 export { AlertBanner };

package/dist/components/AlertBanner/styles.cjs

@@ -1,12 +1,11 @@
-'use strict';
-
-var react = require('@emotion/react');
-var alertBanner = require('../../styleD/build/typescript/component/alertBanner.cjs');
-var typography = require('../../styleD/utils/semantic/typography.cjs');
-
-const defaultAlertBannerTheme = alertBanner.componentAlertBanner;
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_alertBanner = require("../../styleD/build/typescript/component/alertBanner.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/AlertBanner/styles.ts
+const defaultAlertBannerTheme = require_alertBanner.componentAlertBanner;
 const alertBannerStyles = (theme, { level }) => {
-  return react.css`
+	return _emotion_react.css`
 		display: ${theme.shared.display};
 		align-items: ${theme.shared.alignItems};
 		justify-content: ${theme.shared.justifyContent};
@@ -18,7 +17,7 @@ const alertBannerStyles = (theme, { level }) => {
 	`;
 };
 const alertBannerContentStyles = (theme) => {
-  return react.css`
+	return _emotion_react.css`
 		display: ${theme.shared.content.display};
 		justify-content: ${theme.shared.content.justifyContent};
 		gap: ${theme.shared.content.gap};
@@ -26,10 +25,10 @@ const alertBannerContentStyles = (theme) => {
 		align-items: ${theme.shared.content.alignItems};
 		flex: ${theme.shared.content.flex};
 		color: ${theme.shared.content.color};
-		${typography.convertTypographyToEmotionStringStyle(theme.shared.content.typography)}
+		${require_typography.convertTypographyToEmotionStringStyle(theme.shared.content.typography)}
 	`;
 };
-
+//#endregion
 exports.alertBannerContentStyles = alertBannerContentStyles;
 exports.alertBannerStyles = alertBannerStyles;
 exports.defaultAlertBannerTheme = defaultAlertBannerTheme;

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

@@ -0,0 +1,8 @@
+import { Prettify } from "../../util/types.cjs";
+import { ComponentAlertBanner } from "../../styleD/build/typescript/component/alertBanner.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/AlertBanner/styles.d.ts
+type AlertBannerTheme = Prettify<ComponentAlertBanner>;
+//#endregion
+export { AlertBannerTheme };

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

@@ -0,0 +1,8 @@
+import { Prettify } from "../../util/types.js";
+import { ComponentAlertBanner } from "../../styleD/build/typescript/component/alertBanner.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/AlertBanner/styles.d.ts
+type AlertBannerTheme = Prettify<ComponentAlertBanner>;
+//#endregion
+export { AlertBannerTheme };

package/dist/components/AlertBanner/styles.js

@@ -1,10 +1,10 @@
-import { css } from '@emotion/react';
-import { componentAlertBanner } from '../../styleD/build/typescript/component/alertBanner.js';
-import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
-
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { componentAlertBanner } from "../../styleD/build/typescript/component/alertBanner.js";
+import { css } from "@emotion/react";
+//#region src/components/AlertBanner/styles.ts
 const defaultAlertBannerTheme = componentAlertBanner;
 const alertBannerStyles = (theme, { level }) => {
-  return css`
+	return css`
 		display: ${theme.shared.display};
 		align-items: ${theme.shared.alignItems};
 		justify-content: ${theme.shared.justifyContent};
@@ -16,7 +16,7 @@ const alertBannerStyles = (theme, { level }) => {
 	`;
 };
 const alertBannerContentStyles = (theme) => {
-  return css`
+	return css`
 		display: ${theme.shared.content.display};
 		justify-content: ${theme.shared.content.justifyContent};
 		gap: ${theme.shared.content.gap};
@@ -27,5 +27,5 @@ const alertBannerContentStyles = (theme) => {
 		${convertTypographyToEmotionStringStyle(theme.shared.content.typography)}
 	`;
 };
-
+//#endregion
 export { alertBannerContentStyles, alertBannerStyles, defaultAlertBannerTheme };

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

@@ -0,0 +1,31 @@
+import { DefaultPropsWithChildren, Prettify } from "../../util/types.cjs";
+import { IconProps } from "../Icon/types.cjs";
+import { IconButtonProps } from "../IconButton/types.cjs";
+import { AlertBannerTheme } from "./styles.cjs";
+
+//#region src/components/AlertBanner/types.d.ts
+interface AlertBannerProps extends DefaultPropsWithChildren<AlertBannerTheme> {
+  /**
+   * The severity level of the AlertBanner, which determines its styling.
+   * This is a required prop.
+   * Levels: 'error', 'success', 'information', 'warning
+   */
+  level: keyof Omit<AlertBannerTheme, 'shared'>;
+  /**
+   * Indicates whether the AlertBanner has an icon.
+   * Icon is based on the level of the AlertBanner
+   */
+  showIcon?: boolean;
+  /**
+   * Override the default icon for the message by providing a custom icon, for example when not using material symbols.
+   * This can be either a string (for material symbols) or an SVG element.
+   * Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
+   */
+  icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+  /**
+   * Optional props for the close button. If provided, a close button will be rendered in the AlertBanner, and these props will be passed to the IconButton component.
+   */
+  closeButtonProps?: Prettify<Partial<IconButtonProps>>;
+}
+//#endregion
+export { AlertBannerProps };

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

@@ -0,0 +1,31 @@
+import { DefaultPropsWithChildren, Prettify } from "../../util/types.js";
+import { IconProps } from "../Icon/types.js";
+import { IconButtonProps } from "../IconButton/types.js";
+import { AlertBannerTheme } from "./styles.js";
+
+//#region src/components/AlertBanner/types.d.ts
+interface AlertBannerProps extends DefaultPropsWithChildren<AlertBannerTheme> {
+  /**
+   * The severity level of the AlertBanner, which determines its styling.
+   * This is a required prop.
+   * Levels: 'error', 'success', 'information', 'warning
+   */
+  level: keyof Omit<AlertBannerTheme, 'shared'>;
+  /**
+   * Indicates whether the AlertBanner has an icon.
+   * Icon is based on the level of the AlertBanner
+   */
+  showIcon?: boolean;
+  /**
+   * Override the default icon for the message by providing a custom icon, for example when not using material symbols.
+   * This can be either a string (for material symbols) or an SVG element.
+   * Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
+   */
+  icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+  /**
+   * Optional props for the close button. If provided, a close button will be rendered in the AlertBanner, and these props will be passed to the IconButton component.
+   */
+  closeButtonProps?: Prettify<Partial<IconButtonProps>>;
+}
+//#endregion
+export { AlertBannerProps };

package/dist/components/Avatar/Avatar.cjs

@@ -1,57 +1,38 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var React = require('react');
-var mergeDeep = require('../../util/mergeDeep.cjs');
-var styles = require('./styles.cjs');
-var types = require('./types.cjs');
-
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_styles = require("./styles.cjs");
+const require_types = require("./types.cjs");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/Avatar/Avatar.tsx
 const getColorFromString = (input) => {
-  const sum = input.split("").slice(0, 2).reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0);
-  const index = sum % types.avatarColors.length;
-  return types.avatarColors[index];
+	return require_types.avatarColors[input.split("").slice(0, 2).reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0) % require_types.avatarColors.length];
 };
-function Avatar({
-  src,
-  initials,
-  alt,
-  size = "md",
-  color,
-  theme = {},
-  cssOverrides,
-  ...props
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultAvatarTheme, theme);
-  const [imageError, setImageError] = React.useState(false);
-  const handleImageError = () => {
-    setImageError(true);
-  };
-  const showImage = src && !imageError;
-  const displayInitials = initials?.slice(0, 2).toUpperCase() ?? "";
-  const avatarColor = color ?? getColorFromString(src ?? displayInitials);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      css: [
-        styles.avatarStyles(mergedTheme, { size, color: avatarColor }),
-        cssOverrides
-      ],
-      role: "img",
-      "aria-label": alt ?? `Avatar ${displayInitials ? `with initials ${displayInitials}` : ""}`,
-      title: alt ?? displayInitials,
-      ...props,
-      children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src,
-          alt,
-          title: alt,
-          onError: handleImageError,
-          css: styles.avatarImageStyles
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayInitials })
-    }
-  );
+function Avatar({ src, initials, alt, size = "md", color, theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultAvatarTheme, theme);
+	const [imageError, setImageError] = (0, react.useState)(false);
+	const handleImageError = () => {
+		setImageError(true);
+	};
+	const showImage = src && !imageError;
+	const displayInitials = initials?.slice(0, 2).toUpperCase() ?? "";
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: [require_styles.avatarStyles(mergedTheme, {
+			size,
+			color: color ?? getColorFromString(src ?? displayInitials)
+		}), cssOverrides],
+		role: "img",
+		"aria-label": alt ?? `Avatar ${displayInitials ? `with initials ${displayInitials}` : ""}`,
+		title: alt ?? displayInitials,
+		...props,
+		children: showImage ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("img", {
+			src,
+			alt,
+			title: alt,
+			onError: handleImageError,
+			css: require_styles.avatarImageStyles
+		}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react_jsx_runtime.Fragment, { children: displayInitials })
+	});
 }
-
+//#endregion
 exports.Avatar = Avatar;

package/dist/components/Avatar/Avatar.d.cts

@@ -0,0 +1,15 @@
+import { AvatarProps } from "./types.cjs";
+
+//#region src/components/Avatar/Avatar.d.ts
+declare function Avatar({
+  src,
+  initials,
+  alt,
+  size,
+  color,
+  theme,
+  cssOverrides,
+  ...props
+}: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Avatar };

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,15 @@
+import { AvatarProps } from "./types.js";
+
+//#region src/components/Avatar/Avatar.d.ts
+declare function Avatar({
+  src,
+  initials,
+  alt,
+  size,
+  color,
+  theme,
+  cssOverrides,
+  ...props
+}: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Avatar };

package/dist/components/Avatar/Avatar.js

@@ -1,27 +1,37 @@
-import { jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { useState } from 'react';
-import { mergeDeep } from '../../util/mergeDeep.js';
-import { defaultAvatarTheme, avatarImageStyles, avatarStyles } from './styles.js';
-import { avatarColors } from './types.js';
-
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { avatarImageStyles, avatarStyles, defaultAvatarTheme } from "./styles.js";
+import { avatarColors } from "./types.js";
+import { useState } from "react";
+import { Fragment, jsx } from "@emotion/react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
 const getColorFromString = (input) => {
-  const sum = input.split("").slice(0, 2).reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0);
-  const index = sum % avatarColors.length;
-  return avatarColors[index];
+	return avatarColors[input.split("").slice(0, 2).reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0) % avatarColors.length];
 };
 function Avatar({ src, initials, alt, size = "md", color, theme = {}, cssOverrides, ...props }) {
-  const mergedTheme = mergeDeep(defaultAvatarTheme, theme);
-  const [imageError, setImageError] = useState(false);
-  const handleImageError = () => {
-    setImageError(true);
-  };
-  const showImage = src && !imageError;
-  const displayInitials = initials?.slice(0, 2).toUpperCase() ?? "";
-  const avatarColor = color ?? getColorFromString(src ?? displayInitials);
-  return jsx("div", { css: [
-    avatarStyles(mergedTheme, { size, color: avatarColor }),
-    cssOverrides
-  ], role: "img", "aria-label": alt ?? `Avatar ${displayInitials ? `with initials ${displayInitials}` : ""}`, title: alt ?? displayInitials, ...props, children: showImage ? jsx("img", { src, alt, title: alt, onError: handleImageError, css: avatarImageStyles }) : jsx(Fragment, { children: displayInitials }) });
+	const mergedTheme = mergeDeep(defaultAvatarTheme, theme);
+	const [imageError, setImageError] = useState(false);
+	const handleImageError = () => {
+		setImageError(true);
+	};
+	const showImage = src && !imageError;
+	const displayInitials = initials?.slice(0, 2).toUpperCase() ?? "";
+	return /* @__PURE__ */ jsx("div", {
+		css: [avatarStyles(mergedTheme, {
+			size,
+			color: color ?? getColorFromString(src ?? displayInitials)
+		}), cssOverrides],
+		role: "img",
+		"aria-label": alt ?? `Avatar ${displayInitials ? `with initials ${displayInitials}` : ""}`,
+		title: alt ?? displayInitials,
+		...props,
+		children: showImage ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt,
+			title: alt,
+			onError: handleImageError,
+			css: avatarImageStyles
+		}) : /* @__PURE__ */ jsx(Fragment, { children: displayInitials })
+	});
 }
-
+//#endregion
 export { Avatar };

package/dist/components/Avatar/styles.cjs

@@ -1,17 +1,16 @@
-'use strict';
-
-var react = require('@emotion/react');
-var avatar = require('../../styleD/build/typescript/component/avatar.cjs');
-var typography = require('../../styleD/utils/semantic/typography.cjs');
-
-const defaultAvatarTheme = avatar.componentAvatar;
-const avatarImageStyles = react.css`
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_avatar = require("../../styleD/build/typescript/component/avatar.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Avatar/styles.ts
+const defaultAvatarTheme = require_avatar.componentAvatar;
+const avatarImageStyles = _emotion_react.css`
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 `;
 const avatarStyles = (theme, { size, color }) => {
-  return react.css`
+	return _emotion_react.css`
 		display: ${theme.shared.display};
 		align-items: ${theme.shared.alignItems};
 		justify-content: ${theme.shared.justifyContent};
@@ -24,7 +23,7 @@ const avatarStyles = (theme, { size, color }) => {
 		border: ${theme.shared.color[color].border};
 		user-select: ${theme.shared.userSelect};
 		color: ${theme.shared.color[color].text};
-		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+		${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
 
 		&[data-avatar-context='interactive']:hover {
 			background-color: ${theme.shared.color[color].hover.background};
@@ -51,7 +50,7 @@ const avatarStyles = (theme, { size, color }) => {
 		}
 	`;
 };
-
+//#endregion
 exports.avatarImageStyles = avatarImageStyles;
 exports.avatarStyles = avatarStyles;
 exports.defaultAvatarTheme = defaultAvatarTheme;

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

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentAvatar } from "../../styleD/build/typescript/component/avatar.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Avatar/styles.d.ts
+type AvatarTheme = Prettify<ComponentAvatar>;
+type PartialAvatarTheme = Prettify<DeepPartial<AvatarTheme>>;
+//#endregion
+export { AvatarTheme, PartialAvatarTheme };

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

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentAvatar } from "../../styleD/build/typescript/component/avatar.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Avatar/styles.d.ts
+type AvatarTheme = Prettify<ComponentAvatar>;
+type PartialAvatarTheme = Prettify<DeepPartial<AvatarTheme>>;
+//#endregion
+export { AvatarTheme, PartialAvatarTheme };