@guardian/stand 0.0.8 → 0.0.10

package/dist/components/link-button/styles.js

@@ -0,0 +1,6 @@
+import { buttonStyles, defaultButtonTheme } from '../button/styles.js';
+
+const defaultLinkButtonTheme = defaultButtonTheme;
+const linkButtonStyles = buttonStyles;
+
+export { defaultLinkButtonTheme, linkButtonStyles };

package/dist/components/tag-picker/styles.cjs

@@ -3,10 +3,10 @@
 var react = require('@emotion/react');
 var tagAutocomplete = require('../../styleD/build/typescript/component/tagAutocomplete.cjs');
 var tagTable = require('../../styleD/build/typescript/component/tagTable.cjs');
-var util = require('../util.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
 
 const tagAutocompleteInputStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
   return react.css`
 		width: 100%;
 		box-sizing: border-box;
@@ -23,7 +23,7 @@ const tagAutocompleteInputStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
   return react.css`
 		padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
 		max-height: 320px;
@@ -35,7 +35,7 @@ const listboxStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxItemStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
   return react.css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 		cursor: pointer;
@@ -48,13 +48,13 @@ const listboxItemStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxInfoStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
   return react.css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 	`;
 };
 const tagTableHeadingStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		background-color: ${theme.heading.backgroundColor};
 		font-weight: ${theme.heading.fontWeight};
@@ -63,7 +63,7 @@ const tagTableHeadingStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableCellStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		padding: ${theme.cell.paddingY} ${theme.cell.paddingX};
 
@@ -79,7 +79,7 @@ const tagTableCellStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableRowStyles = (canDrag, partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		background-color: ${theme.row.backgroundColor};
 		height: ${theme.row.height};
@@ -106,7 +106,7 @@ const tagTableRowStyles = (canDrag, partialTheme = {}) => {
 	`;
 };
 const tagTableStyles = (canRemoveTag, partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		width: 100%;
 		border-collapse: collapse;
@@ -129,7 +129,7 @@ const tagTableRemoveButtonStyles = react.css`
 	}
 `;
 const tagTableAddButtonStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		:hover {
 			cursor: pointer;
@@ -172,7 +172,7 @@ const tagTableDragButtonStyles = react.css`
 	}
 `;
 const tagTableTypeBadgeStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		white-space: nowrap;
 		text-transform: uppercase;

package/dist/components/tag-picker/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { componentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete.js';
 import { componentTagTable } from '../../styleD/build/typescript/component/tagTable.js';
-import { mergeDeep } from '../util.js';
+import { mergeDeep } from '../../util/mergeDeep.js';
 
 const tagAutocompleteInputStyles = (partialTheme = {}) => {
   const theme = mergeDeep(componentTagAutocomplete, partialTheme);

package/dist/components/typography/Typography.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var react = require('@emotion/react');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+
+const Typography = ({
+  element = "span",
+  variant = "body-md",
+  children,
+  cssOverrides,
+  theme = {},
+  ...props
+}) => {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTypographyTheme, theme);
+  return react.jsx(
+    element,
+    {
+      css: [styles.typographyStyles(mergedTheme, { variant }), cssOverrides],
+      ...props
+    },
+    children
+  );
+};
+
+exports.Typography = Typography;

package/dist/components/typography/Typography.js

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

package/dist/components/typography/styles.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var react = require('@emotion/react');
+var typography$2 = require('../../styleD/build/typescript/component/typography.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+var typography$1 = require('../../styleD/build/typescript/semantic/typography.cjs');
+
+const defaultTypographyTheme = typography$2.componentTypography;
+const typographyStyles = (theme, { variant }) => react.css`
+	${typography.convertTypographyToEmotionStringStyle(typography$1.semanticTypography[variant])}
+	color: ${theme.color};
+`;
+
+exports.defaultTypographyTheme = defaultTypographyTheme;
+exports.typographyStyles = typographyStyles;

package/dist/components/typography/styles.js

@@ -0,0 +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';
+
+const defaultTypographyTheme = componentTypography;
+const typographyStyles = (theme, { variant }) => css`
+	${convertTypographyToEmotionStringStyle(semanticTypography[variant])}
+	color: ${theme.color};
+`;
+
+export { defaultTypographyTheme, typographyStyles };

package/dist/components/user-menu/PreferenceRadioGroup.cjs

@@ -0,0 +1,53 @@
+'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
+        ))
+      }
+    )
+  ] });
+}
+
+exports.PreferenceRadioGroup = PreferenceRadioGroup;

package/dist/components/user-menu/PreferenceRadioGroup.js

@@ -0,0 +1,19 @@
+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';
+
+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)) })] });
+}
+
+export { PreferenceRadioGroup };

package/dist/components/user-menu/UserMenu.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var TitleText = require('../TitleText.cjs');
+var defaultOptions = require('./default-options.cjs');
+var PreferenceRadioGroup = require('./PreferenceRadioGroup.cjs');
+var styles = require('./styles.cjs');
+
+function UserMenu({
+  theme,
+  feedBacklink,
+  preferences,
+  updatePreferences,
+  textSizeOptions,
+  fontFamilyOptions,
+  colorSchemeOptions,
+  headingLevel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { css: styles.userMenuStyles(theme), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TitleText.TitleText,
+      {
+        headingLevel,
+        css: styles.userMenuHeadingStyles(theme),
+        children: "Accessibility Settings"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      "Customise your reading & writing experience.",
+      " ",
+      feedBacklink && /* @__PURE__ */ jsxRuntime.jsx("a", { href: feedBacklink, target: "_blank", rel: "noreferrer", children: "Send feedback" })
+    ] }) }),
+    (!textSizeOptions || textSizeOptions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+      PreferenceRadioGroup.PreferenceRadioGroup,
+      {
+        theme,
+        options: textSizeOptions ?? defaultOptions.textSizes,
+        name: "Text Size",
+        currentValue: preferences.fontpreferences,
+        changeValue: (fontpreferences) => updatePreferences({ fontpreferences })
+      }
+    ),
+    (!fontFamilyOptions || fontFamilyOptions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+      PreferenceRadioGroup.PreferenceRadioGroup,
+      {
+        theme,
+        options: fontFamilyOptions ?? defaultOptions.fontFamilies,
+        name: "Font Family",
+        currentValue: preferences.fontType,
+        changeValue: (fontType) => updatePreferences({ fontType })
+      }
+    ),
+    (!colorSchemeOptions || colorSchemeOptions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+      PreferenceRadioGroup.PreferenceRadioGroup,
+      {
+        theme,
+        format: "rows",
+        options: colorSchemeOptions ?? defaultOptions.colorSchemes,
+        name: "Color scheme",
+        currentValue: preferences.colorScheme,
+        changeValue: (colorScheme) => updatePreferences({ colorScheme })
+      }
+    )
+  ] });
+}
+
+exports.UserMenu = UserMenu;

package/dist/components/user-menu/UserMenu.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { TitleText } from '../TitleText.js';
+import { textSizes, fontFamilies, colorSchemes } from './default-options.js';
+import { PreferenceRadioGroup } from './PreferenceRadioGroup.js';
+import { userMenuStyles, userMenuHeadingStyles } from './styles.js';
+
+function UserMenu({ theme, feedBacklink, preferences, updatePreferences, textSizeOptions, fontFamilyOptions, colorSchemeOptions, headingLevel }) {
+  return jsxs("aside", { css: userMenuStyles(theme), children: [jsx(TitleText, { headingLevel, css: userMenuHeadingStyles(theme), children: "Accessibility Settings" }), jsx("div", { children: jsxs("p", { children: ["Customise your reading & writing experience.", " ", feedBacklink && jsx("a", { href: feedBacklink, target: "_blank", rel: "noreferrer", children: "Send feedback" })] }) }), (!textSizeOptions || textSizeOptions.length > 0) && jsx(PreferenceRadioGroup, { theme, options: textSizeOptions ?? textSizes, name: "Text Size", currentValue: preferences.fontpreferences, changeValue: (fontpreferences) => updatePreferences({ fontpreferences }) }), (!fontFamilyOptions || fontFamilyOptions.length > 0) && jsx(PreferenceRadioGroup, { theme, options: fontFamilyOptions ?? fontFamilies, name: "Font Family", currentValue: preferences.fontType, changeValue: (fontType) => updatePreferences({ fontType }) }), (!colorSchemeOptions || colorSchemeOptions.length > 0) && jsx(PreferenceRadioGroup, { theme, format: "rows", options: colorSchemeOptions ?? colorSchemes, name: "Color scheme", currentValue: preferences.colorScheme, changeValue: (colorScheme) => updatePreferences({ colorScheme }) })] });
+}
+
+export { UserMenu };

package/dist/components/user-menu/default-options.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+var spacing = require('../../styleD/build/typescript/base/spacing.cjs');
+var typography = require('../../styleD/build/typescript/base/typography.cjs');
+
+const textSizes = [
+  {
+    id: "font-preference-small",
+    label: "Small",
+    description: "Compact reading",
+    labelStyle: {
+      fontSize: typography.baseTypography.size["12-px"]
+    }
+  },
+  {
+    id: "font-preference-medium",
+    label: "Medium",
+    description: "Standard reading",
+    labelStyle: {
+      fontSize: typography.baseTypography.size["16-px"]
+    }
+  },
+  {
+    id: "font-preference-large",
+    label: "Large",
+    description: "Comfortable reading",
+    labelStyle: {
+      fontSize: typography.baseTypography.size["20-px"]
+    }
+  }
+];
+const fontFamilies = [
+  {
+    id: "font-serif",
+    label: "Guardian Text Egyptian",
+    description: "Classic Guardian Serif",
+    labelStyle: {
+      fontFamily: typography.baseTypography.family["Guardian Text Egyptian"],
+      fontSize: typography.baseTypography.size["20-px"]
+    }
+  },
+  {
+    id: "open-sans-compact",
+    label: "Open Sans Compact",
+    description: "compact sans-Serif",
+    labelStyle: {
+      fontFamily: typography.baseTypography.family["Open Sans Compact"],
+      fontSize: typography.baseTypography.size["20-px"]
+    }
+  },
+  {
+    id: "open-sans",
+    label: "Open Sans",
+    description: "Sans-Serif",
+    labelStyle: {
+      fontFamily: typography.baseTypography.family["Open Sans"],
+      fontSize: typography.baseTypography.size["20-px"]
+    }
+  }
+];
+const colorSchemes = [
+  {
+    id: "white",
+    buttonStyle: {
+      backgroundColor: "white",
+      padding: spacing.baseSpacing["10-rem"]
+    },
+    isDefault: true
+  },
+  {
+    id: "cream",
+    buttonStyle: {
+      backgroundColor: "antiquewhite",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "green",
+    buttonStyle: {
+      backgroundColor: "lightgreen",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "pink",
+    buttonStyle: {
+      backgroundColor: "pink",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "blue",
+    buttonStyle: {
+      backgroundColor: "skyblue",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "orange",
+    buttonStyle: {
+      backgroundColor: "orange",
+      padding: spacing.baseSpacing["10-rem"]
+    }
+  }
+];
+
+exports.colorSchemes = colorSchemes;
+exports.fontFamilies = fontFamilies;
+exports.textSizes = textSizes;

package/dist/components/user-menu/default-options.js

@@ -0,0 +1,105 @@
+import { baseSpacing } from '../../styleD/build/typescript/base/spacing.js';
+import { baseTypography } from '../../styleD/build/typescript/base/typography.js';
+
+const textSizes = [
+  {
+    id: "font-preference-small",
+    label: "Small",
+    description: "Compact reading",
+    labelStyle: {
+      fontSize: baseTypography.size["12-px"]
+    }
+  },
+  {
+    id: "font-preference-medium",
+    label: "Medium",
+    description: "Standard reading",
+    labelStyle: {
+      fontSize: baseTypography.size["16-px"]
+    }
+  },
+  {
+    id: "font-preference-large",
+    label: "Large",
+    description: "Comfortable reading",
+    labelStyle: {
+      fontSize: baseTypography.size["20-px"]
+    }
+  }
+];
+const fontFamilies = [
+  {
+    id: "font-serif",
+    label: "Guardian Text Egyptian",
+    description: "Classic Guardian Serif",
+    labelStyle: {
+      fontFamily: baseTypography.family["Guardian Text Egyptian"],
+      fontSize: baseTypography.size["20-px"]
+    }
+  },
+  {
+    id: "open-sans-compact",
+    label: "Open Sans Compact",
+    description: "compact sans-Serif",
+    labelStyle: {
+      fontFamily: baseTypography.family["Open Sans Compact"],
+      fontSize: baseTypography.size["20-px"]
+    }
+  },
+  {
+    id: "open-sans",
+    label: "Open Sans",
+    description: "Sans-Serif",
+    labelStyle: {
+      fontFamily: baseTypography.family["Open Sans"],
+      fontSize: baseTypography.size["20-px"]
+    }
+  }
+];
+const colorSchemes = [
+  {
+    id: "white",
+    buttonStyle: {
+      backgroundColor: "white",
+      padding: baseSpacing["10-rem"]
+    },
+    isDefault: true
+  },
+  {
+    id: "cream",
+    buttonStyle: {
+      backgroundColor: "antiquewhite",
+      padding: baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "green",
+    buttonStyle: {
+      backgroundColor: "lightgreen",
+      padding: baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "pink",
+    buttonStyle: {
+      backgroundColor: "pink",
+      padding: baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "blue",
+    buttonStyle: {
+      backgroundColor: "skyblue",
+      padding: baseSpacing["10-rem"]
+    }
+  },
+  {
+    id: "orange",
+    buttonStyle: {
+      backgroundColor: "orange",
+      padding: baseSpacing["10-rem"]
+    }
+  }
+];
+
+export { colorSchemes, fontFamilies, textSizes };

package/dist/components/user-menu/styles.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+var react = require('@emotion/react');
+var userMenu = require('../../styleD/build/typescript/component/userMenu.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+
+const userMenuStyles = (partialTheme = {}) => {
+  const { container } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		background-color: ${container.backgroundColor};
+		display: flex;
+		flex-direction: column;
+		width: ${container.width};
+		padding-left: ${container.paddingX};
+		padding-right: ${container.paddingX};
+		padding-top: ${container.paddingY};
+		padding-bottom: ${container.paddingY};
+	`;
+};
+const userMenuHeadingStyles = (partialTheme = {}) => {
+  const { heading } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		font-weight: ${heading.fontWeight};
+		font-size: ${heading.fontSize};
+		text-align: ${heading.textAlign};
+		padding-left: ${heading.paddingLeft};
+		padding-right: ${heading.paddingRight};
+		padding-top: ${heading.paddingTop};
+		padding-bottom: ${heading.paddingBottom};
+	`;
+};
+const toggleButtonStackedGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		display: flex;
+		flex-direction: column;
+		gap: ${toggleButton.gap};
+	`;
+};
+const radioGroupLabelStyles = (partialTheme = {}) => {
+  const { label } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		font-weight: ${label.fontWeight};
+		font-size: ${label.fontSize};
+		text-align: ${label.textAlign};
+		padding-left: ${label.paddingLeft};
+		padding-right: ${label.paddingRight};
+		padding-top: ${label.paddingTop};
+		padding-bottom: ${label.paddingBottom};
+	`;
+};
+const toggleButtonRowsGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: ${toggleButton.gap};
+	`;
+};
+const toggleButtonStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		border-radius: 0;
+		border-style: solid;
+		border-color: ${toggleButton.baseBorderColor};
+		background-color: ${toggleButton.baseBackgroundColor};
+
+		&[data-disabled] {
+			background-color: ${toggleButton.disabledBackgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline-offset: 1px;
+			outline: 2px solid blue;
+		}
+
+		&[data-selected] {
+			border-color: ${toggleButton.selectedBorderColor};
+		}
+	`;
+};
+
+exports.radioGroupLabelStyles = radioGroupLabelStyles;
+exports.toggleButtonRowsGroupStyles = toggleButtonRowsGroupStyles;
+exports.toggleButtonStackedGroupStyles = toggleButtonStackedGroupStyles;
+exports.toggleButtonStyles = toggleButtonStyles;
+exports.userMenuHeadingStyles = userMenuHeadingStyles;
+exports.userMenuStyles = userMenuStyles;