@guardian/stand 0.0.20 → 0.0.22

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/components/topbar/topBarToolName/TopBarToolName.d.ts

@@ -1,2 +1,2 @@
 import type { TopBarToolNameProps } from './types';
-export declare const TopBarToolName: ({ name, favicon, subsection, subsectionIcon, theme, cssOverrides, }: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TopBarToolName: (props: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/topbar/topBarToolName/styles.d.ts

@@ -4,6 +4,8 @@ import type { DeepPartial, Prettify } from '../../../util/types';
 export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
 export type PartialTopBarToolNameTheme = DeepPartial<TopBarToolNameTheme>;
 export declare const defaultToolNameTheme: TopBarToolNameTheme;
+export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
+export declare const toolNameLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameTypography: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const dividerStyles: (theme: TopBarToolNameTheme) => SerializedStyles;

package/dist/types/components/topbar/topBarToolName/types.d.ts

@@ -1,8 +1,9 @@
+import type { LinkProps as RACLinkProps } from 'react-aria-components';
 import type { DefaultProps } from '../../../util/types';
 import type { FaviconProps } from '../../favicon/types';
 import type { IconProps } from '../../icon/types';
 import type { TopBarToolNameTheme } from './styles';
-export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme> {
+export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme, RACLinkProps['className']>, Omit<RACLinkProps, 'children'> {
     /**
      * Name of the tool to display
      */
@@ -19,4 +20,9 @@ export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme> {
      * Icon that represents the content type (optional)
      * */
     subsectionIcon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+    /**
+     * Text to display on hover, labels the link
+     * e.g. 'Back to dashboard'
+     */
+    hoverText?: string;
 }

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/TopBar.d.ts

@@ -117,6 +117,38 @@ export declare const componentTopBar: {
                 fontWidth: number;
             };
         };
+        link: {
+            textDecoration: string;
+            color: string;
+            position: string;
+            width: string;
+            height: string;
+        };
+        hoverLink: {
+            color: string;
+            paddingLeft: string;
+            paddingRight: string;
+            backgroundColor: string;
+            opacity: string;
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+            position: string;
+            width: string;
+            height: string;
+            hover: {
+                opacity: string;
+            };
+            pressed: {
+                backgroundColor: string;
+            };
+            focused: {
+                outline: string;
+                'outline-offset': string;
+            };
+        };
     };
 };
 export type ComponentTopBar = typeof componentTopBar;

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/styleD/build/typescript/semantic/typography.d.ts

@@ -82,6 +82,11 @@ export declare const semanticTypography: {
         letterSpacing: string;
         fontWidth: number;
     };
+    'body-xs': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
     'body-sm': {
         font: string;
         letterSpacing: string;
@@ -102,6 +107,36 @@ export declare const semanticTypography: {
         letterSpacing: string;
         fontWidth: number;
     };
+    'body-bold-xs': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-bold-sm': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-bold-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-bold-lg': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-bold-xl': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-italic-xs': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
     'body-italic-sm': {
         font: string;
         letterSpacing: string;
@@ -122,6 +157,36 @@ export declare const semanticTypography: {
         letterSpacing: string;
         fontWidth: number;
     };
+    'body-italic-bold-xs': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-italic-bold-sm': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-italic-bold-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-italic-bold-lg': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-italic-bold-xl': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-xs': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
     'body-compact-sm': {
         font: string;
         letterSpacing: string;
@@ -142,6 +207,36 @@ export declare const semanticTypography: {
         letterSpacing: string;
         fontWidth: number;
     };
+    'body-compact-bold-xs': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-bold-sm': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-bold-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-bold-lg': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-bold-xl': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-italic-xs': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
     'body-compact-italic-sm': {
         font: string;
         letterSpacing: string;
@@ -162,6 +257,31 @@ export declare const semanticTypography: {
         letterSpacing: string;
         fontWidth: number;
     };
+    'body-compact-italic-bold-xs': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-italic-bold-sm': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-italic-bold-md': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-italic-bold-lg': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-italic-bold-xl': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
     'meta-md': {
         font: string;
         letterSpacing: string;

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.22",
   "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
     },