@guardian/stand 0.0.22 → 0.0.24

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/styleD/build/typescript/semantic/colors.cjs

@@ -10,6 +10,7 @@ const semanticColors = {
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
+    "success-inverse": "#cde4c9",
     information: "#00344e",
     disabled: "#999999",
     green: "#24491d",
@@ -69,7 +70,8 @@ const semanticColors = {
     "information-weak": "#e8f0fb",
     "error-weak": "#f5c6c0",
     "error-strong": "#b42a19",
-    "success-weak": "#edf5ec"
+    "success-weak": "#cde4c9",
+    "success-strong": "#326528"
   }
 };
 

package/dist/styleD/build/typescript/semantic/colors.js

@@ -8,6 +8,7 @@ const semanticColors = {
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
+    "success-inverse": "#cde4c9",
     information: "#00344e",
     disabled: "#999999",
     green: "#24491d",
@@ -67,7 +68,8 @@ const semanticColors = {
     "information-weak": "#e8f0fb",
     "error-weak": "#f5c6c0",
     "error-strong": "#b42a19",
-    "success-weak": "#edf5ec"
+    "success-weak": "#cde4c9",
+    "success-strong": "#326528"
   }
 };
 

package/dist/styleD/build/typescript/semantic/sizing.cjs

@@ -2,6 +2,7 @@
 
 const semanticSizing = {
   height: {
+    xxxs: "1.125rem",
     xxs: "1.25rem",
     xs: "1.5rem",
     sm: "2rem",

package/dist/styleD/build/typescript/semantic/sizing.js

@@ -1,5 +1,6 @@
 const semanticSizing = {
   height: {
+    xxxs: "1.125rem",
     xxs: "1.25rem",
     xs: "1.5rem",
     sm: "2rem",

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

@@ -0,0 +1,21 @@
+/**
+ * Checkbox and CheckboxGroup components 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/checkbox.css),
+ * you don't need to install these.
+ */
+export { Checkbox } from './components/checkbox/Checkbox';
+export { CheckboxGroup } from './components/checkbox/CheckboxGroup';
+export type { CheckboxProps, CheckboxGroupProps, } from './components/checkbox/types';
+export type { PartialCheckboxTheme as CheckboxTheme } from './components/checkbox/styles';
+export { componentCheckbox } from './styleD/build/typescript/component/checkbox';
+export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';

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

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

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

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

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

@@ -0,0 +1,5 @@
+export declare const componentName = "CheckboxGroup";
+export declare const componentTsx = "import { Checkbox, CheckboxGroup } from '@guardian/stand/checkbox';\n\nexport const Component = () => (\n\t<>\n\t\t<CheckboxGroup label=\"Notifications\" description=\"Choose what to receive.\">\n\t\t\t<Checkbox value=\"email\">Email</Checkbox>\n\t\t\t<Checkbox value=\"sms\">SMS</Checkbox>\n\t\t\t<Checkbox value=\"push\">Push notification</Checkbox>\n\t\t</CheckboxGroup>\n\n\t\t<CheckboxGroup\n\t\t\tlabel=\"Preferences\"\n\t\t\tsize=\"sm\"\n\t\t\tisInvalid\n\t\t\terror=\"Please select at least one option.\"\n\t\t>\n\t\t\t<Checkbox value=\"news\">News</Checkbox>\n\t\t\t<Checkbox value=\"offers\">Offers</Checkbox>\n\t\t</CheckboxGroup>\n\t</>\n);\n";
+export declare const componentCss = "\n/* import the checkbox, form, inline message styles */\n@import '@guardian/stand/component/inlineMessage.css';\n@import '@guardian/stand/component/form.css';\n@import '@guardian/stand/component/checkbox.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/* checkbox styles */\n\n.stand-checkbox {\n  display: var(--component-checkbox-input-shared-display);\n  position: var(--component-checkbox-input-shared-position);\n  align-items: var(--component-checkbox-input-shared-align-items);\n  gap: var(--component-checkbox-input-shared-gap);\n  cursor: var(--component-checkbox-input-shared-cursor);\n  color: var(--component-checkbox-input-shared-color);\n}\n\n.stand-checkbox.md {\n  font: var(--component-checkbox-input-md-typography-font);\n  letter-spacing: var(--component-checkbox-input-md-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n    var(--component-checkbox-input-md-typography-font-width);\n}\n\n.stand-checkbox.sm {\n  font: var(--component-checkbox-input-sm-typography-font);\n  letter-spacing: var(--component-checkbox-input-sm-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n\tvar(--component-checkbox-input-sm-typography-font-width);\n}\n\n.stand-checkbox > label {\n  cursor: var(--component-checkbox-input-shared-cursor);\n}\n\n.stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: var(--component-checkbox-input-shared-cursor);\n  border: var(--component-checkbox-input-shared-indicator-border);\n  border-radius: var(--component-checkbox-input-shared-indicator-border-radius);\n  accent-color: var(\n    --component-checkbox-input-shared-indicator-selected-background-color\n  );\n}\n\n.stand-checkbox.md > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-md-indicator-size);\n  height: var(--component-checkbox-input-md-indicator-size);\n}\n\n.stand-checkbox.sm > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-sm-indicator-size);\n  height: var(--component-checkbox-input-sm-indicator-size);\n}\n\n/* CheckboxGroup styles */\n\n.stand-checkbox-group {\n\tdisplay: var(--component-checkbox-group-shared-display);\n\tflex-direction: var(--component-checkbox-group-shared-flex-direction);\n}\n\n.stand-checkbox-group.sm {\n\tgap: var(--component-checkbox-group-sm-gap);\n\tmargin-top: var(--component-checkbox-group-sm-margin-top);\n}\n\n.stand-checkbox-group.md {\n\tgap: var(--component-checkbox-group-md-gap);\n\tmargin-top: var(--component-checkbox-group-md-margin-top);\n}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"stand-form-input-container md\">\n\t\t<label>Notifications</label>\n\t\t<span class=\"description\">Choose what to receive.</span>\n\t\t<div class=\"stand-checkbox-group md\">\n\t\t\t<div class=\"stand-checkbox md\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"email\" name=\"email\" />\n\t\t\t\t<label for=\"email\">Email</label>\n\t\t\t</div>\n\t\t\t<div class=\"stand-checkbox md\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"sms\" name=\"sms\" />\n\t\t\t\t<label for=\"sms\">SMS</label>\n\t\t\t</div>\n\t\t\t<div class=\"stand-checkbox md\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"push\" name=\"push\" />\n\t\t\t\t<label for=\"push\">Push notification</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"stand-form-input-container sm\" data-invalid>\n\t\t<label>Preferences</label>\n\t\t<span class=\"description\">Please select at least one option.</span>\n\t\t<div class=\"stand-checkbox-group sm\">\n\t\t\t<div class=\"stand-checkbox sm\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"news\" name=\"news\" />\n\t\t\t\t<label for=\"news\">News</label>\n\t\t\t</div>\n\t\t\t<div class=\"stand-checkbox sm\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"offers\" name=\"offers\" />\n\t\t\t\t<label for=\"offers\">Offers</label>\n\t\t\t</div>\n\t\t</div>\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</div>\n";
+export declare const componentJs = "\nimport { componentCheckbox, 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.maxWidth};\n}\n\n.js-stand-form-input-container.md {\n\tmax-width: ${componentForm.input.md.container.maxWidth};\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.disabledColor};\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.disabledColor};\n}\n\n/* checkbox styles */\n\n.js-stand-checkbox {\n  display: ${componentCheckbox.input.shared.display};\n  position: ${componentCheckbox.input.shared.position};\n  align-items: ${componentCheckbox.input.shared['align-items']};\n  gap: ${componentCheckbox.input.shared.gap};\n  cursor: ${componentCheckbox.input.shared.cursor};\n  color: ${componentCheckbox.input.shared.color};\n  font: ${componentCheckbox.input.md.typography.font};\n  letter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n}\n\n.js-stand-checkbox.sm {\n  font: ${componentCheckbox.input.sm.typography.font};\n  letter-spacing: ${componentCheckbox.input.sm.typography.letterSpacing};\n  font-variation-settings: \"wdth\"\n\t${componentCheckbox.input.sm.typography.fontWidth};\n}\n\n.js-stand-checkbox > label {\n  cursor: ${componentCheckbox.input.shared.cursor};\n}\n\n.js-stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: ${componentCheckbox.input.shared.cursor};\n  border: ${componentCheckbox.input.shared.indicator.border};\n  border-radius: ${componentCheckbox.input.shared.indicator['border-radius']};\n  accent-color: ${componentCheckbox.input.shared.indicator.selected['background-color']};\n}\n\n.js-stand-checkbox.md > .js-stand-checkbox-indicator {\n  width: ${componentCheckbox.input.md.indicator.size};\n  height: ${componentCheckbox.input.md.indicator.size};\n}\n\n.js-stand-checkbox.sm > .js-stand-checkbox-indicator {\n  width: ${componentCheckbox.input.sm.indicator.size};\n  height: ${componentCheckbox.input.sm.indicator.size};\n}\n\n/* CheckboxGroup styles */\n\n.js-stand-checkbox-group {\n\tdisplay: ${componentCheckbox.group.shared.display};\n\tflex-direction: ${componentCheckbox.group.shared[\"flex-direction\"]};\n}\n\n.js-stand-checkbox-group.sm {\n\tgap: ${componentCheckbox.group.sm.gap};\n\tmargin-top: ${componentCheckbox.group.sm.marginTop};\n}\n\n.js-stand-checkbox-group.md {\n\tgap: ${componentCheckbox.group.md.gap};\n\tmargin-top: ${componentCheckbox.group.md.marginTop};\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>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label>Notifications</label>\n\t\t<span class=\"description\">Choose what to receive.</span>\n\t\t<div class=\"js-stand-checkbox-group md\">\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"email\" name=\"email\" />\n\t\t\t\t<label for=\"email\">Email</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"sms\" name=\"sms\" />\n\t\t\t\t<label for=\"sms\">SMS</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"push\" name=\"push\" />\n\t\t\t\t<label for=\"push\">Push notification</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\" data-invalid>\n\t\t<label>Preferences</label>\n\t\t<span class=\"description\">Please select at least one option.</span>\n\t\t<div class=\"js-stand-checkbox-group sm\">\n\t\t\t<div class=\"js-stand-checkbox sm\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"news\" name=\"news\" />\n\t\t\t\t<label for=\"news\">News</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox sm\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"offers\" name=\"offers\" />\n\t\t\t\t<label for=\"offers\">Offers</label>\n\t\t\t</div>\n\t\t</div>\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</div>\n`;\n\n";

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Checkbox";
+export declare const componentTsx = "import { Checkbox } from '@guardian/stand/checkbox';\n\nexport const Component = () => (\n\t<>\n\t\t<Checkbox>Accept terms and conditions</Checkbox>\n\n\t\t<Checkbox isInvalid>Required option</Checkbox>\n\n\t\t<Checkbox isDisabled>Unavailable option</Checkbox>\n\n\t\t<Checkbox size=\"sm\" isIndeterminate isSelected>\n\t\t\tSelect all\n\t\t</Checkbox>\n\t</>\n);\n";
+export declare const componentCss = "\n/* import the checkbox styles */\n@import \"@guardian/stand/component/checkbox.css\";\n\n.stand-checkbox {\n  display: var(--component-checkbox-input-shared-display);\n  position: var(--component-checkbox-input-shared-position);\n  align-items: var(--component-checkbox-input-shared-align-items);\n  gap: var(--component-checkbox-input-shared-gap);\n  cursor: var(--component-checkbox-input-shared-cursor);\n  color: var(--component-checkbox-input-shared-color);\n}\n\n.stand-checkbox.md {\n  font: var(--component-checkbox-input-md-typography-font);\n  letter-spacing: var(--component-checkbox-input-md-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n    var(--component-checkbox-input-md-typography-font-width);\n}\n\n.stand-checkbox.sm {\n  font: var(--component-checkbox-input-sm-typography-font);\n  letter-spacing: var(--component-checkbox-input-sm-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n\tvar(--component-checkbox-input-sm-typography-font-width);\n}\n\n.stand-checkbox > label {\n  cursor: var(--component-checkbox-input-shared-cursor);\n}\n\n.stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: var(--component-checkbox-input-shared-cursor);\n  border: var(--component-checkbox-input-shared-indicator-border);\n  border-radius: var(--component-checkbox-input-shared-indicator-border-radius);\n  accent-color: var(\n    --component-checkbox-input-shared-indicator-selected-background-color\n  );\n}\n\n.stand-checkbox.md > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-md-indicator-size);\n  height: var(--component-checkbox-input-md-indicator-size);\n}\n\n.stand-checkbox.sm > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-sm-indicator-size);\n  height: var(--component-checkbox-input-sm-indicator-size);\n}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"stand-checkbox md\">\n    \t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n    \t<label for=\"terms\">Accept terms and conditions</label>\n  \t</div>\n\t<div class=\"stand-checkbox sm\">\n    \t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n    \t<label for=\"terms\">Required option</label>\n  \t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentCheckbox } 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  .js-stand-checkbox {\n\tdisplay: ${componentCheckbox.input.shared.display};\n\tposition: ${componentCheckbox.input.shared.position};\n\talign-items: ${componentCheckbox.input.shared['align-items']};\n\tgap: ${componentCheckbox.input.shared.gap};\n\tcursor: ${componentCheckbox.input.shared.cursor};\n\tcolor: ${componentCheckbox.input.shared.color};\n\tfont: ${componentCheckbox.input.md.typography.font};\n\tletter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n  }\n\n  .js-stand-checkbox.md {\n\tfont: ${componentCheckbox.input.md.typography.font};\n\tletter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n  }\n\n  .js-stand-checkbox.sm {\n\tfont: ${componentCheckbox.input.sm.typography.font};\n\tletter-spacing: ${componentCheckbox.input.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.sm.typography.fontWidth};\n  }\n\n  .js-stand-checkbox > label {\n\tcursor: ${componentCheckbox.input.shared.cursor};\n  }\n\n  .js-stand-checkbox-indicator {\n\t/* Reset browser default styles for checkboxes */\n\tmargin: 0;\n\tbackground-color: transparent;\n\toutline: none;\n\n\t/* component styles */\n\tcursor: ${componentCheckbox.input.shared.cursor};\n\tborder: ${componentCheckbox.input.shared.indicator.border};\n\tborder-radius: ${componentCheckbox.input.shared.indicator['border-radius']};\n\taccent-color: ${componentCheckbox.input.shared.indicator.selected['background-color']};\n  }\n\n  .js-stand-checkbox.md > .js-stand-checkbox-indicator {\n\twidth: ${componentCheckbox.input.md.indicator.size};\n\theight: ${componentCheckbox.input.md.indicator.size};\n  }\n\n  .js-stand-checkbox.sm > .js-stand-checkbox-indicator {\n\twidth: ${componentCheckbox.input.sm.indicator.size};\n\theight: ${componentCheckbox.input.sm.indicator.size};\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>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"js-stand-checkbox md\">\n\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n\t\t<label for=\"terms\">Accept terms and conditions</label>\n\t</div>\n\t<div class=\"js-stand-checkbox sm\">\n\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n\t\t<label for=\"terms\">Required option</label>\n\t</div>\n</div>\n`;\n\n";

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

@@ -0,0 +1,10 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentCheckbox } from '../../styleD/build/typescript/component/checkbox';
+import type { Prettify } from '../../util/types';
+import type { CheckboxGroupProps, CheckboxProps } from './types';
+export type CheckboxTheme = Prettify<ComponentCheckbox>;
+export type PartialCheckboxTheme = Prettify<Partial<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;
+export declare const checkboxGroupStyles: (theme: CheckboxTheme, { size }: Required<Pick<CheckboxGroupProps, 'size'>>, hasError?: boolean) => SerializedStyles;

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

@@ -0,0 +1,11 @@
+import type { CheckboxGroupProps as RACCheckboxGroupProps, CheckboxProps as RACCheckboxProps } from 'react-aria-components';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { FormInputContainerDefaultProps } from '../form/types';
+import type { CheckboxTheme } from './styles';
+export interface CheckboxProps extends DefaultPropsWithChildren<CheckboxTheme, RACCheckboxProps['className']>, Omit<RACCheckboxProps, 'children'> {
+    /**
+     * Size variant of the Checkbox
+     */
+    size?: keyof Omit<CheckboxTheme['input'], 'shared'>;
+}
+export type CheckboxGroupProps = FormInputContainerDefaultProps<RACCheckboxGroupProps, CheckboxTheme['group']>;

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

@@ -36,5 +36,5 @@ export type FormInputContainerDefaultProps<ReactAriaInput extends {
  * The React Aria form container components FormInputContainer supports.
  * Add new components here
  */
-export declare const ALLOWED_FORM_CONTAINERS: readonly [(props: import("react-aria-components").TextFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T extends object = {}, M extends "single" | "multiple" = "single">(props: import("react-aria-components").SelectProps<T, M> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
+export declare const ALLOWED_FORM_CONTAINERS: readonly [(props: import("react-aria-components").TextFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T extends object = {}, M extends "single" | "multiple" = "single">(props: import("react-aria-components").SelectProps<T, M> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
 export type AllowedContainer = (typeof ALLOWED_FORM_CONTAINERS)[number];

package/dist/types/components/inline-message/styles.d.ts

@@ -6,3 +6,4 @@ export type InlineMessageTheme = Prettify<ComponentInlineMessage>;
 export type PartialInlineMessageTheme = DeepPartial<InlineMessageTheme>;
 export declare const defaultInlineMessageTheme: InlineMessageTheme;
 export declare const inlineMessageStyles: (theme: InlineMessageTheme, { level }: Required<Pick<InlineMessageProps, 'level'>>) => SerializedStyles;
+export declare const inlineMessageIconStyles: (theme: InlineMessageTheme) => SerializedStyles;

package/dist/types/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupProps, RadioProps } from './types';
+export declare function RadioGroup({ size, isInvalid, theme, children, ...props }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Radio({ theme, size, children, isInvalid, ...props }: RadioProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/radio-group/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "RadioGroup";
+export declare const componentTsx = "import { Radio, RadioGroup } from '@guardian/stand/radio-group';\n\nexport const Component = () => (\n\t<RadioGroup\n\t\tlabel=\"Option\"\n\t\tdescription=\"This is a description for the radio button input\"\n\t>\n\t\t<Radio value=\"one\">Option 1</Radio>\n\t\t<Radio value=\"two\">Option 2</Radio>\n\t</RadioGroup>\n);\n";
+export declare const componentCss = "\n/* import the radiogroup styles */\n@import '@guardian/stand/component/radioGroup.css';\n@import '@guardian/stand/component/form.css';\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 > 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 > 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/* radiogroup styles */\n\n.stand-radio-group {\n\tdisplay: var(--component-radio-group-shared-display);\n\tflex-direction: var(--component-radio-group-shared-flex-direction);\n\tgap: var(--component-radio-group-md-gap);\n\tmargin-top: var(--component-radio-group-shared-margin-top);\n\tmargin-bottom: var(--component-radio-group-shared-margin-bottom);\n}\n\n.stand-radio {\n\tdisplay: var(--component-radio-group-shared-radio-display);\n\talign-items: var(--component-radio-group-shared-radio-align-items);\n\tgap: var(--component-radio-group-shared-radio-gap);\n\tfont: var(--component-radio-group-md-typography-font);\n\tletter-spacing: var(--component-radio-group-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-radio-group-md-typography-font-width);\n\tcolor: var(--component-radio-group-shared-radio-color);\n}\n\n.stand-radio input {\n\tposition: var(--component-radio-group-shared-indicator-position);\n\twidth: var(--component-radio-group-md-indicator-width);\n\theight: var(--component-radio-group-md-indicator-height);\n\tborder-radius: var(--component-radio-group-shared-indicator-border-radius);\n\tborder: var(--component-radio-group-shared-indicator-border);\n}\n\n.stand-radio > input::after {\n\tcontent: '';\n\tposition: var(--component-radio-group-shared-indicator-after-position);\n\tborder-radius: var(--component-radio-group-shared-indicator-after-border-radius);\n\tinset: var(--component-radio-group-shared-indicator-after-inset);\n\tscale: var(--component-radio-group-shared-indicator-after-scale);\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n<div class=\"stand-form-input-container\">\n\t<label>Options</label>\n\t<span class=\"description\">This is a description for the radio group.</span>\n\t<div class=\"stand-radio-group\">\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"one\" name=\"option\" />\n\t\t\t<label>Option 1</label>\n\t\t</div>\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"two\" name=\"option\" />\n\t\t\t<label>Option 2</label>\n\t\t</div>\n\t</div>\n</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentRadioGroup, componentForm } 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/* form input container styles */\n\n.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.stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.shared.label.font};\n\tletter-spacing: ${componentForm.input.shared.label.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.label.fontWidth};\n}\n\n.stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.font};\n\tletter-spacing: ${componentForm.input.shared.description.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.fontWidth};\n}\n\n.stand-radio-group {\n\tdisplay: ${componentRadioGroup.shared.display};\n\tflex-direction: ${componentRadioGroup.shared.flexDirection};\n\tgap: ${componentRadioGroup.md.gap};\n\tmargin-top: ${componentRadioGroup.shared.marginTop};\n\tmargin-bottom: ${componentRadioGroup.shared.marginBottom};\n}\n\n.stand-radio {\n\tdisplay: ${componentRadioGroup.shared.radio.display};\n\talign-items: ${componentRadioGroup.shared.radio.alignItems};\n\tgap: ${componentRadioGroup.shared.radio.gap};\n\tfont: ${componentRadioGroup.md.typography.font};\n\tletter-spacing: ${componentRadioGroup.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentRadioGroup.md.typography.fontWidth};\n\tcolor: ${componentRadioGroup.shared.radio.color};\n}\n\n.stand-radio input {\n\tposition: ${componentRadioGroup.shared.indicator.position};\n\twidth: ${componentRadioGroup.md.indicator.width};\n\theight: ${componentRadioGroup.md.indicator.height};\n\tborder-radius: ${componentRadioGroup.shared.indicator.borderRadius};\n\tborder: ${componentRadioGroup.shared.indicator.border};\n}\n\n.stand-radio > input::after {\n\tcontent: '';\n\tposition: ${componentRadioGroup.shared.indicator.after.position};\n\tborder-radius: ${componentRadioGroup.shared.indicator.after.borderRadius};\n\tinset: ${componentRadioGroup.shared.indicator.after.inset};\n\tscale: ${componentRadioGroup.shared.indicator.after.scale};\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\">\n<div class=\"stand-form-input-container\">\n\t<label>Options</label>\n\t<span class=\"description\">This is a description for the radio group.</span>\n\t<div class=\"stand-radio-group\">\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"one\" name=\"option\" />\n\t\t\t<label>Option 1</label>\n\t\t</div>\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"two\" name=\"option\" />\n\t\t\t<label>Option 2</label>\n\t\t</div>\n\t</div>\n</div>\n</div>\n`;\n";

package/dist/types/components/radio-group/styles.d.ts

@@ -0,0 +1,9 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentRadioGroup } from '../../styleD/build/typescript/component/radioGroup';
+import type { Prettify } from '../../util/types';
+import type { RadioGroupProps } from './types';
+export type RadioGroupTheme = Prettify<ComponentRadioGroup>;
+export declare const defaultRadioGroupTheme: RadioGroupTheme;
+export declare const radioGroupStyles: (theme: RadioGroupTheme, { size }: Required<Pick<RadioGroupProps, 'size'>>) => SerializedStyles;
+export declare const radioStyles: (theme: RadioGroupTheme, { size, isInvalid }: Required<Pick<RadioGroupProps, 'size' | 'isInvalid'>>) => SerializedStyles;
+export declare const radioIndicatorStyles: (theme: RadioGroupTheme, { size, isInvalid }: Required<Pick<RadioGroupProps, 'size' | 'isInvalid'>>) => SerializedStyles;

package/dist/types/components/radio-group/types.d.ts

@@ -0,0 +1,10 @@
+import type { RadioGroupProps as RACRadioGroupProps, RadioProps as RACRadioProps } from 'react-aria-components';
+import type { DefaultProps } from '../../util/types';
+import type { FormInputContainerDefaultProps } from '../form/types';
+import type { RadioGroupTheme } from './styles';
+export type RadioGroupProps = FormInputContainerDefaultProps<RACRadioGroupProps, RadioGroupTheme>;
+export interface RadioProps extends DefaultProps<RadioGroupTheme, RACRadioProps['className']>, RACRadioProps {
+    size?: keyof Omit<RadioGroupTheme, 'shared'>;
+    /** Whether the input value is invalid. */
+    isInvalid?: boolean;
+}

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;
+}