@guardian/stand 0.0.16 → 0.0.18

package/dist/styleD/build/typescript/component/menu.cjs

@@ -56,6 +56,7 @@ const componentMenu = {
         left: "1rem"
       },
       "border-bottom": "0.0625rem solid #cccccc",
+      "background-color": "#ffffff",
       icon: {
         "grid-area": "icon",
         "align-self": "start",
@@ -94,7 +95,7 @@ const componentMenu = {
         "border-bottom": "none"
       },
       ":hover": {
-        "background-color": "#ededed"
+        "background-color": "#f6f6f6"
       },
       ":focus-visible": {
         outline: "0.125rem solid #0072a9",

package/dist/styleD/build/typescript/component/menu.js

@@ -54,6 +54,7 @@ const componentMenu = {
         left: "1rem"
       },
       "border-bottom": "0.0625rem solid #cccccc",
+      "background-color": "#ffffff",
       icon: {
         "grid-area": "icon",
         "align-self": "start",
@@ -92,7 +93,7 @@ const componentMenu = {
         "border-bottom": "none"
       },
       ":hover": {
-        "background-color": "#ededed"
+        "background-color": "#f6f6f6"
       },
       ":focus-visible": {
         outline: "0.125rem solid #0072a9",

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -2,11 +2,11 @@
 
 const semanticColors = {
   text: {
-    default: "#000000",
-    subdued: "#545454",
-    "inverse-default": "#dcdcdc",
-    "inverse-subdued": "#cccccc",
-    "inverse-strong": "#ffffff",
+    strong: "#000000",
+    weak: "#545454",
+    "strong-inverse": "#dcdcdc",
+    "weak-inverse": "#cccccc",
+    "stronger-inverse": "#ffffff",
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
@@ -21,60 +21,55 @@ const semanticColors = {
     "warm-purple": "#381350",
     magenta: "#581734",
     orange: "#693c16",
-    yellow: "#5b4a0b",
-    "interactive-disabled": "#999999"
+    yellow: "#5b4a0b"
   },
   bg: {
     base: "#ffffff",
-    "raised-1": "#f6f6f6",
-    "raised-2": "#ededed"
-  },
-  surface: {
-    "light-1": "#f6f6f6",
-    "light-2": "#ededed",
-    "dark-1": "#333333"
+    "raised-level-1": "#f6f6f6",
+    "raised-level-2": "#ededed"
   },
   border: {
-    default: "#8d8d8d",
-    secondary: "#cccccc",
-    tertiary: "#ededed",
-    strong: "#545454",
-    "inverse-strong": "#ffffff",
-    "interactive-emphasised": "#0d4289",
-    "interactive-neutral": "#545454",
-    "interactive-disabled": "#dcdcdc",
-    "interactive-focused": "#0072a9",
-    "interactive-selected": "#0072a9"
-  },
-  status: {
-    "status-draft": "#f1c21b",
-    "status-live": "#4e9e3e",
-    "status-selected": "#0072a9",
-    "status-focused": "#0072a9"
+    stronger: "#545454",
+    strong: "#8d8d8d",
+    weak: "#cccccc",
+    weaker: "#ededed",
+    "strong-inverse": "#ffffff",
+    disabled: "#dcdcdc",
+    accent: "#0d4289",
+    error: "#b42a19",
+    focused: "#0072a9",
+    selected: "#0072a9",
+    "selected-inverse": "#8abed7"
   },
   fill: {
-    "interactive-primary-emphasised": "#0d4289",
-    "interactive-primary-emphasised-hover": "#092f62",
-    "interactive-primary-emphasised-pressed": "#061d3c",
-    "interactive-secondary-emphasised-hover": "#e8f0fb",
-    "interactive-secondary-emphasised-pressed": "#c5d9f4",
-    "interactive-primary-neutral": "#545454",
-    "interactive-primary-neutral-hover": "#333333",
-    "interactive-primary-neutral-pressed": "#121212",
-    "interactive-secondary-neutral-hover": "#ededed",
-    "interactive-secondary-neutral-pressed": "#dcdcdc",
-    "interactive-disabled": "#dcdcdc",
-    "green-subtle": "#cde4c9",
-    "blue-subtle": "#c5d9f4",
-    "red-subtle": "#f5c6c0",
-    "cyan-subtle": "#b8d8e7",
-    "teal-subtle": "#c5dfe1",
-    "cool-purple-subtle": "#dbdff7",
-    "warm-purple-subtle": "#dac3e8",
-    "magenta-subtle": "#edc6d7",
-    "orange-subtle": "#fcddc6",
-    "yellow-subtle": "#fbeebf",
-    selected: "#005d8b"
+    "accent-strong": "#0d4289",
+    "accent-strong-hover": "#092f62",
+    "accent-strong-pressed": "#061d3c",
+    strong: "#545454",
+    "strong-hover": "#333333",
+    "strong-pressed": "#121212",
+    weak: "#ffffff",
+    "weak-hover": "#f6f6f6",
+    "weak-pressed": "#ededed",
+    disabled: "#dcdcdc",
+    "green-weak": "#cde4c9",
+    "blue-weak": "#c5d9f4",
+    "red-weak": "#f5c6c0",
+    "cyan-weak": "#b8d8e7",
+    "teal-weak": "#c5dfe1",
+    "cool-purple-weak": "#dbdff7",
+    "warm-purple-weak": "#dac3e8",
+    "magenta-weak": "#edc6d7",
+    "orange-weak": "#fcddc6",
+    "yellow-weak": "#fbeebf",
+    selected: "#005d8b",
+    "draft-strong": "#f1c21b",
+    "live-weak": "#aed2a6",
+    "warning-weak": "#fbeebf",
+    "information-weak": "#e8f0fb",
+    "error-weak": "#f5c6c0",
+    "error-strong": "#b42a19",
+    "success-weak": "#edf5ec"
   }
 };
 

package/dist/styleD/build/typescript/semantic/colors.js

@@ -1,10 +1,10 @@
 const semanticColors = {
   text: {
-    default: "#000000",
-    subdued: "#545454",
-    "inverse-default": "#dcdcdc",
-    "inverse-subdued": "#cccccc",
-    "inverse-strong": "#ffffff",
+    strong: "#000000",
+    weak: "#545454",
+    "strong-inverse": "#dcdcdc",
+    "weak-inverse": "#cccccc",
+    "stronger-inverse": "#ffffff",
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
@@ -19,60 +19,55 @@ const semanticColors = {
     "warm-purple": "#381350",
     magenta: "#581734",
     orange: "#693c16",
-    yellow: "#5b4a0b",
-    "interactive-disabled": "#999999"
+    yellow: "#5b4a0b"
   },
   bg: {
     base: "#ffffff",
-    "raised-1": "#f6f6f6",
-    "raised-2": "#ededed"
-  },
-  surface: {
-    "light-1": "#f6f6f6",
-    "light-2": "#ededed",
-    "dark-1": "#333333"
+    "raised-level-1": "#f6f6f6",
+    "raised-level-2": "#ededed"
   },
   border: {
-    default: "#8d8d8d",
-    secondary: "#cccccc",
-    tertiary: "#ededed",
-    strong: "#545454",
-    "inverse-strong": "#ffffff",
-    "interactive-emphasised": "#0d4289",
-    "interactive-neutral": "#545454",
-    "interactive-disabled": "#dcdcdc",
-    "interactive-focused": "#0072a9",
-    "interactive-selected": "#0072a9"
-  },
-  status: {
-    "status-draft": "#f1c21b",
-    "status-live": "#4e9e3e",
-    "status-selected": "#0072a9",
-    "status-focused": "#0072a9"
+    stronger: "#545454",
+    strong: "#8d8d8d",
+    weak: "#cccccc",
+    weaker: "#ededed",
+    "strong-inverse": "#ffffff",
+    disabled: "#dcdcdc",
+    accent: "#0d4289",
+    error: "#b42a19",
+    focused: "#0072a9",
+    selected: "#0072a9",
+    "selected-inverse": "#8abed7"
   },
   fill: {
-    "interactive-primary-emphasised": "#0d4289",
-    "interactive-primary-emphasised-hover": "#092f62",
-    "interactive-primary-emphasised-pressed": "#061d3c",
-    "interactive-secondary-emphasised-hover": "#e8f0fb",
-    "interactive-secondary-emphasised-pressed": "#c5d9f4",
-    "interactive-primary-neutral": "#545454",
-    "interactive-primary-neutral-hover": "#333333",
-    "interactive-primary-neutral-pressed": "#121212",
-    "interactive-secondary-neutral-hover": "#ededed",
-    "interactive-secondary-neutral-pressed": "#dcdcdc",
-    "interactive-disabled": "#dcdcdc",
-    "green-subtle": "#cde4c9",
-    "blue-subtle": "#c5d9f4",
-    "red-subtle": "#f5c6c0",
-    "cyan-subtle": "#b8d8e7",
-    "teal-subtle": "#c5dfe1",
-    "cool-purple-subtle": "#dbdff7",
-    "warm-purple-subtle": "#dac3e8",
-    "magenta-subtle": "#edc6d7",
-    "orange-subtle": "#fcddc6",
-    "yellow-subtle": "#fbeebf",
-    selected: "#005d8b"
+    "accent-strong": "#0d4289",
+    "accent-strong-hover": "#092f62",
+    "accent-strong-pressed": "#061d3c",
+    strong: "#545454",
+    "strong-hover": "#333333",
+    "strong-pressed": "#121212",
+    weak: "#ffffff",
+    "weak-hover": "#f6f6f6",
+    "weak-pressed": "#ededed",
+    disabled: "#dcdcdc",
+    "green-weak": "#cde4c9",
+    "blue-weak": "#c5d9f4",
+    "red-weak": "#f5c6c0",
+    "cyan-weak": "#b8d8e7",
+    "teal-weak": "#c5dfe1",
+    "cool-purple-weak": "#dbdff7",
+    "warm-purple-weak": "#dac3e8",
+    "magenta-weak": "#edc6d7",
+    "orange-weak": "#fcddc6",
+    "yellow-weak": "#fbeebf",
+    selected: "#005d8b",
+    "draft-strong": "#f1c21b",
+    "live-weak": "#aed2a6",
+    "warning-weak": "#fbeebf",
+    "information-weak": "#e8f0fb",
+    "error-weak": "#f5c6c0",
+    "error-strong": "#b42a19",
+    "success-weak": "#edf5ec"
   }
 };
 

package/dist/styleD/build/typescript/semantic/sizing.cjs

@@ -2,6 +2,7 @@
 
 const semanticSizing = {
   height: {
+    xxs: "1.25rem",
     xs: "1.5rem",
     sm: "2rem",
     md: "2.5rem",

package/dist/styleD/build/typescript/semantic/sizing.js

@@ -1,5 +1,6 @@
 const semanticSizing = {
   height: {
+    xxs: "1.25rem",
     xs: "1.5rem",
     sm: "2rem",
     md: "2.5rem",

package/dist/styleD/build/typescript/semantic/typography.cjs

@@ -205,6 +205,56 @@ const semanticTypography = {
     font: "normal 700 1rem/1 Open Sans",
     letterSpacing: "-0.0125rem",
     fontWidth: 95
+  },
+  "label-form-sm": {
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
+  },
+  "label-form-md": {
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.03125rem",
+    fontWidth: 95
+  },
+  "label-form-inline-sm": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "label-form-inline-md": {
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "label-form-compact-sm": {
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "label-form-compact-md": {
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 88
+  },
+  "label-form-inline-compact-sm": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "label-form-inline-compact-md": {
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "help-text-form-md": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "help-text-form-compact-md": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
   }
 };
 

package/dist/styleD/build/typescript/semantic/typography.js

@@ -203,6 +203,56 @@ const semanticTypography = {
     font: "normal 700 1rem/1 Open Sans",
     letterSpacing: "-0.0125rem",
     fontWidth: 95
+  },
+  "label-form-sm": {
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
+  },
+  "label-form-md": {
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.03125rem",
+    fontWidth: 95
+  },
+  "label-form-inline-sm": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "label-form-inline-md": {
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "label-form-compact-sm": {
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "label-form-compact-md": {
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 88
+  },
+  "label-form-inline-compact-sm": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "label-form-inline-compact-md": {
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "help-text-form-md": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "help-text-form-compact-md": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
   }
 };
 

package/dist/types/TopBar.d.ts

@@ -12,8 +12,17 @@
  * If you only need the built CSS (./component/TopBar.css),
  * you don't need to install these.
  */
-export { TopBarToolName } from './components/topbar/toolName/TopBarToolName';
-export type { TopBarToolNameProps } from './components/topbar/toolName/types';
-export type { PartialTopBarToolNameTheme as TopBarToolNameTheme } from './components/topbar/toolName/styles';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar';
 export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
+export { TopBarToolName } from './components/topbar/topBarToolName/TopBarToolName';
+export type { TopBarToolNameProps } from './components/topbar/topBarToolName/types';
+export type { PartialTopBarToolNameTheme as TopBarToolNameTheme } from './components/topbar/topBarToolName/styles';
+export { TopBarNavigation } from './components/topbar/topBarNavigation/TopBarNavigation';
+export type { TopBarNavigationProps } from './components/topbar/topBarNavigation/types';
+export type { PartialTopBarNavigationTheme as TopBarNavigationTheme } from './components/topbar/topBarNavigation/styles';
+export { TopBarItem } from './components/topbar/topBarItem/TopBarItem';
+export type { TopBarItemProps } from './components/topbar/topBarItem/types';
+export type { PartialTopBarItemTheme as TopBarItemTheme } from './components/topbar/topBarItem/styles';
+export { TopBar } from './components/topbar/TopBar';
+export type { TopBarProps } from './components/topbar/types';
+export type { PartialTopBarTheme as TopBarTheme } from './components/topbar/styles';

package/dist/types/avatar-button.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Avatar button component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `react-aria-components`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/avatar.css),
+ * you don't need to install these.
+ */
+export { AvatarButton } from './components/avatar-button/AvatarButton';
+export type { AvatarButtonProps } from './components/avatar-button/types';
+export type { PartialAvatarButtonTheme as AvatarButtonTheme } from './components/avatar-button/styles';

package/dist/types/avatar-link.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Avatar link component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `react-aria-components`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/avatar.css),
+ * you don't need to install these.
+ */
+export { AvatarLink } from './components/avatar-link/AvatarLink';
+export type { AvatarLinkProps } from './components/avatar-link/types';
+export type { PartialAvatarLinkTheme as AvatarLinkTheme } from './components/avatar-link/styles';

package/dist/types/components/avatar-button/AvatarButton.d.ts

@@ -0,0 +1,2 @@
+import { type AvatarButtonProps } from './types';
+export declare function AvatarButton(props: AvatarButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/avatar-button/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "AvatarButton";
+export declare const componentTsx = "import { AvatarButton } from '@guardian/stand/AvatarButton';\n\nexport const Component = () => {\n\treturn (\n\t\t<>\n\t\t\t<AvatarButton initials=\"AB\" color=\"blue\" />\n\t\t\t<AvatarButton\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t\tinitials=\"MM\"\n\t\t\t\tcolor=\"blue\"\n\t\t\t\tsize=\"md\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n";
+export declare const componentCss = "@import \"@guardian/stand/component/avatar.css\";\n\n    /* example setup of AvatarButton style using md size and blue color */\n    .stand-AvatarButton {\n    \tdisplay: var(--component-avatar-shared-display);\n    \talign-items: var(--component-avatar-shared-align-items);\n    \tjustify-content: var(--component-avatar-shared-justify-content);\n    \toverflow: var(--component-avatar-shared-overflow);\n    \tflex-shrink: var(--component-avatar-shared-flex-shrink);\n    \tborder-radius: var(--component-avatar-shared-border-radius);\n    \tbackground-color: var(--component-avatar-shared-color-blue-background);\n    \twidth: var(--component-avatar-md-size);\n    \theight: var(--component-avatar-md-size);\n    \tborder: var(--component-avatar-shared-color-blue-border);\n    \tcolor: var(--component-avatar-shared-color-blue-text);\n    \tfont: var(--component-avatar-md-typography-font);\n    \tletter-spacing: var(--component-avatar-md-typography-letter-spacing);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-avatar-md-typography-font-width);\n\n\t\tborder:\t var(--component-avatar-shared-button-border);\n\t\tpadding: var(--component-avatar-shared-button-padding);\n\t\tcursor: var(--component-avatar-shared-button-cursor);\n    }\n\n    /* example setup for AvatarButton image */\n    .stand-AvatarButton > img {\n    \twidth: 100%;\n    \theight: 100%;\n    \tobject-fit: cover;\n    }";
+export declare const componentHtml = "<div class=\"container\">\n\t<button href=\"#\" class=\"stand-AvatarButton\">AB</button>\n\t<button href=\"#\" class=\"stand-AvatarButton\">\n\t\t<img\n\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\talt=\"Mahesh Makani\"\n\t\t/>\n\t</button>\n</div>";
+export declare const componentJs = "\n\t// for ts/js\n\timport { componentAvatar } from \"@guardian/stand\";\n\n\tconst style = `\n\tdisplay: ${componentAvatar.shared.display};\n\talign-items: ${componentAvatar.shared[\"align-items\"]};\n\tjustify-content: ${componentAvatar.shared[\"justify-content\"]};\n\toverflow: ${componentAvatar.shared.overflow};\n\tflex-shrink: ${componentAvatar.shared[\"flex-shrink\"]};\n\tborder-radius: ${componentAvatar.shared[\"border-radius\"]};\n\tbackground-color: ${componentAvatar.shared.color.blue.background};\n\twidth: ${componentAvatar.md.size};\n\theight: ${componentAvatar.md.size};\n\tborder: ${componentAvatar.shared.color.blue.border};\n\tcolor: ${componentAvatar.shared.color.blue.text};\n\tfont: ${componentAvatar.md.typography.font};\n\tletter-spacing: ${componentAvatar.md.typography.letterSpacing};\n\tfont-variation-settings: 'wdth' ${componentAvatar.md.typography.fontWidth};\n\n\tbackground: ${componentAvatar.shared.button.background};\n\tborder: ${componentAvatar.shared.button.border};\n\tpadding: ${componentAvatar.shared.button.padding};\n\tcursor: ${componentAvatar.shared.button.cursor};\n\t`;\n\n\tconst imgStyle = `\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\t`;\n\n\t// e.g. adding to DOM using vanilla JS styles\n\tdocument.getElementById(\"app\").innerHTML = `\n\n\t<div class=\"container\">\n\t\t<button style=\"${style}\">AB</button>\n\t\t<button style=\"${style}\">\n\t\t\t<img\n\t\t\t\tstyle=\"${imgStyle}\"\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t/>\n\t\t</button>\n\t</div>\n`;\n";

package/dist/types/components/avatar-button/styles.d.ts

@@ -0,0 +1,6 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { AvatarTheme, PartialAvatarTheme } from '../avatar/styles';
+export type AvatarButtonTheme = AvatarTheme;
+export type PartialAvatarButtonTheme = PartialAvatarTheme;
+export declare const defaultAvatarButtonTheme: AvatarButtonTheme;
+export declare const avatarButtonStyles: (theme: AvatarButtonTheme) => SerializedStyles;

package/dist/types/components/avatar-button/types.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps as RACButtonProps } from 'react-aria-components';
+import type { AvatarProps } from '../avatar/types';
+export type AvatarButtonProps = AvatarProps & Omit<RACButtonProps, 'children'>;

package/dist/types/components/avatar-link/AvatarLink.d.ts

@@ -0,0 +1,2 @@
+import { type AvatarLinkProps } from './types';
+export declare function AvatarLink(props: AvatarLinkProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/avatar-link/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "AvatarLink";
+export declare const componentTsx = "import { AvatarLink } from '@guardian/stand/AvatarLink';\n\nexport const Component = () => {\n\treturn (\n\t\t<>\n\t\t\t<AvatarLink initials=\"AB\" color=\"blue\" />\n\t\t\t<AvatarLink\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t\tinitials=\"MM\"\n\t\t\t\tcolor=\"blue\"\n\t\t\t\tsize=\"md\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n";
+export declare const componentCss = "@import \"@guardian/stand/component/avatar.css\";\n\n    /* example setup of AvatarLink style using md size and blue color */\n    .stand-AvatarLink {\n    \tdisplay: var(--component-avatar-shared-display);\n    \talign-items: var(--component-avatar-shared-align-items);\n    \tjustify-content: var(--component-avatar-shared-justify-content);\n    \toverflow: var(--component-avatar-shared-overflow);\n    \tflex-shrink: var(--component-avatar-shared-flex-shrink);\n    \tborder-radius: var(--component-avatar-shared-border-radius);\n    \tbackground-color: var(--component-avatar-shared-color-blue-background);\n    \twidth: var(--component-avatar-md-size);\n    \theight: var(--component-avatar-md-size);\n    \tborder: var(--component-avatar-shared-color-blue-border);\n    \tcolor: var(--component-avatar-shared-color-blue-text);\n    \tfont: var(--component-avatar-md-typography-font);\n    \tletter-spacing: var(--component-avatar-md-typography-letter-spacing);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-avatar-md-typography-font-width);\n\n\t\ttext-decoration: var(--component-avatar-shared-link-text-decoration);\n    }\n\n    /* example setup for AvatarLink image */\n    .stand-AvatarLink > img {\n    \twidth: 100%;\n    \theight: 100%;\n    \tobject-fit: cover;\n    }";
+export declare const componentHtml = "<div class=\"container\">\n\t<a href=\"#\" class=\"stand-AvatarLink\">AB</a>\n\t<a href=\"#\" class=\"stand-AvatarLink\">\n\t\t<img\n\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\talt=\"Mahesh Makani\"\n\t\t/>\n\t</a>\n</div>";
+export declare const componentJs = "\n\t// for ts/js\n\timport { componentAvatar } from \"@guardian/stand\";\n\n\tconst style = `\n\tdisplay: ${componentAvatar.shared.display};\n\talign-items: ${componentAvatar.shared[\"align-items\"]};\n\tjustify-content: ${componentAvatar.shared[\"justify-content\"]};\n\toverflow: ${componentAvatar.shared.overflow};\n\tflex-shrink: ${componentAvatar.shared[\"flex-shrink\"]};\n\tborder-radius: ${componentAvatar.shared[\"border-radius\"]};\n\tbackground-color: ${componentAvatar.shared.color.blue.background};\n\twidth: ${componentAvatar.md.size};\n\theight: ${componentAvatar.md.size};\n\tborder: ${componentAvatar.shared.color.blue.border};\n\tcolor: ${componentAvatar.shared.color.blue.text};\n\tfont: ${componentAvatar.md.typography.font};\n\tletter-spacing: ${componentAvatar.md.typography.letterSpacing};\n\tfont-variation-settings: 'wdth' ${componentAvatar.md.typography.fontWidth};\n\n\ttext-decoration: ${componentAvatar.shared.link.textDecoration};\n\t`;\n\n\tconst imgStyle = `\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\t`;\n\n\t// e.g. adding to DOM using vanilla JS styles\n\tdocument.getElementById(\"app\").innerHTML = `\n\n\t<div class=\"container\">\n\t\t<a href=\"#\" style=\"${style}\">AB</a>\n\t\t<a href=\"#\" style=\"${style}\">\n\t\t\t<img\n\t\t\t\tstyle=\"${imgStyle}\"\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t/>\n\t\t</a>\n\t</div>\n`;\n";

package/dist/types/components/avatar-link/styles.d.ts

@@ -0,0 +1,6 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { AvatarTheme, PartialAvatarTheme } from '../avatar/styles';
+export type AvatarLinkTheme = AvatarTheme;
+export type PartialAvatarLinkTheme = PartialAvatarTheme;
+export declare const defaultAvatarLinkTheme: AvatarTheme;
+export declare const avatarLinkStyles: (theme: AvatarLinkTheme) => SerializedStyles;

package/dist/types/components/avatar-link/types.d.ts

@@ -0,0 +1,3 @@
+import type { LinkProps as RACLinkProps } from 'react-aria-components';
+import type { AvatarProps } from '../avatar/types';
+export type AvatarLinkProps = AvatarProps & RACLinkProps;

package/dist/types/components/button/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "Button";
-export declare const componentTsx = "import { Button } from '@guardian/stand/button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<Button onPress={() => alert('Button Clicked from React')}>Button</Button>\n\t\t\t<Button isDisabled onPress={() => alert('Button Clicked from React')}>\n\t\t\t\tDisabled Button\n\t\t\t</Button>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Button\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tButton with Icon\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tisDisabled\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled Button with Icon\n\t\t\t</Button>\n\t\t</div>\n\t</>\n);\n\n";
-export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n    .stand-button {\n    \tdisplay: var(--component-button-shared-display);\n    \t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n    \ttext-align: var(--component-button-shared-text-align);\n    \tbox-shadow: var(--component-button-shared-box-shadow);\n    \ttext-decoration: var(--component-button-shared-text-decoration);\n    \tcursor: var(--component-button-shared-cursor);\n    \tjustify-content: var(--component-button-shared-justify-content);\n    \talign-items: var(--component-button-shared-align-items);\n    }\n    .stand-button:focus-visible {\n    \toutline: var(--component-button-shared-focus-visible-outline);\n    \toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n    }\n    .stand-button:disabled {\n    \tcursor: var(--component-button-shared-disabled-cursor);\n    }\n\n    /* example setup of button/link button style using md size and emphasised primary variant */\n    .stand-button-emphasised-primary {\n    \tcolor: var(--component-button-emphasised-primary-shared-color);\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-background-color\n    \t);\n    \theight: var(--component-button-emphasised-primary-md-height);\n    \tpadding: var(--component-button-emphasised-primary-md-padding-top)\n    \tvar(--component-button-emphasised-primary-md-padding-right)\n    \tvar(--component-button-emphasised-primary-md-padding-bottom)\n    \tvar(--component-button-emphasised-primary-md-padding-left);\n    \tfont: var(--component-button-emphasised-primary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-emphasised-primary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-emphasised-primary-md-typography-font-width);\n    \tborder: var(--component-button-emphasised-primary-shared-border);\n    \tborder-radius: var(\n    \t\t--component-button-emphasised-primary-shared-border-radius\n    \t);\n    }\n    .stand-button-emphasised-primary:hover {\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-hover-border);\n    }\n    .stand-button-emphasised-primary:active {\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-active-border);\n    }\n    .stand-button-emphasised-primary:disabled {\n    \tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n    \t}\n    \t.stand-button-emphasised-primary > .material-symbols {\n    \tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n    \t}\n    \t.stand-button-emphasised-primary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-emphasised-primary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-emphasised-primary-md-icon-gap);\n    }\n\n    /* example setup of button/link button style using md size and neutral secondary variant */\n    .stand-button-neutral-secondary {\n    \tcolor: var(--component-button-neutral-secondary-shared-color);\n    \tbackground: var(--component-button-neutral-secondary-shared-background-color);\n    \theight: var(--component-button-neutral-secondary-md-height);\n    \tpadding: var(--component-button-neutral-secondary-md-padding-top)\n    \tvar(--component-button-neutral-secondary-md-padding-right)\n    \tvar(--component-button-neutral-secondary-md-padding-bottom)\n    \tvar(--component-button-neutral-secondary-md-padding-left);\n    \tfont: var(--component-button-neutral-secondary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-neutral-secondary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-neutral-secondary-md-typography-font-width);\n    \tborder: var(--component-button-neutral-secondary-shared-border);\n    \tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n    }\n    .stand-button-neutral-secondary:hover {\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-hover-border);\n    }\n    .stand-button-neutral-secondary:active {\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-active-border);\n    }\n    .stand-button-neutral-secondary:disabled {\n    \tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n    }\n    .stand-button-neutral-secondary > .material-symbols {\n    \tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n    }\n    .stand-button-neutral-secondary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-neutral-secondary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-neutral-secondary-md-icon-gap);\n    }\n\n";
-export declare const componentHtml = "<div class=\"container flow-column\">\n    <div class=\"container\">\n    \t<button class=\"stand-button stand-button-emphasised-primary\">Button</button>\n    \t<button class=\"stand-button stand-button-emphasised-primary\" disabled>Disabled Button</button>\n    </div>\n\n    <div class=\"container\">\n    \t<button class=\"stand-button stand-button-neutral-secondary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n    \t<button class=\"stand-button stand-button-neutral-secondary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n    </div>\n\n</div>\n";
-export declare const componentJs = "\t// for ts/js\n\t\timport { componentButton } from \"@guardian/stand\";\n\n    \t// example of creating a stylesheet in js\n    \tconst sheet = new CSSStyleSheet();\n\n    \t// apply the rules to the sheet\n    \tsheet.replaceSync(`\n    \t/* shared button styles for all variants */\n    \t.js-stand-button {\n    \t\tdisplay: ${componentButton.shared.display};\n    \t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n    \t\ttext-align: ${componentButton.shared[\"text-align\"]};\n    \t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n    \t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n    \t\tcursor: ${componentButton.shared.cursor};\n    \t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n    \t\talign-items: ${componentButton.shared[\"align-items\"]};\n    \t}\n    \t.js-stand-button:focus-visible {\n    \t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n    \t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n    \t}\n    \t.js-stand-button:disabled {\n    \t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n    \t}\n\n    \t/* example setup of button/link button style using md size and emphasised primary variant */\n    \t.js-stand-button-emphasised-primary {\n    \t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n    \t\tpadding: ${componentButton[\"emphasised-primary\"].md.padding.top}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.right}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.bottom}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-emphasised-primary:hover {\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n    \t}\n    \t.js-stand-button-emphasised-primary:active {\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-emphasised-primary:disabled {\n    \t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-emphasised-primary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-emphasised-primary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"emphasised-primary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"emphasised-primary\"].md.icon.gap};\n    \t}\n\n    \t/* example setup of button/link button style using md size and neutral secondary variant */\n    \t.js-stand-button-neutral-secondary {\n    \t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n    \t\tpadding: ${componentButton[\"neutral-secondary\"].md.padding.top}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.right}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.bottom}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-neutral-secondary:hover {\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary:active {\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary:disabled {\n    \t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-neutral-secondary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"neutral-secondary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"neutral-secondary\"].md.icon.gap};\n    \t}\n\n    `);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the button components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n    \t<div class=\"container\">\n    \t\t<button class=\"js-stand-button js-stand-button-emphasised-primary\">Button</button>\n    \t\t<button class=\"js-stand-button js-stand-button-emphasised-primary\" disabled>Disabled Button</button>\n    \t</div>\n    \t<div class=\"container\">\n    \t\t<button class=\"js-stand-button js-stand-button-neutral-secondary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n    \t\t<button class=\"js-stand-button js-stand-button-neutral-secondary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n    \t</div>\n    </div>`;\n\n";
+export declare const componentTsx = "import { Button } from '@guardian/stand/button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<Button onPress={() => alert('Button Clicked from React')}>Button</Button>\n\t\t\t<Button isDisabled onPress={() => alert('Button Clicked from React')}>\n\t\t\t\tDisabled Button\n\t\t\t</Button>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Button\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tButton with Icon\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tisDisabled\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled Button with Icon\n\t\t\t</Button>\n\t\t</div>\n\t</>\n);\n\n";
+export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n    .stand-button {\n    \tdisplay: var(--component-button-shared-display);\n    \t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n    \ttext-align: var(--component-button-shared-text-align);\n    \tbox-shadow: var(--component-button-shared-box-shadow);\n    \ttext-decoration: var(--component-button-shared-text-decoration);\n    \tcursor: var(--component-button-shared-cursor);\n    \tjustify-content: var(--component-button-shared-justify-content);\n    \talign-items: var(--component-button-shared-align-items);\n    }\n    .stand-button:focus-visible {\n    \toutline: var(--component-button-shared-focus-visible-outline);\n    \toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n    }\n    .stand-button:disabled {\n    \tcursor: var(--component-button-shared-disabled-cursor);\n    }\n\n    /* example setup of button/link button style using md size and emphasised primary variant */\n    .stand-button-primary {\n    \tcolor: var(--component-button-primary-shared-color);\n    \tbackground: var(\n    \t\t--component-button-primary-shared-background-color\n    \t);\n    \theight: var(--component-button-primary-md-height);\n    \tpadding: var(--component-button-primary-md-padding-top)\n    \tvar(--component-button-primary-md-padding-right)\n    \tvar(--component-button-primary-md-padding-bottom)\n    \tvar(--component-button-primary-md-padding-left);\n    \tfont: var(--component-button-primary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-primary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-primary-md-typography-font-width);\n    \tborder: var(--component-button-primary-shared-border);\n    \tborder-radius: var(\n    \t\t--component-button-primary-shared-border-radius\n    \t);\n    }\n    .stand-button-primary:hover {\n    \tbackground: var(\n    \t\t--component-button-primary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-primary-shared-hover-border);\n    }\n    .stand-button-primary:active {\n    \tbackground: var(\n    \t\t--component-button-primary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-primary-shared-active-border);\n    }\n    .stand-button-primary:disabled {\n    \tcolor: var(--component-button-primary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-primary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-primary-shared-disabled-border);\n    \t}\n    \t.stand-button-primary > .material-symbols {\n    \tfont-size: var(--component-button-primary-md-icon-size);\n    \t}\n    \t.stand-button-primary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-primary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-primary-md-icon-gap);\n    }\n\n    /* example setup of button/link button style using md size and neutral secondary variant */\n    .stand-button-tertiary {\n    \tcolor: var(--component-button-tertiary-shared-color);\n    \tbackground: var(--component-button-tertiary-shared-background-color);\n    \theight: var(--component-button-tertiary-md-height);\n    \tpadding: var(--component-button-tertiary-md-padding-top)\n    \tvar(--component-button-tertiary-md-padding-right)\n    \tvar(--component-button-tertiary-md-padding-bottom)\n    \tvar(--component-button-tertiary-md-padding-left);\n    \tfont: var(--component-button-tertiary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-tertiary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-tertiary-md-typography-font-width);\n    \tborder: var(--component-button-tertiary-shared-border);\n    \tborder-radius: var(--component-button-tertiary-shared-border-radius);\n    }\n    .stand-button-tertiary:hover {\n    \tbackground: var(\n    \t\t--component-button-tertiary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-tertiary-shared-hover-border);\n    }\n    .stand-button-tertiary:active {\n    \tbackground: var(\n    \t\t--component-button-tertiary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-tertiary-shared-active-border);\n    }\n    .stand-button-tertiary:disabled {\n    \tcolor: var(--component-button-tertiary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-tertiary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-tertiary-shared-disabled-border);\n    }\n    .stand-button-tertiary > .material-symbols {\n    \tfont-size: var(--component-button-tertiary-md-icon-size);\n    }\n    .stand-button-tertiary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-tertiary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-tertiary-md-icon-gap);\n    }\n\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n    <div class=\"container\">\n    \t<button class=\"stand-button stand-button-primary\">Button</button>\n    \t<button class=\"stand-button stand-button-primary\" disabled>Disabled Button</button>\n    </div>\n\n    <div class=\"container\">\n    \t<button class=\"stand-button stand-button-tertiary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n    \t<button class=\"stand-button stand-button-tertiary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n    </div>\n\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\t\timport { componentButton } from \"@guardian/stand\";\n\n    \t// example of creating a stylesheet in js\n    \tconst sheet = new CSSStyleSheet();\n\n    \t// apply the rules to the sheet\n    \tsheet.replaceSync(`\n    \t/* shared button styles for all variants */\n    \t.js-stand-button {\n    \t\tdisplay: ${componentButton.shared.display};\n    \t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n    \t\ttext-align: ${componentButton.shared[\"text-align\"]};\n    \t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n    \t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n    \t\tcursor: ${componentButton.shared.cursor};\n    \t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n    \t\talign-items: ${componentButton.shared[\"align-items\"]};\n    \t}\n    \t.js-stand-button:focus-visible {\n    \t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n    \t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n    \t}\n    \t.js-stand-button:disabled {\n    \t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n    \t}\n\n    \t/* example setup of button/link button style using md size and emphasised primary variant */\n    \t.js-stand-button-primary {\n    \t\tcolor: ${componentButton[\"primary\"].shared.color};\n    \t\tbackground: ${componentButton[\"primary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"primary\"].md.height};\n    \t\tpadding: ${componentButton[\"primary\"].md.padding.top}\n    \t\t${componentButton[\"primary\"].md.padding.right}\n    \t\t${componentButton[\"primary\"].md.padding.bottom}\n    \t\t${componentButton[\"primary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"primary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"primary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"primary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"primary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"primary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-primary:hover {\n    \t\tbackground: ${componentButton[\"primary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"primary\"].shared[\":hover\"].border}\n    \t}\n    \t.js-stand-button-primary:active {\n    \t\tbackground: ${componentButton[\"primary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"primary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-primary:disabled {\n    \t\tcolor: ${componentButton[\"primary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"primary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"primary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-primary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"primary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-primary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"primary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"primary\"].md.icon.gap};\n    \t}\n\n    \t/* example setup of button/link button style using md size and neutral secondary variant */\n    \t.js-stand-button-tertiary {\n    \t\tcolor: ${componentButton[\"tertiary\"].shared.color};\n    \t\tbackground: ${componentButton[\"tertiary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"tertiary\"].md.height};\n    \t\tpadding: ${componentButton[\"tertiary\"].md.padding.top}\n    \t\t${componentButton[\"tertiary\"].md.padding.right}\n    \t\t${componentButton[\"tertiary\"].md.padding.bottom}\n    \t\t${componentButton[\"tertiary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"tertiary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"tertiary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"tertiary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"tertiary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"tertiary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-tertiary:hover {\n    \t\tbackground: ${componentButton[\"tertiary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"tertiary\"].shared[\":hover\"].border};\n    \t}\n    \t.js-stand-button-tertiary:active {\n    \t\tbackground: ${componentButton[\"tertiary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"tertiary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-tertiary:disabled {\n    \t\tcolor: ${componentButton[\"tertiary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"tertiary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"tertiary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-tertiary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"tertiary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-tertiary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"tertiary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"tertiary\"].md.icon.gap};\n    \t}\n\n    `);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the button components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n    \t<div class=\"container\">\n    \t\t<button class=\"js-stand-button js-stand-button-primary\">Button</button>\n    \t\t<button class=\"js-stand-button js-stand-button-primary\" disabled>Disabled Button</button>\n    \t</div>\n    \t<div class=\"container\">\n    \t\t<button class=\"js-stand-button js-stand-button-tertiary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n    \t\t<button class=\"js-stand-button js-stand-button-tertiary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n    \t</div>\n    </div>`;\n\n";

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

@@ -6,7 +6,7 @@ export interface ButtonProps extends DefaultProps<ButtonTheme, RACButtonProps['c
     /**
      * Size variant of the button
      */
-    size?: keyof Omit<ButtonTheme['emphasised-primary'], 'shared'>;
+    size?: keyof Omit<ButtonTheme['primary'], 'shared'>;
     /**
      * Variant of the button
      */