@guardian/stand 0.0.40 → 0.0.42

package/dist/types/components/Link/types.d.ts

@@ -1,11 +0,0 @@
-import type { LinkProps as RACLinkProps } from 'react-aria-components';
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { TypographyVariant } from '../Typography/types';
-import type { LinkTheme } from './styles';
-export interface LinkProps extends Omit<RACLinkProps, 'children'>, DefaultPropsWithChildren<LinkTheme, RACLinkProps['className']> {
-    /**
-     * to change the typography of the link, you can pass a variant from semanticTypography.
-     * By default, it is set to "body-sm".
-     */
-    typography?: TypographyVariant;
-}

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

@@ -1,2 +0,0 @@
-import type { LinkButtonProps } from './types';
-export declare function LinkButton({ variant, size, theme, cssOverrides, icon, ...props }: LinkButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,398 +0,0 @@
-import type { ButtonTheme, PartialButtonTheme } from '../Button/styles';
-export type LinkButtonTheme = ButtonTheme;
-export type PartialLinkButtonTheme = PartialButtonTheme;
-export declare const defaultLinkButtonTheme: ButtonTheme;
-export declare const linkButtonStyles: (theme: {
-    shared: {
-        display: string;
-        webkitAppearance: string;
-        textAlign: string;
-        boxShadow: string;
-        cursor: string;
-        justifyContent: string;
-        alignItems: string;
-        textDecoration: string;
-        disabled: {
-            cursor: string;
-        };
-        focusVisible: {
-            outline: string;
-            outlineOffset: string;
-        };
-    };
-    primary: {
-        shared: {
-            color: string;
-            backgroundColor: string;
-            borderRadius: string;
-            border: string;
-            hover: {
-                backgroundColor: string;
-                border: string;
-            };
-            active: {
-                backgroundColor: string;
-                border: string;
-            };
-            disabled: {
-                color: string;
-                backgroundColor: string;
-                border: string;
-            };
-        };
-        xs: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        sm: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        md: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        lg: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-    };
-    secondary: {
-        shared: {
-            color: string;
-            backgroundColor: string;
-            borderRadius: string;
-            border: string;
-            hover: {
-                backgroundColor: string;
-                border: string;
-            };
-            active: {
-                backgroundColor: string;
-                border: string;
-            };
-            disabled: {
-                color: string;
-                backgroundColor: string;
-                border: string;
-            };
-        };
-        xs: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        sm: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        md: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        lg: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-    };
-    tertiary: {
-        shared: {
-            color: string;
-            backgroundColor: string;
-            borderRadius: string;
-            border: string;
-            hover: {
-                backgroundColor: string;
-                border: string;
-            };
-            active: {
-                backgroundColor: string;
-                border: string;
-            };
-            disabled: {
-                color: string;
-                backgroundColor: string;
-                border: string;
-            };
-        };
-        xs: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        sm: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        md: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        lg: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-    };
-}, { size, variant }: Required<Pick<import("../Button/types").ButtonProps, "size" | "variant">>, hasIcon?: boolean, isIconButton?: boolean) => import("@emotion/react").SerializedStyles;

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

@@ -1,18 +0,0 @@
-import type { LinkProps as RACLinkProps } from 'react-aria-components';
-import type { DefaultProps } from '../../util/types';
-import type { IconProps } from '../Icon/types';
-import type { LinkButtonTheme } from './styles';
-export interface LinkButtonProps extends DefaultProps<LinkButtonTheme, RACLinkProps['className']>, RACLinkProps {
-    /**
-     * Size variant of the link button
-     */
-    size?: keyof Omit<LinkButtonTheme['primary'], 'shared'>;
-    /**
-     * Variant of the button
-     */
-    variant?: keyof Omit<LinkButtonTheme, 'shared'>;
-    /**
-     * Icon to be rendered within the button. Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
-     */
-    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
-}

package/dist/types/components/Menu/Menu.d.ts

@@ -1,7 +0,0 @@
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { MenuItemProps, MenuProps, MenuSectionProps, MenuSeparatorProps } from './types';
-export declare function MenuSeparator({ theme, cssOverrides, ...props }: MenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function MenuToggle({ children }: DefaultPropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function MenuSection({ name, size, theme, cssOverrides, children, ...props }: MenuSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function MenuItem({ label, description, aside, icon, size, theme, cssOverrides, ...props }: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function Menu({ theme, size, popoverProps, menuTriggerProps, children, cssOverrides, ...props }: MenuProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,28 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentMenu } from '../../styleD/build/typescript/component/menu';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { MenuItemProps, MenuPopoverProps, MenuSectionProps } from './types';
-export type MenuTheme = Prettify<ComponentMenu['menu']>;
-export type PartialMenuTheme = Prettify<DeepPartial<MenuTheme>>;
-export declare const defaultMenuTheme: MenuTheme;
-export declare const menuStyles: (theme: MenuTheme) => SerializedStyles;
-export type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
-export type PartialMenuSectionTheme = Prettify<DeepPartial<MenuSectionTheme>>;
-export declare const defaultMenuSectionTheme: MenuSectionTheme;
-export declare const menuSectionHeaderStyles: (theme: MenuSectionTheme, { size }: Required<Pick<MenuSectionProps, 'size'>>) => SerializedStyles;
-export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
-export type PartialMenuItemTheme = Prettify<DeepPartial<MenuItemTheme>>;
-export declare const defaultMenuItemTheme: MenuItemTheme;
-export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>) => SerializedStyles;
-export declare const menuItemIconStyles: (theme: MenuItemTheme, { size }: Required<Pick<MenuItemProps, 'size'>>) => SerializedStyles;
-export declare const menuItemLabelStyles: (theme: MenuItemTheme) => SerializedStyles;
-export declare const menuItemDescriptionStyles: (theme: MenuItemTheme) => SerializedStyles;
-export declare const menuItemAsideStyles: (theme: MenuItemTheme) => SerializedStyles;
-export type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
-export type PartialMenuSeparatorTheme = Prettify<DeepPartial<MenuSeparatorTheme>>;
-export declare const defaultMenuSeparatorTheme: MenuSeparatorTheme;
-export declare const menuSeparatorStyles: (theme: MenuSeparatorTheme) => SerializedStyles;
-export type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
-export type PartialMenuPopoverTheme = Prettify<DeepPartial<MenuPopoverTheme>>;
-export declare const defaultMenuPopoverTheme: MenuPopoverTheme;
-export declare const menuPopoverStyles: (theme: MenuPopoverTheme, { size }: Required<Pick<MenuPopoverProps, 'size'>>) => SerializedStyles;

package/dist/types/components/Menu/types.d.ts

@@ -1,63 +0,0 @@
-/// <reference types="react" />
-import type { MenuItemProps as RACMenuItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, PopoverProps as RACPopoverProps, SeparatorProps as RACSeparatorProps } from 'react-aria-components';
-import type { DefaultProps, DefaultPropsWithChildren } from '../../util/types';
-import type { IconProps } from '../Icon/types';
-import type { MenuItemTheme, MenuPopoverTheme, MenuSectionTheme, MenuSeparatorTheme, MenuTheme } from './styles';
-export interface MenuProps extends DefaultPropsWithChildren<MenuTheme, RACMenuProps<object>['className']>, Omit<RACMenuProps<object>, 'children'> {
-    /**
-     * Size variant of the Menu
-     */
-    size?: MenuPopoverProps['size'];
-    /**
-     * Props to pass to the underlying React Aria Popover component
-     */
-    popoverProps?: Omit<MenuPopoverProps, 'children' | 'size'>;
-    /**
-     * Props to pass to the underlying React Aria MenuTrigger component
-     */
-    menuTriggerProps?: Omit<MenuTriggerProps, 'children'>;
-}
-export interface MenuSectionProps extends DefaultPropsWithChildren<MenuSectionTheme, RACMenuSectionProps<object>['className']>, Omit<RACMenuSectionProps<object>, 'children'> {
-    /**
-     * The (optional) name of the section to be displayed in a header
-     */
-    name?: string;
-    /**
-     * Size variant of the MenuSection, this doesn't need to be passed if the MenuSection is a child of Menu, as it will inherit the size of the Menu.
-     */
-    size?: MenuPopoverProps['size'];
-    /**
-     * Disable the selectionMode option for the time being, as we currently don't have a checkbox or radio button component to use for the selectable menu items that this would require. This can be added in the future when we have these components available.
-     */
-    selectionMode?: 'none';
-}
-export interface MenuItemProps extends DefaultProps<MenuItemTheme, RACMenuItemProps['className']>, Omit<RACMenuItemProps, 'children'> {
-    /**
-     * The main label of the menu item, this can be a string or any React node if more complex layout is needed.
-     */
-    label: React.ReactNode;
-    /**
-     * Optional description text for the menu item, this can be a string or any React node if more complex layout is needed. The description will be rendered below the label in a smaller font size.
-     */
-    description?: React.ReactNode;
-    /**
-     * Optional content to be rendered on the right side of the menu item, this can be used for things like keyboard shortcuts or badges. This can be a string or any React node if more complex layout is needed.
-     */
-    aside?: React.ReactNode;
-    /**
-     * Icon to be rendered within the left side of the menu item. Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
-     */
-    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
-    /**
-     * Size variant of the MenuItem, this doesn't need to be passed if the MenuItem is a child of Menu, as it will inherit the size of the Menu.
-     */
-    size?: MenuPopoverProps['size'];
-}
-export type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, RACSeparatorProps['className']>;
-export interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, RACPopoverProps['className']>, RACPopoverProps {
-    /**
-     * Size variant of the Popover, this doesn't need to be passed if the Popover is a child of Menu, as it will inherit the size of the Menu.
-     */
-    size?: keyof Omit<MenuPopoverTheme, 'shared'>;
-}
-export type MenuTriggerProps = RACMenuTriggerProps;

package/dist/types/components/RadioGroup/RadioGroup.d.ts

@@ -1,3 +0,0 @@
-import type { RadioGroupProps, RadioProps } from './types';
-export declare function RadioGroup({ size, isInvalid, theme, children, ...props }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function Radio({ theme, size, children, isInvalid, ...props }: RadioProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,5 +0,0 @@
-export declare const componentName = "RadioGroup";
-export declare const componentTsx = "import { Radio, RadioGroup } from '@guardian/stand/RadioGroup';\n\nexport const Component = () => (\n\t<RadioGroup\n\t\tlabel=\"Option\"\n\t\tdescription=\"This is a description for the radio button input\"\n\t>\n\t\t<Radio value=\"one\">Option 1</Radio>\n\t\t<Radio value=\"two\">Option 2</Radio>\n\t</RadioGroup>\n);\n";
-export declare const componentCss = "\n/* import the radiogroup styles */\n@import '@guardian/stand/component/radioGroup.css';\n@import '@guardian/stand/component/form.css';\n\n/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-form-input-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-form-input-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n/* radiogroup styles */\n\n.stand-radio-group {\n\tdisplay: var(--component-radio-group-shared-display);\n\tflex-direction: var(--component-radio-group-shared-flex-direction);\n\tgap: var(--component-radio-group-md-gap);\n\tmargin-top: var(--component-radio-group-shared-margin-top);\n\tmargin-bottom: var(--component-radio-group-shared-margin-bottom);\n}\n\n.stand-radio {\n\tdisplay: var(--component-radio-group-shared-radio-display);\n\talign-items: var(--component-radio-group-shared-radio-align-items);\n\tgap: var(--component-radio-group-shared-radio-gap);\n\tfont: var(--component-radio-group-md-typography-font);\n\tletter-spacing: var(--component-radio-group-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-radio-group-md-typography-font-width);\n\tcolor: var(--component-radio-group-shared-radio-color);\n}\n\n.stand-radio input {\n\tposition: var(--component-radio-group-shared-indicator-position);\n\twidth: var(--component-radio-group-md-indicator-width);\n\theight: var(--component-radio-group-md-indicator-height);\n\tborder-radius: var(--component-radio-group-shared-indicator-border-radius);\n\tborder: var(--component-radio-group-shared-indicator-border);\n}\n\n.stand-radio > input::after {\n\tcontent: '';\n\tposition: var(--component-radio-group-shared-indicator-after-position);\n\tborder-radius: var(--component-radio-group-shared-indicator-after-border-radius);\n\tinset: var(--component-radio-group-shared-indicator-after-inset);\n\tscale: var(--component-radio-group-shared-indicator-after-scale);\n}\n";
-export declare const componentHtml = "<div class=\"container\">\n<div class=\"stand-form-input-container\">\n\t<label>Options</label>\n\t<span class=\"description\">This is a description for the radio group.</span>\n\t<div class=\"stand-radio-group\">\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"one\" name=\"option\" />\n\t\t\t<label>Option 1</label>\n\t\t</div>\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"two\" name=\"option\" />\n\t\t\t<label>Option 2</label>\n\t\t</div>\n\t</div>\n</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentRadioGroup, componentForm } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container.flexDirection};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.shared.label.font};\n\tletter-spacing: ${componentForm.input.shared.label.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.label.fontWidth};\n}\n\n.stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.font};\n\tletter-spacing: ${componentForm.input.shared.description.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.fontWidth};\n}\n\n.stand-radio-group {\n\tdisplay: ${componentRadioGroup.shared.display};\n\tflex-direction: ${componentRadioGroup.shared.flexDirection};\n\tgap: ${componentRadioGroup.md.gap};\n\tmargin-top: ${componentRadioGroup.shared.marginTop};\n\tmargin-bottom: ${componentRadioGroup.shared.marginBottom};\n}\n\n.stand-radio {\n\tdisplay: ${componentRadioGroup.shared.radio.display};\n\talign-items: ${componentRadioGroup.shared.radio.alignItems};\n\tgap: ${componentRadioGroup.shared.radio.gap};\n\tfont: ${componentRadioGroup.md.typography.font};\n\tletter-spacing: ${componentRadioGroup.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentRadioGroup.md.typography.fontWidth};\n\tcolor: ${componentRadioGroup.shared.radio.color};\n}\n\n.stand-radio input {\n\tposition: ${componentRadioGroup.shared.indicator.position};\n\twidth: ${componentRadioGroup.md.indicator.width};\n\theight: ${componentRadioGroup.md.indicator.height};\n\tborder-radius: ${componentRadioGroup.shared.indicator.borderRadius};\n\tborder: ${componentRadioGroup.shared.indicator.border};\n}\n\n.stand-radio > input::after {\n\tcontent: '';\n\tposition: ${componentRadioGroup.shared.indicator.after.position};\n\tborder-radius: ${componentRadioGroup.shared.indicator.after.borderRadius};\n\tinset: ${componentRadioGroup.shared.indicator.after.inset};\n\tscale: ${componentRadioGroup.shared.indicator.after.scale};\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the button components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container\">\n<div class=\"stand-form-input-container\">\n\t<label>Options</label>\n\t<span class=\"description\">This is a description for the radio group.</span>\n\t<div class=\"stand-radio-group\">\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"one\" name=\"option\" />\n\t\t\t<label>Option 1</label>\n\t\t</div>\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"two\" name=\"option\" />\n\t\t\t<label>Option 2</label>\n\t\t</div>\n\t</div>\n</div>\n</div>\n`;\n";

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

@@ -1,9 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentRadioGroup } from '../../styleD/build/typescript/component/radioGroup';
-import type { Prettify } from '../../util/types';
-import type { RadioGroupProps } from './types';
-export type RadioGroupTheme = Prettify<ComponentRadioGroup>;
-export declare const defaultRadioGroupTheme: RadioGroupTheme;
-export declare const radioGroupStyles: (theme: RadioGroupTheme, { size }: Required<Pick<RadioGroupProps, 'size'>>) => SerializedStyles;
-export declare const radioStyles: (theme: RadioGroupTheme, { size, isInvalid }: Required<Pick<RadioGroupProps, 'size' | 'isInvalid'>>) => SerializedStyles;
-export declare const radioIndicatorStyles: (theme: RadioGroupTheme, { size, isInvalid }: Required<Pick<RadioGroupProps, 'size' | 'isInvalid'>>) => SerializedStyles;

package/dist/types/components/RadioGroup/types.d.ts

@@ -1,10 +0,0 @@
-import type { RadioGroupProps as RACRadioGroupProps, RadioProps as RACRadioProps } from 'react-aria-components';
-import type { DefaultProps } from '../../util/types';
-import type { FormInputContainerDefaultProps } from '../Form/types';
-import type { RadioGroupTheme } from './styles';
-export type RadioGroupProps = FormInputContainerDefaultProps<RACRadioGroupProps, RadioGroupTheme>;
-export interface RadioProps extends DefaultProps<RadioGroupTheme, RACRadioProps['className']>, RACRadioProps {
-    size?: keyof Omit<RadioGroupTheme, 'shared'>;
-    /** Whether the input value is invalid. */
-    isInvalid?: boolean;
-}

package/dist/types/components/Select/Select.d.ts

@@ -1,3 +0,0 @@
-import type { OptionProps, SelectProps } from './types';
-export declare function Option({ children, theme }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function Select({ isInvalid, theme, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;