@guardian/stand 0.0.40 → 0.0.41

package/dist/types/Select.d.ts

@@ -1,20 +0,0 @@
-/**
- * Select component entry point
- *
- * Peer dependencies required to use these components:
- * - `@emotion/react`
- * - `react`
- * - `react-dom`
- * - `react-aria-components`
- * - `typescript`
- *
- * See the `peerDependencies` section of package.json for compatible versions.
- *
- * 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 { componentSelect } from './styleD/build/typescript/component/select';
-export type { ComponentSelect } from './styleD/build/typescript/component/select';

package/dist/types/TagPicker.d.ts

@@ -1,22 +0,0 @@
-/**
- * Tag picker components entry point
- *
- * Peer dependencies required to use these components:
- * - `@emotion/react`
- * - `react`
- * - `react-aria-components`
- * - `react-dom`
- * - `typescript`
- *
- * See the `peerDependencies` section of package.json for compatible versions.
- *
- * If you only need the built CSS (./component/tagTable.css, ./component/tagAutocomplete.css),
- * you don't need to install these.
- */
-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';
-export type { ComponentTagTable } from './styleD/build/typescript/component/tagTable';

package/dist/types/TextArea.d.ts

@@ -1,20 +0,0 @@
-/**
- * TextArea component entry point
- *
- * Peer dependencies required to use these components:
- * - `@emotion/react`
- * - `react`
- * - `react-dom`
- * - `react-aria-components`
- * - `typescript`
- *
- * See the `peerDependencies` section of package.json for compatible versions.
- *
- * If you only need the built CSS (./component/textArea.css),
- * you don't need to install these.
- */
-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/TextInput.d.ts

@@ -1,20 +0,0 @@
-/**
- * TextInput component entry point
- *
- * Peer dependencies required to use these components:
- * - `@emotion/react`
- * - `react`
- * - `react-dom`
- * - `typescript`
- * - `react-aria-components`
- *
- * See the `peerDependencies` section of package.json for compatible versions.
- *
- * If you only need the built CSS (./component/textInput.css),
- * you don't need to install these.
- */
-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

@@ -1,29 +0,0 @@
-/**
- * Top Bar components entry point
- *
- * Peer dependencies required to use these components:
- * - `@emotion/react`
- * - `react`
- * - `react-dom`
- * - `react-aria-components`
- * - `typescript`
- *
- * See the `peerDependencies` section of package.json for compatible versions.
- *
- * 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';

package/dist/types/Typography.d.ts

@@ -1,19 +0,0 @@
-/**
- * Typography component entry point
- *
- * Peer dependencies required to use these components:
- * - `@emotion/react`
- * - `react`
- * - `react-dom`
- * - `typescript`
- *
- * See the `peerDependencies` section of package.json for compatible versions.
- *
- * 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 { componentTypography } from './styleD/build/typescript/component/typography';
-export type { ComponentTypography } from './styleD/build/typescript/component/typography';

package/dist/types/UserMenu.d.ts

@@ -1,18 +0,0 @@
-/**
- * User Menu components entry point
- *
- * Peer dependencies required to use these components:
- * - `@emotion/react`
- * - `react`
- * - `react-aria-components`
- * - `react-dom`
- * - `typescript`
- *
- * See the `peerDependencies` section of package.json for compatible versions.
- *
- * If you only need the built CSS (./component/userMenu.css, ./component/userMenu.css),
- * you don't need to install these.
- */
-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/AlertBanner/AlertBanner.d.ts

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

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

@@ -1,5 +0,0 @@
-export declare const componentName = "AlertBanner";
-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.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/AlertBanner/styles.d.ts

@@ -1,9 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentAlertBanner } from '../../styleD/build/typescript/component/alertBanner';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { AlertBannerProps } from './types';
-export type AlertBannerTheme = Prettify<ComponentAlertBanner>;
-export type PartialAlertBannerTheme = Prettify<DeepPartial<AlertBannerTheme>>;
-export declare const defaultAlertBannerTheme: AlertBannerTheme;
-export declare const alertBannerStyles: (theme: AlertBannerTheme, { level }: Required<Pick<AlertBannerProps, 'level'>>) => SerializedStyles;
-export declare const alertBannerContentStyles: (theme: AlertBannerTheme) => SerializedStyles;

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

@@ -1,27 +0,0 @@
-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> {
-    /**
-     * The severity level of the AlertBanner, which determines its styling.
-     * This is a required prop.
-     * Levels: 'error', 'success', 'information', 'warning
-     */
-    level: keyof Omit<AlertBannerTheme, 'shared'>;
-    /**
-     * Indicates whether the AlertBanner has an icon.
-     * Icon is based on the level of the AlertBanner
-     */
-    showIcon?: boolean;
-    /**
-     * Override the default icon for the message by providing a custom icon, for example when not using material symbols.
-     * This can be either a string (for material symbols) or an SVG element.
-     * Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
-     */
-    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
-    /**
-     * Optional props for the close button. If provided, a close button will be rendered in the AlertBanner, and these props will be passed to the IconButton component.
-     */
-    closeButtonProps?: Prettify<Partial<IconButtonProps>>;
-}

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

@@ -1,2 +0,0 @@
-import { type AvatarProps } from './types';
-export declare function Avatar({ src, initials, alt, size, color, theme, cssOverrides, ...props }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,5 +0,0 @@
-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 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.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/styles.d.ts

@@ -1,9 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentAvatar } from '../../styleD/build/typescript/component/avatar';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { AvatarProps } from './types';
-export type AvatarTheme = Prettify<ComponentAvatar>;
-export type PartialAvatarTheme = Prettify<DeepPartial<AvatarTheme>>;
-export declare const defaultAvatarTheme: AvatarTheme;
-export declare const avatarImageStyles: SerializedStyles;
-export declare const avatarStyles: (theme: AvatarTheme, { size, color }: Required<Pick<AvatarProps, 'size' | 'color'>>) => SerializedStyles;

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

@@ -1,45 +0,0 @@
-import type { ComponentAvatar } from '../../styleD/build/typescript/component/avatar';
-import type { DefaultProps } from '../../util/types';
-import type { AvatarTheme } from './styles';
-export type AvatarColors = keyof ComponentAvatar['shared']['color'];
-export declare const avatarColors: AvatarColors[];
-interface AvatarBaseProps extends DefaultProps<AvatarTheme> {
-    /**
-     * Size variant of the avatar
-     */
-    size?: keyof Omit<AvatarTheme, 'shared'>;
-    /**
-     * Color variant of the avatar
-     */
-    color?: AvatarColors;
-}
-interface AvatarWithImage extends AvatarBaseProps {
-    /**
-     * Image URL for the avatar
-     */
-    src: string;
-    /**
-     * Alternative text for the image (required when src is provided)
-     */
-    alt: string;
-    /**
-     * Initials to display when image fails to load (optional)
-     */
-    initials?: string;
-}
-interface AvatarWithInitials extends AvatarBaseProps {
-    /**
-     * Image URL for the avatar (optional)
-     */
-    src?: never;
-    /**
-     * Alternative text for the image (optional)
-     */
-    alt?: string;
-    /**
-     * Initials to display (required, typically 1-2 characters)
-     */
-    initials: string;
-}
-export type AvatarProps = AvatarWithImage | AvatarWithInitials;
-export {};

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

@@ -1,2 +0,0 @@
-import { type AvatarButtonProps } from './types';
-export declare function AvatarButton(props: AvatarButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,5 +0,0 @@
-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.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/AvatarButton/styles.d.ts

@@ -1,6 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { AvatarTheme, PartialAvatarTheme } from '../Avatar/styles';
-export type AvatarButtonTheme = AvatarTheme;
-export type PartialAvatarButtonTheme = PartialAvatarTheme;
-export declare const defaultAvatarButtonTheme: AvatarButtonTheme;
-export declare const avatarButtonStyles: (theme: AvatarButtonTheme) => SerializedStyles;

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

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

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

@@ -1,2 +0,0 @@
-import { type AvatarLinkProps } from './types';
-export declare function AvatarLink(props: AvatarLinkProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,5 +0,0 @@
-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.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/AvatarLink/styles.d.ts

@@ -1,6 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { AvatarTheme, PartialAvatarTheme } from '../Avatar/styles';
-export type AvatarLinkTheme = AvatarTheme;
-export type PartialAvatarLinkTheme = PartialAvatarTheme;
-export declare const defaultAvatarLinkTheme: AvatarTheme;
-export declare const avatarLinkStyles: (theme: AvatarLinkTheme) => SerializedStyles;

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

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

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

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

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

@@ -1,5 +0,0 @@
-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 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.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/styles.d.ts

@@ -1,8 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentButton } from '../../styleD/build/typescript/component/button';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { ButtonProps } from './types';
-export type ButtonTheme = Prettify<ComponentButton>;
-export type PartialButtonTheme = Prettify<DeepPartial<ButtonTheme>>;
-export declare const defaultButtonTheme: ButtonTheme;
-export declare const buttonStyles: (theme: ButtonTheme, { size, variant }: Required<Pick<ButtonProps, 'size' | 'variant'>>, hasIcon?: boolean, isIconButton?: boolean) => SerializedStyles;

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

@@ -1,18 +0,0 @@
-import type { ButtonProps as RACButtonProps } from 'react-aria-components';
-import type { DefaultProps } from '../../util/types';
-import type { IconProps } from '../Icon/types';
-import type { ButtonTheme } from './styles';
-export interface ButtonProps extends DefaultProps<ButtonTheme, RACButtonProps['className']>, RACButtonProps {
-    /**
-     * Size variant of the button
-     */
-    size?: keyof Omit<ButtonTheme['primary'], 'shared'>;
-    /**
-     * Variant of the button
-     */
-    variant?: keyof Omit<ButtonTheme, '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/Byline/Preview.d.ts

@@ -1,4 +0,0 @@
-import type { Node } from 'prosemirror-model';
-export declare const Preview: ({ doc }: {
-    doc: Node | null;
-}) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/types/components/Byline/contributors-fixture.d.ts

@@ -1 +0,0 @@
-export declare const contributors: string[];

package/dist/types/components/Byline/lib.d.ts

@@ -1,48 +0,0 @@
-import type { Node } from 'prosemirror-model';
-import type { Command } from 'prosemirror-state';
-import type { EditorView } from 'prosemirror-view';
-export type TypingFromStartRange = {
-    start: number;
-    maxReached: number;
-    lastPosition: number;
-};
-export declare const detectNameInText: (text: string, cursorOffset: number, isTypingFromStartRange?: TypingFromStartRange) => {
-    name: string;
-    startIndex: number;
-    endIndex: number;
-} | undefined;
-export declare function insertChip(text: string, from: number, to: number, type: 'tagged', tagId: string, path?: string, meta?: unknown): Command;
-export declare function insertChip(text: string, from: number, to: number, type: 'untagged', tagId?: undefined, meta?: undefined): Command;
-export declare const getCurrentText: (doc: Node, currentOffset: number, toOffset: number, isTypingFromStartRange?: TypingFromStartRange) => {
-    currentTextNode: Node | null;
-    startOffset: number;
-    endOffset: number;
-    selectedText: string;
-    hasSelection: boolean;
-};
-export declare const hasHitContributorLimit: (doc: Node, contributorLimit?: number) => boolean;
-export type TaggedContributor = {
-    tagId: string;
-    label: string;
-    internalLabel?: string;
-    path?: string;
-    meta?: unknown;
-};
-export declare const addUntaggedContributor: (viewRef: React.MutableRefObject<EditorView | null>, setShowDropdown: React.Dispatch<React.SetStateAction<boolean>>, contributorLimit?: number, isTypingFromStartRange?: TypingFromStartRange) => boolean | undefined;
-export declare const addTaggedContributor: (contributor: TaggedContributor, viewRef: React.MutableRefObject<EditorView | null>, setShowDropdown: React.Dispatch<React.SetStateAction<boolean>>, contributorLimit?: number, isTypingFromStartRange?: TypingFromStartRange) => boolean | undefined;
-type BylineText = {
-    type: 'text';
-    value: string;
-};
-type BylineContributor = {
-    type: 'contributor';
-    value: string;
-    tagId?: string;
-    path?: string;
-    meta?: unknown;
-};
-type BylinePart = BylineText | BylineContributor;
-export type BylineModel = BylinePart[];
-export declare const convertBylineModelToNode: (value?: BylineModel) => Node;
-export declare const convertNodeToBylineModel: (doc: Node) => BylineModel;
-export {};

package/dist/types/components/Byline/lib.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/components/Byline/placeholder.d.ts

@@ -1,2 +0,0 @@
-import { Plugin } from 'prosemirror-state';
-export declare const createPlaceholderPlugin: (text: string) => Plugin<any>;

package/dist/types/components/Byline/plugins.d.ts

@@ -1,4 +0,0 @@
-import { Plugin } from 'prosemirror-state';
-export declare const clipboardPlugin: (allowUntaggedContributors?: boolean, contributorLimit?: number) => Plugin;
-export declare const keybindings: () => Plugin<any>;
-export declare const bylinePlugin: () => Plugin;

package/dist/types/components/Byline/schema.d.ts

@@ -1,2 +0,0 @@
-import { Schema } from 'prosemirror-model';
-export declare const bylineEditorSchema: Schema<"text" | "doc" | "chip", any>;

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

@@ -1,13 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { Node } from 'prosemirror-model';
-import { type ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial } from '../../util/types';
-export declare const bylineContainerStyles: SerializedStyles;
-export declare const bylineEditorStyles: (partialTheme?: DeepPartial<ComponentByline>) => SerializedStyles;
-export declare const dropdownContainerStyles: (showDropdown: boolean, partialTheme?: DeepPartial<ComponentByline['dropdown']>) => SerializedStyles;
-export declare const dropdownUlStyles: SerializedStyles;
-export declare const dropdownLiStyles: (partialTheme?: DeepPartial<ComponentByline['dropdown']>) => SerializedStyles;
-export declare const selectedDropdownLiStyles: (partialTheme?: DeepPartial<ComponentByline['dropdown']>) => SerializedStyles;
-export declare const previewStyles: SerializedStyles;
-export declare const previewFreeTextStyles: SerializedStyles;
-export declare const previewContributorStyles: (node: Node) => SerializedStyles;

package/dist/types/components/Byline/theme.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial, Prettify } from '../../util/types';
-export type PartialBylineTheme = Prettify<DeepPartial<ComponentByline>>;

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

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

package/dist/types/components/Checkbox/CheckboxGroup.d.ts

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

package/dist/types/components/Checkbox/CheckboxGroupSandbox.d.ts

@@ -1,5 +0,0 @@
-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 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.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/CheckboxSandbox.d.ts

@@ -1,5 +0,0 @@
-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 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.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";