@guardian/stand 0.0.40 → 0.0.41

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

@@ -1,398 +0,0 @@
-import type { ButtonTheme, PartialButtonTheme } from '../Button/styles';
-export type IconLinkButtonTheme = ButtonTheme;
-export type PartialIconLinkButtonTheme = PartialButtonTheme;
-export declare const defaultIconLinkButtonTheme: ButtonTheme;
-export declare const iconLinkButtonStyles: (theme: {
-    shared: {
-        display: string;
-        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/IconLinkButton/types.d.ts

@@ -1,26 +0,0 @@
-import type { LinkProps as RACLinkProps } from 'react-aria-components';
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { IconProps, MaterialSymbol } from '../Icon/types';
-import type { IconLinkButtonTheme } from './styles';
-export interface IconLinkButtonProps extends DefaultPropsWithChildren<IconLinkButtonTheme, RACLinkProps['className'], IconProps['children']>, Omit<RACLinkProps, 'children'> {
-    /**
-     * Size variant of the avatar
-     */
-    size?: keyof Omit<IconLinkButtonTheme['primary'], 'shared'>;
-    /**
-     * Variant of the button
-     */
-    variant?: keyof Omit<IconLinkButtonTheme, 'shared'>;
-    /**
-     * Alternative to using the `children` prop for rendering Material Symbol icons,
-     * you can use the `symbol` prop to specify the icon by its symbol name.
-     * This is a convenience for font icons, allowing you to simply provide the symbol name in a type-safe way without needing to pass it as a child string.
-     * For example, instead of `<Icon>home</Icon>`, you can use `<Icon symbol="home" />`.
-     * This prop is mutually exclusive with `children` when rendering font icons, and takes precedence over `children` if both are provided.
-     */
-    symbol?: MaterialSymbol;
-    /**
-     * Accessible label for the icon button. Required for accessibility.
-     */
-    ariaLabel: string;
-}

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

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

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

@@ -1,5 +0,0 @@
-export declare const componentName = "InlineMessage";
-export declare const componentTsx = "import { InlineMessage } from '@guardian/stand/InlineMessage';\n\nexport const Component = () => (\n  <>\n\t<InlineMessage level=\"error\">Something went wrong</InlineMessage>\n\t<InlineMessage level=\"success\">Changes saved successfully</InlineMessage>\n\t<InlineMessage level=\"information\">\n\t\tYour session will expire soon\n\t</InlineMessage>\n\t<InlineMessage level=\"error\" hideIcon>\n\t\tThis message has no icon\n\t</InlineMessage>\n\t<InlineMessage\n\tlevel=\"success\"\n\ticon={\n\t\t<svg viewBox=\"-3 -3 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.36 2.5h-.905l-7.6 7.69-.905.905v.453h.905v9.056l.904.896h5.872v-6.333h2.715V21.5h5.89l.904-.932v-9.02h.905v-.453l-1.357-1.357-.001.005zm5.97 8.447-6.412-6.34-6.254 6.326v8.758h3.158V13.81l.452-.453h5.438l.443.453v5.88h3.176z\"\n\t\t/>\n\t\t</svg>\n\t}\n\t>\n\tThis message uses a custom svg icon\n\t</InlineMessage>\n  </>\n);\n";
-export declare const componentCss = "\n/* import the inlinemessage styles */\n@import '@guardian/stand/component/inlineMessage.css';\n\n.stand-inline-message {\n  display: var(--component-inline-message-shared-display);\n  align-items: var(--component-inline-message-shared-align-items);\n  gap: var(--component-inline-message-shared-gap);\n  font: var(--component-inline-message-shared-typography-font);\n  letter-spacing: var(\n    --component-inline-message-shared-typography-letter-spacing\n  );\n  font-variation-settings: \"wdth\"\n    var(--component-inline-message-shared-typography-font-width);\n}\n\n.stand-inline-message > .material-symbols {\n  font-size: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message > svg {\n  width: var(--component-inline-message-shared-icon-size);\n  height: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message-error {\n  color: var(--component-inline-message-error-color);\n  fill: var(--component-inline-message-error-color);\n}\n\n.stand-inline-message-success {\n  color: var(--component-inline-message-success-color);\n  fill: var(--component-inline-message-success-color);\n}\n\n.stand-inline-message-information {\n  color: var(--component-inline-message-information-color);\n  fill: var(--component-inline-message-information-color);\n}\n";
-export declare const componentHtml = "<div class=\"container flow-column\">\n\t<span class=\"stand-inline-message stand-inline-message-error\">\n\t\t<span class=\"material-symbols\">warning</span> Something went wrong\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-success\">\n\t\t<span class=\"material-symbols\">check_circle</span> Changes saved successfully\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-information\">\n\t\t<span class=\"material-symbols\">info</span> Your session will expire soon\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-error\">\n\t\tThis message has no icon\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-success\">\n\t\t<svg viewBox=\"-3 -3 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.36 2.5h-.905l-7.6 7.69-.905.905v.453h.905v9.056l.904.896h5.872v-6.333h2.715V21.5h5.89l.904-.932v-9.02h.905v-.453l-1.357-1.357-.001.005zm5.97 8.447-6.412-6.34-6.254 6.326v8.758h3.158V13.81l.452-.453h5.438l.443.453v5.88h3.176z\"\n\t\t/>\n\t\t</svg>\n\t\tThis message uses a custom svg icon\n\t</span>\n</div>\n";
-export declare const componentJs = "\nimport { componentInlineMessage } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\t.js-stand-inline-message {\n\t\tdisplay: ${componentInlineMessage.shared.display};\n\t\talign-items: ${componentInlineMessage.shared.alignItems};\n\t\tgap: ${componentInlineMessage.shared.gap};\n\t\tfont: ${componentInlineMessage.shared.typography.font};\n\t\tletter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n\t}\n\n\t.js-stand-inline-message > .material-symbols {\n\t\tfont-size: ${componentInlineMessage.shared.icon.size};\n\t}\n\n\t.js-stand-inline-message > svg {\n\t\twidth: ${componentInlineMessage.shared.icon.size};\n\t\theight: ${componentInlineMessage.shared.icon.size};\n\t}\n\n\t.js-stand-inline-message-error {\n\t\tcolor: ${componentInlineMessage.error.color};\n\t\tfill: ${componentInlineMessage.error.color};\n\t}\n\n\t.js-stand-inline-message-success {\n\t\tcolor: ${componentInlineMessage.success.color};\n\t\tfill: ${componentInlineMessage.success.color};\n\t}\n\n\t.js-stand-inline-message-information {\n\t\tcolor: ${componentInlineMessage.information.color};\n\t\tfill: ${componentInlineMessage.information.color};\n\t}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the button components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container flow-column\">\n\t<span class=\"js-stand-inline-message js-stand-inline-message-error\">\n\t\t<span class=\"material-symbols\">warning</span> Something went wrong\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-success\">\n\t\t<span class=\"material-symbols\">check_circle</span> Changes saved successfully\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-information\">\n\t\t<span class=\"material-symbols\">info</span> Your session will expire soon\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-error\">\n\t\tThis message has no icon\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-success\">\n\t\t<svg viewBox=\"-3 -3 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.36 2.5h-.905l-7.6 7.69-.905.905v.453h.905v9.056l.904.896h5.872v-6.333h2.715V21.5h5.89l.904-.932v-9.02h.905v-.453l-1.357-1.357-.001.005zm5.97 8.447-6.412-6.34-6.254 6.326v8.758h3.158V13.81l.452-.453h5.438l.443.453v5.88h3.176z\"\n\t\t/>\n\t\t</svg>\n\t\tThis message uses a custom svg icon\n\t</span>\n</div>\n`;\n";

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

@@ -1,9 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentInlineMessage } from '../../styleD/build/typescript/component/inlineMessage';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { InlineMessageProps } from './types';
-export type InlineMessageTheme = Prettify<ComponentInlineMessage>;
-export type PartialInlineMessageTheme = DeepPartial<InlineMessageTheme>;
-export declare const defaultInlineMessageTheme: InlineMessageTheme;
-export declare const inlineMessageStyles: (theme: InlineMessageTheme, { level }: Required<Pick<InlineMessageProps, 'level'>>) => SerializedStyles;
-export declare const inlineMessageIconStyles: (theme: InlineMessageTheme) => SerializedStyles;

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

@@ -1,21 +0,0 @@
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { IconProps } from '../Icon/types';
-import type { InlineMessageTheme } from './styles';
-export interface InlineMessageProps extends DefaultPropsWithChildren<InlineMessageTheme> {
-    /**
-     * The severity level of the message, which determines its styling.
-     * This is a required prop.
-     * Levels: 'error', 'success', 'information'
-     */
-    level: keyof Omit<InlineMessageTheme, 'shared'>;
-    /**
-     * Optional prop to hide the default icon associated with the message level.
-     */
-    hideIcon?: 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>;
-}

package/dist/types/components/IntendedAudienceSignifier/FlagIcons.d.ts

@@ -1,5 +0,0 @@
-export declare const ukFlag: import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const usFlag: import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const auFlag: import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const globeIcon: import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const DoubleChevronRightSvg: import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,2 +0,0 @@
-import type { IntendedAudienceSignifierProps } from './types';
-export declare function IntendedAudienceSignifier({ source, intendedAudience, theme, cssOverrides, className, ...props }: IntendedAudienceSignifierProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,8 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentIntendedAudienceSignifier } from '../../styleD/build/typescript/component/intendedAudienceSignifier';
-import type { Prettify } from '../../util/types';
-export type IntendedAudienceSignifierTheme = Prettify<ComponentIntendedAudienceSignifier>;
-export declare const defaultIntendedAudienceSignifierTheme: IntendedAudienceSignifierTheme;
-export declare const intendedAudienceSignifierStyles: (theme: IntendedAudienceSignifierTheme) => SerializedStyles;
-export declare const intendedAudienceSignifierIconStyles: (theme: IntendedAudienceSignifierTheme) => SerializedStyles;
-export declare const intendedAudienceSignifierChevronIconStyles: (theme: IntendedAudienceSignifierTheme) => SerializedStyles;

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

@@ -1,8 +0,0 @@
-import type { DefaultProps } from '../../util/types';
-import type { IntendedAudienceSignifierTheme } from './styles';
-export type Source = 'UK' | 'US' | 'AUS';
-export type IntendedAudience = 'Global' | 'Domestic for Domestic' | 'Domestic For Global' | "Don't know" | 'UK' | 'US' | 'AUS';
-export interface IntendedAudienceSignifierProps extends DefaultProps<IntendedAudienceSignifierTheme> {
-    source: Source;
-    intendedAudience: IntendedAudience;
-}

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

@@ -1,11 +0,0 @@
-import type React from 'react';
-import type { LayoutProps, LayoutSlotProps, MainProps, SidebarProps } from './types';
-interface LayoutCompound {
-    (props: LayoutProps): React.ReactElement;
-    AlertBanner: (props: LayoutSlotProps) => React.ReactElement;
-    TopBar: (props: LayoutSlotProps) => React.ReactElement;
-    Sidebar: (props: SidebarProps) => React.ReactElement;
-    Main: (props: MainProps) => React.ReactElement;
-}
-export declare const Layout: LayoutCompound;
-export {};

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

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

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

@@ -1,19 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentLayout } from '../../styleD/build/typescript/component/layout';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { MainProps, SidebarProps } from './types';
-export type LayoutTheme = Prettify<ComponentLayout['layout']>;
-export type PartialLayoutTheme = Prettify<DeepPartial<LayoutTheme>>;
-export declare const defaultLayoutTheme: LayoutTheme;
-export type SidebarTheme = Prettify<ComponentLayout['sidebar']>;
-export type PartialSidebarTheme = Prettify<DeepPartial<SidebarTheme>>;
-export declare const defaultSidebarTheme: SidebarTheme;
-export type MainTheme = Prettify<ComponentLayout['main']>;
-export type PartialMainTheme = Prettify<DeepPartial<MainTheme>>;
-export declare const defaultMainTheme: MainTheme;
-export declare const alertBannerLayoutStyles: () => SerializedStyles;
-export declare const topBarLayoutStyles: () => SerializedStyles;
-export declare const sidebarLayoutStyles: () => SerializedStyles;
-export declare const mainLayoutStyles: (theme: MainTheme, { fluid }: Required<Pick<MainProps, 'fluid'>>) => SerializedStyles;
-export declare const layoutStyles: (theme: LayoutTheme) => SerializedStyles;
-export declare const sidebarStyles: (theme: SidebarTheme, { layoutSmBreakpoint }: Required<Pick<SidebarProps, 'layoutSmBreakpoint'>>) => SerializedStyles;

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

@@ -1,30 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type React from 'react';
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { LayoutTheme, MainTheme, SidebarTheme } from './styles';
-export type LayoutProps = DefaultPropsWithChildren<LayoutTheme>;
-export interface MainProps extends DefaultPropsWithChildren<MainTheme>, React.HTMLAttributes<HTMLElement> {
-    /**
-     * When `true`, the layout will take up the full width of its container, enabled by default.
-     * When `false`, the layout will have a max-width of 1584px and be centered within its container.
-     * This can be used to prevent the layout from becoming too stretched on very wide screens.
-     */
-    fluid?: boolean;
-    as?: React.ElementType;
-}
-export interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme>, React.HTMLAttributes<HTMLElement> {
-    /**
-     * Defines the layout behavior of the sidebar at the sm breakpoint.
-     *
-     * - 'above-grid' will place the sidebar above the grid content, effectively making it a horizontal bar at the top of the page, consumers may want to adjust the sidebar content styling for this breakpoint to make it look good in a horizontal layout.
-     * - 'hidden' will hide the sidebar entirely at the sm breakpoint, the consumer can choose how to make the sidebar content accessible through other means (e.g. a collapsible menu in the TopBar).
-     *
-     */
-    layoutSmBreakpoint?: 'above-grid' | 'hidden';
-    as?: React.ElementType;
-}
-export interface LayoutSlotProps extends React.HTMLAttributes<HTMLElement> {
-    children?: React.ReactNode;
-    cssOverrides?: SerializedStyles | SerializedStyles[];
-    as?: React.ElementType;
-}

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

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

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

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

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

@@ -1,7 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentLink } from '../../styleD/build/typescript/component/link';
-import type { DeepPartial, Prettify } from '../../util/types';
-export type LinkTheme = Prettify<ComponentLink>;
-export type PartialLinkTheme = DeepPartial<LinkTheme>;
-export declare const defaultLinkTheme: LinkTheme;
-export declare const linkStyles: (theme: LinkTheme) => SerializedStyles;