@guardian/stand 0.0.9 → 0.0.11

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -25,8 +25,9 @@ const semanticColors = {
     "interactive-disabled": "#999999"
   },
   bg: {
-    "default-onDark": "#121212",
-    "default-onLight": "#ffffff"
+    base: "#ffffff",
+    "raised-1": "#f6f6f6",
+    "raised-2": "#ededed"
   },
   surface: {
     "light-1": "#f6f6f6",
@@ -34,14 +35,16 @@ const semanticColors = {
     "dark-1": "#333333"
   },
   border: {
-    subtle: "#cccccc",
     default: "#8d8d8d",
+    secondary: "#cccccc",
+    tertiary: "#ededed",
     strong: "#545454",
     "inverse-strong": "#ffffff",
     "interactive-emphasised": "#0d4289",
     "interactive-neutral": "#545454",
     "interactive-disabled": "#dcdcdc",
-    "interactive-focused": "#0072a9"
+    "interactive-focused": "#0072a9",
+    "interactive-selected": "#0072a9"
   },
   status: {
     "status-draft": "#f1c21b",
@@ -52,17 +55,17 @@ const semanticColors = {
   fill: {
     "interactive-primary-emphasised": "#0d4289",
     "interactive-primary-emphasised-hover": "#092f62",
-    "interactive-primary-emphasised-pressed": "#092f62",
+    "interactive-primary-emphasised-pressed": "#061d3c",
     "interactive-secondary-emphasised-hover": "#e8f0fb",
-    "interactive-secondary-emphasised-pressed": "#e8f0fb",
+    "interactive-secondary-emphasised-pressed": "#c5d9f4",
     "interactive-primary-neutral": "#545454",
     "interactive-primary-neutral-hover": "#333333",
-    "interactive-primary-neutral-pressed": "#333333",
+    "interactive-primary-neutral-pressed": "#121212",
     "interactive-secondary-neutral-hover": "#ededed",
-    "interactive-secondary-neutral-pressed": "#ededed",
+    "interactive-secondary-neutral-pressed": "#dcdcdc",
     "interactive-disabled": "#dcdcdc",
     "green-subtle": "#cde4c9",
-    "blue-subtle": "#bdd4f4",
+    "blue-subtle": "#c5d9f4",
     "red-subtle": "#f5c6c0",
     "cyan-subtle": "#b8d8e7",
     "teal-subtle": "#c5dfe1",
@@ -70,7 +73,8 @@ const semanticColors = {
     "warm-purple-subtle": "#dac3e8",
     "magenta-subtle": "#edc6d7",
     "orange-subtle": "#fcddc6",
-    "yellow-subtle": "#fbeebf"
+    "yellow-subtle": "#fbeebf",
+    selected: "#005d8b"
   }
 };
 

package/dist/styleD/build/typescript/semantic/colors.js

@@ -23,8 +23,9 @@ const semanticColors = {
     "interactive-disabled": "#999999"
   },
   bg: {
-    "default-onDark": "#121212",
-    "default-onLight": "#ffffff"
+    base: "#ffffff",
+    "raised-1": "#f6f6f6",
+    "raised-2": "#ededed"
   },
   surface: {
     "light-1": "#f6f6f6",
@@ -32,14 +33,16 @@ const semanticColors = {
     "dark-1": "#333333"
   },
   border: {
-    subtle: "#cccccc",
     default: "#8d8d8d",
+    secondary: "#cccccc",
+    tertiary: "#ededed",
     strong: "#545454",
     "inverse-strong": "#ffffff",
     "interactive-emphasised": "#0d4289",
     "interactive-neutral": "#545454",
     "interactive-disabled": "#dcdcdc",
-    "interactive-focused": "#0072a9"
+    "interactive-focused": "#0072a9",
+    "interactive-selected": "#0072a9"
   },
   status: {
     "status-draft": "#f1c21b",
@@ -50,17 +53,17 @@ const semanticColors = {
   fill: {
     "interactive-primary-emphasised": "#0d4289",
     "interactive-primary-emphasised-hover": "#092f62",
-    "interactive-primary-emphasised-pressed": "#092f62",
+    "interactive-primary-emphasised-pressed": "#061d3c",
     "interactive-secondary-emphasised-hover": "#e8f0fb",
-    "interactive-secondary-emphasised-pressed": "#e8f0fb",
+    "interactive-secondary-emphasised-pressed": "#c5d9f4",
     "interactive-primary-neutral": "#545454",
     "interactive-primary-neutral-hover": "#333333",
-    "interactive-primary-neutral-pressed": "#333333",
+    "interactive-primary-neutral-pressed": "#121212",
     "interactive-secondary-neutral-hover": "#ededed",
-    "interactive-secondary-neutral-pressed": "#ededed",
+    "interactive-secondary-neutral-pressed": "#dcdcdc",
     "interactive-disabled": "#dcdcdc",
     "green-subtle": "#cde4c9",
-    "blue-subtle": "#bdd4f4",
+    "blue-subtle": "#c5d9f4",
     "red-subtle": "#f5c6c0",
     "cyan-subtle": "#b8d8e7",
     "teal-subtle": "#c5dfe1",
@@ -68,7 +71,8 @@ const semanticColors = {
     "warm-purple-subtle": "#dac3e8",
     "magenta-subtle": "#edc6d7",
     "orange-subtle": "#fcddc6",
-    "yellow-subtle": "#fbeebf"
+    "yellow-subtle": "#fbeebf",
+    selected: "#005d8b"
   }
 };
 

package/dist/styleD/build/typescript/semantic/sizing.cjs

@@ -14,7 +14,8 @@ const semanticSizing = {
   },
   border: {
     default: "0.0625rem",
-    md: "0.125rem"
+    md: "0.125rem",
+    "extra-wide": "0.5rem"
   }
 };
 

package/dist/styleD/build/typescript/semantic/sizing.js

@@ -12,7 +12,8 @@ const semanticSizing = {
   },
   border: {
     default: "0.0625rem",
-    md: "0.125rem"
+    md: "0.125rem",
+    "extra-wide": "0.5rem"
   }
 };
 

package/dist/styleD/build/typescript/semantic/typography.cjs

@@ -200,6 +200,11 @@ const semanticTypography = {
     font: "normal 700 0.875rem/1 Open Sans",
     letterSpacing: "-0.0125rem",
     fontWidth: 95
+  },
+  "interactive-md": {
+    font: "normal 700 1rem/1 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
   }
 };
 

package/dist/styleD/build/typescript/semantic/typography.js

@@ -198,6 +198,11 @@ const semanticTypography = {
     font: "normal 700 0.875rem/1 Open Sans",
     letterSpacing: "-0.0125rem",
     fontWidth: 95
+  },
+  "interactive-md": {
+    font: "normal 700 1rem/1 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
   }
 };
 

package/dist/types/avatar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Avatar 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/avatar.css),
+ * you don't need to install these.
+ */
+export { Avatar } from './components/avatar/Avatar';
+export type { AvatarProps } from './components/avatar/types';
+export type { AvatarTheme } from './components/avatar/styles';
+export { componentAvatar } from './styleD/build/typescript/component/avatar';
+export type { ComponentAvatar } from './styleD/build/typescript/component/avatar';

package/dist/types/button.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Button component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `react-aria-components`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/button.css),
+ * you don't need to install these.
+ */
+export { Button } from './components/button/Button';
+export type { ButtonProps } from './components/button/types';
+export type { ButtonTheme } from './components/button/styles';
+export { componentButton } from './styleD/build/typescript/component/button';
+export type { ComponentButton } from './styleD/build/typescript/component/button';

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

@@ -0,0 +1,6 @@
+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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/types/components/icon/Icon.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from './types';
+export declare function Icon({ children, size, fill, alt, symbol, theme, cssOverrides, className, }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import type { ComponentIcon } from '../../styleD/build/typescript/component/icon';
+import type { Prettify } from '../../util/types';
+import type { IconProps } from './types';
+export type IconTheme = Prettify<ComponentIcon>;
+export declare const defaultIconTheme: IconTheme;
+export declare const iconStyles: (theme: IconTheme, { size, fill, mode, }: Required<Pick<IconProps, "size">> & Pick<IconProps, "fill"> & {
+    mode: 'text' | 'svg';
+}) => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { MaterialSymbol } from '../../fonts/material-symbols-types';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { IconTheme } from './styles';
+export type { MaterialSymbol } from '../../fonts/material-symbols-types';
+export interface IconProps extends DefaultPropsWithChildren<IconTheme, undefined, MaterialSymbol | Exclude<React.ReactNode, string>> {
+    /**
+     * Size variant of the icon
+     */
+    size?: keyof Omit<IconTheme, 'shared'>;
+    /**
+     * Fill/color of the icon. Default is to inherit from text color or icon defaults.
+     */
+    fill?: string;
+    /**
+     * Alternative text for the icon, used for accessibility.
+     * This must be provided if the icon is not purely decorative, and should describe the meaning or function of the icon.
+     */
+    alt?: string;
+    /**
+     * Alternative to using the `children` prop for rendering Material Symbol icons,
+     * you can use the `symbol` prop to specify the icon by its symbol name.
+     * This is a convenience for font icons, allowing you to simply provide the symbol name in a type-safe way without needing to pass it as a child string.
+     * For example, instead of `<Icon>home</Icon>`, you can use `<Icon symbol="home" />`.
+     * This prop is mutually exclusive with `children` when rendering font icons, and takes precedence over `children` if both are provided.
+     */
+    symbol?: MaterialSymbol;
+}

package/dist/types/components/icon-button/IconButton.d.ts

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