@guardian/stand 0.0.29 → 0.0.31

package/dist/index.js

@@ -1,27 +1,27 @@
+export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete.js';
 export { componentByline } from './styleD/build/typescript/component/byline.js';
-export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete.js';
 export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
 export { componentUserMenu } from './styleD/build/typescript/component/userMenu.js';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
 export { componentAvatar } from './styleD/build/typescript/component/avatar.js';
 export { componentButton } from './styleD/build/typescript/component/button.js';
-export { componentTypography } from './styleD/build/typescript/component/typography.js';
-export { componentIcon } from './styleD/build/typescript/component/icon.js';
+export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
-export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
+export { componentForm } from './styleD/build/typescript/component/form.js';
+export { componentIcon } from './styleD/build/typescript/component/icon.js';
+export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
+export { componentMenu } from './styleD/build/typescript/component/menu.js';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';
-export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
+export { componentSelect } from './styleD/build/typescript/component/select.js';
 export { componentTextArea } from './styleD/build/typescript/component/textArea.js';
 export { componentTextInput } from './styleD/build/typescript/component/textInput.js';
-export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
-export { componentSelect } from './styleD/build/typescript/component/select.js';
-export { componentMenu } from './styleD/build/typescript/component/menu.js';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
-export { componentForm } from './styleD/build/typescript/component/form.js';
+export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';
-export { baseTypography } from './styleD/build/typescript/base/typography.js';
-export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
-export { baseSizing } from './styleD/build/typescript/base/sizing.js';
 export { baseRadius } from './styleD/build/typescript/base/radius.js';
+export { baseSizing } from './styleD/build/typescript/base/sizing.js';
+export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
+export { baseTypography } from './styleD/build/typescript/base/typography.js';
 export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';

package/dist/styleD/build/css/component/TopBar.css

@@ -7,8 +7,12 @@
 	--component-top-bar-display: flex;
 	--component-top-bar-height: 4rem;
 	--component-top-bar-justify-content: flex-start;
-	--component-top-bar-border: 0.0625rem solid #cccccc;
+	--component-top-bar-border-right: 0.0625rem solid #cccccc;
+	--component-top-bar-border-top: 0.0625rem solid #cccccc;
+	--component-top-bar-border-bottom: 0.0625rem solid #cccccc;
+	--component-top-bar-border-left: 0.0625rem solid #cccccc;
 	--component-top-bar-spacer-margin-left: auto;
+	--component-top-bar-collapsed-nav-menu-button-color: #000000;
 	--component-top-bar-collapsed-nav-menu-button-margin: 0;
 	--component-top-bar-collapsed-nav-menu-button-padding: 0;
 	--component-top-bar-collapsed-nav-menu-button-background: none;

package/dist/styleD/build/css/component/autocomplete.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-autocomplete-input-color: #000000;
+	--component-autocomplete-input-background-color: #ffffff;
+	--component-autocomplete-input-disabled-background-color: #dcdcdc;
+	--component-autocomplete-input-border-width: 1px;
+	--component-autocomplete-input-border-style: solid;
+	--component-autocomplete-input-border-color: #8d8d8d;
+	--component-autocomplete-input-padding: 11px;
+	--component-autocomplete-listbox-border-width: 1px;
+	--component-autocomplete-listbox-border-style: solid;
+	--component-autocomplete-listbox-border-color: #8d8d8d;
+	--component-autocomplete-listbox-padding-y: 8px;
+	--component-autocomplete-listbox-padding-x: 0;
+	--component-autocomplete-listbox-background-color: #ffffff;
+	--component-autocomplete-listbox-item-padding-y: 8px;
+	--component-autocomplete-listbox-item-padding-x: 12px;
+	--component-autocomplete-listbox-item-background-hover-color: #ededed;
+	--component-autocomplete-listbox-item-background-focused-color: #ededed;
+	--component-autocomplete-listbox-item-color: #000000;
+	--component-autocomplete-listbox-item-color-hover: #000000;
+	--component-autocomplete-listbox-item-color-focused: #000000;
+}

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

@@ -5,12 +5,16 @@ const componentTopBar = {
   display: "flex",
   height: "4rem",
   "justify-content": "flex-start",
-  border: "0.0625rem solid #cccccc",
+  "border-right": "0.0625rem solid #cccccc",
+  "border-top": "0.0625rem solid #cccccc",
+  "border-bottom": "0.0625rem solid #cccccc",
+  "border-left": "0.0625rem solid #cccccc",
   spacer: {
     "margin-left": "auto"
   },
   collapsedNavMenu: {
     button: {
+      color: "#000000",
       margin: "0",
       padding: "0",
       background: "none",

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

@@ -3,12 +3,16 @@ const componentTopBar = {
   display: "flex",
   height: "4rem",
   "justify-content": "flex-start",
-  border: "0.0625rem solid #cccccc",
+  "border-right": "0.0625rem solid #cccccc",
+  "border-top": "0.0625rem solid #cccccc",
+  "border-bottom": "0.0625rem solid #cccccc",
+  "border-left": "0.0625rem solid #cccccc",
   spacer: {
     "margin-left": "auto"
   },
   collapsedNavMenu: {
     button: {
+      color: "#000000",
       margin: "0",
       padding: "0",
       background: "none",

package/dist/styleD/build/typescript/component/{tagAutocomplete.js → autocomplete.cjs}

@@ -1,4 +1,6 @@
-const componentTagAutocomplete = {
+'use strict';
+
+const componentAutocomplete = {
   input: {
     color: "#000000",
     backgroundColor: "#ffffff",
@@ -19,9 +21,12 @@ const componentTagAutocomplete = {
       paddingY: "8px",
       paddingX: "12px",
       backgroundHoverColor: "#ededed",
-      backgroundFocusedColor: "#ededed"
+      backgroundFocusedColor: "#ededed",
+      color: "#000000",
+      colorHover: "#000000",
+      colorFocused: "#000000"
     }
   }
 };
 
-export { componentTagAutocomplete };
+exports.componentAutocomplete = componentAutocomplete;

package/dist/styleD/build/typescript/component/{tagAutocomplete.cjs → autocomplete.js}

@@ -1,6 +1,4 @@
-'use strict';
-
-const componentTagAutocomplete = {
+const componentAutocomplete = {
   input: {
     color: "#000000",
     backgroundColor: "#ffffff",
@@ -21,9 +19,12 @@ const componentTagAutocomplete = {
       paddingY: "8px",
       paddingX: "12px",
       backgroundHoverColor: "#ededed",
-      backgroundFocusedColor: "#ededed"
+      backgroundFocusedColor: "#ededed",
+      color: "#000000",
+      colorHover: "#000000",
+      colorFocused: "#000000"
     }
   }
 };
 
-exports.componentTagAutocomplete = componentTagAutocomplete;
+export { componentAutocomplete };

package/dist/tag-picker.cjs

@@ -1,13 +1,15 @@
 'use strict';
 
-var TagTable = require('./components/tag-picker/TagTable.cjs');
+var Autocomplete = require('./components/tag-picker/Autocomplete.cjs');
 var TagAutocomplete = require('./components/tag-picker/TagAutocomplete.cjs');
+var TagTable = require('./components/tag-picker/TagTable.cjs');
+var autocomplete = require('./styleD/build/typescript/component/autocomplete.cjs');
 var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
-var tagAutocomplete = require('./styleD/build/typescript/component/tagAutocomplete.cjs');
 
 
 
-exports.TagTable = TagTable.TagTable;
+exports.Autocomplete = Autocomplete.Autocomplete;
 exports.TagAutocomplete = TagAutocomplete.TagAutocomplete;
+exports.TagTable = TagTable.TagTable;
+exports.componentAutocomplete = autocomplete.componentAutocomplete;
 exports.componentTagTable = tagTable.componentTagTable;
-exports.componentTagAutocomplete = tagAutocomplete.componentTagAutocomplete;

package/dist/tag-picker.js

@@ -1,4 +1,5 @@
-export { TagTable } from './components/tag-picker/TagTable.js';
+export { Autocomplete } from './components/tag-picker/Autocomplete.js';
 export { TagAutocomplete } from './components/tag-picker/TagAutocomplete.js';
+export { TagTable } from './components/tag-picker/TagTable.js';
+export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete.js';
 export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
-export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete.js';

package/dist/types/components/tag-picker/Autocomplete.d.ts

@@ -0,0 +1,117 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ReactElement } from 'react';
+import type { ComponentAutocomplete } from '../../styleD/build/typescript/component/autocomplete';
+import type { DeepPartial } from '../../util/types';
+export type AutocompleteOption = {
+    id: number | string;
+    name: string;
+};
+export interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> {
+    /** `addSelection` - Function called when an option is picked from the dropdown */
+    addSelection: (selection: T) => void;
+    /** `loading` - Whether the component is loading options for the dropdown */
+    loading: boolean;
+    /** `onTextInputChange` - Function called when the combobox input changes */
+    onTextInputChange: (inputText: string) => void;
+    /** `options` - The list of options shown in the dropdown */
+    options: T[];
+    /** `label` - An accessible label for the combobox input */
+    label: string;
+    /** `placeholder` - A placeholder string for the combobox input */
+    placeholder: string;
+    /** `disabled` - Whether the combobox input is disabled */
+    disabled: boolean;
+    /** `value` - The value of the combobox input */
+    value: string;
+    'data-testid'?: string;
+    /** `loadingIcon` - Icon used to show loading happening in the dropdown */
+    loadingIcon?: ReactElement;
+    /** `theme` - Used to customise the look and feel of the Autocomplete component */
+    theme?: DeepPartial<ComponentAutocomplete>;
+    /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
+    cssOverrides?: SerializedStyles;
+}
+/**
+ * ## Autocomplete
+ *
+ * *Status: Testing*
+ *
+ * Part of the overall TagPicker component, the Autocomplete provides an accessible
+ * autocomplete input for selecting tags from a list of options, based on the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox) component.
+ *
+ * **Peer dependencies:**
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of the `package.json` for compatible versions to install.
+ *
+ * ## Usage
+ *
+ * *Example with synchronous data:*
+ *
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Autocomplete } from '@guardian/stand';
+ *
+ * const exampleFruits = [
+ *   { id: 1, name: 'Apple' },
+ *   { id: 2, name: 'Banana' },
+ *   { id: 3, name: 'Cherry' },
+ *   { id: 4, name: 'Date' },
+ *   { id: 5, name: 'Elderberry' },
+ * ];
+ *
+ * const FruitPicker = () => {
+ *   const [selectedFruits, setSelectedFruits] = useState<{ id: number; name: string }[]>([]);
+ *   const [options, setOptions] = useState<{ id: number; name: string }[]>([]);
+ *   const [value, setValue] = useState('');
+ *
+ *   const onTextInputChange = (inputText: string) => {
+ *     setValue(inputText);
+ *     if (inputText === '') {
+ *       setOptions([]);
+ *       return;
+ *     }
+ *
+ *     if (inputText === '*') {
+ *       setOptions(exampleFruits);
+ *       return;
+ *     }
+ *
+ *     setOptions(
+ *       exampleFruits.filter((f) =>
+ *         f.name.toLowerCase().includes(inputText.toLowerCase()),
+ *       ),
+ *     );
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <Autocomplete
+ *         onTextInputChange={onTextInputChange}
+ *         options={options}
+ *         label="Fruits"
+ *         addSelection={(fruit) => setSelectedFruits((prev) => [...prev, fruit])}
+ *         loading={false}
+ *         placeholder="Search fruits"
+ *         disabled={false}
+ *         value={value}
+ *       />
+ *       <ul>
+ *         {selectedFruits.map((fruit) => (
+ *           <li key={fruit.id}>{fruit.name}</li>
+ *         ))}
+ *       </ul>
+ *     </>
+ *   );
+ * };
+ * ```
+ *
+ * #### Props
+ *
+ * See {@link AutocompleteProps} for a full list of props and descriptions.
+ *
+ * #### Example
+ *
+ * This is currently still in testing phase, so a production implementation is not yet available.
+ */
+export declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>({ addSelection, loading, onTextInputChange, options, label, placeholder, disabled, value, 'data-testid': dataTestId, loadingIcon, theme, cssOverrides, }: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/tag-picker/TagAutocomplete.d.ts

@@ -1,6 +1,6 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ReactElement } from 'react';
-import type { ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
+import type { ComponentAutocomplete } from '../../styleD/build/typescript/component/autocomplete';
 import type { DeepPartial } from '../../util/types';
 import type { Tag } from './types';
 interface TagAutocompleteProps<T extends Tag = Tag> {
@@ -8,8 +8,8 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
     addTag: (tag: T) => void;
     /** `loading` - Whether the component is loading options for the dropdown */
     loading: boolean;
-    /** `onChange` - Function called when the combobox input changes */
-    onChange: (inputText: string) => void;
+    /** `onTextInputChange` - Function called when the combobox input changes */
+    onTextInputChange: (inputText: string) => void;
     /** `options` - The list of options shown in the dropdown */
     options: T[];
     /** `label` - An accessible label for the combobox input */
@@ -24,7 +24,7 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
     /** `loadingIcon` - Icon used to show loading happening in the dropdown */
     loadingIcon?: ReactElement;
     /** `theme` - Used to customise the look and feel of the TagAutocomplete component */
-    theme?: DeepPartial<ComponentTagAutocomplete>;
+    theme?: DeepPartial<ComponentAutocomplete>;
     /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
     cssOverrides?: SerializedStyles;
 }
@@ -48,14 +48,27 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
  * ```tsx
  * import { TagAutocomplete, TagTable } from '@guardian/stand';
  *
+ * // Define a type for your tags — it must include `id` and `name`,
+ * // plus any extra fields TagTable needs (type, sectionName)
+ * type MyTag = {
+ *   id: number;
+ *   name: string;
+ *   type: string;
+ *   sectionName: string;
+ * };
+ *
+ * const allTags: MyTag[] = [
+ *   { id: 1, name: 'UK news', type: 'Keyword', sectionName: 'World' },
+ *   { id: 2, name: 'US politics', type: 'Keyword', sectionName: 'Politics' },
+ *   // ...
+ * ];
+ *
  * const Component = () => {
- *   const [selectedTags, setSelectedTags] = useState<
- *     TagManagerObjectData[] // TagManagerObjectData is an internal type representing a Tag
- *   >([]);
-
- *   const [options, setOptions] = useState<TagManagerObjectData[]>([]);
+ *   const [selectedTags, setSelectedTags] = useState<MyTag[]>([]);
+ *   const [options, setOptions] = useState<MyTag[]>([]);
  *   const [value, setValue] = useState('');
- *   const onChange = (inputText: string) => {
+ *
+ *   const onTextInputChange = (inputText: string) => {
  *     setValue(inputText);
  *     if (inputText === '') {
  *       setOptions([]);
@@ -63,32 +76,30 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
  *     }
  *
  *     if (inputText === '*') {
- *       setOptions(exampleTags); // exampleTags is an array of Tags
+ *       setOptions(allTags);
  *       return;
  *     }
  *
- *     // Simple filtering against exampleTags
- *     const filteredItems = exampleTags.filter((t) =>
- *       t.internalName.toLowerCase().includes(inputText.toLowerCase()),
+ *     // Simple filtering against allTags
+ *     const filteredItems = allTags.filter((t) =>
+ *       t.name.toLowerCase().includes(inputText.toLowerCase()),
  *     );
- *     return setOptions(filteredItems);
+ *     setOptions(filteredItems);
  *   };
-
+ *
  *   return (
  *     <>
  *       <div
  *         css={css`
- *             display: flex;
+ *           display: flex;
  *         `}
  *       >
  *         <TagAutocomplete
- *           onChange={onChange}
+ *           onTextInputChange={onTextInputChange}
  *           options={options}
  *           label="Tags"
  *           addTag={(tag) =>
- *               setSelectedTags((tags) => {
- *                   return [...tags, tag];
- *               })
+ *             setSelectedTags((tags) => [...tags, tag])
  *           }
  *           loading={false}
  *           placeholder={''}
@@ -96,7 +107,7 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
  *           value={value}
  *         />
  *         <select>
- *            option>All tags</option>
+ *           <option>All tags</option>
  *         </select>
  *       </div>
  *       <TagTable rows={selectedTags} filterRows={() => true} />
@@ -113,5 +124,5 @@ interface TagAutocompleteProps<T extends Tag = Tag> {
  *
  * This is currently still in testing phase, so a production implementation is not yet available.
  */
-export declare function TagAutocomplete<T extends Tag = Tag>({ addTag, loading, onChange, options, label, placeholder, disabled, value, 'data-testid': dataTestId, loadingIcon, theme, cssOverrides, }: TagAutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TagAutocomplete<T extends Tag = Tag>({ addTag, loading, onTextInputChange, options, label, placeholder, disabled, value, 'data-testid': dataTestId, loadingIcon, theme, cssOverrides, }: TagAutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/tag-picker/example-tags.d.ts

@@ -1,2 +1,2 @@
-import type { TagManagerObjectData } from './types';
-export declare const exampleTags: TagManagerObjectData[];
+import type { TagManagerObject } from './types';
+export declare const exampleTags: TagManagerObject[];

package/dist/types/components/tag-picker/styles.d.ts

@@ -1,11 +1,11 @@
 import type { SerializedStyles } from '@emotion/react';
-import { type ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
+import { type ComponentAutocomplete } from '../../styleD/build/typescript/component/autocomplete';
 import { type ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
 import type { DeepPartial } from '../../util/types';
-export declare const tagAutocompleteInputStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
-export declare const listboxStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
-export declare const listboxItemStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
-export declare const listboxInfoStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
+export declare const autocompleteInputStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
+export declare const listboxStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
+export declare const listboxItemStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
+export declare const listboxInfoStyles: (partialTheme?: DeepPartial<ComponentAutocomplete>) => SerializedStyles;
 export declare const tagTableHeadingStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
 export declare const tagTableCellStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
 export declare const tagTableRowStyles: (canDrag: boolean, partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;

package/dist/types/components/tag-picker/types.d.ts

@@ -1,14 +1,12 @@
 export type Tag = {
     id: number;
-    internalName: string;
+    name: string;
 };
 export type TagRow = Tag & {
     type: string;
-    section: {
-        name: string;
-    };
+    sectionName: string;
 };
-export type TagManagerObjectData = {
+export type TagManagerObject = {
     id: number;
     type: string;
     internalName: string;
@@ -63,3 +61,4 @@ export type TagManagerObjectData = {
     adBlockingLevel?: 'NONE' | 'SUGGEST' | 'FORCE' | undefined;
     contributionBlockingLevel?: 'NONE' | 'SUGGEST' | 'FORCE' | undefined;
 };
+export type TagManagerObjectData = TagRow & TagManagerObject;

package/dist/types/index.d.ts

@@ -5,10 +5,10 @@
 /**
  * editorial components tokens exports
  */
+export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete';
+export type { ComponentAutocomplete } from './styleD/build/typescript/component/autocomplete';
 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';
@@ -16,49 +16,49 @@ export type { ComponentUserMenu } from './styleD/build/typescript/component/user
 /**
  * design system components tokens exports
  */
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
+export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';
 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';
+export { componentCheckbox } from './styleD/build/typescript/component/checkbox';
+export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
-export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
-export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';
+export { componentForm } from './styleD/build/typescript/component/form';
+export type { ComponentForm } from './styleD/build/typescript/component/form';
+export { componentIcon } from './styleD/build/typescript/component/icon';
+export type { ComponentIcon } from './styleD/build/typescript/component/icon';
+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 { componentRadioGroup } from './styleD/build/typescript/component/radioGroup';
 export type { ComponentRadioGroup } from './styleD/build/typescript/component/radioGroup';
-export { componentCheckbox } from './styleD/build/typescript/component/checkbox';
-export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';
+export { componentSelect } from './styleD/build/typescript/component/select';
+export type { ComponentSelect } from './styleD/build/typescript/component/select';
 export { componentTextArea } from './styleD/build/typescript/component/textArea';
 export type { ComponentTextArea } from './styleD/build/typescript/component/textArea';
 export { componentTextInput } from './styleD/build/typescript/component/textInput';
 export type { ComponentTextInput } from './styleD/build/typescript/component/textInput';
-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';
+export { componentTypography } from './styleD/build/typescript/component/typography';
+export type { ComponentTypography } from './styleD/build/typescript/component/typography';
 /**
  * style dictionary exports - base
  */
 export { baseColors } from './styleD/build/typescript/base/colors';
 export type { BaseColors } from './styleD/build/typescript/base/colors';
-export { baseTypography } from './styleD/build/typescript/base/typography';
-export type { BaseTypography } from './styleD/build/typescript/base/typography';
-export { baseSpacing } from './styleD/build/typescript/base/spacing';
-export type { BaseSpacing } from './styleD/build/typescript/base/spacing';
-export { baseSizing } from './styleD/build/typescript/base/sizing';
-export type { BaseSizing } from './styleD/build/typescript/base/sizing';
 export { baseRadius } from './styleD/build/typescript/base/radius';
 export type { BaseRadius } from './styleD/build/typescript/base/radius';
+export { baseSizing } from './styleD/build/typescript/base/sizing';
+export type { BaseSizing } from './styleD/build/typescript/base/sizing';
+export { baseSpacing } from './styleD/build/typescript/base/spacing';
+export type { BaseSpacing } from './styleD/build/typescript/base/spacing';
+export { baseTypography } from './styleD/build/typescript/base/typography';
+export type { BaseTypography } from './styleD/build/typescript/base/typography';
 /**
  * style dictionary exports - semantic
  */

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

@@ -6,12 +6,16 @@ export declare const componentTopBar: {
     display: string;
     height: string;
     'justify-content': string;
-    border: string;
+    'border-right': string;
+    'border-top': string;
+    'border-bottom': string;
+    'border-left': string;
     spacer: {
         'margin-left': string;
     };
     collapsedNavMenu: {
         button: {
+            color: string;
             margin: string;
             padding: string;
             background: string;

package/dist/types/styleD/build/typescript/component/{tagAutocomplete.d.ts → autocomplete.d.ts}

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-export declare const componentTagAutocomplete: {
+export declare const componentAutocomplete: {
     input: {
         color: string;
         backgroundColor: string;
@@ -23,7 +23,10 @@ export declare const componentTagAutocomplete: {
             paddingX: string;
             backgroundHoverColor: string;
             backgroundFocusedColor: string;
+            color: string;
+            colorHover: string;
+            colorFocused: string;
         };
     };
 };
-export type ComponentTagAutocomplete = typeof componentTagAutocomplete;
+export type ComponentAutocomplete = typeof componentAutocomplete;

package/dist/types/tag-picker.d.ts

@@ -13,9 +13,10 @@
  * If you only need the built CSS (./component/tagTable.css, ./component/tagAutocomplete.css),
  * you don't need to install these.
  */
-export { TagTable } from './components/tag-picker/TagTable';
+export { Autocomplete } from './components/tag-picker/Autocomplete';
 export { TagAutocomplete } from './components/tag-picker/TagAutocomplete';
+export { TagTable } from './components/tag-picker/TagTable';
+export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete';
+export type { ComponentAutocomplete } from './styleD/build/typescript/component/autocomplete';
 export { componentTagTable } from './styleD/build/typescript/component/tagTable';
 export type { ComponentTagTable } from './styleD/build/typescript/component/tagTable';
-export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
-export type { ComponentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "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": {
@@ -368,6 +368,6 @@
     "test": "jest",
     "test:setup-e2e": "playwright install --with-deps",
     "test:e2e": "playwright test -c playwright-ct.config.ts",
-    "test:react-matrix": "./scripts/test-react-matrix.sh"
+    "test:react-matrix": "./scripts/test-deps-matrix.sh"
   }
 }