@guardian/stand 0.0.40 → 0.0.41

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

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

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

@@ -1,10 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentSelect } from '../../styleD/build/typescript/component/select';
-import type { DeepPartial, Prettify } from '../../util/types';
-export type SelectTheme = Prettify<ComponentSelect>;
-export type PartialSelectTheme = Prettify<DeepPartial<SelectTheme>>;
-export declare const defaultSelectTheme: SelectTheme;
-export declare const popoverStyles: (theme: SelectTheme) => SerializedStyles;
-export declare const listBoxItemStyles: (theme: SelectTheme) => SerializedStyles;
-export declare const listBoxStyles: (theme: SelectTheme) => SerializedStyles;
-export declare const buttonStyles: (theme: SelectTheme, isInvalid?: boolean) => SerializedStyles;

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

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

package/dist/types/components/TagPicker/example-tags.d.ts

@@ -1,2 +0,0 @@
-import type { TagManagerObject } from './types';
-export declare const exampleTags: TagManagerObject[];

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

@@ -1,16 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { type ComponentAutocomplete } from '../../styleD/build/typescript/component/autocomplete';
-import { type ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
-import type { DeepPartial } from '../../util/types';
-export declare const autocompleteInputStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
-export declare const listboxStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
-export declare const listboxItemStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
-export declare const listboxInfoStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
-export declare const tagTableHeadingStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
-export declare const tagTableCellStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
-export declare const tagTableRowStyles: (canDrag: boolean, partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
-export declare const tagTableStyles: (canRemoveTag: boolean, partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
-export declare const tagTableRemoveButtonStyles: SerializedStyles;
-export declare const tagTableAddButtonStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
-export declare const tagTableDragButtonStyles: SerializedStyles;
-export declare const tagTableTypeBadgeStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;

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

@@ -1,64 +0,0 @@
-export type Tag = {
-    id: number;
-    name: string;
-};
-export type TagRow = Tag & {
-    type: string;
-    sectionName: string;
-};
-export type TagManagerObject = {
-    id: number;
-    type: string;
-    internalName: string;
-    externalName: string;
-    slug: string;
-    section: {
-        id: number;
-        name: string;
-        pathPrefix: string;
-        sectionTagId: number;
-        slug: string;
-    };
-    parents: Array<{
-        uri: string;
-        data?: unknown;
-        links?: Array<{
-            rel: string;
-            href: string;
-            description?: string;
-        }>;
-    }>;
-    externalReferences: Array<{
-        type: string;
-        token?: string | undefined;
-    }>;
-    path: string;
-    contributorInformation: {
-        lastName?: string | undefined;
-        firstName?: string | undefined;
-        twitterHandle?: string | undefined;
-        rcsId?: string | undefined;
-        contactEmail?: string | undefined;
-        bylineImage?: {
-            imageId: string;
-            assets: Array<{
-                imageUrl: string;
-                width: number;
-                height: number;
-                mimeType: string;
-            }>;
-        } | undefined;
-        largeBylineImage?: {
-            imageId: string;
-            assets: Array<{
-                imageUrl: string;
-                width: number;
-                height: number;
-                mimeType: string;
-            }>;
-        } | undefined;
-    } | null;
-    adBlockingLevel?: 'NONE' | 'SUGGEST' | 'FORCE' | undefined;
-    contributionBlockingLevel?: 'NONE' | 'SUGGEST' | 'FORCE' | undefined;
-};
-export type TagManagerObjectData = TagRow & TagManagerObject;

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

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

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

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

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

@@ -1,7 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentTextArea } from '../../styleD/build/typescript/component/textArea';
-import type { Prettify } from '../../util/types';
-import type { TextAreaProps } from './types';
-export type TextAreaTheme = Prettify<ComponentTextArea>;
-export declare const defaultTextAreaTheme: TextAreaTheme;
-export declare const textAreaStyles: (theme: TextAreaTheme, { size, isInvalid }: Required<Pick<TextAreaProps, 'size' | 'isInvalid'>>) => SerializedStyles;

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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentTextInput } from '../../styleD/build/typescript/component/textInput';
-import type { Prettify } from '../../util/types';
-import type { TextInputProps } from './types';
-export type TextInputTheme = Prettify<ComponentTextInput>;
-export declare const defaultTextInputTheme: TextInputTheme;
-export declare const textInputStyles: (theme: TextInputTheme, { size, isInvalid }: Required<Pick<TextInputProps, 'size' | 'isInvalid'>>) => SerializedStyles;

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

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

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

@@ -1,11 +0,0 @@
-import type { TopBarTheme } from './styles';
-import type { TopBarProps } from './types';
-export declare function TopBarContainerRight({ children, theme, }: {
-    children: TopBarProps['children'];
-    theme?: TopBarTheme;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function TopBarContainerLeft({ children, theme, }: {
-    children: TopBarProps['children'];
-    theme?: TopBarTheme;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function TopBar({ children, collapseBelow, theme, cssOverrides, className, ...props }: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/TopBar/TopBarItem/TopBarItem.d.ts

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

package/dist/types/components/TopBar/TopBarItem/sandbox.d.ts

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

package/dist/types/components/TopBar/TopBarItem/styles.d.ts

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

package/dist/types/components/TopBar/TopBarItem/types.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import type { DefaultProps } from '../../../util/types';
-import type { TopBarItemTheme } from './styles';
-export interface TopBarItemProps extends DefaultProps<TopBarItemTheme>, React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-    /**
-     * Determines the alignment of the item within the top bar
-     */
-    alignment?: 'left' | 'right';
-    /**
-     * Determines how much width the item takes up in the top bar, defaults to `'md'`
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * This is an internal prop used to determine if the item is within an open menu, which affects the styling of the item.
-     * It is not intended to be set by consumers of the component.
-     */
-    _menuOpen?: boolean;
-}

package/dist/types/components/TopBar/TopBarNavigation/TopBarNavigation.d.ts

@@ -1,2 +0,0 @@
-import type { TopBarNavigationProps } from './types';
-export declare function TopBarNavigation({ text, size, isSelected, icon, menuChildren, href, onPress, isDisabled, alignment, theme, cssOverrides, className, _menuOpen, ...props }: TopBarNavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/TopBar/TopBarNavigation/sandbox.d.ts

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

package/dist/types/components/TopBar/TopBarNavigation/styles.d.ts

@@ -1,12 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentTopBar } from '../../../styleD/build/typescript/component/topBar';
-import type { DeepPartial, Prettify } from '../../../util/types';
-import type { TopBarNavigationProps } from './types';
-export type TopBarNavigationTheme = Prettify<ComponentTopBar['navigation']>;
-export type PartialTopBarNavigationTheme = Prettify<DeepPartial<TopBarNavigationTheme>>;
-export declare const defaultTopBarNavigationTheme: TopBarNavigationTheme;
-export declare const topBarNavigationStyles: (theme: TopBarNavigationTheme, selected: boolean, _menuOpen?: boolean) => SerializedStyles;
-export declare const topBarNavigationDividerStyles: (theme: TopBarNavigationTheme, { alignment }: Required<Pick<TopBarNavigationProps, 'alignment'>>, _menuOpen?: boolean) => SerializedStyles;
-export declare const topBarNavigationTextStyles: (theme: TopBarNavigationTheme) => SerializedStyles;
-export declare const topBarNavigationTypographyStyles: (theme: TopBarNavigationTheme, size: 'md' | 'sm') => SerializedStyles;
-export declare const topBarMenuIndicatorStyles: (theme: TopBarNavigationTheme) => SerializedStyles;

package/dist/types/components/TopBar/TopBarNavigation/types.d.ts

@@ -1,49 +0,0 @@
-import type { ReactNode } from 'react';
-import type { PressEvent } from 'react-aria-components';
-import type { DefaultProps } from '../../../util/types';
-import type { IconProps } from '../../Icon/types';
-import type { TopBarNavigationTheme } from './styles';
-export interface TopBarNavigationProps extends DefaultProps<TopBarNavigationTheme> {
-    /**
-     * Text to display in navigation
-     */
-    text: string;
-    /**
-     * Size of the text and icons
-     */
-    size?: 'md' | 'sm';
-    /**
-     * Whether the component is the currently selected navigation
-     */
-    isSelected?: boolean;
-    /**
-     * Icon to display in navigation
-     */
-    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
-    /**
-     * Menu sections and items to render in the dropdown menu - only children of type MenuSection and MenuItem will be rendered.
-     * `href` and `onPress` will be ignored if this prop is supplied.
-     */
-    menuChildren?: ReactNode;
-    /**
-     * Link to navigate to
-     */
-    href?: string;
-    /**
-     * Handler for navigation on press
-     */
-    onPress?: (e: PressEvent) => void;
-    /**
-     * Whether the navigation is disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * Determines the alignment of the item within the top bar
-     */
-    alignment?: 'left' | 'right';
-    /**
-     * This is an internal prop used to determine if the item is within an open menu, which affects the styling of the item.
-     * It is not intended to be set by consumers of the component.
-     */
-    _menuOpen?: boolean;
-}

package/dist/types/components/TopBar/TopBarToolName/TopBarToolName.d.ts

@@ -1,2 +0,0 @@
-import type { TopBarToolNameProps } from './types';
-export declare const TopBarToolName: ({ collapseBelow, theme, ...props }: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/TopBar/TopBarToolName/sandbox.d.ts

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

package/dist/types/components/TopBar/TopBarToolName/styles.d.ts

@@ -1,16 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { type ComponentTopBar } from '../../../styleD/build/typescript/component/topBar';
-import type { DeepPartial, Prettify } from '../../../util/types';
-import type { TopBarToolNameProps } from './types';
-export type TopBarToolNameTheme = Prettify<ComponentTopBar['toolName']>;
-export type PartialTopBarToolNameTheme = Prettify<DeepPartial<TopBarToolNameTheme>>;
-export declare const defaultToolNameTheme: TopBarToolNameTheme;
-export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme, { collapseBelow }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
-export declare const toolNameHoverLinkTextExpandedStyles: ({ collapseBelow, }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
-export declare const toolNameHoverLinkTextCollapsedStyles: ({ collapseBelow, }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
-export declare const toolNameLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
-export declare const toolNameStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
-export declare const toolNameTypography: (theme: TopBarToolNameTheme, { collapseBelow }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
-export declare const dividerStyles: (theme: TopBarToolNameTheme, { collapseBelow }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
-export declare const subsectionStyles: (theme: TopBarToolNameTheme, { collapseBelow }: Required<Pick<TopBarToolNameProps, 'collapseBelow'>>) => SerializedStyles;
-export declare const subsectionTypography: (theme: TopBarToolNameTheme) => SerializedStyles;

package/dist/types/components/TopBar/TopBarToolName/types.d.ts

@@ -1,40 +0,0 @@
-import type { LinkProps as RACLinkProps } from 'react-aria-components';
-import type { Breakpoint } from '../../../styleD/utils/semantic/mq';
-import type { DefaultProps } from '../../../util/types';
-import type { FaviconProps } from '../../Favicon/types';
-import type { IconProps } from '../../Icon/types';
-import type { TopBarToolNameTheme } from './styles';
-export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme, RACLinkProps['className']>, Omit<RACLinkProps, 'children'> {
-    /**
-     * Name of the tool to display
-     */
-    name: string;
-    /**
-     * Icon to display
-     */
-    favicon: FaviconProps;
-    /**
-     * The breakpoint at which the tool name section collapses to only show the favicon. Can be set to any valid breakpoint (e.g. 'sm', 'md', 'lg', etc.).
-     */
-    collapseBelow?: Breakpoint;
-    /**
-     * The subsection or type of content that is represented on the page (optional)
-     * */
-    subsection?: string;
-    /**
-     * Icon that represents the content type (optional)
-     * */
-    subsectionIcon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
-    /**
-     * Text to display on hover, labels the link
-     * e.g. 'Back to dashboard'
-     * If not provided, `collapsedHoverText` will be used for both expanded and collapsed states
-     */
-    hoverText?: string;
-    /**
-     * Shorter text to display on hover when collapsed, labels the link
-     * e.g. 'Back' or 'Home'
-     * If not provided, `hoverText` will be used for both expanded and collapsed states
-     */
-    collapsedHoverText?: string;
-}

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

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

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

@@ -1,15 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentTopBar } from '../../styleD/build/typescript/component/topBar';
-import { type Breakpoint } from '../../styleD/utils/semantic/mq';
-import type { DeepPartial, Prettify } from '../../util/types';
-export type TopBarTheme = Prettify<ComponentTopBar>;
-export type PartialTopBarTheme = Prettify<DeepPartial<TopBarTheme>>;
-export declare const defaultTopBarTheme: TopBarTheme;
-export declare const topBarStyles: (theme: TopBarTheme) => SerializedStyles;
-export declare const topBarContainerStyles: (theme: TopBarTheme, { collapseBelow, showUntil, }?: {
-    collapseBelow?: "sm" | "md" | "lg" | undefined;
-    showUntil?: "sm" | "md" | "lg" | undefined;
-}) => SerializedStyles;
-export declare const topBarSpacerStyles: (theme: TopBarTheme) => SerializedStyles;
-export declare const topBarCollapsedNavMenuButtonStyles: (theme: TopBarTheme, menuOpen?: boolean) => SerializedStyles;
-export declare const topBarCollapsedNavMenuPopoverStyles: (theme: TopBarTheme) => SerializedStyles;

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

@@ -1,12 +0,0 @@
-import type { Breakpoint } from '../../styleD/utils/semantic/mq';
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { TopBarTheme } from './styles';
-export type TopBarProps = DefaultPropsWithChildren<TopBarTheme> & {
-    /**
-     * Will collapse the designated section of the top bar below the specified breakpoint. For example, if `toolName` is set to `lg`, the section will collapse at the `md` breakpoint and below (i.e. on smaller screens).
-     */
-    collapseBelow?: {
-        toolName?: Breakpoint;
-        containerLeft?: Breakpoint;
-    };
-};

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import type { TypographyProps } from './types';
-export declare const Typography: ({ element, variant, children, cssOverrides, theme, ...props }: TypographyProps) => import("react").DetailedReactHTMLElement<{
-    className?: string | undefined;
-    css: (import("@emotion/react").SerializedStyles | import("@emotion/react").SerializedStyles[] | undefined)[];
-}, HTMLElement>;

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

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

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

@@ -1,8 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { type ComponentTypography } from '../../styleD/build/typescript/component/typography';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { TypographyProps } from './types';
-export type TypographyTheme = Prettify<ComponentTypography>;
-export type PartialTypographyTheme = Prettify<DeepPartial<TypographyTheme>>;
-export declare const defaultTypographyTheme: TypographyTheme;
-export declare const typographyStyles: (theme: TypographyTheme, { variant }: Required<Pick<TypographyProps, 'variant'>>) => SerializedStyles;

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

@@ -1,14 +0,0 @@
-import type { SemanticTypography } from '../../styleD/build/typescript/semantic/typography';
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { TypographyTheme } from './styles';
-export type TypographyVariant = keyof SemanticTypography;
-export interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
-    /**
-     * HTML element to render with font applied to
-     */
-    element?: 'div' | 'span' | 'p' | 'b' | 'i' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    /**
-     * Font variant to apply as a CSS style to the element
-     */
-    variant?: TypographyVariant;
-}

package/dist/types/components/UserMenu/PreferenceRadioGroup.d.ts

@@ -1,15 +0,0 @@
-import type { ComponentUserMenu } from '../../styleD/build/typescript/component/userMenu';
-import type { DeepPartial } from '../../util/types';
-import type { Option } from './model';
-interface PreferenceRadioGroupProps {
-    theme?: DeepPartial<ComponentUserMenu>;
-    options: Option[];
-    name: string;
-    currentValue?: string;
-    changeValue: {
-        (value: string): void;
-    };
-    format?: 'stack' | 'rows';
-}
-export declare function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme, format, }: PreferenceRadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/UserMenu/TitleText.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-export declare const TitleText: ({ headingLevel, children, className, }: {
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-    children: ReactNode;
-    className?: string | undefined;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;