@guardian/stand 0.0.18 → 0.0.20

package/dist/styleD/build/typescript/component/form.js

@@ -0,0 +1,55 @@
+const componentForm = {
+  input: {
+    shared: {
+      container: {
+        display: "flex",
+        "flex-direction": "column",
+        gap: "0.25rem",
+        width: "100%"
+      },
+      label: {
+        color: "#000000",
+        disabled: {
+          color: "#999999"
+        }
+      },
+      description: {
+        color: "#545454",
+        typography: {
+          font: "normal 460 0.875rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        },
+        disabled: {
+          color: "#999999"
+        }
+      }
+    },
+    sm: {
+      container: {
+        "max-width": "200px"
+      },
+      label: {
+        typography: {
+          font: "normal 700 0.875rem/1.15 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      }
+    },
+    md: {
+      container: {
+        "max-width": "320px"
+      },
+      label: {
+        typography: {
+          font: "normal 700 1rem/1.15 Open Sans",
+          letterSpacing: "-0.03125rem",
+          fontWidth: 95
+        }
+      }
+    }
+  }
+};
+
+export { componentForm };

package/dist/styleD/build/typescript/component/select.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+const componentSelect = {
+  shared: {
+    maxWidth: "320px",
+    width: "100%",
+    hover: {
+      backgroundColor: "#f6f6f6",
+      outline: "none"
+    },
+    pressed: {
+      backgroundColor: "#ededed"
+    },
+    button: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: "0.25rem",
+      backgroundColor: "#ffffff",
+      border: "0.0625rem solid #545454",
+      borderRadius: "0.25rem",
+      height: "2.5rem",
+      paddingLeft: "0.75rem",
+      paddingRight: "0.25rem",
+      color: "#545454",
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0.125rem"
+      },
+      disabled: {
+        backgroundColor: "#ffffff",
+        cursor: "not-allowed",
+        color: "#999999",
+        border: "0.0625rem solid #dcdcdc"
+      },
+      error: {
+        border: "0.0625rem solid #b42a19"
+      }
+    },
+    option: {
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+      paddingTop: "0.75rem",
+      paddingBottom: "0.75rem",
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0",
+        backgroundColor: "inherit"
+      }
+    },
+    listBox: {
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      border: "0.0625rem solid #cccccc",
+      backgroundColor: "#ffffff",
+      shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    }
+  }
+};
+
+exports.componentSelect = componentSelect;

package/dist/styleD/build/typescript/component/select.js

@@ -0,0 +1,67 @@
+const componentSelect = {
+  shared: {
+    maxWidth: "320px",
+    width: "100%",
+    hover: {
+      backgroundColor: "#f6f6f6",
+      outline: "none"
+    },
+    pressed: {
+      backgroundColor: "#ededed"
+    },
+    button: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: "0.25rem",
+      backgroundColor: "#ffffff",
+      border: "0.0625rem solid #545454",
+      borderRadius: "0.25rem",
+      height: "2.5rem",
+      paddingLeft: "0.75rem",
+      paddingRight: "0.25rem",
+      color: "#545454",
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0.125rem"
+      },
+      disabled: {
+        backgroundColor: "#ffffff",
+        cursor: "not-allowed",
+        color: "#999999",
+        border: "0.0625rem solid #dcdcdc"
+      },
+      error: {
+        border: "0.0625rem solid #b42a19"
+      }
+    },
+    option: {
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+      paddingTop: "0.75rem",
+      paddingBottom: "0.75rem",
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0",
+        backgroundColor: "inherit"
+      }
+    },
+    listBox: {
+      typography: {
+        font: "normal 460 1rem/1.3 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      border: "0.0625rem solid #cccccc",
+      backgroundColor: "#ffffff",
+      shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    }
+  }
+};
+
+export { componentSelect };

package/dist/types/TopBar.d.ts

@@ -23,6 +23,6 @@ export type { PartialTopBarNavigationTheme as TopBarNavigationTheme } from './co
 export { TopBarItem } from './components/topbar/topBarItem/TopBarItem';
 export type { TopBarItemProps } from './components/topbar/topBarItem/types';
 export type { PartialTopBarItemTheme as TopBarItemTheme } from './components/topbar/topBarItem/styles';
-export { TopBar } from './components/topbar/TopBar';
+export { TopBar, TopBarContainerLeft, TopBarContainerRight, } from './components/topbar/TopBar';
 export type { TopBarProps } from './components/topbar/types';
 export type { PartialTopBarTheme as TopBarTheme } from './components/topbar/styles';

package/dist/types/components/form/Form.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { AllowedContainer, FormInputContainerDefaultProps } from './types';
+export declare function FormInputContainer<C extends AllowedContainer>({ as: Component, size, label, description, error, isDisabled, theme, formInputContainerTheme, cssOverrides, children, ...props }: FormInputContainerDefaultProps<ComponentPropsWithRef<C>> & {
+    as: C;
+}): import("@emotion/react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,15 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentForm } from '../../styleD/build/typescript/component/form';
+import type { Prettify } from '../../util/types';
+export type FormInputContainerTheme = Prettify<ComponentForm['input']>;
+export declare const defaultFormInputContainerTheme: FormInputContainerTheme;
+export declare const formInputContainerStyles: (theme: FormInputContainerTheme, { size, }: {
+    size: keyof Omit<FormInputContainerTheme, 'shared'>;
+}) => SerializedStyles;
+export declare const formInputLabelStyles: (theme: FormInputContainerTheme, { isDisabled, size, }: {
+    size: keyof Omit<FormInputContainerTheme, 'shared'>;
+    isDisabled?: boolean | undefined;
+}) => SerializedStyles;
+export declare const formInputDescriptionStyles: (theme: FormInputContainerTheme, { isDisabled, }: {
+    isDisabled?: boolean | undefined;
+}) => SerializedStyles;

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

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { DeepPartial, DefaultProps } from '../../util/types';
+import type { FormInputContainerTheme } from './styles';
+export type FormInputContainerDefaultProps<ReactAriaInput extends {
+    className?: unknown;
+}, ComponentTheme = FormInputContainerTheme> = DefaultProps<ComponentTheme, ReactAriaInput['className']> & Omit<ReactAriaInput, 'children' | 'className'> & {
+    /**
+     * The size of the form input, 'md' (default) or 'sm'.
+     */
+    size?: keyof Omit<ComponentTheme, 'shared'>;
+    /**
+     * The label text for the form field
+     */
+    label?: string;
+    /**
+     * The description text for the form field
+     */
+    description?: string;
+    /**
+     * Validation error message
+     */
+    error?: string;
+    /**
+     * Theme overrides for the FormInputContainer container, label, and description styles.
+     * Use this when the component has its own `theme` prop for component-specific styles.
+     */
+    formInputContainerTheme?: DeepPartial<FormInputContainerTheme>;
+    /**
+     * The content of the form field (e.g. Input, Button, Popover) should always be plain React nodes.
+     * RAC render-prop children (present on Select etc.) are intentionally excluded to
+     * preserve React 18/19 compatibility where functions are not assignable to ReactNode.
+     */
+    children?: ReactNode;
+};
+/**
+ * The React Aria form container components FormInputContainer supports.
+ * Add new components here
+ */
+export declare const ALLOWED_FORM_CONTAINERS: readonly [(props: import("react-aria-components").TextFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T extends object = {}, M extends "single" | "multiple" = "single">(props: import("react-aria-components").SelectProps<T, M> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
+export type AllowedContainer = (typeof ALLOWED_FORM_CONTAINERS)[number];

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

@@ -0,0 +1,3 @@
+import type { OptionProps, SelectProps } from './types';
+export declare function Option({ children, theme }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Select({ isInvalid, theme, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Select";
+export declare const componentTsx = "import { 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\n.stand-select-container {\n\tdisplay: var(--component-select-shared-display);\n\tflex-direction: var(--component-select-shared-flex-direction);\n\tgap: var(--component-select-shared-gap);\n\n\tmax-width: var(--component-select-shared-maxWidth);\n\twidth: var(--component-select-shared-width);\n}\n\n.stand-select {\n\t\tdisplay: var(--component-select-button-display);\n\t\tjustify-content: var(--component-select-button-justify-content);\n\t\talign-items: var(--component-select-button-align-items);\n\t\tbackground-color: var(--component-select-button-background-color);\n\t\tborder: var(--component-select-button-border);\n\t\tborder-radius: var(--component-select-button-border-radius);\n\t\theight: var(--component-select-button-height);\n\t\tpadding-left: var(--component-select-button-padding-left);\n\t\tpadding-right: var(--component-select-button-padding-right);\n\t\tmargin-top: var(--component-select-button-margin-top);\n\t\tcolor: var(--component-select-button-color);\n\n\t\tfont: var(--component-select-button-body-md-typography-font);\n\t\tletter-spacing: var(--component-select-button-body-md-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-select-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 { 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: ${componentSelect.shared.display};\n\tflex-direction: ${componentSelect.shared.flexDirection};\n\tgap: ${componentSelect.shared.gap};\n\n\tmax-width: ${componentSelect.shared.maxWidth};\n\twidth: ${componentSelect.shared.width};\n}\n\n.js-stand-select {\n\tdisplay: ${componentSelect.button.display};\n\tjustify-content: ${componentSelect.button.justifyContent};\n\talign-items: ${componentSelect.button.alignItems};\n\tbackground-color: ${componentSelect.button.backgroundColor};\n\tborder: ${componentSelect.button.border};\n\tborder-radius: ${componentSelect.button.borderRadius};\n\theight: ${componentSelect.button.height};\n\tpadding-left: ${componentSelect.button.paddingLeft};\n\tpadding-right: ${componentSelect.button.paddingRight};\n\tmargin-top: ${componentSelect.button.marginTop};\n\tcolor: ${componentSelect.button.color};\n\n\tfont: ${componentSelect.button.typography.font};\n\tletter-spacing: ${componentSelect.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.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.button.focused.outline};\n\t\toutline-offset: ${componentSelect.button.focused['outline-offset']};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.button.disabled.color};\n\t\tborder: ${componentSelect.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

@@ -0,0 +1,10 @@
+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 = 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

@@ -0,0 +1,9 @@
+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/form.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared form components entry point
+ *
+ * If you only need the built CSS (./component/form.css),
+ * you don't need to install these.
+ */
+export { componentForm } from './styleD/build/typescript/component/form';
+export type { ComponentForm } from './styleD/build/typescript/component/form';

package/dist/types/index.d.ts

@@ -28,10 +28,14 @@ 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 { componentSelect } from './styleD/build/typescript/component/select';
+export type { ComponentSelect } from './styleD/build/typescript/component/select';
 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';
 export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
+export { componentForm } from './styleD/build/typescript/component/form';
+export type { ComponentForm } from './styleD/build/typescript/component/form';
 /**
  * style dictionary exports - base
  */

package/dist/types/select.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Select 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/select.css),
+ * you don't need to install these.
+ */
+export { Select } from './components/select/Select';
+export type { SelectProps } from './components/select/types';
+export type { PartialSelectTheme as SelectTheme } from './components/select/styles';
+export { componentSelect } from './styleD/build/typescript/component/select';
+export type { ComponentSelect } from './styleD/build/typescript/component/select';

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

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentForm: {
+    input: {
+        shared: {
+            container: {
+                display: string;
+                'flex-direction': string;
+                gap: string;
+                width: string;
+            };
+            label: {
+                color: string;
+                disabled: {
+                    color: string;
+                };
+            };
+            description: {
+                color: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+                disabled: {
+                    color: string;
+                };
+            };
+        };
+        sm: {
+            container: {
+                'max-width': string;
+            };
+            label: {
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+        };
+        md: {
+            container: {
+                'max-width': string;
+            };
+            label: {
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+        };
+    };
+};
+export type ComponentForm = typeof componentForm;

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

@@ -0,0 +1,69 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentSelect: {
+    shared: {
+        maxWidth: string;
+        width: string;
+        hover: {
+            backgroundColor: string;
+            outline: string;
+        };
+        pressed: {
+            backgroundColor: string;
+        };
+        button: {
+            display: string;
+            justifyContent: string;
+            alignItems: string;
+            marginTop: string;
+            backgroundColor: string;
+            border: string;
+            borderRadius: string;
+            height: string;
+            paddingLeft: string;
+            paddingRight: string;
+            color: string;
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+            focused: {
+                outline: string;
+                'outline-offset': string;
+            };
+            disabled: {
+                backgroundColor: string;
+                cursor: string;
+                color: string;
+                border: string;
+            };
+            error: {
+                border: string;
+            };
+        };
+        option: {
+            paddingLeft: string;
+            paddingRight: string;
+            paddingTop: string;
+            paddingBottom: string;
+            focused: {
+                outline: string;
+                'outline-offset': string;
+                backgroundColor: string;
+            };
+        };
+        listBox: {
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+            border: string;
+            backgroundColor: string;
+            shadow: string;
+        };
+    };
+};
+export type ComponentSelect = typeof componentSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
   "exports": {
@@ -14,15 +14,15 @@
       "import": "./dist/avatar.js",
       "require": "./dist/avatar.cjs"
     },
-    "./avatar-link": {
-      "types": "./dist/types/avatar-link.d.ts",
-      "import": "./dist/avatar-link.js",
-      "require": "./dist/avatar-link.cjs"
+    "./AvatarLink": {
+      "types": "./dist/types/avatarLink.d.ts",
+      "import": "./dist/avatarLink.js",
+      "require": "./dist/avatarLink.cjs"
     },
-    "./avatar-button": {
-      "types": "./dist/types/avatar-button.d.ts",
-      "import": "./dist/avatar-button.js",
-      "require": "./dist/avatar-button.cjs"
+    "./AvatarButton": {
+      "types": "./dist/types/avatarButton.d.ts",
+      "import": "./dist/avatarButton.js",
+      "require": "./dist/avatarButton.cjs"
     },
     "./button": {
       "types": "./dist/types/button.d.ts",
@@ -69,11 +69,21 @@
       "import": "./dist/TopBar.js",
       "require": "./dist/TopBar.cjs"
     },
+    "./form": {
+      "types": "./dist/types/form.d.ts",
+      "import": "./dist/form.js",
+      "require": "./dist/form.cjs"
+    },
     "./inline-message": {
       "types": "./dist/types/inline-message.d.ts",
       "import": "./dist/inline-message.js",
       "require": "./dist/inline-message.cjs"
     },
+    "./select": {
+      "types": "./dist/types/select.d.ts",
+      "import": "./dist/select.js",
+      "require": "./dist/select.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -119,7 +129,9 @@
     "./component/favicon.css": "./dist/styleD/build/css/component/favicon.css",
     "./component/menu.css": "./dist/styleD/build/css/component/menu.css",
     "./component/TopBar.css": "./dist/styleD/build/css/component/TopBar.css",
-    "./component/inlineMessage.css": "./dist/styleD/build/css/component/inlineMessage.css"
+    "./component/form.css": "./dist/styleD/build/css/component/form.css",
+    "./component/inlineMessage.css": "./dist/styleD/build/css/component/inlineMessage.css",
+    "./component/select.css": "./dist/styleD/build/css/component/select.css"
   },
   "//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
   "typesVersions": {
@@ -127,6 +139,12 @@
       "avatar": [
         "./dist/types/avatar.d.ts"
       ],
+      "AvatarButton": [
+        "./dist/types/avatarButton.d.ts"
+      ],
+      "AvatarLink": [
+        "./dist/types/avatarLink.d.ts"
+      ],
       "button": [
         "./dist/types/button.d.ts"
       ],
@@ -166,8 +184,14 @@
       "menu": [
         "./dist/types/menu.d.ts"
       ],
+      "form": [
+        "./dist/types/form.d.ts"
+      ],
       "inline-message": [
         "./dist/types/inline-message.d.ts"
+      ],
+      "select": [
+        "./dist/types/select.d.ts"
       ]
     }
   },
@@ -185,20 +209,20 @@
     "@changesets/cli": "^2.30.0",
     "@codesandbox/sandpack-react": "^2.20.0",
     "@emotion/react": "11.11.4",
-    "@figma/rest-api-spec": "^0.36.0",
+    "@figma/rest-api-spec": "^0.37.0",
     "@guardian/eslint-config": "14.0.1",
     "@guardian/prettier": "10.0.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
     "@guardian/tsconfig": "1.0.1",
     "@material-design-icons/svg": "^0.14.15",
-    "@playwright/experimental-ct-react17": "^1.58.2",
+    "@playwright/experimental-ct-react17": "^1.59.1",
     "@react-aria/focus": "3.21.5",
     "@rollup/plugin-commonjs": "29.0.2",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/addon-themes": "^10.3.3",
-    "@storybook/react-vite": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/addon-themes": "^10.3.4",
+    "@storybook/react-vite": "^10.3.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/jest": "30.0.0",
     "@types/node": "^24.10.1",
@@ -206,7 +230,7 @@
     "@types/react-dom": "17.0.25",
     "change-case": "^5.4.4",
     "eslint": "9.39.3",
-    "eslint-plugin-storybook": "^10.3.3",
+    "eslint-plugin-storybook": "^10.3.4",
     "husky": "^9.1.7",
     "jest": "30.3.0",
     "jest-environment-jsdom": "^30.3.0",
@@ -227,13 +251,13 @@
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-import-css": "^4.2.0",
     "rollup-plugin-node-externals": "8.1.2",
-    "storybook": "^10.3.3",
+    "storybook": "^10.3.4",
     "style-dictionary": "^5.4.0",
-    "ts-jest": "29.4.6",
+    "ts-jest": "29.4.9",
     "tslib": "2.8.1",
     "typescript": "5.1.3",
-    "vite": "^8.0.3",
-    "vite-plugin-svgr": "^5.0.0"
+    "vite": "^8.0.5",
+    "vite-plugin-svgr": "^5.2.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11.4 <=11.14.0",