@guardian/stand 0.0.23 → 0.0.24

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/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/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/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/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/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/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.24",
   "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"
       ]
     }
   },