@guardian/stand 0.0.40 → 0.0.41

package/dist/components/TopBar/styles.cjs

@@ -1,12 +1,11 @@
-'use strict';
-
-var react = require('@emotion/react');
-var topBar = require('../../styleD/build/typescript/component/topBar.cjs');
-var mq = require('../../styleD/utils/semantic/mq.cjs');
-
-const defaultTopBarTheme = topBar.componentTopBar;
+require("../../_virtual/_rolldown/runtime.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/styles.ts
+const defaultTopBarTheme = require_topBar.componentTopBar;
 const topBarStyles = (theme) => {
-  return react.css`
+	return _emotion_react.css`
 		background-color: ${theme.backgroundColor};
 		height: ${theme.height};
 		border-top: ${theme.borderTop};
@@ -17,33 +16,30 @@ const topBarStyles = (theme) => {
 		justify-content: ${theme.justifyContent};
 	`;
 };
-const topBarContainerStyles = (theme, {
-  collapseBelow,
-  showUntil
-} = {}) => {
-  return react.css`
+const topBarContainerStyles = (theme, { collapseBelow, showUntil } = {}) => {
+	return _emotion_react.css`
 		display: ${theme.display};
 
-		${collapseBelow && react.css`
-			${mq.until[collapseBelow]} {
+		${collapseBelow && _emotion_react.css`
+			${require_mq.until[collapseBelow]} {
 				display: none;
 			}
 		`}
 
-		${showUntil && react.css`
-			${mq.from[showUntil]} {
+		${showUntil && _emotion_react.css`
+			${require_mq.from[showUntil]} {
 				display: none;
 			}
 		`}
 	`;
 };
 const topBarSpacerStyles = (theme) => {
-  return react.css`
+	return _emotion_react.css`
 		margin-left: ${theme.spacer.marginLeft};
 	`;
 };
 const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
-  return react.css`
+	return _emotion_react.css`
 		margin: ${theme.collapsedNavMenu.button.margin};
 		padding: ${theme.collapsedNavMenu.button.padding};
 		background: ${theme.collapsedNavMenu.button.background};
@@ -54,19 +50,19 @@ const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
 			background-color: ${theme.collapsedNavMenu.button.hovered.backgroundColor};
 		}
 
-		${menuOpen && react.css`
+		${menuOpen && _emotion_react.css`
 			background-color: ${theme.collapsedNavMenu.button.active.backgroundColor};
 		`}
 	`;
 };
 const topBarCollapsedNavMenuPopoverStyles = (theme) => {
-  return react.css`
+	return _emotion_react.css`
 		background-color: ${theme.collapsedNavMenu.popover.backgroundColor};
 		border-left: ${theme.collapsedNavMenu.popover.border};
 		border-right: ${theme.collapsedNavMenu.popover.border};
 	`;
 };
-
+//#endregion
 exports.defaultTopBarTheme = defaultTopBarTheme;
 exports.topBarCollapsedNavMenuButtonStyles = topBarCollapsedNavMenuButtonStyles;
 exports.topBarCollapsedNavMenuPopoverStyles = topBarCollapsedNavMenuPopoverStyles;

package/dist/components/TopBar/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/styles.d.ts
+type TopBarTheme = Prettify<ComponentTopBar>;
+type PartialTopBarTheme = Prettify<DeepPartial<TopBarTheme>>;
+//#endregion
+export { PartialTopBarTheme, TopBarTheme };

package/dist/components/TopBar/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/styles.d.ts
+type TopBarTheme = Prettify<ComponentTopBar>;
+type PartialTopBarTheme = Prettify<DeepPartial<TopBarTheme>>;
+//#endregion
+export { PartialTopBarTheme, TopBarTheme };

package/dist/components/TopBar/styles.js

@@ -1,10 +1,10 @@
-import { css } from '@emotion/react';
-import { componentTopBar } from '../../styleD/build/typescript/component/topBar.js';
-import { until, from } from '../../styleD/utils/semantic/mq.js';
-
+import { from, 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/styles.ts
 const defaultTopBarTheme = componentTopBar;
 const topBarStyles = (theme) => {
-  return css`
+	return css`
 		background-color: ${theme.backgroundColor};
 		height: ${theme.height};
 		border-top: ${theme.borderTop};
@@ -16,7 +16,7 @@ const topBarStyles = (theme) => {
 	`;
 };
 const topBarContainerStyles = (theme, { collapseBelow, showUntil } = {}) => {
-  return css`
+	return css`
 		display: ${theme.display};
 
 		${collapseBelow && css`
@@ -33,12 +33,12 @@ const topBarContainerStyles = (theme, { collapseBelow, showUntil } = {}) => {
 	`;
 };
 const topBarSpacerStyles = (theme) => {
-  return css`
+	return css`
 		margin-left: ${theme.spacer.marginLeft};
 	`;
 };
 const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
-  return css`
+	return css`
 		margin: ${theme.collapsedNavMenu.button.margin};
 		padding: ${theme.collapsedNavMenu.button.padding};
 		background: ${theme.collapsedNavMenu.button.background};
@@ -55,11 +55,11 @@ const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
 	`;
 };
 const topBarCollapsedNavMenuPopoverStyles = (theme) => {
-  return css`
+	return css`
 		background-color: ${theme.collapsedNavMenu.popover.backgroundColor};
 		border-left: ${theme.collapsedNavMenu.popover.border};
 		border-right: ${theme.collapsedNavMenu.popover.border};
 	`;
 };
-
+//#endregion
 export { defaultTopBarTheme, topBarCollapsedNavMenuButtonStyles, topBarCollapsedNavMenuPopoverStyles, topBarContainerStyles, topBarSpacerStyles, topBarStyles };

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

@@ -0,0 +1,16 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { Breakpoint } from "../../styleD/utils/semantic/mq.cjs";
+import { TopBarTheme } from "./styles.cjs";
+
+//#region src/components/TopBar/types.d.ts
+type TopBarProps = DefaultPropsWithChildren<TopBarTheme> & {
+  /**
+   * Will collapse the designated section of the top bar below the specified breakpoint. For example, if `toolName` is set to `lg`, the section will collapse at the `md` breakpoint and below (i.e. on smaller screens).
+   */
+  collapseBelow?: {
+    toolName?: Breakpoint;
+    containerLeft?: Breakpoint;
+  };
+};
+//#endregion
+export { TopBarProps };

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

@@ -0,0 +1,16 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { Breakpoint } from "../../styleD/utils/semantic/mq.js";
+import { TopBarTheme } from "./styles.js";
+
+//#region src/components/TopBar/types.d.ts
+type TopBarProps = DefaultPropsWithChildren<TopBarTheme> & {
+  /**
+   * Will collapse the designated section of the top bar below the specified breakpoint. For example, if `toolName` is set to `lg`, the section will collapse at the `md` breakpoint and below (i.e. on smaller screens).
+   */
+  collapseBelow?: {
+    toolName?: Breakpoint;
+    containerLeft?: Breakpoint;
+  };
+};
+//#endregion
+export { TopBarProps };

package/dist/components/Typography/Typography.cjs

@@ -1,26 +1,13 @@
-'use strict';
-
-var react = require('@emotion/react');
-var mergeDeep = require('../../util/mergeDeep.cjs');
-var styles = require('./styles.cjs');
-
-const Typography = ({
-  element = "span",
-  variant = "bodyMd",
-  children,
-  cssOverrides,
-  theme = {},
-  ...props
-}) => {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTypographyTheme, theme);
-  return react.jsx(
-    element,
-    {
-      css: [styles.typographyStyles(mergedTheme, { variant }), cssOverrides],
-      ...props
-    },
-    children
-  );
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Typography/Typography.tsx
+const Typography = ({ element = "span", variant = "bodyMd", children, cssOverrides, theme = {}, ...props }) => {
+	return (0, _emotion_react.jsx)(element, {
+		css: [require_styles.typographyStyles(require_mergeDeep.mergeDeep(require_styles.defaultTypographyTheme, theme), { variant }), cssOverrides],
+		...props
+	}, children);
 };
-
+//#endregion
 exports.Typography = Typography;

package/dist/components/Typography/Typography.d.cts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TypographyProps } from "./types.cjs";
+
+//#region src/components/Typography/Typography.d.ts
+declare const Typography: ({
+  element,
+  variant,
+  children,
+  cssOverrides,
+  theme,
+  ...props
+}: TypographyProps) => import("react").DetailedReactHTMLElement<{
+  className?: string | undefined;
+  css: (import("@emotion/react").SerializedStyles | import("@emotion/react").SerializedStyles[] | undefined)[];
+}, HTMLElement>;
+//#endregion
+export { Typography };

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TypographyProps } from "./types.js";
+
+//#region src/components/Typography/Typography.d.ts
+declare const Typography: ({
+  element,
+  variant,
+  children,
+  cssOverrides,
+  theme,
+  ...props
+}: TypographyProps) => import("react").DetailedReactHTMLElement<{
+  className?: string | undefined;
+  css: (import("@emotion/react").SerializedStyles | import("@emotion/react").SerializedStyles[] | undefined)[];
+}, HTMLElement>;
+//#endregion
+export { Typography };

package/dist/components/Typography/Typography.js

@@ -1,13 +1,12 @@
-import { jsx } from '@emotion/react';
-import { mergeDeep } from '../../util/mergeDeep.js';
-import { defaultTypographyTheme, typographyStyles } from './styles.js';
-
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { defaultTypographyTheme, typographyStyles } from "./styles.js";
+import { jsx } from "@emotion/react";
+//#region src/components/Typography/Typography.tsx
 const Typography = ({ element = "span", variant = "bodyMd", children, cssOverrides, theme = {}, ...props }) => {
-  const mergedTheme = mergeDeep(defaultTypographyTheme, theme);
-  return jsx(element, {
-    css: [typographyStyles(mergedTheme, { variant }), cssOverrides],
-    ...props
-  }, children);
+	return jsx(element, {
+		css: [typographyStyles(mergeDeep(defaultTypographyTheme, theme), { variant }), cssOverrides],
+		...props
+	}, children);
 };
-
+//#endregion
 export { Typography };

package/dist/components/Typography/styles.cjs

@@ -1,15 +1,14 @@
-'use strict';
-
-var react = require('@emotion/react');
-var typography = require('../../styleD/build/typescript/component/typography.cjs');
-var typography$1 = require('../../styleD/utils/semantic/typography.cjs');
-var typography$2 = require('../../styleD/build/typescript/semantic/typography.cjs');
-
-const defaultTypographyTheme = typography.componentTypography;
-const typographyStyles = (theme, { variant }) => react.css`
-	${typography$1.convertTypographyToEmotionStringStyle(typography$2.semanticTypography[variant])}
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_typography$1 = require("../../styleD/build/typescript/component/typography.cjs");
+const require_typography$2 = require("../../styleD/build/typescript/semantic/typography.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Typography/styles.ts
+const defaultTypographyTheme = require_typography$1.componentTypography;
+const typographyStyles = (theme, { variant }) => _emotion_react.css`
+	${require_typography.convertTypographyToEmotionStringStyle(require_typography$2.semanticTypography[variant])}
 	color: ${theme.color};
 `;
-
+//#endregion
 exports.defaultTypographyTheme = defaultTypographyTheme;
 exports.typographyStyles = typographyStyles;

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

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

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

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

package/dist/components/Typography/styles.js

@@ -1,12 +1,12 @@
-import { css } from '@emotion/react';
-import { componentTypography } from '../../styleD/build/typescript/component/typography.js';
-import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
-import { semanticTypography } from '../../styleD/build/typescript/semantic/typography.js';
-
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { componentTypography } from "../../styleD/build/typescript/component/typography.js";
+import { semanticTypography } from "../../styleD/build/typescript/semantic/typography.js";
+import { css } from "@emotion/react";
+//#region src/components/Typography/styles.ts
 const defaultTypographyTheme = componentTypography;
 const typographyStyles = (theme, { variant }) => css`
 	${convertTypographyToEmotionStringStyle(semanticTypography[variant])}
 	color: ${theme.color};
 `;
-
+//#endregion
 export { defaultTypographyTheme, typographyStyles };

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

@@ -0,0 +1,18 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { SemanticTypography } from "../../styleD/build/typescript/semantic/typography.cjs";
+import { TypographyTheme } from "./styles.cjs";
+
+//#region src/components/Typography/types.d.ts
+type TypographyVariant = keyof SemanticTypography;
+interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
+  /**
+   * HTML element to render with font applied to
+   */
+  element?: 'div' | 'span' | 'p' | 'b' | 'i' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /**
+   * Font variant to apply as a CSS style to the element
+   */
+  variant?: TypographyVariant;
+}
+//#endregion
+export { TypographyProps, TypographyVariant };

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

@@ -0,0 +1,18 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { SemanticTypography } from "../../styleD/build/typescript/semantic/typography.js";
+import { TypographyTheme } from "./styles.js";
+
+//#region src/components/Typography/types.d.ts
+type TypographyVariant = keyof SemanticTypography;
+interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
+  /**
+   * HTML element to render with font applied to
+   */
+  element?: 'div' | 'span' | 'p' | 'b' | 'i' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /**
+   * Font variant to apply as a CSS style to the element
+   */
+  variant?: TypographyVariant;
+}
+//#endregion
+export { TypographyProps, TypographyVariant };

package/dist/components/UserMenu/PreferenceRadioGroup.cjs

@@ -1,53 +1,36 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('@emotion/react');
-var reactAriaComponents = require('react-aria-components');
-var styles = require('./styles.cjs');
-
-function PreferenceRadioGroup({
-  name,
-  options,
-  currentValue,
-  changeValue,
-  theme,
-  format = "stack"
-}) {
-  const groupCss = format === "stack" ? styles.toggleButtonStackedGroupStyles(theme) : styles.toggleButtonRowsGroupStyles(theme);
-  const buttonStyle = format === "stack" ? styles.toggleButtonStyles(theme) : [styles.toggleButtonStyles(theme), react.css({ flexBasis: "30%" })];
-  const defaultOptionId = options.find((option) => option.isDefault)?.id;
-  const selectedKeys = currentValue ? [currentValue] : defaultOptionId ? [defaultOptionId] : [];
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.radioGroupLabelStyles(theme), children: name }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.ToggleButtonGroup,
-      {
-        css: groupCss,
-        selectionMode: "single",
-        orientation: format === "stack" ? "vertical" : "horizontal",
-        selectedKeys,
-        onSelectionChange: (e) => {
-          const newValue = Array.from(e).pop() ?? currentValue;
-          if (typeof newValue === "string") {
-            changeValue(newValue);
-          }
-        },
-        children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          reactAriaComponents.ToggleButton,
-          {
-            id: option.id,
-            css: buttonStyle,
-            style: option.buttonStyle,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: option.labelStyle, children: option.label ?? option.id }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: option.description })
-            ]
-          },
-          index
-        ))
-      }
-    )
-  ] });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react = require("@emotion/react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/UserMenu/PreferenceRadioGroup.tsx
+function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme, format = "stack" }) {
+	const groupCss = format === "stack" ? require_styles.toggleButtonStackedGroupStyles(theme) : require_styles.toggleButtonRowsGroupStyles(theme);
+	const buttonStyle = format === "stack" ? require_styles.toggleButtonStyles(theme) : [require_styles.toggleButtonStyles(theme), (0, _emotion_react.css)({ flexBasis: "30%" })];
+	const defaultOptionId = options.find((option) => option.isDefault)?.id;
+	const selectedKeys = currentValue ? [currentValue] : defaultOptionId ? [defaultOptionId] : [];
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: require_styles.radioGroupLabelStyles(theme),
+		children: name
+	}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ToggleButtonGroup, {
+		css: groupCss,
+		selectionMode: "single",
+		orientation: format === "stack" ? "vertical" : "horizontal",
+		selectedKeys,
+		onSelectionChange: (e) => {
+			const newValue = Array.from(e).pop() ?? currentValue;
+			if (typeof newValue === "string") changeValue(newValue);
+		},
+		children: options.map((option, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.ToggleButton, {
+			id: option.id,
+			css: buttonStyle,
+			style: option.buttonStyle,
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				style: option.labelStyle,
+				children: option.label ?? option.id
+			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: option.description })]
+		}, index))
+	})] });
 }
-
+//#endregion
 exports.PreferenceRadioGroup = PreferenceRadioGroup;

package/dist/components/UserMenu/PreferenceRadioGroup.js

@@ -1,19 +1,35 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { ToggleButtonGroup, ToggleButton } from 'react-aria-components';
-import { toggleButtonStackedGroupStyles, toggleButtonRowsGroupStyles, toggleButtonStyles, radioGroupLabelStyles } from './styles.js';
-
+import { radioGroupLabelStyles, toggleButtonRowsGroupStyles, toggleButtonStackedGroupStyles, toggleButtonStyles } from "./styles.js";
+import { css } from "@emotion/react";
+import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
+import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+//#region src/components/UserMenu/PreferenceRadioGroup.tsx
 function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme, format = "stack" }) {
-  const groupCss = format === "stack" ? toggleButtonStackedGroupStyles(theme) : toggleButtonRowsGroupStyles(theme);
-  const buttonStyle = format === "stack" ? toggleButtonStyles(theme) : [toggleButtonStyles(theme), css({ flexBasis: "30%" })];
-  const defaultOptionId = options.find((option) => option.isDefault)?.id;
-  const selectedKeys = currentValue ? [currentValue] : defaultOptionId ? [defaultOptionId] : [];
-  return jsxs("label", { children: [jsx("div", { css: radioGroupLabelStyles(theme), children: name }), jsx(ToggleButtonGroup, { css: groupCss, selectionMode: "single", orientation: format === "stack" ? "vertical" : "horizontal", selectedKeys, onSelectionChange: (e) => {
-    const newValue = Array.from(e).pop() ?? currentValue;
-    if (typeof newValue === "string") {
-      changeValue(newValue);
-    }
-  }, children: options.map((option, index) => jsxs(ToggleButton, { id: option.id, css: buttonStyle, style: option.buttonStyle, children: [jsx("div", { style: option.labelStyle, children: option.label ?? option.id }), jsx("div", { children: option.description })] }, index)) })] });
+	const groupCss = format === "stack" ? toggleButtonStackedGroupStyles(theme) : toggleButtonRowsGroupStyles(theme);
+	const buttonStyle = format === "stack" ? toggleButtonStyles(theme) : [toggleButtonStyles(theme), css({ flexBasis: "30%" })];
+	const defaultOptionId = options.find((option) => option.isDefault)?.id;
+	const selectedKeys = currentValue ? [currentValue] : defaultOptionId ? [defaultOptionId] : [];
+	return /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx$1("div", {
+		css: radioGroupLabelStyles(theme),
+		children: name
+	}), /* @__PURE__ */ jsx$1(ToggleButtonGroup, {
+		css: groupCss,
+		selectionMode: "single",
+		orientation: format === "stack" ? "vertical" : "horizontal",
+		selectedKeys,
+		onSelectionChange: (e) => {
+			const newValue = Array.from(e).pop() ?? currentValue;
+			if (typeof newValue === "string") changeValue(newValue);
+		},
+		children: options.map((option, index) => /* @__PURE__ */ jsxs(ToggleButton, {
+			id: option.id,
+			css: buttonStyle,
+			style: option.buttonStyle,
+			children: [/* @__PURE__ */ jsx$1("div", {
+				style: option.labelStyle,
+				children: option.label ?? option.id
+			}), /* @__PURE__ */ jsx$1("div", { children: option.description })]
+		}, index))
+	})] });
 }
-
+//#endregion
 export { PreferenceRadioGroup };

package/dist/components/UserMenu/TitleText.cjs

@@ -1,28 +1,37 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-
-const TitleText = ({
-  headingLevel,
-  children,
-  className
-}) => {
-  switch (headingLevel) {
-    case 1:
-      return /* @__PURE__ */ jsxRuntime.jsx("h1", { className, children });
-    case 2:
-      return /* @__PURE__ */ jsxRuntime.jsx("h2", { className, children });
-    case 3:
-      return /* @__PURE__ */ jsxRuntime.jsx("h3", { className, children });
-    case 4:
-      return /* @__PURE__ */ jsxRuntime.jsx("h4", { className, children });
-    case 5:
-      return /* @__PURE__ */ jsxRuntime.jsx("h5", { className, children });
-    case 6:
-      return /* @__PURE__ */ jsxRuntime.jsx("h6", { className, children });
-    default:
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
-  }
+require("../../_virtual/_rolldown/runtime.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/UserMenu/TitleText.tsx
+const TitleText = ({ headingLevel, children, className }) => {
+	switch (headingLevel) {
+		case 1: return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("h1", {
+			className,
+			children
+		});
+		case 2: return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("h2", {
+			className,
+			children
+		});
+		case 3: return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("h3", {
+			className,
+			children
+		});
+		case 4: return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("h4", {
+			className,
+			children
+		});
+		case 5: return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("h5", {
+			className,
+			children
+		});
+		case 6: return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("h6", {
+			className,
+			children
+		});
+		default: return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+			className,
+			children
+		});
+	}
 };
-
+//#endregion
 exports.TitleText = TitleText;