@guardian/stand 0.0.37 → 0.0.39

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

package/dist/types/components/{menu → Menu}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "Menu";
-export declare const componentTsx = "import {\n\tMenu,\n\tMenuToggle,\n\tMenuSection,\n\tMenuItem,\n\tMenuSeparator,\n} from '@guardian/stand/menu';\nimport { IconButton } from '@guardian/stand/icon-button';\n\nexport const Component = () => (\n\t<Menu>\n\t\t<MenuToggle>\n\t\t\t<IconButton symbol=\"settings\" ariaLabel=\"Open menu\" />\n\t\t</MenuToggle>\n\n\t\t<MenuSection name=\"File actions\">\n\t\t\t<MenuItem\n\t\t\t\ticon=\"open_in_new\"\n\t\t\t\tlabel=\"Open\"\n\t\t\t\tdescription=\"Open in a new tab\"\n\t\t\t\tonAction={() => alert('open')}\n\t\t\t/>\n\t\t\t<MenuItem\n\t\t\t\ticon=\"edit\"\n\t\t\t\tlabel=\"Rename\"\n\t\t\t\tdescription=\"Rename the file\"\n\t\t\t\tonAction={() => alert('rename')}\n\t\t\t/>\n\t\t\t<MenuItem label=\"Delete\" onAction={() => alert('delete')} />\n\t\t</MenuSection>\n\n\t\t<MenuSeparator />\n\n\t\t<MenuSection>\n\t\t\t<MenuItem id=\"files\" label=\"Show files\" />\n\t\t\t<MenuItem id=\"folders\" label=\"Show folders\" />\n\t\t</MenuSection>\n\t</Menu>\n);\n";
+export declare const componentTsx = "import {\n\tMenu,\n\tMenuToggle,\n\tMenuSection,\n\tMenuItem,\n\tMenuSeparator,\n} from '@guardian/stand/Menu';\nimport { IconButton } from '@guardian/stand/IconButton';\n\nexport const Component = () => (\n\t<Menu>\n\t\t<MenuToggle>\n\t\t\t<IconButton symbol=\"settings\" ariaLabel=\"Open menu\" />\n\t\t</MenuToggle>\n\n\t\t<MenuSection name=\"File actions\">\n\t\t\t<MenuItem\n\t\t\t\ticon=\"open_in_new\"\n\t\t\t\tlabel=\"Open\"\n\t\t\t\tdescription=\"Open in a new tab\"\n\t\t\t\tonAction={() => alert('open')}\n\t\t\t/>\n\t\t\t<MenuItem\n\t\t\t\ticon=\"edit\"\n\t\t\t\tlabel=\"Rename\"\n\t\t\t\tdescription=\"Rename the file\"\n\t\t\t\tonAction={() => alert('rename')}\n\t\t\t/>\n\t\t\t<MenuItem label=\"Delete\" onAction={() => alert('delete')} />\n\t\t</MenuSection>\n\n\t\t<MenuSeparator />\n\n\t\t<MenuSection>\n\t\t\t<MenuItem id=\"files\" label=\"Show files\" />\n\t\t\t<MenuItem id=\"folders\" label=\"Show folders\" />\n\t\t</MenuSection>\n\t</Menu>\n);\n";
 export declare const componentCss = "@import '@guardian/stand/component/menu.css';\n@import \"@guardian/stand/fonts/MaterialSymbolsOutlined.css\";\n\n/* Popover container */\n.stand-popover {\n\toverflow: var(--component-menu-popover-shared-overflow);\n\tmax-width: var(--component-menu-popover-md-max-width);\n\twidth: var(--component-menu-popover-md-width);\n\tbox-shadow: var(--component-menu-popover-shared-shadow);\n}\n\n/* Menu list */\n.stand-menu {\n\tdisplay: var(--component-menu-menu-shared-display);\n\tflex-direction: var(--component-menu-menu-shared-flex-direction);\n\tbackground: var(--component-menu-menu-shared-background-color);\n\tborder: var(--component-menu-menu-shared-border);\n}\n\n/* Menu section header */\n.stand-menu-section-header {\n\tdisplay: var(--component-menu-menu-section-header-shared-display);\n\talign-items: var(--component-menu-menu-section-header-shared-align-items);\n\tpadding: var(--component-menu-menu-section-header-shared-padding-top)\n\t\tvar(--component-menu-menu-section-header-shared-padding-right)\n\t\tvar(--component-menu-menu-section-header-shared-padding-bottom)\n\t\tvar(--component-menu-menu-section-header-shared-padding-left);\n\theight: var(--component-menu-menu-section-header-md-height);\n\tbackground: var(--component-menu-menu-section-header-shared-background-color);\n\tfont: var(--component-menu-menu-section-header-md-typography-font);\n\tletter-spacing: var(--component-menu-menu-section-header-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-section-header-md-typography-font-width);\n}\n\n/* Menu item */\n.stand-menu-item {\n\tdisplay: var(--component-menu-menu-item-shared-display);\n\tgrid-template-columns: var(--component-menu-menu-item-shared-grid-template-columns);\n\tgrid-template-areas: var(--component-menu-menu-item-shared-grid-template-areas);\n\tgap: var(--component-menu-menu-item-shared-gap);\n\talign-items: var(--component-menu-menu-item-shared-align-items);\n\tpadding: var(--component-menu-menu-item-shared-padding-top)\n\t\tvar(--component-menu-menu-item-shared-padding-right)\n\t\tvar(--component-menu-menu-item-shared-padding-bottom)\n\t\tvar(--component-menu-menu-item-shared-padding-left);\n\tborder-bottom: var(--component-menu-menu-item-shared-border-bottom);\n\tcursor: pointer;\n}\n.stand-menu-item-with-description {\n\tgrid-template-areas: var(--component-menu-menu-item-shared-grid-template-areas-with-description);\n}\n.stand-menu-item:last-child {\n\tborder-bottom: var(--component-menu-menu-item-shared-last-child-border-bottom);\n}\n.stand-menu-item:hover {\n\tbackground: var(--component-menu-menu-item-shared-hover-background-color);\n}\n.stand-menu-item:focus-visible {\n\toutline: var(--component-menu-menu-item-shared-focus-visible-outline);\n\toutline-offset: var(--component-menu-menu-item-shared-focus-visible-outline-offset);\n\tbackground: var(--component-menu-menu-item-shared-hover-background-color);\n}\n\n.stand-menu-item-icon {\n\tgrid-area: var(--component-menu-menu-item-shared-icon-grid-area);\n\talign-self: var(--component-menu-menu-item-shared-icon-align-self);\n\tcolor: var(--component-menu-menu-item-shared-icon-color);\n\tfont-size: var(--component-menu-menu-item-md-icon-size);\n\tline-height: var(--component-menu-menu-item-md-icon-line-height);\n}\n.stand-menu-item-label {\n\tgrid-area: var(--component-menu-menu-item-shared-label-grid-area);\n\tcolor: var(--component-menu-menu-item-shared-label-color);\n\tfont: var(--component-menu-menu-item-shared-label-typography-font);\n\tletter-spacing: var(--component-menu-menu-item-shared-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-item-shared-label-typography-font-width);\n}\n.stand-menu-item-description {\n\tgrid-area: var(--component-menu-menu-item-shared-description-grid-area);\n\tcolor: var(--component-menu-menu-item-shared-description-color);\n\tfont: var(--component-menu-menu-item-shared-description-typography-font);\n\tletter-spacing: var(--component-menu-menu-item-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-item-shared-description-typography-font-width);\n}\n.stand-menu-item-aside {\n\tgrid-area: var(--component-menu-menu-item-shared-aside-grid-area);\n\tjustify-self: var(--component-menu-menu-item-shared-aside-justify-self);\n\tcolor: var(--component-menu-menu-item-shared-aside-color);\n\tfont: var(--component-menu-menu-item-shared-aside-typography-font);\n\tletter-spacing: var(--component-menu-menu-item-shared-aside-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-item-shared-aside-typography-font-width);\n}\n\n/* Separator */\n.stand-menu-separator {\n\tbackground-color: var(--component-menu-menu-separator-shared-background-color);\n\theight: var(--component-menu-menu-separator-shared-height);\n\twidth: var(--component-menu-menu-separator-shared-width);\n}\n";
 export declare const componentHtml = "<div class=\"stand-popover\">\n\t<div class=\"stand-menu\">\n\t\t<div>\n\t\t\t<div class=\"stand-menu-section-header\">File actions</div>\n\t\t\t<div class=\"stand-menu-item stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-icon material-symbols\">open_in_new</span>\n\t\t\t\t<span class=\"stand-menu-item-label\">Open</span>\n\t\t\t\t<span class=\"stand-menu-item-description\">Open in a new tab</span>\n\t\t\t\t<span class=\"stand-menu-item-aside\">\u2318O</span>\n\t\t\t</div>\n\t\t\t<div class=\"stand-menu-item stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Rename</span>\n\t\t\t\t<span class=\"stand-menu-item-description\">Rename the file</span>\n\t\t\t</div>\n\t\t\t<div class=\"stand-menu-item\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Delete</span>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"stand-menu-separator\"></div>\n\t\t<div>\n\t\t\t<div class=\"stand-menu-item\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Show files</span>\n\t\t\t</div>\n\t\t\t<div class=\"stand-menu-item\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Show folders</span>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n";
-export declare const componentJs = "import { componentMenu } from \"@guardian/stand\";\n\nconst { menu, menuItem, menuSection, menuSeparator, popover } = componentMenu;\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/* Popover container */\n\t.js-stand-popover {\n\t\toverflow: ${popover.shared.overflow};\n\t\tmax-width: ${popover.md['max-width']};\n\t\twidth: ${popover.md.width};\n\t\tbox-shadow: ${popover.shared.shadow};\n\t}\n\n\t/* Menu list */\n\t.js-stand-menu {\n\t\tdisplay: ${menu.shared.display};\n\t\tflex-direction: ${menu.shared['flex-direction']};\n\t\tbackground: ${menu.shared['background-color']};\n\t\tborder: ${menu.shared.border};\n\t}\n\n\t/* Menu section header */\n\t.js-stand-menu-section-header {\n\t\tdisplay: ${menuSection.header.shared.display};\n\t\talign-items: ${menuSection.header.shared['align-items']};\n\t\theight: ${menuSection.header.md.height};\n\t\tbackground: ${menuSection.header.shared['background-color']};\n\t\tpadding: ${menuSection.header.shared.padding.top} ${menuSection.header.shared.padding.right} ${menuSection.header.shared.padding.bottom} ${menuSection.header.shared.padding.left};\n\t\tfont: ${menuSection.header.md.typography.font};\n\t\tletter-spacing: ${menuSection.header.md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuSection.header.md.typography.fontWidth};\n\t}\n\n\t/* Menu item */\n\t.js-stand-menu-item {\n\t\tdisplay: ${menuItem.shared.display};\n\t\tgrid-template-columns: ${menuItem.shared['grid-template-columns']};\n\t\tgrid-template-areas: ${menuItem.shared['grid-template-areas']};\n\t\tgap: ${menuItem.shared.gap};\n\t\talign-items: ${menuItem.shared['align-items']};\n\t\tpadding: ${menuItem.shared.padding.top} ${menuItem.shared.padding.right} ${menuItem.shared.padding.bottom} ${menuItem.shared.padding.left};\n\t\tborder-bottom: ${menuItem.shared['border-bottom']};\n\t\tcursor: pointer;\n\t}\n\t.js-stand-menu-item-with-description {\n\t\tgrid-template-areas: ${menuItem.shared['grid-template-areas-with-description']};\n\t}\n\t.js-stand-menu-item:last-child {\n\t\tborder-bottom: ${menuItem.shared[':last-child']['border-bottom']};\n\t}\n\t.js-stand-menu-item:hover {\n\t\tbackground: ${menuItem.shared[':hover']['background-color']};\n\t}\n\t.js-stand-menu-item:focus-visible {\n\t\toutline: ${menuItem.shared[':focus-visible'].outline};\n\t\toutline-offset: ${menuItem.shared[':focus-visible']['outline-offset']};\n\t\tbackground: ${menuItem.shared[':hover']['background-color']};\n\t}\n\n\t.js-stand-menu-item-icon {\n\t\tgrid-area: ${menuItem.shared.icon['grid-area']};\n\t\talign-self: ${menuItem.shared.icon['align-self']};\n\t\tcolor: ${menuItem.shared.icon.color};\n\t\tfont-size: ${menuItem.md.icon.size};\n\t\tline-height: ${menuItem.md.icon['line-height']};\n\t}\n\t.js-stand-menu-item-label {\n\t\tgrid-area: ${menuItem.shared.label['grid-area']};\n\t\tcolor: ${menuItem.shared.label.color};\n\t\tfont: ${menuItem.shared.label.typography.font};\n\t\tletter-spacing: ${menuItem.shared.label.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.label.typography.fontWidth};\n\t}\n\t.js-stand-menu-item-description {\n\t\tgrid-area: ${menuItem.shared.description['grid-area']};\n\t\tcolor: ${menuItem.shared.description.color};\n\t\tfont: ${menuItem.shared.description.typography.font};\n\t\tletter-spacing: ${menuItem.shared.description.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.description.typography.fontWidth};\n\t}\n\t.js-stand-menu-item-aside {\n\t\tgrid-area: ${menuItem.shared.aside['grid-area']};\n\t\tjustify-self: ${menuItem.shared.aside['justify-self']};\n\t\tcolor: ${menuItem.shared.aside.color};\n\t\tfont: ${menuItem.shared.aside.typography.font};\n\t\tletter-spacing: ${menuItem.shared.aside.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.aside.typography.fontWidth};\n\t}\n\n\t/* Separator */\n\t.js-stand-menu-separator {\n\t\tbackground-color: ${menuSeparator.shared['background-color']};\n\t\theight: ${menuSeparator.shared.height};\n\t\twidth: ${menuSeparator.shared.width};\n\t}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the menu components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-popover\">\n\t\t<div class=\"js-stand-menu\">\n\t\t\t<div>\n\t\t\t\t<div class=\"js-stand-menu-section-header\">File actions</div>\n\t\t\t\t<div class=\"js-stand-menu-item js-stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-icon material-symbols\">open_in_new</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Open</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-description\">Open in a new tab</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-aside\">\u2318O</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item js-stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Rename</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-description\">Rename the file</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Delete</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-menu-separator\"></div>\n\t\t\t<div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Show files</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Show folders</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n`;\n";
+export declare const componentJs = "import { componentMenu } from \"@guardian/stand\";\n\nconst { menu, menuItem, menuSection, menuSeparator, popover } = componentMenu;\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/* Popover container */\n\t.js-stand-popover {\n\t\toverflow: ${popover.shared.overflow};\n\t\tmax-width: ${popover.md.maxWidth};\n\t\twidth: ${popover.md.width};\n\t\tbox-shadow: ${popover.shared.shadow};\n\t}\n\n\t/* Menu list */\n\t.js-stand-menu {\n\t\tdisplay: ${menu.shared.display};\n\t\tflex-direction: ${menu.shared.flexDirection};\n\t\tbackground: ${menu.shared.backgroundColor};\n\t\tborder: ${menu.shared.border};\n\t}\n\n\t/* Menu section header */\n\t.js-stand-menu-section-header {\n\t\tdisplay: ${menuSection.header.shared.display};\n\t\talign-items: ${menuSection.header.shared.alignItems};\n\t\theight: ${menuSection.header.md.height};\n\t\tbackground: ${menuSection.header.shared.backgroundColor};\n\t\tpadding: ${menuSection.header.shared.padding.top} ${menuSection.header.shared.padding.right} ${menuSection.header.shared.padding.bottom} ${menuSection.header.shared.padding.left};\n\t\tfont: ${menuSection.header.md.typography.font};\n\t\tletter-spacing: ${menuSection.header.md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuSection.header.md.typography.fontWidth};\n\t}\n\n\t/* Menu item */\n\t.js-stand-menu-item {\n\t\tdisplay: ${menuItem.shared.display};\n\t\tgrid-template-columns: ${menuItem.shared.gridTemplateColumns};\n\t\tgrid-template-areas: ${menuItem.shared.gridTemplateAreas};\n\t\tgap: ${menuItem.shared.gap};\n\t\talign-items: ${menuItem.shared.alignItems};\n\t\tpadding: ${menuItem.shared.padding.top} ${menuItem.shared.padding.right} ${menuItem.shared.padding.bottom} ${menuItem.shared.padding.left};\n\t\tborder-bottom: ${menuItem.shared.borderBottom};\n\t\tcursor: pointer;\n\t}\n\t.js-stand-menu-item-with-description {\n\t\tgrid-template-areas: ${menuItem.shared.gridTemplateAreasWithDescription};\n\t}\n\t.js-stand-menu-item:last-child {\n\t\tborder-bottom: ${menuItem.shared.lastChild.borderBottom};\n\t}\n\t.js-stand-menu-item:hover {\n\t\tbackground: ${menuItem.shared.hover.backgroundColor};\n\t}\n\t.js-stand-menu-item:focus-visible {\n\t\toutline: ${menuItem.shared.focusVisible.outline};\n\t\toutline-offset: ${menuItem.shared.focusVisible.outlineOffset};\n\t\tbackground: ${menuItem.shared.hover.backgroundColor};\n\t}\n\n\t.js-stand-menu-item-icon {\n\t\tgrid-area: ${menuItem.shared.icon.gridArea};\n\t\talign-self: ${menuItem.shared.icon.alignSelf};\n\t\tcolor: ${menuItem.shared.icon.color};\n\t\tfont-size: ${menuItem.md.icon.size};\n\t\tline-height: ${menuItem.md.icon.lineHeight};\n\t}\n\t.js-stand-menu-item-label {\n\t\tgrid-area: ${menuItem.shared.label.gridArea};\n\t\tcolor: ${menuItem.shared.label.color};\n\t\tfont: ${menuItem.shared.label.typography.font};\n\t\tletter-spacing: ${menuItem.shared.label.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.label.typography.fontWidth};\n\t}\n\t.js-stand-menu-item-description {\n\t\tgrid-area: ${menuItem.shared.description.gridArea};\n\t\tcolor: ${menuItem.shared.description.color};\n\t\tfont: ${menuItem.shared.description.typography.font};\n\t\tletter-spacing: ${menuItem.shared.description.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.description.typography.fontWidth};\n\t}\n\t.js-stand-menu-item-aside {\n\t\tgrid-area: ${menuItem.shared.aside.gridArea};\n\t\tjustify-self: ${menuItem.shared.aside.justifySelf};\n\t\tcolor: ${menuItem.shared.aside.color};\n\t\tfont: ${menuItem.shared.aside.typography.font};\n\t\tletter-spacing: ${menuItem.shared.aside.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.aside.typography.fontWidth};\n\t}\n\n\t/* Separator */\n\t.js-stand-menu-separator {\n\t\tbackground-color: ${menuSeparator.shared.backgroundColor};\n\t\theight: ${menuSeparator.shared.height};\n\t\twidth: ${menuSeparator.shared.width};\n\t}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the menu components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-popover\">\n\t\t<div class=\"js-stand-menu\">\n\t\t\t<div>\n\t\t\t\t<div class=\"js-stand-menu-section-header\">File actions</div>\n\t\t\t\t<div class=\"js-stand-menu-item js-stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-icon material-symbols\">open_in_new</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Open</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-description\">Open in a new tab</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-aside\">\u2318O</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item js-stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Rename</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-description\">Rename the file</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Delete</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-menu-separator\"></div>\n\t\t\t<div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Show files</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Show folders</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/{menu → Menu}/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { MenuItemProps as RACMenuItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, PopoverProps as RACPopoverProps, SeparatorProps as RACSeparatorProps } from 'react-aria-components';
 import type { DefaultProps, DefaultPropsWithChildren } from '../../util/types';
-import type { IconProps } from '../icon/types';
+import type { IconProps } from '../Icon/types';
 import type { MenuItemTheme, MenuPopoverTheme, MenuSectionTheme, MenuSeparatorTheme, MenuTheme } from './styles';
 export interface MenuProps extends DefaultPropsWithChildren<MenuTheme, RACMenuProps<object>['className']>, Omit<RACMenuProps<object>, 'children'> {
     /**

package/dist/types/components/{radio-group → RadioGroup}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "RadioGroup";
-export declare const componentTsx = "import { Radio, RadioGroup } from '@guardian/stand/radio-group';\n\nexport const Component = () => (\n\t<RadioGroup\n\t\tlabel=\"Option\"\n\t\tdescription=\"This is a description for the radio button input\"\n\t>\n\t\t<Radio value=\"one\">Option 1</Radio>\n\t\t<Radio value=\"two\">Option 2</Radio>\n\t</RadioGroup>\n);\n";
+export declare const componentTsx = "import { Radio, RadioGroup } from '@guardian/stand/RadioGroup';\n\nexport const Component = () => (\n\t<RadioGroup\n\t\tlabel=\"Option\"\n\t\tdescription=\"This is a description for the radio button input\"\n\t>\n\t\t<Radio value=\"one\">Option 1</Radio>\n\t\t<Radio value=\"two\">Option 2</Radio>\n\t</RadioGroup>\n);\n";
 export declare const componentCss = "\n/* import the radiogroup styles */\n@import '@guardian/stand/component/radioGroup.css';\n@import '@guardian/stand/component/form.css';\n\n/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-form-input-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-form-input-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n/* radiogroup styles */\n\n.stand-radio-group {\n\tdisplay: var(--component-radio-group-shared-display);\n\tflex-direction: var(--component-radio-group-shared-flex-direction);\n\tgap: var(--component-radio-group-md-gap);\n\tmargin-top: var(--component-radio-group-shared-margin-top);\n\tmargin-bottom: var(--component-radio-group-shared-margin-bottom);\n}\n\n.stand-radio {\n\tdisplay: var(--component-radio-group-shared-radio-display);\n\talign-items: var(--component-radio-group-shared-radio-align-items);\n\tgap: var(--component-radio-group-shared-radio-gap);\n\tfont: var(--component-radio-group-md-typography-font);\n\tletter-spacing: var(--component-radio-group-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-radio-group-md-typography-font-width);\n\tcolor: var(--component-radio-group-shared-radio-color);\n}\n\n.stand-radio input {\n\tposition: var(--component-radio-group-shared-indicator-position);\n\twidth: var(--component-radio-group-md-indicator-width);\n\theight: var(--component-radio-group-md-indicator-height);\n\tborder-radius: var(--component-radio-group-shared-indicator-border-radius);\n\tborder: var(--component-radio-group-shared-indicator-border);\n}\n\n.stand-radio > input::after {\n\tcontent: '';\n\tposition: var(--component-radio-group-shared-indicator-after-position);\n\tborder-radius: var(--component-radio-group-shared-indicator-after-border-radius);\n\tinset: var(--component-radio-group-shared-indicator-after-inset);\n\tscale: var(--component-radio-group-shared-indicator-after-scale);\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n<div class=\"stand-form-input-container\">\n\t<label>Options</label>\n\t<span class=\"description\">This is a description for the radio group.</span>\n\t<div class=\"stand-radio-group\">\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"one\" name=\"option\" />\n\t\t\t<label>Option 1</label>\n\t\t</div>\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"two\" name=\"option\" />\n\t\t\t<label>Option 2</label>\n\t\t</div>\n\t</div>\n</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentRadioGroup, componentForm } 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/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container['flex-direction']};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.shared.label.font};\n\tletter-spacing: ${componentForm.input.shared.label.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.label.fontWidth};\n}\n\n.stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.font};\n\tletter-spacing: ${componentForm.input.shared.description.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.fontWidth};\n}\n\n.stand-radio-group {\n\tdisplay: ${componentRadioGroup.shared.display};\n\tflex-direction: ${componentRadioGroup.shared.flexDirection};\n\tgap: ${componentRadioGroup.md.gap};\n\tmargin-top: ${componentRadioGroup.shared.marginTop};\n\tmargin-bottom: ${componentRadioGroup.shared.marginBottom};\n}\n\n.stand-radio {\n\tdisplay: ${componentRadioGroup.shared.radio.display};\n\talign-items: ${componentRadioGroup.shared.radio.alignItems};\n\tgap: ${componentRadioGroup.shared.radio.gap};\n\tfont: ${componentRadioGroup.md.typography.font};\n\tletter-spacing: ${componentRadioGroup.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentRadioGroup.md.typography.fontWidth};\n\tcolor: ${componentRadioGroup.shared.radio.color};\n}\n\n.stand-radio input {\n\tposition: ${componentRadioGroup.shared.indicator.position};\n\twidth: ${componentRadioGroup.md.indicator.width};\n\theight: ${componentRadioGroup.md.indicator.height};\n\tborder-radius: ${componentRadioGroup.shared.indicator.borderRadius};\n\tborder: ${componentRadioGroup.shared.indicator.border};\n}\n\n.stand-radio > input::after {\n\tcontent: '';\n\tposition: ${componentRadioGroup.shared.indicator.after.position};\n\tborder-radius: ${componentRadioGroup.shared.indicator.after.borderRadius};\n\tinset: ${componentRadioGroup.shared.indicator.after.inset};\n\tscale: ${componentRadioGroup.shared.indicator.after.scale};\n}\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\">\n<div class=\"stand-form-input-container\">\n\t<label>Options</label>\n\t<span class=\"description\">This is a description for the radio group.</span>\n\t<div class=\"stand-radio-group\">\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"one\" name=\"option\" />\n\t\t\t<label>Option 1</label>\n\t\t</div>\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"two\" name=\"option\" />\n\t\t\t<label>Option 2</label>\n\t\t</div>\n\t</div>\n</div>\n</div>\n`;\n";
+export declare const componentJs = "\nimport { componentRadioGroup, componentForm } 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/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container.flexDirection};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.shared.label.font};\n\tletter-spacing: ${componentForm.input.shared.label.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.label.fontWidth};\n}\n\n.stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.font};\n\tletter-spacing: ${componentForm.input.shared.description.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.fontWidth};\n}\n\n.stand-radio-group {\n\tdisplay: ${componentRadioGroup.shared.display};\n\tflex-direction: ${componentRadioGroup.shared.flexDirection};\n\tgap: ${componentRadioGroup.md.gap};\n\tmargin-top: ${componentRadioGroup.shared.marginTop};\n\tmargin-bottom: ${componentRadioGroup.shared.marginBottom};\n}\n\n.stand-radio {\n\tdisplay: ${componentRadioGroup.shared.radio.display};\n\talign-items: ${componentRadioGroup.shared.radio.alignItems};\n\tgap: ${componentRadioGroup.shared.radio.gap};\n\tfont: ${componentRadioGroup.md.typography.font};\n\tletter-spacing: ${componentRadioGroup.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentRadioGroup.md.typography.fontWidth};\n\tcolor: ${componentRadioGroup.shared.radio.color};\n}\n\n.stand-radio input {\n\tposition: ${componentRadioGroup.shared.indicator.position};\n\twidth: ${componentRadioGroup.md.indicator.width};\n\theight: ${componentRadioGroup.md.indicator.height};\n\tborder-radius: ${componentRadioGroup.shared.indicator.borderRadius};\n\tborder: ${componentRadioGroup.shared.indicator.border};\n}\n\n.stand-radio > input::after {\n\tcontent: '';\n\tposition: ${componentRadioGroup.shared.indicator.after.position};\n\tborder-radius: ${componentRadioGroup.shared.indicator.after.borderRadius};\n\tinset: ${componentRadioGroup.shared.indicator.after.inset};\n\tscale: ${componentRadioGroup.shared.indicator.after.scale};\n}\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\">\n<div class=\"stand-form-input-container\">\n\t<label>Options</label>\n\t<span class=\"description\">This is a description for the radio group.</span>\n\t<div class=\"stand-radio-group\">\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"one\" name=\"option\" />\n\t\t\t<label>Option 1</label>\n\t\t</div>\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"two\" name=\"option\" />\n\t\t\t<label>Option 2</label>\n\t\t</div>\n\t</div>\n</div>\n</div>\n`;\n";

package/dist/types/components/{radio-group → RadioGroup}/types.d.ts

@@ -1,6 +1,6 @@
 import type { RadioGroupProps as RACRadioGroupProps, RadioProps as RACRadioProps } from 'react-aria-components';
 import type { DefaultProps } from '../../util/types';
-import type { FormInputContainerDefaultProps } from '../form/types';
+import type { FormInputContainerDefaultProps } from '../Form/types';
 import type { RadioGroupTheme } from './styles';
 export type RadioGroupProps = FormInputContainerDefaultProps<RACRadioGroupProps, RadioGroupTheme>;
 export interface RadioProps extends DefaultProps<RadioGroupTheme, RACRadioProps['className']>, RACRadioProps {

package/dist/types/components/{select → Select}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "Select";
-export declare const componentTsx = "import { Option, Select } from '@guardian/stand/select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
+export declare const componentTsx = "import { Option, Select } from '@guardian/stand/Select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
 export declare const componentCss = "\n/* import the select styles */\n@import '@guardian/stand/component/select.css';\n@import '@guardian/stand/component/form.css';\n\n.stand-select-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-select-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-select-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n.stand-select {\n\t\tdisplay: var(--component-select-shared-button-display);\n\t\tjustify-content: var(--component-select-shared-button-justify-content);\n\t\talign-items: var(--component-select-shared-button-align-items);\n\t\tbackground-color: var(--component-select-shared-button-background-color);\n\t\tborder: var(--component-select-shared-button-border);\n\t\tborder-radius: var(--component-select-shared-button-border-radius);\n\t\theight: var(--component-select-shared-button-height);\n\t\tpadding-left: var(--component-select-shared-button-padding-left);\n\t\tpadding-right: var(--component-select-shared-button-padding-right);\n\t\tmargin-top: var(--component-select-shared-button-margin-top);\n\t\tcolor: var(--component-select-shared-button-color);\n\n\t\tfont: var(--component-select-shared-button-body-md-typography-font);\n\t\tletter-spacing: var(--component-select-shared-button-body-md-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-select-shared-button-body-md-typography-font-width);\n\n\n\t\t&:hover {\n\t\t\tbackground: var(--component-select-shared-hover-background-color);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--component-select-shared-active-background-color);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: var(--component-select-button-focused-outline);\n\t\t\toutline-offset: var(--component-select-button-focused-outline-offset);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: var(--component-select-button-disabled-cursor);\n\t\t\tbackground-color: var(--component-select-button-disabled-background-color);\n\t\t\tcolor: var(--component-select-button-disabled-color);\n\t\t\tborder: var(--component-select-button-disabled-border);\n\t\t}\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentForm, componentSelect } 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\n.js-stand-select-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container['flex-direction']};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-select-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-select-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.font};\n\tletter-spacing: ${componentForm.input.shared.description.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.fontWidth};\n}\n\n.js-stand-select {\n\tdisplay: ${componentSelect.shared.button.display};\n\tjustify-content: ${componentSelect.shared.button.justifyContent};\n\talign-items: ${componentSelect.shared.button.alignItems};\n\tbackground-color: ${componentSelect.shared.button.backgroundColor};\n\tborder: ${componentSelect.shared.button.border};\n\tborder-radius: ${componentSelect.shared.button.borderRadius};\n\theight: ${componentSelect.shared.button.height};\n\tpadding-left: ${componentSelect.shared.button.paddingLeft};\n\tpadding-right: ${componentSelect.shared.button.paddingRight};\n\tmargin-top: ${componentSelect.shared.button.marginTop};\n\tcolor: ${componentSelect.shared.button.color};\n\n\tfont: ${componentSelect.shared.button.typography.font};\n\tletter-spacing: ${componentSelect.shared.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.shared.button.typography.fontWidth};\n\n\t&:hover {\n\t\tbackground: ${componentSelect.shared.hover.backgroundColor};\n\t}\n\n\t&:active {\n\t\tbackground: ${componentSelect.shared.pressed.backgroundColor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentSelect.shared.button.focused.outline};\n\t\toutline-offset: ${componentSelect.shared.button.focused['outline-offset']};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.shared.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.shared.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.shared.button.disabled.color};\n\t\tborder: ${componentSelect.shared.button.disabled.border};\n\t}\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"js-stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n`;\n";
+export declare const componentJs = "\nimport { componentForm, componentSelect } 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\n.js-stand-select-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container.flexDirection};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-select-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-select-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.font};\n\tletter-spacing: ${componentForm.input.shared.description.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.fontWidth};\n}\n\n.js-stand-select {\n\tdisplay: ${componentSelect.shared.button.display};\n\tjustify-content: ${componentSelect.shared.button.justifyContent};\n\talign-items: ${componentSelect.shared.button.alignItems};\n\tbackground-color: ${componentSelect.shared.button.backgroundColor};\n\tborder: ${componentSelect.shared.button.border};\n\tborder-radius: ${componentSelect.shared.button.borderRadius};\n\theight: ${componentSelect.shared.button.height};\n\tpadding-left: ${componentSelect.shared.button.paddingLeft};\n\tpadding-right: ${componentSelect.shared.button.paddingRight};\n\tmargin-top: ${componentSelect.shared.button.marginTop};\n\tcolor: ${componentSelect.shared.button.color};\n\n\tfont: ${componentSelect.shared.button.typography.font};\n\tletter-spacing: ${componentSelect.shared.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.shared.button.typography.fontWidth};\n\n\t&:hover {\n\t\tbackground: ${componentSelect.shared.hover.backgroundColor};\n\t}\n\n\t&:active {\n\t\tbackground: ${componentSelect.shared.pressed.backgroundColor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentSelect.shared.button.focused.outline};\n\t\toutline-offset: ${componentSelect.shared.button.focused.outlineOffset};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.shared.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.shared.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.shared.button.disabled.color};\n\t\tborder: ${componentSelect.shared.button.disabled.border};\n\t}\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"js-stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n`;\n";

package/dist/types/components/{select → Select}/types.d.ts

@@ -1,6 +1,6 @@
 import type { ListBoxItemProps as RACListBoxItemProps, ListBoxProps as RACListBoxProps, SelectProps as RACSelectProps } from 'react-aria-components';
 import type { DefaultPropsWithChildren } from '../../util/types';
-import type { FormInputContainerDefaultProps } from '../form/types';
+import type { FormInputContainerDefaultProps } from '../Form/types';
 import type { SelectTheme } from './styles';
 export interface OptionProps extends DefaultPropsWithChildren<SelectTheme, RACListBoxItemProps['className']>, Omit<RACListBoxItemProps, 'children'> {
 }

package/dist/types/components/{text-area → TextArea}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "TextArea";
-export declare const componentTsx = "import { TextArea } from '@guardian/stand/text-area';\n\nexport const Component = () => (\n\t<TextArea\n\t\t\tlabel=\"Description\"\n\t\t\tdescription=\"This is a description for the text area.\"\n\t\t/>\n);\n";
+export declare const componentTsx = "import { TextArea } from '@guardian/stand/TextArea';\n\nexport const Component = () => (\n\t<TextArea\n\t\t\tlabel=\"Description\"\n\t\t\tdescription=\"This is a description for the text area.\"\n\t\t/>\n);\n";
 export declare const componentCss = "\n/* import the textarea, form and inline message styles */\n@import '@guardian/stand/component/inlineMessage.css';\n@import '@guardian/stand/component/form.css';\n@import '@guardian/stand/component/textArea.css';\n\n/* inline message styles - error */\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-text-area {\n\tdisplay: var(--component-textArea-shared-display);\n}\n\n/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-form-input-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > label {\n\tcolor: var(--component-form-input-shared-label-disabled-color);\n}\n\n.stand-form-input-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > span.description {\n\tcolor: var(--component-form-input-shared-description-disabled-color);\n}\n\n/* text area styles */\n\n.stand-text-area {\n\tbackground-color: var(--component-text-area-shared-background-color);\n\tborder-radius: var(--component-text-area-shared-border-radius);\n\tborder: var(--component-text-area-shared-border);\n\tcolor: var(--component-text-area-shared-color);\n\tcursor: var(--component-text-area-shared-cursor);\n\tmargin-top: var(--component-text-area-shared-margin-top);\n\tpadding-top: var(--component-text-area-shared-padding-top);\n\tpadding-right: var(--component-text-area-shared-padding-right);\n\tpadding-bottom: var(--component-text-area-shared-padding-bottom);\n\tpadding-left: var(--component-text-area-shared-padding-left);\n}\n\n.stand-text-area[disabled] {\n\tbackground-color: var(--component-text-area-shared-disabled-background-color);\n\tborder: var(--component-text-area-shared-disabled-border);\n\tcolor: var(--component-text-area-shared-disabled-color);\n\tcursor: var(--component-text-area-shared-disabled-cursor);\n}\n\n.stand-text-area[data-invalid] {\n\tborder: var(--component-text-area-shared-error-border);\n}\n\n.stand-text-area.md {\n\theight: var(--component-text-area-shared-height);\n\tfont: var(--component-text-area-md-typography-font);\n\tletter-spacing: var(--component-text-area-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-area-md-typography-font-width);\n}\n\n.stand-text-area.sm {\n\theight: var(--component-text-area-shared-height);\n\tfont: var(--component-text-area-sm-typography-font);\n\tletter-spacing: var(--component-text-area-sm-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-area-sm-typography-font-width);\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text area.</span>\n\t\t<textarea id=\"name\" class=\"stand-text-area md\" type=\"text\"></textarea>\n\t</div>\n\t<div class=\"stand-form-input-container sm\">\n\t\t<label for=\"story\">Tell us a story</label>\n\t\t<textarea\n\t\t\tid=\"story\"\n\t\t\tclass=\"stand-text-area sm\"\n\t\t\ttype=\"text\"\n\t\t\tdata-invalid\n\t\t>It was a dark and stormy night...</textarea>\n\t\t<span class=\"stand-inline-message stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Story is below character count</span>\n\t</div>\n\t<div class=\"stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<textarea\n\t\t\tid=\"notes\"\n\t\t\tclass=\"stand-text-area md\"\n\t\t\ttype=\"text\"\n\t\t\tdisabled\n\t\t></textarea>\n\t</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentTextArea, componentForm, 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/* inline message styles - error */\n.js-stand-inline-message {\n  display: ${componentInlineMessage.shared.display};\n  align-items: ${componentInlineMessage.shared['align-items']};\n  gap: ${componentInlineMessage.shared.gap};\n  font: ${componentInlineMessage.shared.typography.font};\n  letter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n}\n\n.js-stand-inline-message > .material-symbols {\n  font-size: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message > svg {\n  width: ${componentInlineMessage.shared.icon.size};\n  height: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message-error {\n  color: ${componentInlineMessage.error.color};\n  fill: ${componentInlineMessage.error.color};\n}\n\n/* form input container styles */\n\n.js-stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container['flex-direction']};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > label {\n\tcolor: ${componentForm.input.shared.label.disabled.color};\n}\n\n.js-stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.typography.font};\n\tletter-spacing: ${componentForm.input.shared.description.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > span.description {\n\tcolor: ${componentForm.input.shared.description.disabled.color};\n}\n\n/* text area styles */\n\n.js-stand-text-area {\n\tbackground-color: ${componentTextArea.shared['background-color']};\n\tborder-radius: ${componentTextArea.shared['border-radius']};\n\tborder: ${componentTextArea.shared.border};\n\tcolor: ${componentTextArea.shared.color};\n\tcursor: ${componentTextArea.shared.cursor};\n\tmargin-top: ${componentTextArea.shared['margin-top']};\n\tpadding-top: ${componentTextArea.shared.padding.top};\n\tpadding-right: ${componentTextArea.shared.padding.right};\n\tpadding-bottom: ${componentTextArea.shared.padding.bottom};\n\tpadding-left: ${componentTextArea.shared.padding.left};\n}\n\n.js-stand-text-area[disabled] {\n\tbackground-color: ${componentTextArea.shared.disabled.backgroundColor};\n\tborder: ${componentTextArea.shared.disabled.border};\n\tcolor: ${componentTextArea.shared.disabled.color};\n\tcursor: ${componentTextArea.shared.disabled.cursor};\n}\n\n.js-stand-text-area[data-invalid] {\n\tborder: ${componentTextArea.shared.errorBorder};\n}\n\n.js-stand-text-area.md {\n\theight: ${componentTextArea.shared.height};\n\tfont: ${componentTextArea.md.typography.font};\n\tletter-spacing: ${componentTextArea.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextArea.md.typography.fontWidth};\n}\n\n.js-stand-text-area.sm {\n\theight: ${componentTextArea.shared.height};\n\tfont: ${componentTextArea.sm.typography.font};\n\tletter-spacing: ${componentTextArea.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextArea.sm.typography.fontWidth};\n}\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<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text input.</span>\n\t\t<textarea id=\"name\" class=\"js-stand-text-area md\"></textarea>\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\">\n\t\t<label for=\"story\">Story</label>\n\t\t<textarea\n\t\t\tid=\"story\"\n\t\t\tclass=\"js-stand-text-area sm\"\n\t\t>It was a dark and stormy night...</textarea>\n\t\t<span class=\"js-stand-inline-message js-stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n\t<div class=\"js-stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<textarea\n\t\t\tid=\"notes\"\n\t\t\tclass=\"js-stand-text-area md\"\n\t\t\ttype=\"text\"\n\t\t\tdisabled\n\t\t </textarea>\n\t</div>\n</div>\n`;\n";
+export declare const componentJs = "\nimport { componentTextArea, componentForm, 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/* inline message styles - error */\n.js-stand-inline-message {\n  display: ${componentInlineMessage.shared.display};\n  align-items: ${componentInlineMessage.shared.alignItems};\n  gap: ${componentInlineMessage.shared.gap};\n  font: ${componentInlineMessage.shared.typography.font};\n  letter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n}\n\n.js-stand-inline-message > .material-symbols {\n  font-size: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message > svg {\n  width: ${componentInlineMessage.shared.icon.size};\n  height: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message-error {\n  color: ${componentInlineMessage.error.color};\n  fill: ${componentInlineMessage.error.color};\n}\n\n/* form input container styles */\n\n.js-stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container.flexDirection};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > label {\n\tcolor: ${componentForm.input.shared.label.disabled.color};\n}\n\n.js-stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.typography.font};\n\tletter-spacing: ${componentForm.input.shared.description.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > span.description {\n\tcolor: ${componentForm.input.shared.description.disabled.color};\n}\n\n/* text area styles */\n\n.js-stand-text-area {\n\tbackground-color: ${componentTextArea.shared.backgroundColor};\n\tborder-radius: ${componentTextArea.shared.borderRadius};\n\tborder: ${componentTextArea.shared.border};\n\tcolor: ${componentTextArea.shared.color};\n\tcursor: ${componentTextArea.shared.cursor};\n\tmargin-top: ${componentTextArea.shared.marginTop};\n\tpadding-top: ${componentTextArea.shared.padding.top};\n\tpadding-right: ${componentTextArea.shared.padding.right};\n\tpadding-bottom: ${componentTextArea.shared.padding.bottom};\n\tpadding-left: ${componentTextArea.shared.padding.left};\n}\n\n.js-stand-text-area[disabled] {\n\tbackground-color: ${componentTextArea.shared.disabled.backgroundColor};\n\tborder: ${componentTextArea.shared.disabled.border};\n\tcolor: ${componentTextArea.shared.disabled.color};\n\tcursor: ${componentTextArea.shared.disabled.cursor};\n}\n\n.js-stand-text-area[data-invalid] {\n\tborder: ${componentTextArea.shared.errorBorder};\n}\n\n.js-stand-text-area.md {\n\theight: ${componentTextArea.shared.height};\n\tfont: ${componentTextArea.md.typography.font};\n\tletter-spacing: ${componentTextArea.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextArea.md.typography.fontWidth};\n}\n\n.js-stand-text-area.sm {\n\theight: ${componentTextArea.shared.height};\n\tfont: ${componentTextArea.sm.typography.font};\n\tletter-spacing: ${componentTextArea.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextArea.sm.typography.fontWidth};\n}\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<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text input.</span>\n\t\t<textarea id=\"name\" class=\"js-stand-text-area md\"></textarea>\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\">\n\t\t<label for=\"story\">Story</label>\n\t\t<textarea\n\t\t\tid=\"story\"\n\t\t\tclass=\"js-stand-text-area sm\"\n\t\t>It was a dark and stormy night...</textarea>\n\t\t<span class=\"js-stand-inline-message js-stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n\t<div class=\"js-stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<textarea\n\t\t\tid=\"notes\"\n\t\t\tclass=\"js-stand-text-area md\"\n\t\t\ttype=\"text\"\n\t\t\tdisabled\n\t\t </textarea>\n\t</div>\n</div>\n`;\n";

package/dist/types/components/{text-area → TextArea}/types.d.ts

@@ -1,5 +1,5 @@
 import type { TextFieldProps as RACTextAreaProps } from 'react-aria-components';
-import type { FormInputContainerDefaultProps } from '../form/types';
+import type { FormInputContainerDefaultProps } from '../Form/types';
 import type { TextAreaTheme } from './styles';
 export interface TextAreaProps extends FormInputContainerDefaultProps<RACTextAreaProps, TextAreaTheme> {
     /** Temporary text that occupies the text area when it is empty */

package/dist/types/components/{text-input → TextInput}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "TextInput";
-export declare const componentTsx = "import { TextInput } from '@guardian/stand/text-input';\n\nexport const Component = () => (\n\t<>\n\t\t<TextInput\n\t\t\tlabel=\"Name\"\n\t\t\tdescription=\"This is a description for the text input.\"\n\t\t/>\n\n\t\t<TextInput\n\t\t\tsize=\"sm\"\n\t\t\tlabel=\"Username\"\n\t\t\tisInvalid\n\t\t\tdefaultValue=\"guardian_user\"\n\t\t\terror=\"Username is already taken\"\n\t\t/>\n\n\t\t<TextInput\n\t\t\tlabel=\"Password\"\n\t\t\tdescription=\"Showing a different type\"\n\t\t\ttype=\"password\"\n\t\t/>\n\n\t\t<TextInput label=\"Notes\" isDisabled defaultValue=\"Read only content\" />\n\t</>\n);\n";
+export declare const componentTsx = "import { TextInput } from '@guardian/stand/TextInput';\n\nexport const Component = () => (\n\t<>\n\t\t<TextInput\n\t\t\tlabel=\"Name\"\n\t\t\tdescription=\"This is a description for the text input.\"\n\t\t/>\n\n\t\t<TextInput\n\t\t\tsize=\"sm\"\n\t\t\tlabel=\"Username\"\n\t\t\tisInvalid\n\t\t\tdefaultValue=\"guardian_user\"\n\t\t\terror=\"Username is already taken\"\n\t\t/>\n\n\t\t<TextInput\n\t\t\tlabel=\"Password\"\n\t\t\tdescription=\"Showing a different type\"\n\t\t\ttype=\"password\"\n\t\t/>\n\n\t\t<TextInput label=\"Notes\" isDisabled defaultValue=\"Read only content\" />\n\t</>\n);\n";
 export declare const componentCss = "\n/* import the text input, form, inline message styles */\n@import '@guardian/stand/component/inlineMessage.css';\n@import '@guardian/stand/component/form.css';\n@import '@guardian/stand/component/textInput.css';\n\n/* inline message styles - error */\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/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-form-input-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > label {\n\tcolor: var(--component-form-input-shared-label-disabled-color);\n}\n\n.stand-form-input-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > span.description {\n\tcolor: var(--component-form-input-shared-description-disabled-color);\n}\n\n/* text input styles */\n\n.stand-text-input {\n\tbackground-color: var(--component-text-input-shared-background-color);\n\tborder-radius: var(--component-text-input-shared-border-radius);\n\tborder: var(--component-text-input-shared-border);\n\tcolor: var(--component-text-input-shared-color);\n\tcursor: var(--component-text-input-shared-cursor);\n\tmargin-top: var(--component-text-input-shared-margin-top);\n\tpadding-top: var(--component-text-input-shared-padding-top);\n\tpadding-right: var(--component-text-input-shared-padding-right);\n\tpadding-bottom: var(--component-text-input-shared-padding-bottom);\n\tpadding-left: var(--component-text-input-shared-padding-left);\n}\n\n.stand-text-input[disabled] {\n\tbackground-color: var(--component-text-input-shared-disabled-background-color);\n\tborder: var(--component-text-input-shared-disabled-border);\n\tcolor: var(--component-text-input-shared-disabled-color);\n\tcursor: var(--component-text-input-shared-disabled-cursor);\n}\n\n.stand-text-input[data-invalid] {\n\tborder: var(--component-text-input-shared-error-border);\n}\n\n.stand-text-input.md {\n\theight: var(--component-text-input-md-height);\n\tfont: var(--component-text-input-md-typography-font);\n\tletter-spacing: var(--component-text-input-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-input-md-typography-font-width);\n}\n\n.stand-text-input.sm {\n\theight: var(--component-text-input-sm-height);\n\tfont: var(--component-text-input-sm-typography-font);\n\tletter-spacing: var(--component-text-input-sm-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-input-sm-typography-font-width);\n}\n";
 export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div class=\"stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text input.</span>\n\t\t<input id=\"name\" class=\"stand-text-input md\" type=\"text\" />\n\t</div>\n\t<div class=\"stand-form-input-container sm\">\n\t\t<label for=\"username\">Username</label>\n\t\t<input\n\t\t\tid=\"username\"\n\t\t\tclass=\"stand-text-input sm\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"guardian_user\"\n\t\t\tdata-invalid\n\t\t/>\n\t\t<span class=\"stand-inline-message stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n\t<div class=\"stand-form-input-container md\">\n\t\t<label for=\"password\">Password</label>\n\t\t<span class=\"description\">Showing a different type</span>\n\t\t<input id=\"password\" class=\"stand-text-input md\" type=\"password\" />\n\t</div>\n\t<div class=\"stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<input\n\t\t\tid=\"notes\"\n\t\t\tclass=\"stand-text-input md\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"Read only content\"\n\t\t\tdisabled\n\t\t/>\n\t</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentTextInput, componentForm, 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/* inline message styles - error */\n.js-stand-inline-message {\n  display: ${componentInlineMessage.shared.display};\n  align-items: ${componentInlineMessage.shared['align-items']};\n  gap: ${componentInlineMessage.shared.gap};\n  font: ${componentInlineMessage.shared.typography.font};\n  letter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n}\n\n.js-stand-inline-message > .material-symbols {\n  font-size: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message > svg {\n  width: ${componentInlineMessage.shared.icon.size};\n  height: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message-error {\n  color: ${componentInlineMessage.error.color};\n  fill: ${componentInlineMessage.error.color};\n}\n\n/* form input container styles */\n\n.js-stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container['flex-direction']};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > label {\n\tcolor: ${componentForm.input.shared.label.disabled.color};\n}\n\n.js-stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.typography.font};\n\tletter-spacing: ${componentForm.input.shared.description.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > span.description {\n\tcolor: ${componentForm.input.shared.description.disabled.color};\n}\n\n/* text input styles */\n\n.js-stand-text-input {\n\tbackground-color: ${componentTextInput.shared['background-color']};\n\tborder-radius: ${componentTextInput.shared['border-radius']};\n\tborder: ${componentTextInput.shared.border};\n\tcolor: ${componentTextInput.shared.color};\n\tcursor: ${componentTextInput.shared.cursor};\n\tmargin-top: ${componentTextInput.shared['margin-top']};\n\tpadding-top: ${componentTextInput.shared.padding.top};\n\tpadding-right: ${componentTextInput.shared.padding.right};\n\tpadding-bottom: ${componentTextInput.shared.padding.bottom};\n\tpadding-left: ${componentTextInput.shared.padding.left};\n}\n\n.js-stand-text-input[disabled] {\n\tbackground-color: ${componentTextInput.shared.disabled.backgroundColor};\n\tborder: ${componentTextInput.shared.disabled.border};\n\tcolor: ${componentTextInput.shared.disabled.color};\n\tcursor: ${componentTextInput.shared.disabled.cursor};\n}\n\n.js-stand-text-input[data-invalid] {\n\tborder: ${componentTextInput.shared.errorBorder};\n}\n\n.js-stand-text-input.md {\n\theight: ${componentTextInput.md.height};\n\tfont: ${componentTextInput.md.typography.font};\n\tletter-spacing: ${componentTextInput.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextInput.md.typography.fontWidth};\n}\n\n.js-stand-text-input.sm {\n\theight: ${componentTextInput.sm.height};\n\tfont: ${componentTextInput.sm.typography.font};\n\tletter-spacing: ${componentTextInput.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextInput.sm.typography.fontWidth};\n}\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<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text input.</span>\n\t\t<input id=\"name\" class=\"js-stand-text-input md\" type=\"text\" />\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\">\n\t\t<label for=\"username\">Username</label>\n\t\t<input\n\t\t\tid=\"username\"\n\t\t\tclass=\"js-stand-text-input sm\"\n\t\t\ttype=\"text\"\n\t\t/>\n\t\t<span class=\"js-stand-inline-message js-stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"password\">Password</label>\n\t\t<span class=\"description\">Showing a different type</span>\n\t\t<input id=\"password\" class=\"js-stand-text-input md\" type=\"password\" />\n\t</div>\n\t<div class=\"js-stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<input\n\t\t\tid=\"notes\"\n\t\t\tclass=\"js-stand-text-input md\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"Read only content\"\n\t\t\tdisabled\n\t\t />\n\t</div>\n</div>\n`;\n";
+export declare const componentJs = "\nimport { componentTextInput, componentForm, 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/* inline message styles - error */\n.js-stand-inline-message {\n  display: ${componentInlineMessage.shared.display};\n  align-items: ${componentInlineMessage.shared.alignItems};\n  gap: ${componentInlineMessage.shared.gap};\n  font: ${componentInlineMessage.shared.typography.font};\n  letter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n}\n\n.js-stand-inline-message > .material-symbols {\n  font-size: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message > svg {\n  width: ${componentInlineMessage.shared.icon.size};\n  height: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message-error {\n  color: ${componentInlineMessage.error.color};\n  fill: ${componentInlineMessage.error.color};\n}\n\n/* form input container styles */\n\n.js-stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container.flexDirection};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > label {\n\tcolor: ${componentForm.input.shared.label.disabled.color};\n}\n\n.js-stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.typography.font};\n\tletter-spacing: ${componentForm.input.shared.description.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > span.description {\n\tcolor: ${componentForm.input.shared.description.disabled.color};\n}\n\n/* text input styles */\n\n.js-stand-text-input {\n\tbackground-color: ${componentTextInput.shared.backgroundColor};\n\tborder-radius: ${componentTextInput.shared.borderRadius};\n\tborder: ${componentTextInput.shared.border};\n\tcolor: ${componentTextInput.shared.color};\n\tcursor: ${componentTextInput.shared.cursor};\n\tmargin-top: ${componentTextInput.shared.marginTop};\n\tpadding-top: ${componentTextInput.shared.padding.top};\n\tpadding-right: ${componentTextInput.shared.padding.right};\n\tpadding-bottom: ${componentTextInput.shared.padding.bottom};\n\tpadding-left: ${componentTextInput.shared.padding.left};\n}\n\n.js-stand-text-input[disabled] {\n\tbackground-color: ${componentTextInput.shared.disabled.backgroundColor};\n\tborder: ${componentTextInput.shared.disabled.border};\n\tcolor: ${componentTextInput.shared.disabled.color};\n\tcursor: ${componentTextInput.shared.disabled.cursor};\n}\n\n.js-stand-text-input[data-invalid] {\n\tborder: ${componentTextInput.shared.errorBorder};\n}\n\n.js-stand-text-input.md {\n\theight: ${componentTextInput.md.height};\n\tfont: ${componentTextInput.md.typography.font};\n\tletter-spacing: ${componentTextInput.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextInput.md.typography.fontWidth};\n}\n\n.js-stand-text-input.sm {\n\theight: ${componentTextInput.sm.height};\n\tfont: ${componentTextInput.sm.typography.font};\n\tletter-spacing: ${componentTextInput.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextInput.sm.typography.fontWidth};\n}\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<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text input.</span>\n\t\t<input id=\"name\" class=\"js-stand-text-input md\" type=\"text\" />\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\">\n\t\t<label for=\"username\">Username</label>\n\t\t<input\n\t\t\tid=\"username\"\n\t\t\tclass=\"js-stand-text-input sm\"\n\t\t\ttype=\"text\"\n\t\t/>\n\t\t<span class=\"js-stand-inline-message js-stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"password\">Password</label>\n\t\t<span class=\"description\">Showing a different type</span>\n\t\t<input id=\"password\" class=\"js-stand-text-input md\" type=\"password\" />\n\t</div>\n\t<div class=\"js-stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<input\n\t\t\tid=\"notes\"\n\t\t\tclass=\"js-stand-text-input md\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"Read only content\"\n\t\t\tdisabled\n\t\t />\n\t</div>\n</div>\n`;\n";

package/dist/types/components/{text-input → TextInput}/types.d.ts

@@ -1,5 +1,5 @@
 import type { TextFieldProps as RACTextInputProps } from 'react-aria-components';
-import type { FormInputContainerDefaultProps } from '../form/types';
+import type { FormInputContainerDefaultProps } from '../Form/types';
 import type { TextInputTheme } from './styles';
 export interface TextInputProps extends FormInputContainerDefaultProps<RACTextInputProps, TextInputTheme> {
     /** Temporary text that occupies the text input when it is empty */

package/dist/types/components/{topbar/topBarItem → TopBar/TopBarItem}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "TopBarItem";
 export declare const componentTsx = "import { TopBarItem } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<TopBarItem>Hello</TopBarItem>\n);\n";
-export declare const componentCss = "\n/* import the topbaritem styles */\n@import '@guardian/stand/component/TopBar.css';\n\n.stand-top-bar-item {\n\tdisplay: var(--component-top-bar-item-display);\n\talign-items: var(--component-top-bar-item-align-items);\n\theight: var(--component-top-bar-item-height);\n\tpadding: var(--component-top-bar-item-sm-padding-top) var(--component-top-bar-item-sm-padding-right) var(--component-top-bar-item-sm-padding-bottom) var(--component-top-bar-item-sm-padding-left);\n\tborder-right: var(--component-top-bar-item-border);\n}\n";
+export declare const componentCss = "\n/* import the topbaritem styles */\n@import '@guardian/stand/component/topBar.css';\n\n.stand-top-bar-item {\n\tdisplay: var(--component-top-bar-item-display);\n\talign-items: var(--component-top-bar-item-align-items);\n\theight: var(--component-top-bar-item-height);\n\tpadding: var(--component-top-bar-item-sm-padding-top) var(--component-top-bar-item-sm-padding-right) var(--component-top-bar-item-sm-padding-bottom) var(--component-top-bar-item-sm-padding-left);\n\tborder-right: var(--component-top-bar-item-border);\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-top-bar-item\">Hello</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentTopBar } from \"@guardian/stand\";\n\nconst style = `\n\tdisplay: ${componentTopBar.Item.display};\n\talign-items: ${componentTopBar.Item['align-items']};\n\theight: ${componentTopBar.Item.height};\n\tpadding: ${componentTopBar.Item.sm.padding.top} ${componentTopBar.Item.sm.padding.right} ${componentTopBar.Item.sm.padding.bottom} ${componentTopBar.Item.sm.padding.left};\n\tborder-right: ${componentTopBar.Item.border};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<div style=\"${style}\">Hello</div>\n\t</div>\n`;\n";
+export declare const componentJs = "\nimport { componentTopBar } from \"@guardian/stand\";\n\nconst style = `\n\tdisplay: ${componentTopBar.Item.display};\n\talign-items: ${componentTopBar.Item.alignItems};\n\theight: ${componentTopBar.Item.height};\n\tpadding: ${componentTopBar.Item.sm.padding.top} ${componentTopBar.Item.sm.padding.right} ${componentTopBar.Item.sm.padding.bottom} ${componentTopBar.Item.sm.padding.left};\n\tborder-right: ${componentTopBar.Item.border};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<div style=\"${style}\">Hello</div>\n\t</div>\n`;\n";

package/dist/types/components/{topbar/topBarItem → TopBar/TopBarItem}/styles.d.ts

@@ -1,8 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
-import type { ComponentTopBar } from '../../../styleD/build/typescript/component/TopBar';
+import type { ComponentTopBar } from '../../../styleD/build/typescript/component/topBar';
 import type { DeepPartial, Prettify } from '../../../util/types';
 import type { TopBarItemProps } from './types';
-export type TopBarItemTheme = Prettify<ComponentTopBar['Item']>;
+export type TopBarItemTheme = Prettify<ComponentTopBar['item']>;
 export type PartialTopBarItemTheme = Prettify<DeepPartial<TopBarItemTheme>>;
 export declare const defaultTopBarItemTheme: TopBarItemTheme;
 export declare const topBarItemStyles: (theme: TopBarItemTheme, alignment: 'left' | 'right', { size }: Required<Pick<TopBarItemProps, 'size'>>, _menuOpen?: boolean) => SerializedStyles;

package/dist/types/components/{topbar/topBarNavigation → TopBar/TopBarNavigation}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "TopBarNavigation";
 export declare const componentTsx = "import { TopBarNavigation } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<TopBarNavigation text=\"Recipe\" icon=\"yakitori\" />\n);\n";
-export declare const componentCss = "\n/* import the topbarnavigation styles */\n@import '@guardian/stand/component/TopBar.css';\n\n.stand-top-bar-navigation {\n\tdisplay: var(--component-top-bar-navigation-shared-display);\n\talign-items: var(--component-top-bar-navigation-shared-align-items);\n\tcolor: var(--component-top-bar-navigation-unselected-color);\n\theight: var(--component-top-bar-navigation-shared-height);\n\tpadding-top: var(--component-top-bar-navigation-shared-padding-top);\n\tpadding-right: var(--component-top-bar-navigation-shared-padding-right);\n\tpadding-bottom: var(--component-top-bar-navigation-shared-padding-bottom);\n\tpadding-left: var(--component-top-bar-navigation-shared-padding-left);\n\ttext-decoration: var(--component-top-bar-navigation-shared-text-decoration);\n\n\tborder-top: var(--component-top-bar-navigation-shared-border-top);\n\tborder-bottom: var(--component-top-bar-navigation-unselected-border-bottom);\n\n\t&[data-hovered],\n\t&:hover {\n\t\tborder-bottom: var(--component-top-bar-navigation-selected-border-bottom);\n\t\tcursor: var(--component-top-bar-navigation-shared-cursor);\n\t}\n\n\t&[data-focus-visible],\n\t&:focus-visible {\n\t\toutline: var(--component-top-bar-navigation-shared-focus-visible-outline);\n\t\tborder-bottom: var(--component-top-bar-navigation-selected-border-bottom);\n\t\toutline-offset: var(--component-top-bar-navigation-shared-focus-visible-outline-offset);\n\t}\n\n\t&[data-disabled] {\n\t\tcursor: var(--component-top-bar-navigation-shared-disabled-cursor);\n\t\tcolor: var(--component-top-bar-navigation-shared-disabled-color);\n\t}\n\n\tfont: var(--component-top-bar-navigation-md-typography-font);\n\tletter-spacing: var(--component-top-bar-navigation-md-typography-letter-spacing);\n\tfont-variation-settings: 'wdth'\n\t\tvar(--component-top-bar-navigation-md-typography-font-width);\n}\n\n.stand-navigation-text {\n\tmargin-left: var(--component-top-bar-navigation-text-margin-left);\n}\n\n.stand-expand-more {\n\tmargin-top: var(--component-top-bar-navigation-expand-more-padding-top);\n\tmargin-left: var(--component-top-bar-navigation-expand-more-padding-left);\n}\n";
+export declare const componentCss = "\n/* import the topbarnavigation styles */\n@import '@guardian/stand/component/topBar.css';\n\n.stand-top-bar-navigation {\n\tdisplay: var(--component-top-bar-navigation-shared-display);\n\talign-items: var(--component-top-bar-navigation-shared-align-items);\n\tcolor: var(--component-top-bar-navigation-unselected-color);\n\theight: var(--component-top-bar-navigation-shared-height);\n\tpadding-top: var(--component-top-bar-navigation-shared-padding-top);\n\tpadding-right: var(--component-top-bar-navigation-shared-padding-right);\n\tpadding-bottom: var(--component-top-bar-navigation-shared-padding-bottom);\n\tpadding-left: var(--component-top-bar-navigation-shared-padding-left);\n\ttext-decoration: var(--component-top-bar-navigation-shared-text-decoration);\n\n\tborder-top: var(--component-top-bar-navigation-shared-border-top);\n\tborder-bottom: var(--component-top-bar-navigation-unselected-border-bottom);\n\n\t&[data-hovered],\n\t&:hover {\n\t\tborder-bottom: var(--component-top-bar-navigation-selected-border-bottom);\n\t\tcursor: var(--component-top-bar-navigation-shared-cursor);\n\t}\n\n\t&[data-focus-visible],\n\t&:focus-visible {\n\t\toutline: var(--component-top-bar-navigation-shared-focus-visible-outline);\n\t\tborder-bottom: var(--component-top-bar-navigation-selected-border-bottom);\n\t\toutline-offset: var(--component-top-bar-navigation-shared-focus-visible-outline-offset);\n\t}\n\n\t&[data-disabled] {\n\t\tcursor: var(--component-top-bar-navigation-shared-disabled-cursor);\n\t\tcolor: var(--component-top-bar-navigation-shared-disabled-color);\n\t}\n\n\tfont: var(--component-top-bar-navigation-md-typography-font);\n\tletter-spacing: var(--component-top-bar-navigation-md-typography-letter-spacing);\n\tfont-variation-settings: 'wdth'\n\t\tvar(--component-top-bar-navigation-md-typography-font-width);\n}\n\n.stand-navigation-text {\n\tmargin-left: var(--component-top-bar-navigation-text-margin-left);\n}\n\n.stand-expand-more {\n\tmargin-top: var(--component-top-bar-navigation-expand-more-padding-top);\n\tmargin-left: var(--component-top-bar-navigation-expand-more-padding-left);\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<span class=\"stand-top-bar-navigation\">\n\t\t<span class=\"material-symbols \" >file_upload</span>\n\t\t<span class=\"stand-navigation-text\">Navigation</span>\n\t\t<div class=\"stand-expand-more\">\n\t\t\t<span class=\"material-symbols\" >keyboard_arrow_down</span>\n\t\t</div>\n\t</span>\n</div>\n";
-export declare const componentJs = "\nimport { componentTopBar } from \"@guardian/stand\";\n\nconst style = `\n\tdisplay: ${componentTopBar.Navigation.shared.display};\n\talign-items: ${componentTopBar.Navigation.shared['align-items']};\n\tcolor: ${componentTopBar.Navigation.unselected.color};\n\theight: ${componentTopBar.Navigation.shared.height};\n\tpadding-top: ${componentTopBar.Navigation.shared.padding.top};\n\tpadding-right: ${componentTopBar.Navigation.shared.padding.right};\n\tpadding-bottom: ${componentTopBar.Navigation.shared.padding.bottom};\n\tpadding-left: ${componentTopBar.Navigation.shared.padding.left};\n\ttext-decoration: ${componentTopBar.Navigation.shared['text-decoration']};\n\n\tfont: ${componentTopBar.Navigation.md.typography.font};\n\tletter-spacing: ${componentTopBar.Navigation.md.typography.letterSpacing};\n\tfont-variation-settings: 'wdth'\n\t\t${componentTopBar.Navigation.md.typography.fontWidth};\n\n\t&:hover {\n\t\tborder-bottom: ${componentTopBar.Navigation.selected['border-bottom']};\n\t\tcursor: ${componentTopBar.Navigation.shared.cursor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentTopBar.Navigation.shared[':focus-visible'].outline};\n\t\tborder-bottom: ${componentTopBar.Navigation.selected['border-bottom']};\n\t\toutline-offset: ${componentTopBar.Navigation.shared[':focus-visible']['outline-offset']};\n\t}\n\n\t&[data-disabled] {\n\t\tcursor: ${componentTopBar.Navigation.shared[':disabled'].cursor};\n\t\tcolor: ${componentTopBar.Navigation.shared[':disabled'].color};\n\t}\n`;\n\nconst textStyle = `margin-left: ${componentTopBar.Navigation.text.margin.left};\n`;\n\nconst expandMoreStyle = `\n\tmargin-top: ${componentTopBar.Navigation.menuIndicator.margin.top};\n\tmargin-left: ${componentTopBar.Navigation.menuIndicator.margin.left};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<span style=\"${style}\">\n\t\t<span class=\"material-symbols\">file_upload</span>\n\t\t<span style=\"${textStyle}\">Navigation</span>\n\t\t<div style=\"${expandMoreStyle}\">\n\t\t\t<span class=\"material-symbols\">keyboard_arrow_down</span>\n\t\t</div>\n\t</span>\n`;\n";
+export declare const componentJs = "\nimport { componentTopBar } from \"@guardian/stand\";\n\nconst style = `\n\tdisplay: ${componentTopBar.Navigation.shared.display};\n\talign-items: ${componentTopBar.Navigation.shared.alignItems};\n\tcolor: ${componentTopBar.Navigation.unselected.color};\n\theight: ${componentTopBar.Navigation.shared.height};\n\tpadding-top: ${componentTopBar.Navigation.shared.padding.top};\n\tpadding-right: ${componentTopBar.Navigation.shared.padding.right};\n\tpadding-bottom: ${componentTopBar.Navigation.shared.padding.bottom};\n\tpadding-left: ${componentTopBar.Navigation.shared.padding.left};\n\ttext-decoration: ${componentTopBar.Navigation.shared.textDecoration};\n\n\tfont: ${componentTopBar.Navigation.md.typography.font};\n\tletter-spacing: ${componentTopBar.Navigation.md.typography.letterSpacing};\n\tfont-variation-settings: 'wdth'\n\t\t${componentTopBar.Navigation.md.typography.fontWidth};\n\n\t&:hover {\n\t\tborder-bottom: ${componentTopBar.Navigation.selected.borderBottom};\n\t\tcursor: ${componentTopBar.Navigation.shared.cursor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentTopBar.Navigation.shared.focusVisible.outline};\n\t\tborder-bottom: ${componentTopBar.Navigation.selected.borderBottom};\n\t\toutline-offset: ${componentTopBar.Navigation.shared.focusVisible.outlineOffset};\n\t}\n\n\t&[data-disabled] {\n\t\tcursor: ${componentTopBar.Navigation.shared.disabled.cursor};\n\t\tcolor: ${componentTopBar.Navigation.shared.disabled.color};\n\t}\n`;\n\nconst textStyle = `margin-left: ${componentTopBar.Navigation.text.margin.left};\n`;\n\nconst expandMoreStyle = `\n\tmargin-top: ${componentTopBar.Navigation.menuIndicator.margin.top};\n\tmargin-left: ${componentTopBar.Navigation.menuIndicator.margin.left};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<span style=\"${style}\">\n\t\t<span class=\"material-symbols\">file_upload</span>\n\t\t<span style=\"${textStyle}\">Navigation</span>\n\t\t<div style=\"${expandMoreStyle}\">\n\t\t\t<span class=\"material-symbols\">keyboard_arrow_down</span>\n\t\t</div>\n\t</span>\n`;\n";

package/dist/types/components/{topbar/topBarNavigation → TopBar/TopBarNavigation}/styles.d.ts

@@ -1,8 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
-import type { ComponentTopBar } from '../../../styleD/build/typescript/component/TopBar';
+import type { ComponentTopBar } from '../../../styleD/build/typescript/component/topBar';
 import type { DeepPartial, Prettify } from '../../../util/types';
 import type { TopBarNavigationProps } from './types';
-export type TopBarNavigationTheme = Prettify<ComponentTopBar['Navigation']>;
+export type TopBarNavigationTheme = Prettify<ComponentTopBar['navigation']>;
 export type PartialTopBarNavigationTheme = Prettify<DeepPartial<TopBarNavigationTheme>>;
 export declare const defaultTopBarNavigationTheme: TopBarNavigationTheme;
 export declare const topBarNavigationStyles: (theme: TopBarNavigationTheme, selected: boolean, _menuOpen?: boolean) => SerializedStyles;

package/dist/types/components/{topbar/topBarNavigation → TopBar/TopBarNavigation}/types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { PressEvent } from 'react-aria-components';
 import type { DefaultProps } from '../../../util/types';
-import type { IconProps } from '../../icon/types';
+import type { IconProps } from '../../Icon/types';
 import type { TopBarNavigationTheme } from './styles';
 export interface TopBarNavigationProps extends DefaultProps<TopBarNavigationTheme> {
     /**

package/dist/types/components/{topbar/topBarToolName → TopBar/TopBarToolName}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "TopBarToolName";
 export declare const componentTsx = "import { TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => {\n\treturn (\n\t\t<>\n\t\t\t<TopBarToolName\n\t\t\t\tname=\"Songwriter\"\n\t\t\t\tfavicon={{ type: 'letter', letter: 'S' }}\n\t\t\t\tsubsection=\"Article\"\n\t\t\t\tsubsectionIcon=\"menu\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n";
-export declare const componentCss = "@import \"@guardian/stand/component/TopBar.css\";\n\t/* import the favicon styles */\n\t@import '@guardian/stand/component/favicon.css';\n\n    /* example setup of tool name */\n    .stand-topbar-toolname {\n\t\tdisplay: var(--component-top-bar-tool-name-display);\n\t\talign-items: var(--component-top-bar-tool-name-align-items);\n\t\tgap: var(--component-top-bar-tool-name-gap);\n\t\tfont: var(--component-top-bar-tool-name-typography-font);\n\t\tletter-spacing: var(--component-top-bar-tool-name-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-typography-font-width);\n    }\n\n\t.stand-topbar-toolname-divider {\n\t\tborder-right: var(--component-top-bar-tool-name-divider-border);\n\t\theight: var(--component-top-bar-tool-name-divider-height);\n\t}\n\n\t.stand-topbar-toolname-subsection {\n\t\tdisplay: var(--component-top-bar-tool-name-display);\n\t\talign-items: var(--component-top-bar-tool-name-align-items);\n\t\tgap: var(--component-top-bar-tool-name-subsection-gap);\n\t\tfont: var(--component-top-bar-tool-name-subsection-typography-font);\n\t\tletter-spacing: var(--component-top-bar-tool-name-subsection-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-subsection-typography-font-width)\n\t}\n\n\t.stand-favicon {\n\t\tbackground-color: var(--component-favicon-color-background);\n\t\tdisplay: var(--component-favicon-display);\n\t\talign-items: var(--component-favicon-align-items);\n\t\tjustify-content: var(--component-favicon-justify-content);\n\t\twidth: var(--component-favicon-size);\n\t\theight: var(--component-favicon-size);\n\t\tuser-select: var(--component-favicon-user-select);\n\t\tcolor: var(--component-favicon-color-text);\n\t\tfont: var(--component-favicon-typography-font);\n\t\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n\t}\n\n";
+export declare const componentCss = "@import \"@guardian/stand/component/topBar.css\";\n\t/* import the favicon styles */\n\t@import '@guardian/stand/component/favicon.css';\n\n    /* example setup of tool name */\n    .stand-topbar-toolname {\n\t\tdisplay: var(--component-top-bar-tool-name-display);\n\t\talign-items: var(--component-top-bar-tool-name-align-items);\n\t\tgap: var(--component-top-bar-tool-name-gap);\n\t\tfont: var(--component-top-bar-tool-name-typography-font);\n\t\tletter-spacing: var(--component-top-bar-tool-name-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-typography-font-width);\n    }\n\n\t.stand-topbar-toolname-divider {\n\t\tborder-right: var(--component-top-bar-tool-name-divider-border);\n\t\theight: var(--component-top-bar-tool-name-divider-height);\n\t}\n\n\t.stand-topbar-toolname-subsection {\n\t\tdisplay: var(--component-top-bar-tool-name-display);\n\t\talign-items: var(--component-top-bar-tool-name-align-items);\n\t\tgap: var(--component-top-bar-tool-name-subsection-gap);\n\t\tfont: var(--component-top-bar-tool-name-subsection-typography-font);\n\t\tletter-spacing: var(--component-top-bar-tool-name-subsection-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-subsection-typography-font-width)\n\t}\n\n\t.stand-favicon {\n\t\tbackground-color: var(--component-favicon-color-background);\n\t\tdisplay: var(--component-favicon-display);\n\t\talign-items: var(--component-favicon-align-items);\n\t\tjustify-content: var(--component-favicon-justify-content);\n\t\twidth: var(--component-favicon-size);\n\t\theight: var(--component-favicon-size);\n\t\tuser-select: var(--component-favicon-user-select);\n\t\tcolor: var(--component-favicon-color-text);\n\t\tfont: var(--component-favicon-typography-font);\n\t\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n\t}\n\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-topbar-toolname\">\n\t\t<div class=\"stand-favicon\">S</div>\n\t\t<div>Songwriter</div>\n\t\t<div class=\"stand-topbar-toolname-divider\">&nbsp;</div>\n\t\t <div class=\"stand-topbar-toolname-subsection\">\n\t\t\t <div><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"></path></svg></div>\n\t\t\t <div>Article</div>\n\t\t</div>\n\t</div>\n</div>";
-export declare const componentJs = "\n\t// for ts/js\n\timport { componentFavicon, componentTopBar, baseColors } from '@guardian/stand';\n\n\tconst style = `\n\t\tdisplay: ${componentTopBar.ToolName.display};\n\t\talign-items: ${componentTopBar.ToolName[\"align-items\"]};\n\t\tgap: ${componentTopBar.ToolName.gap};\n\t\tfont: ${componentTopBar.ToolName.typography.font};\n\t\tletter-spacing: ${componentTopBar.ToolName.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.typography.fontWidth};\n\t`;\n\n\tconst dividerStyle = `\n\t\tborder-right: ${componentTopBar.ToolName.divider.border};\n\t\theight:  ${componentTopBar.ToolName.divider.height};\n\t`;\n\n\tconst subsectionStyle = `\n\t\tdisplay: ${componentTopBar.ToolName.display};\n\t\talign-items: ${componentTopBar.ToolName[\"align-items\"]};\n\t\tgap: ${componentTopBar.ToolName.subsection.gap};\n\t\tfont: ${componentTopBar.ToolName.subsection.typography.font};\n\t\tletter-spacing: ${componentTopBar.ToolName.subsection.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.subsection.typography.fontWidth};\n\t`;\n\n\tconst faviconStyle = `\n\t\tbackground-color: ${componentFavicon.color.background};\n\t\tdisplay: ${componentFavicon.display};\n\t\talign-items: ${componentFavicon[\"align-items\"]};\n\t\tjustify-content: ${componentFavicon[\"justify-content\"]};\n\t\twidth: ${componentFavicon.size};\n\t\theight: ${componentFavicon.size};\n\t\tuser-select: ${componentFavicon[\"user-select\"]};\n\t\tcolor: ${componentFavicon.color.text};\n\t\tfont: ${componentFavicon.typography.font};\n\t\tletter-spacing: ${componentFavicon.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentFavicon.typography.fontWidth};\n\t`;\n\n\t// e.g. adding to DOM using vanilla JS styles\n\tdocument.getElementById(\"app\").innerHTML = `\n\n\t<div class=\"container\">\n\t\t<div style=\"${style}\">\n\t\t\t<div style=\"${faviconStyle}>S</div>\n\t\t\t<div>Songwriter</div>\n\t\t\t<div style=\"${dividerStyle}\">&nbsp;</div>\n\t\t\t<div style=\"${subsectionStyle}\">\n\t\t\t\t<div><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"></path></svg></div>\n\t\t\t\t<div>Article</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n`;\n";
+export declare const componentJs = "\n\t// for ts/js\n\timport { componentFavicon, componentTopBar, baseColors } from '@guardian/stand';\n\n\tconst style = `\n\t\tdisplay: ${componentTopBar.ToolName.display};\n\t\talign-items: ${componentTopBar.ToolName.alignItems};\n\t\tgap: ${componentTopBar.ToolName.gap};\n\t\tfont: ${componentTopBar.ToolName.typography.font};\n\t\tletter-spacing: ${componentTopBar.ToolName.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.typography.fontWidth};\n\t`;\n\n\tconst dividerStyle = `\n\t\tborder-right: ${componentTopBar.ToolName.divider.border};\n\t\theight:  ${componentTopBar.ToolName.divider.height};\n\t`;\n\n\tconst subsectionStyle = `\n\t\tdisplay: ${componentTopBar.ToolName.display};\n\t\talign-items: ${componentTopBar.ToolName.alignItems};\n\t\tgap: ${componentTopBar.ToolName.subsection.gap};\n\t\tfont: ${componentTopBar.ToolName.subsection.typography.font};\n\t\tletter-spacing: ${componentTopBar.ToolName.subsection.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.subsection.typography.fontWidth};\n\t`;\n\n\tconst faviconStyle = `\n\t\tbackground-color: ${componentFavicon.color.background};\n\t\tdisplay: ${componentFavicon.display};\n\t\talign-items: ${componentFavicon.alignItems};\n\t\tjustify-content: ${componentFavicon.justifyContent};\n\t\twidth: ${componentFavicon.size};\n\t\theight: ${componentFavicon.size};\n\t\tuser-select: ${componentFavicon.userSelect};\n\t\tcolor: ${componentFavicon.color.text};\n\t\tfont: ${componentFavicon.typography.font};\n\t\tletter-spacing: ${componentFavicon.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentFavicon.typography.fontWidth};\n\t`;\n\n\t// e.g. adding to DOM using vanilla JS styles\n\tdocument.getElementById(\"app\").innerHTML = `\n\n\t<div class=\"container\">\n\t\t<div style=\"${style}\">\n\t\t\t<div style=\"${faviconStyle}>S</div>\n\t\t\t<div>Songwriter</div>\n\t\t\t<div style=\"${dividerStyle}\">&nbsp;</div>\n\t\t\t<div style=\"${subsectionStyle}\">\n\t\t\t\t<div><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"></path></svg></div>\n\t\t\t\t<div>Article</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/{topbar/topBarToolName → TopBar/TopBarToolName}/styles.d.ts

@@ -1,8 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
-import { type ComponentTopBar } from '../../..//styleD/build/typescript/component/TopBar';
+import { type ComponentTopBar } from '../../../styleD/build/typescript/component/topBar';
 import type { DeepPartial, Prettify } from '../../../util/types';
 import type { TopBarToolNameProps } from './types';
-export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
+export type TopBarToolNameTheme = Prettify<ComponentTopBar['toolName']>;
 export type PartialTopBarToolNameTheme = Prettify<DeepPartial<TopBarToolNameTheme>>;
 export declare const defaultToolNameTheme: TopBarToolNameTheme;
 export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme, { collapseBelow }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;

package/dist/types/components/{topbar/topBarToolName → TopBar/TopBarToolName}/types.d.ts

@@ -1,8 +1,8 @@
 import type { LinkProps as RACLinkProps } from 'react-aria-components';
 import type { Breakpoint } from '../../../styleD/utils/semantic/mq';
 import type { DefaultProps } from '../../../util/types';
-import type { FaviconProps } from '../../favicon/types';
-import type { IconProps } from '../../icon/types';
+import type { FaviconProps } from '../../Favicon/types';
+import type { IconProps } from '../../Icon/types';
 import type { TopBarToolNameTheme } from './styles';
 export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme, RACLinkProps['className']>, Omit<RACLinkProps, 'children'> {
     /**

package/dist/types/components/{topbar → TopBar}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "TopBar";
 export declare const componentTsx = "import { TopBar, TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<TopBar><TopBarToolName name=\"Composer\" favicon={{ letter: \"C\" }} /></TopBar>\n);\n";
-export declare const componentCss = "\n/* import the styles */\n@import '@guardian/stand/component/TopBar.css';\n@import '@guardian/stand/component/favicon.css';\n\n.stand-top-bar {\n\tdisplay: var(--component-top-bar-display);\n\tjustify-content: var(--component-top-bar-justify-content);\n\theight: var(--component-top-bar-height);\n\tborder: var(--component-top-bar-border);\n}\n\n.stand-top-bar-lhs {\n\tdisplay: var(--component-top-bar-display);\n}\n\n.stand-top-bar-tool-name {\n\tdisplay: var(--component-top-bar-tool-name-display);\n\talign-items: var(--component-top-bar-tool-name-align-items);\n\tgap: var(--component-top-bar-tool-name-gap);\n\tfont: var(--component-top-bar-tool-name-typography-font);\n\tletter-spacing: var(--component-top-bar-tool-name-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-typography-font-width);\n}\n\n.stand-favicon {\n\t\tbackground-color: var(--component-favicon-color-background);\n\t\tdisplay: var(--component-favicon-display);\n\t\talign-items: var(--component-favicon-align-items);\n\t\tjustify-content: var(--component-favicon-justify-content);\n\t\twidth: var(--component-favicon-size);\n\t\theight: var(--component-favicon-size);\n\t\tuser-select: var(--component-favicon-user-select);\n\t\tcolor: var(--component-favicon-color-text);\n\t\tfont: var(--component-favicon-typography-font);\n\t\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n}\n\n.stand-top-bar-item {\n\tdisplay: var(--component-top-bar-item-display);\n\talign-items: var(--component-top-bar-item-align-items);\n\theight: var(--component-top-bar-item-height);\n\tpadding: var(--component-top-bar-item-sm-padding-top) var(--component-top-bar-item-sm-padding-right) var(--component-top-bar-item-sm-padding-bottom) var(--component-top-bar-item-sm-padding-left);\n\tborder-right: var(--component-top-bar-item-border);\n}\n\n";
+export declare const componentCss = "\n/* import the styles */\n@import '@guardian/stand/component/topBar.css';\n@import '@guardian/stand/component/favicon.css';\n\n.stand-top-bar {\n\tdisplay: var(--component-top-bar-display);\n\tjustify-content: var(--component-top-bar-justify-content);\n\theight: var(--component-top-bar-height);\n\tborder: var(--component-top-bar-border);\n}\n\n.stand-top-bar-lhs {\n\tdisplay: var(--component-top-bar-display);\n}\n\n.stand-top-bar-tool-name {\n\tdisplay: var(--component-top-bar-tool-name-display);\n\talign-items: var(--component-top-bar-tool-name-align-items);\n\tgap: var(--component-top-bar-tool-name-gap);\n\tfont: var(--component-top-bar-tool-name-typography-font);\n\tletter-spacing: var(--component-top-bar-tool-name-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-typography-font-width);\n}\n\n.stand-favicon {\n\t\tbackground-color: var(--component-favicon-color-background);\n\t\tdisplay: var(--component-favicon-display);\n\t\talign-items: var(--component-favicon-align-items);\n\t\tjustify-content: var(--component-favicon-justify-content);\n\t\twidth: var(--component-favicon-size);\n\t\theight: var(--component-favicon-size);\n\t\tuser-select: var(--component-favicon-user-select);\n\t\tcolor: var(--component-favicon-color-text);\n\t\tfont: var(--component-favicon-typography-font);\n\t\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n}\n\n.stand-top-bar-item {\n\tdisplay: var(--component-top-bar-item-display);\n\talign-items: var(--component-top-bar-item-align-items);\n\theight: var(--component-top-bar-item-height);\n\tpadding: var(--component-top-bar-item-sm-padding-top) var(--component-top-bar-item-sm-padding-right) var(--component-top-bar-item-sm-padding-bottom) var(--component-top-bar-item-sm-padding-left);\n\tborder-right: var(--component-top-bar-item-border);\n}\n\n";
 export declare const componentHtml = "\n\t<div class=\"stand-top-bar\">\n\t\t<div class=\"stand-top-bar-lhs\">\n\t\t\t<div class=\"stand-top-bar-tool-name stand-top-bar-item\">\n\t\t\t\t<div class=\"stand-favicon\">C</div>\n\t\t\t\t<div>Composer</div>\n\t\t\t</div>\n\t\t\t<div class=\"stand-top-bar-item\">Item 1</div>\n\t\t</div>\n\t</div>\n";
-export declare const componentJs = "\nimport { componentTopBar } from \"@guardian/stand\";\nimport { componentFavicon } from \"@guardian/stand\";\nconst style = `\n\tdisplay: ${componentTopBar.display};\n\tjustify-content: ${componentTopBar['justify-content']};\n\theight: ${componentTopBar.height};\n\tborder: ${componentTopBar.border};\n`;\n\nconst lhsStyle = `\n\tdisplay: ${componentTopBar.display};\n`;\n\nconst toolNameStyle = `display: ${componentTopBar.ToolName.display};\n\talign-items: ${componentTopBar.ToolName['align-items']};\n\tgap: ${componentTopBar.ToolName.gap};\n\tfont: ${componentTopBar.ToolName.typography.font};\n\tletter-spacing: ${componentTopBar.ToolName.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.typography.fontWidth};\n`;\n\nconst faviconStyle = `\n\tbackground-color: ${componentFavicon.color.background};\n\tdisplay: ${componentFavicon.display};\n\talign-items: ${componentFavicon['align-items']};\n\tjustify-content: ${componentFavicon['justify-content']};\n\twidth: ${componentFavicon.size};\n\theight: ${componentFavicon.size};\n\tuser-select: ${componentFavicon.userSelect};\n\tcolor: ${componentFavicon.color.text};\n\tfont: ${componentFavicon.typography.font};\n\tletter-spacing: ${componentFavicon.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentFavicon.typography['font-width']};\n`;\n\nconst topBarItemStyle = `display: ${componentTopBar.Item.display};\n\talign-items: ${componentTopBar.Item['align-items']};\n\theight: ${componentTopBar.Item.height};\n\tpadding: ${componentTopBar.Item.sm.padding.top} ${componentTopBar.Item.sm.padding.right} ${componentTopBar.Item.sm.padding.bottom} ${componentTopBar.Item.sm.padding.left};\n\tborder-right: ${componentTopBar.Item.border};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div style=\"${style}\">\n\t\t<div style=\"${lhsStyle}\">\n\t\t\t<div style=\"${topBarItemStyle}\">\n\t\t\t\t<div style=\"${toolNameStyle}\">\n\t\t\t\t\t<div style=\"${faviconStyle}\">C</div>\n\t\t\t\t\t<div>Composer</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div style=\"${topBarItemStyle}\">Item 1</div>\n\t\t</div>\n\t</div>\n`;\n";
+export declare const componentJs = "\nimport { componentTopBar, componentFavicon } from \"@guardian/stand\";\n\nconst style = `\n\tdisplay: ${componentTopBar.display};\n\tjustify-content: ${componentTopBar.justifyContent};\n\theight: ${componentTopBar.height};\n\tborder: ${componentTopBar.border};\n`;\n\nconst lhsStyle = `\n\tdisplay: ${componentTopBar.display};\n`;\n\nconst toolNameStyle = `display: ${componentTopBar.ToolName.display};\n\talign-items: ${componentTopBar.ToolName.alignItems};\n\tgap: ${componentTopBar.ToolName.gap};\n\tfont: ${componentTopBar.ToolName.typography.font};\n\tletter-spacing: ${componentTopBar.ToolName.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.typography.fontWidth};\n`;\n\nconst faviconStyle = `\n\tbackground-color: ${componentFavicon.color.background};\n\tdisplay: ${componentFavicon.display};\n\talign-items: ${componentFavicon.alignItems};\n\tjustify-content: ${componentFavicon.justifyContent};\n\twidth: ${componentFavicon.size};\n\theight: ${componentFavicon.size};\n\tuser-select: ${componentFavicon.userSelect};\n\tcolor: ${componentFavicon.color.text};\n\tfont: ${componentFavicon.typography.font};\n\tletter-spacing: ${componentFavicon.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentFavicon.typography.fontWidth};\n`;\n\nconst topBarItemStyle = `display: ${componentTopBar.Item.display};\n\talign-items: ${componentTopBar.Item.alignItems};\n\theight: ${componentTopBar.Item.height};\n\tpadding: ${componentTopBar.Item.sm.padding.top} ${componentTopBar.Item.sm.padding.right} ${componentTopBar.Item.sm.padding.bottom} ${componentTopBar.Item.sm.padding.left};\n\tborder-right: ${componentTopBar.Item.border};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div style=\"${style}\">\n\t\t<div style=\"${lhsStyle}\">\n\t\t\t<div style=\"${topBarItemStyle}\">\n\t\t\t\t<div style=\"${toolNameStyle}\">\n\t\t\t\t\t<div style=\"${faviconStyle}\">C</div>\n\t\t\t\t\t<div>Composer</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div style=\"${topBarItemStyle}\">Item 1</div>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/{topbar → TopBar}/styles.d.ts

@@ -1,5 +1,5 @@
 import type { SerializedStyles } from '@emotion/react';
-import type { ComponentTopBar } from '../../styleD/build/typescript/component/TopBar';
+import type { ComponentTopBar } from '../../styleD/build/typescript/component/topBar';
 import { type Breakpoint } from '../../styleD/utils/semantic/mq';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type TopBarTheme = Prettify<ComponentTopBar>;

package/dist/types/components/{typography → Typography}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "Typography";
-export declare const componentTsx = "import { Typography } from '@guardian/stand/typography';\n\nexport const Component = () => (\n\t<>\n\t\t{/* Paragraph element with default body-md preset and text children */}\n\t\t<Typography element=\"h2\" variant=\"heading-compact-xl\">Wow! A heading!</Typography>\n\n\t\t{/* Paragraph element with default body-md preset and text children */}\n\t\t<Typography>Body text here</Typography>\n\n\t\t{/* Div with an italic text wrapped inside */}\n\t\t<Typography element=\"div\" variant=\"body-md\">Some text, with <Typography element=\"i\" variant=\"body-italic-md\">even more text</Typography></Typography>\n\t</>\n);\n\n";
+export declare const componentTsx = "import { Typography } from '@guardian/stand/Typography';\n\nexport const Component = () => (\n\t<>\n\t\t{/* Paragraph element with default body-md preset and text children */}\n\t\t<Typography element=\"h2\" variant=\"heading-compact-xl\">Wow! A heading!</Typography>\n\n\t\t{/* Paragraph element with default body-md preset and text children */}\n\t\t<Typography>Body text here</Typography>\n\n\t\t{/* Div with an italic text wrapped inside */}\n\t\t<Typography element=\"div\" variant=\"body-md\">Some text, with <Typography element=\"i\" variant=\"body-italic-md\">even more text</Typography></Typography>\n\t</>\n);\n\n";
 export declare const componentCss = "@import '@guardian/stand/component/typography.css';\n\t@import '@guardian/stand/semantic/typography.css';\n\n    /* shared typography styles for all variants */\n    .stand-typography {\n    \tcolor: var(--component-typography-color);\n    }\n\n    /* example setup of heading-compact-xl */\n    .stand-typography-heading-compact-xl {\n\t\tfont: var(--semantic-typography-heading-compact-xl-font);\n\t\tletter-spacing: var(--semantic-typography-heading-compact-xl-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--semantic-typography-heading-compact-xl-font-width);\n\t}\n\n    /* example setup of standard body text */\n    .stand-typography-body-md {\n\t\tfont: var(--semantic-typography-body-md-font);\n\t\tletter-spacing: var(--semantic-typography-body-md-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--semantic-typography-body-md-font-width);\n\t}\n\n\t/* example setup of italic body text */\n\t.stand-typography-body-italic-md {\n\t\tfont: var(--semantic-typography-body-italic-md-font);\n\t\tletter-spacing: var(--semantic-typography-body-italic-md-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--semantic-typography-body-italic-md-font-width);\n\t}\n";
 export declare const componentHtml = "<div class=\"container flow-column\">\n    <h2 class=\"stand-typography stand-typography-heading-compact-xl\">Wow! A heading!</h2>\n\n\t<p class=\"stand-typography stand-typography-body-md\">Body text here</p>\n\n\t<div class=\"stand-typography stand-typography-body-md\">Some text, with <i class=\"stand-typography stand-typography-body-italic-md\">even more text</i></div>\n</div>\n";
-export declare const componentJs = "\t// for ts/js\n\t\timport { componentTypography, semanticTypography } 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\t\t.js-stand-typography {\n\t\t\t\tcolor: ${componentTypography.color};\n\t\t\t}\n\t\t\t.js-stand-typography-heading-compact-xl {\n\t\t\t\tfont: ${semanticTypography['heading-compact-xl'].font};\n\t\t\t\tletter-spacing: ${semanticTypography['heading-compact-xl'].letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography['heading-compact-xl'].fontWidth};\n\t\t\t}\n\t\t\t.js-stand-typography-body-md {\n\t\t\t\tfont: ${semanticTypography['body-md'].font};\n\t\t\t\tletter-spacing: ${semanticTypography['body-md'].letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography['body-md'].fontWidth};\n\t\t\t}\n\t\t\t.js-stand-typography-body-italic-md {\n\t\t\t\tfont: ${semanticTypography['body-italic-md'].font};\n\t\t\t\tletter-spacing: ${semanticTypography['body-italic-md'].letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography['body-italic-md'].fontWidth};\n\t\t\t}\n    \t`);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the typography components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n\t\t<h2 class=\"js-stand-typography js-stand-typography-heading-compact-xl\">Wow! A heading!</h2>\n\t\t<p class=\"js-stand-typography js-stand-typography-body-md\">Body text here</p>\n\t\t<div class=\"js-stand-typography js-stand-typography-body-md\">Some text, with <i class=\"js-stand-typography js-stand-typography-body-italic-md\">even more text</i></div>\n    </div>`;\n\n";
+export declare const componentJs = "\t// for ts/js\n\t\timport { componentTypography, semanticTypography } 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\t\t.js-stand-typography {\n\t\t\t\tcolor: ${componentTypography.color};\n\t\t\t}\n\t\t\t.js-stand-typography-heading-compact-xl {\n\t\t\t\tfont: ${semanticTypography.headingCompactXl.font};\n\t\t\t\tletter-spacing: ${semanticTypography.headingCompactXl.letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography.headingCompactXl.fontWidth};\n\t\t\t}\n\t\t\t.js-stand-typography-body-md {\n\t\t\t\tfont: ${semanticTypography.bodyMd.font};\n\t\t\t\tletter-spacing: ${semanticTypography.bodyMd.letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography.bodyMd.fontWidth};\n\t\t\t}\n\t\t\t.js-stand-typography-body-italic-md {\n\t\t\t\tfont: ${semanticTypography.bodyItalicMd.font};\n\t\t\t\tletter-spacing: ${semanticTypography.bodyItalicMd.letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography.bodyItalicMd.fontWidth};\n\t\t\t}\n    \t`);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the typography components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n\t\t<h2 class=\"js-stand-typography js-stand-typography-heading-compact-xl\">Wow! A heading!</h2>\n\t\t<p class=\"js-stand-typography js-stand-typography-body-md\">Body text here</p>\n\t\t<div class=\"js-stand-typography js-stand-typography-body-md\">Some text, with <i class=\"js-stand-typography js-stand-typography-body-italic-md\">even more text</i></div>\n    </div>`;\n\n";