@guardian/stand 0.0.38 → 0.0.39

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Icon";
+export declare const componentTsx = "import { Icon } from '@guardian/stand/Icon';\nimport { baseColors } from '@guardian/stand';\n\nexport const Component = () => (\n\t<>\n\t\t<div\n\t\t\tclassName=\"container\"\n\t\t>\n\t\t\tMaterial Symbols\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Icon size=\"lg\" symbol=\"raven\" />\n\t\t\t<Icon size=\"lg\" symbol=\"owl\" fill={baseColors.warmPurple[400]} />\n\t\t</div>\n\t\t<div\n\t\t\tclassName=\"container\"\n\t\t>\n\t\t\tSVGs\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Icon size=\"lg\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg>\n\t\t\t</Icon>\n\t\t\t<Icon size=\"lg\" fill={baseColors.warmPurple[400]}>\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg>\n\t\t\t</Icon>\n\t\t</div>\n\t</>\n);\n\n";
+export declare const componentCss = "\n/* import the icon styles */\n@import '@guardian/stand/component/icon.css';\n/* color styles for customisation */\n@import \"@guardian/stand/base/colors.css\";\n\n.container {\n  display: flex;\n  gap: var(--base-spacing-4-rem);\n  margin-top: var(--base-spacing-4-rem);\n}\n\n.stand-icon {\n  display: var(--component-icon-shared-display);\n  user-select: var(--component-icon-shared-user-select);\n  font-size: var(--component-icon-lg-size);\n}\n\n.stand-icon-font-color {\n  color: var(--base-colors-warm-purple-400);\n}\n\n.stand-icon-svg > svg {\n  width: var(--component-icon-lg-size);\n  height: var(--component-icon-lg-size);\n}\n\n.stand-icon-svg-color > svg {\n  fill: var(--base-colors-warm-purple-400);\n}\n\n";
+export declare const componentHtml = "<div class=\"container\">Material Symbols</div>\n    <div class=\"container\">\n      <span class=\"material-symbols stand-icon\">raven</span>\n      <span class=\"material-symbols stand-icon stand-icon-font-color\">owl</span>\n    </div>\n    <div class=\"container\">SVGs</div>\n    <div class=\"container\">\n      <span class=\"material-symbols stand-icon stand-icon-svg\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg></span>\n      <span class=\"material-symbols stand-icon stand-icon-svg stand-icon-svg-color\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg></span>\n    </div>";
+export declare const componentJs = "// for ts/js\nimport { componentIcon, baseColors } from \"@guardian/stand\";\n\nconst iconStyles = `\n  display: ${componentIcon.shared.display};\n  user-select: ${componentIcon.shared.userSelect};\n  font-size: ${componentIcon.lg.size};\n`;\n\nconst iconFontColorStyles = `\n  ${iconStyles}\n  color: ${baseColors.warmPurple[400]};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.lg.size};\n  height: ${componentIcon.lg.size};\n`;\n\nconst iconSvgColorStyles = `\n  ${iconSvgStyles}\n  fill: ${baseColors.warmPurple[400]};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n  <div style=\"margin-top: 4px;\">Material Symbols</div>\n  <div class=\"container\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n    <span class=\"material-symbols\" style=\"${iconFontColorStyles}\">owl</span>\n  </div>\n  <div style=\"margin-top: 4px;\">SVGs</div>\n  <div class=\"container\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg></span>\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgColorStyles}\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg></span>\n  </div>\n`;\n";

package/dist/types/components/{icon-button → IconButton}/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=\"tertiary\"\n        />\n\t</>\n);\n\n";
+export declare const componentTsx = "import { IconButton } from \"@guardian/stand/IconButton\";\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";
+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.webkitAppearance};\n\t\ttext-align: ${componentButton.shared.textAlign};\n\t\tbox-shadow: ${componentButton.shared.boxShadow};\n\t\ttext-decoration: ${componentButton.shared.textDecoration};\n\t\tcursor: ${componentButton.shared.cursor};\n\t\tjustify-content: ${componentButton.shared.justifyContent};\n\t\talign-items: ${componentButton.shared.alignItems};\n\t}\n\t.js-stand-icon-button:focus-visible {\n\t\toutline: ${componentButton.shared.focusVisible.outline};\n\t\toutline-offset: ${componentButton.shared.focusVisible.outlineOffset};\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 → IconButton}/styles.d.ts

@@ -1,23 +1,23 @@
-import type { ButtonTheme, PartialButtonTheme } 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: {
         display: string;
-        '-webkit-appearance': string;
-        'text-align': string;
-        'box-shadow': string;
+        webkitAppearance: string;
+        textAlign: string;
+        boxShadow: string;
         cursor: string;
-        'justify-content': string;
-        'align-items': string;
-        'text-decoration': string;
-        ':disabled': {
+        justifyContent: string;
+        alignItems: string;
+        textDecoration: string;
+        disabled: {
             cursor: string;
         };
-        ':focus-visible': {
+        focusVisible: {
             outline: string;
-            'outline-offset': string;
+            outlineOffset: string;
         };
     };
     primary: {
@@ -26,15 +26,15 @@ export declare const iconButtonStyles: (theme: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -151,15 +151,15 @@ export declare const iconButtonStyles: (theme: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -276,15 +276,15 @@ export declare const iconButtonStyles: (theme: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -395,4 +395,4 @@ export declare const iconButtonStyles: (theme: {
             };
         };
     };
-}, { size, variant }: Required<Pick<import("../button/types").ButtonProps, "size" | "variant">>, hasIcon?: boolean, isIconButton?: boolean) => import("@emotion/react").SerializedStyles;
+}, { size, variant }: Required<Pick<import("../Button/types").ButtonProps, "size" | "variant">>, hasIcon?: boolean, isIconButton?: boolean) => import("@emotion/react").SerializedStyles;

package/dist/types/components/{icon-button → IconButton}/types.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonProps as RACButtonProps } from 'react-aria-components';
 import type { DefaultPropsWithChildren } from '../../util/types';
-import type { IconProps, MaterialSymbol } from '../icon/types';
+import type { IconProps, MaterialSymbol } from '../Icon/types';
 import type { IconButtonTheme } from './styles';
 export interface IconButtonProps extends DefaultPropsWithChildren<IconButtonTheme, RACButtonProps['className'], IconProps['children']>, Omit<RACButtonProps, 'children'> {
     /**

package/dist/types/components/{icon-link-button → IconLinkButton}/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=\"secondary\"\n          symbol=\"owl\"\n          ariaLabel=\"Consult with an owl\"\n        />\n\t</>\n);\n\n";
+export declare const componentTsx = "import { IconLinkButton } from \"@guardian/stand/IconLinkButton\";\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";
+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.webkitAppearance};\n\t\ttext-align: ${componentButton.shared.textAlign};\n\t\tbox-shadow: ${componentButton.shared.boxShadow};\n\t\ttext-decoration: ${componentButton.shared.textDecoration};\n\t\tcursor: ${componentButton.shared.cursor};\n\t\tjustify-content: ${componentButton.shared.justifyContent};\n\t\talign-items: ${componentButton.shared.alignItems};\n\t}\n\t.js-stand-icon-button:focus-visible {\n\t\toutline: ${componentButton.shared.focusVisible.outline};\n\t\toutline-offset: ${componentButton.shared.focusVisible.outlineOffset};\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 → IconLinkButton}/styles.d.ts

@@ -1,23 +1,23 @@
-import type { ButtonTheme, PartialButtonTheme } from '../button/styles';
+import type { ButtonTheme, PartialButtonTheme } from '../Button/styles';
 export type IconLinkButtonTheme = ButtonTheme;
 export type PartialIconLinkButtonTheme = PartialButtonTheme;
 export declare const defaultIconLinkButtonTheme: ButtonTheme;
 export declare const iconLinkButtonStyles: (theme: {
     shared: {
         display: string;
-        '-webkit-appearance': string;
-        'text-align': string;
-        'box-shadow': string;
+        webkitAppearance: string;
+        textAlign: string;
+        boxShadow: string;
         cursor: string;
-        'justify-content': string;
-        'align-items': string;
-        'text-decoration': string;
-        ':disabled': {
+        justifyContent: string;
+        alignItems: string;
+        textDecoration: string;
+        disabled: {
             cursor: string;
         };
-        ':focus-visible': {
+        focusVisible: {
             outline: string;
-            'outline-offset': string;
+            outlineOffset: string;
         };
     };
     primary: {
@@ -26,15 +26,15 @@ export declare const iconLinkButtonStyles: (theme: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -151,15 +151,15 @@ export declare const iconLinkButtonStyles: (theme: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -276,15 +276,15 @@ export declare const iconLinkButtonStyles: (theme: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -395,4 +395,4 @@ export declare const iconLinkButtonStyles: (theme: {
             };
         };
     };
-}, { size, variant }: Required<Pick<import("../button/types").ButtonProps, "size" | "variant">>, hasIcon?: boolean, isIconButton?: boolean) => import("@emotion/react").SerializedStyles;
+}, { size, variant }: Required<Pick<import("../Button/types").ButtonProps, "size" | "variant">>, hasIcon?: boolean, isIconButton?: boolean) => import("@emotion/react").SerializedStyles;

package/dist/types/components/{icon-link-button → IconLinkButton}/types.d.ts

@@ -1,6 +1,6 @@
 import type { LinkProps as RACLinkProps } from 'react-aria-components';
 import type { DefaultPropsWithChildren } from '../../util/types';
-import type { IconProps, MaterialSymbol } from '../icon/types';
+import type { IconProps, MaterialSymbol } from '../Icon/types';
 import type { IconLinkButtonTheme } from './styles';
 export interface IconLinkButtonProps extends DefaultPropsWithChildren<IconLinkButtonTheme, RACLinkProps['className'], IconProps['children']>, Omit<RACLinkProps, 'children'> {
     /**

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

@@ -0,0 +1,5 @@
+export declare const componentName = "InlineMessage";
+export declare const componentTsx = "import { InlineMessage } from '@guardian/stand/InlineMessage';\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.alignItems};\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 → InlineMessage}/types.d.ts

@@ -1,5 +1,5 @@
 import type { DefaultPropsWithChildren } from '../../util/types';
-import type { IconProps } from '../icon/types';
+import type { IconProps } from '../Icon/types';
 import type { InlineMessageTheme } from './styles';
 export interface InlineMessageProps extends DefaultPropsWithChildren<InlineMessageTheme> {
     /**

package/dist/types/components/{intended-audience-signifier → IntendedAudienceSignifier}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "IntendedAudienceSignifier";
-export declare const componentTsx = "import { IntendedAudienceSignifier } from '@guardian/stand/intendedAudienceSignifier;\n\nexport const Component = () => (\n\t<>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' theme={{ color: '#c70000' }} />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' cssOverrides={{ border-color: '#0000FF',align-items: 'flex-end' }}/>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='US' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='UK' />\n\t</>\n);\n";
+export declare const componentTsx = "import { IntendedAudienceSignifier } from '@guardian/stand/IntendedAudienceSignifier';\n\nexport const Component = () => (\n\t<>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' theme={{ color: '#c70000' }} />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' cssOverrides={{ border-color: '#0000FF',align-items: 'flex-end' }}/>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='US' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='UK' />\n\t</>\n);\n";
 export declare const componentCss = "\n/* import the intended audience signifier styles */\n@import '@guardian/stand/component/intendedAudienceSignifier.css';\n\n.stand-intended-audience-signifier {\n\tcolor: var(--component-intended-audience-signifier-color);\n\tfont-weight: var(--component-intended-audience-signifier-typography-font-weight);\n\tfont-size: var(--component-intended-audience-signifier-typography-font-size);\n\tline-height: var(--component-intended-audience-signifier-typography-line-height);\n\tborder-width: var(--component-intended-audience-signifier-border-width);\n\tborder-style: var(--component-intended-audience-signifier-border-style);\n\tborder-color: var(--component-intended-audience-signifier-border-color);\n\tdisplay: var(--component-intended-audience-signifier-display);\n\tflex-direction: var(--component-intended-audience-signifier-flex-direction);\n\tjustify-content: var(--component-intended-audience-signifier-justify-content);\n\talign-items: var(--component-intended-audience-signifier-align-items);\n\tborder-radius: var(--component-intended-audience-signifier-border-width);\n\tpadding: var(--component-intended-audience-signifier-padding-y) var(--component-intended-audience-signifier-padding-x);\n\tbox-sizing: var(--component-intended-audience-signifier-box-sizing);\n\twidth: var(--component-intended-audience-signifier-width);\n\tgap: var(--component-intended-audience-signifier-gap);\n}\n\n.stand-intended-audience-signifier svg {\n\twidth: var(--component-intended-audience-signifier-svg-width):\n\theight: var(--component-intended-audience-signifier-svg-height);\n}\n\n.stand-intended-audience-signifier-flag {\n\theight: 12px;\n}\n\n.stand-intended-audience-signifier-chevron {\n\twidth: 13px;\n\theight: 13px;\n\tfill: #545454;\n}\n";
 export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div class=\"stand-intended-audience-signifier\">\n\t\t<svg class=\"stand-intended-audience-signifier-flag\" viewBox=\"0 0 640 480\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path fill=\"#012169\" d=\"M0 0h640v480H0z\" />\n\t\t</svg>\n\t\t<svg class=\"stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t</svg>\n\t\t<svg class=\"stand-intended-audience-signifier-flag\" viewBox=\"0 0 640 480\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path fill=\"#bd3d44\" d=\"M0 0h640v480H0\" />\n\t\t</svg>\n\t</div>\n\n\t<div class=\"stand-intended-audience-signifier\" style=\"--component-intended-audience-signifier-color: #c70000;\">\n\t\t<span>AU</span>\n\t\t<svg class=\"stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t</svg>\n\t\t<span>GLOBAL</span>\n\t</div>\n</div>\n";
 export declare const componentJs = "\nimport { componentIntendedAudienceSignifier } from \"@guardian/stand\";\n\nconst sheet = new CSSStyleSheet();\n\nsheet.replaceSync(`\n\t.js-stand-intended-audience-signifier {\n\t\tcolor: ${componentIntendedAudienceSignifier.color};\n\t\tfont-weight: ${componentIntendedAudienceSignifier.typography.fontWeight};\n\t\tfont-size: ${componentIntendedAudienceSignifier.typography.fontSize};\n\t\tline-height: ${componentIntendedAudienceSignifier.typography.lineHeight};\n\t\tborder-width: ${componentIntendedAudienceSignifier.borderWidth};\n\t\tborder-style: ${componentIntendedAudienceSignifier.borderStyle};\n\t\tborder-color: ${componentIntendedAudienceSignifier.borderColor};\n\t\tdisplay: ${componentIntendedAudienceSignifier.display};\n\t\tflex-direction: ${componentIntendedAudienceSignifier.flexDirection};\n\t\tjustify-content: ${componentIntendedAudienceSignifier.justifyContent};\n\t\talign-items: ${componentIntendedAudienceSignifier.alignItems};\n\t\tborder-radius: ${componentIntendedAudienceSignifier.borderRadius};\n\t\tpadding: ${componentIntendedAudienceSignifier.paddingY} ${componentIntendedAudienceSignifier.paddingX};\n\t\tbox-sizing: ${componentIntendedAudienceSignifier.boxSizing};\n\t\twidth: ${componentIntendedAudienceSignifier.width};\n\t\tgap: ${componentIntendedAudienceSignifier.gap};\n\t}\n\n\t.js-stand-intended-audience-signifier-chevron {\n\t\twidth: 13px;\n\t\theight: 13px;\n\t\tfill: #545454;\n\t}\n\n\t.stand-intended-audience-signifier svg {\n\t\twidth: ${componentIntendedAudienceSignifier.svg.width}:\n\t\theight: ${componentIntendedAudienceSignifier.svg.height};\n\t}\n`);\n\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container flow-column\">\n\t\t<div class=\"js-stand-intended-audience-signifier\">\n\t\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-gb\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#012169\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#FFF\"\n\t\t\t\t\td=\"m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#C8102E\"\n\t\t\t\t\td=\"m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#FFF\" d=\"M241 0v480h160V0zM0 160v160h640V160z\" />\n\t\t\t\t<path fill=\"#C8102E\" d=\"M0 193v96h640v-96zM273 0v480h96V0z\" />\n\t\t\t</svg>\n\t\t\t<svg class=\"js-stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-gb\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#012169\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#FFF\"\n\t\t\t\t\td=\"m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#C8102E\"\n\t\t\t\t\td=\"m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#FFF\" d=\"M241 0v480h160V0zM0 160v160h640V160z\" />\n\t\t\t\t<path fill=\"#C8102E\" d=\"M0 193v96h640v-96zM273 0v480h96V0z\" />\n\t\t\t</svg>\n\t\t</div>\n\n\t\t<div class=\"js-stand-intended-audience-signifier\" style=\"color: #c70000; border-color: #c70000;\">\n\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-au\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#00008B\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"red\"\n\t\t\t\t\td=\"M212 140.5 320 220v20l-135.5-99.5zm-92 10 3 17.5-96 72H0zM320 0v1.5l-124.5 94 1-22L295 0zM0 0l119.5 88h-30L0 21z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#fff\" d=\"M120.5 0v240h80V0zM0 80v80h320V80z\" />\n\t\t\t\t<path fill=\"red\" d=\"M0 96.5v48h320v-48zM136.5 0v240h48V0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m527 396.7-20.5 2.6 2.2 20.5-14.8-14.4-14.7 14.5 2-20.5-20.5-2.4 17.3-11.2-10.9-17.5 19.6 6.5 6.9-19.5 7.1 19.4 19.5-6.7-10.7 17.6zm-3.7-117.2 2.7-13-9.8-9 13.2-1.5 5.5-12.1 5.5 12.1 13.2 1.5-9.8 9 2.7 13-11.6-6.6zm-104.1-60-20.3 2.2 1.8 20.3-14.4-14.5-14.8 14.1 2.4-20.3-20.2-2.7 17.3-10.8-10.5-17.5 19.3 6.8L387 178l6.7 19.3 19.4-6.3-10.9 17.3 17.1 11.2ZM623 186.7l-20.9 2.7 2.3 20.9-15.1-14.7-15 14.8 2.1-21-20.9-2.4 17.7-11.5-11.1-17.9 20 6.7 7-19.8 7.2 19.8 19.9-6.9-11 18zm-96.1-83.5-20.7 2.3 1.9 20.8-14.7-14.8-15.1 14.4 2.4-20.7-20.7-2.8 17.7-11L467 73.5l19.7 6.9 7.3-19.5 6.8 19.7 19.8-6.5-11.1 17.6zM234 385.7l-45.8 5.4 4.6 45.9-32.8-32.4-33 32.2 4.9-45.9-45.8-5.8 38.9-24.8-24-39.4 43.6 15 15.8-43.4 15.5 43.5 43.7-14.7-24.3 39.2 38.8 25.1Z\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t\t<svg class=\"js-stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-au\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#00008B\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"red\"\n\t\t\t\t\td=\"M212 140.5 320 220v20l-135.5-99.5zm-92 10 3 17.5-96 72H0zM320 0v1.5l-124.5 94 1-22L295 0zM0 0l119.5 88h-30L0 21z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#fff\" d=\"M120.5 0v240h80V0zM0 80v80h320V80z\" />\n\t\t\t\t<path fill=\"red\" d=\"M0 96.5v48h320v-48zM136.5 0v240h48V0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m527 396.7-20.5 2.6 2.2 20.5-14.8-14.4-14.7 14.5 2-20.5-20.5-2.4 17.3-11.2-10.9-17.5 19.6 6.5 6.9-19.5 7.1 19.4 19.5-6.7-10.7 17.6zm-3.7-117.2 2.7-13-9.8-9 13.2-1.5 5.5-12.1 5.5 12.1 13.2 1.5-9.8 9 2.7 13-11.6-6.6zm-104.1-60-20.3 2.2 1.8 20.3-14.4-14.5-14.8 14.1 2.4-20.3-20.2-2.7 17.3-10.8-10.5-17.5 19.3 6.8L387 178l6.7 19.3 19.4-6.3-10.9 17.3 17.1 11.2ZM623 186.7l-20.9 2.7 2.3 20.9-15.1-14.7-15 14.8 2.1-21-20.9-2.4 17.7-11.5-11.1-17.9 20 6.7 7-19.8 7.2 19.8 19.9-6.9-11 18zm-96.1-83.5-20.7 2.3 1.9 20.8-14.7-14.8-15.1 14.4 2.4-20.7-20.7-2.8 17.7-11L467 73.5l19.7 6.9 7.3-19.5 6.8 19.7 19.8-6.5-11.1 17.6zM234 385.7l-45.8 5.4 4.6 45.9-32.8-32.4-33 32.2 4.9-45.9-45.8-5.8 38.9-24.8-24-39.4 43.6 15 15.8-43.4 15.5 43.5 43.7-14.7-24.3 39.2 38.8 25.1Z\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/{layout → Layout}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "Layout";
-export declare const componentTsx = "import { Grid, Item } from '@guardian/stand/grid';\nimport { AlertBanner } from '@guardian/stand/alert-banner';\nimport { Layout } from '@guardian/stand/layout';\nimport { TopBar, TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<Layout aria-label=\"Page layout\">\n\t\t<Layout.AlertBanner as=\"div\" role=\"status\" aria-live=\"polite\">\n\t\t\t<AlertBanner level=\"information\">Layout banner message</AlertBanner>\n\t\t</Layout.AlertBanner>\n\t\t<Layout.TopBar>\n\t\t\t<TopBar>\n\t\t\t\t<TopBarToolName name=\"Layout Demo\" favicon={{ letter: 'L' }} />\n\t\t\t</TopBar>\n\t\t</Layout.TopBar>\n\t\t<Layout.Sidebar as=\"nav\" aria-label=\"Secondary navigation\" layoutSmBreakpoint=\"above-grid\">\n\t\t\t<div style={{ padding: '8px' }}>Sidebar content</div>\n\t\t</Layout.Sidebar>\n\t\t<Layout.Main fluid={false}>\n\t\t\t<Grid>\n\t\t\t\t<Item size={{ sm: 12, md: 8 }}>Main content</Item>\n\t\t\t\t<Item size={{ sm: 12, md: 4 }}>Secondary content</Item>\n\t\t\t</Grid>\n\t\t</Layout.Main>\n\t</Layout>\n);\n";
+export declare const componentTsx = "import { Grid, Item } from '@guardian/stand/Grid';\nimport { AlertBanner } from '@guardian/stand/AlertBanner';\nimport { Layout } from '@guardian/stand/Layout';\nimport { TopBar, TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<Layout aria-label=\"Page layout\">\n\t\t<Layout.AlertBanner as=\"div\" role=\"status\" aria-live=\"polite\">\n\t\t\t<AlertBanner level=\"information\">Layout banner message</AlertBanner>\n\t\t</Layout.AlertBanner>\n\t\t<Layout.TopBar>\n\t\t\t<TopBar>\n\t\t\t\t<TopBarToolName name=\"Layout Demo\" favicon={{ letter: 'L' }} />\n\t\t\t</TopBar>\n\t\t</Layout.TopBar>\n\t\t<Layout.Sidebar as=\"nav\" aria-label=\"Secondary navigation\" layoutSmBreakpoint=\"above-grid\">\n\t\t\t<div style={{ padding: '8px' }}>Sidebar content</div>\n\t\t</Layout.Sidebar>\n\t\t<Layout.Main fluid={false}>\n\t\t\t<Grid>\n\t\t\t\t<Item size={{ sm: 12, md: 8 }}>Main content</Item>\n\t\t\t\t<Item size={{ sm: 12, md: 4 }}>Secondary content</Item>\n\t\t\t</Grid>\n\t\t</Layout.Main>\n\t</Layout>\n);\n";
 export declare const componentCss = "\n/* import the layout styles */\n@import '@guardian/stand/component/layout.css';\n@import '@guardian/stand/semantic/breakpoints.css';\n\n/*\n * Use the TopBar and Grid/Item custom CSS examples from their respective\n * component docs to style the content placed inside these layout regions.\n */\n\n.stand-layout {\n\tdisplay: var(--component-layout-layout-shared-display);\n\tmin-height: var(--component-layout-layout-shared-min-height);\n\twidth: var(--component-layout-layout-shared-width);\n\tgrid-template-areas: var(--component-layout-layout-sm-grid-template-areas);\n\tgrid-template-columns: var(--component-layout-layout-sm-grid-template-columns);\n\tgrid-template-rows: var(--component-layout-layout-sm-grid-template-rows);\n}\n\n.stand-layout-alert-banner {\n\tgrid-area: alertbanner;\n}\n\n.stand-layout-top-bar {\n\tgrid-area: topbar;\n}\n\n.stand-layout-sidebar {\n\tgrid-area: sidebar;\n\tbackground: #f2f2f2;\n\tpadding: 8px;\n}\n\n.stand-layout-main {\n\tgrid-area: main;\n\tpadding: 8px;\n}\n\n@media (min-width: var(--semantic-breakpoints-md)) {\n\t.stand-layout {\n\t\tgrid-template-areas: var(--component-layout-layout-md-grid-template-areas);\n\t\tgrid-template-columns: var(--component-layout-layout-md-grid-template-columns);\n\t\tgrid-template-rows: var(--component-layout-layout-md-grid-template-rows);\n\t}\n\n\t.stand-layout-sidebar {\n\t\tdisplay: var(--component-layout-sidebar-md-display);\n\t\twidth: var(--component-layout-sidebar-md-width);\n\t}\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-layout\">\n\t\t<div class=\"stand-layout-alert-banner\">Alert banner area</div>\n\t\t<div class=\"stand-layout-top-bar\">Top bar area</div>\n\t\t<div class=\"stand-layout-sidebar\">Sidebar area</div>\n\t\t<div class=\"stand-layout-main\">Main content area</div>\n\t</div>\n</div>\n";
 export declare const componentJs = "\nimport { componentLayout, semanticBreakpoints } from \"@guardian/stand\";\n\n// Use the TopBar and Grid/Item custom JS examples from their respective\n// component docs to style the content placed inside these layout regions.\n\n\tconst sheet = new CSSStyleSheet();\n\n\tsheet.replaceSync(`\n\t  .js-stand-layout {\n\t    display: ${componentLayout.layout.shared.display};\n\t    min-height: ${componentLayout.layout.shared.minHeight};\n\t    width: ${componentLayout.layout.shared.width};\n\t    grid-template-areas: ${componentLayout.layout.sm.gridTemplateAreas};\n\t    grid-template-columns: ${componentLayout.layout.sm.gridTemplateColumns};\n\t    grid-template-rows: ${componentLayout.layout.sm.gridTemplateRows};\n\t  }\n\t  .js-stand-layout-alert-banner {\n\t    grid-area: alertbanner;\n\t  }\n\t  .js-stand-layout-top-bar {\n\t    grid-area: topbar;\n\t  }\n\t  .js-stand-layout-sidebar {\n\t    grid-area: sidebar;\n\t    display: ${componentLayout.sidebar.sm.aboveGrid.display};\n\t    background: #f2f2f2;\n\t    padding: 8px;\n\t  }\n\t  .js-stand-layout-main {\n\t    grid-area: main;\n\t    padding: 8px;\n\t  }\n\t  @media (min-width: ${semanticBreakpoints.md}) {\n\t    .js-stand-layout {\n\t      grid-template-areas: ${componentLayout.layout.md.gridTemplateAreas};\n\t      grid-template-columns: ${componentLayout.layout.md.gridTemplateColumns};\n\t      grid-template-rows: ${componentLayout.layout.md.gridTemplateRows};\n\t    }\n\t    .js-stand-layout-sidebar {\n\t      display: ${componentLayout.sidebar.md.display};\n\t      width: ${componentLayout.sidebar.md.width};\n\t    }\n\t  }\n\t`);\n\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\tdocument.getElementById(\"app\").innerHTML = `\n\t  <div class=\"js-stand-layout\">\n\t    <div class=\"js-stand-layout-alert-banner\">Alert banner area</div>\n\t    <div class=\"js-stand-layout-top-bar\">Top bar area</div>\n\t    <div class=\"js-stand-layout-sidebar\">Sidebar area</div>\n\t    <div class=\"js-stand-layout-main\">Main content area</div>\n\t  </div>\n\t`;\n";

package/dist/types/components/{link → Link}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "Link";
-export declare const componentTsx = "import { Link } from '@guardian/stand/link';\n\nexport const Component = () => (\n\t<Link href=\"#\">Hello</Link>\n);\n";
+export declare const componentTsx = "import { Link } from '@guardian/stand/Link';\n\nexport const Component = () => (\n\t<Link href=\"#\">Hello</Link>\n);\n";
 export declare const componentCss = "\n/* import the link styles */\n@import '@guardian/stand/component/link.css';\n\n.stand-typography-body-sm {\n\tfont: var(--semantic-typography-body-sm-font);\n\tletter-spacing: var(--semantic-typography-body-sm-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--semantic-typography-body-sm-font-width);\n}\n.stand-link {\n\ttext-decoration: underline;\n\ttext-decoration-style: solid;\n\ttext-underline-offset: 8%;\n\ttext-decoration-thickness: 5%;\n\tcolor: var(--component-link-shared-enabled-color);\n}\n\n.stand-link[data-hovered] {\n\tcolor: var(--component-link-shared-hover-color);\n\tcursor: var(--component-link-shared-hover-cursor);\n}\n\n.stand-link[data-pressed] {\n\tcolor: var(--component-link-shared-pressed-color);\n}\n\n.stand-link[data-disabled] {\n\tcolor: var(--component-link-shared-disabled-color);\n}\n\n.stand-link[data-focus-visible] {\n\toutline: var(--component-link-shared-focus-outline);\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\">Default link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-hovered>Hovered link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-pressed>Pressed link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-disabled>Disabled link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-focus-visible>Focused link</a>\n</div>\n";
-export declare const componentJs = "\nimport { componentLink, semanticTypography } from \"@guardian/stand\";\n\nconst semanticTypographyBodySm = `\n\t\tfont: ${semanticTypography['body-sm'].font};\n\t\tletter-spacing: ${semanticTypography['body-sm'].letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${semanticTypography['body-sm'].fontWidth};\n`;\n\nconst baseStyle = `\n\ttext-decoration: underline;\n\ttext-decoration-style: solid;\n\ttext-underline-offset: 8%;\n\ttext-decoration-thickness: 5%;\n\tcolor: ${componentLink.shared.enabled.color};\n`;\n\nconst hoverStyle = `\n\tcolor: ${componentLink.shared.hover.color};\n\tcursor: ${componentLink.shared.hover.cursor};\n`;\n\nconst pressedStyle = `\n\tcolor: ${componentLink.shared.pressed.color};\n`;\n\nconst disabledStyle = `\n\tcolor: ${componentLink.shared.disabled.color};\n`;\n\nconst focusVisibleStyle = `\n\toutline: ${componentLink.shared.focus.outline};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<style>\n\t\t.stand-typography-body-sm { ${semanticTypographyBodySm} }\n\t\t.stand-link { ${baseStyle} }\n\t\t.stand-link[data-hovered] { ${hoverStyle} }\n\t\t.stand-link[data-pressed] { ${pressedStyle} }\n\t\t.stand-link[data-disabled] { ${disabledStyle} }\n\t\t.stand-link[data-focus-visible] { ${focusVisibleStyle} }\n\t</style>\n\t<div class=\"container\">\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\">Default link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-hovered>Hovered link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-pressed>Pressed link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-disabled>Disabled link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-focus-visible>Focused link</a>\n\t</div>\n`;\n";
+export declare const componentJs = "\nimport { componentLink, semanticTypography } from \"@guardian/stand\";\n\nconst semanticTypographyBodySm = `\n\t\tfont: ${semanticTypography.bodySm.font};\n\t\tletter-spacing: ${semanticTypography.bodySm.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${semanticTypography.bodySm.fontWidth};\n`;\n\nconst baseStyle = `\n\ttext-decoration: underline;\n\ttext-decoration-style: solid;\n\ttext-underline-offset: 8%;\n\ttext-decoration-thickness: 5%;\n\tcolor: ${componentLink.shared.enabled.color};\n`;\n\nconst hoverStyle = `\n\tcolor: ${componentLink.shared.hover.color};\n\tcursor: ${componentLink.shared.hover.cursor};\n`;\n\nconst pressedStyle = `\n\tcolor: ${componentLink.shared.pressed.color};\n`;\n\nconst disabledStyle = `\n\tcolor: ${componentLink.shared.disabled.color};\n`;\n\nconst focusVisibleStyle = `\n\toutline: ${componentLink.shared.focus.outline};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<style>\n\t\t.stand-typography-body-sm { ${semanticTypographyBodySm} }\n\t\t.stand-link { ${baseStyle} }\n\t\t.stand-link[data-hovered] { ${hoverStyle} }\n\t\t.stand-link[data-pressed] { ${pressedStyle} }\n\t\t.stand-link[data-disabled] { ${disabledStyle} }\n\t\t.stand-link[data-focus-visible] { ${focusVisibleStyle} }\n\t</style>\n\t<div class=\"container\">\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\">Default link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-hovered>Hovered link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-pressed>Pressed link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-disabled>Disabled link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-focus-visible>Focused link</a>\n\t</div>\n`;\n";

package/dist/types/components/{link → Link}/types.d.ts

@@ -1,6 +1,6 @@
 import type { LinkProps as RACLinkProps } from 'react-aria-components';
 import type { DefaultPropsWithChildren } from '../../util/types';
-import type { TypographyVariant } from '../typography/types';
+import type { TypographyVariant } from '../Typography/types';
 import type { LinkTheme } from './styles';
 export interface LinkProps extends Omit<RACLinkProps, 'children'>, DefaultPropsWithChildren<LinkTheme, RACLinkProps['className']> {
     /**

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

@@ -0,0 +1,5 @@
+export declare const componentName = "LinkButton";
+export declare const componentTsx = "import { LinkButton } from '@guardian/stand/LinkButton';\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.webkitAppearance};\n    \t\ttext-align: ${componentButton.shared.textAlign};\n    \t\tbox-shadow: ${componentButton.shared.boxShadow};\n    \t\ttext-decoration: ${componentButton.shared.textDecoration};\n    \t\tcursor: ${componentButton.shared.cursor};\n    \t\tjustify-content: ${componentButton.shared.justifyContent};\n    \t\talign-items: ${componentButton.shared.alignItems};\n    \t}\n    \t.js-stand-button:focus-visible {\n    \t\toutline: ${componentButton.shared.focusVisible.outline};\n    \t\toutline-offset: ${componentButton.shared.focusVisible.outlineOffset};\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";

package/dist/types/components/{link-button → LinkButton}/styles.d.ts

@@ -1,23 +1,23 @@
-import type { ButtonTheme, PartialButtonTheme } from '../button/styles';
+import type { ButtonTheme, PartialButtonTheme } from '../Button/styles';
 export type LinkButtonTheme = ButtonTheme;
 export type PartialLinkButtonTheme = PartialButtonTheme;
 export declare const defaultLinkButtonTheme: ButtonTheme;
 export declare const linkButtonStyles: (theme: {
     shared: {
         display: string;
-        '-webkit-appearance': string;
-        'text-align': string;
-        'box-shadow': string;
+        webkitAppearance: string;
+        textAlign: string;
+        boxShadow: string;
         cursor: string;
-        'justify-content': string;
-        'align-items': string;
-        'text-decoration': string;
-        ':disabled': {
+        justifyContent: string;
+        alignItems: string;
+        textDecoration: string;
+        disabled: {
             cursor: string;
         };
-        ':focus-visible': {
+        focusVisible: {
             outline: string;
-            'outline-offset': string;
+            outlineOffset: string;
         };
     };
     primary: {
@@ -26,15 +26,15 @@ export declare const linkButtonStyles: (theme: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -151,15 +151,15 @@ export declare const linkButtonStyles: (theme: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -276,15 +276,15 @@ export declare const linkButtonStyles: (theme: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -395,4 +395,4 @@ export declare const linkButtonStyles: (theme: {
             };
         };
     };
-}, { size, variant }: Required<Pick<import("../button/types").ButtonProps, "size" | "variant">>, hasIcon?: boolean, isIconButton?: boolean) => import("@emotion/react").SerializedStyles;
+}, { size, variant }: Required<Pick<import("../Button/types").ButtonProps, "size" | "variant">>, hasIcon?: boolean, isIconButton?: boolean) => import("@emotion/react").SerializedStyles;

package/dist/types/components/{link-button → LinkButton}/types.d.ts

@@ -1,6 +1,6 @@
 import type { LinkProps as RACLinkProps } from 'react-aria-components';
 import type { DefaultProps } from '../../util/types';
-import type { IconProps } from '../icon/types';
+import type { IconProps } from '../Icon/types';
 import type { LinkButtonTheme } from './styles';
 export interface LinkButtonProps extends DefaultProps<LinkButtonTheme, RACLinkProps['className']>, RACLinkProps {
     /**