@guardian/stand 0.0.16 → 0.0.18

package/dist/types/components/link-button/styles.d.ts

@@ -20,7 +20,7 @@ export declare const linkButtonStyles: (theme: {
             'outline-offset': string;
         };
     };
-    'emphasised-primary': {
+    primary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -145,7 +145,7 @@ export declare const linkButtonStyles: (theme: {
             };
         };
     };
-    'emphasised-secondary': {
+    secondary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -270,132 +270,7 @@ export declare const linkButtonStyles: (theme: {
             };
         };
     };
-    'neutral-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;
-            };
-        };
-    };
-    'neutral-secondary': {
+    tertiary: {
         shared: {
             color: string;
             backgroundColor: string;

package/dist/types/components/link-button/types.d.ts

@@ -6,7 +6,7 @@ export interface LinkButtonProps extends DefaultProps<LinkButtonTheme, RACLinkPr
     /**
      * Size variant of the link button
      */
-    size?: keyof Omit<LinkButtonTheme['emphasised-primary'], 'shared'>;
+    size?: keyof Omit<LinkButtonTheme['primary'], 'shared'>;
     /**
      * Variant of the button
      */

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

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

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

@@ -0,0 +1,5 @@
+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 } from \"@guardian/stand\";\nimport { componentFavicon } from \"@guardian/stand\";\nconst style = `\n\tdisplay: ${componentTopBar.display};\n\tjustify-content: ${componentTopBar['justify-content']};\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['align-items']};\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['align-items']};\n\tjustify-content: ${componentFavicon['justify-content']};\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['font-width']};\n`;\n\nconst topBarItemStyle = `display: ${componentTopBar.Item.display};\n\talign-items: ${componentTopBar.Item['align-items']};\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

@@ -0,0 +1,9 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentTopBar } from '../../styleD/build/typescript/component/TopBar';
+import type { DeepPartial, Prettify } from '../../util/types';
+export type TopBarTheme = Prettify<ComponentTopBar>;
+export type PartialTopBarTheme = DeepPartial<TopBarTheme>;
+export declare const defaultTopBarTheme: TopBarTheme;
+export declare const topBarStyles: (theme: TopBarTheme) => SerializedStyles;
+export declare const topBarContainerLeftStyles: (theme: TopBarTheme) => SerializedStyles;
+export declare const topBarContainerRightStyles: (theme: TopBarTheme) => SerializedStyles;

package/dist/types/components/topbar/topBarItem/TopBarItem.d.ts

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

package/dist/types/components/topbar/topBarItem/sandbox.d.ts

@@ -0,0 +1,5 @@
+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['align-items']};\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

@@ -0,0 +1,8 @@
+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 = DeepPartial<TopBarItemTheme>;
+export declare const defaultTopBarItemTheme: TopBarItemTheme;
+export declare const topBarItemStyles: (theme: TopBarItemTheme, alignment: 'left' | 'right', { size }: Required<Pick<TopBarItemProps, 'size'>>) => SerializedStyles;

package/dist/types/components/topbar/topBarItem/types.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { DefaultProps } from '../../../util/types';
+import type { TopBarItemTheme } from './styles';
+export interface TopBarItemProps extends DefaultProps<TopBarItemTheme> {
+    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';
+}

package/dist/types/components/topbar/topBarNavigation/TopBarNavigation.d.ts

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

package/dist/types/components/topbar/topBarNavigation/sandbox.d.ts

@@ -0,0 +1,5 @@
+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['align-items']};\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['text-decoration']};\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['border-bottom']};\n\t\tcursor: ${componentTopBar.Navigation.shared.cursor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentTopBar.Navigation.shared[':focus-visible'].outline};\n\t\tborder-bottom: ${componentTopBar.Navigation.selected['border-bottom']};\n\t\toutline-offset: ${componentTopBar.Navigation.shared[':focus-visible']['outline-offset']};\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

@@ -0,0 +1,12 @@
+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 = DeepPartial<TopBarNavigationTheme>;
+export declare const defaultTopBarNavigationTheme: TopBarNavigationTheme;
+export declare const topBarNavigationStyles: (theme: TopBarNavigationTheme, selected: boolean) => SerializedStyles;
+export declare const topBarNavigationDividerStyles: (theme: TopBarNavigationTheme, { alignment }: Required<Pick<TopBarNavigationProps, 'alignment'>>) => 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

@@ -0,0 +1,44 @@
+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';
+}

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

@@ -0,0 +1,3 @@
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { TopBarTheme } from './styles';
+export type TopBarProps = DefaultPropsWithChildren<TopBarTheme>;

package/dist/types/index.d.ts

@@ -26,6 +26,8 @@ export { componentIcon } from './styleD/build/typescript/component/icon';
 export type { ComponentIcon } from './styleD/build/typescript/component/icon';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
+export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
+export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
 export { componentMenu } from './styleD/build/typescript/component/menu';
 export type { ComponentMenu } from './styleD/build/typescript/component/menu';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar';

package/dist/types/inline-message.d.ts

@@ -0,0 +1,19 @@
+/**
+ * InlineMessage component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/inlineMessage.css),
+ * you don't need to install these.
+ */
+export { InlineMessage } from './components/inline-message/InlineMessage';
+export type { InlineMessageProps } from './components/inline-message/types';
+export type { PartialInlineMessageTheme as InlineMessageTheme } from './components/inline-message/styles';
+export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
+export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';

package/dist/types/styleD/build/typescript/base/typography.d.ts

@@ -33,13 +33,13 @@ export declare const baseTypography: {
         readonly '48-rem': "3rem";
     };
     readonly weight: {
-        readonly 'Guardian Headline': {
-            readonly bold: 700;
-        };
         readonly 'Guardian Text Egyptian': {
             readonly normal: 400;
             readonly bold: 700;
         };
+        readonly 'Guardian Headline': {
+            readonly bold: 700;
+        };
         readonly 'Open Sans': {
             readonly light: 340;
             readonly normal: 460;

package/dist/types/styleD/build/typescript/component/TopBar.d.ts

@@ -2,6 +2,100 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const componentTopBar: {
+    'background-color': string;
+    display: string;
+    height: string;
+    'justify-content': string;
+    border: string;
+    Item: {
+        display: string;
+        'align-items': string;
+        height: string;
+        sm: {
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+        };
+        md: {
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+        };
+        lg: {
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+        };
+        border: string;
+    };
+    Navigation: {
+        shared: {
+            display: string;
+            position: string;
+            'align-items': string;
+            cursor: string;
+            'text-decoration': string;
+            height: string;
+            ':disabled': {
+                cursor: string;
+                color: string;
+            };
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            ':focus-visible': {
+                outline: string;
+                'outline-offset': string;
+            };
+            'border-top': string;
+            divider: string;
+        };
+        text: {
+            margin: {
+                left: string;
+            };
+        };
+        menuIndicator: {
+            margin: {
+                top: string;
+                left: string;
+            };
+        };
+        selected: {
+            color: string;
+            'border-bottom': string;
+        };
+        unselected: {
+            color: string;
+            'border-bottom': string;
+        };
+        md: {
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
     ToolName: {
         display: string;
         'align-items': string;

package/dist/types/styleD/build/typescript/component/avatar.d.ts

@@ -8,56 +8,122 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             blue: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             red: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             cyan: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             teal: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             'cool-purple': {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             'warm-purple': {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             magenta: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             orange: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             yellow: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
             outlined: {
                 text: string;
                 background: string;
                 border: string;
+                ':hover': {
+                    background: string;
+                };
+                ':active': {
+                    background: string;
+                };
             };
         };
         display: string;
@@ -67,6 +133,23 @@ export declare const componentAvatar: {
         'flex-shrink': string;
         'border-radius': string;
         'user-select': string;
+        link: {
+            width: string;
+            ':focus-visible': {
+                outline: string;
+                'outline-offset': string;
+            };
+            'text-decoration': string;
+        };
+        button: {
+            background: string;
+            border: string;
+            padding: string;
+            cursor: string;
+            ':disabled': {
+                cursor: string;
+            };
+        };
     };
     sm: {
         size: string;