@guardian/stand 0.0.23 → 0.0.25

package/dist/components/menu/styles.cjs

@@ -74,7 +74,6 @@ const menuItemLabelStyles = (theme) => react.css`
 	grid-area: ${theme.shared.label["grid-area"]};
 	color: ${theme.shared.label.color};
 	${typography.convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
-	)}
 `;
 const menuItemDescriptionStyles = (theme) => react.css`
 	grid-area: ${theme.shared.description["grid-area"]};

package/dist/components/menu/styles.js

@@ -72,7 +72,6 @@ const menuItemLabelStyles = (theme) => css`
 	grid-area: ${theme.shared.label["grid-area"]};
 	color: ${theme.shared.label.color};
 	${convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
-	)}
 `;
 const menuItemDescriptionStyles = (theme) => css`
 	grid-area: ${theme.shared.description["grid-area"]};

package/dist/components/text-area/TextArea.cjs

@@ -0,0 +1,35 @@
+'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 TextArea({
+  size = "md",
+  isInvalid = false,
+  theme = {},
+  placeholder,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTextAreaTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form.FormInputContainer,
+    {
+      as: reactAriaComponents.TextField,
+      size,
+      isInvalid,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.TextArea,
+        {
+          placeholder,
+          css: styles.textAreaStyles(mergedTheme, { size, isInvalid })
+        }
+      )
+    }
+  );
+}
+
+exports.TextArea = TextArea;

package/dist/components/text-area/TextArea.js

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

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var react = require('@emotion/react');
+var textArea = require('../../styleD/build/typescript/component/textArea.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultTextAreaTheme = textArea.componentTextArea;
+const textAreaStyles = (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.shared.height};
+		margin-top: ${theme.shared["margin-top"]};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		::placeholder {
+			color: ${theme.shared.placeholderColor};
+		}
+
+		&[data-disabled] {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+
+			::placeholder {
+				color: ${theme.shared.disabled.color};
+			}
+		}
+
+		&[data-focused] {
+			outline: ${theme.shared.focused.outline};
+		}
+
+		${isInvalid && react.css`
+			border: ${theme.shared.error.border};
+		`}
+	`;
+};
+
+exports.defaultTextAreaTheme = defaultTextAreaTheme;
+exports.textAreaStyles = textAreaStyles;

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

@@ -0,0 +1,44 @@
+import { css } from '@emotion/react';
+import { componentTextArea } from '../../styleD/build/typescript/component/textArea.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultTextAreaTheme = componentTextArea;
+const textAreaStyles = (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.shared.height};
+		margin-top: ${theme.shared["margin-top"]};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		::placeholder {
+			color: ${theme.shared.placeholderColor};
+		}
+
+		&[data-disabled] {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+
+			::placeholder {
+				color: ${theme.shared.disabled.color};
+			}
+		}
+
+		&[data-focused] {
+			outline: ${theme.shared.focused.outline};
+		}
+
+		${isInvalid && css`
+			border: ${theme.shared.error.border};
+		`}
+	`;
+};
+
+export { defaultTextAreaTheme, textAreaStyles };

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

@@ -10,6 +10,7 @@ function TextInput({
   size = "md",
   isInvalid = false,
   theme = {},
+  placeholder,
   ...props
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultTextInputTheme, theme);
@@ -20,7 +21,13 @@ function TextInput({
       size,
       isInvalid,
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Input, { css: styles.textInputStyles(mergedTheme, { size, isInvalid }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.Input,
+        {
+          placeholder,
+          css: styles.textInputStyles(mergedTheme, { size, isInvalid })
+        }
+      )
     }
   );
 }

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

@@ -4,9 +4,9 @@ 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 }) {
+function TextInput({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {
   const mergedTheme = mergeDeep(defaultTextInputTheme, theme);
-  return jsx(FormInputContainer, { as: TextField, size, isInvalid, ...props, children: jsx(Input, { css: textInputStyles(mergedTheme, { size, isInvalid }) }) });
+  return jsx(FormInputContainer, { as: TextField, size, isInvalid, ...props, children: jsx(Input, { placeholder, css: textInputStyles(mergedTheme, { size, isInvalid }) }) });
 }
 
 export { TextInput };

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

@@ -18,11 +18,23 @@ const textInputStyles = (theme, { size, isInvalid }) => {
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
 
+		::placeholder {
+			color: ${theme.shared.placeholderColor};
+		}
+
 		&[data-disabled] {
 			background-color: ${theme.shared.disabled.backgroundColor};
 			border: ${theme.shared.disabled.border};
 			color: ${theme.shared.disabled.color};
 			cursor: ${theme.shared.disabled.cursor};
+
+			::placeholder {
+				color: ${theme.shared.disabled.color};
+			}
+		}
+
+		&[data-focused] {
+			outline: ${theme.shared.focused.outline};
 		}
 
 		${isInvalid && react.css`

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

@@ -16,11 +16,23 @@ const textInputStyles = (theme, { size, isInvalid }) => {
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
 
+		::placeholder {
+			color: ${theme.shared.placeholderColor};
+		}
+
 		&[data-disabled] {
 			background-color: ${theme.shared.disabled.backgroundColor};
 			border: ${theme.shared.disabled.border};
 			color: ${theme.shared.disabled.color};
 			cursor: ${theme.shared.disabled.cursor};
+
+			::placeholder {
+				color: ${theme.shared.disabled.color};
+			}
+		}
+
+		&[data-focused] {
+			outline: ${theme.shared.focused.outline};
 		}
 
 		${isInvalid && css`

package/dist/components/topbar/TopBar.cjs

@@ -11,7 +11,8 @@ var TopBarToolName = require('./topBarToolName/TopBarToolName.cjs');
 
 function TopBarSide({
   children,
-  alignment
+  alignment,
+  theme
 }) {
   const items = [];
   React.Children.forEach(children, (child, i) => {
@@ -22,6 +23,7 @@ function TopBarSide({
       items.push(
         React.cloneElement(child, {
           key: `${child.key}-${i}`,
+          theme: theme?.Item,
           alignment
         })
       );
@@ -30,6 +32,7 @@ function TopBarSide({
       items.push(
         React.cloneElement(child, {
           key: `${child.key}-${i}`,
+          theme: theme?.Navigation,
           alignment
         })
       );
@@ -38,14 +41,16 @@ function TopBarSide({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items });
 }
 function TopBarContainerRight({
-  children
+  children,
+  theme
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "right", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "right", theme, children });
 }
 function TopBarContainerLeft({
-  children
+  children,
+  theme
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "left", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "left", theme, children });
 }
 function TopBar({
   children,
@@ -64,16 +69,25 @@ function TopBar({
       return;
     }
     if (child.type === TopBarToolName.TopBarToolName) {
-      toolName ?? (toolName = child);
+      toolName ?? (toolName = React.cloneElement(
+        child,
+        { theme: mergedTheme.ToolName }
+      ));
     }
     if (child.type === Avatar.Avatar) {
-      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "right", children: child }));
+      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
-      leftSide ?? (leftSide = child);
+      leftSide ?? (leftSide = React.cloneElement(
+        child,
+        { theme: mergedTheme }
+      ));
     }
     if (child.type === TopBarContainerRight) {
-      rightSide ?? (rightSide = child);
+      rightSide ?? (rightSide = React.cloneElement(
+        child,
+        { theme: mergedTheme }
+      ));
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/components/topbar/TopBar.js

@@ -7,7 +7,7 @@ import { TopBarItem } from './topBarItem/TopBarItem.js';
 import { TopBarNavigation } from './topBarNavigation/TopBarNavigation.js';
 import { TopBarToolName } from './topBarToolName/TopBarToolName.js';
 
-function TopBarSide({ children, alignment }) {
+function TopBarSide({ children, alignment, theme }) {
   const items = [];
   React.Children.forEach(children, (child, i) => {
     if (!React.isValidElement(child)) {
@@ -16,23 +16,25 @@ function TopBarSide({ children, alignment }) {
     if (child.type === TopBarItem) {
       items.push(React.cloneElement(child, {
         key: `${child.key}-${i}`,
+        theme: theme?.Item,
         alignment
       }));
     }
     if (child.type === TopBarNavigation) {
       items.push(React.cloneElement(child, {
         key: `${child.key}-${i}`,
+        theme: theme?.Navigation,
         alignment
       }));
     }
   });
   return jsx(Fragment, { children: items });
 }
-function TopBarContainerRight({ children }) {
-  return jsx(TopBarSide, { alignment: "right", children });
+function TopBarContainerRight({ children, theme }) {
+  return jsx(TopBarSide, { alignment: "right", theme, children });
 }
-function TopBarContainerLeft({ children }) {
-  return jsx(TopBarSide, { alignment: "left", children });
+function TopBarContainerLeft({ children, theme }) {
+  return jsx(TopBarSide, { alignment: "left", theme, children });
 }
 function TopBar({ children, theme = {}, cssOverrides, className, ...props }) {
   const mergedTheme = mergeDeep(defaultTopBarTheme, theme);
@@ -45,16 +47,16 @@ function TopBar({ children, theme = {}, cssOverrides, className, ...props }) {
       return;
     }
     if (child.type === TopBarToolName) {
-      toolName ?? (toolName = child);
+      toolName ?? (toolName = React.cloneElement(child, { theme: mergedTheme.ToolName }));
     }
     if (child.type === Avatar) {
-      avatar ?? (avatar = jsx(TopBarItem, { alignment: "right", children: child }));
+      avatar ?? (avatar = jsx(TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
-      leftSide ?? (leftSide = child);
+      leftSide ?? (leftSide = React.cloneElement(child, { theme: mergedTheme }));
     }
     if (child.type === TopBarContainerRight) {
-      rightSide ?? (rightSide = child);
+      rightSide ?? (rightSide = React.cloneElement(child, { theme: mergedTheme }));
     }
   });
   return jsxs("div", { css: [topBarStyles(mergedTheme), cssOverrides], className, ...props, children: [jsxs("div", { css: topBarContainerLeftStyles(mergedTheme), children: [toolName, leftSide] }), jsxs("div", { css: topBarContainerRightStyles(mergedTheme), children: [rightSide, avatar] })] });

package/dist/components/topbar/topBarToolName/styles.cjs

@@ -47,6 +47,7 @@ const toolNameStyles = (theme) => {
 		display: ${theme.display};
 		align-items: ${theme["align-items"]};
 		gap: ${theme.gap};
+		color: ${theme.color};
 	`;
 };
 const toolNameTypography = (theme) => {

package/dist/components/topbar/topBarToolName/styles.js

@@ -45,6 +45,7 @@ const toolNameStyles = (theme) => {
 		display: ${theme.display};
 		align-items: ${theme["align-items"]};
 		gap: ${theme.gap};
+		color: ${theme.color};
 	`;
 };
 const toolNameTypography = (theme) => {

package/dist/index.cjs

@@ -11,6 +11,7 @@ var icon = require('./styleD/build/typescript/component/icon.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
 var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
 var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
+var textArea = require('./styleD/build/typescript/component/textArea.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');
@@ -40,6 +41,7 @@ exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
 exports.componentRadioGroup = radioGroup.componentRadioGroup;
 exports.componentCheckbox = checkbox.componentCheckbox;
+exports.componentTextArea = textArea.componentTextArea;
 exports.componentTextInput = textInput.componentTextInput;
 exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentSelect = select.componentSelect;

package/dist/index.js

@@ -9,6 +9,7 @@ export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';
 export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
+export { componentTextArea } from './styleD/build/typescript/component/textArea.js';
 export { componentTextInput } from './styleD/build/typescript/component/textInput.js';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
 export { componentSelect } from './styleD/build/typescript/component/select.js';

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

@@ -58,6 +58,7 @@
 	--component-top-bar-navigation-sm-typography-letter-spacing: -0.0125rem;
 	--component-top-bar-navigation-sm-typography-font-width: 95;
 	--component-top-bar-tool-name-display: flex;
+	--component-top-bar-tool-name-color: #000000;
 	--component-top-bar-tool-name-align-items: center;
 	--component-top-bar-tool-name-gap: 8px;
 	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15

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

@@ -28,7 +28,7 @@
 	--component-radio-group-shared-indicator-disabled-border: 0.0625rem solid
 		#dcdcdc;
 	--component-radio-group-shared-indicator-selected-after-background-color: #005d8b;
-	--component-radio-group-shared-indicator-selected-after-scale: 0.6rem;
+	--component-radio-group-shared-indicator-selected-after-scale: 0.6;
 	--component-radio-group-shared-indicator-selected-border: 0.125rem solid
 		#0072a9;
 	--component-radio-group-shared-indicator-selected-invalid-border: 0.125rem

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

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-text-area-shared-color: #000000;
+	--component-text-area-shared-cursor: text;
+	--component-text-area-shared-padding-top: 0.5rem;
+	--component-text-area-shared-padding-right: 0.75rem;
+	--component-text-area-shared-padding-bottom: 0.5rem;
+	--component-text-area-shared-padding-left: 0.75rem;
+	--component-text-area-shared-height: 144px;
+	--component-text-area-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-area-shared-border-radius: 0.25rem;
+	--component-text-area-shared-border: 0.0625rem solid #545454;
+	--component-text-area-shared-background-color: #ffffff;
+	--component-text-area-shared-placeholder-color: #545454;
+	--component-text-area-shared-disabled-background-color: #ffffff;
+	--component-text-area-shared-disabled-cursor: not-allowed;
+	--component-text-area-shared-disabled-color: #999999;
+	--component-text-area-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-text-area-shared-focused-outline: 0.125rem auto #0072a9;
+	--component-text-area-shared-error-border: 0.0625rem solid #b42a19;
+	--component-text-area-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
+	--component-text-area-sm-typography-letter-spacing: 0;
+	--component-text-area-sm-typography-font-width: 95;
+	--component-text-area-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-text-area-md-typography-letter-spacing: 0;
+	--component-text-area-md-typography-font-width: 95;
+}

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

@@ -13,10 +13,12 @@
 	--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-placeholder-color: #545454;
 	--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-focused-outline: 0.125rem auto #0072a9;
 	--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';

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

@@ -97,6 +97,7 @@ const componentTopBar = {
   },
   ToolName: {
     display: "flex",
+    color: "#000000",
     "align-items": "center",
     gap: "8px",
     typography: {

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

@@ -95,6 +95,7 @@ const componentTopBar = {
   },
   ToolName: {
     display: "flex",
+    color: "#000000",
     "align-items": "center",
     gap: "8px",
     typography: {

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

@@ -41,7 +41,7 @@ const componentRadioGroup = {
       selected: {
         after: {
           backgroundColor: "#005d8b",
-          scale: "0.6"
+          scale: 0.6
         },
         border: "0.125rem solid #0072a9",
         invalid: {

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

@@ -39,7 +39,7 @@ const componentRadioGroup = {
       selected: {
         after: {
           backgroundColor: "#005d8b",
-          scale: "0.6"
+          scale: 0.6
         },
         border: "0.125rem solid #0072a9",
         invalid: {

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

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

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

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

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

@@ -14,12 +14,16 @@ const componentTextInput = {
     "border-radius": "0.25rem",
     border: "0.0625rem solid #545454",
     "background-color": "#ffffff",
+    placeholderColor: "#545454",
     disabled: {
       backgroundColor: "#ffffff",
       cursor: "not-allowed",
       color: "#999999",
       border: "0.0625rem solid #dcdcdc"
     },
+    focused: {
+      outline: "0.125rem auto #0072a9"
+    },
     error: {
       border: "0.0625rem solid #b42a19"
     }

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

@@ -12,12 +12,16 @@ const componentTextInput = {
     "border-radius": "0.25rem",
     border: "0.0625rem solid #545454",
     "background-color": "#ffffff",
+    placeholderColor: "#545454",
     disabled: {
       backgroundColor: "#ffffff",
       cursor: "not-allowed",
       color: "#999999",
       border: "0.0625rem solid #dcdcdc"
     },
+    focused: {
+      outline: "0.125rem auto #0072a9"
+    },
     error: {
       border: "0.0625rem solid #b42a19"
     }

package/dist/text-area.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var TextArea = require('./components/text-area/TextArea.cjs');
+var textArea = require('./styleD/build/typescript/component/textArea.cjs');
+
+
+
+exports.TextArea = TextArea.TextArea;
+exports.componentTextArea = textArea.componentTextArea;

package/dist/text-area.js

@@ -0,0 +1,2 @@
+export { TextArea } from './components/text-area/TextArea.js';
+export { componentTextArea } from './styleD/build/typescript/component/textArea.js';

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

@@ -3,7 +3,7 @@ import type { ComponentAvatar } from '../../styleD/build/typescript/component/av
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { AvatarProps } from './types';
 export type AvatarTheme = Prettify<ComponentAvatar>;
-export type PartialAvatarTheme = DeepPartial<AvatarTheme>;
+export type PartialAvatarTheme = Prettify<DeepPartial<AvatarTheme>>;
 export declare const defaultAvatarTheme: AvatarTheme;
 export declare const avatarImageStyles: SerializedStyles;
 export declare const avatarStyles: (theme: AvatarTheme, { size, color }: Required<Pick<AvatarProps, 'size' | 'color'>>) => SerializedStyles;

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

@@ -3,6 +3,6 @@ import type { ComponentButton } from '../../styleD/build/typescript/component/bu
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { ButtonProps } from './types';
 export type ButtonTheme = Prettify<ComponentButton>;
-export type PartialButtonTheme = DeepPartial<ButtonTheme>;
+export type PartialButtonTheme = Prettify<DeepPartial<ButtonTheme>>;
 export declare const defaultButtonTheme: ButtonTheme;
 export declare const buttonStyles: (theme: ButtonTheme, { size, variant }: Required<Pick<ButtonProps, 'size' | 'variant'>>, hasIcon?: boolean, isIconButton?: boolean) => SerializedStyles;

package/dist/types/components/byline/theme.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial } from '../../util/types';
-export type PartialBylineTheme = DeepPartial<ComponentByline>;
+import type { DeepPartial, Prettify } from '../../util/types';
+export type PartialBylineTheme = Prettify<DeepPartial<ComponentByline>>;

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

@@ -1,9 +1,9 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ComponentCheckbox } from '../../styleD/build/typescript/component/checkbox';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { CheckboxGroupProps, CheckboxProps } from './types';
 export type CheckboxTheme = Prettify<ComponentCheckbox>;
-export type PartialCheckboxTheme = Prettify<Partial<CheckboxTheme>>;
+export type PartialCheckboxTheme = Prettify<DeepPartial<CheckboxTheme>>;
 export declare const defaultCheckboxTheme: CheckboxTheme;
 export declare const checkboxStyles: (theme: CheckboxTheme, { size, isIndeterminate, }: Required<Pick<CheckboxProps, 'size' | 'isIndeterminate'>>) => SerializedStyles;
 export declare const checkboxLabelStyles: (theme: CheckboxTheme) => SerializedStyles;

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

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { type ComponentFavicon } from '../../styleD/build/typescript/component/favicon';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type FaviconTheme = Prettify<ComponentFavicon>;
-export type PartialFaviconTheme = DeepPartial<FaviconTheme>;
+export type PartialFaviconTheme = Prettify<DeepPartial<FaviconTheme>>;
 export declare const defaultFaviconTheme: FaviconTheme;
 export declare const faviconStyles: (theme: FaviconTheme) => SerializedStyles;
 export declare const faviconTypographyStyles: (theme: FaviconTheme) => SerializedStyles;

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

@@ -2,7 +2,7 @@ import type { ComponentIcon } from '../../styleD/build/typescript/component/icon
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { IconProps } from './types';
 export type IconTheme = Prettify<ComponentIcon>;
-export type PartialIconTheme = DeepPartial<IconTheme>;
+export type PartialIconTheme = Prettify<DeepPartial<IconTheme>>;
 export declare const defaultIconTheme: IconTheme;
 export declare const iconStyles: (theme: IconTheme, { size, fill, mode, }: Required<Pick<IconProps, "size">> & Pick<IconProps, "fill"> & {
     mode: 'text' | 'svg';

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

@@ -3,15 +3,15 @@ import type { ComponentMenu } from '../../styleD/build/typescript/component/menu
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { MenuItemProps, MenuPopoverProps, MenuSectionProps } from './types';
 export type MenuTheme = Prettify<ComponentMenu['menu']>;
-export type PartialMenuTheme = DeepPartial<MenuTheme>;
+export type PartialMenuTheme = Prettify<DeepPartial<MenuTheme>>;
 export declare const defaultMenuTheme: MenuTheme;
 export declare const menuStyles: (theme: MenuTheme) => SerializedStyles;
 export type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
-export type PartialMenuSectionTheme = DeepPartial<MenuSectionTheme>;
+export type PartialMenuSectionTheme = Prettify<DeepPartial<MenuSectionTheme>>;
 export declare const defaultMenuSectionTheme: MenuSectionTheme;
 export declare const menuSectionHeaderStyles: (theme: MenuSectionTheme, { size }: Required<Pick<MenuSectionProps, 'size'>>) => SerializedStyles;
 export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
-export type PartialMenuItemTheme = DeepPartial<MenuItemTheme>;
+export type PartialMenuItemTheme = Prettify<DeepPartial<MenuItemTheme>>;
 export declare const defaultMenuItemTheme: MenuItemTheme;
 export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>) => SerializedStyles;
 export declare const menuItemIconStyles: (theme: MenuItemTheme, { size }: Required<Pick<MenuItemProps, 'size'>>) => SerializedStyles;
@@ -19,10 +19,10 @@ export declare const menuItemLabelStyles: (theme: MenuItemTheme) => SerializedSt
 export declare const menuItemDescriptionStyles: (theme: MenuItemTheme) => SerializedStyles;
 export declare const menuItemAsideStyles: (theme: MenuItemTheme) => SerializedStyles;
 export type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
-export type PartialMenuSeparatorTheme = DeepPartial<MenuSeparatorTheme>;
+export type PartialMenuSeparatorTheme = Prettify<DeepPartial<MenuSeparatorTheme>>;
 export declare const defaultMenuSeparatorTheme: MenuSeparatorTheme;
 export declare const menuSeparatorStyles: (theme: MenuSeparatorTheme) => SerializedStyles;
 export type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
-export type PartialMenuPopoverTheme = DeepPartial<MenuPopoverTheme>;
+export type PartialMenuPopoverTheme = Prettify<DeepPartial<MenuPopoverTheme>>;
 export declare const defaultMenuPopoverTheme: MenuPopoverTheme;
 export declare const menuPopoverStyles: (theme: MenuPopoverTheme, { size }: Required<Pick<MenuPopoverProps, 'size'>>) => SerializedStyles;

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

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import type { ComponentSelect } from '../../styleD/build/typescript/component/select';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type SelectTheme = Prettify<ComponentSelect>;
-export type PartialSelectTheme = DeepPartial<SelectTheme>;
+export type PartialSelectTheme = Prettify<DeepPartial<SelectTheme>>;
 export declare const defaultSelectTheme: SelectTheme;
 export declare const popoverStyles: (theme: SelectTheme) => SerializedStyles;
 export declare const listBoxItemStyles: (theme: SelectTheme) => SerializedStyles;

package/dist/types/components/text-area/TextArea.d.ts

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

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

@@ -0,0 +1,5 @@
+export declare const componentName = "TextArea";
+export declare const componentTsx = "import { TextArea } from '@guardian/stand/text-area';\n\nexport const Component = () => (\n\t<TextArea\n\t\t\tlabel=\"Description\"\n\t\t\tdescription=\"This is a description for the text area.\"\n\t\t/>\n);\n";
+export declare const componentCss = "\n/* import the textarea, form and inline message styles */\n@import '@guardian/stand/component/inlineMessage.css';\n@import '@guardian/stand/component/form.css';\n@import '@guardian/stand/component/textArea.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.stand-text-area {\n\tdisplay: var(--component-textArea-shared-display);\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 area styles */\n\n.stand-text-area {\n\tbackground-color: var(--component-text-area-shared-background-color);\n\tborder-radius: var(--component-text-area-shared-border-radius);\n\tborder: var(--component-text-area-shared-border);\n\tcolor: var(--component-text-area-shared-color);\n\tcursor: var(--component-text-area-shared-cursor);\n\tmargin-top: var(--component-text-area-shared-margin-top);\n\tpadding-top: var(--component-text-area-shared-padding-top);\n\tpadding-right: var(--component-text-area-shared-padding-right);\n\tpadding-bottom: var(--component-text-area-shared-padding-bottom);\n\tpadding-left: var(--component-text-area-shared-padding-left);\n}\n\n.stand-text-area[disabled] {\n\tbackground-color: var(--component-text-area-shared-disabled-background-color);\n\tborder: var(--component-text-area-shared-disabled-border);\n\tcolor: var(--component-text-area-shared-disabled-color);\n\tcursor: var(--component-text-area-shared-disabled-cursor);\n}\n\n.stand-text-area[data-invalid] {\n\tborder: var(--component-text-area-shared-error-border);\n}\n\n.stand-text-area.md {\n\theight: var(--component-text-area-shared-height);\n\tfont: var(--component-text-area-md-typography-font);\n\tletter-spacing: var(--component-text-area-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-area-md-typography-font-width);\n}\n\n.stand-text-area.sm {\n\theight: var(--component-text-area-shared-height);\n\tfont: var(--component-text-area-sm-typography-font);\n\tletter-spacing: var(--component-text-area-sm-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-text-area-sm-typography-font-width);\n}\n";
+export declare const componentHtml = "<div class=\"container\">\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 area.</span>\n\t\t<textarea id=\"name\" class=\"stand-text-area md\" type=\"text\"></textarea>\n\t</div>\n\t<div class=\"stand-form-input-container sm\">\n\t\t<label for=\"story\">Tell us a story</label>\n\t\t<textarea\n\t\t\tid=\"story\"\n\t\t\tclass=\"stand-text-area sm\"\n\t\t\ttype=\"text\"\n\t\t\tdata-invalid\n\t\t>It was a dark and stormy night...</textarea>\n\t\t<span class=\"stand-inline-message stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Story is below character count</span>\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<textarea\n\t\t\tid=\"notes\"\n\t\t\tclass=\"stand-text-area md\"\n\t\t\ttype=\"text\"\n\t\t\tdisabled\n\t\t></textarea>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentTextArea, 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 area styles */\n\n.js-stand-text-area {\n\tbackground-color: ${componentTextArea.shared['background-color']};\n\tborder-radius: ${componentTextArea.shared['border-radius']};\n\tborder: ${componentTextArea.shared.border};\n\tcolor: ${componentTextArea.shared.color};\n\tcursor: ${componentTextArea.shared.cursor};\n\tmargin-top: ${componentTextArea.shared['margin-top']};\n\tpadding-top: ${componentTextArea.shared.padding.top};\n\tpadding-right: ${componentTextArea.shared.padding.right};\n\tpadding-bottom: ${componentTextArea.shared.padding.bottom};\n\tpadding-left: ${componentTextArea.shared.padding.left};\n}\n\n.js-stand-text-area[disabled] {\n\tbackground-color: ${componentTextArea.shared.disabled.backgroundColor};\n\tborder: ${componentTextArea.shared.disabled.border};\n\tcolor: ${componentTextArea.shared.disabled.color};\n\tcursor: ${componentTextArea.shared.disabled.cursor};\n}\n\n.js-stand-text-area[data-invalid] {\n\tborder: ${componentTextArea.shared.errorBorder};\n}\n\n.js-stand-text-area.md {\n\theight: ${componentTextArea.shared.height};\n\tfont: ${componentTextArea.md.typography.font};\n\tletter-spacing: ${componentTextArea.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextArea.md.typography.fontWidth};\n}\n\n.js-stand-text-area.sm {\n\theight: ${componentTextArea.shared.height};\n\tfont: ${componentTextArea.sm.typography.font};\n\tletter-spacing: ${componentTextArea.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTextArea.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<textarea id=\"name\" class=\"js-stand-text-area md\"></textarea>\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\">\n\t\t<label for=\"story\">Story</label>\n\t\t<textarea\n\t\t\tid=\"story\"\n\t\t\tclass=\"js-stand-text-area sm\"\n\t\t>It was a dark and stormy night...</textarea>\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\" data-disabled>\n\t\t<label for=\"notes\">Notes</label>\n\t\t<textarea\n\t\t\tid=\"notes\"\n\t\t\tclass=\"js-stand-text-area md\"\n\t\t\ttype=\"text\"\n\t\t\tdisabled\n\t\t </textarea>\n\t</div>\n</div>\n`;\n";

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

@@ -0,0 +1,7 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentTextArea } from '../../styleD/build/typescript/component/textArea';
+import type { Prettify } from '../../util/types';
+import type { TextAreaProps } from './types';
+export type TextAreaTheme = Prettify<ComponentTextArea>;
+export declare const defaultTextAreaTheme: TextAreaTheme;
+export declare const textAreaStyles: (theme: TextAreaTheme, { size, isInvalid }: Required<Pick<TextAreaProps, 'size' | 'isInvalid'>>) => SerializedStyles;

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

@@ -0,0 +1,7 @@
+import type { TextFieldProps as RACTextAreaProps } from 'react-aria-components';
+import type { FormInputContainerDefaultProps } from '../form/types';
+import type { TextAreaTheme } from './styles';
+export interface TextAreaProps extends FormInputContainerDefaultProps<RACTextAreaProps, TextAreaTheme> {
+    /** Temporary text that occupies the text area when it is empty */
+    placeholder?: string;
+}

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

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

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

@@ -1,4 +1,7 @@
 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>;
+export interface TextInputProps extends FormInputContainerDefaultProps<RACTextInputProps, TextInputTheme> {
+    /** Temporary text that occupies the text input when it is empty */
+    placeholder?: string;
+}

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

@@ -1,8 +1,11 @@
+import type { TopBarTheme } from './styles';
 import type { TopBarProps } from './types';
-export declare function TopBarContainerRight({ children, }: {
+export declare function TopBarContainerRight({ children, theme, }: {
     children: TopBarProps['children'];
+    theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function TopBarContainerLeft({ children, }: {
+export declare function TopBarContainerLeft({ children, theme, }: {
     children: TopBarProps['children'];
+    theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function TopBar({ children, theme, cssOverrides, className, ...props }: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import type { ComponentTopBar } from '../../styleD/build/typescript/component/TopBar';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type TopBarTheme = Prettify<ComponentTopBar>;
-export type PartialTopBarTheme = DeepPartial<TopBarTheme>;
+export type PartialTopBarTheme = Prettify<DeepPartial<TopBarTheme>>;
 export declare const defaultTopBarTheme: TopBarTheme;
 export declare const topBarStyles: (theme: TopBarTheme) => SerializedStyles;
 export declare const topBarContainerLeftStyles: (theme: TopBarTheme) => SerializedStyles;

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

@@ -3,6 +3,6 @@ import type { ComponentTopBar } from '../../../styleD/build/typescript/component
 import type { DeepPartial, Prettify } from '../../../util/types';
 import type { TopBarItemProps } from './types';
 export type TopBarItemTheme = Prettify<ComponentTopBar['Item']>;
-export type PartialTopBarItemTheme = DeepPartial<TopBarItemTheme>;
+export type PartialTopBarItemTheme = Prettify<DeepPartial<TopBarItemTheme>>;
 export declare const defaultTopBarItemTheme: TopBarItemTheme;
 export declare const topBarItemStyles: (theme: TopBarItemTheme, alignment: 'left' | 'right', { size }: Required<Pick<TopBarItemProps, 'size'>>) => SerializedStyles;

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

@@ -3,7 +3,7 @@ import type { ComponentTopBar } from '../../../styleD/build/typescript/component
 import type { DeepPartial, Prettify } from '../../../util/types';
 import type { TopBarNavigationProps } from './types';
 export type TopBarNavigationTheme = Prettify<ComponentTopBar['Navigation']>;
-export type PartialTopBarNavigationTheme = DeepPartial<TopBarNavigationTheme>;
+export type PartialTopBarNavigationTheme = Prettify<DeepPartial<TopBarNavigationTheme>>;
 export declare const defaultTopBarNavigationTheme: TopBarNavigationTheme;
 export declare const topBarNavigationStyles: (theme: TopBarNavigationTheme, selected: boolean) => SerializedStyles;
 export declare const topBarNavigationDividerStyles: (theme: TopBarNavigationTheme, { alignment }: Required<Pick<TopBarNavigationProps, 'alignment'>>) => SerializedStyles;

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

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTopBar } from '../../..//styleD/build/typescript/component/TopBar';
 import type { DeepPartial, Prettify } from '../../../util/types';
 export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
-export type PartialTopBarToolNameTheme = DeepPartial<TopBarToolNameTheme>;
+export type PartialTopBarToolNameTheme = Prettify<DeepPartial<TopBarToolNameTheme>>;
 export declare const defaultToolNameTheme: TopBarToolNameTheme;
 export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;

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

@@ -3,6 +3,6 @@ import { type ComponentTypography } from '../../styleD/build/typescript/componen
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { TypographyProps } from './types';
 export type TypographyTheme = Prettify<ComponentTypography>;
-export type PartialTypographyTheme = DeepPartial<TypographyTheme>;
+export type PartialTypographyTheme = Prettify<DeepPartial<TypographyTheme>>;
 export declare const defaultTypographyTheme: TypographyTheme;
 export declare const typographyStyles: (theme: TypographyTheme, { variant }: Required<Pick<TypographyProps, 'variant'>>) => SerializedStyles;

package/dist/types/components/user-menu/theme.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentUserMenu } from '../../styleD/build/typescript/component/userMenu';
-import type { DeepPartial } from '../../util/types';
-export type PartialUserMenuTheme = DeepPartial<ComponentUserMenu>;
+import type { DeepPartial, Prettify } from '../../util/types';
+export type PartialUserMenuTheme = Prettify<DeepPartial<ComponentUserMenu>>;

package/dist/types/index.d.ts

@@ -30,6 +30,8 @@ export { componentRadioGroup } from './styleD/build/typescript/component/radioGr
 export type { ComponentRadioGroup } from './styleD/build/typescript/component/radioGroup';
 export { componentCheckbox } from './styleD/build/typescript/component/checkbox';
 export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';
+export { componentTextArea } from './styleD/build/typescript/component/textArea';
+export type { ComponentTextArea } from './styleD/build/typescript/component/textArea';
 export { componentTextInput } from './styleD/build/typescript/component/textInput';
 export type { ComponentTextInput } from './styleD/build/typescript/component/textInput';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage';

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

@@ -98,6 +98,7 @@ export declare const componentTopBar: {
     };
     ToolName: {
         display: string;
+        color: string;
         'align-items': string;
         gap: string;
         typography: {

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

@@ -42,7 +42,7 @@ export declare const componentRadioGroup: {
             selected: {
                 after: {
                     backgroundColor: string;
-                    scale: string;
+                    scale: number;
                 };
                 border: string;
                 invalid: {

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

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

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

@@ -15,12 +15,16 @@ export declare const componentTextInput: {
         'border-radius': string;
         border: string;
         'background-color': string;
+        placeholderColor: string;
         disabled: {
             backgroundColor: string;
             cursor: string;
             color: string;
             border: string;
         };
+        focused: {
+            outline: string;
+        };
         error: {
             border: string;
         };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "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": {
@@ -99,6 +99,11 @@
       "import": "./dist/checkbox.js",
       "require": "./dist/checkbox.cjs"
     },
+    "./text-area": {
+      "types": "./dist/types/text-area.d.ts",
+      "import": "./dist/text-area.js",
+      "require": "./dist/text-area.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -149,7 +154,8 @@
     "./component/select.css": "./dist/styleD/build/css/component/select.css",
     "./component/textInput.css": "./dist/styleD/build/css/component/textInput.css",
     "./component/radioGroup.css": "./dist/styleD/build/css/component/radioGroup.css",
-    "./component/checkbox.css": "./dist/styleD/build/css/component/checkbox.css"
+    "./component/checkbox.css": "./dist/styleD/build/css/component/checkbox.css",
+    "./component/textArea.css": "./dist/styleD/build/css/component/textArea.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": {
@@ -219,6 +225,9 @@
       ],
       "checkbox": [
         "./dist/types/checkbox.d.ts"
+      ],
+      "text-area": [
+        "./dist/types/text-area.d.ts"
       ]
     }
   },