@guardian/stand 0.0.37 → 0.0.39

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

@@ -13,8 +13,8 @@
  * If you only need the built CSS (./component/layout.css),
  * you don't need to install these.
  */
-export { Layout, Sidebar } from './components/layout/Layout';
-export type { LayoutProps, SidebarProps } from './components/layout/types';
-export type { PartialLayoutTheme as LayoutTheme, PartialSidebarTheme as SidebarTheme, } from './components/layout/styles';
+export { Layout } from './components/Layout/Layout';
+export type { LayoutProps, SidebarProps as LayoutSidebarProps, MainProps as LayoutMainProps, LayoutSlotProps as LayoutAlertBannerProps, LayoutSlotProps as LayoutTopBarProps, } from './components/Layout/types';
+export type { PartialLayoutTheme as LayoutTheme, PartialSidebarTheme as SidebarTheme, PartialMainTheme as MainTheme, } from './components/Layout/styles';
 export { componentLayout } from './styleD/build/typescript/component/layout';
 export type { ComponentLayout } from './styleD/build/typescript/component/layout';

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

@@ -12,8 +12,8 @@
  * If you only need the built CSS (./component/link.css),
  * you don't need to install these.
  */
-export { Link } from './components/link/Link';
-export type { LinkProps } from './components/link/types';
-export type { PartialLinkTheme as LinkTheme } from './components/link/styles';
+export { Link } from './components/Link/Link';
+export type { LinkProps } from './components/Link/types';
+export type { PartialLinkTheme as LinkTheme } from './components/Link/styles';
 export { componentLink } from './styleD/build/typescript/component/link';
 export type { ComponentLink } from './styleD/build/typescript/component/link';

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

@@ -15,6 +15,6 @@
  * If you only need the built CSS, use the `button` css (./component/button.css),
  * you don't need to install these.
  */
-export { LinkButton } from './components/link-button/LinkButton';
-export type { LinkButtonProps } from './components/link-button/types';
-export type { PartialLinkButtonTheme as LinkButtonTheme } from './components/link-button/styles';
+export { LinkButton } from './components/LinkButton/LinkButton';
+export type { LinkButtonProps } from './components/LinkButton/types';
+export type { PartialLinkButtonTheme as LinkButtonTheme } from './components/LinkButton/styles';

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

@@ -13,8 +13,8 @@
  * If you only need the built CSS (./component/menu.css),
  * you don't need to install these.
  */
-export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle, } from './components/menu/Menu';
-export type { MenuProps, MenuItemProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, MenuPopoverProps as PopoverProps, } from './components/menu/types';
-export type { PartialMenuTheme as MenuTheme, PartialMenuItemTheme as MenuItemTheme, PartialMenuSectionTheme as MenuSectionTheme, PartialMenuSeparatorTheme as MenuSeparatorTheme, PartialMenuPopoverTheme as MenuPopoverTheme, } from './components/menu/styles';
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle, } from './components/Menu/Menu';
+export type { MenuProps, MenuItemProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, MenuPopoverProps as PopoverProps, } from './components/Menu/types';
+export type { PartialMenuTheme as MenuTheme, PartialMenuItemTheme as MenuItemTheme, PartialMenuSectionTheme as MenuSectionTheme, PartialMenuSeparatorTheme as MenuSeparatorTheme, PartialMenuPopoverTheme as MenuPopoverTheme, } from './components/Menu/styles';
 export { componentMenu } from './styleD/build/typescript/component/menu';
 export type { ComponentMenu } from './styleD/build/typescript/component/menu';

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

@@ -13,8 +13,8 @@
  * If you only need the built CSS (./component/radioGroup.css),
  * you don't need to install these.
  */
-export { Radio, RadioGroup } from './components/radio-group/RadioGroup';
-export type { RadioProps, RadioGroupProps, } from './components/radio-group/types';
-export type { RadioGroupTheme } from './components/radio-group/styles';
+export { Radio, RadioGroup } from './components/RadioGroup/RadioGroup';
+export type { RadioProps, RadioGroupProps, } from './components/RadioGroup/types';
+export type { RadioGroupTheme } from './components/RadioGroup/styles';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup';
 export type { ComponentRadioGroup } from './styleD/build/typescript/component/radioGroup';

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

@@ -13,8 +13,8 @@
  * If you only need the built CSS (./component/select.css),
  * you don't need to install these.
  */
-export { Option, Select } from './components/select/Select';
-export type { OptionProps, SelectProps } from './components/select/types';
-export type { PartialSelectTheme as SelectTheme } from './components/select/styles';
+export { Option, Select } from './components/Select/Select';
+export type { OptionProps, SelectProps } from './components/Select/types';
+export type { PartialSelectTheme as SelectTheme } from './components/Select/styles';
 export { componentSelect } from './styleD/build/typescript/component/select';
 export type { ComponentSelect } from './styleD/build/typescript/component/select';

package/dist/types/{tag-picker.d.ts → TagPicker.d.ts}

@@ -13,9 +13,9 @@
  * If you only need the built CSS (./component/tagTable.css, ./component/tagAutocomplete.css),
  * you don't need to install these.
  */
-export { Autocomplete } from './components/tag-picker/Autocomplete';
-export { TagAutocomplete } from './components/tag-picker/TagAutocomplete';
-export { TagTable } from './components/tag-picker/TagTable';
+export { Autocomplete } from './components/TagPicker/Autocomplete';
+export { TagAutocomplete } from './components/TagPicker/TagAutocomplete';
+export { TagTable } from './components/TagPicker/TagTable';
 export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete';
 export type { ComponentAutocomplete } from './styleD/build/typescript/component/autocomplete';
 export { componentTagTable } from './styleD/build/typescript/component/tagTable';

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

@@ -13,8 +13,8 @@
  * If you only need the built CSS (./component/textArea.css),
  * you don't need to install these.
  */
-export { TextArea } from './components/text-area/TextArea';
-export type { TextAreaProps } from './components/text-area/types';
-export type { TextAreaTheme } from './components/text-area/styles';
+export { TextArea } from './components/TextArea/TextArea';
+export type { TextAreaProps } from './components/TextArea/types';
+export type { TextAreaTheme } from './components/TextArea/styles';
 export { componentTextArea } from './styleD/build/typescript/component/textArea';
 export type { ComponentTextArea } from './styleD/build/typescript/component/textArea';

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

@@ -13,8 +13,8 @@
  * If you only need the built CSS (./component/textInput.css),
  * you don't need to install these.
  */
-export { TextInput } from './components/text-input/TextInput';
-export type { TextInputProps } from './components/text-input/types';
-export type { TextInputTheme } from './components/text-input/styles';
+export { TextInput } from './components/TextInput/TextInput';
+export type { TextInputProps } from './components/TextInput/types';
+export type { TextInputTheme } from './components/TextInput/styles';
 export { componentTextInput } from './styleD/build/typescript/component/textInput';
 export type { ComponentTextInput } from './styleD/build/typescript/component/textInput';

package/dist/types/TopBar.d.ts

@@ -10,20 +10,20 @@
  *
  * See the `peerDependencies` section of package.json for compatible versions.
  *
- * If you only need the built CSS (./component/TopBar.css),
+ * If you only need the built CSS (./component/topBar.css),
  * you don't need to install these.
  */
-export { componentTopBar } from './styleD/build/typescript/component/TopBar';
-export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
-export { TopBarToolName } from './components/topbar/topBarToolName/TopBarToolName';
-export type { TopBarToolNameProps } from './components/topbar/topBarToolName/types';
-export type { PartialTopBarToolNameTheme as TopBarToolNameTheme } from './components/topbar/topBarToolName/styles';
-export { TopBarNavigation } from './components/topbar/topBarNavigation/TopBarNavigation';
-export type { TopBarNavigationProps } from './components/topbar/topBarNavigation/types';
-export type { PartialTopBarNavigationTheme as TopBarNavigationTheme } from './components/topbar/topBarNavigation/styles';
-export { TopBarItem } from './components/topbar/topBarItem/TopBarItem';
-export type { TopBarItemProps } from './components/topbar/topBarItem/types';
-export type { PartialTopBarItemTheme as TopBarItemTheme } from './components/topbar/topBarItem/styles';
-export { TopBar, TopBarContainerLeft, TopBarContainerRight, } from './components/topbar/TopBar';
-export type { TopBarProps } from './components/topbar/types';
-export type { PartialTopBarTheme as TopBarTheme } from './components/topbar/styles';
+export { componentTopBar } from './styleD/build/typescript/component/topBar';
+export type { ComponentTopBar } from './styleD/build/typescript/component/topBar';
+export { TopBarToolName } from './components/TopBar/TopBarToolName/TopBarToolName';
+export type { TopBarToolNameProps } from './components/TopBar/TopBarToolName/types';
+export type { PartialTopBarToolNameTheme as TopBarToolNameTheme } from './components/TopBar/TopBarToolName/styles';
+export { TopBarNavigation } from './components/TopBar/TopBarNavigation/TopBarNavigation';
+export type { TopBarNavigationProps } from './components/TopBar/TopBarNavigation/types';
+export type { PartialTopBarNavigationTheme as TopBarNavigationTheme } from './components/TopBar/TopBarNavigation/styles';
+export { TopBarItem } from './components/TopBar/TopBarItem/TopBarItem';
+export type { TopBarItemProps } from './components/TopBar/TopBarItem/types';
+export type { PartialTopBarItemTheme as TopBarItemTheme } from './components/TopBar/TopBarItem/styles';
+export { TopBar, TopBarContainerLeft, TopBarContainerRight, } from './components/TopBar/TopBar';
+export type { TopBarProps } from './components/TopBar/types';
+export type { PartialTopBarTheme as TopBarTheme } from './components/TopBar/styles';

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

@@ -12,8 +12,8 @@
  * If you only need the built CSS (./component/typography.css),
  * you don't need to install these.
  */
-export { Typography } from './components/typography/Typography';
-export type { TypographyProps } from './components/typography/types';
-export type { PartialTypographyTheme as TypographyTheme } from './components/typography/styles';
+export { Typography } from './components/Typography/Typography';
+export type { TypographyProps } from './components/Typography/types';
+export type { PartialTypographyTheme as TypographyTheme } from './components/Typography/styles';
 export { componentTypography } from './styleD/build/typescript/component/typography';
 export type { ComponentTypography } from './styleD/build/typescript/component/typography';

package/dist/types/{user-menu.d.ts → UserMenu.d.ts}

@@ -13,6 +13,6 @@
  * If you only need the built CSS (./component/userMenu.css, ./component/userMenu.css),
  * you don't need to install these.
  */
-export { UserMenu } from './components/user-menu/UserMenu';
+export { UserMenu } from './components/UserMenu/UserMenu';
 export { componentUserMenu } from './styleD/build/typescript/component/userMenu';
 export type { ComponentUserMenu } from './styleD/build/typescript/component/userMenu';

package/dist/types/components/{alert-banner → AlertBanner}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "AlertBanner";
-export declare const componentTsx = "import { AlertBanner } from '@guardian/stand/alert-banner';\n\nexport const Component = () => (\n\t<>\n\t\t<AlertBanner level=\"information\">\n\t\t\tYou are working in the CODE Environment\n\t\t</AlertBanner>\n\t\t<AlertBanner level=\"success\" showIcon>\n\t\t\tYour changes have been published.\n\t\t</AlertBanner>\n\t\t<AlertBanner\n\t\t\tlevel=\"error\"\n\t\t\tshowIcon\n\t\t\tcloseButtonProps={{ onPress: () => alert('Dismissed') }}\n\t\t>\n\t\t\tUnable to save changes.\n\t\t</AlertBanner>\n\t</>\n);\n";
+export declare const componentTsx = "import { AlertBanner } from '@guardian/stand/AlertBanner';\n\nexport const Component = () => (\n\t<>\n\t\t<AlertBanner level=\"information\">\n\t\t\tYou are working in the CODE Environment\n\t\t</AlertBanner>\n\t\t<AlertBanner level=\"success\" showIcon>\n\t\t\tYour changes have been published.\n\t\t</AlertBanner>\n\t\t<AlertBanner\n\t\t\tlevel=\"error\"\n\t\t\tshowIcon\n\t\t\tcloseButtonProps={{ onPress: () => alert('Dismissed') }}\n\t\t>\n\t\t\tUnable to save changes.\n\t\t</AlertBanner>\n\t</>\n);\n";
 export declare const componentCss = "\n/* import the alertbanner styles */\n@import '@guardian/stand/component/alertBanner.css';\n\n.stand-alert-banner {\n\tdisplay: var(--component-alert-banner-shared-display);\n\talign-items: var(--component-alert-banner-shared-align-items);\n\tjustify-content: var(--component-alert-banner-shared-justify-content);\n\tpadding: var(--component-alert-banner-shared-padding-top)\n\t\tvar(--component-alert-banner-shared-padding-right)\n\t\tvar(--component-alert-banner-shared-padding-bottom)\n\t\tvar(--component-alert-banner-shared-padding-left);\n\twidth: var(--component-alert-banner-shared-width);\n\theight: var(--component-alert-banner-shared-height);\n}\n\n.stand-alert-banner-content {\n\tdisplay: var(--component-alert-banner-shared-content-display);\n\tjustify-content: var(--component-alert-banner-shared-content-justify-content);\n\tgap: var(--component-alert-banner-shared-content-gap);\n\tflex: var(--component-alert-banner-shared-content-flex);\n\theight: var(--component-alert-banner-shared-content-height);\n\talign-items: var(--component-alert-banner-shared-content-align-items);\n\tcolor: var(--component-alert-banner-shared-content-color);\n\tfont: var(--component-alert-banner-shared-content-typography-font);\n\tletter-spacing: var(--component-alert-banner-shared-content-typography-letter-spacing);\n\tfont-variation-settings: 'wdth'\n\t\tvar(--component-alert-banner-shared-content-typography-font-width);\n}\n\n.stand-alert-banner-content > .material-symbols {\n\tfont-size: 1rem;\n\tcolor: var(--component-alert-banner-shared-content-icon-color);\n}\n\n.stand-alert-banner-information {\n\tbackground-color: var(--component-alert-banner-information-background-color);\n}\n\n.stand-alert-banner-success {\n\tbackground-color: var(--component-alert-banner-success-background-color);\n}\n\n.stand-alert-banner-warning {\n\tbackground-color: var(--component-alert-banner-warning-background-color);\n}\n\n.stand-alert-banner-error {\n\tbackground-color: var(--component-alert-banner-error-background-color);\n}\n\n/* see IconButton for example of styling close button */\n.stand-alert-banner-close {\n\tborder: 0;\n\tbackground: transparent;\n\tcursor: pointer;\n\tpadding: 0.125rem;\n}\n";
 export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div class=\"stand-alert-banner stand-alert-banner-information\">\n\t\t<div class=\"stand-alert-banner-content\">\n\t\t\tYou are working in the CODE Environment\n\t\t</div>\n\t</div>\n\n\t<div class=\"stand-alert-banner stand-alert-banner-success\">\n\t\t<div class=\"stand-alert-banner-content\">\n\t\t\t<span class=\"material-symbols\">sentiment_satisfied</span>\n\t\t\tYour changes have been published.\n\t\t</div>\n\t</div>\n\n\t<div class=\"stand-alert-banner stand-alert-banner-error\">\n\t\t<div class=\"stand-alert-banner-content\">\n\t\t\t<span class=\"material-symbols\">warning</span>\n\t\t\tUnable to save changes.\n\t\t</div>\n\t\t<button class=\"stand-alert-banner-close\" aria-label=\"Close alert banner\">x</button>\n\t</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentAlertBanner } from \"@guardian/stand\";\n\nconst sheet = new CSSStyleSheet();\n\nsheet.replaceSync(`\n\t.js-stand-alert-banner {\n\t\tdisplay: ${componentAlertBanner.shared.display};\n\t\talign-items: ${componentAlertBanner.shared['align-items']};\n\t\tjustify-content: ${componentAlertBanner.shared['justify-content']};\n\t\tpadding: ${componentAlertBanner.shared.padding.top}\n\t\t\t${componentAlertBanner.shared.padding.right}\n\t\t\t${componentAlertBanner.shared.padding.bottom}\n\t\t\t${componentAlertBanner.shared.padding.left};\n\t\twidth: ${componentAlertBanner.shared.width};\n\t\theight: ${componentAlertBanner.shared.height};\n\t}\n\n\t.js-stand-alert-banner-content {\n\t\tdisplay: ${componentAlertBanner.shared.content.display};\n\t\tjustify-content: ${componentAlertBanner.shared.content['justify-content']};\n\t\tgap: ${componentAlertBanner.shared.content.gap};\n\t\tflex: ${componentAlertBanner.shared.content.flex};\n\t\theight: ${componentAlertBanner.shared.content.height};\n\t\talign-items: ${componentAlertBanner.shared.content['align-items']};\n\t\tcolor: ${componentAlertBanner.shared.content.color};\n\t\tfont: ${componentAlertBanner.shared.content.typography.font};\n\t\tletter-spacing: ${componentAlertBanner.shared.content.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${componentAlertBanner.shared.content.typography.fontWidth};\n\t}\n\n\t.js-stand-alert-banner-content > .material-symbols {\n\t\tfont-size: 1rem;\n\t\tcolor: ${componentAlertBanner.shared.content.icon.color};\n\t}\n\n\t.js-stand-alert-banner-information {\n\t\tbackground-color: ${componentAlertBanner.information['background-color']};\n\t}\n\n\t.js-stand-alert-banner-success {\n\t\tbackground-color: ${componentAlertBanner.success['background-color']};\n\t}\n\n\t.js-stand-alert-banner-error {\n\t\tbackground-color: ${componentAlertBanner.error['background-color']};\n\t}\n\n\t/* see IconButton for example of styling close button */\n\t.js-stand-alert-banner-close {\n\t\tborder: 0;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tpadding: 0.125rem;\n\t}\n`);\n\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container flow-column\">\n\t\t<div class=\"js-stand-alert-banner js-stand-alert-banner-information\">\n\t\t\t<div class=\"js-stand-alert-banner-content\">\n\t\t\t\tYou are working in the CODE Environment\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"js-stand-alert-banner js-stand-alert-banner-success\">\n\t\t\t<div class=\"js-stand-alert-banner-content\">\n\t\t\t\t<span class=\"material-symbols\">sentiment_satisfied</span>\n\t\t\t\tYour changes have been published.\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"js-stand-alert-banner js-stand-alert-banner-error\">\n\t\t\t<div class=\"js-stand-alert-banner-content\">\n\t\t\t\t<span class=\"material-symbols\">warning</span>\n\t\t\t\tUnable to save changes.\n\t\t\t</div>\n\t\t\t<button class=\"js-stand-alert-banner-close\" aria-label=\"Close alert banner\">x</button>\n\t\t</div>\n\t</div>\n`;\n";
+export declare const componentJs = "\nimport { componentAlertBanner } from \"@guardian/stand\";\n\nconst sheet = new CSSStyleSheet();\n\nsheet.replaceSync(`\n\t.js-stand-alert-banner {\n\t\tdisplay: ${componentAlertBanner.shared.display};\n\t\talign-items: ${componentAlertBanner.shared.alignItems};\n\t\tjustify-content: ${componentAlertBanner.shared.justifyContent};\n\t\tpadding: ${componentAlertBanner.shared.padding.top}\n\t\t\t${componentAlertBanner.shared.padding.right}\n\t\t\t${componentAlertBanner.shared.padding.bottom}\n\t\t\t${componentAlertBanner.shared.padding.left};\n\t\twidth: ${componentAlertBanner.shared.width};\n\t\theight: ${componentAlertBanner.shared.height};\n\t}\n\n\t.js-stand-alert-banner-content {\n\t\tdisplay: ${componentAlertBanner.shared.content.display};\n\t\tjustify-content: ${componentAlertBanner.shared.content.justifyContent};\n\t\tgap: ${componentAlertBanner.shared.content.gap};\n\t\tflex: ${componentAlertBanner.shared.content.flex};\n\t\theight: ${componentAlertBanner.shared.content.height};\n\t\talign-items: ${componentAlertBanner.shared.content.alignItems};\n\t\tcolor: ${componentAlertBanner.shared.content.color};\n\t\tfont: ${componentAlertBanner.shared.content.typography.font};\n\t\tletter-spacing: ${componentAlertBanner.shared.content.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${componentAlertBanner.shared.content.typography.fontWidth};\n\t}\n\n\t.js-stand-alert-banner-content > .material-symbols {\n\t\tfont-size: 1rem;\n\t\tcolor: ${componentAlertBanner.shared.content.icon.color};\n\t}\n\n\t.js-stand-alert-banner-information {\n\t\tbackground-color: ${componentAlertBanner.information.backgroundColor};\n\t}\n\n\t.js-stand-alert-banner-success {\n\t\tbackground-color: ${componentAlertBanner.success.backgroundColor};\n\t}\n\n\t.js-stand-alert-banner-error {\n\t\tbackground-color: ${componentAlertBanner.error.backgroundColor};\n\t}\n\n\t/* see IconButton for example of styling close button */\n\t.js-stand-alert-banner-close {\n\t\tborder: 0;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tpadding: 0.125rem;\n\t}\n`);\n\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container flow-column\">\n\t\t<div class=\"js-stand-alert-banner js-stand-alert-banner-information\">\n\t\t\t<div class=\"js-stand-alert-banner-content\">\n\t\t\t\tYou are working in the CODE Environment\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"js-stand-alert-banner js-stand-alert-banner-success\">\n\t\t\t<div class=\"js-stand-alert-banner-content\">\n\t\t\t\t<span class=\"material-symbols\">sentiment_satisfied</span>\n\t\t\t\tYour changes have been published.\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"js-stand-alert-banner js-stand-alert-banner-error\">\n\t\t\t<div class=\"js-stand-alert-banner-content\">\n\t\t\t\t<span class=\"material-symbols\">warning</span>\n\t\t\t\tUnable to save changes.\n\t\t\t</div>\n\t\t\t<button class=\"js-stand-alert-banner-close\" aria-label=\"Close alert banner\">x</button>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/{alert-banner → AlertBanner}/types.d.ts

@@ -1,5 +1,5 @@
-import type { IconProps } from '../../icon';
-import type { IconButtonProps } from '../../icon-button';
+import type { IconProps } from '../../Icon';
+import type { IconButtonProps } from '../../IconButton';
 import type { DefaultPropsWithChildren, Prettify } from '../../util/types';
 import type { AlertBannerTheme } from './styles';
 export interface AlertBannerProps extends DefaultPropsWithChildren<AlertBannerTheme> {

package/dist/types/components/{avatar → Avatar}/sandbox.d.ts

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

package/dist/types/components/{avatar-button → AvatarButton}/sandbox.d.ts

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

package/dist/types/components/{avatar-button → AvatarButton}/styles.d.ts

@@ -1,5 +1,5 @@
 import type { SerializedStyles } from '@emotion/react';
-import type { AvatarTheme, PartialAvatarTheme } from '../avatar/styles';
+import type { AvatarTheme, PartialAvatarTheme } from '../Avatar/styles';
 export type AvatarButtonTheme = AvatarTheme;
 export type PartialAvatarButtonTheme = PartialAvatarTheme;
 export declare const defaultAvatarButtonTheme: AvatarButtonTheme;

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

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

package/dist/types/components/{avatar-link → AvatarLink}/sandbox.d.ts

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

package/dist/types/components/{avatar-link → AvatarLink}/styles.d.ts

@@ -1,5 +1,5 @@
 import type { SerializedStyles } from '@emotion/react';
-import type { AvatarTheme, PartialAvatarTheme } from '../avatar/styles';
+import type { AvatarTheme, PartialAvatarTheme } from '../Avatar/styles';
 export type AvatarLinkTheme = AvatarTheme;
 export type PartialAvatarLinkTheme = PartialAvatarTheme;
 export declare const defaultAvatarLinkTheme: AvatarTheme;

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

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

package/dist/types/components/{button → Button}/sandbox.d.ts

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

package/dist/types/components/{button → Button}/types.d.ts

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

package/dist/types/components/{checkbox → Checkbox}/CheckboxGroupSandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "CheckboxGroup";
-export declare const componentTsx = "import { Checkbox, CheckboxGroup } from '@guardian/stand/checkbox';\n\nexport const Component = () => (\n\t<>\n\t\t<CheckboxGroup label=\"Notifications\" description=\"Choose what to receive.\">\n\t\t\t<Checkbox value=\"email\">Email</Checkbox>\n\t\t\t<Checkbox value=\"sms\">SMS</Checkbox>\n\t\t\t<Checkbox value=\"push\">Push notification</Checkbox>\n\t\t</CheckboxGroup>\n\n\t\t<CheckboxGroup\n\t\t\tlabel=\"Preferences\"\n\t\t\tsize=\"sm\"\n\t\t\tisInvalid\n\t\t\terror=\"Please select at least one option.\"\n\t\t>\n\t\t\t<Checkbox value=\"news\">News</Checkbox>\n\t\t\t<Checkbox value=\"offers\">Offers</Checkbox>\n\t\t</CheckboxGroup>\n\t</>\n);\n";
+export declare const componentTsx = "import { Checkbox, CheckboxGroup } from '@guardian/stand/Checkbox';\n\nexport const Component = () => (\n\t<>\n\t\t<CheckboxGroup label=\"Notifications\" description=\"Choose what to receive.\">\n\t\t\t<Checkbox value=\"email\">Email</Checkbox>\n\t\t\t<Checkbox value=\"sms\">SMS</Checkbox>\n\t\t\t<Checkbox value=\"push\">Push notification</Checkbox>\n\t\t</CheckboxGroup>\n\n\t\t<CheckboxGroup\n\t\t\tlabel=\"Preferences\"\n\t\t\tsize=\"sm\"\n\t\t\tisInvalid\n\t\t\terror=\"Please select at least one option.\"\n\t\t>\n\t\t\t<Checkbox value=\"news\">News</Checkbox>\n\t\t\t<Checkbox value=\"offers\">Offers</Checkbox>\n\t\t</CheckboxGroup>\n\t</>\n);\n";
 export declare const componentCss = "\n/* import the checkbox, form, inline message styles */\n@import '@guardian/stand/component/inlineMessage.css';\n@import '@guardian/stand/component/form.css';\n@import '@guardian/stand/component/checkbox.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/* checkbox styles */\n\n.stand-checkbox {\n  display: var(--component-checkbox-input-shared-display);\n  position: var(--component-checkbox-input-shared-position);\n  align-items: var(--component-checkbox-input-shared-align-items);\n  gap: var(--component-checkbox-input-shared-gap);\n  cursor: var(--component-checkbox-input-shared-cursor);\n  color: var(--component-checkbox-input-shared-color);\n}\n\n.stand-checkbox.md {\n  font: var(--component-checkbox-input-md-typography-font);\n  letter-spacing: var(--component-checkbox-input-md-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n    var(--component-checkbox-input-md-typography-font-width);\n}\n\n.stand-checkbox.sm {\n  font: var(--component-checkbox-input-sm-typography-font);\n  letter-spacing: var(--component-checkbox-input-sm-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n\tvar(--component-checkbox-input-sm-typography-font-width);\n}\n\n.stand-checkbox > label {\n  cursor: var(--component-checkbox-input-shared-cursor);\n}\n\n.stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: var(--component-checkbox-input-shared-cursor);\n  border: var(--component-checkbox-input-shared-indicator-border);\n  border-radius: var(--component-checkbox-input-shared-indicator-border-radius);\n  accent-color: var(\n    --component-checkbox-input-shared-indicator-selected-background-color\n  );\n}\n\n.stand-checkbox.md > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-md-indicator-size);\n  height: var(--component-checkbox-input-md-indicator-size);\n}\n\n.stand-checkbox.sm > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-sm-indicator-size);\n  height: var(--component-checkbox-input-sm-indicator-size);\n}\n\n/* CheckboxGroup styles */\n\n.stand-checkbox-group {\n\tdisplay: var(--component-checkbox-group-shared-display);\n\tflex-direction: var(--component-checkbox-group-shared-flex-direction);\n}\n\n.stand-checkbox-group.sm {\n\tgap: var(--component-checkbox-group-sm-gap);\n\tmargin-top: var(--component-checkbox-group-sm-margin-top);\n}\n\n.stand-checkbox-group.md {\n\tgap: var(--component-checkbox-group-md-gap);\n\tmargin-top: var(--component-checkbox-group-md-margin-top);\n}\n";
 export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"stand-form-input-container md\">\n\t\t<label>Notifications</label>\n\t\t<span class=\"description\">Choose what to receive.</span>\n\t\t<div class=\"stand-checkbox-group md\">\n\t\t\t<div class=\"stand-checkbox md\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"email\" name=\"email\" />\n\t\t\t\t<label for=\"email\">Email</label>\n\t\t\t</div>\n\t\t\t<div class=\"stand-checkbox md\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"sms\" name=\"sms\" />\n\t\t\t\t<label for=\"sms\">SMS</label>\n\t\t\t</div>\n\t\t\t<div class=\"stand-checkbox md\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"push\" name=\"push\" />\n\t\t\t\t<label for=\"push\">Push notification</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"stand-form-input-container sm\" data-invalid>\n\t\t<label>Preferences</label>\n\t\t<span class=\"description\">Please select at least one option.</span>\n\t\t<div class=\"stand-checkbox-group sm\">\n\t\t\t<div class=\"stand-checkbox sm\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"news\" name=\"news\" />\n\t\t\t\t<label for=\"news\">News</label>\n\t\t\t</div>\n\t\t\t<div class=\"stand-checkbox sm\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"offers\" name=\"offers\" />\n\t\t\t\t<label for=\"offers\">Offers</label>\n\t\t\t</div>\n\t\t</div>\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</div>\n";
-export declare const componentJs = "\nimport { componentCheckbox, 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.disabledColor};\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.disabledColor};\n}\n\n/* checkbox styles */\n\n.js-stand-checkbox {\n  display: ${componentCheckbox.input.shared.display};\n  position: ${componentCheckbox.input.shared.position};\n  align-items: ${componentCheckbox.input.shared['align-items']};\n  gap: ${componentCheckbox.input.shared.gap};\n  cursor: ${componentCheckbox.input.shared.cursor};\n  color: ${componentCheckbox.input.shared.color};\n  font: ${componentCheckbox.input.md.typography.font};\n  letter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n}\n\n.js-stand-checkbox.sm {\n  font: ${componentCheckbox.input.sm.typography.font};\n  letter-spacing: ${componentCheckbox.input.sm.typography.letterSpacing};\n  font-variation-settings: \"wdth\"\n\t${componentCheckbox.input.sm.typography.fontWidth};\n}\n\n.js-stand-checkbox > label {\n  cursor: ${componentCheckbox.input.shared.cursor};\n}\n\n.js-stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: ${componentCheckbox.input.shared.cursor};\n  border: ${componentCheckbox.input.shared.indicator.border};\n  border-radius: ${componentCheckbox.input.shared.indicator['border-radius']};\n  accent-color: ${componentCheckbox.input.shared.indicator.selected['background-color']};\n}\n\n.js-stand-checkbox.md > .js-stand-checkbox-indicator {\n  width: ${componentCheckbox.input.md.indicator.size};\n  height: ${componentCheckbox.input.md.indicator.size};\n}\n\n.js-stand-checkbox.sm > .js-stand-checkbox-indicator {\n  width: ${componentCheckbox.input.sm.indicator.size};\n  height: ${componentCheckbox.input.sm.indicator.size};\n}\n\n/* CheckboxGroup styles */\n\n.js-stand-checkbox-group {\n\tdisplay: ${componentCheckbox.group.shared.display};\n\tflex-direction: ${componentCheckbox.group.shared[\"flex-direction\"]};\n}\n\n.js-stand-checkbox-group.sm {\n\tgap: ${componentCheckbox.group.sm.gap};\n\tmargin-top: ${componentCheckbox.group.sm.marginTop};\n}\n\n.js-stand-checkbox-group.md {\n\tgap: ${componentCheckbox.group.md.gap};\n\tmargin-top: ${componentCheckbox.group.md.marginTop};\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>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label>Notifications</label>\n\t\t<span class=\"description\">Choose what to receive.</span>\n\t\t<div class=\"js-stand-checkbox-group md\">\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"email\" name=\"email\" />\n\t\t\t\t<label for=\"email\">Email</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"sms\" name=\"sms\" />\n\t\t\t\t<label for=\"sms\">SMS</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"push\" name=\"push\" />\n\t\t\t\t<label for=\"push\">Push notification</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\" data-invalid>\n\t\t<label>Preferences</label>\n\t\t<span class=\"description\">Please select at least one option.</span>\n\t\t<div class=\"js-stand-checkbox-group sm\">\n\t\t\t<div class=\"js-stand-checkbox sm\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"news\" name=\"news\" />\n\t\t\t\t<label for=\"news\">News</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox sm\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"offers\" name=\"offers\" />\n\t\t\t\t<label for=\"offers\">Offers</label>\n\t\t\t</div>\n\t\t</div>\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</div>\n`;\n\n";
+export declare const componentJs = "\nimport { componentCheckbox, 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[\"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.disabledColor};\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.disabledColor};\n}\n\n/* checkbox styles */\n\n.js-stand-checkbox {\n  display: ${componentCheckbox.input.shared.display};\n  position: ${componentCheckbox.input.shared.position};\n  align-items: ${componentCheckbox.input.shared.alignItems};\n  gap: ${componentCheckbox.input.shared.gap};\n  cursor: ${componentCheckbox.input.shared.cursor};\n  color: ${componentCheckbox.input.shared.color};\n  font: ${componentCheckbox.input.md.typography.font};\n  letter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n}\n\n.js-stand-checkbox.sm {\n  font: ${componentCheckbox.input.sm.typography.font};\n  letter-spacing: ${componentCheckbox.input.sm.typography.letterSpacing};\n  font-variation-settings: \"wdth\"\n\t${componentCheckbox.input.sm.typography.fontWidth};\n}\n\n.js-stand-checkbox > label {\n  cursor: ${componentCheckbox.input.shared.cursor};\n}\n\n.js-stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: ${componentCheckbox.input.shared.cursor};\n  border: ${componentCheckbox.input.shared.indicator.border};\n  border-radius: ${componentCheckbox.input.shared.indicator.borderRadius};\n  accent-color: ${componentCheckbox.input.shared.indicator.selected.backgroundColor};\n}\n\n.js-stand-checkbox.md > .js-stand-checkbox-indicator {\n  width: ${componentCheckbox.input.md.indicator.size};\n  height: ${componentCheckbox.input.md.indicator.size};\n}\n\n.js-stand-checkbox.sm > .js-stand-checkbox-indicator {\n  width: ${componentCheckbox.input.sm.indicator.size};\n  height: ${componentCheckbox.input.sm.indicator.size};\n}\n\n/* CheckboxGroup styles */\n\n.js-stand-checkbox-group {\n\tdisplay: ${componentCheckbox.group.shared.display};\n\tflex-direction: ${componentCheckbox.group.shared[\"flex-direction\"]};\n}\n\n.js-stand-checkbox-group.sm {\n\tgap: ${componentCheckbox.group.sm.gap};\n\tmargin-top: ${componentCheckbox.group.sm.marginTop};\n}\n\n.js-stand-checkbox-group.md {\n\tgap: ${componentCheckbox.group.md.gap};\n\tmargin-top: ${componentCheckbox.group.md.marginTop};\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>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label>Notifications</label>\n\t\t<span class=\"description\">Choose what to receive.</span>\n\t\t<div class=\"js-stand-checkbox-group md\">\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"email\" name=\"email\" />\n\t\t\t\t<label for=\"email\">Email</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"sms\" name=\"sms\" />\n\t\t\t\t<label for=\"sms\">SMS</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"push\" name=\"push\" />\n\t\t\t\t<label for=\"push\">Push notification</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\" data-invalid>\n\t\t<label>Preferences</label>\n\t\t<span class=\"description\">Please select at least one option.</span>\n\t\t<div class=\"js-stand-checkbox-group sm\">\n\t\t\t<div class=\"js-stand-checkbox sm\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"news\" name=\"news\" />\n\t\t\t\t<label for=\"news\">News</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox sm\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"offers\" name=\"offers\" />\n\t\t\t\t<label for=\"offers\">Offers</label>\n\t\t\t</div>\n\t\t</div>\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</div>\n`;\n\n";

package/dist/types/components/{checkbox → Checkbox}/CheckboxSandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "Checkbox";
-export declare const componentTsx = "import { Checkbox } from '@guardian/stand/checkbox';\n\nexport const Component = () => (\n\t<>\n\t\t<Checkbox>Accept terms and conditions</Checkbox>\n\n\t\t<Checkbox isInvalid>Required option</Checkbox>\n\n\t\t<Checkbox isDisabled>Unavailable option</Checkbox>\n\n\t\t<Checkbox size=\"sm\" isIndeterminate isSelected>\n\t\t\tSelect all\n\t\t</Checkbox>\n\t</>\n);\n";
+export declare const componentTsx = "import { Checkbox } from '@guardian/stand/Checkbox';\n\nexport const Component = () => (\n\t<>\n\t\t<Checkbox>Accept terms and conditions</Checkbox>\n\n\t\t<Checkbox isInvalid>Required option</Checkbox>\n\n\t\t<Checkbox isDisabled>Unavailable option</Checkbox>\n\n\t\t<Checkbox size=\"sm\" isIndeterminate isSelected>\n\t\t\tSelect all\n\t\t</Checkbox>\n\t</>\n);\n";
 export declare const componentCss = "\n/* import the checkbox styles */\n@import \"@guardian/stand/component/checkbox.css\";\n\n.stand-checkbox {\n  display: var(--component-checkbox-input-shared-display);\n  position: var(--component-checkbox-input-shared-position);\n  align-items: var(--component-checkbox-input-shared-align-items);\n  gap: var(--component-checkbox-input-shared-gap);\n  cursor: var(--component-checkbox-input-shared-cursor);\n  color: var(--component-checkbox-input-shared-color);\n}\n\n.stand-checkbox.md {\n  font: var(--component-checkbox-input-md-typography-font);\n  letter-spacing: var(--component-checkbox-input-md-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n    var(--component-checkbox-input-md-typography-font-width);\n}\n\n.stand-checkbox.sm {\n  font: var(--component-checkbox-input-sm-typography-font);\n  letter-spacing: var(--component-checkbox-input-sm-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n\tvar(--component-checkbox-input-sm-typography-font-width);\n}\n\n.stand-checkbox > label {\n  cursor: var(--component-checkbox-input-shared-cursor);\n}\n\n.stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: var(--component-checkbox-input-shared-cursor);\n  border: var(--component-checkbox-input-shared-indicator-border);\n  border-radius: var(--component-checkbox-input-shared-indicator-border-radius);\n  accent-color: var(\n    --component-checkbox-input-shared-indicator-selected-background-color\n  );\n}\n\n.stand-checkbox.md > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-md-indicator-size);\n  height: var(--component-checkbox-input-md-indicator-size);\n}\n\n.stand-checkbox.sm > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-sm-indicator-size);\n  height: var(--component-checkbox-input-sm-indicator-size);\n}\n";
 export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"stand-checkbox md\">\n    \t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n    \t<label for=\"terms\">Accept terms and conditions</label>\n  \t</div>\n\t<div class=\"stand-checkbox sm\">\n    \t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n    \t<label for=\"terms\">Required option</label>\n  \t</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentCheckbox } 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  .js-stand-checkbox {\n\tdisplay: ${componentCheckbox.input.shared.display};\n\tposition: ${componentCheckbox.input.shared.position};\n\talign-items: ${componentCheckbox.input.shared['align-items']};\n\tgap: ${componentCheckbox.input.shared.gap};\n\tcursor: ${componentCheckbox.input.shared.cursor};\n\tcolor: ${componentCheckbox.input.shared.color};\n\tfont: ${componentCheckbox.input.md.typography.font};\n\tletter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n  }\n\n  .js-stand-checkbox.md {\n\tfont: ${componentCheckbox.input.md.typography.font};\n\tletter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n  }\n\n  .js-stand-checkbox.sm {\n\tfont: ${componentCheckbox.input.sm.typography.font};\n\tletter-spacing: ${componentCheckbox.input.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.sm.typography.fontWidth};\n  }\n\n  .js-stand-checkbox > label {\n\tcursor: ${componentCheckbox.input.shared.cursor};\n  }\n\n  .js-stand-checkbox-indicator {\n\t/* Reset browser default styles for checkboxes */\n\tmargin: 0;\n\tbackground-color: transparent;\n\toutline: none;\n\n\t/* component styles */\n\tcursor: ${componentCheckbox.input.shared.cursor};\n\tborder: ${componentCheckbox.input.shared.indicator.border};\n\tborder-radius: ${componentCheckbox.input.shared.indicator['border-radius']};\n\taccent-color: ${componentCheckbox.input.shared.indicator.selected['background-color']};\n  }\n\n  .js-stand-checkbox.md > .js-stand-checkbox-indicator {\n\twidth: ${componentCheckbox.input.md.indicator.size};\n\theight: ${componentCheckbox.input.md.indicator.size};\n  }\n\n  .js-stand-checkbox.sm > .js-stand-checkbox-indicator {\n\twidth: ${componentCheckbox.input.sm.indicator.size};\n\theight: ${componentCheckbox.input.sm.indicator.size};\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>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"js-stand-checkbox md\">\n\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n\t\t<label for=\"terms\">Accept terms and conditions</label>\n\t</div>\n\t<div class=\"js-stand-checkbox sm\">\n\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n\t\t<label for=\"terms\">Required option</label>\n\t</div>\n</div>\n`;\n\n";
+export declare const componentJs = "\nimport { componentCheckbox } 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  .js-stand-checkbox {\n\tdisplay: ${componentCheckbox.input.shared.display};\n\tposition: ${componentCheckbox.input.shared.position};\n\talign-items: ${componentCheckbox.input.shared.alignItems};\n\tgap: ${componentCheckbox.input.shared.gap};\n\tcursor: ${componentCheckbox.input.shared.cursor};\n\tcolor: ${componentCheckbox.input.shared.color};\n\tfont: ${componentCheckbox.input.md.typography.font};\n\tletter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n  }\n\n  .js-stand-checkbox.md {\n\tfont: ${componentCheckbox.input.md.typography.font};\n\tletter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n  }\n\n  .js-stand-checkbox.sm {\n\tfont: ${componentCheckbox.input.sm.typography.font};\n\tletter-spacing: ${componentCheckbox.input.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.sm.typography.fontWidth};\n  }\n\n  .js-stand-checkbox > label {\n\tcursor: ${componentCheckbox.input.shared.cursor};\n  }\n\n  .js-stand-checkbox-indicator {\n\t/* Reset browser default styles for checkboxes */\n\tmargin: 0;\n\tbackground-color: transparent;\n\toutline: none;\n\n\t/* component styles */\n\tcursor: ${componentCheckbox.input.shared.cursor};\n\tborder: ${componentCheckbox.input.shared.indicator.border};\n\tborder-radius: ${componentCheckbox.input.shared.indicator.borderRadius};\n\taccent-color: ${componentCheckbox.input.shared.indicator.selected.backgroundColor};\n  }\n\n  .js-stand-checkbox.md > .js-stand-checkbox-indicator {\n\twidth: ${componentCheckbox.input.md.indicator.size};\n\theight: ${componentCheckbox.input.md.indicator.size};\n  }\n\n  .js-stand-checkbox.sm > .js-stand-checkbox-indicator {\n\twidth: ${componentCheckbox.input.sm.indicator.size};\n\theight: ${componentCheckbox.input.sm.indicator.size};\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>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"js-stand-checkbox md\">\n\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n\t\t<label for=\"terms\">Accept terms and conditions</label>\n\t</div>\n\t<div class=\"js-stand-checkbox sm\">\n\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n\t\t<label for=\"terms\">Required option</label>\n\t</div>\n</div>\n`;\n\n";

package/dist/types/components/{checkbox → Checkbox}/types.d.ts

@@ -1,6 +1,6 @@
 import type { CheckboxGroupProps as RACCheckboxGroupProps, CheckboxProps as RACCheckboxProps } from 'react-aria-components';
 import type { DefaultPropsWithChildren } from '../../util/types';
-import type { FormInputContainerDefaultProps } from '../form/types';
+import type { FormInputContainerDefaultProps } from '../Form/types';
 import type { CheckboxTheme } from './styles';
 export interface CheckboxProps extends DefaultPropsWithChildren<CheckboxTheme, RACCheckboxProps['className']>, Omit<RACCheckboxProps, 'children'> {
     /**

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

@@ -0,0 +1,2 @@
+export declare const componentName = "DatePicker";
+export declare const componentTsx = "import { CalendarDate } from '@internationalized/date';\nimport { DatePicker } from '@guardian/stand/DatePicker';\n\nexport const Component = () => (\n\t<>\n\t\t{/* Basic usage */}\n\t\t<DatePicker\n\t\t\tlabel=\"Date of birth\"\n\t\t\tdescription=\"Enter your date of birth (e.g. 15 April 1990)\"\n\t\t/>\n\n\t\t{/* With min/max constraints and a pre-selected date */}\n\t\t<DatePicker\n\t\t\tlabel=\"Select a date\"\n\t\t\tdescription=\"Choose a date within 2026\"\n\t\t\tvalue={new CalendarDate(2026, 4, 15)}\n\t\t\tminValue={new CalendarDate(2026, 1, 1)}\n\t\t\tmaxValue={new CalendarDate(2026, 12, 31)}\n\t\t/>\n\t</>\n);\n";

package/dist/types/components/{date-picker → DatePicker}/types.d.ts

@@ -1,6 +1,6 @@
 import type { DateValue, CalendarProps as RACCalendarProps, DatePickerProps as RACDatePickerProps } from 'react-aria-components';
 import type { DefaultProps } from '../../util/types';
-import type { FormInputContainerDefaultProps } from '../form/types';
+import type { FormInputContainerDefaultProps } from '../Form/types';
 import type { DatePickerTheme } from './styles';
 export interface DatePickerProps extends FormInputContainerDefaultProps<Omit<RACDatePickerProps<DateValue>, 'granularity' | 'hideTimeZone'>, DatePickerTheme> {
     /**

package/dist/types/components/{favicon → Favicon}/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "Favicon";
-export declare const componentTsx = "import { Favicon } from '@guardian/stand/favicon';\n\nexport const Component = () => (\n\t<>\n\t\t{/* letter example */}\n\t\t<Favicon letter=\"C\" />\n\n\t\t{/* icon example */}\n\t\t<Favicon icon=\"raven\" />\n\n\t\t{/* svg icon example */}\n\t\t<Favicon\n          icon={\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24px\"\n              viewBox=\"0 -960 960 960\"\n              width=\"24px\"\n              fill=\"#1f1f1f\"\n            >\n              <path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\" />\n            </svg>\n          }\n        />\n\n\t\t{/* image example */}\n\t\t<Favicon\n          src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n          alt=\"Mahesh Makani\"\n        />\n\t</>\n);\n\n";
+export declare const componentTsx = "import { Favicon } from '@guardian/stand/Favicon';\n\nexport const Component = () => (\n\t<>\n\t\t{/* letter example */}\n\t\t<Favicon letter=\"C\" />\n\n\t\t{/* icon example */}\n\t\t<Favicon icon=\"raven\" />\n\n\t\t{/* svg icon example */}\n\t\t<Favicon\n          icon={\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24px\"\n              viewBox=\"0 -960 960 960\"\n              width=\"24px\"\n              fill=\"#1f1f1f\"\n            >\n              <path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\" />\n            </svg>\n          }\n        />\n\n\t\t{/* image example */}\n\t\t<Favicon\n          src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n          alt=\"Mahesh Makani\"\n        />\n\t</>\n);\n\n";
 export declare const componentCss = "\n/* import the favicon styles */\n@import '@guardian/stand/component/favicon.css';\n/* import the icon styles if using the icon variant of the favicon component */\n@import \"@guardian/stand/component/icon.css\";\n\n/* example setup of favicon style */\n.stand-favicon {\n\tbackground-color: var(--component-favicon-color-background);\n\tdisplay: var(--component-favicon-display);\n\talign-items: var(--component-favicon-align-items);\n\tjustify-content: var(--component-favicon-justify-content);\n\twidth: var(--component-favicon-size);\n\theight: var(--component-favicon-size);\n\tuser-select: var(--component-favicon-user-select);\n\tcolor: var(--component-favicon-color-text);\n\tfont: var(--component-favicon-typography-font);\n\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n}\n\n.stand-favicon-icon {\n\tdisplay: var(--component-icon-shared-display);\n\tuser-select: var(--component-icon-shared-user-select);\n\tfont-size: var(--component-icon-md-size);\n}\n\n.stand-favicon-icon-color-svg > svg {\n\twidth: var(--component-icon-md-size);\n\theight: var(--component-icon-md-size);\n\tfill: var(--component-favicon-color-text);\n}\n\n/* example setup for favicon image */\n.stand-favicon > img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-favicon\">C</div>\n    <div class=\"stand-favicon\">\n\t\t<span class=\"material-symbols stand-favicon-icon\">raven</span>\n    </div>\n    <div class=\"stand-favicon\">\n        <span class=\"stand-favicon-icon stand-favicon-icon-color-svg\"><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\"/></svg></span>\n    </div>\n    <div class=\"stand-favicon\">\n    \t<img src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n    </div>\n</div>\n";
-export declare const componentJs = "\t// for ts/js\n\t\timport { componentFavicon, componentIcon } from \"@guardian/stand\";\n\nconst faviconStyles = `\n    background-color: ${componentFavicon.color.background};\n    display: ${componentFavicon.display};\n    align-items: ${componentFavicon[\"align-items\"]};\n    justify-content: ${componentFavicon[\"justify-content\"]};\n    width: ${componentFavicon.size};\n    height: ${componentFavicon.size};\n    user-select: ${componentFavicon[\"user-select\"]};\n`;\n\nconst typographyStyle = `\n    color: ${componentFavicon.color.text};\n    font: ${componentFavicon.typography.font};\n    letter-spacing: ${componentFavicon.typography.letterSpacing};\n    font-variation-settings: 'wdth' ${componentFavicon.typography.fontWidth};\n`;\n\nconst imgStyle = `\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nconst iconStyles = `\n  display: ${componentIcon.shared.display};\n  user-select: ${componentIcon.shared[\"user-select\"]};\n  font-size: ${componentIcon.md.size};\n  color: ${componentFavicon.color.text};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.md.size};\n  height: ${componentIcon.md.size};\n  fill:  ${componentFavicon.color.text};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container\">\n  <div style=\"${faviconStyles}${typographyStyle}\">C</div>\n  <div style=\"${faviconStyles}\">\n\t<span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n  </div>\n  <div style=\"${faviconStyles}\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgStyles}\" 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\"/></svg></span>\n  </div>\n  <div style=\"${faviconStyles}\">\n    <img style=\"${imgStyle}\" src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n  </div>\n`;\n";
+export declare const componentJs = "\t// for ts/js\n\t\timport { componentFavicon, componentIcon } from \"@guardian/stand\";\n\nconst faviconStyles = `\n    background-color: ${componentFavicon.color.background};\n    display: ${componentFavicon.display};\n    align-items: ${componentFavicon.alignItems};\n    justify-content: ${componentFavicon.justifyContent};\n    width: ${componentFavicon.size};\n    height: ${componentFavicon.size};\n    user-select: ${componentFavicon.userSelect};\n`;\n\nconst typographyStyle = `\n    color: ${componentFavicon.color.text};\n    font: ${componentFavicon.typography.font};\n    letter-spacing: ${componentFavicon.typography.letterSpacing};\n    font-variation-settings: 'wdth' ${componentFavicon.typography.fontWidth};\n`;\n\nconst imgStyle = `\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nconst iconStyles = `\n  display: ${componentIcon.shared.display};\n  user-select: ${componentIcon.shared.userSelect};\n  font-size: ${componentIcon.md.size};\n  color: ${componentFavicon.color.text};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.md.size};\n  height: ${componentIcon.md.size};\n  fill:  ${componentFavicon.color.text};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container\">\n  <div style=\"${faviconStyles}${typographyStyle}\">C</div>\n  <div style=\"${faviconStyles}\">\n\t<span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n  </div>\n  <div style=\"${faviconStyles}\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgStyles}\" 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\"/></svg></span>\n  </div>\n  <div style=\"${faviconStyles}\">\n    <img style=\"${imgStyle}\" src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n  </div>\n`;\n";

package/dist/types/components/{favicon → Favicon}/types.d.ts

@@ -1,5 +1,5 @@
 import type { DefaultProps } from '../../util/types';
-import type { IconProps } from '../icon/types';
+import type { IconProps } from '../Icon/types';
 import type { FaviconTheme } from './styles';
 interface FaviconWithLetter extends DefaultProps<FaviconTheme> {
     /**

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Grid";
+export declare const componentTsx = "import { Grid, Item } from '@guardian/stand/Grid';\n\nexport const Component = () => (\n\t<Grid>\n\t\t<Item size={{ sm: 12, md: 8, lg: 6 }}>Main content - sm:12, md:8, lg:6</Item>\n\t\t<Item size={{ sm: 12, md: 4, lg: 3 }} offset={{ md: 1, lg: 2 }}>\n\t\t\tMore content - sm:12, md:4, lg:3, offset md:1, lg:2\n\t\t</Item>\n\t\t<Item size=\"auto\">Auto width</Item>\n\t\t<Item size=\"grow\">Grows to fill</Item>\n\t</Grid>\n);\n";
+export declare const componentCss = "\n/* import the grid styles */\n@import '@guardian/stand/component/grid.css';\n\n.stand-grid-container {\n\t--gap: var(--component-grid-sm-gap);\n\tdisplay: var(--component-grid-shared-display);\n\tflex-direction: var(--component-grid-shared-direction);\n\tflex-wrap: var(--component-grid-shared-wrap);\n\tjustify-content: var(--component-grid-shared-justify-content);\n\talign-items: var(--component-grid-shared-align-items);\n\tgap: var(--gap);\n\tpadding: 0 var(--component-grid-sm-padding);\n}\n\n@media (min-width: 830px) {\n\t.stand-grid-container {\n\t\t--gap: var(--component-grid-md-gap);\n\t\tpadding: 0 var(--component-grid-md-padding);\n\t}\n}\n\n@media (min-width: 1056px) {\n\t.stand-grid-container {\n\t\t--gap: var(--component-grid-lg-gap);\n\t\tpadding: 0 var(--component-grid-lg-padding);\n\t}\n}\n\n.stand-grid-item {\n\tbox-sizing: border-box;\n\tpadding: 16px;\n\tbackground: #eff3ff;\n\tborder: 1px solid #b8c9ff;\n\tborder-radius: 6px;\n\ttext-align: center;\n}\n\n/* 6-column span: ((100% - 11 * gap) * 6 / 12) + 5 * gap */\n.stand-grid-item--main {\n\tflex: 0 0 calc(((100% - 11 * var(--gap)) * 6 / 12) + 5 * var(--gap));\n}\n\n/* 3-column span with 1-column offset */\n.stand-grid-item--sidebar {\n\tflex: 0 0 calc(((100% - 11 * var(--gap)) * 3 / 12) + 2 * var(--gap));\n\tmargin-left: calc(((100% - 11 * var(--gap)) * 1 / 12) + 1 * var(--gap));\n}\n\n.stand-grid-item--auto {\n\tflex: 0 0 auto;\n\twidth: auto;\n\tmax-width: none;\n\twhite-space: nowrap;\n}\n\n.stand-grid-item--grow {\n\tflex-basis: 0;\n\tflex-grow: 1;\n\tmax-width: 100%;\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-grid-container\">\n\t\t<div class=\"stand-grid-item stand-grid-item--main\">Main content</div>\n\t\t<div class=\"stand-grid-item stand-grid-item--sidebar\">Sidebar</div>\n\t\t<div class=\"stand-grid-item stand-grid-item--auto\">Auto width</div>\n\t\t<div class=\"stand-grid-item stand-grid-item--grow\">Grows to fill</div>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentGrid } from \"@guardian/stand\";\n\nconst { shared, sm } = componentGrid;\n\nconst containerStyle = `\n\tdisplay: ${shared.display};\n\tflex-direction: ${shared.direction};\n\tflex-wrap: ${shared.wrap};\n\tjustify-content: ${shared.justifyContent};\n\talign-items: ${shared.alignItems};\n\tgap: ${sm.gap};\n\tpadding: 0 ${sm.padding};\n`;\n\nconst itemStyle = `\n\tbox-sizing: border-box;\n\tpadding: 16px;\n\tbackground: #eff3ff;\n\tborder: 1px solid #b8c9ff;\n\tborder-radius: 6px;\n\ttext-align: center;\n`;\n\n// 6-column span: ((100% - (columns - 1) * gap) * size / columns) + (size - 1) * gap\nconst mainWidth = `calc(((100% - (${sm.columns} - 1) * ${sm.gap}) * 6 / ${sm.columns}) + 5 * ${sm.gap})`;\n// 3-column span with 1-column offset\nconst sidebarWidth = `calc(((100% - (${sm.columns} - 1) * ${sm.gap}) * 3 / ${sm.columns}) + 2 * ${sm.gap})`;\nconst sidebarOffset = `calc(((100% - (${sm.columns} - 1) * ${sm.gap}) * 1 / ${sm.columns}) + 1 * ${sm.gap})`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div style=\"${containerStyle}\">\n\t\t<div style=\"${itemStyle}; flex: 0 0 ${mainWidth};\">Main content</div>\n\t\t<div style=\"${itemStyle}; flex: 0 0 ${sidebarWidth}; margin-left: ${sidebarOffset};\">Sidebar</div>\n\t\t<div style=\"${itemStyle}; flex: 0 0 auto; width: auto; max-width: none; white-space: nowrap;\">Auto width</div>\n\t\t<div style=\"${itemStyle}; flex-basis: 0; flex-grow: 1; max-width: 100%;\">Grows to fill</div>\n\t</div>\n`;\n";