@guardian/stand 0.0.20 → 0.0.21

package/dist/components/menu/Menu.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var focus = require('@react-aria/focus');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
@@ -83,15 +82,10 @@ function MenuItem({
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultMenuItemTheme, theme);
   const textValue = props.textValue ?? (typeof label === "string" ? label : void 0);
-  const { isFocusVisible, focusProps } = focus.useFocusRing();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.MenuItem,
     {
-      ...focusProps,
-      css: [
-        styles.menuItemStyles(mergedTheme, { description }, isFocusVisible),
-        cssOverrides
-      ],
+      css: [styles.menuItemStyles(mergedTheme, { description }), cssOverrides],
       ...props,
       textValue,
       children: ({ isSelected, selectionMode }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/components/menu/Menu.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { useFocusRing } from '@react-aria/focus';
 import React from 'react';
 import { MenuTrigger, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, Header, Separator, Popover as Popover$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
@@ -36,14 +35,7 @@ function MenuSection({ name, size = "md", theme = {}, cssOverrides, children, ..
 function MenuItem({ label, description, aside, icon, size = "md", theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultMenuItemTheme, theme);
   const textValue = props.textValue ?? (typeof label === "string" ? label : void 0);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  return jsx(
-    MenuItem$1,
-    { ...focusProps, css: [
-      menuItemStyles(mergedTheme, { description }, isFocusVisible),
-      cssOverrides
-    ], ...props, textValue, children: ({ isSelected, selectionMode }) => jsxs(Fragment, { children: [icon && selectionMode === "none" ? jsx(Icon, { size, cssOverrides: menuItemIconStyles(mergedTheme, { size }), children: icon }) : null, isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box_outline_blank", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_checked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_unchecked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, jsx("div", { css: menuItemLabelStyles(mergedTheme), children: label }), description && jsx("div", { css: menuItemDescriptionStyles(mergedTheme), children: description }), aside && jsx("div", { css: menuItemAsideStyles(mergedTheme), children: aside })] }) }
-  );
+  return jsx(MenuItem$1, { css: [menuItemStyles(mergedTheme, { description }), cssOverrides], ...props, textValue, children: ({ isSelected, selectionMode }) => jsxs(Fragment, { children: [icon && selectionMode === "none" ? jsx(Icon, { size, cssOverrides: menuItemIconStyles(mergedTheme, { size }), children: icon }) : null, isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box_outline_blank", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_checked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_unchecked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, jsx("div", { css: menuItemLabelStyles(mergedTheme), children: label }), description && jsx("div", { css: menuItemDescriptionStyles(mergedTheme), children: description }), aside && jsx("div", { css: menuItemAsideStyles(mergedTheme), children: aside })] }) });
 }
 function Menu({ theme = {}, size = "md", popoverProps, menuTriggerProps, children, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultMenuTheme, theme);

package/dist/components/menu/styles.cjs

@@ -24,7 +24,7 @@ const menuSectionHeaderStyles = (theme, { size }) => react.css`
 	${typography.convertTypographyToEmotionStringStyle(theme.header[size].typography)}
 `;
 const defaultMenuItemTheme = menu.componentMenu.menuItem;
-const menuItemStyles = (theme, { description }, isFocusVisible = false) => react.css`
+const menuItemStyles = (theme, { description }) => react.css`
 	display: ${theme.shared.display};
 	grid-template-columns: ${theme.shared["grid-template-columns"]};
 	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
@@ -37,17 +37,31 @@ const menuItemStyles = (theme, { description }, isFocusVisible = false) => react
 	&:last-child {
 		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
 	}
-	&[data-hovered],
-	&:hover {
-		background: ${theme.shared[":hover"]["background-color"]};
+
+	/* Hovering adds data-focused and the item stays focused after hovering away */
+	&[data-focused] {
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+	&[data-hovered] {
+		outline: ${theme.shared[":hover"].outline};
+	}
+
+	/* Override default browser focus behaviour */
+	:focus-visible {
+		outline: none;
+	}
+
+	/* focus visible used for keyboard focus */
+	&[data-focus-visible] {
+		outline: ${theme.shared[":focus-visible"]["outline"]};
+		outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+
+	/* Must be last to take precedence */
+	&[data-pressed] {
+		background-color: ${theme.shared[":pressed"]["background-color"]};
 	}
-	${isFocusVisible ? react.css`
-				outline: ${theme.shared[":focus-visible"]["outline"]};
-				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
-				background: ${theme.shared[":hover"]["background-color"]};
-			` : react.css`
-				outline: none;
-			`}
 `;
 const menuItemIconStyles = (theme, { size }) => react.css`
 	grid-area: ${theme.shared.icon["grid-area"]};

package/dist/components/menu/styles.js

@@ -22,7 +22,7 @@ const menuSectionHeaderStyles = (theme, { size }) => css`
 	${convertTypographyToEmotionStringStyle(theme.header[size].typography)}
 `;
 const defaultMenuItemTheme = componentMenu.menuItem;
-const menuItemStyles = (theme, { description }, isFocusVisible = false) => css`
+const menuItemStyles = (theme, { description }) => css`
 	display: ${theme.shared.display};
 	grid-template-columns: ${theme.shared["grid-template-columns"]};
 	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
@@ -35,17 +35,31 @@ const menuItemStyles = (theme, { description }, isFocusVisible = false) => css`
 	&:last-child {
 		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
 	}
-	&[data-hovered],
-	&:hover {
-		background: ${theme.shared[":hover"]["background-color"]};
+
+	/* Hovering adds data-focused and the item stays focused after hovering away */
+	&[data-focused] {
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+	&[data-hovered] {
+		outline: ${theme.shared[":hover"].outline};
+	}
+
+	/* Override default browser focus behaviour */
+	:focus-visible {
+		outline: none;
+	}
+
+	/* focus visible used for keyboard focus */
+	&[data-focus-visible] {
+		outline: ${theme.shared[":focus-visible"]["outline"]};
+		outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+
+	/* Must be last to take precedence */
+	&[data-pressed] {
+		background-color: ${theme.shared[":pressed"]["background-color"]};
 	}
-	${isFocusVisible ? css`
-				outline: ${theme.shared[":focus-visible"]["outline"]};
-				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
-				background: ${theme.shared[":hover"]["background-color"]};
-			` : css`
-				outline: none;
-			`}
 `;
 const menuItemIconStyles = (theme, { size }) => css`
 	grid-area: ${theme.shared.icon["grid-area"]};

package/dist/components/text-input/TextInput.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Form = require('../form/Form.cjs');
+var styles = require('./styles.cjs');
+
+function TextInput({
+  size = "md",
+  isInvalid = false,
+  theme = {},
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTextInputTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form.FormInputContainer,
+    {
+      as: reactAriaComponents.TextField,
+      size,
+      isInvalid,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Input, { css: styles.textInputStyles(mergedTheme, { size, isInvalid }) })
+    }
+  );
+}
+
+exports.TextInput = TextInput;

package/dist/components/text-input/TextInput.js

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { TextField, Input } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { FormInputContainer } from '../form/Form.js';
+import { textInputStyles, defaultTextInputTheme } from './styles.js';
+
+function TextInput({ size = "md", isInvalid = false, theme = {}, ...props }) {
+  const mergedTheme = mergeDeep(defaultTextInputTheme, theme);
+  return jsx(FormInputContainer, { as: TextField, size, isInvalid, ...props, children: jsx(Input, { css: textInputStyles(mergedTheme, { size, isInvalid }) }) });
+}
+
+export { TextInput };

package/dist/components/text-input/styles.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var react = require('@emotion/react');
+var textInput = require('../../styleD/build/typescript/component/textInput.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultTextInputTheme = textInput.componentTextInput;
+const textInputStyles = (theme, { size, isInvalid }) => {
+  return react.css`
+		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+		background-color: ${theme.shared["background-color"]};
+		border-radius: ${theme.shared["border-radius"]};
+		border: ${theme.shared.border};
+		color: ${theme.shared.color};
+		cursor: ${theme.shared.cursor};
+		height: ${theme[size].height};
+		margin-top: ${theme.shared["margin-top"]};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		&[data-disabled] {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+		}
+
+		${isInvalid && react.css`
+			border: ${theme.shared.error.border};
+		`}
+	`;
+};
+
+exports.defaultTextInputTheme = defaultTextInputTheme;
+exports.textInputStyles = textInputStyles;

package/dist/components/text-input/styles.js

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import { componentTextInput } from '../../styleD/build/typescript/component/textInput.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultTextInputTheme = componentTextInput;
+const textInputStyles = (theme, { size, isInvalid }) => {
+  return css`
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
+		background-color: ${theme.shared["background-color"]};
+		border-radius: ${theme.shared["border-radius"]};
+		border: ${theme.shared.border};
+		color: ${theme.shared.color};
+		cursor: ${theme.shared.cursor};
+		height: ${theme[size].height};
+		margin-top: ${theme.shared["margin-top"]};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		&[data-disabled] {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+		}
+
+		${isInvalid && css`
+			border: ${theme.shared.error.border};
+		`}
+	`;
+};
+
+export { defaultTextInputTheme, textInputStyles };

package/dist/index.cjs

@@ -9,6 +9,7 @@ var button = require('./styleD/build/typescript/component/button.cjs');
 var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
+var textInput = require('./styleD/build/typescript/component/textInput.cjs');
 var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
 var select = require('./styleD/build/typescript/component/select.cjs');
 var menu = require('./styleD/build/typescript/component/menu.cjs');
@@ -35,6 +36,7 @@ exports.componentButton = button.componentButton;
 exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentTextInput = textInput.componentTextInput;
 exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentSelect = select.componentSelect;
 exports.componentMenu = menu.componentMenu;

package/dist/index.js

@@ -7,6 +7,7 @@ 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 { componentFavicon } from './styleD/build/typescript/component/favicon.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';

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

@@ -63,9 +63,11 @@
 	--component-menu-menu-item-shared-aside-typography-font-width: 95;
 	--component-menu-menu-item-shared-last-child-border-bottom: none;
 	--component-menu-menu-item-shared-hover-background-color: #f6f6f6;
+	--component-menu-menu-item-shared-hover-outline: none; /** Override outline focus styles on hover */
 	--component-menu-menu-item-shared-focus-visible-outline: 0.125rem solid
 		#0072a9;
 	--component-menu-menu-item-shared-focus-visible-outline-offset: -0.125rem;
+	--component-menu-menu-item-shared-pressed-background-color: #ededed;
 	--component-menu-menu-item-sm-icon-size: 1.125rem;
 	--component-menu-menu-item-sm-icon-line-height: 1.3;
 	--component-menu-menu-item-md-icon-size: 1.25rem;

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

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-text-input-shared-color: #000000;
+	--component-text-input-shared-cursor: text;
+	--component-text-input-shared-padding-top: 0;
+	--component-text-input-shared-padding-right: 0.75rem;
+	--component-text-input-shared-padding-bottom: 0;
+	--component-text-input-shared-padding-left: 0.75rem;
+	--component-text-input-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-text-input-shared-border-radius: 0.25rem;
+	--component-text-input-shared-border: 0.0625rem solid #545454;
+	--component-text-input-shared-background-color: #ffffff;
+	--component-text-input-shared-disabled-background-color: #ffffff;
+	--component-text-input-shared-disabled-cursor: not-allowed;
+	--component-text-input-shared-disabled-color: #999999;
+	--component-text-input-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-text-input-shared-error-border: 0.0625rem solid #b42a19;
+	--component-text-input-sm-height: 2rem;
+	--component-text-input-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
+	--component-text-input-sm-typography-letter-spacing: 0;
+	--component-text-input-sm-typography-font-width: 95;
+	--component-text-input-md-height: 2.5rem;
+	--component-text-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-text-input-md-typography-letter-spacing: 0;
+	--component-text-input-md-typography-font-width: 95;
+}

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

@@ -95,11 +95,15 @@ const componentMenu = {
         "border-bottom": "none"
       },
       ":hover": {
-        "background-color": "#f6f6f6"
+        "background-color": "#f6f6f6",
+        outline: "none"
       },
       ":focus-visible": {
         outline: "0.125rem solid #0072a9",
         "outline-offset": "-0.125rem"
+      },
+      ":pressed": {
+        "background-color": "#ededed"
       }
     },
     sm: {

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

@@ -93,11 +93,15 @@ const componentMenu = {
         "border-bottom": "none"
       },
       ":hover": {
-        "background-color": "#f6f6f6"
+        "background-color": "#f6f6f6",
+        outline: "none"
       },
       ":focus-visible": {
         outline: "0.125rem solid #0072a9",
         "outline-offset": "-0.125rem"
+      },
+      ":pressed": {
+        "background-color": "#ededed"
       }
     },
     sm: {

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

@@ -0,0 +1,45 @@
+'use strict';
+
+const componentTextInput = {
+  shared: {
+    color: "#000000",
+    cursor: "text",
+    padding: {
+      top: "0",
+      right: "0.75rem",
+      bottom: "0",
+      left: "0.75rem"
+    },
+    "margin-top": "0.5rem",
+    "border-radius": "0.25rem",
+    border: "0.0625rem solid #545454",
+    "background-color": "#ffffff",
+    disabled: {
+      backgroundColor: "#ffffff",
+      cursor: "not-allowed",
+      color: "#999999",
+      border: "0.0625rem solid #dcdcdc"
+    },
+    error: {
+      border: "0.0625rem solid #b42a19"
+    }
+  },
+  sm: {
+    height: "2rem",
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  md: {
+    height: "2.5rem",
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  }
+};
+
+exports.componentTextInput = componentTextInput;

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

@@ -0,0 +1,43 @@
+const componentTextInput = {
+  shared: {
+    color: "#000000",
+    cursor: "text",
+    padding: {
+      top: "0",
+      right: "0.75rem",
+      bottom: "0",
+      left: "0.75rem"
+    },
+    "margin-top": "0.5rem",
+    "border-radius": "0.25rem",
+    border: "0.0625rem solid #545454",
+    "background-color": "#ffffff",
+    disabled: {
+      backgroundColor: "#ffffff",
+      cursor: "not-allowed",
+      color: "#999999",
+      border: "0.0625rem solid #dcdcdc"
+    },
+    error: {
+      border: "0.0625rem solid #b42a19"
+    }
+  },
+  sm: {
+    height: "2rem",
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  md: {
+    height: "2.5rem",
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  }
+};
+
+export { componentTextInput };

package/dist/text-input.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var TextInput = require('./components/text-input/TextInput.cjs');
+var textInput = require('./styleD/build/typescript/component/textInput.cjs');
+
+
+
+exports.TextInput = TextInput.TextInput;
+exports.componentTextInput = textInput.componentTextInput;

package/dist/text-input.js

@@ -0,0 +1,2 @@
+export { TextInput } from './components/text-input/TextInput.js';
+export { componentTextInput } from './styleD/build/typescript/component/textInput.js';

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

@@ -13,7 +13,7 @@ export declare const menuSectionHeaderStyles: (theme: MenuSectionTheme, { size }
 export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
 export type PartialMenuItemTheme = DeepPartial<MenuItemTheme>;
 export declare const defaultMenuItemTheme: MenuItemTheme;
-export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>, isFocusVisible?: boolean) => SerializedStyles;
+export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>) => SerializedStyles;
 export declare const menuItemIconStyles: (theme: MenuItemTheme, { size }: Required<Pick<MenuItemProps, 'size'>>) => SerializedStyles;
 export declare const menuItemLabelStyles: (theme: MenuItemTheme) => SerializedStyles;
 export declare const menuItemDescriptionStyles: (theme: MenuItemTheme) => SerializedStyles;

package/dist/types/components/text-input/TextInput.d.ts

@@ -0,0 +1,2 @@
+import type { TextInputProps } from './types';
+export declare function TextInput({ size, isInvalid, theme, ...props }: TextInputProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/text-input/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "TextInput";
+export declare const componentTsx = "import { TextInput } from '@guardian/stand/text-input';\n\nexport const Component = () => (\n\t<>\n\t\t<TextInput\n\t\t\tlabel=\"Name\"\n\t\t\tdescription=\"This is a description for the text input.\"\n\t\t/>\n\n\t\t<TextInput\n\t\t\tsize=\"sm\"\n\t\t\tlabel=\"Username\"\n\t\t\tisInvalid\n\t\t\tdefaultValue=\"guardian_user\"\n\t\t\terror=\"Username is already taken\"\n\t\t/>\n\n\t\t<TextInput\n\t\t\tlabel=\"Password\"\n\t\t\tdescription=\"Showing a different type\"\n\t\t\ttype=\"password\"\n\t\t/>\n\n\t\t<TextInput label=\"Notes\" isDisabled defaultValue=\"Read only content\" />\n\t</>\n);\n";
+export declare const componentCss = "\n/* import the text input, form, inline message styles */\n@import '@guardian/stand/component/inlineMessage.css';\n@import '@guardian/stand/component/form.css';\n@import '@guardian/stand/component/textInput.css';\n\n/* inline message styles - error */\n.stand-inline-message {\n  display: var(--component-inline-message-shared-display);\n  align-items: var(--component-inline-message-shared-align-items);\n  gap: var(--component-inline-message-shared-gap);\n  font: var(--component-inline-message-shared-typography-font);\n  letter-spacing: var(\n    --component-inline-message-shared-typography-letter-spacing\n  );\n  font-variation-settings: \"wdth\"\n    var(--component-inline-message-shared-typography-font-width);\n}\n\n.stand-inline-message > .material-symbols {\n  font-size: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message > svg {\n  width: var(--component-inline-message-shared-icon-size);\n  height: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message-error {\n  color: var(--component-inline-message-error-color);\n  fill: var(--component-inline-message-error-color);\n}\n\n/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-form-input-container.sm {\n\tmax-width: var(--component-form-input-sm-container-max-width);\n}\n\n.stand-form-input-container.md {\n\tmax-width: var(--component-form-input-md-container-max-width);\n}\n\n.stand-form-input-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > label {\n\tcolor: var(--component-form-input-shared-label-disabled-color);\n}\n\n.stand-form-input-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > span.description {\n\tcolor: var(--component-form-input-shared-description-disabled-color);\n}\n\n/* text input styles */\n\n.stand-text-input {\n\tbackground-color: var(--component-text-input-shared-background-color);\n\tborder-radius: var(--component-text-input-shared-border-radius);\n\tborder: var(--component-text-input-shared-border);\n\tcolor: var(--component-text-input-shared-color);\n\tcursor: var(--component-text-input-shared-cursor);\n\tmargin-top: var(--component-text-input-shared-margin-top);\n\tpadding-top: var(--component-text-input-shared-padding-top);\n\tpadding-right: var(--component-text-input-shared-padding-right);\n\tpadding-bottom: var(--component-text-input-shared-padding-bottom);\n\tpadding-left: var(--component-text-input-shared-padding-left);\n}\n\n.stand-text-input[disabled] {\n\tbackground-color: var(--component-text-input-shared-disabled-background-color);\n\tborder: var(--component-text-input-shared-disabled-border);\n\tcolor: var(--component-text-input-shared-disabled-color);\n\tcursor: var(--component-text-input-shared-disabled-cursor);\n}\n\n.stand-text-input[data-invalid] {\n\tborder: var(--component-text-input-shared-error-border);\n}\n\n.stand-text-input.md {\n\theight: var(--component-text-input-md-height);\n\tfont: var(--component-text-input-md-typography-font);\n\tletter-spacing: var(--component-text-input-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-input-md-typography-font-width);\n}\n\n.stand-text-input.sm {\n\theight: var(--component-text-input-sm-height);\n\tfont: var(--component-text-input-sm-typography-font);\n\tletter-spacing: var(--component-text-input-sm-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-input-sm-typography-font-width);\n}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div class=\"stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text input.</span>\n\t\t<input id=\"name\" class=\"stand-text-input md\" type=\"text\" />\n\t</div>\n\t<div class=\"stand-form-input-container sm\">\n\t\t<label for=\"username\">Username</label>\n\t\t<input\n\t\t\tid=\"username\"\n\t\t\tclass=\"stand-text-input sm\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"guardian_user\"\n\t\t\tdata-invalid\n\t\t/>\n\t\t<span class=\"stand-inline-message stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n\t<div class=\"stand-form-input-container md\">\n\t\t<label for=\"password\">Password</label>\n\t\t<span class=\"description\">Showing a different type</span>\n\t\t<input id=\"password\" class=\"stand-text-input md\" type=\"password\" />\n\t</div>\n\t<div class=\"stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<input\n\t\t\tid=\"notes\"\n\t\t\tclass=\"stand-text-input md\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"Read only content\"\n\t\t\tdisabled\n\t\t/>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentTextInput, componentForm, componentInlineMessage } 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/* inline message styles - error */\n.js-stand-inline-message {\n  display: ${componentInlineMessage.shared.display};\n  align-items: ${componentInlineMessage.shared['align-items']};\n  gap: ${componentInlineMessage.shared.gap};\n  font: ${componentInlineMessage.shared.typography.font};\n  letter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n}\n\n.js-stand-inline-message > .material-symbols {\n  font-size: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message > svg {\n  width: ${componentInlineMessage.shared.icon.size};\n  height: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message-error {\n  color: ${componentInlineMessage.error.color};\n  fill: ${componentInlineMessage.error.color};\n}\n\n/* form input container styles */\n\n.js-stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container['flex-direction']};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-form-input-container.sm {\n\tmax-width: ${componentForm.input.sm.container['max-width']};\n}\n\n.js-stand-form-input-container.md {\n\tmax-width: ${componentForm.input.md.container['max-width']};\n}\n\n.js-stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > label {\n\tcolor: ${componentForm.input.shared.label.disabled.color};\n}\n\n.js-stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.typography.font};\n\tletter-spacing: ${componentForm.input.shared.description.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > span.description {\n\tcolor: ${componentForm.input.shared.description.disabled.color};\n}\n\n/* text input styles */\n\n.js-stand-text-input {\n\tbackground-color: ${componentTextInput.shared['background-color']};\n\tborder-radius: ${componentTextInput.shared['border-radius']};\n\tborder: ${componentTextInput.shared.border};\n\tcolor: ${componentTextInput.shared.color};\n\tcursor: ${componentTextInput.shared.cursor};\n\tmargin-top: ${componentTextInput.shared['margin-top']};\n\tpadding-top: ${componentTextInput.shared.padding.top};\n\tpadding-right: ${componentTextInput.shared.padding.right};\n\tpadding-bottom: ${componentTextInput.shared.padding.bottom};\n\tpadding-left: ${componentTextInput.shared.padding.left};\n}\n\n.js-stand-text-input[disabled] {\n\tbackground-color: ${componentTextInput.shared.disabled.backgroundColor};\n\tborder: ${componentTextInput.shared.disabled.border};\n\tcolor: ${componentTextInput.shared.disabled.color};\n\tcursor: ${componentTextInput.shared.disabled.cursor};\n}\n\n.js-stand-text-input[data-invalid] {\n\tborder: ${componentTextInput.shared.errorBorder};\n}\n\n.js-stand-text-input.md {\n\theight: ${componentTextInput.md.height};\n\tfont: ${componentTextInput.md.typography.font};\n\tletter-spacing: ${componentTextInput.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextInput.md.typography.fontWidth};\n}\n\n.js-stand-text-input.sm {\n\theight: ${componentTextInput.sm.height};\n\tfont: ${componentTextInput.sm.typography.font};\n\tletter-spacing: ${componentTextInput.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextInput.sm.typography.fontWidth};\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the button components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container flow-column\">\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"name\">Name</label>\n\t\t<span class=\"description\">This is a description for the text input.</span>\n\t\t<input id=\"name\" class=\"js-stand-text-input md\" type=\"text\" />\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\">\n\t\t<label for=\"username\">Username</label>\n\t\t<input\n\t\t\tid=\"username\"\n\t\t\tclass=\"js-stand-text-input sm\"\n\t\t\ttype=\"text\"\n\t\t/>\n\t\t<span class=\"js-stand-inline-message js-stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label for=\"password\">Password</label>\n\t\t<span class=\"description\">Showing a different type</span>\n\t\t<input id=\"password\" class=\"js-stand-text-input md\" type=\"password\" />\n\t</div>\n\t<div class=\"js-stand-form-input-container md\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<input\n\t\t\tid=\"notes\"\n\t\t\tclass=\"js-stand-text-input md\"\n\t\t\ttype=\"text\"\n\t\t\tvalue=\"Read only content\"\n\t\t\tdisabled\n\t\t />\n\t</div>\n</div>\n`;\n";

package/dist/types/components/text-input/styles.d.ts

@@ -0,0 +1,7 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentTextInput } from '../../styleD/build/typescript/component/textInput';
+import type { Prettify } from '../../util/types';
+import type { TextInputProps } from './types';
+export type TextInputTheme = Prettify<ComponentTextInput>;
+export declare const defaultTextInputTheme: TextInputTheme;
+export declare const textInputStyles: (theme: TextInputTheme, { size, isInvalid }: Required<Pick<TextInputProps, 'size' | 'isInvalid'>>) => SerializedStyles;

package/dist/types/components/text-input/types.d.ts

@@ -0,0 +1,4 @@
+import type { TextFieldProps as RACTextInputProps } from 'react-aria-components';
+import type { FormInputContainerDefaultProps } from '../form/types';
+import type { TextInputTheme } from './styles';
+export type TextInputProps = FormInputContainerDefaultProps<RACTextInputProps, TextInputTheme>;

package/dist/types/index.d.ts

@@ -26,6 +26,8 @@ export { componentIcon } from './styleD/build/typescript/component/icon';
 export type { ComponentIcon } from './styleD/build/typescript/component/icon';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
+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';

package/dist/types/menu.d.ts

@@ -7,7 +7,6 @@
  * - `react-dom`
  * - `typescript`
  * - `react-aria-components`
- * - `@react-aria/focus`
  *
  * See the `peerDependencies` section of package.json for compatible versions.
  *

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

@@ -97,11 +97,15 @@ export declare const componentMenu: {
             };
             ':hover': {
                 'background-color': string;
+                outline: string;
             };
             ':focus-visible': {
                 outline: string;
                 'outline-offset': string;
             };
+            ':pressed': {
+                'background-color': string;
+            };
         };
         sm: {
             icon: {

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

@@ -0,0 +1,45 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentTextInput: {
+    shared: {
+        color: string;
+        cursor: string;
+        padding: {
+            top: string;
+            right: string;
+            bottom: string;
+            left: string;
+        };
+        'margin-top': string;
+        'border-radius': string;
+        border: string;
+        'background-color': string;
+        disabled: {
+            backgroundColor: string;
+            cursor: string;
+            color: string;
+            border: string;
+        };
+        error: {
+            border: string;
+        };
+    };
+    sm: {
+        height: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+    };
+    md: {
+        height: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+    };
+};
+export type ComponentTextInput = typeof componentTextInput;

package/dist/types/text-input.d.ts

@@ -0,0 +1,20 @@
+/**
+ * TextInput component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/textInput.css),
+ * you don't need to install these.
+ */
+export { TextInput } from './components/text-input/TextInput';
+export type { TextInputProps } from './components/text-input/types';
+export type { TextInputTheme } from './components/text-input/styles';
+export { componentTextInput } from './styleD/build/typescript/component/textInput';
+export type { ComponentTextInput } from './styleD/build/typescript/component/textInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "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": {
@@ -84,6 +84,11 @@
       "import": "./dist/select.js",
       "require": "./dist/select.cjs"
     },
+    "./text-input": {
+      "types": "./dist/types/text-input.d.ts",
+      "import": "./dist/text-input.js",
+      "require": "./dist/text-input.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -131,7 +136,8 @@
     "./component/TopBar.css": "./dist/styleD/build/css/component/TopBar.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"
+    "./component/select.css": "./dist/styleD/build/css/component/select.css",
+    "./component/textInput.css": "./dist/styleD/build/css/component/textInput.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": {
@@ -192,6 +198,9 @@
       ],
       "select": [
         "./dist/types/select.d.ts"
+      ],
+      "text-input": [
+        "./dist/types/text-input.d.ts"
       ]
     }
   },
@@ -216,7 +225,6 @@
     "@guardian/tsconfig": "1.0.1",
     "@material-design-icons/svg": "^0.14.15",
     "@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",
@@ -262,7 +270,6 @@
   "peerDependencies": {
     "@emotion/react": ">=11.11.4 <=11.14.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
-    "@react-aria/focus": "^3.21.5",
     "prosemirror-dropcursor": "1.8.2",
     "prosemirror-history": "1.4.1",
     "prosemirror-keymap": "1.2.2",
@@ -281,9 +288,6 @@
     "@guardian/prosemirror-invisibles": {
       "optional": true
     },
-    "@react-aria/focus": {
-      "optional": true
-    },
     "prosemirror-dropcursor": {
       "optional": true
     },