@guardian/stand 0.0.9 → 0.0.10

package/dist/types/icon.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Icon 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/icon.css),
+ * you don't need to install these.
+ *
+ * You'll also need to install a set of icons to use the Icon component.
+ *
+ * The Icon component supports two types of icons:
+ * 1. Material Symbols
+ * 2. SVG icons (e.g. Material Icons or custom SVG icon components)
+ *
+ * See the documentation for the Icon component for instructions on how to use it with both types of icons.
+ */
+export { Icon } from './components/icon/Icon';
+export type { IconProps } from './components/icon/types';
+export type { IconTheme } from './components/icon/styles';
+export { componentIcon } from './styleD/build/typescript/component/icon';
+export type { ComponentIcon } from './styleD/build/typescript/component/icon';

package/dist/types/index.d.ts

@@ -11,6 +11,19 @@ export { componentTagAutocomplete } from './styleD/build/typescript/component/ta
 export type { ComponentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
 export { componentTagTable } from './styleD/build/typescript/component/tagTable';
 export type { ComponentTagTable } from './styleD/build/typescript/component/tagTable';
+export { componentUserMenu } from './styleD/build/typescript/component/userMenu';
+export type { ComponentUserMenu } from './styleD/build/typescript/component/userMenu';
+/**
+ * design system components tokens exports
+ */
+export { componentAvatar } from './styleD/build/typescript/component/avatar';
+export type { ComponentAvatar } from './styleD/build/typescript/component/avatar';
+export { componentButton } from './styleD/build/typescript/component/button';
+export type { ComponentButton } from './styleD/build/typescript/component/button';
+export { componentTypography } from './styleD/build/typescript/component/typography';
+export type { ComponentTypography } from './styleD/build/typescript/component/typography';
+export { componentIcon } from './styleD/build/typescript/component/icon';
+export type { ComponentIcon } from './styleD/build/typescript/component/icon';
 /**
  * style dictionary exports - base
  */
@@ -33,3 +46,7 @@ export { semanticTypography } from './styleD/build/typescript/semantic/typograph
 export type { SemanticTypography } from './styleD/build/typescript/semantic/typography';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing';
 export type { SemanticSizing } from './styleD/build/typescript/semantic/sizing';
+/**
+ * utils exports
+ */
+export { default as GlobalResetStyles } from './util/reset.css?inline';

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

@@ -0,0 +1,20 @@
+/**
+ * LinkButton component entry point
+ *
+ * This component extends the `Button` component styles
+ *
+ * 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, use the `button` css (./component/button.css),
+ * you don't need to install these.
+ */
+export { LinkButton } from './components/link-button/LinkButton';
+export type { LinkButtonProps } from './components/link-button/types';
+export type { LinkButtonTheme } from './components/link-button/styles';

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

@@ -41,7 +41,7 @@ export declare const baseColors: {
         readonly '500': "#3e82dd";
         readonly '600': "#699ee5";
         readonly '700': "#93b9ec";
-        readonly '800': "#bdd4f4";
+        readonly '800': "#c5d9f4";
         readonly '900': "#e8f0fb";
     };
     readonly cyan: {

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

@@ -4,6 +4,7 @@
 export declare const baseSizing: {
     readonly 'size-1-px': "1px";
     readonly 'size-2-px': "2px";
+    readonly 'size-8-px': "8px";
     readonly 'size-16-px': "16px";
     readonly 'size-18-px': "18px";
     readonly 'size-20-px': "20px";
@@ -13,6 +14,7 @@ export declare const baseSizing: {
     readonly 'size-48-px': "48px";
     readonly 'size-1-rem': "0.0625rem";
     readonly 'size-2-rem': "0.125rem";
+    readonly 'size-8-rem': "0.5rem";
     readonly 'size-16-rem': "1rem";
     readonly 'size-18-rem': "1.125rem";
     readonly 'size-20-rem': "1.25rem";

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

@@ -0,0 +1,88 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentAvatar: {
+    shared: {
+        color: {
+            green: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            blue: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            red: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            cyan: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            teal: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            'cool-purple': {
+                text: string;
+                background: string;
+                border: string;
+            };
+            'warm-purple': {
+                text: string;
+                background: string;
+                border: string;
+            };
+            magenta: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            orange: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            yellow: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            outlined: {
+                text: string;
+                background: string;
+                border: string;
+            };
+        };
+        display: string;
+        'align-items': string;
+        'justify-content': string;
+        overflow: string;
+        'flex-shrink': string;
+        'border-radius': string;
+        'user-select': string;
+    };
+    sm: {
+        size: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+    };
+    md: {
+        size: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+    };
+};
+export type ComponentAvatar = typeof componentAvatar;

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

@@ -0,0 +1,331 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentButton: {
+    shared: {
+        display: string;
+        '-webkit-appearance': string;
+        'text-align': string;
+        'box-shadow': string;
+        cursor: string;
+        'justify-content': string;
+        'align-items': string;
+        'text-decoration': string;
+        ':disabled': {
+            cursor: string;
+        };
+        ':focus-visible': {
+            outline: string;
+            'outline-offset': string;
+        };
+    };
+    'emphasised-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;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        md: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        lg: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
+    'emphasised-secondary': {
+        shared: {
+            color: string;
+            backgroundColor: string;
+            borderRadius: string;
+            border: string;
+            ':hover': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':active': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':disabled': {
+                color: string;
+                backgroundColor: string;
+                border: string;
+            };
+        };
+        xs: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        md: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        lg: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
+    '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;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        md: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        lg: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
+    'neutral-secondary': {
+        shared: {
+            color: string;
+            backgroundColor: string;
+            borderRadius: string;
+            border: string;
+            ':hover': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':active': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':disabled': {
+                color: string;
+                backgroundColor: string;
+                border: string;
+            };
+        };
+        xs: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        md: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        lg: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
+};
+export type ComponentButton = typeof componentButton;

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

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentIcon: {
+    shared: {
+        display: string;
+        'user-select': string;
+    };
+    sm: {
+        size: string;
+    };
+    md: {
+        size: string;
+    };
+    lg: {
+        size: string;
+    };
+};
+export type ComponentIcon = typeof componentIcon;

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

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentTypography: {
+    color: string;
+};
+export type ComponentTypography = typeof componentTypography;

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

@@ -0,0 +1,37 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentUserMenu: {
+    container: {
+        backgroundColor: string;
+        width: string;
+        paddingY: string;
+        paddingX: string;
+    };
+    heading: {
+        fontWeight: number;
+        fontSize: string;
+        paddingTop: string;
+        paddingRight: string;
+        paddingBottom: string;
+        paddingLeft: string;
+        textAlign: string;
+    };
+    label: {
+        fontWeight: number;
+        fontSize: string;
+        paddingTop: string;
+        paddingRight: string;
+        paddingBottom: string;
+        paddingLeft: string;
+        textAlign: string;
+    };
+    toggleButton: {
+        baseBackgroundColor: string;
+        disabledBackgroundColor: string;
+        baseBorderColor: string;
+        selectedBorderColor: string;
+        gap: string;
+    };
+};
+export type ComponentUserMenu = typeof componentUserMenu;

package/dist/types/styleD/build/typescript/semantic/colors.d.ts

@@ -26,8 +26,9 @@ export declare const semanticColors: {
         'interactive-disabled': string;
     };
     bg: {
-        'default-onDark': string;
-        'default-onLight': string;
+        base: string;
+        'raised-1': string;
+        'raised-2': string;
     };
     surface: {
         'light-1': string;
@@ -35,14 +36,16 @@ export declare const semanticColors: {
         'dark-1': string;
     };
     border: {
-        subtle: string;
         default: string;
+        secondary: string;
+        tertiary: string;
         strong: string;
         'inverse-strong': string;
         'interactive-emphasised': string;
         'interactive-neutral': string;
         'interactive-disabled': string;
         'interactive-focused': string;
+        'interactive-selected': string;
     };
     status: {
         'status-draft': string;
@@ -72,6 +75,7 @@ export declare const semanticColors: {
         'magenta-subtle': string;
         'orange-subtle': string;
         'yellow-subtle': string;
+        selected: string;
     };
 };
 export type SemanticColors = typeof semanticColors;

package/dist/types/styleD/build/typescript/semantic/sizing.d.ts

@@ -16,6 +16,7 @@ export declare const semanticSizing: {
     border: {
         default: string;
         md: string;
+        'extra-wide': string;
     };
 };
 export type SemanticSizing = typeof semanticSizing;

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

@@ -202,5 +202,10 @@ export declare const semanticTypography: {
         letterSpacing: string;
         fontWidth: number;
     };
+    'interactive-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
 };
 export type SemanticTypography = typeof semanticTypography;

package/dist/types/typography.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Typography component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/typography.css),
+ * you don't need to install these.
+ */
+export { Typography } from './components/typography/Typography';
+export type { TypographyProps } from './components/typography/types';
+export type { TypographyTheme } from './components/typography/styles';
+export { componentTypography } from './styleD/build/typescript/component/typography';
+export type { ComponentTypography } from './styleD/build/typescript/component/typography';

package/dist/types/user-menu.d.ts

@@ -0,0 +1,18 @@
+/**
+ * User Menu components entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-aria-components`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/userMenu.css, ./component/userMenu.css),
+ * you don't need to install these.
+ */
+export { UserMenu } from './components/user-menu/UserMenu';
+export { componentUserMenu } from './styleD/build/typescript/component/userMenu';
+export type { ComponentUserMenu } from './styleD/build/typescript/component/userMenu';

package/dist/types/util/reset.d.ts

@@ -0,0 +1 @@
+export declare const GlobalResetStyles: import("@emotion/react").SerializedStyles;

package/dist/types/util/storybookStyles.d.ts

@@ -0,0 +1 @@
+export declare const tableStyles: import("@emotion/react").SerializedStyles;