@guardian/stand 0.0.68 → 0.0.70

package/README.md

@@ -115,6 +115,7 @@ The following steps are for **developing the Stand library itself**.
    pnpm test:e2e             # end-to-end tests (Playwright)
    pnpm test:react-matrix    # compatibility matrix tests (see Compatibility)
    pnpm tsc                  # TypeScript type checking
+   pnpm tsc6                 # TypeScript 6 type checking
    pnpm lint                 # lint (pnpm lint:fix to auto-fix)
    pnpm format:check         # formatting check (pnpm format:fix to auto-fix)
    ```
@@ -146,7 +147,7 @@ Version sets for matrix testing live in `./scripts/deps-matrix-versions.json`. T
 1. Explicit env var (e.g. `REACT_VERSIONS="18.0.0 19.0.0"`)
 2. Value from `deps-matrix-versions.json`
 
-All three variables (`REACT_VERSIONS`, `EMOTION_VERSIONS`, `TS_VERSIONS`) must be defined after loading; otherwise the script exits with an error.
+All four variables (`REACT_VERSIONS`, `EMOTION_VERSIONS`, `TS_VERSIONS`, `RAC_VERSIONS`) must be defined after loading; otherwise the script exits with an error.
 
 Matrix generation in CI uses the same JSON file in the workflow `../.github/workflows/stand-component-library-deps-matrix.yml` to ensure consistency.
 

package/dist/TextInput.d.cts

@@ -1,5 +1,5 @@
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.cjs";
-import { TextInputTheme } from "./components/TextInput/styles.cjs";
+import { PartialTextInputTheme } from "./components/TextInput/styles.cjs";
 import { TextInputProps } from "./components/TextInput/types.cjs";
 import { TextInput } from "./components/TextInput/TextInput.cjs";
-export { type ComponentTextInput, TextInput, type TextInputProps, type TextInputTheme, componentTextInput };
+export { type ComponentTextInput, TextInput, type TextInputProps, type PartialTextInputTheme as TextInputTheme, componentTextInput };

package/dist/TextInput.d.ts

@@ -1,5 +1,5 @@
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.js";
-import { TextInputTheme } from "./components/TextInput/styles.js";
+import { PartialTextInputTheme } from "./components/TextInput/styles.js";
 import { TextInputProps } from "./components/TextInput/types.js";
 import { TextInput } from "./components/TextInput/TextInput.js";
-export { type ComponentTextInput, TextInput, type TextInputProps, type TextInputTheme, componentTextInput };
+export { type ComponentTextInput, TextInput, type TextInputProps, type PartialTextInputTheme as TextInputTheme, componentTextInput };

package/dist/TextListInput.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_textListInput = require("./styleD/build/typescript/component/textListInput.cjs");
+const require_TextListInput = require("./components/TextListInput/TextListInput.cjs");
+exports.TextListInput = require_TextListInput.TextListInput;
+exports.componentTextListInput = require_textListInput.componentTextListInput;

package/dist/TextListInput.d.cts

@@ -0,0 +1,5 @@
+import { ComponentTextListInput, componentTextListInput } from "./styleD/build/typescript/component/textListInput.cjs";
+import { PartialTextListInputTheme } from "./components/TextListInput/styles.cjs";
+import { TextListInputProps } from "./components/TextListInput/types.cjs";
+import { TextListInput } from "./components/TextListInput/TextListInput.cjs";
+export { type ComponentTextListInput, TextListInput, type TextListInputProps, type PartialTextListInputTheme as TextListInputTheme, componentTextListInput };

package/dist/TextListInput.d.ts

@@ -0,0 +1,5 @@
+import { ComponentTextListInput, componentTextListInput } from "./styleD/build/typescript/component/textListInput.js";
+import { PartialTextListInputTheme } from "./components/TextListInput/styles.js";
+import { TextListInputProps } from "./components/TextListInput/types.js";
+import { TextListInput } from "./components/TextListInput/TextListInput.js";
+export { type ComponentTextListInput, TextListInput, type TextListInputProps, type PartialTextListInputTheme as TextListInputTheme, componentTextListInput };

package/dist/TextListInput.js

@@ -0,0 +1,3 @@
+import { componentTextListInput } from "./styleD/build/typescript/component/textListInput.js";
+import { TextListInput } from "./components/TextListInput/TextListInput.js";
+export { TextListInput, componentTextListInput };

package/dist/components/Icon/types.d.cts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MaterialSymbol } from "../../fonts/materialSymbolsTypes.cjs";
 import { DefaultPropsWithChildren } from "../../util/types.cjs";
 import { IconTheme } from "./Styles.cjs";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MaterialSymbol } from "../../fonts/materialSymbolsTypes.js";
 import { DefaultPropsWithChildren } from "../../util/types.js";
 import { IconTheme } from "./Styles.js";

package/dist/components/Menu/types.d.cts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DefaultProps, DefaultPropsWithChildren } from "../../util/types.cjs";
 import { IconProps } from "../Icon/types.cjs";
 import { MenuItemTheme, MenuPopoverTheme, MenuSectionTheme, MenuSeparatorTheme, MenuTheme } from "./styles.cjs";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DefaultProps, DefaultPropsWithChildren } from "../../util/types.js";
 import { IconProps } from "../Icon/types.js";
 import { MenuItemTheme, MenuPopoverTheme, MenuSectionTheme, MenuSeparatorTheme, MenuTheme } from "./styles.js";

package/dist/components/TextInput/styles.d.cts

@@ -1,8 +1,9 @@
-import { Prettify } from "../../util/types.cjs";
+import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentTextInput } from "../../styleD/build/typescript/component/textInput.cjs";
 import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/TextInput/styles.d.ts
 type TextInputTheme = Prettify<ComponentTextInput>;
+type PartialTextInputTheme = Prettify<DeepPartial<ComponentTextInput>>;
 //#endregion
-export { TextInputTheme };
+export { PartialTextInputTheme, TextInputTheme };

package/dist/components/TextInput/styles.d.ts

@@ -1,8 +1,9 @@
-import { Prettify } from "../../util/types.js";
+import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentTextInput } from "../../styleD/build/typescript/component/textInput.js";
 import "./types.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/TextInput/styles.d.ts
 type TextInputTheme = Prettify<ComponentTextInput>;
+type PartialTextInputTheme = Prettify<DeepPartial<ComponentTextInput>>;
 //#endregion
-export { TextInputTheme };
+export { PartialTextInputTheme, TextInputTheme };

package/dist/components/TextListInput/TextListInput.cjs

@@ -0,0 +1,81 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_IconButton = require("../IconButton/IconButton.cjs");
+const require_Badge = require("../Badge/Badge.cjs");
+const require_Button = require("../Button/Button.cjs");
+const require_InlineMessage = require("../InlineMessage/InlineMessage.cjs");
+const require_TextInput = require("../TextInput/TextInput.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/TextListInput/TextListInput.tsx
+const TextListInput = ({ label, size = "md", placeholder, initialData = [], errorMessage, onChange, theme = {}, cssOverrides, className }) => {
+	const [textListItems, setTextListItems] = (0, react.useState)(initialData);
+	const addItem = () => {
+		const newItems = [...textListItems, ""];
+		setTextListItems(newItems);
+		onChange(newItems);
+	};
+	const removeItem = (index) => {
+		const newItems = [...textListItems];
+		newItems.splice(index, 1);
+		setTextListItems(newItems);
+		onChange(newItems);
+	};
+	const updateValue = (index, value) => {
+		const newItems = [...textListItems];
+		newItems[index] = value;
+		setTextListItems(newItems);
+		onChange(newItems);
+	};
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTextListInputTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("fieldset", {
+		css: cssOverrides,
+		className,
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("legend", {
+			css: require_styles.labelStyles(mergedTheme),
+			children: [label, textListItems.length > 0 && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_Badge.Badge, {
+				color: "grey",
+				size: "xs",
+				children: [
+					textListItems.length,
+					" item",
+					textListItems.length > 1 ? "s" : ""
+				]
+			})]
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: require_styles.columnStyles(mergedTheme),
+			children: [
+				textListItems.map((item, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+					css: require_styles.rowStyles(mergedTheme),
+					children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TextInput.TextInput, {
+						value: item,
+						size,
+						placeholder,
+						"aria-label": `${label} item`,
+						onChange: (value) => updateValue(index, value),
+						theme: { shared: { marginTop: "0" } }
+					}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+						variant: "tertiary",
+						size,
+						ariaLabel: "Remove item",
+						onClick: () => removeItem(index),
+						children: "remove"
+					})]
+				}, index)),
+				errorMessage && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_InlineMessage.InlineMessage, {
+					level: "error",
+					children: errorMessage
+				}),
+				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Button.Button, {
+					variant: "tertiary",
+					size: "xs",
+					icon: "add",
+					onClick: addItem,
+					children: "Add new item"
+				}) })
+			]
+		})]
+	});
+};
+//#endregion
+exports.TextListInput = TextListInput;

package/dist/components/TextListInput/TextListInput.d.cts

@@ -0,0 +1,5 @@
+import { TextListInputProps } from "./types.cjs";
+//#region src/components/TextListInput/TextListInput.d.ts
+declare const TextListInput: ({ label, size, placeholder, initialData, errorMessage, onChange, theme, cssOverrides, className }: TextListInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TextListInput };

package/dist/components/TextListInput/TextListInput.d.ts

@@ -0,0 +1,5 @@
+import { TextListInputProps } from "./types.js";
+//#region src/components/TextListInput/TextListInput.d.ts
+declare const TextListInput: ({ label, size, placeholder, initialData, errorMessage, onChange, theme, cssOverrides, className }: TextListInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TextListInput };

package/dist/components/TextListInput/TextListInput.js

@@ -0,0 +1,81 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Badge } from "../Badge/Badge.js";
+import { Button } from "../Button/Button.js";
+import { InlineMessage } from "../InlineMessage/InlineMessage.js";
+import { TextInput } from "../TextInput/TextInput.js";
+import { columnStyles, defaultTextListInputTheme, labelStyles, rowStyles } from "./styles.js";
+import { useState } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/TextListInput/TextListInput.tsx
+const TextListInput = ({ label, size = "md", placeholder, initialData = [], errorMessage, onChange, theme = {}, cssOverrides, className }) => {
+	const [textListItems, setTextListItems] = useState(initialData);
+	const addItem = () => {
+		const newItems = [...textListItems, ""];
+		setTextListItems(newItems);
+		onChange(newItems);
+	};
+	const removeItem = (index) => {
+		const newItems = [...textListItems];
+		newItems.splice(index, 1);
+		setTextListItems(newItems);
+		onChange(newItems);
+	};
+	const updateValue = (index, value) => {
+		const newItems = [...textListItems];
+		newItems[index] = value;
+		setTextListItems(newItems);
+		onChange(newItems);
+	};
+	const mergedTheme = mergeDeep(defaultTextListInputTheme, theme);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		css: cssOverrides,
+		className,
+		children: [/* @__PURE__ */ jsxs("legend", {
+			css: labelStyles(mergedTheme),
+			children: [label, textListItems.length > 0 && /* @__PURE__ */ jsxs(Badge, {
+				color: "grey",
+				size: "xs",
+				children: [
+					textListItems.length,
+					" item",
+					textListItems.length > 1 ? "s" : ""
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			css: columnStyles(mergedTheme),
+			children: [
+				textListItems.map((item, index) => /* @__PURE__ */ jsxs("div", {
+					css: rowStyles(mergedTheme),
+					children: [/* @__PURE__ */ jsx(TextInput, {
+						value: item,
+						size,
+						placeholder,
+						"aria-label": `${label} item`,
+						onChange: (value) => updateValue(index, value),
+						theme: { shared: { marginTop: "0" } }
+					}), /* @__PURE__ */ jsx(IconButton, {
+						variant: "tertiary",
+						size,
+						ariaLabel: "Remove item",
+						onClick: () => removeItem(index),
+						children: "remove"
+					})]
+				}, index)),
+				errorMessage && /* @__PURE__ */ jsx(InlineMessage, {
+					level: "error",
+					children: errorMessage
+				}),
+				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+					variant: "tertiary",
+					size: "xs",
+					icon: "add",
+					onClick: addItem,
+					children: "Add new item"
+				}) })
+			]
+		})]
+	});
+};
+//#endregion
+export { TextListInput };

package/dist/components/TextListInput/styles.cjs

@@ -0,0 +1,28 @@
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_textListInput = require("../../styleD/build/typescript/component/textListInput.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/TextListInput/styles.ts
+const defaultTextListInputTheme = require_textListInput.componentTextListInput;
+const labelStyles = (theme) => _emotion_react.css`
+	display: flex;
+	align-items: center;
+	gap: ${theme.label.gap};
+	color: ${theme.label.color};
+	${require_typography.convertTypographyToEmotionStringStyle(theme.label.typography)}
+`;
+const columnStyles = (theme) => _emotion_react.css`
+	display: flex;
+	flex-direction: column;
+	gap: ${theme.column.gap};
+	margin-top: ${theme.column.marginTop};
+`;
+const rowStyles = (theme) => _emotion_react.css`
+	display: flex;
+	align-items: flex-start;
+	gap: ${theme.row.gap};
+`;
+//#endregion
+exports.columnStyles = columnStyles;
+exports.defaultTextListInputTheme = defaultTextListInputTheme;
+exports.labelStyles = labelStyles;
+exports.rowStyles = rowStyles;

package/dist/components/TextListInput/styles.d.cts

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentTextListInput } from "../../styleD/build/typescript/component/textListInput.cjs";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/TextListInput/styles.d.ts
+type TextListInputTheme = Prettify<ComponentTextListInput>;
+type PartialTextListInputTheme = Prettify<DeepPartial<TextListInputTheme>>;
+//#endregion
+export { PartialTextListInputTheme, TextListInputTheme };

package/dist/components/TextListInput/styles.d.ts

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentTextListInput } from "../../styleD/build/typescript/component/textListInput.js";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/TextListInput/styles.d.ts
+type TextListInputTheme = Prettify<ComponentTextListInput>;
+type PartialTextListInputTheme = Prettify<DeepPartial<TextListInputTheme>>;
+//#endregion
+export { PartialTextListInputTheme, TextListInputTheme };

package/dist/components/TextListInput/styles.js

@@ -0,0 +1,25 @@
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { componentTextListInput } from "../../styleD/build/typescript/component/textListInput.js";
+import { css } from "@emotion/react";
+//#region src/components/TextListInput/styles.ts
+const defaultTextListInputTheme = componentTextListInput;
+const labelStyles = (theme) => css`
+	display: flex;
+	align-items: center;
+	gap: ${theme.label.gap};
+	color: ${theme.label.color};
+	${convertTypographyToEmotionStringStyle(theme.label.typography)}
+`;
+const columnStyles = (theme) => css`
+	display: flex;
+	flex-direction: column;
+	gap: ${theme.column.gap};
+	margin-top: ${theme.column.marginTop};
+`;
+const rowStyles = (theme) => css`
+	display: flex;
+	align-items: flex-start;
+	gap: ${theme.row.gap};
+`;
+//#endregion
+export { columnStyles, defaultTextListInputTheme, labelStyles, rowStyles };

package/dist/components/TextListInput/types.d.cts

@@ -0,0 +1,33 @@
+import { DefaultProps } from "../../util/types.cjs";
+import { PartialTextInputTheme } from "../TextInput/styles.cjs";
+import "../../TextInput.cjs";
+import { TextListInputTheme } from "./styles.cjs";
+//#region src/components/TextListInput/types.d.ts
+type TextListInputProps = DefaultProps<TextListInputTheme> & {
+  /**
+   * Label text for text list group
+   */
+  label: string;
+  /**
+   * Size of text inputs in the group
+   */
+  size?: keyof Omit<PartialTextInputTheme, 'shared'>;
+  /**
+   * Temporary text that occupies the text input when it is empty
+   */
+  placeholder?: string;
+  /**
+   * Initial data to populate text list with (optional)
+   */
+  initialData?: string[];
+  /**
+   * Error message to display below text list (optional)
+   */
+  errorMessage?: string;
+  /**
+   * Function called when values of text inputs changes
+   */
+  onChange: (values: string[]) => void;
+};
+//#endregion
+export { TextListInputProps };

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

@@ -0,0 +1,33 @@
+import { DefaultProps } from "../../util/types.js";
+import { PartialTextInputTheme } from "../TextInput/styles.js";
+import "../../TextInput.js";
+import { TextListInputTheme } from "./styles.js";
+//#region src/components/TextListInput/types.d.ts
+type TextListInputProps = DefaultProps<TextListInputTheme> & {
+  /**
+   * Label text for text list group
+   */
+  label: string;
+  /**
+   * Size of text inputs in the group
+   */
+  size?: keyof Omit<PartialTextInputTheme, 'shared'>;
+  /**
+   * Temporary text that occupies the text input when it is empty
+   */
+  placeholder?: string;
+  /**
+   * Initial data to populate text list with (optional)
+   */
+  initialData?: string[];
+  /**
+   * Error message to display below text list (optional)
+   */
+  errorMessage?: string;
+  /**
+   * Function called when values of text inputs changes
+   */
+  onChange: (values: string[]) => void;
+};
+//#endregion
+export { TextListInputProps };

package/dist/components/TopBar/TopBarItem/types.d.cts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DefaultProps } from "../../../util/types.cjs";
 import { TopBarItemTheme } from "./styles.cjs";
 //#region src/components/TopBar/TopBarItem/types.d.ts

package/dist/components/TopBar/TopBarItem/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DefaultProps } from "../../../util/types.js";
 import { TopBarItemTheme } from "./styles.js";
 //#region src/components/TopBar/TopBarItem/types.d.ts

package/dist/index.cjs

@@ -31,6 +31,7 @@ const require_typography = require("./styleD/build/typescript/component/typograp
 const require_tabs = require("./styleD/build/typescript/component/tabs.cjs");
 const require_userFeedbackSummary = require("./styleD/build/typescript/component/userFeedbackSummary.cjs");
 const require_sidebarStepperNavigation = require("./styleD/build/typescript/component/sidebarStepperNavigation.cjs");
+const require_textListInput = require("./styleD/build/typescript/component/textListInput.cjs");
 const require_colors = require("./styleD/build/typescript/base/colors.cjs");
 const require_radius = require("./styleD/build/typescript/base/radius.cjs");
 const require_sizing = require("./styleD/build/typescript/base/sizing.cjs");
@@ -74,6 +75,7 @@ exports.componentTabs = require_tabs.componentTabs;
 exports.componentTagTable = require_tagTable.componentTagTable;
 exports.componentTextArea = require_textArea.componentTextArea;
 exports.componentTextInput = require_textInput.componentTextInput;
+exports.componentTextListInput = require_textListInput.componentTextListInput;
 exports.componentTooltip = require_tooltip.componentTooltip;
 exports.componentTopBar = require_topBar.componentTopBar;
 exports.componentTypography = require_typography.componentTypography;

package/dist/index.d.cts

@@ -27,6 +27,7 @@ import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typ
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.cjs";
 import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/component/textArea.cjs";
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.cjs";
+import { ComponentTextListInput, componentTextListInput } from "./styleD/build/typescript/component/textListInput.cjs";
 import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.cjs";
 import { ComponentTopBar, componentTopBar } from "./styleD/build/typescript/component/topBar.cjs";
 import { ComponentUserFeedbackSummary, componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.cjs";
@@ -42,4 +43,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -27,6 +27,7 @@ import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typ
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.js";
 import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/component/textArea.js";
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.js";
+import { ComponentTextListInput, componentTextListInput } from "./styleD/build/typescript/component/textListInput.js";
 import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.js";
 import { ComponentTopBar, componentTopBar } from "./styleD/build/typescript/component/topBar.js";
 import { ComponentUserFeedbackSummary, componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.js";
@@ -42,4 +43,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -30,6 +30,7 @@ import { componentTypography } from "./styleD/build/typescript/component/typogra
 import { componentTabs } from "./styleD/build/typescript/component/tabs.js";
 import { componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.js";
 import { componentSidebarStepperNavigation } from "./styleD/build/typescript/component/sidebarStepperNavigation.js";
+import { componentTextListInput } from "./styleD/build/typescript/component/textListInput.js";
 import { baseColors } from "./styleD/build/typescript/base/colors.js";
 import { baseRadius } from "./styleD/build/typescript/base/radius.js";
 import { baseSizing } from "./styleD/build/typescript/base/sizing.js";
@@ -42,4 +43,4 @@ import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

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

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-text-list-input-label-color: #000000;
+	--component-text-list-input-label-gap: 0.5rem;
+	--component-text-list-input-label-typography-font: normal 700 1rem/1.15
+		'Open Sans';
+	--component-text-list-input-label-typography-letter-spacing: -0.03125rem;
+	--component-text-list-input-label-typography-font-width: 95;
+	--component-text-list-input-column-gap: 1rem;
+	--component-text-list-input-column-margin-top: 0.5rem;
+	--component-text-list-input-row-gap: 0.5rem;
+}

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

@@ -0,0 +1,22 @@
+//#region src/styleD/build/typescript/component/textListInput.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTextListInput = {
+	label: {
+		color: "#000000",
+		gap: "0.5rem",
+		typography: {
+			font: "normal 700 1rem/1.15 Open Sans",
+			letterSpacing: "-0.03125rem",
+			fontWidth: 95
+		}
+	},
+	column: {
+		gap: "1rem",
+		marginTop: "0.5rem"
+	},
+	row: { gap: "0.5rem" }
+};
+//#endregion
+exports.componentTextListInput = componentTextListInput;

package/dist/styleD/build/typescript/component/textListInput.d.cts

@@ -0,0 +1,25 @@
+//#region src/styleD/build/typescript/component/textListInput.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTextListInput: {
+  label: {
+    color: string;
+    gap: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+  column: {
+    gap: string;
+    marginTop: string;
+  };
+  row: {
+    gap: string;
+  };
+};
+type ComponentTextListInput = typeof componentTextListInput;
+//#endregion
+export { ComponentTextListInput, componentTextListInput };

package/dist/styleD/build/typescript/component/textListInput.d.ts

@@ -0,0 +1,25 @@
+//#region src/styleD/build/typescript/component/textListInput.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTextListInput: {
+  label: {
+    color: string;
+    gap: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+  column: {
+    gap: string;
+    marginTop: string;
+  };
+  row: {
+    gap: string;
+  };
+};
+type ComponentTextListInput = typeof componentTextListInput;
+//#endregion
+export { ComponentTextListInput, componentTextListInput };

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

@@ -0,0 +1,22 @@
+//#region src/styleD/build/typescript/component/textListInput.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTextListInput = {
+	label: {
+		color: "#000000",
+		gap: "0.5rem",
+		typography: {
+			font: "normal 700 1rem/1.15 Open Sans",
+			letterSpacing: "-0.03125rem",
+			fontWidth: 95
+		}
+	},
+	column: {
+		gap: "1rem",
+		marginTop: "0.5rem"
+	},
+	row: { gap: "0.5rem" }
+};
+//#endregion
+export { componentTextListInput };

package/dist/util/types.d.cts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SerializedStyles } from "@emotion/react";
 //#region src/util/types.d.ts
 interface DefaultProps<ThemeType, ClassNameType = undefined> {

package/dist/util/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SerializedStyles } from "@emotion/react";
 //#region src/util/types.d.ts
 interface DefaultProps<ThemeType, ClassNameType = undefined> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -377,6 +377,16 @@
         "default": "./dist/UserFeedbackSummary.cjs"
       }
     },
+    "./TextListInput": {
+      "import": {
+        "types": "./dist/TextListInput.d.ts",
+        "default": "./dist/TextListInput.js"
+      },
+      "require": {
+        "types": "./dist/TextListInput.d.cts",
+        "default": "./dist/TextListInput.cjs"
+      }
+    },
     "./utils": {
       "import": {
         "types": "./dist/utils.d.ts",
@@ -435,7 +445,8 @@
     "./component/tabs.css": "./dist/styleD/build/css/component/tabs.css",
     "./component/tooltip.css": "./dist/styleD/build/css/component/tooltip.css",
     "./component/userFeedbackSummary.css": "./dist/styleD/build/css/component/userFeedbackSummary.css",
-    "./component/sidebarStepperNavigation.css": "./dist/styleD/build/css/component/sidebarStepperNavigation.css"
+    "./component/sidebarStepperNavigation.css": "./dist/styleD/build/css/component/sidebarStepperNavigation.css",
+    "./component/textListInput.css": "./dist/styleD/build/css/component/textListInput.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -552,6 +563,9 @@
       ],
       "UserFeedbackSummary": [
         "./dist/UserFeedbackSummary.d.ts"
+      ],
+      "TextListInput": [
+        "./dist/TextListInput.d.ts"
       ]
     }
   },
@@ -564,10 +578,10 @@
     "@codesandbox/sandpack-react": "2.20.0",
     "@emotion/react": "11.11.4",
     "@figma/rest-api-spec": "0.41.0",
-    "@guardian/eslint-config": "15.0.0",
-    "@guardian/prettier": "10.0.0",
+    "@guardian/eslint-config": "16.0.0",
+    "@guardian/prettier": "11.0.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
-    "@guardian/tsconfig": "1.0.1",
+    "@guardian/tsconfig": "2.0.0",
     "@internationalized/date": "3.12.1",
     "@material-design-icons/svg": "0.14.15",
     "@playwright/experimental-ct-react17": "1.62.1",
@@ -582,6 +596,7 @@
     "@types/node": "24.10.1",
     "@types/react": "17.0.76",
     "@types/react-dom": "17.0.25",
+    "@typescript/typescript6": "6.0.2",
     "change-case": "5.4.4",
     "eslint": "9.39.3",
     "eslint-plugin-check-file": "3.3.2",
@@ -626,7 +641,7 @@
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
     "react-aria-components": ">= 1.14.0 <= 1.20.0",
     "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
-    "typescript": ">=5.0.0 <=5.9.3"
+    "typescript": ">=5.0.0 <7.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {
@@ -686,6 +701,7 @@
     "test:e2e": "playwright test -c playwright-ct.config.ts",
     "test:react-matrix": "./scripts/test-deps-matrix.sh",
     "test:setup-e2e": "playwright install --with-deps",
-    "tsc": "tsc"
+    "tsc": "tsc",
+    "tsc6": "tsc6"
   }
 }