@guardian/stand 0.0.35 → 0.0.36

package/dist/components/grid/Grid.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+
+function Grid({
+  children,
+  theme = {},
+  cssOverrides,
+  as: Component = "div",
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultGridTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { css: [styles.gridStyles(mergedTheme), cssOverrides], ...props, children });
+}
+function Item({
+  children,
+  theme = {},
+  cssOverrides,
+  size,
+  offset,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultGridTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      css: [styles.itemStyles(mergedTheme, { size, offset }), cssOverrides],
+      ...props,
+      children
+    }
+  );
+}
+
+exports.Grid = Grid;
+exports.Item = Item;

package/dist/components/grid/Grid.js

@@ -0,0 +1,14 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { gridStyles, itemStyles, defaultGridTheme } from './styles.js';
+
+function Grid({ children, theme = {}, cssOverrides, as: Component = "div", ...props }) {
+  const mergedTheme = mergeDeep(defaultGridTheme, theme);
+  return jsx(Component, { css: [gridStyles(mergedTheme), cssOverrides], ...props, children });
+}
+function Item({ children, theme = {}, cssOverrides, size, offset, ...props }) {
+  const mergedTheme = mergeDeep(defaultGridTheme, theme);
+  return jsx("div", { css: [itemStyles(mergedTheme, { size, offset }), cssOverrides], ...props, children });
+}
+
+export { Grid, Item };

package/dist/components/grid/styles.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+var react = require('@emotion/react');
+var grid = require('../../styleD/build/typescript/component/grid.cjs');
+var mq = require('../../styleD/utils/semantic/mq.cjs');
+
+const defaultGridTheme = grid.componentGrid;
+const isResponsiveGridSize = (size) => typeof size === "object";
+const isResponsiveOffset = (offset) => typeof offset === "object";
+const clampToColumns = (value, columns) => Math.max(0, Math.min(value, columns));
+const numericOffsetMargin = (offset, theme) => `calc(((100% - (${theme.shared.columns} - 1) * ${theme.shared.gap}) * ${offset} / ${theme.shared.columns}) + ${offset} * ${theme.shared.gap})`;
+const numericSizeWidth = (size, theme) => `calc(((100% - (${theme.shared.columns} - 1) * ${theme.shared.gap}) * ${size} / ${theme.shared.columns}) + (${size} - 1) * ${theme.shared.gap})`;
+const fixedSizeStyles = (size, theme) => {
+  if (size === "grow") {
+    return react.css`
+			flex-basis: 0;
+			flex-grow: 1;
+			max-width: 100%;
+		`;
+  }
+  if (size === "auto") {
+    return react.css`
+			flex-basis: auto;
+			flex-grow: 0;
+			flex-shrink: 0;
+			width: auto;
+			max-width: none;
+		`;
+  }
+  const clampedSize = clampToColumns(size, theme.shared.columns);
+  const width = numericSizeWidth(clampedSize, theme);
+  return react.css`
+		flex-basis: ${width};
+		flex-grow: 0;
+		width: ${width};
+		max-width: ${width};
+	`;
+};
+const fixedOffsetStyles = (offset, theme) => {
+  if (offset === "auto") {
+    return react.css`
+			margin-left: auto;
+		`;
+  }
+  const clampedOffset = clampToColumns(offset, theme.shared.columns);
+  return react.css`
+		margin-left: ${numericOffsetMargin(clampedOffset, theme)};
+	`;
+};
+const offsetStyles = (offset, theme) => {
+  if (typeof offset === "undefined") {
+    return react.css``;
+  }
+  if (!isResponsiveOffset(offset)) {
+    return fixedOffsetStyles(offset, theme);
+  }
+  return react.css`
+		${Object.entries(offset).map(
+    ([breakpoint, breakpointOffset]) => react.css`
+				${mq.from[breakpoint]} {
+					${fixedOffsetStyles(breakpointOffset, theme)}
+				}
+			`
+  )}
+	`;
+};
+const sizeStyles = (size, theme) => {
+  if (typeof size === "undefined") {
+    return fixedSizeStyles(theme.shared.columns, theme);
+  }
+  if (!isResponsiveGridSize(size)) {
+    return fixedSizeStyles(size, theme);
+  }
+  return react.css`
+		${Object.entries(size).map(
+    ([breakpoint, breakpointSize]) => react.css`
+				${mq.from[breakpoint]} {
+					${fixedSizeStyles(breakpointSize, theme)}
+				}
+			`
+  )}
+	`;
+};
+const gridStyles = (theme) => {
+  return react.css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.width};
+		flex-direction: ${theme.shared.direction};
+		flex-wrap: ${theme.shared.wrap};
+		padding: 0 ${theme.shared.gap};
+		gap: ${theme.shared.gap};
+		justify-content: ${theme.shared.justifyContent};
+		align-items: ${theme.shared.alignItems};
+	`;
+};
+const itemStyles = (theme, { size, offset }) => {
+  return react.css`
+		min-width: 0;
+		${sizeStyles(size, theme)}
+		${offsetStyles(offset, theme)}
+	`;
+};
+
+exports.defaultGridTheme = defaultGridTheme;
+exports.gridStyles = gridStyles;
+exports.itemStyles = itemStyles;

package/dist/components/grid/styles.js

@@ -0,0 +1,98 @@
+import { css } from '@emotion/react';
+import { componentGrid } from '../../styleD/build/typescript/component/grid.js';
+import { from } from '../../styleD/utils/semantic/mq.js';
+
+const defaultGridTheme = componentGrid;
+const isResponsiveGridSize = (size) => typeof size === "object";
+const isResponsiveOffset = (offset) => typeof offset === "object";
+const clampToColumns = (value, columns) => Math.max(0, Math.min(value, columns));
+const numericOffsetMargin = (offset, theme) => `calc(((100% - (${theme.shared.columns} - 1) * ${theme.shared.gap}) * ${offset} / ${theme.shared.columns}) + ${offset} * ${theme.shared.gap})`;
+const numericSizeWidth = (size, theme) => `calc(((100% - (${theme.shared.columns} - 1) * ${theme.shared.gap}) * ${size} / ${theme.shared.columns}) + (${size} - 1) * ${theme.shared.gap})`;
+const fixedSizeStyles = (size, theme) => {
+  if (size === "grow") {
+    return css`
+			flex-basis: 0;
+			flex-grow: 1;
+			max-width: 100%;
+		`;
+  }
+  if (size === "auto") {
+    return css`
+			flex-basis: auto;
+			flex-grow: 0;
+			flex-shrink: 0;
+			width: auto;
+			max-width: none;
+		`;
+  }
+  const clampedSize = clampToColumns(size, theme.shared.columns);
+  const width = numericSizeWidth(clampedSize, theme);
+  return css`
+		flex-basis: ${width};
+		flex-grow: 0;
+		width: ${width};
+		max-width: ${width};
+	`;
+};
+const fixedOffsetStyles = (offset, theme) => {
+  if (offset === "auto") {
+    return css`
+			margin-left: auto;
+		`;
+  }
+  const clampedOffset = clampToColumns(offset, theme.shared.columns);
+  return css`
+		margin-left: ${numericOffsetMargin(clampedOffset, theme)};
+	`;
+};
+const offsetStyles = (offset, theme) => {
+  if (typeof offset === "undefined") {
+    return css``;
+  }
+  if (!isResponsiveOffset(offset)) {
+    return fixedOffsetStyles(offset, theme);
+  }
+  return css`
+		${Object.entries(offset).map(([breakpoint, breakpointOffset]) => css`
+				${from[breakpoint]} {
+					${fixedOffsetStyles(breakpointOffset, theme)}
+				}
+			`)}
+	`;
+};
+const sizeStyles = (size, theme) => {
+  if (typeof size === "undefined") {
+    return fixedSizeStyles(theme.shared.columns, theme);
+  }
+  if (!isResponsiveGridSize(size)) {
+    return fixedSizeStyles(size, theme);
+  }
+  return css`
+		${Object.entries(size).map(([breakpoint, breakpointSize]) => css`
+				${from[breakpoint]} {
+					${fixedSizeStyles(breakpointSize, theme)}
+				}
+			`)}
+	`;
+};
+const gridStyles = (theme) => {
+  return css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.width};
+		flex-direction: ${theme.shared.direction};
+		flex-wrap: ${theme.shared.wrap};
+		padding: 0 ${theme.shared.gap};
+		gap: ${theme.shared.gap};
+		justify-content: ${theme.shared.justifyContent};
+		align-items: ${theme.shared.alignItems};
+	`;
+};
+const itemStyles = (theme, { size, offset }) => {
+  return css`
+		min-width: 0;
+		${sizeStyles(size, theme)}
+		${offsetStyles(offset, theme)}
+	`;
+};
+
+export { defaultGridTheme, gridStyles, itemStyles };

package/dist/components/layout/Layout.cjs

@@ -0,0 +1,114 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var React = require('react');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var AlertBanner = require('../alert-banner/AlertBanner.cjs');
+var Grid = require('../grid/Grid.cjs');
+var TopBar = require('../topbar/TopBar.cjs');
+var styles = require('./styles.cjs');
+
+function Sidebar({
+  children,
+  layoutSmBreakpoint = "hidden",
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultSidebarTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "aside",
+    {
+      css: [styles.sidebarStyles(mergedTheme, { layoutSmBreakpoint }), cssOverrides],
+      ...props,
+      children
+    }
+  );
+}
+function Layout({
+  children,
+  fluid = true,
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultLayoutTheme, theme);
+  let alertBanner = null;
+  let topBar = null;
+  let sidebar = null;
+  let main = null;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === AlertBanner.AlertBanner) {
+      const alertBannerChild = child;
+      const alertBannerCssOverrides = Array.isArray(
+        alertBannerChild.props.cssOverrides
+      ) ? alertBannerChild.props.cssOverrides : alertBannerChild.props.cssOverrides ? [alertBannerChild.props.cssOverrides] : [];
+      alertBanner ?? (alertBanner = React.cloneElement(alertBannerChild, {
+        cssOverrides: [styles.alertBannerLayoutStyles(), ...alertBannerCssOverrides]
+      }));
+      return;
+    }
+    if (child.type === TopBar.TopBar) {
+      const topBarChild = child;
+      const topBarCssOverrides = Array.isArray(topBarChild.props.cssOverrides) ? topBarChild.props.cssOverrides : topBarChild.props.cssOverrides ? [topBarChild.props.cssOverrides] : [];
+      topBar ?? (topBar = React.cloneElement(topBarChild, {
+        cssOverrides: [styles.topBarLayoutStyles(), ...topBarCssOverrides]
+      }));
+      return;
+    }
+    if (child.type === Sidebar) {
+      const sidebarChild = child;
+      const sidebarCssOverrides = Array.isArray(sidebarChild.props.cssOverrides) ? sidebarChild.props.cssOverrides : sidebarChild.props.cssOverrides ? [sidebarChild.props.cssOverrides] : [];
+      sidebar ?? (sidebar = React.cloneElement(sidebarChild, {
+        cssOverrides: [styles.sidebarLayoutStyles(), ...sidebarCssOverrides]
+      }));
+      return;
+    }
+    if (child.type === Grid.Grid) {
+      const gridChild = child;
+      const gridCssOverrides = Array.isArray(gridChild.props.cssOverrides) ? gridChild.props.cssOverrides : gridChild.props.cssOverrides ? [gridChild.props.cssOverrides] : [];
+      main ?? (main = React.cloneElement(gridChild, {
+        as: "main",
+        cssOverrides: [
+          styles.mainLayoutStyles(mergedTheme, { fluid }),
+          ...gridCssOverrides
+        ]
+      }));
+      return;
+    }
+    if (!main) {
+      const childWithProps = child;
+      if ("cssOverrides" in childWithProps.props) {
+        const childCssOverrides = Array.isArray(
+          childWithProps.props.cssOverrides
+        ) ? childWithProps.props.cssOverrides : [childWithProps.props.cssOverrides ?? react.css``];
+        main ?? (main = React.cloneElement(childWithProps, {
+          cssOverrides: [
+            styles.mainLayoutStyles(mergedTheme, { fluid }),
+            ...childCssOverrides
+          ]
+        }));
+      } else {
+        main ?? (main = React.cloneElement(childWithProps, {
+          css: [
+            styles.mainLayoutStyles(mergedTheme, { fluid }),
+            childWithProps.props.css
+          ]
+        }));
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.layoutStyles(mergedTheme), cssOverrides], ...props, children: [
+    alertBanner,
+    topBar,
+    sidebar,
+    main
+  ] });
+}
+
+exports.Layout = Layout;
+exports.Sidebar = Sidebar;

package/dist/components/layout/Layout.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import React from 'react';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { AlertBanner } from '../alert-banner/AlertBanner.js';
+import { Grid } from '../grid/Grid.js';
+import { TopBar } from '../topbar/TopBar.js';
+import { alertBannerLayoutStyles, topBarLayoutStyles, sidebarLayoutStyles, mainLayoutStyles, layoutStyles, sidebarStyles, defaultSidebarTheme, defaultLayoutTheme } from './styles.js';
+
+function Sidebar({ children, layoutSmBreakpoint = "hidden", theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultSidebarTheme, theme);
+  return jsx("aside", { css: [sidebarStyles(mergedTheme, { layoutSmBreakpoint }), cssOverrides], ...props, children });
+}
+function Layout({ children, fluid = true, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultLayoutTheme, theme);
+  let alertBanner = null;
+  let topBar = null;
+  let sidebar = null;
+  let main = null;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === AlertBanner) {
+      const alertBannerChild = child;
+      const alertBannerCssOverrides = Array.isArray(alertBannerChild.props.cssOverrides) ? alertBannerChild.props.cssOverrides : alertBannerChild.props.cssOverrides ? [alertBannerChild.props.cssOverrides] : [];
+      alertBanner ?? (alertBanner = React.cloneElement(alertBannerChild, {
+        cssOverrides: [alertBannerLayoutStyles(), ...alertBannerCssOverrides]
+      }));
+      return;
+    }
+    if (child.type === TopBar) {
+      const topBarChild = child;
+      const topBarCssOverrides = Array.isArray(topBarChild.props.cssOverrides) ? topBarChild.props.cssOverrides : topBarChild.props.cssOverrides ? [topBarChild.props.cssOverrides] : [];
+      topBar ?? (topBar = React.cloneElement(topBarChild, {
+        cssOverrides: [topBarLayoutStyles(), ...topBarCssOverrides]
+      }));
+      return;
+    }
+    if (child.type === Sidebar) {
+      const sidebarChild = child;
+      const sidebarCssOverrides = Array.isArray(sidebarChild.props.cssOverrides) ? sidebarChild.props.cssOverrides : sidebarChild.props.cssOverrides ? [sidebarChild.props.cssOverrides] : [];
+      sidebar ?? (sidebar = React.cloneElement(sidebarChild, {
+        cssOverrides: [sidebarLayoutStyles(), ...sidebarCssOverrides]
+      }));
+      return;
+    }
+    if (child.type === Grid) {
+      const gridChild = child;
+      const gridCssOverrides = Array.isArray(gridChild.props.cssOverrides) ? gridChild.props.cssOverrides : gridChild.props.cssOverrides ? [gridChild.props.cssOverrides] : [];
+      main ?? (main = React.cloneElement(gridChild, {
+        as: "main",
+        cssOverrides: [
+          mainLayoutStyles(mergedTheme, { fluid }),
+          ...gridCssOverrides
+        ]
+      }));
+      return;
+    }
+    if (!main) {
+      const childWithProps = child;
+      if ("cssOverrides" in childWithProps.props) {
+        const childCssOverrides = Array.isArray(childWithProps.props.cssOverrides) ? childWithProps.props.cssOverrides : [childWithProps.props.cssOverrides ?? css``];
+        main ?? (main = React.cloneElement(childWithProps, {
+          cssOverrides: [
+            mainLayoutStyles(mergedTheme, { fluid }),
+            ...childCssOverrides
+          ]
+        }));
+      } else {
+        main ?? (main = React.cloneElement(childWithProps, {
+          css: [
+            mainLayoutStyles(mergedTheme, { fluid }),
+            childWithProps.props.css
+          ]
+        }));
+      }
+    }
+  });
+  return jsxs("div", { css: [layoutStyles(mergedTheme), cssOverrides], ...props, children: [alertBanner, topBar, sidebar, main] });
+}
+
+export { Layout, Sidebar };

package/dist/components/layout/styles.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+var react = require('@emotion/react');
+var layout = require('../../styleD/build/typescript/component/layout.cjs');
+var mq = require('../../styleD/utils/semantic/mq.cjs');
+
+const defaultLayoutTheme = layout.componentLayout["layout"];
+const defaultSidebarTheme = layout.componentLayout["sidebar"];
+const alertBannerLayoutStyles = () => {
+  return react.css`
+		grid-area: alertbanner;
+	`;
+};
+const topBarLayoutStyles = () => {
+  return react.css`
+		grid-area: topbar;
+	`;
+};
+const sidebarLayoutStyles = () => {
+  return react.css`
+		grid-area: sidebar;
+	`;
+};
+const mainLayoutStyles = (theme, { fluid }) => {
+  return react.css`
+		grid-area: main;
+		${fluid ? "" : react.css`
+					max-width: ${theme.shared["max-width"]};
+					margin-left: ${theme.shared["margin-left"]};
+					margin-right: ${theme.shared["margin-right"]};
+				`}
+	`;
+};
+const layoutStyles = (theme) => {
+  return react.css`
+		display: ${theme.shared.display};
+		min-height: ${theme.shared.minHeight};
+		width: ${theme.shared.width};
+
+		grid-template-areas: ${theme.sm.gridTemplateAreas};
+		grid-template-columns: ${theme.sm.gridTemplateColumns};
+		grid-template-rows: ${theme.sm.gridTemplateRows};
+
+		${mq.from.md} {
+			grid-template-areas: ${theme.md.gridTemplateAreas};
+			grid-template-columns: ${theme.md.gridTemplateColumns};
+			grid-template-rows: ${theme.md.gridTemplateRows};
+		}
+
+		${mq.from.lg} {
+			grid-template-areas: ${theme.lg.gridTemplateAreas};
+			grid-template-columns: ${theme.lg.gridTemplateColumns};
+			grid-template-rows: ${theme.lg.gridTemplateRows};
+		}
+	`;
+};
+const sidebarStyles = (theme, { layoutSmBreakpoint }) => {
+  return react.css`
+		${mq.from.sm} {
+			${(() => {
+    switch (layoutSmBreakpoint) {
+      case "above-grid":
+        return react.css`
+							display: ${theme.sm.aboveGrid.display};
+						`;
+      case "hidden":
+        return react.css`
+							display: ${theme.sm.hidden.display};
+						`;
+    }
+  })()}
+		}
+
+		${mq.from.md} {
+			display: ${theme.md.display};
+			width: ${theme.md.width};
+		}
+
+		${mq.from.lg} {
+			width: ${theme.lg.width};
+		}
+	`;
+};
+
+exports.alertBannerLayoutStyles = alertBannerLayoutStyles;
+exports.defaultLayoutTheme = defaultLayoutTheme;
+exports.defaultSidebarTheme = defaultSidebarTheme;
+exports.layoutStyles = layoutStyles;
+exports.mainLayoutStyles = mainLayoutStyles;
+exports.sidebarLayoutStyles = sidebarLayoutStyles;
+exports.sidebarStyles = sidebarStyles;
+exports.topBarLayoutStyles = topBarLayoutStyles;

package/dist/components/layout/styles.js

@@ -0,0 +1,83 @@
+import { css } from '@emotion/react';
+import { componentLayout } from '../../styleD/build/typescript/component/layout.js';
+import { from } from '../../styleD/utils/semantic/mq.js';
+
+const defaultLayoutTheme = componentLayout["layout"];
+const defaultSidebarTheme = componentLayout["sidebar"];
+const alertBannerLayoutStyles = () => {
+  return css`
+		grid-area: alertbanner;
+	`;
+};
+const topBarLayoutStyles = () => {
+  return css`
+		grid-area: topbar;
+	`;
+};
+const sidebarLayoutStyles = () => {
+  return css`
+		grid-area: sidebar;
+	`;
+};
+const mainLayoutStyles = (theme, { fluid }) => {
+  return css`
+		grid-area: main;
+		${fluid ? "" : css`
+					max-width: ${theme.shared["max-width"]};
+					margin-left: ${theme.shared["margin-left"]};
+					margin-right: ${theme.shared["margin-right"]};
+				`}
+	`;
+};
+const layoutStyles = (theme) => {
+  return css`
+		display: ${theme.shared.display};
+		min-height: ${theme.shared.minHeight};
+		width: ${theme.shared.width};
+
+		grid-template-areas: ${theme.sm.gridTemplateAreas};
+		grid-template-columns: ${theme.sm.gridTemplateColumns};
+		grid-template-rows: ${theme.sm.gridTemplateRows};
+
+		${from.md} {
+			grid-template-areas: ${theme.md.gridTemplateAreas};
+			grid-template-columns: ${theme.md.gridTemplateColumns};
+			grid-template-rows: ${theme.md.gridTemplateRows};
+		}
+
+		${from.lg} {
+			grid-template-areas: ${theme.lg.gridTemplateAreas};
+			grid-template-columns: ${theme.lg.gridTemplateColumns};
+			grid-template-rows: ${theme.lg.gridTemplateRows};
+		}
+	`;
+};
+const sidebarStyles = (theme, { layoutSmBreakpoint }) => {
+  return css`
+		${from.sm} {
+			${(() => {
+    switch (layoutSmBreakpoint) {
+      case "above-grid":
+        return css`
+							display: ${theme.sm.aboveGrid.display};
+						`;
+      case "hidden":
+        return css`
+							display: ${theme.sm.hidden.display};
+						`;
+    }
+  })()}
+		}
+
+		${from.md} {
+			display: ${theme.md.display};
+			width: ${theme.md.width};
+		}
+
+		${from.lg} {
+			width: ${theme.lg.width};
+		}
+	`;
+};
+
+export { alertBannerLayoutStyles, defaultLayoutTheme, defaultSidebarTheme, layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles };

package/dist/grid.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Grid = require('./components/grid/Grid.cjs');
+var grid = require('./styleD/build/typescript/component/grid.cjs');
+
+
+
+exports.Grid = Grid.Grid;
+exports.Item = Grid.Item;
+exports.componentGrid = grid.componentGrid;

package/dist/grid.js

@@ -0,0 +1,2 @@
+export { Grid, Item } from './components/grid/Grid.js';
+export { componentGrid } from './styleD/build/typescript/component/grid.js';

package/dist/index.cjs

@@ -10,10 +10,12 @@ var button = require('./styleD/build/typescript/component/button.cjs');
 var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
 var datePicker = require('./styleD/build/typescript/component/datePicker.cjs');
+var grid = require('./styleD/build/typescript/component/grid.cjs');
 var form = require('./styleD/build/typescript/component/form.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
 var menu = require('./styleD/build/typescript/component/menu.cjs');
+var layout = require('./styleD/build/typescript/component/layout.cjs');
 var link = require('./styleD/build/typescript/component/link.cjs');
 var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
 var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
@@ -45,10 +47,12 @@ exports.componentButton = button.componentButton;
 exports.componentCheckbox = checkbox.componentCheckbox;
 exports.componentFavicon = favicon.componentFavicon;
 exports.componentDatePicker = datePicker.componentDatePicker;
+exports.componentGrid = grid.componentGrid;
 exports.componentForm = form.componentForm;
 exports.componentIcon = icon.componentIcon;
 exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentMenu = menu.componentMenu;
+exports.componentLayout = layout.componentLayout;
 exports.componentLink = link.componentLink;
 exports.componentAlertBanner = alertBanner.componentAlertBanner;
 exports.componentRadioGroup = radioGroup.componentRadioGroup;

package/dist/index.js

@@ -8,10 +8,12 @@ export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
 export { componentDatePicker } from './styleD/build/typescript/component/datePicker.js';
+export { componentGrid } from './styleD/build/typescript/component/grid.js';
 export { componentForm } from './styleD/build/typescript/component/form.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
 export { componentMenu } from './styleD/build/typescript/component/menu.js';
+export { componentLayout } from './styleD/build/typescript/component/layout.js';
 export { componentLink } from './styleD/build/typescript/component/link.js';
 export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';

package/dist/layout.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Layout = require('./components/layout/Layout.cjs');
+var layout = require('./styleD/build/typescript/component/layout.cjs');
+
+
+
+exports.Layout = Layout.Layout;
+exports.Sidebar = Layout.Sidebar;
+exports.componentLayout = layout.componentLayout;

package/dist/layout.js

@@ -0,0 +1,2 @@
+export { Layout, Sidebar } from './components/layout/Layout.js';
+export { componentLayout } from './styleD/build/typescript/component/layout.js';

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

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-grid-shared-display: flex;
+	--component-grid-shared-width: 100%;
+	--component-grid-shared-columns: 12;
+	--component-grid-shared-gap: 8px;
+	--component-grid-shared-direction: row;
+	--component-grid-shared-wrap: wrap;
+	--component-grid-shared-justify-content: flex-start;
+	--component-grid-shared-align-items: stretch;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-layout-layout-shared-display: grid;
+	--component-layout-layout-shared-min-height: 100svh;
+	--component-layout-layout-shared-width: 100%;
+	--component-layout-layout-shared-max-width: 1584px;
+	--component-layout-layout-shared-margin-left: auto;
+	--component-layout-layout-shared-margin-right: auto;
+	--component-layout-layout-sm-grid-template-areas: 'alertbanner' 'topbar'
+		'sidebar' 'main';
+	--component-layout-layout-sm-grid-template-columns: 1fr;
+	--component-layout-layout-sm-grid-template-rows: min-content min-content
+		min-content 1fr;
+	--component-layout-layout-md-grid-template-areas: 'alertbanner alertbanner'
+		'topbar topbar' 'sidebar main';
+	--component-layout-layout-md-grid-template-columns: min-content 1fr;
+	--component-layout-layout-md-grid-template-rows: min-content min-content 1fr;
+	--component-layout-layout-lg-grid-template-areas: 'alertbanner alertbanner'
+		'topbar topbar' 'sidebar main';
+	--component-layout-layout-lg-grid-template-columns: min-content 1fr;
+	--component-layout-layout-lg-grid-template-rows: min-content min-content 1fr;
+	--component-layout-sidebar-sm-hidden-display: none;
+	--component-layout-sidebar-sm-above-grid-display: block;
+	--component-layout-sidebar-md-display: block;
+	--component-layout-sidebar-md-width: 200px;
+	--component-layout-sidebar-lg-width: 320px;
+}

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/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;

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

@@ -0,0 +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 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

@@ -0,0 +1,16 @@
+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';
+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 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 layoutStyles: (theme: LayoutTheme) => SerializedStyles;
+export declare const sidebarStyles: (theme: SidebarTheme, { layoutSmBreakpoint }: Required<Pick<SidebarProps, 'layoutSmBreakpoint'>>) => SerializedStyles;

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

@@ -0,0 +1,20 @@
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { LayoutTheme, SidebarTheme } from './styles';
+export interface LayoutProps extends DefaultPropsWithChildren<LayoutTheme> {
+    /**
+     * 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;
+}
+export interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme> {
+    /**
+     * Defines the layout behavior of the sidebar at the sm breakpoint.
+     *
+     * - 'above-grid' will place the sidebar above the grid content, effectively making it a horizontal bar at the top of the page, consumers may want to adjust the sidebar content styling for this breakpoint to make it look good in a horizontal layout.
+     * - 'hidden' 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).
+     *
+     */
+    layoutSmBreakpoint?: 'above-grid' | 'hidden';
+}

package/dist/types/grid.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Grid component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/grid.css),
+ * you don't need to install these.
+ */
+export { Grid } from './components/grid/Grid';
+export { Item } from './components/grid/Grid';
+export type { GridProps, ItemProps } from './components/grid/types';
+export type { PartialGridTheme as GridTheme } from './components/grid/styles';
+export { componentGrid } from './styleD/build/typescript/component/grid';
+export type { ComponentGrid } from './styleD/build/typescript/component/grid';

package/dist/types/index.d.ts

@@ -28,6 +28,8 @@ export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
 export { componentDatePicker } from './styleD/build/typescript/component/datePicker';
 export type { ComponentDatePicker } from './styleD/build/typescript/component/datePicker';
+export { componentGrid } from './styleD/build/typescript/component/grid';
+export type { ComponentGrid } from './styleD/build/typescript/component/grid';
 export { componentForm } from './styleD/build/typescript/component/form';
 export type { ComponentForm } from './styleD/build/typescript/component/form';
 export { componentIcon } from './styleD/build/typescript/component/icon';
@@ -36,6 +38,8 @@ export { componentInlineMessage } from './styleD/build/typescript/component/inli
 export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
 export { componentMenu } from './styleD/build/typescript/component/menu';
 export type { ComponentMenu } from './styleD/build/typescript/component/menu';
+export { componentLayout } from './styleD/build/typescript/component/layout';
+export type { ComponentLayout } from './styleD/build/typescript/component/layout';
 export { componentLink } from './styleD/build/typescript/component/link';
 export type { ComponentLink } from './styleD/build/typescript/component/link';
 export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';

package/dist/types/layout.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Layout component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ * - `react-aria-components` (for the `TopBar` components used in the example)
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * 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 { 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

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentGrid: {
+    shared: {
+        display: string;
+        width: string;
+        columns: number;
+        gap: string;
+        direction: string;
+        wrap: string;
+        justifyContent: string;
+        alignItems: string;
+    };
+};
+export type ComponentGrid = typeof componentGrid;

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

@@ -0,0 +1,48 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentLayout: {
+    layout: {
+        shared: {
+            display: string;
+            minHeight: string;
+            width: string;
+            'max-width': string;
+            'margin-left': string;
+            'margin-right': string;
+        };
+        sm: {
+            gridTemplateAreas: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+        };
+        md: {
+            gridTemplateAreas: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+        };
+        lg: {
+            gridTemplateAreas: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+        };
+    };
+    sidebar: {
+        sm: {
+            hidden: {
+                display: string;
+            };
+            aboveGrid: {
+                display: string;
+            };
+        };
+        md: {
+            display: string;
+            width: string;
+        };
+        lg: {
+            width: string;
+        };
+    };
+};
+export type ComponentLayout = typeof componentLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -117,6 +117,11 @@
       "import": "./dist/date-picker.js",
       "require": "./dist/date-picker.cjs"
     },
+    "./grid": {
+      "types": "./dist/types/grid.d.ts",
+      "import": "./dist/grid.js",
+      "require": "./dist/grid.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -147,6 +152,11 @@
       "import": "./dist/link.js",
       "require": "./dist/link.cjs"
     },
+    "./layout": {
+      "types": "./dist/types/layout.d.ts",
+      "import": "./dist/layout.js",
+      "require": "./dist/layout.cjs"
+    },
     "./fonts/OpenSans.css": "./dist/fonts/OpenSans.css",
     "./fonts/MaterialSymbolsOutlined.css": "./dist/fonts/MaterialSymbolsOutlined.css",
     "./fonts/MaterialSymbolsRound.css": "./dist/fonts/MaterialSymbolsRound.css",
@@ -183,7 +193,9 @@
     "./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css",
     "./component/datePicker.css": "./dist/styleD/build/css/component/datePicker.css",
     "./component/intendedAudienceSignifier.css": "./dist/styleD/build/css/component/intendedAudienceSignifier.css",
-    "./component/link.css": "./dist/styleD/build/css/component/link.css"
+    "./component/link.css": "./dist/styleD/build/css/component/link.css",
+    "./component/grid.css": "./dist/styleD/build/css/component/grid.css",
+    "./component/layout.css": "./dist/styleD/build/css/component/layout.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -270,6 +282,12 @@
       ],
       "link": [
         "./dist/types/link.d.ts"
+      ],
+      "grid": [
+        "./dist/types/grid.d.ts"
+      ],
+      "layout": [
+        "./dist/types/layout.d.ts"
       ]
     }
   },