@guardian/stand 0.0.36 → 0.0.38

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

@@ -4,12 +4,25 @@ const componentGrid = {
   shared: {
     display: "flex",
     width: "100%",
-    columns: 12,
-    gap: "8px",
     direction: "row",
     wrap: "wrap",
     justifyContent: "flex-start",
     alignItems: "stretch"
+  },
+  sm: {
+    columns: 12,
+    gap: "16px",
+    padding: "16px"
+  },
+  md: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
+  },
+  lg: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
   }
 };
 

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

@@ -2,12 +2,25 @@ const componentGrid = {
   shared: {
     display: "flex",
     width: "100%",
-    columns: 12,
-    gap: "8px",
     direction: "row",
     wrap: "wrap",
     justifyContent: "flex-start",
     alignItems: "stretch"
+  },
+  sm: {
+    columns: 12,
+    gap: "16px",
+    padding: "16px"
+  },
+  md: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
+  },
+  lg: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
   }
 };
 

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

@@ -5,7 +5,7 @@ const componentIntendedAudienceSignifier = {
   flexDirection: "row",
   justifyContent: "center",
   alignItems: "center",
-  borderColor: "#000000",
+  borderColor: "#cccccc",
   borderWidth: "1px",
   borderStyle: "solid",
   borderRadius: "0.125rem",
@@ -13,16 +13,19 @@ const componentIntendedAudienceSignifier = {
   paddingX: "4px",
   boxSizing: "border-box",
   width: "fit-content",
-  gap: "8px",
+  gap: "4px",
   svg: {
     height: "unset",
     width: "unset"
   },
+  chevron: {
+    fill: "#545454",
+    size: "10px"
+  },
   color: "#545454",
   typography: {
-    fontWeight: 400,
-    fontSize: "0.75rem",
-    lineHeight: 1
+    font: "normal 460 0.75rem/1.3 Open Sans",
+    lineHeight: "1"
   }
 };
 

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

@@ -3,7 +3,7 @@ const componentIntendedAudienceSignifier = {
   flexDirection: "row",
   justifyContent: "center",
   alignItems: "center",
-  borderColor: "#000000",
+  borderColor: "#cccccc",
   borderWidth: "1px",
   borderStyle: "solid",
   borderRadius: "0.125rem",
@@ -11,16 +11,19 @@ const componentIntendedAudienceSignifier = {
   paddingX: "4px",
   boxSizing: "border-box",
   width: "fit-content",
-  gap: "8px",
+  gap: "4px",
   svg: {
     height: "unset",
     width: "unset"
   },
+  chevron: {
+    fill: "#545454",
+    size: "10px"
+  },
   color: "#545454",
   typography: {
-    fontWeight: 400,
-    fontSize: "0.75rem",
-    lineHeight: 1
+    font: "normal 460 0.75rem/1.3 Open Sans",
+    lineHeight: "1"
   }
 };
 

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

@@ -5,10 +5,7 @@ const componentLayout = {
     shared: {
       display: "grid",
       minHeight: "100svh",
-      width: "100%",
-      "max-width": "1584px",
-      "margin-left": "auto",
-      "margin-right": "auto"
+      width: "100%"
     },
     sm: {
       gridTemplateAreas: "'alertbanner'\n'topbar'\n'sidebar'\n'main'",
@@ -40,8 +37,13 @@ const componentLayout = {
       width: "200px"
     },
     lg: {
-      width: "320px"
+      width: "280px"
     }
+  },
+  main: {
+    "max-width": "1584px",
+    "margin-left": "auto",
+    "margin-right": "auto"
   }
 };
 

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

@@ -3,10 +3,7 @@ const componentLayout = {
     shared: {
       display: "grid",
       minHeight: "100svh",
-      width: "100%",
-      "max-width": "1584px",
-      "margin-left": "auto",
-      "margin-right": "auto"
+      width: "100%"
     },
     sm: {
       gridTemplateAreas: "'alertbanner'\n'topbar'\n'sidebar'\n'main'",
@@ -38,8 +35,13 @@ const componentLayout = {
       width: "200px"
     },
     lg: {
-      width: "320px"
+      width: "280px"
     }
+  },
+  main: {
+    "max-width": "1584px",
+    "margin-left": "auto",
+    "margin-right": "auto"
   }
 };
 

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

@@ -0,0 +1,21 @@
+'use strict';
+
+const semanticGrid = {
+  gutter: {
+    "lg-px": "16px",
+    "md-px": "16px",
+    "sm-px": "16px"
+  },
+  margin: {
+    "lg-px": "24px",
+    "md-px": "24px",
+    "sm-px": "16px"
+  },
+  columns: {
+    lg: 12,
+    md: 12,
+    sm: 12
+  }
+};
+
+exports.semanticGrid = semanticGrid;

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

@@ -0,0 +1,19 @@
+const semanticGrid = {
+  gutter: {
+    "lg-px": "16px",
+    "md-px": "16px",
+    "sm-px": "16px"
+  },
+  margin: {
+    "lg-px": "24px",
+    "md-px": "24px",
+    "sm-px": "16px"
+  },
+  columns: {
+    lg: 12,
+    md: 12,
+    sm: 12
+  }
+};
+
+export { semanticGrid };

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

@@ -18,6 +18,13 @@ const semanticSizing = {
     default: "0.0625rem",
     md: "0.125rem",
     "extra-wide": "0.5rem"
+  },
+  sidebar: {
+    "md-px": "200px",
+    "lg-px": "280px"
+  },
+  layout: {
+    "max-width-px": "1584px"
   }
 };
 

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

@@ -16,6 +16,13 @@ const semanticSizing = {
     default: "0.0625rem",
     md: "0.125rem",
     "extra-wide": "0.5rem"
+  },
+  sidebar: {
+    "md-px": "200px",
+    "lg-px": "280px"
+  },
+  layout: {
+    "max-width-px": "1584px"
   }
 };
 

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

@@ -1,5 +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 componentCss = "\n/* import the grid styles */\n@import '@guardian/stand/component/grid.css';\n\n.stand-grid-container {\n\t--gap: var(--component-grid-sm-gap);\n\tdisplay: var(--component-grid-shared-display);\n\tflex-direction: var(--component-grid-shared-direction);\n\tflex-wrap: var(--component-grid-shared-wrap);\n\tjustify-content: var(--component-grid-shared-justify-content);\n\talign-items: var(--component-grid-shared-align-items);\n\tgap: var(--gap);\n\tpadding: 0 var(--component-grid-sm-padding);\n}\n\n@media (min-width: 830px) {\n\t.stand-grid-container {\n\t\t--gap: var(--component-grid-md-gap);\n\t\tpadding: 0 var(--component-grid-md-padding);\n\t}\n}\n\n@media (min-width: 1056px) {\n\t.stand-grid-container {\n\t\t--gap: var(--component-grid-lg-gap);\n\t\tpadding: 0 var(--component-grid-lg-padding);\n\t}\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/* 6-column span: ((100% - 11 * gap) * 6 / 12) + 5 * gap */\n.stand-grid-item--main {\n\tflex: 0 0 calc(((100% - 11 * var(--gap)) * 6 / 12) + 5 * var(--gap));\n}\n\n/* 3-column span with 1-column offset */\n.stand-grid-item--sidebar {\n\tflex: 0 0 calc(((100% - 11 * var(--gap)) * 3 / 12) + 2 * var(--gap));\n\tmargin-left: calc(((100% - 11 * var(--gap)) * 1 / 12) + 1 * var(--gap));\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";
+export declare const componentJs = "\nimport { componentGrid } from \"@guardian/stand\";\n\nconst { shared, sm } = componentGrid;\n\nconst containerStyle = `\n\tdisplay: ${shared.display};\n\tflex-direction: ${shared.direction};\n\tflex-wrap: ${shared.wrap};\n\tjustify-content: ${shared.justifyContent};\n\talign-items: ${shared.alignItems};\n\tgap: ${sm.gap};\n\tpadding: 0 ${sm.padding};\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\n// 6-column span: ((100% - (columns - 1) * gap) * size / columns) + (size - 1) * gap\nconst mainWidth = `calc(((100% - (${sm.columns} - 1) * ${sm.gap}) * 6 / ${sm.columns}) + 5 * ${sm.gap})`;\n// 3-column span with 1-column offset\nconst sidebarWidth = `calc(((100% - (${sm.columns} - 1) * ${sm.gap}) * 3 / ${sm.columns}) + 2 * ${sm.gap})`;\nconst sidebarOffset = `calc(((100% - (${sm.columns} - 1) * ${sm.gap}) * 1 / ${sm.columns}) + 1 * ${sm.gap})`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div style=\"${containerStyle}\">\n\t\t<div style=\"${itemStyle}; flex: 0 0 ${mainWidth};\">Main content</div>\n\t\t<div style=\"${itemStyle}; flex: 0 0 ${sidebarWidth}; margin-left: ${sidebarOffset};\">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/intended-audience-signifier/sandbox.d.ts

@@ -1,5 +1,5 @@
 export declare const componentName = "IntendedAudienceSignifier";
-export declare const componentTsx = "import { IntendedAudienceSignifier } from '@guardian/stand/intended-audience-signifier';\n\nexport const Component = () => (\n\t<>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' theme={{ color: '#c70000' }} />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' cssOverrides={{ border-color: '#0000FF',align-items: 'flex-end' }}/>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='US' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='UK' />\n\t</>\n);\n";
-export declare const componentCss = "\n/* import the intended audience signifier styles */\n@import '@guardian/stand/component/intendedAudienceSignifier.css';\n\n.stand-intended-audience-signifier {\n\tcolor: var(--component-intended-audience-signifier-color);\n\tfont-weight: var(--component-intended-audience-signifier-typography-font-weight);\n\tfont-size: var(--component-intended-audience-signifier-typography-font-size);\n\tline-height: var(--component-intended-audience-signifier-typography-line-height);\n\tborder-width: var(--component-intended-audience-signifier-border-width);\n\tborder-style: var(--component-intended-audience-signifier-border-style);\n\tborder-color: var(--component-intended-audience-signifier-border-color);\n\tdisplay: var(--component-intended-audience-signifier-display);\n\tflex-direction: var(--component-intended-audience-signifier-flex-direction);\n\tjustify-content: var(--component-intended-audience-signifier-justify-content);\n\talign-items: var(--component-intended-audience-signifier-align-items);\n\tborder-radius: var(--component-intended-audience-signifier-border-width);\n\tpadding: var(--component-intended-audience-signifier-padding-y) var(--component-intended-audience-signifier-padding-x);\n\tbox-sizing: var(--component-intended-audience-signifier-box-sizing);\n\twidth: var(--component-intended-audience-signifier-width);\n\tgap: var(--component-intended-audience-signifier-gap: 8px);\n}\n\n.stand-intended-audience-signifier svg {\n\twidth: var(--component-intended-audience-signifier-svg-width):\n\theight: var(--component-intended-audience-signifier-svg-height);\n}\n\n.stand-intended-audience-signifier-flag {\n\theight: 12px;\n}\n\n.stand-intended-audience-signifier-chevron {\n\twidth: 13px;\n\theight: 13px;\n\tfill: #545454;\n}\n";
+export declare const componentTsx = "import { IntendedAudienceSignifier } from '@guardian/stand/intendedAudienceSignifier;\n\nexport const Component = () => (\n\t<>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' theme={{ color: '#c70000' }} />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' cssOverrides={{ border-color: '#0000FF',align-items: 'flex-end' }}/>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='US' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='UK' />\n\t</>\n);\n";
+export declare const componentCss = "\n/* import the intended audience signifier styles */\n@import '@guardian/stand/component/intendedAudienceSignifier.css';\n\n.stand-intended-audience-signifier {\n\tcolor: var(--component-intended-audience-signifier-color);\n\tfont-weight: var(--component-intended-audience-signifier-typography-font-weight);\n\tfont-size: var(--component-intended-audience-signifier-typography-font-size);\n\tline-height: var(--component-intended-audience-signifier-typography-line-height);\n\tborder-width: var(--component-intended-audience-signifier-border-width);\n\tborder-style: var(--component-intended-audience-signifier-border-style);\n\tborder-color: var(--component-intended-audience-signifier-border-color);\n\tdisplay: var(--component-intended-audience-signifier-display);\n\tflex-direction: var(--component-intended-audience-signifier-flex-direction);\n\tjustify-content: var(--component-intended-audience-signifier-justify-content);\n\talign-items: var(--component-intended-audience-signifier-align-items);\n\tborder-radius: var(--component-intended-audience-signifier-border-width);\n\tpadding: var(--component-intended-audience-signifier-padding-y) var(--component-intended-audience-signifier-padding-x);\n\tbox-sizing: var(--component-intended-audience-signifier-box-sizing);\n\twidth: var(--component-intended-audience-signifier-width);\n\tgap: var(--component-intended-audience-signifier-gap);\n}\n\n.stand-intended-audience-signifier svg {\n\twidth: var(--component-intended-audience-signifier-svg-width):\n\theight: var(--component-intended-audience-signifier-svg-height);\n}\n\n.stand-intended-audience-signifier-flag {\n\theight: 12px;\n}\n\n.stand-intended-audience-signifier-chevron {\n\twidth: 13px;\n\theight: 13px;\n\tfill: #545454;\n}\n";
 export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div class=\"stand-intended-audience-signifier\">\n\t\t<svg class=\"stand-intended-audience-signifier-flag\" viewBox=\"0 0 640 480\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path fill=\"#012169\" d=\"M0 0h640v480H0z\" />\n\t\t</svg>\n\t\t<svg class=\"stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t</svg>\n\t\t<svg class=\"stand-intended-audience-signifier-flag\" viewBox=\"0 0 640 480\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path fill=\"#bd3d44\" d=\"M0 0h640v480H0\" />\n\t\t</svg>\n\t</div>\n\n\t<div class=\"stand-intended-audience-signifier\" style=\"--component-intended-audience-signifier-color: #c70000;\">\n\t\t<span>AU</span>\n\t\t<svg class=\"stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t</svg>\n\t\t<span>GLOBAL</span>\n\t</div>\n</div>\n";
 export declare const componentJs = "\nimport { componentIntendedAudienceSignifier } from \"@guardian/stand\";\n\nconst sheet = new CSSStyleSheet();\n\nsheet.replaceSync(`\n\t.js-stand-intended-audience-signifier {\n\t\tcolor: ${componentIntendedAudienceSignifier.color};\n\t\tfont-weight: ${componentIntendedAudienceSignifier.typography.fontWeight};\n\t\tfont-size: ${componentIntendedAudienceSignifier.typography.fontSize};\n\t\tline-height: ${componentIntendedAudienceSignifier.typography.lineHeight};\n\t\tborder-width: ${componentIntendedAudienceSignifier.borderWidth};\n\t\tborder-style: ${componentIntendedAudienceSignifier.borderStyle};\n\t\tborder-color: ${componentIntendedAudienceSignifier.borderColor};\n\t\tdisplay: ${componentIntendedAudienceSignifier.display};\n\t\tflex-direction: ${componentIntendedAudienceSignifier.flexDirection};\n\t\tjustify-content: ${componentIntendedAudienceSignifier.justifyContent};\n\t\talign-items: ${componentIntendedAudienceSignifier.alignItems};\n\t\tborder-radius: ${componentIntendedAudienceSignifier.borderRadius};\n\t\tpadding: ${componentIntendedAudienceSignifier.paddingY} ${componentIntendedAudienceSignifier.paddingX};\n\t\tbox-sizing: ${componentIntendedAudienceSignifier.boxSizing};\n\t\twidth: ${componentIntendedAudienceSignifier.width};\n\t\tgap: ${componentIntendedAudienceSignifier.gap};\n\t}\n\n\t.js-stand-intended-audience-signifier-chevron {\n\t\twidth: 13px;\n\t\theight: 13px;\n\t\tfill: #545454;\n\t}\n\n\t.stand-intended-audience-signifier svg {\n\t\twidth: ${componentIntendedAudienceSignifier.svg.width}:\n\t\theight: ${componentIntendedAudienceSignifier.svg.height};\n\t}\n`);\n\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container flow-column\">\n\t\t<div class=\"js-stand-intended-audience-signifier\">\n\t\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-gb\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#012169\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#FFF\"\n\t\t\t\t\td=\"m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#C8102E\"\n\t\t\t\t\td=\"m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#FFF\" d=\"M241 0v480h160V0zM0 160v160h640V160z\" />\n\t\t\t\t<path fill=\"#C8102E\" d=\"M0 193v96h640v-96zM273 0v480h96V0z\" />\n\t\t\t</svg>\n\t\t\t<svg class=\"js-stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-gb\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#012169\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#FFF\"\n\t\t\t\t\td=\"m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#C8102E\"\n\t\t\t\t\td=\"m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#FFF\" d=\"M241 0v480h160V0zM0 160v160h640V160z\" />\n\t\t\t\t<path fill=\"#C8102E\" d=\"M0 193v96h640v-96zM273 0v480h96V0z\" />\n\t\t\t</svg>\n\t\t</div>\n\n\t\t<div class=\"js-stand-intended-audience-signifier\" style=\"color: #c70000; border-color: #c70000;\">\n\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-au\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#00008B\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"red\"\n\t\t\t\t\td=\"M212 140.5 320 220v20l-135.5-99.5zm-92 10 3 17.5-96 72H0zM320 0v1.5l-124.5 94 1-22L295 0zM0 0l119.5 88h-30L0 21z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#fff\" d=\"M120.5 0v240h80V0zM0 80v80h320V80z\" />\n\t\t\t\t<path fill=\"red\" d=\"M0 96.5v48h320v-48zM136.5 0v240h48V0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m527 396.7-20.5 2.6 2.2 20.5-14.8-14.4-14.7 14.5 2-20.5-20.5-2.4 17.3-11.2-10.9-17.5 19.6 6.5 6.9-19.5 7.1 19.4 19.5-6.7-10.7 17.6zm-3.7-117.2 2.7-13-9.8-9 13.2-1.5 5.5-12.1 5.5 12.1 13.2 1.5-9.8 9 2.7 13-11.6-6.6zm-104.1-60-20.3 2.2 1.8 20.3-14.4-14.5-14.8 14.1 2.4-20.3-20.2-2.7 17.3-10.8-10.5-17.5 19.3 6.8L387 178l6.7 19.3 19.4-6.3-10.9 17.3 17.1 11.2ZM623 186.7l-20.9 2.7 2.3 20.9-15.1-14.7-15 14.8 2.1-21-20.9-2.4 17.7-11.5-11.1-17.9 20 6.7 7-19.8 7.2 19.8 19.9-6.9-11 18zm-96.1-83.5-20.7 2.3 1.9 20.8-14.7-14.8-15.1 14.4 2.4-20.7-20.7-2.8 17.7-11L467 73.5l19.7 6.9 7.3-19.5 6.8 19.7 19.8-6.5-11.1 17.6zM234 385.7l-45.8 5.4 4.6 45.9-32.8-32.4-33 32.2 4.9-45.9-45.8-5.8 38.9-24.8-24-39.4 43.6 15 15.8-43.4 15.5 43.5 43.7-14.7-24.3 39.2 38.8 25.1Z\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t\t<svg class=\"js-stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-au\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#00008B\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"red\"\n\t\t\t\t\td=\"M212 140.5 320 220v20l-135.5-99.5zm-92 10 3 17.5-96 72H0zM320 0v1.5l-124.5 94 1-22L295 0zM0 0l119.5 88h-30L0 21z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#fff\" d=\"M120.5 0v240h80V0zM0 80v80h320V80z\" />\n\t\t\t\t<path fill=\"red\" d=\"M0 96.5v48h320v-48zM136.5 0v240h48V0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m527 396.7-20.5 2.6 2.2 20.5-14.8-14.4-14.7 14.5 2-20.5-20.5-2.4 17.3-11.2-10.9-17.5 19.6 6.5 6.9-19.5 7.1 19.4 19.5-6.7-10.7 17.6zm-3.7-117.2 2.7-13-9.8-9 13.2-1.5 5.5-12.1 5.5 12.1 13.2 1.5-9.8 9 2.7 13-11.6-6.6zm-104.1-60-20.3 2.2 1.8 20.3-14.4-14.5-14.8 14.1 2.4-20.3-20.2-2.7 17.3-10.8-10.5-17.5 19.3 6.8L387 178l6.7 19.3 19.4-6.3-10.9 17.3 17.1 11.2ZM623 186.7l-20.9 2.7 2.3 20.9-15.1-14.7-15 14.8 2.1-21-20.9-2.4 17.7-11.5-11.1-17.9 20 6.7 7-19.8 7.2 19.8 19.9-6.9-11 18zm-96.1-83.5-20.7 2.3 1.9 20.8-14.7-14.8-15.1 14.4 2.4-20.7-20.7-2.8 17.7-11L467 73.5l19.7 6.9 7.3-19.5 6.8 19.7 19.8-6.5-11.1 17.6zM234 385.7l-45.8 5.4 4.6 45.9-32.8-32.4-33 32.2 4.9-45.9-45.8-5.8 38.9-24.8-24-39.4 43.6 15 15.8-43.4 15.5 43.5 43.7-14.7-24.3 39.2 38.8 25.1Z\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/intended-audience-signifier/styles.d.ts

@@ -4,3 +4,5 @@ import type { Prettify } from '../../util/types';
 export type IntendedAudienceSignifierTheme = Prettify<ComponentIntendedAudienceSignifier>;
 export declare const defaultIntendedAudienceSignifierTheme: IntendedAudienceSignifierTheme;
 export declare const intendedAudienceSignifierStyles: (theme: IntendedAudienceSignifierTheme) => SerializedStyles;
+export declare const intendedAudienceSignifierIconStyles: (theme: IntendedAudienceSignifierTheme) => SerializedStyles;
+export declare const intendedAudienceSignifierChevronIconStyles: (theme: IntendedAudienceSignifierTheme) => SerializedStyles;

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

@@ -1,19 +1,11 @@
-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;
+import type React from 'react';
+import type { LayoutProps, LayoutSlotProps, MainProps, SidebarProps } from './types';
+interface LayoutCompound {
+    (props: LayoutProps): React.ReactElement;
+    AlertBanner: (props: LayoutSlotProps) => React.ReactElement;
+    TopBar: (props: LayoutSlotProps) => React.ReactElement;
+    Sidebar: (props: SidebarProps) => React.ReactElement;
+    Main: (props: MainProps) => React.ReactElement;
+}
+export declare const Layout: LayoutCompound;
+export {};

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

@@ -1,5 +1,5 @@
 export declare const componentName = "Layout";
-export declare const componentTsx = "import { Grid, Item } from '@guardian/stand/grid';\nimport { Layout, Sidebar } from '@guardian/stand/layout';\nimport { TopBar, TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<Layout>\n\t\t<TopBar>\n\t\t\t<TopBarToolName name=\"Layout Demo\" favicon={{ letter: 'L' }} />\n\t\t</TopBar>\n\t\t<Sidebar layoutSmBreakpoint=\"above-grid\">\n\t\t\t<div style={{ padding: '8px' }}>Sidebar content</div>\n\t\t</Sidebar>\n\t\t<Grid>\n\t\t\t<Item size={{ sm: 12, md: 8 }}>Main content</Item>\n\t\t\t<Item size={{ sm: 12, md: 4 }}>Secondary content</Item>\n\t\t</Grid>\n\t</Layout>\n);\n";
+export declare const componentTsx = "import { Grid, Item } from '@guardian/stand/grid';\nimport { AlertBanner } from '@guardian/stand/alert-banner';\nimport { Layout } from '@guardian/stand/layout';\nimport { TopBar, TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<Layout aria-label=\"Page layout\">\n\t\t<Layout.AlertBanner as=\"div\" role=\"status\" aria-live=\"polite\">\n\t\t\t<AlertBanner level=\"information\">Layout banner message</AlertBanner>\n\t\t</Layout.AlertBanner>\n\t\t<Layout.TopBar>\n\t\t\t<TopBar>\n\t\t\t\t<TopBarToolName name=\"Layout Demo\" favicon={{ letter: 'L' }} />\n\t\t\t</TopBar>\n\t\t</Layout.TopBar>\n\t\t<Layout.Sidebar as=\"nav\" aria-label=\"Secondary navigation\" layoutSmBreakpoint=\"above-grid\">\n\t\t\t<div style={{ padding: '8px' }}>Sidebar content</div>\n\t\t</Layout.Sidebar>\n\t\t<Layout.Main fluid={false}>\n\t\t\t<Grid>\n\t\t\t\t<Item size={{ sm: 12, md: 8 }}>Main content</Item>\n\t\t\t\t<Item size={{ sm: 12, md: 4 }}>Secondary content</Item>\n\t\t\t</Grid>\n\t\t</Layout.Main>\n\t</Layout>\n);\n";
 export declare const componentCss = "\n/* import the layout styles */\n@import '@guardian/stand/component/layout.css';\n@import '@guardian/stand/semantic/breakpoints.css';\n\n/*\n * Use the TopBar and Grid/Item custom CSS examples from their respective\n * component docs to style the content placed inside these layout regions.\n */\n\n.stand-layout {\n\tdisplay: var(--component-layout-layout-shared-display);\n\tmin-height: var(--component-layout-layout-shared-min-height);\n\twidth: var(--component-layout-layout-shared-width);\n\tgrid-template-areas: var(--component-layout-layout-sm-grid-template-areas);\n\tgrid-template-columns: var(--component-layout-layout-sm-grid-template-columns);\n\tgrid-template-rows: var(--component-layout-layout-sm-grid-template-rows);\n}\n\n.stand-layout-alert-banner {\n\tgrid-area: alertbanner;\n}\n\n.stand-layout-top-bar {\n\tgrid-area: topbar;\n}\n\n.stand-layout-sidebar {\n\tgrid-area: sidebar;\n\tbackground: #f2f2f2;\n\tpadding: 8px;\n}\n\n.stand-layout-main {\n\tgrid-area: main;\n\tpadding: 8px;\n}\n\n@media (min-width: var(--semantic-breakpoints-md)) {\n\t.stand-layout {\n\t\tgrid-template-areas: var(--component-layout-layout-md-grid-template-areas);\n\t\tgrid-template-columns: var(--component-layout-layout-md-grid-template-columns);\n\t\tgrid-template-rows: var(--component-layout-layout-md-grid-template-rows);\n\t}\n\n\t.stand-layout-sidebar {\n\t\tdisplay: var(--component-layout-sidebar-md-display);\n\t\twidth: var(--component-layout-sidebar-md-width);\n\t}\n}\n";
 export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-layout\">\n\t\t<div class=\"stand-layout-alert-banner\">Alert banner area</div>\n\t\t<div class=\"stand-layout-top-bar\">Top bar area</div>\n\t\t<div class=\"stand-layout-sidebar\">Sidebar area</div>\n\t\t<div class=\"stand-layout-main\">Main content area</div>\n\t</div>\n</div>\n";
 export declare const componentJs = "\nimport { componentLayout, semanticBreakpoints } from \"@guardian/stand\";\n\n// Use the TopBar and Grid/Item custom JS examples from their respective\n// component docs to style the content placed inside these layout regions.\n\n\tconst sheet = new CSSStyleSheet();\n\n\tsheet.replaceSync(`\n\t  .js-stand-layout {\n\t    display: ${componentLayout.layout.shared.display};\n\t    min-height: ${componentLayout.layout.shared.minHeight};\n\t    width: ${componentLayout.layout.shared.width};\n\t    grid-template-areas: ${componentLayout.layout.sm.gridTemplateAreas};\n\t    grid-template-columns: ${componentLayout.layout.sm.gridTemplateColumns};\n\t    grid-template-rows: ${componentLayout.layout.sm.gridTemplateRows};\n\t  }\n\t  .js-stand-layout-alert-banner {\n\t    grid-area: alertbanner;\n\t  }\n\t  .js-stand-layout-top-bar {\n\t    grid-area: topbar;\n\t  }\n\t  .js-stand-layout-sidebar {\n\t    grid-area: sidebar;\n\t    display: ${componentLayout.sidebar.sm.aboveGrid.display};\n\t    background: #f2f2f2;\n\t    padding: 8px;\n\t  }\n\t  .js-stand-layout-main {\n\t    grid-area: main;\n\t    padding: 8px;\n\t  }\n\t  @media (min-width: ${semanticBreakpoints.md}) {\n\t    .js-stand-layout {\n\t      grid-template-areas: ${componentLayout.layout.md.gridTemplateAreas};\n\t      grid-template-columns: ${componentLayout.layout.md.gridTemplateColumns};\n\t      grid-template-rows: ${componentLayout.layout.md.gridTemplateRows};\n\t    }\n\t    .js-stand-layout-sidebar {\n\t      display: ${componentLayout.sidebar.md.display};\n\t      width: ${componentLayout.sidebar.md.width};\n\t    }\n\t  }\n\t`);\n\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\tdocument.getElementById(\"app\").innerHTML = `\n\t  <div class=\"js-stand-layout\">\n\t    <div class=\"js-stand-layout-alert-banner\">Alert banner area</div>\n\t    <div class=\"js-stand-layout-top-bar\">Top bar area</div>\n\t    <div class=\"js-stand-layout-sidebar\">Sidebar area</div>\n\t    <div class=\"js-stand-layout-main\">Main content area</div>\n\t  </div>\n\t`;\n";

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

@@ -1,16 +1,19 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ComponentLayout } from '../../styleD/build/typescript/component/layout';
 import type { DeepPartial, Prettify } from '../../util/types';
-import type { LayoutProps, SidebarProps } from './types';
+import type { MainProps, SidebarProps } from './types';
 export type LayoutTheme = Prettify<ComponentLayout['layout']>;
 export type PartialLayoutTheme = Prettify<DeepPartial<LayoutTheme>>;
 export declare const defaultLayoutTheme: LayoutTheme;
 export type SidebarTheme = Prettify<ComponentLayout['sidebar']>;
 export type PartialSidebarTheme = Prettify<DeepPartial<SidebarTheme>>;
 export declare const defaultSidebarTheme: SidebarTheme;
+export type MainTheme = Prettify<ComponentLayout['main']>;
+export type PartialMainTheme = Prettify<DeepPartial<MainTheme>>;
+export declare const defaultMainTheme: MainTheme;
 export declare const alertBannerLayoutStyles: () => SerializedStyles;
 export declare const topBarLayoutStyles: () => SerializedStyles;
 export declare const sidebarLayoutStyles: () => SerializedStyles;
-export declare const mainLayoutStyles: (theme: LayoutTheme, { fluid }: Required<Pick<LayoutProps, 'fluid'>>) => SerializedStyles;
+export declare const mainLayoutStyles: (theme: MainTheme, { fluid }: Required<Pick<MainProps, 'fluid'>>) => SerializedStyles;
 export declare const layoutStyles: (theme: LayoutTheme) => SerializedStyles;
 export declare const sidebarStyles: (theme: SidebarTheme, { layoutSmBreakpoint }: Required<Pick<SidebarProps, 'layoutSmBreakpoint'>>) => SerializedStyles;

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

@@ -1,14 +1,18 @@
+import type { SerializedStyles } from '@emotion/react';
+import type React from 'react';
 import type { DefaultPropsWithChildren } from '../../util/types';
-import type { LayoutTheme, SidebarTheme } from './styles';
-export interface LayoutProps extends DefaultPropsWithChildren<LayoutTheme> {
+import type { LayoutTheme, MainTheme, SidebarTheme } from './styles';
+export type LayoutProps = DefaultPropsWithChildren<LayoutTheme>;
+export interface MainProps extends DefaultPropsWithChildren<MainTheme>, React.HTMLAttributes<HTMLElement> {
     /**
      * When `true`, the layout will take up the full width of its container, enabled by default.
      * When `false`, the layout will have a max-width of 1584px and be centered within its container.
      * This can be used to prevent the layout from becoming too stretched on very wide screens.
      */
     fluid?: boolean;
+    as?: React.ElementType;
 }
-export interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme> {
+export interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme>, React.HTMLAttributes<HTMLElement> {
     /**
      * Defines the layout behavior of the sidebar at the sm breakpoint.
      *
@@ -17,4 +21,10 @@ export interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme> {
      *
      */
     layoutSmBreakpoint?: 'above-grid' | 'hidden';
+    as?: React.ElementType;
+}
+export interface LayoutSlotProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    cssOverrides?: SerializedStyles | SerializedStyles[];
+    as?: React.ElementType;
 }

package/dist/types/index.d.ts

@@ -74,6 +74,8 @@ export type { BaseTypography } from './styleD/build/typescript/base/typography';
  */
 export { semanticColors } from './styleD/build/typescript/semantic/colors';
 export type { SemanticColors } from './styleD/build/typescript/semantic/colors';
+export { semanticGrid } from './styleD/build/typescript/semantic/grid';
+export type { SemanticGrid } from './styleD/build/typescript/semantic/grid';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography';
 export type { SemanticTypography } from './styleD/build/typescript/semantic/typography';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing';

package/dist/types/layout.d.ts

@@ -13,8 +13,8 @@
  * If you only need the built CSS (./component/layout.css),
  * you don't need to install these.
  */
-export { Layout, Sidebar } from './components/layout/Layout';
-export type { LayoutProps, SidebarProps } from './components/layout/types';
-export type { PartialLayoutTheme as LayoutTheme, PartialSidebarTheme as SidebarTheme, } from './components/layout/styles';
+export { Layout } from './components/layout/Layout';
+export type { LayoutProps, SidebarProps as LayoutSidebarProps, MainProps as LayoutMainProps, LayoutSlotProps as LayoutAlertBannerProps, LayoutSlotProps as LayoutTopBarProps, } from './components/layout/types';
+export type { PartialLayoutTheme as LayoutTheme, PartialSidebarTheme as SidebarTheme, PartialMainTheme as MainTheme, } from './components/layout/styles';
 export { componentLayout } from './styleD/build/typescript/component/layout';
 export type { ComponentLayout } from './styleD/build/typescript/component/layout';

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

@@ -5,12 +5,25 @@ export declare const componentGrid: {
     shared: {
         display: string;
         width: string;
-        columns: number;
-        gap: string;
         direction: string;
         wrap: string;
         justifyContent: string;
         alignItems: string;
     };
+    sm: {
+        columns: number;
+        gap: string;
+        padding: string;
+    };
+    md: {
+        columns: number;
+        gap: string;
+        padding: string;
+    };
+    lg: {
+        columns: number;
+        gap: string;
+        padding: string;
+    };
 };
 export type ComponentGrid = typeof componentGrid;

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

@@ -19,11 +19,14 @@ export declare const componentIntendedAudienceSignifier: {
         height: string;
         width: string;
     };
+    chevron: {
+        fill: string;
+        size: string;
+    };
     color: string;
     typography: {
-        fontWeight: number;
-        fontSize: string;
-        lineHeight: number;
+        font: string;
+        lineHeight: string;
     };
 };
 export type ComponentIntendedAudienceSignifier = typeof componentIntendedAudienceSignifier;

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

@@ -7,9 +7,6 @@ export declare const componentLayout: {
             display: string;
             minHeight: string;
             width: string;
-            'max-width': string;
-            'margin-left': string;
-            'margin-right': string;
         };
         sm: {
             gridTemplateAreas: string;
@@ -44,5 +41,10 @@ export declare const componentLayout: {
             width: string;
         };
     };
+    main: {
+        'max-width': string;
+        'margin-left': string;
+        'margin-right': string;
+    };
 };
 export type ComponentLayout = typeof componentLayout;

package/dist/types/styleD/build/typescript/semantic/grid.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const semanticGrid: {
+    gutter: {
+        'lg-px': string;
+        'md-px': string;
+        'sm-px': string;
+    };
+    margin: {
+        'lg-px': string;
+        'md-px': string;
+        'sm-px': string;
+    };
+    columns: {
+        lg: number;
+        md: number;
+        sm: number;
+    };
+};
+export type SemanticGrid = typeof semanticGrid;

package/dist/types/styleD/build/typescript/semantic/sizing.d.ts

@@ -20,5 +20,12 @@ export declare const semanticSizing: {
         md: string;
         'extra-wide': string;
     };
+    sidebar: {
+        'md-px': string;
+        'lg-px': string;
+    };
+    layout: {
+        'max-width-px': string;
+    };
 };
 export type SemanticSizing = typeof semanticSizing;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -169,6 +169,7 @@
     "./base/radius.css": "./dist/styleD/build/css/base/radius.css",
     "./semantic/breakpoints.css": "./dist/styleD/build/css/semantic/breakpoints.css",
     "./semantic/colors.css": "./dist/styleD/build/css/semantic/colors.css",
+    "./semantic/grid.css": "./dist/styleD/build/css/semantic/grid.css",
     "./semantic/typography.css": "./dist/styleD/build/css/semantic/typography.css",
     "./semantic/sizing.css": "./dist/styleD/build/css/semantic/sizing.css",
     "./semantic/shadow.css": "./dist/styleD/build/css/semantic/shadow.css",