@guardian/stand 0.0.10 → 0.0.12

package/README.md

@@ -2,7 +2,7 @@
 
 _Find what you need on the (news)stand!_
 
-Stand is component library for Guardian editorial tools. It is co-located within flexible-content as Composer is expected to be the main consumer of the UI components within Stand. But any editorial tool should be able to make use of the components as an npm package - `@guardian/stand` - and developers should feel comfortable contributing.
+Stand is component library and design system for internal Guardian tools. Any tool should be able to make use of the components as an npm package - `@guardian/stand` - and developers should feel comfortable contributing.
 
 ## Installation
 
@@ -74,7 +74,7 @@ The Open Sans variable font can also be loaded via Google Fonts, but we recommen
 3. Click "Change styles" dropdown
 4. Use "Full axis" for all options (Italic, Weight, Width)
 5. Copy the relevant `<link>` tag or `@import` code snippet into your project
-    - You don't need to include the CSS class, as the design system will handle applying the correct font-family via CSS variables or JS/TS tokens.
+   - You don't need to include the CSS class, as the design system will handle applying the correct font-family via CSS variables or JS/TS tokens.
 
 #### Guardian Fonts
 
@@ -149,15 +149,12 @@ import '@guardian/stand/semantic/colors.css'; // CSS usage
 
 const stringStyle = css`
 	color: ${semanticColors.text.default}; /* JS/TS usage */
-	background-color: var(
-		--semantic-colors-bg-default-on-light
-	); /* CSS usage */
+	background-color: var(--semantic-colors-bg-default-on-light); /* CSS usage */
 `;
 
 const objectStyle = {
 	color: semanticColors.text.default /* JS/TS usage */,
-	backgroundColor:
-		'var(--semantic-colors-bg-default-on-light)' /* CSS usage */,
+	backgroundColor: 'var(--semantic-colors-bg-default-on-light)' /* CSS usage */,
 };
 ```
 
@@ -908,9 +905,7 @@ or for scenarios where you have to use relative paths/node_modules directly:
 /* example setup of button/link button style using md size and neutral secondary variant */
 .stand-button-neutral-secondary {
 	color: var(--component-button-neutral-secondary-shared-color);
-	background: var(
-		--component-button-neutral-secondary-shared-background-color
-	);
+	background: var(--component-button-neutral-secondary-shared-background-color);
 	height: var(--component-button-neutral-secondary-md-height);
 	padding: var(--component-button-neutral-secondary-md-padding-top)
 		var(--component-button-neutral-secondary-md-padding-right)
@@ -923,9 +918,7 @@ or for scenarios where you have to use relative paths/node_modules directly:
 	font-variation-settings: 'wdth'
 		var(--component-button-neutral-secondary-md-typography-font-width);
 	border: var(--component-button-neutral-secondary-shared-border);
-	border-radius: var(
-		--component-button-neutral-secondary-shared-border-radius
-	);
+	border-radius: var(--component-button-neutral-secondary-shared-border-radius);
 }
 .stand-button-neutral-secondary:hover {
 	background: var(
@@ -1768,9 +1761,9 @@ See the [Contributing to Stand](./CONTRIBUTING.md) documentation for guidelines
 - Run `pnpm test:react-matrix` to run matrix tests (see Compatibility section below)
 - Run `pnpm tsc` to run check TypeScript types
 - Run `pnpm lint` to run the linter
-    - Run `pnpm lint:fix` to fix any auto-fixable issues
+  - Run `pnpm lint:fix` to fix any auto-fixable issues
 - Run `pnpm format:check` to check code formatting
-    - Run `pnpm format:fix` to fix code formatting issues
+  - Run `pnpm format:fix` to fix code formatting issues
 
 ### Style Dictionary
 
@@ -1807,13 +1800,13 @@ Matrix generation in CI uses the same JSON file in the workflow: `../.github/wor
 
 1. Edit `./scripts/deps-matrix-versions.json` with new versions
 2. Run the matrix test locally:
-    ```bash
-    ./scripts/test-deps-matrix.sh
-    ```
+   ```bash
+   ./scripts/test-deps-matrix.sh
+   ```
 3. (Optional) Narrow the matrix with overrides:
-    ```bash
-    REACT_VERSIONS="18.0.0" EMOTION_VERSIONS="11.14.0" TS_VERSIONS="5.1" ./scripts/test-deps-matrix.sh
-    ```
+   ```bash
+   REACT_VERSIONS="18.0.0" EMOTION_VERSIONS="11.14.0" TS_VERSIONS="5.1" ./scripts/test-deps-matrix.sh
+   ```
 4. Review results (table output and any failures). Fix issues or adjust code
 5. Update `peerDependencies` in `package.json` to reflect the new minimum / tested range
 6. Open a PR, the CI pipeline will comment with the compatibility matrix

package/dist/components/button/Button.cjs

@@ -3,6 +3,7 @@
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function Button({
@@ -10,17 +11,22 @@ function Button({
   size = "md",
   theme = {},
   cssOverrides,
+  icon,
   ...props
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultButtonTheme, theme);
+  const iconSize = size === "xs" ? "sm" : size;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Button,
     {
       ...props,
-      css: [styles.buttonStyles(mergedTheme, { variant, size }), cssOverrides],
+      css: [styles.buttonStyles(mergedTheme, { variant, size }, !!icon), cssOverrides],
       children: reactAriaComponents.composeRenderProps(props.children, (children) => (
         // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
-        /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
+          children
+        ] })
       ))
     }
   );

package/dist/components/button/Button.js

@@ -1,13 +1,15 @@
-import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { Button as Button$1, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
 import { buttonStyles, defaultButtonTheme } from './styles.js';
 
-function Button({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, ...props }) {
+function Button({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
   const mergedTheme = mergeDeep(defaultButtonTheme, theme);
-  return jsx(Button$1, { ...props, css: [buttonStyles(mergedTheme, { variant, size }), cssOverrides], children: composeRenderProps(props.children, (children) => (
+  const iconSize = size === "xs" ? "sm" : size;
+  return jsx(Button$1, { ...props, css: [buttonStyles(mergedTheme, { variant, size }, !!icon), cssOverrides], children: composeRenderProps(props.children, (children) => (
     // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
-    jsx(Fragment, { children })
+    jsxs(Fragment, { children: [icon && jsx(Icon, { size: iconSize, children: icon }), children] })
   )) });
 }
 

package/dist/components/button/styles.cjs

@@ -5,7 +5,7 @@ var button = require('../../styleD/build/typescript/component/button.cjs');
 var typography = require('../../styleD/utils/semantic/typography.cjs');
 
 const defaultButtonTheme = button.componentButton;
-const buttonStyles = (theme, { size, variant }) => {
+const buttonStyles = (theme, { size, variant }, hasIcon = false, isIconButton = false) => {
   return react.css`
 		/* button/link button reset styles */
 		display: ${theme.shared["display"]};
@@ -24,12 +24,20 @@ const buttonStyles = (theme, { size, variant }) => {
 			${theme[variant][size].padding.right}
 			${theme[variant][size].padding.bottom}
 			${theme[variant][size].padding.left};
-		${typography.convertTypographyToEmotionStringStyle(
-    theme[variant][size].typography
-  )}
+		${typography.convertTypographyToEmotionStringStyle(theme[variant][size].typography)}
 		border: ${theme[variant].shared.border};
 		border-radius: ${theme[variant].shared.borderRadius};
 
+		${hasIcon && react.css`
+			padding-left: ${theme[variant][size].padding.withIcon.iconLeft.left};
+			gap: ${theme[variant][size].icon.gap};
+		`}
+
+		${isIconButton && react.css`
+			width: ${theme[variant][size].iconButton.width};
+			padding: 0;
+		`}
+
 		&[data-hovered] {
 			background: ${theme[variant].shared[":hover"].backgroundColor};
 			border: ${theme[variant].shared[":hover"].border};

package/dist/components/button/styles.js

@@ -3,7 +3,7 @@ import { componentButton } from '../../styleD/build/typescript/component/button.
 import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
 
 const defaultButtonTheme = componentButton;
-const buttonStyles = (theme, { size, variant }) => {
+const buttonStyles = (theme, { size, variant }, hasIcon = false, isIconButton = false) => {
   return css`
 		/* button/link button reset styles */
 		display: ${theme.shared["display"]};
@@ -26,6 +26,16 @@ const buttonStyles = (theme, { size, variant }) => {
 		border: ${theme[variant].shared.border};
 		border-radius: ${theme[variant].shared.borderRadius};
 
+		${hasIcon && css`
+			padding-left: ${theme[variant][size].padding.withIcon.iconLeft.left};
+			gap: ${theme[variant][size].icon.gap};
+		`}
+
+		${isIconButton && css`
+			width: ${theme[variant][size].iconButton.width};
+			padding: 0;
+		`}
+
 		&[data-hovered] {
 			background: ${theme[variant].shared[":hover"].backgroundColor};
 			border: ${theme[variant].shared[":hover"].border};

package/dist/components/byline/Byline.cjs

@@ -165,9 +165,7 @@ const Byline = ({
           if (readOnly) {
             return false;
           }
-          if (!dropdownRef.current?.contains(
-            event.relatedTarget
-          )) {
+          if (!dropdownRef.current?.contains(event.relatedTarget)) {
             setShowDropdown(false);
           }
           return false;
@@ -203,10 +201,7 @@ const Byline = ({
             void searchContributors(selectedText).then((contributors) => {
               setTaggedContributors(contributors);
             }).catch((error) => {
-              console.error(
-                "Error fetching tagged contributors:",
-                error
-              );
+              console.error("Error fetching tagged contributors:", error);
               setTaggedContributors([]);
             });
           } else {
@@ -291,14 +286,7 @@ const Byline = ({
     allowUntaggedContributors
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.bylineContainerStyles, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        css: styles.bylineEditorStyles(theme),
-        ref: editorRef,
-        onBlur
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.bylineEditorStyles(theme), ref: editorRef, onBlur }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -351,9 +339,7 @@ const Byline = ({
               ],
               onMouseMove: () => {
                 if (currentOptionIndex !== taggedContributors.length) {
-                  setCurrentOptionIndex(
-                    taggedContributors.length
-                  );
+                  setCurrentOptionIndex(taggedContributors.length);
                 }
               },
               onMouseDown: (e) => {

package/dist/components/byline/Preview.cjs

@@ -13,14 +13,7 @@ const Preview = ({ doc }) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.previewStyles, "data-testid": "byline-preview", children: parts.map((node, i) => {
     if (node.isText) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          css: styles.previewFreeTextStyles,
-          children: node.text
-        },
-        `${node.text}${i}`
-      );
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.previewFreeTextStyles, children: node.text }, `${node.text}${i}`);
     } else if (node.type.name === "chip") {
       if (node.attrs.path) {
         return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/byline/plugins.cjs

@@ -70,11 +70,7 @@ const clipboardPlugin = (allowUntaggedContributors, contributorLimit) => {
             {},
             transformedNodes
           ).content;
-          return new prosemirrorModel.Slice(
-            newFragment,
-            slice.openStart,
-            slice.openEnd
-          );
+          return new prosemirrorModel.Slice(newFragment, slice.openStart, slice.openEnd);
         }
         return slice;
       }
@@ -110,10 +106,7 @@ const bylinePlugin = () => {
           dom.setAttribute("data-tag-id", node.attrs.tagId);
           dom.setAttribute("data-path", node.attrs.path);
           if (node.attrs.meta) {
-            dom.setAttribute(
-              "data-meta",
-              JSON.stringify(node.attrs.meta)
-            );
+            dom.setAttribute("data-meta", JSON.stringify(node.attrs.meta));
           }
           dom.textContent = node.attrs.label;
           const deleteHandle = document.createElement("span");
@@ -125,10 +118,7 @@ const bylinePlugin = () => {
             if (pos === void 0) {
               return;
             }
-            const tr = view.state.tr.deleteRange(
-              pos,
-              pos + node.nodeSize
-            );
+            const tr = view.state.tr.deleteRange(pos, pos + node.nodeSize);
             view.dispatch(tr);
           });
           dom.appendChild(deleteHandle);

package/dist/components/icon/Icon.cjs

@@ -33,10 +33,7 @@ function Icon({
     "span",
     {
       className,
-      css: [
-        styles.iconStyles(mergedTheme, { size, fill, mode: "svg" }),
-        cssOverrides
-      ],
+      css: [styles.iconStyles(mergedTheme, { size, fill, mode: "svg" }), cssOverrides],
       ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true },
       children
     }

package/dist/components/icon/Icon.js

@@ -10,10 +10,7 @@ function Icon({ children, size = "md", fill, alt, symbol, theme = {}, cssOverrid
       cssOverrides
     ], ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }, children: symbol ?? children });
   }
-  return jsx("span", { className, css: [
-    iconStyles(mergedTheme, { size, fill, mode: "svg" }),
-    cssOverrides
-  ], ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }, children });
+  return jsx("span", { className, css: [iconStyles(mergedTheme, { size, fill, mode: "svg" }), cssOverrides], ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }, children });
 }
 
 export { Icon };

package/dist/components/icon-button/IconButton.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
+var styles = require('./styles.cjs');
+
+function IconButton({
+  variant = "emphasised-primary",
+  size = "md",
+  symbol,
+  ariaLabel,
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultIconButtonTheme, theme);
+  const buttonRef = react.useRef(null);
+  react.useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.title = ariaLabel;
+    }
+  }, [ariaLabel]);
+  const iconSize = size === "xs" ? "sm" : size;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Button,
+    {
+      ...props,
+      ref: buttonRef,
+      "aria-label": ariaLabel,
+      css: [
+        styles.iconButtonStyles(mergedTheme, { variant, size }, false, true),
+        cssOverrides
+      ],
+      children: reactAriaComponents.composeRenderProps(props.children, (children) => (
+        // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, symbol, children })
+      ))
+    }
+  );
+}
+
+exports.IconButton = IconButton;

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1,26 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Button, composeRenderProps } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
+import { iconButtonStyles, defaultIconButtonTheme } from './styles.js';
+
+function IconButton({ variant = "emphasised-primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultIconButtonTheme, theme);
+  const buttonRef = useRef(null);
+  useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.title = ariaLabel;
+    }
+  }, [ariaLabel]);
+  const iconSize = size === "xs" ? "sm" : size;
+  return jsx(Button, { ...props, ref: buttonRef, "aria-label": ariaLabel, css: [
+    iconButtonStyles(mergedTheme, { variant, size }, false, true),
+    cssOverrides
+  ], children: composeRenderProps(props.children, (children) => (
+    // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
+    jsx(Icon, { size: iconSize, symbol, children })
+  )) });
+}
+
+export { IconButton };

package/dist/components/icon-button/styles.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = require('../button/styles.cjs');
+
+const defaultIconButtonTheme = styles.defaultButtonTheme;
+const iconButtonStyles = styles.buttonStyles;
+
+exports.defaultIconButtonTheme = defaultIconButtonTheme;
+exports.iconButtonStyles = iconButtonStyles;

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

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

package/dist/components/icon-link-button/IconLinkButton.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
+var styles = require('./styles.cjs');
+
+function IconLinkButton({
+  variant = "emphasised-primary",
+  size = "md",
+  symbol,
+  ariaLabel,
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultIconLinkButtonTheme, theme);
+  const linkRef = react.useRef(null);
+  react.useEffect(() => {
+    if (linkRef.current) {
+      linkRef.current.title = ariaLabel;
+    }
+  }, [ariaLabel]);
+  const iconSize = size === "xs" ? "sm" : size;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Link,
+    {
+      ...props,
+      ref: linkRef,
+      "aria-label": ariaLabel,
+      css: [
+        styles.iconLinkButtonStyles(mergedTheme, { variant, size }, false, true),
+        cssOverrides
+      ],
+      children: reactAriaComponents.composeRenderProps(props.children, (children) => /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, symbol, children }))
+    }
+  );
+}
+
+exports.IconLinkButton = IconLinkButton;

package/dist/components/icon-link-button/IconLinkButton.js

@@ -0,0 +1,23 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Link, composeRenderProps } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
+import { iconLinkButtonStyles, defaultIconLinkButtonTheme } from './styles.js';
+
+function IconLinkButton({ variant = "emphasised-primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultIconLinkButtonTheme, theme);
+  const linkRef = useRef(null);
+  useEffect(() => {
+    if (linkRef.current) {
+      linkRef.current.title = ariaLabel;
+    }
+  }, [ariaLabel]);
+  const iconSize = size === "xs" ? "sm" : size;
+  return jsx(Link, { ...props, ref: linkRef, "aria-label": ariaLabel, css: [
+    iconLinkButtonStyles(mergedTheme, { variant, size }, false, true),
+    cssOverrides
+  ], children: composeRenderProps(props.children, (children) => jsx(Icon, { size: iconSize, symbol, children })) });
+}
+
+export { IconLinkButton };

package/dist/components/icon-link-button/styles.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = require('../button/styles.cjs');
+
+const defaultIconLinkButtonTheme = styles.defaultButtonTheme;
+const iconLinkButtonStyles = styles.buttonStyles;
+
+exports.defaultIconLinkButtonTheme = defaultIconLinkButtonTheme;
+exports.iconLinkButtonStyles = iconLinkButtonStyles;

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

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

package/dist/components/link-button/LinkButton.cjs

@@ -3,6 +3,7 @@
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function LinkButton({
@@ -10,18 +11,23 @@ function LinkButton({
   size = "md",
   theme = {},
   cssOverrides,
+  icon,
   ...props
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultLinkButtonTheme, theme);
+  const iconSize = size === "xs" ? "sm" : size;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Link,
     {
       ...props,
       css: [
-        styles.linkButtonStyles(mergedTheme, { variant, size }),
+        styles.linkButtonStyles(mergedTheme, { variant, size }, !!icon),
         cssOverrides
       ],
-      children: props.children
+      children: reactAriaComponents.composeRenderProps(props.children, (children) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
+        children
+      ] }))
     }
   );
 }

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

@@ -1,14 +1,16 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { Link } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { Link, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
 import { linkButtonStyles, defaultLinkButtonTheme } from './styles.js';
 
-function LinkButton({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, ...props }) {
+function LinkButton({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
   const mergedTheme = mergeDeep(defaultLinkButtonTheme, theme);
+  const iconSize = size === "xs" ? "sm" : size;
   return jsx(Link, { ...props, css: [
-    linkButtonStyles(mergedTheme, { variant, size }),
+    linkButtonStyles(mergedTheme, { variant, size }, !!icon),
     cssOverrides
-  ], children: props.children });
+  ], children: composeRenderProps(props.children, (children) => jsxs(Fragment, { children: [icon && jsx(Icon, { size: iconSize, children: icon }), children] })) });
 }
 
 export { LinkButton };

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

@@ -17,14 +17,7 @@ function UserMenu({
   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(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.",
       " ",