@guardian/stand 0.0.34 → 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';