@guardian/stand 0.0.37 → 0.0.38

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/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/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.37",
+  "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",