@guardian/stand 0.0.16 → 0.0.18

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

@@ -20,7 +20,7 @@ export declare const iconButtonStyles: (theme: {
             'outline-offset': string;
         };
     };
-    'emphasised-primary': {
+    primary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -145,7 +145,7 @@ export declare const iconButtonStyles: (theme: {
             };
         };
     };
-    'emphasised-secondary': {
+    secondary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -270,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";

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

@@ -20,7 +20,7 @@ export declare const iconLinkButtonStyles: (theme: {
             'outline-offset': string;
         };
     };
-    'emphasised-primary': {
+    primary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -145,7 +145,7 @@ export declare const iconLinkButtonStyles: (theme: {
             };
         };
     };
-    'emphasised-secondary': {
+    secondary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -270,132 +270,7 @@ export declare const iconLinkButtonStyles: (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-link-button/types.d.ts

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

package/dist/types/components/inline-message/InlineMessage.d.ts

@@ -0,0 +1,2 @@
+import type { InlineMessageProps } from './types';
+export declare function InlineMessage({ children, level, hideIcon, icon, theme, cssOverrides, className, ...props }: InlineMessageProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/inline-message/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "InlineMessage";
+export declare const componentTsx = "import { InlineMessage } from '@guardian/stand/inline-message';\n\nexport const Component = () => (\n  <>\n\t<InlineMessage level=\"error\">Something went wrong</InlineMessage>\n\t<InlineMessage level=\"success\">Changes saved successfully</InlineMessage>\n\t<InlineMessage level=\"information\">\n\t\tYour session will expire soon\n\t</InlineMessage>\n\t<InlineMessage level=\"error\" hideIcon>\n\t\tThis message has no icon\n\t</InlineMessage>\n\t<InlineMessage\n\tlevel=\"success\"\n\ticon={\n\t\t<svg viewBox=\"-3 -3 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.36 2.5h-.905l-7.6 7.69-.905.905v.453h.905v9.056l.904.896h5.872v-6.333h2.715V21.5h5.89l.904-.932v-9.02h.905v-.453l-1.357-1.357-.001.005zm5.97 8.447-6.412-6.34-6.254 6.326v8.758h3.158V13.81l.452-.453h5.438l.443.453v5.88h3.176z\"\n\t\t/>\n\t\t</svg>\n\t}\n\t>\n\tThis message uses a custom svg icon\n\t</InlineMessage>\n  </>\n);\n";
+export declare const componentCss = "\n/* import the inlinemessage styles */\n@import '@guardian/stand/component/inlineMessage.css';\n\n.stand-inline-message {\n  display: var(--component-inline-message-shared-display);\n  align-items: var(--component-inline-message-shared-align-items);\n  gap: var(--component-inline-message-shared-gap);\n  font: var(--component-inline-message-shared-typography-font);\n  letter-spacing: var(\n    --component-inline-message-shared-typography-letter-spacing\n  );\n  font-variation-settings: \"wdth\"\n    var(--component-inline-message-shared-typography-font-width);\n}\n\n.stand-inline-message > .material-symbols {\n  font-size: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message > svg {\n  width: var(--component-inline-message-shared-icon-size);\n  height: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message-error {\n  color: var(--component-inline-message-error-color);\n  fill: var(--component-inline-message-error-color);\n}\n\n.stand-inline-message-success {\n  color: var(--component-inline-message-success-color);\n  fill: var(--component-inline-message-success-color);\n}\n\n.stand-inline-message-information {\n  color: var(--component-inline-message-information-color);\n  fill: var(--component-inline-message-information-color);\n}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n\t<span class=\"stand-inline-message stand-inline-message-error\">\n\t\t<span class=\"material-symbols\">warning</span> Something went wrong\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-success\">\n\t\t<span class=\"material-symbols\">check_circle</span> Changes saved successfully\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-information\">\n\t\t<span class=\"material-symbols\">info</span> Your session will expire soon\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-error\">\n\t\tThis message has no icon\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-success\">\n\t\t<svg viewBox=\"-3 -3 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.36 2.5h-.905l-7.6 7.69-.905.905v.453h.905v9.056l.904.896h5.872v-6.333h2.715V21.5h5.89l.904-.932v-9.02h.905v-.453l-1.357-1.357-.001.005zm5.97 8.447-6.412-6.34-6.254 6.326v8.758h3.158V13.81l.452-.453h5.438l.443.453v5.88h3.176z\"\n\t\t/>\n\t\t</svg>\n\t\tThis message uses a custom svg icon\n\t</span>\n</div>\n";
+export declare const componentJs = "\nimport { componentInlineMessage } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\t.js-stand-inline-message {\n\t\tdisplay: ${componentInlineMessage.shared.display};\n\t\talign-items: ${componentInlineMessage.shared['align-items']};\n\t\tgap: ${componentInlineMessage.shared.gap};\n\t\tfont: ${componentInlineMessage.shared.typography.font};\n\t\tletter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n\t}\n\n\t.js-stand-inline-message > .material-symbols {\n\t\tfont-size: ${componentInlineMessage.shared.icon.size};\n\t}\n\n\t.js-stand-inline-message > svg {\n\t\twidth: ${componentInlineMessage.shared.icon.size};\n\t\theight: ${componentInlineMessage.shared.icon.size};\n\t}\n\n\t.js-stand-inline-message-error {\n\t\tcolor: ${componentInlineMessage.error.color};\n\t\tfill: ${componentInlineMessage.error.color};\n\t}\n\n\t.js-stand-inline-message-success {\n\t\tcolor: ${componentInlineMessage.success.color};\n\t\tfill: ${componentInlineMessage.success.color};\n\t}\n\n\t.js-stand-inline-message-information {\n\t\tcolor: ${componentInlineMessage.information.color};\n\t\tfill: ${componentInlineMessage.information.color};\n\t}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the button components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container flow-column\">\n\t<span class=\"js-stand-inline-message js-stand-inline-message-error\">\n\t\t<span class=\"material-symbols\">warning</span> Something went wrong\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-success\">\n\t\t<span class=\"material-symbols\">check_circle</span> Changes saved successfully\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-information\">\n\t\t<span class=\"material-symbols\">info</span> Your session will expire soon\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-error\">\n\t\tThis message has no icon\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-success\">\n\t\t<svg viewBox=\"-3 -3 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.36 2.5h-.905l-7.6 7.69-.905.905v.453h.905v9.056l.904.896h5.872v-6.333h2.715V21.5h5.89l.904-.932v-9.02h.905v-.453l-1.357-1.357-.001.005zm5.97 8.447-6.412-6.34-6.254 6.326v8.758h3.158V13.81l.452-.453h5.438l.443.453v5.88h3.176z\"\n\t\t/>\n\t\t</svg>\n\t\tThis message uses a custom svg icon\n\t</span>\n</div>\n`;\n";

package/dist/types/components/inline-message/styles.d.ts

@@ -0,0 +1,8 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentInlineMessage } from '../../styleD/build/typescript/component/inlineMessage';
+import type { DeepPartial, Prettify } from '../../util/types';
+import type { InlineMessageProps } from './types';
+export type InlineMessageTheme = Prettify<ComponentInlineMessage>;
+export type PartialInlineMessageTheme = DeepPartial<InlineMessageTheme>;
+export declare const defaultInlineMessageTheme: InlineMessageTheme;
+export declare const inlineMessageStyles: (theme: InlineMessageTheme, { level }: Required<Pick<InlineMessageProps, 'level'>>) => SerializedStyles;

package/dist/types/components/inline-message/types.d.ts

@@ -0,0 +1,21 @@
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { IconProps } from '../icon/types';
+import type { InlineMessageTheme } from './styles';
+export interface InlineMessageProps extends DefaultPropsWithChildren<InlineMessageTheme> {
+    /**
+     * The severity level of the message, which determines its styling.
+     * This is a required prop.
+     * Levels: 'error', 'success', 'information'
+     */
+    level: keyof Omit<InlineMessageTheme, 'shared'>;
+    /**
+     * Optional prop to hide the default icon associated with the message level.
+     */
+    hideIcon?: boolean;
+    /**
+     * Override the default icon for the message by providing a custom icon, for example when not using material symbols.
+     * This can be either a string (for material symbols) or an SVG element.
+     * Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
+     */
+    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+}

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

@@ -1,5 +1,5 @@
 export declare const componentName = "LinkButton";
-export declare const componentTsx = "import { LinkButton } from '@guardian/stand/link-button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton href=\"#\">\n          \t\tLinkButton\n\t\t\t</LinkButton>\n\t\t\t<LinkButton isDisabled variant=\"emphasised-secondary\">\n\t\t\t\tDisabled LinkButton\n\t\t\t</LinkButton>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton\n\t\t\t\thref=\"#\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tLinkButton with Icon\n\t\t\t</LinkButton>\n\t\t\t<LinkButton\n\t\t\t\tisDisabled\n\t\t\t\thref=\"#\"\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled LinkButton with Icon\n\t\t\t</LinkButton>\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, .stand-button-emphasised-primary[data-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, .stand-button-neutral-secondary[data-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<a href=\"#\" class=\"stand-button stand-button-emphasised-primary\">LinkButton</a>\n    \t<a class=\"stand-button stand-button-neutral-secondary\" data-disabled>Disabled LinkButton</a>\n    </div>\n\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-emphasised-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t<a class=\"stand-button stand-button-neutral-secondary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\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, .js-stand-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-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, .js-stand-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-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<a href=\"#\" class=\"js-stand-button js-stand-button-emphasised-primary\">LinkButton</a>\n    \t\t<a class=\"js-stand-button js-stand-button-neutral-secondary\" data-disabled>Disabled LinkButton</a>\n    \t</div>\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-emphasised-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t\t<a class=\"js-stand-button js-stand-button-neutral-secondary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    \t</div>\n    </div>`;\n\n";
+export declare const componentTsx = "import { LinkButton } from '@guardian/stand/link-button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton href=\"#\">\n          \t\tLinkButton\n\t\t\t</LinkButton>\n\t\t\t<LinkButton isDisabled variant=\"secondary\">\n\t\t\t\tDisabled LinkButton\n\t\t\t</LinkButton>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton\n\t\t\t\thref=\"#\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tLinkButton with Icon\n\t\t\t</LinkButton>\n\t\t\t<LinkButton\n\t\t\t\tisDisabled\n\t\t\t\thref=\"#\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled LinkButton with Icon\n\t\t\t</LinkButton>\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, .stand-button-primary[data-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, .stand-button-tertiary[data-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<a href=\"#\" class=\"stand-button stand-button-primary\">LinkButton</a>\n    \t<a class=\"stand-button stand-button-tertiary\" data-disabled>Disabled LinkButton</a>\n    </div>\n\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t<a class=\"stand-button stand-button-tertiary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\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, .js-stand-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-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, .js-stand-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-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<a href=\"#\" class=\"js-stand-button js-stand-button-primary\">LinkButton</a>\n    \t\t<a class=\"js-stand-button js-stand-button-tertiary\" data-disabled>Disabled LinkButton</a>\n    \t</div>\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t\t<a class=\"js-stand-button js-stand-button-tertiary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    \t</div>\n    </div>`;\n\n";