@guardian/stand 0.0.26 → 0.0.28

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

@@ -6,8 +6,20 @@
 	--component-top-bar-background-color: #f6f6f6;
 	--component-top-bar-display: flex;
 	--component-top-bar-height: 4rem;
-	--component-top-bar-justify-content: space-between;
+	--component-top-bar-justify-content: flex-start;
 	--component-top-bar-border: 0.0625rem solid #cccccc;
+	--component-top-bar-spacer-margin-left: auto;
+	--component-top-bar-collapsed-nav-menu-button-margin: 0;
+	--component-top-bar-collapsed-nav-menu-button-padding: 0;
+	--component-top-bar-collapsed-nav-menu-button-background: none;
+	--component-top-bar-collapsed-nav-menu-button-border: none;
+	--component-top-bar-collapsed-nav-menu-button-cursor: pointer;
+	--component-top-bar-collapsed-nav-menu-button-hovered-background-color: #ededed;
+	--component-top-bar-collapsed-nav-menu-button-active-background-color: #ededed;
+	--component-top-bar-collapsed-nav-menu-popover-left: auto !important;
+	--component-top-bar-collapsed-nav-menu-popover-top: auto !important;
+	--component-top-bar-collapsed-nav-menu-popover-background-color: #f6f6f6;
+	--component-top-bar-collapsed-nav-menu-popover-border: 0.0625rem solid #cccccc;
 	--component-top-bar-item-display: flex;
 	--component-top-bar-item-align-items: center;
 	--component-top-bar-item-height: 100%;
@@ -41,6 +53,9 @@
 	--component-top-bar-navigation-shared-focus-visible-outline-offset: -0.0625rem;
 	--component-top-bar-navigation-shared-border-top: 0.5rem solid transparent;
 	--component-top-bar-navigation-shared-divider: 0.0625rem solid #cccccc;
+	--component-top-bar-navigation-shared-menu-open-width: 100%;
+	--component-top-bar-navigation-shared-menu-open-height: 64px;
+	--component-top-bar-navigation-shared-menu-open-selected-background-color: #ededed;
 	--component-top-bar-navigation-text-margin-left: 0.375rem;
 	--component-top-bar-navigation-menu-indicator-margin-top: 0.375rem;
 	--component-top-bar-navigation-menu-indicator-margin-left: 0.125rem;
@@ -94,4 +109,7 @@
 	--component-top-bar-tool-name-hover-link-focused-outline: 0.125rem solid
 		#0072a9;
 	--component-top-bar-tool-name-hover-link-focused-outline-offset: -0.125rem;
+	--component-top-bar-tool-name-hover-link-collapsed-padding-left: 0.25rem;
+	--component-top-bar-tool-name-hover-link-collapsed-padding-right: 0.25rem;
+	--component-top-bar-tool-name-hover-link-collapsed-justify-content: center;
 }

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

@@ -15,12 +15,10 @@
 	--component-form-input-shared-description-typography-letter-spacing: 0;
 	--component-form-input-shared-description-typography-font-width: 95;
 	--component-form-input-shared-description-disabled-color: #999999;
-	--component-form-input-sm-container-max-width: 200px;
 	--component-form-input-sm-label-typography-font: normal 700 0.875rem/1.15
 		'Open Sans';
 	--component-form-input-sm-label-typography-letter-spacing: -0.0125rem;
 	--component-form-input-sm-label-typography-font-width: 95;
-	--component-form-input-md-container-max-width: 320px;
 	--component-form-input-md-label-typography-font: normal 700 1rem/1.15
 		'Open Sans';
 	--component-form-input-md-label-typography-letter-spacing: -0.03125rem;

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

@@ -3,7 +3,6 @@
  */
 
 :root {
-	--component-select-shared-max-width: 320px;
 	--component-select-shared-width: 100%;
 	--component-select-shared-hover-background-color: #f6f6f6;
 	--component-select-shared-hover-outline: none; /** Override outline focus styles on hover */

package/dist/styleD/build/css/semantic/breakpoints.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-breakpoints-sm-min: 0;
+	--semantic-breakpoints-sm-max: 671px;
+	--semantic-breakpoints-md-min: 672px;
+	--semantic-breakpoints-md-max: 1055px;
+	--semantic-breakpoints-lg-min: 1056px;
+	--semantic-breakpoints-lg-max: 1311px;
+	--semantic-breakpoints-xl-min: 1312px;
+	--semantic-breakpoints-xl-max: 1583px;
+	--semantic-breakpoints-max-min: 1584px;
+	--semantic-breakpoints-max-max: 1783px;
+	--semantic-breakpoints-maxplus-min: 1784px;
+	--semantic-breakpoints-maxplus-max: initial;
+}

package/dist/styleD/build/css/semantic/colors.css

@@ -48,6 +48,10 @@
 	--semantic-colors-fill-weak-hover: #f6f6f6;
 	--semantic-colors-fill-weak-pressed: #ededed;
 	--semantic-colors-fill-disabled: #dcdcdc;
+	--semantic-colors-fill-disabled-inverse: #666666;
+	--semantic-colors-fill-link: #00496c;
+	--semantic-colors-fill-link-hover: #00344e;
+	--semantic-colors-fill-link-pressed: #00202f;
 	--semantic-colors-fill-green-weak: #cde4c9;
 	--semantic-colors-fill-blue-weak: #c5d9f4;
 	--semantic-colors-fill-red-weak: #f5c6c0;

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

@@ -4,8 +4,32 @@ const componentTopBar = {
   "background-color": "#f6f6f6",
   display: "flex",
   height: "4rem",
-  "justify-content": "space-between",
+  "justify-content": "flex-start",
   border: "0.0625rem solid #cccccc",
+  spacer: {
+    "margin-left": "auto"
+  },
+  collapsedNavMenu: {
+    button: {
+      margin: "0",
+      padding: "0",
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      hovered: {
+        "background-color": "#ededed"
+      },
+      active: {
+        "background-color": "#ededed"
+      }
+    },
+    popover: {
+      left: "auto !important",
+      top: "auto !important",
+      "background-color": "#f6f6f6",
+      border: "0.0625rem solid #cccccc"
+    }
+  },
   Item: {
     display: "flex",
     "align-items": "center",
@@ -59,7 +83,14 @@ const componentTopBar = {
         "outline-offset": "-0.0625rem"
       },
       "border-top": "0.5rem solid transparent",
-      divider: "0.0625rem solid #cccccc"
+      divider: "0.0625rem solid #cccccc",
+      _menuOpen: {
+        width: "100%",
+        height: "64px",
+        selected: {
+          "background-color": "#ededed"
+        }
+      }
     },
     text: {
       margin: {
@@ -147,6 +178,11 @@ const componentTopBar = {
       focused: {
         outline: "0.125rem solid #0072a9",
         "outline-offset": "-0.125rem"
+      },
+      collapsed: {
+        paddingLeft: "0.25rem",
+        paddingRight: "0.25rem",
+        "justify-content": "center"
       }
     }
   }

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

@@ -2,8 +2,32 @@ const componentTopBar = {
   "background-color": "#f6f6f6",
   display: "flex",
   height: "4rem",
-  "justify-content": "space-between",
+  "justify-content": "flex-start",
   border: "0.0625rem solid #cccccc",
+  spacer: {
+    "margin-left": "auto"
+  },
+  collapsedNavMenu: {
+    button: {
+      margin: "0",
+      padding: "0",
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      hovered: {
+        "background-color": "#ededed"
+      },
+      active: {
+        "background-color": "#ededed"
+      }
+    },
+    popover: {
+      left: "auto !important",
+      top: "auto !important",
+      "background-color": "#f6f6f6",
+      border: "0.0625rem solid #cccccc"
+    }
+  },
   Item: {
     display: "flex",
     "align-items": "center",
@@ -57,7 +81,14 @@ const componentTopBar = {
         "outline-offset": "-0.0625rem"
       },
       "border-top": "0.5rem solid transparent",
-      divider: "0.0625rem solid #cccccc"
+      divider: "0.0625rem solid #cccccc",
+      _menuOpen: {
+        width: "100%",
+        height: "64px",
+        selected: {
+          "background-color": "#ededed"
+        }
+      }
     },
     text: {
       margin: {
@@ -145,6 +176,11 @@ const componentTopBar = {
       focused: {
         outline: "0.125rem solid #0072a9",
         "outline-offset": "-0.125rem"
+      },
+      collapsed: {
+        paddingLeft: "0.25rem",
+        paddingRight: "0.25rem",
+        "justify-content": "center"
       }
     }
   }

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

@@ -28,9 +28,6 @@ const componentForm = {
       }
     },
     sm: {
-      container: {
-        "max-width": "200px"
-      },
       label: {
         typography: {
           font: "normal 700 0.875rem/1.15 Open Sans",
@@ -40,9 +37,6 @@ const componentForm = {
       }
     },
     md: {
-      container: {
-        "max-width": "320px"
-      },
       label: {
         typography: {
           font: "normal 700 1rem/1.15 Open Sans",

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

@@ -26,9 +26,6 @@ const componentForm = {
       }
     },
     sm: {
-      container: {
-        "max-width": "200px"
-      },
       label: {
         typography: {
           font: "normal 700 0.875rem/1.15 Open Sans",
@@ -38,9 +35,6 @@ const componentForm = {
       }
     },
     md: {
-      container: {
-        "max-width": "320px"
-      },
       label: {
         typography: {
           font: "normal 700 1rem/1.15 Open Sans",

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

@@ -2,7 +2,6 @@
 
 const componentSelect = {
   shared: {
-    maxWidth: "320px",
     width: "100%",
     hover: {
       backgroundColor: "#f6f6f6",

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

@@ -1,6 +1,5 @@
 const componentSelect = {
   shared: {
-    maxWidth: "320px",
     width: "100%",
     hover: {
       backgroundColor: "#f6f6f6",

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

@@ -0,0 +1,30 @@
+'use strict';
+
+const semanticBreakpoints = {
+  sm: {
+    min: "0",
+    max: "671px"
+  },
+  md: {
+    min: "672px",
+    max: "1055px"
+  },
+  lg: {
+    min: "1056px",
+    max: "1311px"
+  },
+  xl: {
+    min: "1312px",
+    max: "1583px"
+  },
+  max: {
+    min: "1584px",
+    max: "1783px"
+  },
+  maxplus: {
+    min: "1784px",
+    max: "initial"
+  }
+};
+
+exports.semanticBreakpoints = semanticBreakpoints;

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

@@ -0,0 +1,28 @@
+const semanticBreakpoints = {
+  sm: {
+    min: "0",
+    max: "671px"
+  },
+  md: {
+    min: "672px",
+    max: "1055px"
+  },
+  lg: {
+    min: "1056px",
+    max: "1311px"
+  },
+  xl: {
+    min: "1312px",
+    max: "1583px"
+  },
+  max: {
+    min: "1584px",
+    max: "1783px"
+  },
+  maxplus: {
+    min: "1784px",
+    max: "initial"
+  }
+};
+
+export { semanticBreakpoints };

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

@@ -53,6 +53,10 @@ const semanticColors = {
     "weak-hover": "#f6f6f6",
     "weak-pressed": "#ededed",
     disabled: "#dcdcdc",
+    "disabled-inverse": "#666666",
+    link: "#00496c",
+    "link-hover": "#00344e",
+    "link-pressed": "#00202f",
     "green-weak": "#cde4c9",
     "blue-weak": "#c5d9f4",
     "red-weak": "#f5c6c0",

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

@@ -51,6 +51,10 @@ const semanticColors = {
     "weak-hover": "#f6f6f6",
     "weak-pressed": "#ededed",
     disabled: "#dcdcdc",
+    "disabled-inverse": "#666666",
+    link: "#00496c",
+    "link-hover": "#00344e",
+    "link-pressed": "#00202f",
     "green-weak": "#cde4c9",
     "blue-weak": "#c5d9f4",
     "red-weak": "#f5c6c0",

package/dist/styleD/utils/semantic/mq.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var breakpoints = require('../../build/typescript/semantic/breakpoints.cjs');
+
+const smidgen = 0.1;
+const parseMinPx = (value) => value === "0" ? 0 : parseFloat(value);
+const minWidthQuery = (px) => `@media (min-width: ${px}px)`;
+const maxWidthQuery = (px) => `@media (max-width: ${px - smidgen}px)`;
+const minMaxWidthQuery = (minPx, maxPx) => `@media (min-width: ${minPx}px) and (max-width: ${maxPx - smidgen}px)`;
+const from = Object.fromEntries(
+  Object.entries(breakpoints.semanticBreakpoints).map(([name, { min }]) => [
+    name,
+    minWidthQuery(parseMinPx(min))
+  ])
+);
+const until = Object.fromEntries(
+  Object.entries(breakpoints.semanticBreakpoints).map(([name, { min }]) => [
+    name,
+    maxWidthQuery(parseMinPx(min))
+  ])
+);
+const between = Object.fromEntries(
+  Object.entries(breakpoints.semanticBreakpoints).map(([fromName, { min: fromMin }]) => [
+    fromName,
+    {
+      and: Object.fromEntries(
+        Object.entries(breakpoints.semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, { min: toMin }]) => [
+          toName,
+          minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
+        ])
+      )
+    }
+  ])
+);
+
+exports.between = between;
+exports.from = from;
+exports.until = until;

package/dist/styleD/utils/semantic/mq.js

@@ -0,0 +1,26 @@
+import { semanticBreakpoints } from '../../build/typescript/semantic/breakpoints.js';
+
+const smidgen = 0.1;
+const parseMinPx = (value) => value === "0" ? 0 : parseFloat(value);
+const minWidthQuery = (px) => `@media (min-width: ${px}px)`;
+const maxWidthQuery = (px) => `@media (max-width: ${px - smidgen}px)`;
+const minMaxWidthQuery = (minPx, maxPx) => `@media (min-width: ${minPx}px) and (max-width: ${maxPx - smidgen}px)`;
+const from = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, { min }]) => [
+  name,
+  minWidthQuery(parseMinPx(min))
+]));
+const until = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, { min }]) => [
+  name,
+  maxWidthQuery(parseMinPx(min))
+]));
+const between = Object.fromEntries(Object.entries(semanticBreakpoints).map(([fromName, { min: fromMin }]) => [
+  fromName,
+  {
+    and: Object.fromEntries(Object.entries(semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, { min: toMin }]) => [
+      toName,
+      minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
+    ]))
+  }
+]));
+
+export { between, from, until };

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

@@ -1,5 +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 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 > 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";
+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 > 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/form/styles.d.ts

@@ -3,9 +3,7 @@ import type { ComponentForm } from '../../styleD/build/typescript/component/form
 import type { Prettify } from '../../util/types';
 export type FormInputContainerTheme = Prettify<ComponentForm['input']>;
 export declare const defaultFormInputContainerTheme: FormInputContainerTheme;
-export declare const formInputContainerStyles: (theme: FormInputContainerTheme, { size, }: {
-    size: keyof Omit<FormInputContainerTheme, 'shared'>;
-}) => SerializedStyles;
+export declare const formInputContainerStyles: (theme: FormInputContainerTheme) => SerializedStyles;
 export declare const formInputLabelStyles: (theme: FormInputContainerTheme, { isDisabled, size, }: {
     size: keyof Omit<FormInputContainerTheme, 'shared'>;
     isDisabled?: boolean | undefined;

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

@@ -1,5 +1,5 @@
 export declare const componentName = "Select";
-export declare const componentTsx = "import { Select } from '@guardian/stand/select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
-export declare const componentCss = "\n/* import the select styles */\n@import '@guardian/stand/component/select.css';\n\n.stand-select-container {\n\tdisplay: var(--component-select-shared-display);\n\tflex-direction: var(--component-select-shared-flex-direction);\n\tgap: var(--component-select-shared-gap);\n\n\tmax-width: var(--component-select-shared-maxWidth);\n\twidth: var(--component-select-shared-width);\n}\n\n.stand-select {\n\t\tdisplay: var(--component-select-button-display);\n\t\tjustify-content: var(--component-select-button-justify-content);\n\t\talign-items: var(--component-select-button-align-items);\n\t\tbackground-color: var(--component-select-button-background-color);\n\t\tborder: var(--component-select-button-border);\n\t\tborder-radius: var(--component-select-button-border-radius);\n\t\theight: var(--component-select-button-height);\n\t\tpadding-left: var(--component-select-button-padding-left);\n\t\tpadding-right: var(--component-select-button-padding-right);\n\t\tmargin-top: var(--component-select-button-margin-top);\n\t\tcolor: var(--component-select-button-color);\n\n\t\tfont: var(--component-select-button-body-md-typography-font);\n\t\tletter-spacing: var(--component-select-button-body-md-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-select-button-body-md-typography-font-width);\n\n\n\t\t&:hover {\n\t\t\tbackground: var(--component-select-shared-hover-background-color);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--component-select-shared-active-background-color);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: var(--component-select-button-focused-outline);\n\t\t\toutline-offset: var(--component-select-button-focused-outline-offset);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: var(--component-select-button-disabled-cursor);\n\t\t\tbackground-color: var(--component-select-button-disabled-background-color);\n\t\t\tcolor: var(--component-select-button-disabled-color);\n\t\t\tborder: var(--component-select-button-disabled-border);\n\t\t}\n}\n";
+export declare const componentTsx = "import { Option, Select } from '@guardian/stand/select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
+export declare const componentCss = "\n/* import the select styles */\n@import '@guardian/stand/component/select.css';\n@import '@guardian/stand/component/form.css';\n\n.stand-select-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-select-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-select-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-select {\n\t\tdisplay: var(--component-select-shared-button-display);\n\t\tjustify-content: var(--component-select-shared-button-justify-content);\n\t\talign-items: var(--component-select-shared-button-align-items);\n\t\tbackground-color: var(--component-select-shared-button-background-color);\n\t\tborder: var(--component-select-shared-button-border);\n\t\tborder-radius: var(--component-select-shared-button-border-radius);\n\t\theight: var(--component-select-shared-button-height);\n\t\tpadding-left: var(--component-select-shared-button-padding-left);\n\t\tpadding-right: var(--component-select-shared-button-padding-right);\n\t\tmargin-top: var(--component-select-shared-button-margin-top);\n\t\tcolor: var(--component-select-shared-button-color);\n\n\t\tfont: var(--component-select-shared-button-body-md-typography-font);\n\t\tletter-spacing: var(--component-select-shared-button-body-md-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-select-shared-button-body-md-typography-font-width);\n\n\n\t\t&:hover {\n\t\t\tbackground: var(--component-select-shared-hover-background-color);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--component-select-shared-active-background-color);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: var(--component-select-button-focused-outline);\n\t\t\toutline-offset: var(--component-select-button-focused-outline-offset);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: var(--component-select-button-disabled-cursor);\n\t\t\tbackground-color: var(--component-select-button-disabled-background-color);\n\t\t\tcolor: var(--component-select-button-disabled-color);\n\t\t\tborder: var(--component-select-button-disabled-border);\n\t\t}\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentSelect } 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\n.js-stand-select-container {\n\tdisplay: ${componentSelect.shared.display};\n\tflex-direction: ${componentSelect.shared.flexDirection};\n\tgap: ${componentSelect.shared.gap};\n\n\tmax-width: ${componentSelect.shared.maxWidth};\n\twidth: ${componentSelect.shared.width};\n}\n\n.js-stand-select {\n\tdisplay: ${componentSelect.button.display};\n\tjustify-content: ${componentSelect.button.justifyContent};\n\talign-items: ${componentSelect.button.alignItems};\n\tbackground-color: ${componentSelect.button.backgroundColor};\n\tborder: ${componentSelect.button.border};\n\tborder-radius: ${componentSelect.button.borderRadius};\n\theight: ${componentSelect.button.height};\n\tpadding-left: ${componentSelect.button.paddingLeft};\n\tpadding-right: ${componentSelect.button.paddingRight};\n\tmargin-top: ${componentSelect.button.marginTop};\n\tcolor: ${componentSelect.button.color};\n\n\tfont: ${componentSelect.button.typography.font};\n\tletter-spacing: ${componentSelect.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.button.typography.fontWidth};\n\n\t&:hover {\n\t\tbackground: ${componentSelect.shared.hover.backgroundColor};\n\t}\n\n\t&:active {\n\t\tbackground: ${componentSelect.shared.pressed.backgroundColor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentSelect.button.focused.outline};\n\t\toutline-offset: ${componentSelect.button.focused['outline-offset']};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.button.disabled.color};\n\t\tborder: ${componentSelect.button.disabled.border};\n\t}\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"js-stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n`;\n";
+export declare const componentJs = "\nimport { componentForm, componentSelect } 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\n.js-stand-select-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-select-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-select-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.js-stand-select {\n\tdisplay: ${componentSelect.shared.button.display};\n\tjustify-content: ${componentSelect.shared.button.justifyContent};\n\talign-items: ${componentSelect.shared.button.alignItems};\n\tbackground-color: ${componentSelect.shared.button.backgroundColor};\n\tborder: ${componentSelect.shared.button.border};\n\tborder-radius: ${componentSelect.shared.button.borderRadius};\n\theight: ${componentSelect.shared.button.height};\n\tpadding-left: ${componentSelect.shared.button.paddingLeft};\n\tpadding-right: ${componentSelect.shared.button.paddingRight};\n\tmargin-top: ${componentSelect.shared.button.marginTop};\n\tcolor: ${componentSelect.shared.button.color};\n\n\tfont: ${componentSelect.shared.button.typography.font};\n\tletter-spacing: ${componentSelect.shared.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.shared.button.typography.fontWidth};\n\n\t&:hover {\n\t\tbackground: ${componentSelect.shared.hover.backgroundColor};\n\t}\n\n\t&:active {\n\t\tbackground: ${componentSelect.shared.pressed.backgroundColor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentSelect.shared.button.focused.outline};\n\t\toutline-offset: ${componentSelect.shared.button.focused['outline-offset']};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.shared.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.shared.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.shared.button.disabled.color};\n\t\tborder: ${componentSelect.shared.button.disabled.border};\n\t}\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"js-stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n`;\n";

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

@@ -1,5 +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 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 > 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";
+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 > 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";