@guardian/stand 0.0.10 → 0.0.11

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,25 @@ 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,18 @@
-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"]};
@@ -30,6 +30,16 @@ const buttonStyles = (theme, { size, variant }) => {
 		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/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,47 @@
+'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/icon-button.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var IconButton = require('./components/icon-button/IconButton.cjs');
+
+
+
+exports.IconButton = IconButton.IconButton;

package/dist/icon-button.js

@@ -0,0 +1 @@
+export { IconButton } from './components/icon-button/IconButton.js';

package/dist/icon-link-button.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var IconLinkButton = require('./components/icon-link-button/IconLinkButton.cjs');
+
+
+
+exports.IconLinkButton = IconLinkButton.IconLinkButton;

package/dist/icon-link-button.js

@@ -0,0 +1 @@
+export { IconLinkButton } from './components/icon-link-button/IconLinkButton.js';

package/dist/styleD/build/css/component/button.css

@@ -33,37 +33,53 @@
 	--component-button-emphasised-primary-xs-padding-right: 0.5rem;
 	--component-button-emphasised-primary-xs-padding-bottom: 0.25rem;
 	--component-button-emphasised-primary-xs-padding-left: 0.5rem;
+	--component-button-emphasised-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-emphasised-primary-xs-typography-font: normal 700
 		0.75rem/1 'Open Sans';
 	--component-button-emphasised-primary-xs-typography-letter-spacing: 0rem;
 	--component-button-emphasised-primary-xs-typography-font-width: 95;
+	--component-button-emphasised-primary-xs-icon-size: 1.125rem;
+	--component-button-emphasised-primary-xs-icon-gap: 0.25rem;
+	--component-button-emphasised-primary-xs-icon-button-width: 1.5rem;
 	--component-button-emphasised-primary-sm-height: 2rem;
 	--component-button-emphasised-primary-sm-padding-top: 0.25rem;
 	--component-button-emphasised-primary-sm-padding-right: 0.625rem;
 	--component-button-emphasised-primary-sm-padding-bottom: 0.25rem;
 	--component-button-emphasised-primary-sm-padding-left: 0.625rem;
+	--component-button-emphasised-primary-sm-padding-with-icon-icon-left-left: 0.5rem;
 	--component-button-emphasised-primary-sm-typography-font: normal 700
 		0.875rem/1 'Open Sans';
 	--component-button-emphasised-primary-sm-typography-letter-spacing: -0.0125rem;
 	--component-button-emphasised-primary-sm-typography-font-width: 95;
+	--component-button-emphasised-primary-sm-icon-size: 1.125rem;
+	--component-button-emphasised-primary-sm-icon-gap: 0.25rem;
+	--component-button-emphasised-primary-sm-icon-button-width: 2rem;
 	--component-button-emphasised-primary-md-height: 2.5rem;
 	--component-button-emphasised-primary-md-padding-top: 0.25rem;
 	--component-button-emphasised-primary-md-padding-right: 0.75rem;
 	--component-button-emphasised-primary-md-padding-bottom: 0.25rem;
 	--component-button-emphasised-primary-md-padding-left: 0.75rem;
+	--component-button-emphasised-primary-md-padding-with-icon-icon-left-left: 0.5rem;
 	--component-button-emphasised-primary-md-typography-font: normal 700
 		0.875rem/1 'Open Sans';
 	--component-button-emphasised-primary-md-typography-letter-spacing: -0.0125rem;
 	--component-button-emphasised-primary-md-typography-font-width: 95;
+	--component-button-emphasised-primary-md-icon-size: 1.25rem;
+	--component-button-emphasised-primary-md-icon-gap: 0.25rem;
+	--component-button-emphasised-primary-md-icon-button-width: 2.5rem;
 	--component-button-emphasised-primary-lg-height: 3rem;
 	--component-button-emphasised-primary-lg-padding-top: 0.25rem;
 	--component-button-emphasised-primary-lg-padding-right: 1rem;
 	--component-button-emphasised-primary-lg-padding-bottom: 0.25rem;
 	--component-button-emphasised-primary-lg-padding-left: 1rem;
+	--component-button-emphasised-primary-lg-padding-with-icon-icon-left-left: 0.75rem;
 	--component-button-emphasised-primary-lg-typography-font: normal 700 1rem/1
 		'Open Sans';
 	--component-button-emphasised-primary-lg-typography-letter-spacing: -0.0125rem;
 	--component-button-emphasised-primary-lg-typography-font-width: 95;
+	--component-button-emphasised-primary-lg-icon-size: 1.5rem;
+	--component-button-emphasised-primary-lg-icon-gap: 0.25rem;
+	--component-button-emphasised-primary-lg-icon-button-width: 3rem;
 	--component-button-emphasised-secondary-shared-color: #000000;
 	--component-button-emphasised-secondary-shared-background-color: none;
 	--component-button-emphasised-secondary-shared-border-radius: 0.25rem;
@@ -84,37 +100,53 @@
 	--component-button-emphasised-secondary-xs-padding-right: 0.5rem;
 	--component-button-emphasised-secondary-xs-padding-bottom: 0.25rem;
 	--component-button-emphasised-secondary-xs-padding-left: 0.5rem;
+	--component-button-emphasised-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-emphasised-secondary-xs-typography-font: normal 700
 		0.75rem/1 'Open Sans';
 	--component-button-emphasised-secondary-xs-typography-letter-spacing: 0rem;
 	--component-button-emphasised-secondary-xs-typography-font-width: 95;
+	--component-button-emphasised-secondary-xs-icon-size: 1.125rem;
+	--component-button-emphasised-secondary-xs-icon-gap: 0.25rem;
+	--component-button-emphasised-secondary-xs-icon-button-width: 1.5rem;
 	--component-button-emphasised-secondary-sm-height: 2rem;
 	--component-button-emphasised-secondary-sm-padding-top: 0.25rem;
 	--component-button-emphasised-secondary-sm-padding-right: 0.625rem;
 	--component-button-emphasised-secondary-sm-padding-bottom: 0.25rem;
 	--component-button-emphasised-secondary-sm-padding-left: 0.625rem;
+	--component-button-emphasised-secondary-sm-padding-with-icon-icon-left-left: 0.5rem;
 	--component-button-emphasised-secondary-sm-typography-font: normal 700
 		0.875rem/1 'Open Sans';
 	--component-button-emphasised-secondary-sm-typography-letter-spacing: -0.0125rem;
 	--component-button-emphasised-secondary-sm-typography-font-width: 95;
+	--component-button-emphasised-secondary-sm-icon-size: 1.125rem;
+	--component-button-emphasised-secondary-sm-icon-gap: 0.25rem;
+	--component-button-emphasised-secondary-sm-icon-button-width: 2rem;
 	--component-button-emphasised-secondary-md-height: 2.5rem;
 	--component-button-emphasised-secondary-md-padding-top: 0.25rem;
 	--component-button-emphasised-secondary-md-padding-right: 0.75rem;
 	--component-button-emphasised-secondary-md-padding-bottom: 0.25rem;
 	--component-button-emphasised-secondary-md-padding-left: 0.75rem;
+	--component-button-emphasised-secondary-md-padding-with-icon-icon-left-left: 0.5rem;
 	--component-button-emphasised-secondary-md-typography-font: normal 700
 		0.875rem/1 'Open Sans';
 	--component-button-emphasised-secondary-md-typography-letter-spacing: -0.0125rem;
 	--component-button-emphasised-secondary-md-typography-font-width: 95;
+	--component-button-emphasised-secondary-md-icon-size: 1.25rem;
+	--component-button-emphasised-secondary-md-icon-gap: 0.25rem;
+	--component-button-emphasised-secondary-md-icon-button-width: 2.5rem;
 	--component-button-emphasised-secondary-lg-height: 3rem;
 	--component-button-emphasised-secondary-lg-padding-top: 0.25rem;
 	--component-button-emphasised-secondary-lg-padding-right: 1rem;
 	--component-button-emphasised-secondary-lg-padding-bottom: 0.25rem;
 	--component-button-emphasised-secondary-lg-padding-left: 1rem;
+	--component-button-emphasised-secondary-lg-padding-with-icon-icon-left-left: 0.75rem;
 	--component-button-emphasised-secondary-lg-typography-font: normal 700
 		1rem/1 'Open Sans';
 	--component-button-emphasised-secondary-lg-typography-letter-spacing: -0.0125rem;
 	--component-button-emphasised-secondary-lg-typography-font-width: 95;
+	--component-button-emphasised-secondary-lg-icon-size: 1.5rem;
+	--component-button-emphasised-secondary-lg-icon-gap: 0.25rem;
+	--component-button-emphasised-secondary-lg-icon-button-width: 3rem;
 	--component-button-neutral-primary-shared-color: #ffffff;
 	--component-button-neutral-primary-shared-background-color: #545454;
 	--component-button-neutral-primary-shared-border-radius: 0.25rem;
@@ -134,37 +166,53 @@
 	--component-button-neutral-primary-xs-padding-right: 0.5rem;
 	--component-button-neutral-primary-xs-padding-bottom: 0.25rem;
 	--component-button-neutral-primary-xs-padding-left: 0.5rem;
+	--component-button-neutral-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-neutral-primary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
 	--component-button-neutral-primary-xs-typography-letter-spacing: 0rem;
 	--component-button-neutral-primary-xs-typography-font-width: 95;
+	--component-button-neutral-primary-xs-icon-size: 1.125rem;
+	--component-button-neutral-primary-xs-icon-gap: 0.25rem;
+	--component-button-neutral-primary-xs-icon-button-width: 1.5rem;
 	--component-button-neutral-primary-sm-height: 2rem;
 	--component-button-neutral-primary-sm-padding-top: 0.25rem;
 	--component-button-neutral-primary-sm-padding-right: 0.625rem;
 	--component-button-neutral-primary-sm-padding-bottom: 0.25rem;
 	--component-button-neutral-primary-sm-padding-left: 0.625rem;
+	--component-button-neutral-primary-sm-padding-with-icon-icon-left-left: 0.5rem;
 	--component-button-neutral-primary-sm-typography-font: normal 700 0.875rem/1
 		'Open Sans';
 	--component-button-neutral-primary-sm-typography-letter-spacing: -0.0125rem;
 	--component-button-neutral-primary-sm-typography-font-width: 95;
+	--component-button-neutral-primary-sm-icon-size: 1.125rem;
+	--component-button-neutral-primary-sm-icon-gap: 0.25rem;
+	--component-button-neutral-primary-sm-icon-button-width: 2rem;
 	--component-button-neutral-primary-md-height: 2.5rem;
 	--component-button-neutral-primary-md-padding-top: 0.25rem;
 	--component-button-neutral-primary-md-padding-right: 0.75rem;
 	--component-button-neutral-primary-md-padding-bottom: 0.25rem;
 	--component-button-neutral-primary-md-padding-left: 0.75rem;
+	--component-button-neutral-primary-md-padding-with-icon-icon-left-left: 0.5rem;
 	--component-button-neutral-primary-md-typography-font: normal 700 0.875rem/1
 		'Open Sans';
 	--component-button-neutral-primary-md-typography-letter-spacing: -0.0125rem;
 	--component-button-neutral-primary-md-typography-font-width: 95;
+	--component-button-neutral-primary-md-icon-size: 1.25rem;
+	--component-button-neutral-primary-md-icon-gap: 0.25rem;
+	--component-button-neutral-primary-md-icon-button-width: 2.5rem;
 	--component-button-neutral-primary-lg-height: 3rem;
 	--component-button-neutral-primary-lg-padding-top: 0.25rem;
 	--component-button-neutral-primary-lg-padding-right: 1rem;
 	--component-button-neutral-primary-lg-padding-bottom: 0.25rem;
 	--component-button-neutral-primary-lg-padding-left: 1rem;
+	--component-button-neutral-primary-lg-padding-with-icon-icon-left-left: 0.75rem;
 	--component-button-neutral-primary-lg-typography-font: normal 700 1rem/1
 		'Open Sans';
 	--component-button-neutral-primary-lg-typography-letter-spacing: -0.0125rem;
 	--component-button-neutral-primary-lg-typography-font-width: 95;
+	--component-button-neutral-primary-lg-icon-size: 1.5rem;
+	--component-button-neutral-primary-lg-icon-gap: 0.25rem;
+	--component-button-neutral-primary-lg-icon-button-width: 3rem;
 	--component-button-neutral-secondary-shared-color: #000000;
 	--component-button-neutral-secondary-shared-background-color: none;
 	--component-button-neutral-secondary-shared-border-radius: 0.25rem;
@@ -184,35 +232,51 @@
 	--component-button-neutral-secondary-xs-padding-right: 0.5rem;
 	--component-button-neutral-secondary-xs-padding-bottom: 0.25rem;
 	--component-button-neutral-secondary-xs-padding-left: 0.5rem;
+	--component-button-neutral-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-neutral-secondary-xs-typography-font: normal 700
 		0.75rem/1 'Open Sans';
 	--component-button-neutral-secondary-xs-typography-letter-spacing: 0rem;
 	--component-button-neutral-secondary-xs-typography-font-width: 95;
+	--component-button-neutral-secondary-xs-icon-size: 1.125rem;
+	--component-button-neutral-secondary-xs-icon-gap: 0.25rem;
+	--component-button-neutral-secondary-xs-icon-button-width: 1.5rem;
 	--component-button-neutral-secondary-sm-height: 2rem;
 	--component-button-neutral-secondary-sm-padding-top: 0.25rem;
 	--component-button-neutral-secondary-sm-padding-right: 0.625rem;
 	--component-button-neutral-secondary-sm-padding-bottom: 0.25rem;
 	--component-button-neutral-secondary-sm-padding-left: 0.625rem;
+	--component-button-neutral-secondary-sm-padding-with-icon-icon-left-left: 0.5rem;
 	--component-button-neutral-secondary-sm-typography-font: normal 700
 		0.875rem/1 'Open Sans';
 	--component-button-neutral-secondary-sm-typography-letter-spacing: -0.0125rem;
 	--component-button-neutral-secondary-sm-typography-font-width: 95;
+	--component-button-neutral-secondary-sm-icon-size: 1.125rem;
+	--component-button-neutral-secondary-sm-icon-gap: 0.25rem;
+	--component-button-neutral-secondary-sm-icon-button-width: 2rem;
 	--component-button-neutral-secondary-md-height: 2.5rem;
 	--component-button-neutral-secondary-md-padding-top: 0.25rem;
 	--component-button-neutral-secondary-md-padding-right: 0.75rem;
 	--component-button-neutral-secondary-md-padding-bottom: 0.25rem;
 	--component-button-neutral-secondary-md-padding-left: 0.75rem;
+	--component-button-neutral-secondary-md-padding-with-icon-icon-left-left: 0.5rem;
 	--component-button-neutral-secondary-md-typography-font: normal 700
 		0.875rem/1 'Open Sans';
 	--component-button-neutral-secondary-md-typography-letter-spacing: -0.0125rem;
 	--component-button-neutral-secondary-md-typography-font-width: 95;
+	--component-button-neutral-secondary-md-icon-size: 1.25rem;
+	--component-button-neutral-secondary-md-icon-gap: 0.25rem;
+	--component-button-neutral-secondary-md-icon-button-width: 2.5rem;
 	--component-button-neutral-secondary-lg-height: 3rem;
 	--component-button-neutral-secondary-lg-padding-top: 0.25rem;
 	--component-button-neutral-secondary-lg-padding-right: 1rem;
 	--component-button-neutral-secondary-lg-padding-bottom: 0.25rem;
 	--component-button-neutral-secondary-lg-padding-left: 1rem;
+	--component-button-neutral-secondary-lg-padding-with-icon-icon-left-left: 0.75rem;
 	--component-button-neutral-secondary-lg-typography-font: normal 700 1rem/1
 		'Open Sans';
 	--component-button-neutral-secondary-lg-typography-letter-spacing: -0.0125rem;
 	--component-button-neutral-secondary-lg-typography-font-width: 95;
+	--component-button-neutral-secondary-lg-icon-size: 1.5rem;
+	--component-button-neutral-secondary-lg-icon-gap: 0.25rem;
+	--component-button-neutral-secondary-lg-icon-button-width: 3rem;
 }