@guardian/stand 0.0.34 → 0.0.36

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

@@ -5,22 +5,22 @@
 :root {
 	--semantic-typography-title-sm-font: normal 700 1.125rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-sm-letter-spacing: 0rem;
+	--semantic-typography-title-sm-letter-spacing: 0;
 	--semantic-typography-title-sm-font-width: 100;
 	--semantic-typography-title-md-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-md-letter-spacing: 0rem;
+	--semantic-typography-title-md-letter-spacing: 0;
 	--semantic-typography-title-md-font-width: 100;
 	--semantic-typography-title-lg-font: normal 700 1.5rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-lg-letter-spacing: 0rem;
+	--semantic-typography-title-lg-letter-spacing: 0;
 	--semantic-typography-title-lg-font-width: 100;
 	--semantic-typography-title-xl-font: normal 700 2rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-xl-letter-spacing: 0rem;
+	--semantic-typography-title-xl-letter-spacing: 0;
 	--semantic-typography-title-xl-font-width: 100;
 	--semantic-typography-heading-xs-font: normal 700 0.75rem/1.15 'Open Sans';
-	--semantic-typography-heading-xs-letter-spacing: 0rem;
+	--semantic-typography-heading-xs-letter-spacing: 0;
 	--semantic-typography-heading-xs-font-width: 95;
 	--semantic-typography-heading-sm-font: normal 700 0.875rem/1.15 'Open Sans';
 	--semantic-typography-heading-sm-letter-spacing: -0.0125rem;
@@ -39,11 +39,11 @@
 	--semantic-typography-heading-2xl-font-width: 95;
 	--semantic-typography-heading-compact-xs-font: normal 700 0.75rem/1.15
 		'Open Sans';
-	--semantic-typography-heading-compact-xs-letter-spacing: 0rem;
+	--semantic-typography-heading-compact-xs-letter-spacing: 0;
 	--semantic-typography-heading-compact-xs-font-width: 88;
 	--semantic-typography-heading-compact-sm-font: normal 700 0.875rem/1.15
 		'Open Sans';
-	--semantic-typography-heading-compact-sm-letter-spacing: 0rem;
+	--semantic-typography-heading-compact-sm-letter-spacing: 0;
 	--semantic-typography-heading-compact-sm-font-width: 88;
 	--semantic-typography-heading-compact-md-font: normal 700 1rem/1.15
 		'Open Sans';
@@ -62,171 +62,171 @@
 	--semantic-typography-heading-compact-2xl-letter-spacing: -0.03125rem;
 	--semantic-typography-heading-compact-2xl-font-width: 88;
 	--semantic-typography-body-xs-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-body-xs-letter-spacing: 0rem;
+	--semantic-typography-body-xs-letter-spacing: 0;
 	--semantic-typography-body-xs-font-width: 95;
 	--semantic-typography-body-sm-font: normal 460 0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-sm-letter-spacing: 0rem;
+	--semantic-typography-body-sm-letter-spacing: 0;
 	--semantic-typography-body-sm-font-width: 95;
 	--semantic-typography-body-md-font: normal 460 1rem/1.3 'Open Sans';
-	--semantic-typography-body-md-letter-spacing: 0rem;
+	--semantic-typography-body-md-letter-spacing: 0;
 	--semantic-typography-body-md-font-width: 95;
 	--semantic-typography-body-lg-font: normal 460 1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-lg-letter-spacing: 0rem;
+	--semantic-typography-body-lg-letter-spacing: 0;
 	--semantic-typography-body-lg-font-width: 95;
 	--semantic-typography-body-xl-font: normal 460 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-xl-letter-spacing: 0rem;
+	--semantic-typography-body-xl-letter-spacing: 0;
 	--semantic-typography-body-xl-font-width: 95;
 	--semantic-typography-body-bold-xs-font: normal 700 0.75rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-xs-letter-spacing: 0rem;
+	--semantic-typography-body-bold-xs-letter-spacing: 0;
 	--semantic-typography-body-bold-xs-font-width: 95;
 	--semantic-typography-body-bold-sm-font: normal 700 0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-sm-letter-spacing: 0rem;
+	--semantic-typography-body-bold-sm-letter-spacing: 0;
 	--semantic-typography-body-bold-sm-font-width: 95;
 	--semantic-typography-body-bold-md-font: normal 700 1rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-md-letter-spacing: 0rem;
+	--semantic-typography-body-bold-md-letter-spacing: 0;
 	--semantic-typography-body-bold-md-font-width: 95;
 	--semantic-typography-body-bold-lg-font: normal 700 1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-lg-letter-spacing: 0rem;
+	--semantic-typography-body-bold-lg-letter-spacing: 0;
 	--semantic-typography-body-bold-lg-font-width: 95;
 	--semantic-typography-body-bold-xl-font: normal 700 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-bold-xl-letter-spacing: 0rem;
+	--semantic-typography-body-bold-xl-letter-spacing: 0;
 	--semantic-typography-body-bold-xl-font-width: 95;
 	--semantic-typography-body-italic-xs-font: italic 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-xs-letter-spacing: 0rem;
+	--semantic-typography-body-italic-xs-letter-spacing: 0;
 	--semantic-typography-body-italic-xs-font-width: 95;
 	--semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-sm-letter-spacing: 0rem;
+	--semantic-typography-body-italic-sm-letter-spacing: 0;
 	--semantic-typography-body-italic-sm-font-width: 95;
 	--semantic-typography-body-italic-md-font: italic 460 1rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-md-letter-spacing: 0rem;
+	--semantic-typography-body-italic-md-letter-spacing: 0;
 	--semantic-typography-body-italic-md-font-width: 95;
 	--semantic-typography-body-italic-lg-font: italic 460 1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-lg-letter-spacing: 0rem;
+	--semantic-typography-body-italic-lg-letter-spacing: 0;
 	--semantic-typography-body-italic-lg-font-width: 95;
 	--semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-xl-letter-spacing: 0rem;
+	--semantic-typography-body-italic-xl-letter-spacing: 0;
 	--semantic-typography-body-italic-xl-font-width: 95;
 	--semantic-typography-body-italic-bold-xs-font: italic 700 0.75rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-xs-letter-spacing: 0rem;
+	--semantic-typography-body-italic-bold-xs-letter-spacing: 0;
 	--semantic-typography-body-italic-bold-xs-font-width: 95;
 	--semantic-typography-body-italic-bold-sm-font: italic 700 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-sm-letter-spacing: 0rem;
+	--semantic-typography-body-italic-bold-sm-letter-spacing: 0;
 	--semantic-typography-body-italic-bold-sm-font-width: 95;
 	--semantic-typography-body-italic-bold-md-font: italic 700 1rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-md-letter-spacing: 0rem;
+	--semantic-typography-body-italic-bold-md-letter-spacing: 0;
 	--semantic-typography-body-italic-bold-md-font-width: 95;
 	--semantic-typography-body-italic-bold-lg-font: italic 700 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-lg-letter-spacing: 0rem;
+	--semantic-typography-body-italic-bold-lg-letter-spacing: 0;
 	--semantic-typography-body-italic-bold-lg-font-width: 95;
 	--semantic-typography-body-italic-bold-xl-font: italic 700 1.25rem/1.3
 		'Open Sans';
-	--semantic-typography-body-italic-bold-xl-letter-spacing: 0rem;
+	--semantic-typography-body-italic-bold-xl-letter-spacing: 0;
 	--semantic-typography-body-italic-bold-xl-font-width: 95;
 	--semantic-typography-body-compact-xs-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-xs-letter-spacing: 0rem;
+	--semantic-typography-body-compact-xs-letter-spacing: 0;
 	--semantic-typography-body-compact-xs-font-width: 88;
 	--semantic-typography-body-compact-sm-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-sm-letter-spacing: 0rem;
+	--semantic-typography-body-compact-sm-letter-spacing: 0;
 	--semantic-typography-body-compact-sm-font-width: 88;
 	--semantic-typography-body-compact-md-font: normal 460 1rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-md-letter-spacing: 0rem;
+	--semantic-typography-body-compact-md-letter-spacing: 0;
 	--semantic-typography-body-compact-md-font-width: 88;
 	--semantic-typography-body-compact-lg-font: normal 460 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-lg-letter-spacing: 0rem;
+	--semantic-typography-body-compact-lg-letter-spacing: 0;
 	--semantic-typography-body-compact-lg-font-width: 88;
 	--semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-xl-letter-spacing: 0rem;
+	--semantic-typography-body-compact-xl-letter-spacing: 0;
 	--semantic-typography-body-compact-xl-font-width: 88;
 	--semantic-typography-body-compact-bold-xs-font: normal 700 0.75rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-xs-letter-spacing: 0rem;
+	--semantic-typography-body-compact-bold-xs-letter-spacing: 0;
 	--semantic-typography-body-compact-bold-xs-font-width: 88;
 	--semantic-typography-body-compact-bold-sm-font: normal 700 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-sm-letter-spacing: 0rem;
+	--semantic-typography-body-compact-bold-sm-letter-spacing: 0;
 	--semantic-typography-body-compact-bold-sm-font-width: 88;
 	--semantic-typography-body-compact-bold-md-font: normal 700 1rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-md-letter-spacing: 0rem;
+	--semantic-typography-body-compact-bold-md-letter-spacing: 0;
 	--semantic-typography-body-compact-bold-md-font-width: 88;
 	--semantic-typography-body-compact-bold-lg-font: normal 700 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-lg-letter-spacing: 0rem;
+	--semantic-typography-body-compact-bold-lg-letter-spacing: 0;
 	--semantic-typography-body-compact-bold-lg-font-width: 88;
 	--semantic-typography-body-compact-bold-xl-font: normal 700 1.25rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-bold-xl-letter-spacing: 0rem;
+	--semantic-typography-body-compact-bold-xl-letter-spacing: 0;
 	--semantic-typography-body-compact-bold-xl-font-width: 88;
 	--semantic-typography-body-compact-italic-xs-font: italic 460 0.75rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-xs-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-xs-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-xs-font-width: 88;
 	--semantic-typography-body-compact-italic-sm-font: italic 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-sm-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-sm-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-sm-font-width: 88;
 	--semantic-typography-body-compact-italic-md-font: italic 460 1rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-md-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-md-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-md-font-width: 88;
 	--semantic-typography-body-compact-italic-lg-font: italic 460 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-lg-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-lg-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-lg-font-width: 88;
 	--semantic-typography-body-compact-italic-xl-font: italic 460 1.25rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-xl-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-xl-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-xl-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-xs-font: italic 700 0.75rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-bold-xs-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-bold-xs-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-bold-xs-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-sm-font: italic 700
 		0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-italic-bold-sm-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-bold-sm-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-bold-sm-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-md-font: italic 700 1rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-bold-md-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-bold-md-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-bold-md-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-lg-font: italic 700
 		1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-italic-bold-lg-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-bold-lg-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-bold-lg-font-width: 88;
 	--semantic-typography-body-compact-italic-bold-xl-font: italic 700 1.25rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-bold-xl-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-bold-xl-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-bold-xl-font-width: 88;
 	--semantic-typography-meta-md-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-meta-md-letter-spacing: 0rem;
+	--semantic-typography-meta-md-letter-spacing: 0;
 	--semantic-typography-meta-md-font-width: 95;
 	--semantic-typography-meta-compact-md-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-meta-compact-md-letter-spacing: 0rem;
+	--semantic-typography-meta-compact-md-letter-spacing: 0;
 	--semantic-typography-meta-compact-md-font-width: 88;
 	--semantic-typography-article-body-md-font: normal 400 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-md-letter-spacing: 0rem;
+	--semantic-typography-article-body-md-letter-spacing: 0;
 	--semantic-typography-article-body-md-font-width: 100;
 	--semantic-typography-article-body-bold-md-font: normal 700 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-bold-md-letter-spacing: 0rem;
+	--semantic-typography-article-body-bold-md-letter-spacing: 0;
 	--semantic-typography-article-body-bold-md-font-width: 100;
 	--semantic-typography-article-body-italic-md-font: italic 400 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-italic-md-letter-spacing: 0rem;
+	--semantic-typography-article-body-italic-md-letter-spacing: 0;
 	--semantic-typography-article-body-italic-md-font-width: 100;
 	--semantic-typography-article-body-bold-italic-md-font: italic 700 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-bold-italic-md-letter-spacing: 0rem;
+	--semantic-typography-article-body-bold-italic-md-letter-spacing: 0;
 	--semantic-typography-article-body-bold-italic-md-font-width: 100;
 	--semantic-typography-interactive-xs-font: normal 700 0.75rem/1 'Open Sans';
-	--semantic-typography-interactive-xs-letter-spacing: 0rem;
+	--semantic-typography-interactive-xs-letter-spacing: 0;
 	--semantic-typography-interactive-xs-font-width: 95;
 	--semantic-typography-interactive-sm-font: normal 700 0.875rem/1 'Open Sans';
 	--semantic-typography-interactive-sm-letter-spacing: -0.0125rem;
@@ -242,15 +242,15 @@
 	--semantic-typography-label-form-md-font-width: 95;
 	--semantic-typography-label-form-inline-sm-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-label-form-inline-sm-letter-spacing: 0rem;
+	--semantic-typography-label-form-inline-sm-letter-spacing: 0;
 	--semantic-typography-label-form-inline-sm-font-width: 95;
 	--semantic-typography-label-form-inline-md-font: normal 460 1rem/1.3
 		'Open Sans';
-	--semantic-typography-label-form-inline-md-letter-spacing: 0rem;
+	--semantic-typography-label-form-inline-md-letter-spacing: 0;
 	--semantic-typography-label-form-inline-md-font-width: 95;
 	--semantic-typography-label-form-compact-sm-font: normal 700 0.875rem/1.15
 		'Open Sans';
-	--semantic-typography-label-form-compact-sm-letter-spacing: 0rem;
+	--semantic-typography-label-form-compact-sm-letter-spacing: 0;
 	--semantic-typography-label-form-compact-sm-font-width: 88;
 	--semantic-typography-label-form-compact-md-font: normal 700 1rem/1.15
 		'Open Sans';
@@ -258,18 +258,18 @@
 	--semantic-typography-label-form-compact-md-font-width: 88;
 	--semantic-typography-label-form-inline-compact-sm-font: normal 460
 		0.875rem/1.3 'Open Sans';
-	--semantic-typography-label-form-inline-compact-sm-letter-spacing: 0rem;
+	--semantic-typography-label-form-inline-compact-sm-letter-spacing: 0;
 	--semantic-typography-label-form-inline-compact-sm-font-width: 88;
 	--semantic-typography-label-form-inline-compact-md-font: normal 460 1rem/1.3
 		'Open Sans';
-	--semantic-typography-label-form-inline-compact-md-letter-spacing: 0rem;
+	--semantic-typography-label-form-inline-compact-md-letter-spacing: 0;
 	--semantic-typography-label-form-inline-compact-md-font-width: 88;
 	--semantic-typography-help-text-form-md-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-help-text-form-md-letter-spacing: 0rem;
+	--semantic-typography-help-text-form-md-letter-spacing: 0;
 	--semantic-typography-help-text-form-md-font-width: 95;
 	--semantic-typography-help-text-form-compact-md-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-help-text-form-compact-md-letter-spacing: 0rem;
+	--semantic-typography-help-text-form-compact-md-letter-spacing: 0;
 	--semantic-typography-help-text-form-compact-md-font-width: 88;
 }

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

@@ -0,0 +1,16 @@
+'use strict';
+
+const componentGrid = {
+  shared: {
+    display: "flex",
+    width: "100%",
+    columns: 12,
+    gap: "8px",
+    direction: "row",
+    wrap: "wrap",
+    justifyContent: "flex-start",
+    alignItems: "stretch"
+  }
+};
+
+exports.componentGrid = componentGrid;

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

@@ -0,0 +1,14 @@
+const componentGrid = {
+  shared: {
+    display: "flex",
+    width: "100%",
+    columns: 12,
+    gap: "8px",
+    direction: "row",
+    wrap: "wrap",
+    justifyContent: "flex-start",
+    alignItems: "stretch"
+  }
+};
+
+export { componentGrid };

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

@@ -0,0 +1,48 @@
+'use strict';
+
+const componentLayout = {
+  layout: {
+    shared: {
+      display: "grid",
+      minHeight: "100svh",
+      width: "100%",
+      "max-width": "1584px",
+      "margin-left": "auto",
+      "margin-right": "auto"
+    },
+    sm: {
+      gridTemplateAreas: "'alertbanner'\n'topbar'\n'sidebar'\n'main'",
+      gridTemplateColumns: "1fr",
+      gridTemplateRows: "min-content min-content min-content 1fr"
+    },
+    md: {
+      gridTemplateAreas: "'alertbanner alertbanner'\n'topbar topbar'\n'sidebar main'",
+      gridTemplateColumns: "min-content 1fr",
+      gridTemplateRows: "min-content min-content 1fr"
+    },
+    lg: {
+      gridTemplateAreas: "'alertbanner alertbanner'\n'topbar topbar'\n'sidebar main'",
+      gridTemplateColumns: "min-content 1fr",
+      gridTemplateRows: "min-content min-content 1fr"
+    }
+  },
+  sidebar: {
+    sm: {
+      hidden: {
+        display: "none"
+      },
+      aboveGrid: {
+        display: "block"
+      }
+    },
+    md: {
+      display: "block",
+      width: "200px"
+    },
+    lg: {
+      width: "320px"
+    }
+  }
+};
+
+exports.componentLayout = componentLayout;

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

@@ -0,0 +1,46 @@
+const componentLayout = {
+  layout: {
+    shared: {
+      display: "grid",
+      minHeight: "100svh",
+      width: "100%",
+      "max-width": "1584px",
+      "margin-left": "auto",
+      "margin-right": "auto"
+    },
+    sm: {
+      gridTemplateAreas: "'alertbanner'\n'topbar'\n'sidebar'\n'main'",
+      gridTemplateColumns: "1fr",
+      gridTemplateRows: "min-content min-content min-content 1fr"
+    },
+    md: {
+      gridTemplateAreas: "'alertbanner alertbanner'\n'topbar topbar'\n'sidebar main'",
+      gridTemplateColumns: "min-content 1fr",
+      gridTemplateRows: "min-content min-content 1fr"
+    },
+    lg: {
+      gridTemplateAreas: "'alertbanner alertbanner'\n'topbar topbar'\n'sidebar main'",
+      gridTemplateColumns: "min-content 1fr",
+      gridTemplateRows: "min-content min-content 1fr"
+    }
+  },
+  sidebar: {
+    sm: {
+      hidden: {
+        display: "none"
+      },
+      aboveGrid: {
+        display: "block"
+      }
+    },
+    md: {
+      display: "block",
+      width: "200px"
+    },
+    lg: {
+      width: "320px"
+    }
+  }
+};
+
+export { componentLayout };

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

@@ -3,7 +3,7 @@
 const componentLink = {
   shared: {
     focus: {
-      outline: "1px solid #0072a9"
+      outline: "0.0625rem solid #0072a9"
     },
     hover: {
       color: "#00344e",

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

@@ -1,7 +1,7 @@
 const componentLink = {
   shared: {
     focus: {
-      outline: "1px solid #0072a9"
+      outline: "0.0625rem solid #0072a9"
     },
     hover: {
       color: "#00344e",

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

@@ -1,30 +1,9 @@
 '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"
-  }
+  sm: "0px",
+  md: "830px",
+  lg: "1056px"
 };
 
 exports.semanticBreakpoints = semanticBreakpoints;

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

@@ -1,28 +1,7 @@
 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"
-  }
+  sm: "0px",
+  md: "830px",
+  lg: "1056px"
 };
 
 export { semanticBreakpoints };

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

@@ -8,23 +8,23 @@ 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 }]) => [
+  Object.entries(breakpoints.semanticBreakpoints).map(([name, min]) => [
     name,
     minWidthQuery(parseMinPx(min))
   ])
 );
 const until = Object.fromEntries(
-  Object.entries(breakpoints.semanticBreakpoints).map(([name, { min }]) => [
+  Object.entries(breakpoints.semanticBreakpoints).map(([name, min]) => [
     name,
     maxWidthQuery(parseMinPx(min))
   ])
 );
 const between = Object.fromEntries(
-  Object.entries(breakpoints.semanticBreakpoints).map(([fromName, { min: fromMin }]) => [
+  Object.entries(breakpoints.semanticBreakpoints).map(([fromName, fromMin]) => [
     fromName,
     {
       and: Object.fromEntries(
-        Object.entries(breakpoints.semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, { min: toMin }]) => [
+        Object.entries(breakpoints.semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [
           toName,
           minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
         ])

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

@@ -5,18 +5,18 @@ 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 }]) => [
+const from = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, min]) => [
   name,
   minWidthQuery(parseMinPx(min))
 ]));
-const until = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, { 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 }]) => [
+const between = Object.fromEntries(Object.entries(semanticBreakpoints).map(([fromName, fromMin]) => [
   fromName,
   {
-    and: Object.fromEntries(Object.entries(semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, { min: toMin }]) => [
+    and: Object.fromEntries(Object.entries(semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [
       toName,
       minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
     ]))

package/dist/types/components/grid/Grid.d.ts

@@ -0,0 +1,3 @@
+import type { GridProps, ItemProps } from './types';
+export declare function Grid({ children, theme, cssOverrides, as: Component, ...props }: GridProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Item({ children, theme, cssOverrides, size, offset, ...props }: ItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Grid";
+export declare const componentTsx = "import { Grid, Item } from '@guardian/stand/grid';\n\nexport const Component = () => (\n\t<Grid>\n\t\t<Item size={{ sm: 12, md: 8, lg: 6 }}>Main content - sm:12, md:8, lg:6</Item>\n\t\t<Item size={{ sm: 12, md: 4, lg: 3 }} offset={{ md: 1, lg: 2 }}>\n\t\t\tMore content - sm:12, md:4, lg:3, offset md:1, lg:2\n\t\t</Item>\n\t\t<Item size=\"auto\">Auto width</Item>\n\t\t<Item size=\"grow\">Grows to fill</Item>\n\t</Grid>\n);\n";
+export declare const componentCss = "\n/* import the grid styles */\n@import '@guardian/stand/component/grid.css';\n\n.stand-grid-container {\n\tdisplay: var(--component-grid-shared-display);\n\tflex-direction: row;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\talign-items: stretch;\n\tgap: 16px;\n}\n\n.stand-grid-item {\n\tbox-sizing: border-box;\n\tpadding: 16px;\n\tbackground: #eff3ff;\n\tborder: 1px solid #b8c9ff;\n\tborder-radius: 6px;\n\ttext-align: center;\n}\n\n.stand-grid-item--main {\n\tflex: 0 0 calc(((100% - 11 * 16px) * 6 / 12) + 5 * 16px);\n}\n\n.stand-grid-item--sidebar {\n\tflex: 0 0 calc(((100% - 11 * 16px) * 3 / 12) + 2 * 16px);\n\tmargin-left: calc(((100% - 11 * 16px) * 1 / 12) + 1 * 16px);\n}\n\n.stand-grid-item--auto {\n\tflex: 0 0 auto;\n\twidth: auto;\n\tmax-width: none;\n\twhite-space: nowrap;\n}\n\n.stand-grid-item--grow {\n\tflex-basis: 0;\n\tflex-grow: 1;\n\tmax-width: 100%;\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-grid-container\">\n\t\t<div class=\"stand-grid-item stand-grid-item--main\">Main content</div>\n\t\t<div class=\"stand-grid-item stand-grid-item--sidebar\">Sidebar</div>\n\t\t<div class=\"stand-grid-item stand-grid-item--auto\">Auto width</div>\n\t\t<div class=\"stand-grid-item stand-grid-item--grow\">Grows to fill</div>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentGrid } from \"@guardian/stand\";\n\nconst containerStyle = `\n\tdisplay: ${componentGrid.shared.display};\n\tflex-direction: row;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\talign-items: stretch;\n\tgap: 16px;\n`;\n\nconst itemStyle = `\n\tbox-sizing: border-box;\n\tpadding: 16px;\n\tbackground: #eff3ff;\n\tborder: 1px solid #b8c9ff;\n\tborder-radius: 6px;\n\ttext-align: center;\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div style=\"${containerStyle}\">\n\t\t<div style=\"${itemStyle}; flex: 0 0 calc(((100% - 11 * 16px) * 6 / 12) + 5 * 16px);\">Main content</div>\n\t\t<div style=\"${itemStyle}; flex: 0 0 calc(((100% - 11 * 16px) * 3 / 12) + 2 * 16px); margin-left: calc(((100% - 11 * 16px) * 1 / 12) + 1 * 16px);\">Sidebar</div>\n\t\t<div style=\"${itemStyle}; flex: 0 0 auto; width: auto; max-width: none; white-space: nowrap;\">Auto width</div>\n\t\t<div style=\"${itemStyle}; flex-basis: 0; flex-grow: 1; max-width: 100%;\">Grows to fill</div>\n\t</div>\n`;\n";

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

@@ -0,0 +1,11 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentGrid } from '../../styleD/build/typescript/component/grid';
+import type { DeepPartial, Prettify } from '../../util/types';
+import type { ItemProps } from './types';
+export type GridTheme = Prettify<ComponentGrid>;
+export type PartialGridTheme = Prettify<DeepPartial<GridTheme>>;
+export declare const defaultGridTheme: GridTheme;
+type GridItemOwnerState = Pick<ItemProps, 'size' | 'offset'>;
+export declare const gridStyles: (theme: GridTheme) => SerializedStyles;
+export declare const itemStyles: (theme: GridTheme, { size, offset }: GridItemOwnerState) => SerializedStyles;
+export {};

package/dist/types/components/grid/styles.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,25 @@
+import type { ElementType, HTMLAttributes } from 'react';
+import type { Breakpoint } from '../../styleD/utils/semantic/mq';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { GridTheme } from './styles';
+export type ResponsiveGridValue<T> = Partial<Record<Breakpoint, T>>;
+export type GridSizeValue = number | 'auto' | 'grow';
+export type GridOffsetValue = number | 'auto';
+export interface GridProps extends DefaultPropsWithChildren<GridTheme>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * Element used to render the Grid container.
+     */
+    as?: ElementType;
+}
+export interface ItemProps extends DefaultPropsWithChildren<GridTheme>, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Number of columns the item should span, or responsive values keyed by breakpoint.
+     */
+    size?: GridSizeValue | ResponsiveGridValue<GridSizeValue>;
+    /**
+     * Columns to offset the item from the left. Numbers push the item that many columns
+     * to the right. 'auto' pushes it to the far right of the row.
+     * Responsive values keyed by breakpoint are also accepted.
+     */
+    offset?: GridOffsetValue | ResponsiveGridValue<GridOffsetValue>;
+}

package/dist/types/components/layout/Layout.d.ts

@@ -0,0 +1,19 @@
+import type { LayoutProps, SidebarProps } from './types';
+/**
+ * Currently a WIP (Subject to change, but usable) sidebar that can be used in the Layout, it supports two different layout behaviors at the sm breakpoint,
+ * either 'above-grid' which will place the sidebar above the grid content effectively making it a horizontal bar at the top of the page,
+ * or 'hidden' which will hide the sidebar entirely at the sm breakpoint.
+ *
+ * The consumer can choose how to make the sidebar content accessible through other means (e.g. a collapsible menu in the TopBar) when using the 'hidden' option.
+ */
+export declare function Sidebar({ children, layoutSmBreakpoint, theme, cssOverrides, ...props }: SidebarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * A layout component that defines a grid structure for the page, it has specific areas for an AlertBanner, TopBar, Sidebar and Grid content.
+ *
+ * The layout adjusts based on the defined breakpoints in the theme, allowing for responsive design.
+ *
+ * The Layout component will look through its children and place them in the correct grid area based on their type (AlertBanner, TopBar, Sidebar, Grid), it ignores any children that are not of these types.
+ *
+ * Consumers can customize the layout by providing their own themes and CSS overrides for each of the components.
+ */
+export declare function Layout({ children, fluid, theme, cssOverrides, ...props }: LayoutProps): import("@emotion/react/jsx-runtime").JSX.Element;