@guardian/stand 0.0.15 → 0.0.17

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

@@ -0,0 +1,5 @@
+const semanticShadow = {
+  raised: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+};
+
+export { semanticShadow };

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/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 { 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.d.ts

@@ -14,6 +14,6 @@
  */
 export { Avatar } from './components/avatar/Avatar';
 export type { AvatarProps } from './components/avatar/types';
-export type { AvatarTheme } from './components/avatar/styles';
+export type { PartialAvatarTheme as AvatarTheme } from './components/avatar/styles';
 export { componentAvatar } from './styleD/build/typescript/component/avatar';
 export type { ComponentAvatar } from './styleD/build/typescript/component/avatar';

package/dist/types/button.d.ts

@@ -15,6 +15,6 @@
  */
 export { Button } from './components/button/Button';
 export type { ButtonProps } from './components/button/types';
-export type { ButtonTheme } from './components/button/styles';
+export type { PartialButtonTheme as ButtonTheme } from './components/button/styles';
 export { componentButton } from './styleD/build/typescript/component/button';
 export type { ComponentButton } from './styleD/build/typescript/component/button';

package/dist/types/byline.d.ts

@@ -20,6 +20,6 @@
  */
 export { Byline } from './components/byline/Byline';
 export type { BylineModel } from './components/byline/lib';
-export type { PartialBylineTheme } from './components/byline/theme';
+export type { PartialBylineTheme as BylineTheme } from './components/byline/theme';
 export { componentByline } from './styleD/build/typescript/component/byline';
 export type { ComponentByline } from './styleD/build/typescript/component/byline';

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

@@ -1,8 +1,9 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ComponentAvatar } from '../../styleD/build/typescript/component/avatar';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { AvatarProps } from './types';
 export type AvatarTheme = Prettify<ComponentAvatar>;
+export type PartialAvatarTheme = DeepPartial<AvatarTheme>;
 export declare const defaultAvatarTheme: AvatarTheme;
 export declare const avatarImageStyles: SerializedStyles;
 export declare const avatarStyles: (theme: AvatarTheme, { size, color }: Required<Pick<AvatarProps, 'size' | 'color'>>) => SerializedStyles;

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/styles.d.ts

@@ -1,7 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ComponentButton } from '../../styleD/build/typescript/component/button';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { ButtonProps } from './types';
 export type ButtonTheme = Prettify<ComponentButton>;
+export type PartialButtonTheme = DeepPartial<ButtonTheme>;
 export declare const defaultButtonTheme: ButtonTheme;
 export declare const buttonStyles: (theme: ButtonTheme, { size, variant }: Required<Pick<ButtonProps, 'size' | 'variant'>>, hasIcon?: boolean, isIconButton?: boolean) => SerializedStyles;

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
      */

package/dist/types/components/favicon/styles.d.ts

@@ -1,7 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
 import { type ComponentFavicon } from '../../styleD/build/typescript/component/favicon';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 export type FaviconTheme = Prettify<ComponentFavicon>;
+export type PartialFaviconTheme = DeepPartial<FaviconTheme>;
 export declare const defaultFaviconTheme: FaviconTheme;
 export declare const faviconStyles: (theme: FaviconTheme) => SerializedStyles;
 export declare const faviconTypographyStyles: (theme: FaviconTheme) => SerializedStyles;

package/dist/types/components/icon/styles.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentIcon } from '../../styleD/build/typescript/component/icon';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { IconProps } from './types';
 export type IconTheme = Prettify<ComponentIcon>;
+export type PartialIconTheme = DeepPartial<IconTheme>;
 export declare const defaultIconTheme: IconTheme;
 export declare const iconStyles: (theme: IconTheme, { size, fill, mode, }: Required<Pick<IconProps, "size">> & Pick<IconProps, "fill"> & {
     mode: 'text' | 'svg';

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

@@ -1,5 +1,5 @@
 export declare const componentName = "IconButton";
-export declare const componentTsx = "import { IconButton } from \"@guardian/stand/icon-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconButton\n          onPress={() => alert(\"You summoned a raven!\")}\n          symbol=\"raven\"\n          ariaLabel=\"Summon a raven\"\n        />\n        <IconButton\n          isDisabled\n          onPress={() => alert(\"You consulted with an owl!\")}\n          symbol=\"owl\"\n          ariaLabel=\"Consult with an owl\"\n\t\t  variant=\"neutral-secondary\"\n        />\n\t</>\n);\n\n";
-export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-emphasised-primary {\n\t\tcolor: var(--component-button-emphasised-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-emphasised-primary-md-icon-button-width);\n\t\theight: var(--component-button-emphasised-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-emphasised-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-emphasised-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-emphasised-primary-md-typography-font-width);\n\t\tborder: var(--component-button-emphasised-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-emphasised-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-emphasised-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-emphasised-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-active-border);\n\t}\n\t.stand-icon-button-emphasised-primary:disabled {\n\t\tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-neutral-secondary {\n\t\tcolor: var(--component-button-neutral-secondary-shared-color);\n\t\tbackground: var(--component-button-neutral-secondary-shared-background-color);\n\t\twidth: var(--component-button-neutral-secondary-md-icon-button-width);\n\t\theight: var(--component-button-neutral-secondary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-neutral-secondary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-neutral-secondary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-neutral-secondary-md-typography-font-width);\n\t\tborder: var(--component-button-neutral-secondary-shared-border);\n\t\tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n\t}\n\t.stand-icon-button-neutral-secondary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-hover-border);\n\t}\n\t.stand-icon-button-neutral-secondary:active {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-active-border);\n\t}\n\t.stand-icon-button-neutral-secondary:disabled, .stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n\t}\n\t.stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n\t}\n\n";
-export declare const componentHtml = "<div class=\"container\">\n    <button class=\"stand-icon-button stand-icon-button-emphasised-primary\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></button>\n    <button class=\"stand-icon-button stand-icon-button-neutral-secondary\" disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></button>\n</div>\n";
-export declare const componentJs = "\t// for ts/js\n\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-icon-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-icon-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-icon-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-icon-button-emphasised-primary {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"emphasised-primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-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-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-neutral-secondary {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"neutral-secondary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-neutral-secondary:disabled, .js-stand-icon-button-neutral-secondary[data-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-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-emphasised-primary\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></button>\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-neutral-secondary\" disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></button>\n\t</div>\n\t`;\n\n";
+export declare const componentTsx = "import { IconButton } from \"@guardian/stand/icon-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconButton\n          onPress={() => alert(\"You summoned a raven!\")}\n          symbol=\"raven\"\n          ariaLabel=\"Summon a raven\"\n        />\n        <IconButton\n          isDisabled\n          onPress={() => alert(\"You consulted with an owl!\")}\n          symbol=\"owl\"\n          ariaLabel=\"Consult with an owl\"\n\t\t  variant=\"tertiary\"\n        />\n\t</>\n);\n\n";
+export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-primary {\n\t\tcolor: var(--component-button-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-primary-md-icon-button-width);\n\t\theight: var(--component-button-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-primary-md-typography-font-width);\n\t\tborder: var(--component-button-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-active-border);\n\t}\n\t.stand-icon-button-primary:disabled {\n\t\tcolor: var(--component-button-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-primary > .material-symbols {\n\t\tfont-size: var(--component-button-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-tertiary {\n\t\tcolor: var(--component-button-tertiary-shared-color);\n\t\tbackground: var(--component-button-tertiary-shared-background-color);\n\t\twidth: var(--component-button-tertiary-md-icon-button-width);\n\t\theight: var(--component-button-tertiary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-tertiary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-tertiary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-tertiary-md-typography-font-width);\n\t\tborder: var(--component-button-tertiary-shared-border);\n\t\tborder-radius: var(--component-button-tertiary-shared-border-radius);\n\t}\n\t.stand-icon-button-tertiary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-hover-border);\n\t}\n\t.stand-icon-button-tertiary:active {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-active-border);\n\t}\n\t.stand-icon-button-tertiary:disabled, .stand-icon-button-tertiary[data-disabled] {\n\t\tcolor: var(--component-button-tertiary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-disabled-border);\n\t}\n\t.stand-icon-button-tertiary > .material-symbols {\n\t\tfont-size: var(--component-button-tertiary-md-icon-size);\n\t}\n\n";
+export declare const componentHtml = "<div class=\"container\">\n    <button class=\"stand-icon-button stand-icon-button-primary\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></button>\n    <button class=\"stand-icon-button stand-icon-button-tertiary\" disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></button>\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\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-icon-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-icon-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-icon-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-icon-button-primary {\n\t\tcolor: ${componentButton[\"primary\"].shared.color};\n\t\tbackground: ${componentButton[\"primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"primary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-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-icon-button-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-tertiary {\n\t\tcolor: ${componentButton[\"tertiary\"].shared.color};\n\t\tbackground: ${componentButton[\"tertiary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"tertiary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"tertiary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-tertiary:disabled, .js-stand-icon-button-tertiary[data-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-icon-button-tertiary > .material-symbols {\n\t\tfont-size: ${componentButton[\"tertiary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-primary\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></button>\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-tertiary\" disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></button>\n\t</div>\n\t`;\n\n";

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

@@ -1,5 +1,6 @@
-import type { ButtonTheme } from '../button/styles';
+import type { ButtonTheme, PartialButtonTheme } from '../button/styles';
 export type IconButtonTheme = ButtonTheme;
+export type PartialIconButtonTheme = PartialButtonTheme;
 export declare const defaultIconButtonTheme: ButtonTheme;
 export declare const iconButtonStyles: (theme: {
     shared: {
@@ -19,7 +20,7 @@ export declare const iconButtonStyles: (theme: {
             'outline-offset': string;
         };
     };
-    'emphasised-primary': {
+    primary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -144,7 +145,7 @@ export declare const iconButtonStyles: (theme: {
             };
         };
     };
-    'emphasised-secondary': {
+    secondary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -269,132 +270,7 @@ export declare const iconButtonStyles: (theme: {
             };
         };
     };
-    'neutral-primary': {
-        shared: {
-            color: string;
-            backgroundColor: string;
-            borderRadius: string;
-            border: string;
-            ':hover': {
-                backgroundColor: string;
-                border: string;
-            };
-            ':active': {
-                backgroundColor: string;
-                border: string;
-            };
-            ':disabled': {
-                color: string;
-                backgroundColor: string;
-                border: string;
-            };
-        };
-        xs: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        sm: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        md: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        lg: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-    };
-    'neutral-secondary': {
+    tertiary: {
         shared: {
             color: string;
             backgroundColor: string;

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

@@ -6,7 +6,7 @@ export interface IconButtonProps extends DefaultPropsWithChildren<IconButtonThem
     /**
      * Size variant of the avatar
      */
-    size?: keyof Omit<IconButtonTheme['emphasised-primary'], 'shared'>;
+    size?: keyof Omit<IconButtonTheme['primary'], 'shared'>;
     /**
      * Variant of the button
      */

package/dist/types/components/icon-link-button/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "IconLinkButton";
-export declare const componentTsx = "import { IconLinkButton } from \"@guardian/stand/icon-link-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconLinkButton\n          href=\"#\"\n          symbol=\"raven\"\n          ariaLabel=\"Summon a raven\"\n        />\n        <IconLinkButton\n          href=\"#\"\n          isDisabled\n          variant=\"emphasised-secondary\"\n          symbol=\"owl\"\n          ariaLabel=\"Consult with an owl\"\n        />\n\t</>\n);\n\n";
-export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-emphasised-primary {\n\t\tcolor: var(--component-button-emphasised-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-emphasised-primary-md-icon-button-width);\n\t\theight: var(--component-button-emphasised-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-emphasised-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-emphasised-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-emphasised-primary-md-typography-font-width);\n\t\tborder: var(--component-button-emphasised-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-emphasised-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-emphasised-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-emphasised-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-active-border);\n\t}\n\t.stand-icon-button-emphasised-primary:disabled {\n\t\tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-neutral-secondary {\n\t\tcolor: var(--component-button-neutral-secondary-shared-color);\n\t\tbackground: var(--component-button-neutral-secondary-shared-background-color);\n\t\twidth: var(--component-button-neutral-secondary-md-icon-button-width);\n\t\theight: var(--component-button-neutral-secondary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-neutral-secondary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-neutral-secondary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-neutral-secondary-md-typography-font-width);\n\t\tborder: var(--component-button-neutral-secondary-shared-border);\n\t\tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n\t}\n\t.stand-icon-button-neutral-secondary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-hover-border);\n\t}\n\t.stand-icon-button-neutral-secondary:active {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-active-border);\n\t}\n\t.stand-icon-button-neutral-secondary:disabled, .stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n\t}\n\t.stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n\t}\n\n";
-export declare const componentHtml = "<div class=\"container\">\n    <a class=\"stand-icon-button stand-icon-button-emphasised-primary\" href=\"#\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></a>\n    <a class=\"stand-icon-button stand-icon-button-neutral-secondary\" data-disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></a>\n</div>\n";
-export declare const componentJs = "\t// for ts/js\n\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-icon-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-icon-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-icon-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-icon-button-emphasised-primary {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"emphasised-primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-emphasised-primary:disabled, .js-stand-icon-button-emphasised-primary[data-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-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-neutral-secondary {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"neutral-secondary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-neutral-secondary:disabled, .js-stand-icon-button-neutral-secondary[data-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-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-emphasised-primary\" href=\"#\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></a>\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-neutral-secondary\" data-disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></a>\n\t</div>\n\t`;\n\n";
+export declare const componentTsx = "import { IconLinkButton } from \"@guardian/stand/icon-link-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconLinkButton\n          href=\"#\"\n          symbol=\"raven\"\n          ariaLabel=\"Summon a raven\"\n        />\n        <IconLinkButton\n          href=\"#\"\n          isDisabled\n          variant=\"secondary\"\n          symbol=\"owl\"\n          ariaLabel=\"Consult with an owl\"\n        />\n\t</>\n);\n\n";
+export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-primary {\n\t\tcolor: var(--component-button-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-primary-md-icon-button-width);\n\t\theight: var(--component-button-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-primary-md-typography-font-width);\n\t\tborder: var(--component-button-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-active-border);\n\t}\n\t.stand-icon-button-primary:disabled {\n\t\tcolor: var(--component-button-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-primary > .material-symbols {\n\t\tfont-size: var(--component-button-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-tertiary {\n\t\tcolor: var(--component-button-tertiary-shared-color);\n\t\tbackground: var(--component-button-tertiary-shared-background-color);\n\t\twidth: var(--component-button-tertiary-md-icon-button-width);\n\t\theight: var(--component-button-tertiary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-tertiary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-tertiary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-tertiary-md-typography-font-width);\n\t\tborder: var(--component-button-tertiary-shared-border);\n\t\tborder-radius: var(--component-button-tertiary-shared-border-radius);\n\t}\n\t.stand-icon-button-tertiary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-hover-border);\n\t}\n\t.stand-icon-button-tertiary:active {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-active-border);\n\t}\n\t.stand-icon-button-tertiary:disabled, .stand-icon-button-tertiary[data-disabled] {\n\t\tcolor: var(--component-button-tertiary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-disabled-border);\n\t}\n\t.stand-icon-button-tertiary > .material-symbols {\n\t\tfont-size: var(--component-button-tertiary-md-icon-size);\n\t}\n\n";
+export declare const componentHtml = "<div class=\"container\">\n    <a class=\"stand-icon-button stand-icon-button-primary\" href=\"#\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></a>\n    <a class=\"stand-icon-button stand-icon-button-tertiary\" data-disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></a>\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\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-icon-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-icon-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-icon-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-icon-button-primary {\n\t\tcolor: ${componentButton[\"primary\"].shared.color};\n\t\tbackground: ${componentButton[\"primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"primary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-primary:disabled, .js-stand-icon-button-primary[data-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-icon-button-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-tertiary {\n\t\tcolor: ${componentButton[\"tertiary\"].shared.color};\n\t\tbackground: ${componentButton[\"tertiary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"tertiary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"tertiary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-tertiary:disabled, .js-stand-icon-button-tertiary[data-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-icon-button-tertiary > .material-symbols {\n\t\tfont-size: ${componentButton[\"tertiary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-primary\" href=\"#\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></a>\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-tertiary\" data-disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></a>\n\t</div>\n\t`;\n\n";