@guardian/stand 0.0.8 → 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

@@ -1,11 +1,29 @@
 /**
- * component exports
+ * Main entry point - Design tokens only
+ * Import components from their own entry points, this isolates components within their own peer dependencies.
  */
-export { Byline } from './components/byline/Byline';
-export type { BylineModel } from './components/byline/lib';
-export type { PartialBylineTheme } from './components/byline/theme';
-export { TagTable } from './components/tag-picker/TagTable';
-export { TagAutocomplete } from './components/tag-picker/TagAutocomplete';
+/**
+ * editorial components tokens exports
+ */
+export { componentByline } from './styleD/build/typescript/component/byline';
+export type { ComponentByline } from './styleD/build/typescript/component/byline';
+export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
+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
  */
@@ -31,4 +49,4 @@ export type { SemanticSizing } from './styleD/build/typescript/semantic/sizing';
 /**
  * utils exports
  */
-export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle, } from './styleD/utils/semantic/typography';
+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

@@ -2,7 +2,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 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";
@@ -10,7 +12,9 @@ export declare const baseSizing: {
     readonly 'size-32-px': "32px";
     readonly 'size-40-px': "40px";
     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/base/spacing.d.ts

@@ -4,7 +4,9 @@
 export declare const baseSpacing: {
     readonly '2-px': "2px";
     readonly '4-px': "4px";
+    readonly '6-px': "6px";
     readonly '8-px': "8px";
+    readonly '10-px': "10px";
     readonly '12-px': "12px";
     readonly '16-px': "16px";
     readonly '20-px': "20px";
@@ -19,7 +21,9 @@ export declare const baseSpacing: {
     readonly '96-px': "96px";
     readonly '2-rem': "0.125rem";
     readonly '4-rem': "0.25rem";
+    readonly '6-rem': "0.375rem";
     readonly '8-rem': "0.5rem";
+    readonly '10-rem': "0.625rem";
     readonly '12-rem': "0.75rem";
     readonly '16-rem': "1rem";
     readonly '20-rem': "1.25rem";

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

@@ -65,6 +65,7 @@ export declare const baseTypography: {
         readonly tight: 1.15;
         readonly normal: 1.3;
         readonly loose: 1.4;
+        readonly interactive: 1;
     };
     readonly 'letter-spacing': {
         readonly 'densest-px': "-1px";

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;