@guardian/stand 0.0.37 → 0.0.38

package/dist/components/alert-banner/AlertBanner.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { useMemo } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { alertBannerContentStyles, alertBannerStyles, defaultAlertBannerTheme } from './styles.js';
+import { defaultAlertBannerTheme, alertBannerContentStyles, alertBannerStyles } from './styles.js';
 import { Icon } from '../icon/Icon.js';
 import { IconButton } from '../icon-button/IconButton.js';
 

package/dist/components/avatar/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { useState } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { avatarImageStyles, avatarStyles, defaultAvatarTheme } from './styles.js';
+import { defaultAvatarTheme, avatarImageStyles, avatarStyles } from './styles.js';
 import { avatarColors } from './types.js';
 
 const getColorFromString = (input) => {

package/dist/components/button/Button.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { Button as Button$1, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
-import { buttonStyles, defaultButtonTheme } from './styles.js';
+import { defaultButtonTheme, buttonStyles } from './styles.js';
 
 function Button({ variant = "primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
   const mergedTheme = mergeDeep(defaultButtonTheme, theme);

package/dist/components/checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { checkboxLabelStyles, checkboxStyles, defaultCheckboxTheme } from './styles.js';
+import { defaultCheckboxTheme, checkboxLabelStyles, checkboxStyles } from './styles.js';
 
 function Checkbox({ children, size = "md", isIndeterminate = false, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultCheckboxTheme, theme);

package/dist/components/checkbox/CheckboxGroup.js

@@ -4,7 +4,7 @@ import { CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { FormInputContainer } from '../form/Form.js';
 import { Checkbox } from './Checkbox.js';
-import { checkboxGroupStyles, defaultCheckboxTheme } from './styles.js';
+import { defaultCheckboxTheme, checkboxGroupStyles } from './styles.js';
 
 function CheckboxGroup({ size = "md", theme = {}, ...props }) {
   const mergedTheme = mergeDeep(defaultCheckboxTheme, {

package/dist/components/date-picker/DatePicker.js

@@ -4,7 +4,7 @@ import { DatePicker as DatePicker$1, Group, I18nProvider, Button, Popover, DateI
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { FormInputContainer } from '../form/Form.js';
 import { Icon } from '../icon/Icon.js';
-import { dateSegmentStyles, datePickerStyles, datePickerPopoverStyles, defaultDatePickerTheme, calendarHeaderStyles, calendarCellStyles, calendarGridStyles } from './styles.js';
+import { defaultDatePickerTheme, dateSegmentStyles, datePickerStyles, datePickerPopoverStyles, calendarHeaderStyles, calendarCellStyles, calendarGridStyles } from './styles.js';
 
 const MONTHS = [
   "January",

package/dist/components/grid/Grid.js

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { gridStyles, itemStyles, defaultGridTheme } from './styles.js';
+import { defaultGridTheme, gridStyles, itemStyles } from './styles.js';
 
 function Grid({ children, theme = {}, cssOverrides, as: Component = "div", ...props }) {
   const mergedTheme = mergeDeep(defaultGridTheme, theme);

package/dist/components/grid/styles.cjs

@@ -8,9 +8,9 @@ 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) => {
+const numericOffsetMargin = (offset, columns, gap) => `calc(((100% - (${columns} - 1) * ${gap}) * ${offset} / ${columns}) + ${offset} * ${gap})`;
+const numericSizeWidth = (size, columns, gap) => `calc(((100% - (${columns} - 1) * ${gap}) * ${size} / ${columns}) + (${size} - 1) * ${gap})`;
+const fixedSizeStyles = (size, theme, breakpoint) => {
   if (size === "grow") {
     return react.css`
 			flex-basis: 0;
@@ -27,59 +27,53 @@ const fixedSizeStyles = (size, theme) => {
 			max-width: none;
 		`;
   }
-  const clampedSize = clampToColumns(size, theme.shared.columns);
-  const width = numericSizeWidth(clampedSize, theme);
+  const width = numericSizeWidth(
+    clampToColumns(size, theme[breakpoint].columns),
+    theme[breakpoint].columns,
+    theme[breakpoint].gap
+  );
   return react.css`
-		flex-basis: ${width};
 		flex-grow: 0;
+		flex-basis: ${width};
 		width: ${width};
 		max-width: ${width};
 	`;
 };
-const fixedOffsetStyles = (offset, theme) => {
+const fixedOffsetStyles = (offset, theme, breakpoint) => {
+  if (typeof offset === "undefined") {
+    return react.css``;
+  }
   if (offset === "auto") {
     return react.css`
 			margin-left: auto;
 		`;
   }
-  const clampedOffset = clampToColumns(offset, theme.shared.columns);
   return react.css`
-		margin-left: ${numericOffsetMargin(clampedOffset, theme)};
+		margin-left: ${numericOffsetMargin(
+    clampToColumns(offset, theme[breakpoint].columns),
+    theme[breakpoint].columns,
+    theme[breakpoint].gap
+  )};
 	`;
 };
-const offsetStyles = (offset, theme) => {
-  if (typeof offset === "undefined") {
-    return react.css``;
-  }
+const offsetStyles = (offset, theme, breakpoint) => {
   if (!isResponsiveOffset(offset)) {
-    return fixedOffsetStyles(offset, theme);
+    return fixedOffsetStyles(offset, theme, breakpoint);
   }
-  return react.css`
-		${Object.entries(offset).map(
-    ([breakpoint, breakpointOffset]) => react.css`
-				${mq.from[breakpoint]} {
-					${fixedOffsetStyles(breakpointOffset, theme)}
-				}
-			`
-  )}
-	`;
+  return fixedOffsetStyles(offset[breakpoint], theme, breakpoint);
 };
-const sizeStyles = (size, theme) => {
+const sizeStyles = (size, theme, breakpoint) => {
   if (typeof size === "undefined") {
-    return fixedSizeStyles(theme.shared.columns, theme);
+    size = theme[breakpoint].columns;
   }
   if (!isResponsiveGridSize(size)) {
-    return fixedSizeStyles(size, theme);
+    return fixedSizeStyles(size, theme, breakpoint);
   }
-  return react.css`
-		${Object.entries(size).map(
-    ([breakpoint, breakpointSize]) => react.css`
-				${mq.from[breakpoint]} {
-					${fixedSizeStyles(breakpointSize, theme)}
-				}
-			`
-  )}
-	`;
+  return fixedSizeStyles(
+    size[breakpoint] ?? theme[breakpoint].columns,
+    theme,
+    breakpoint
+  );
 };
 const gridStyles = (theme) => {
   return react.css`
@@ -87,17 +81,43 @@ const gridStyles = (theme) => {
 		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};
+
+		${mq.from.sm} {
+			gap: ${theme.sm.gap};
+			padding: 0 ${theme.sm.padding};
+		}
+
+		${mq.from.md} {
+			gap: ${theme.md.gap};
+			padding: 0 ${theme.md.padding};
+		}
+
+		${mq.from.lg} {
+			gap: ${theme.lg.gap};
+			padding: 0 ${theme.lg.padding};
+		}
 	`;
 };
 const itemStyles = (theme, { size, offset }) => {
   return react.css`
 		min-width: 0;
-		${sizeStyles(size, theme)}
-		${offsetStyles(offset, theme)}
+
+		${mq.from.sm} {
+			${sizeStyles(size, theme, "sm")}
+			${offsetStyles(offset, theme, "sm")}
+		}
+
+		${mq.from.md} {
+			${sizeStyles(size, theme, "md")}
+			${offsetStyles(offset, theme, "md")}
+		}
+
+		${mq.from.lg} {
+			${sizeStyles(size, theme, "lg")}
+			${offsetStyles(offset, theme, "lg")}
+		}
 	`;
 };
 

package/dist/components/grid/styles.js

@@ -6,9 +6,9 @@ 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) => {
+const numericOffsetMargin = (offset, columns, gap) => `calc(((100% - (${columns} - 1) * ${gap}) * ${offset} / ${columns}) + ${offset} * ${gap})`;
+const numericSizeWidth = (size, columns, gap) => `calc(((100% - (${columns} - 1) * ${gap}) * ${size} / ${columns}) + (${size} - 1) * ${gap})`;
+const fixedSizeStyles = (size, theme, breakpoint) => {
   if (size === "grow") {
     return css`
 			flex-basis: 0;
@@ -25,55 +25,41 @@ const fixedSizeStyles = (size, theme) => {
 			max-width: none;
 		`;
   }
-  const clampedSize = clampToColumns(size, theme.shared.columns);
-  const width = numericSizeWidth(clampedSize, theme);
+  const width = numericSizeWidth(clampToColumns(size, theme[breakpoint].columns), theme[breakpoint].columns, theme[breakpoint].gap);
   return css`
-		flex-basis: ${width};
 		flex-grow: 0;
+		flex-basis: ${width};
 		width: ${width};
 		max-width: ${width};
 	`;
 };
-const fixedOffsetStyles = (offset, theme) => {
+const fixedOffsetStyles = (offset, theme, breakpoint) => {
+  if (typeof offset === "undefined") {
+    return css``;
+  }
   if (offset === "auto") {
     return css`
 			margin-left: auto;
 		`;
   }
-  const clampedOffset = clampToColumns(offset, theme.shared.columns);
   return css`
-		margin-left: ${numericOffsetMargin(clampedOffset, theme)};
+		margin-left: ${numericOffsetMargin(clampToColumns(offset, theme[breakpoint].columns), theme[breakpoint].columns, theme[breakpoint].gap)};
 	`;
 };
-const offsetStyles = (offset, theme) => {
-  if (typeof offset === "undefined") {
-    return css``;
-  }
+const offsetStyles = (offset, theme, breakpoint) => {
   if (!isResponsiveOffset(offset)) {
-    return fixedOffsetStyles(offset, theme);
+    return fixedOffsetStyles(offset, theme, breakpoint);
   }
-  return css`
-		${Object.entries(offset).map(([breakpoint, breakpointOffset]) => css`
-				${from[breakpoint]} {
-					${fixedOffsetStyles(breakpointOffset, theme)}
-				}
-			`)}
-	`;
+  return fixedOffsetStyles(offset[breakpoint], theme, breakpoint);
 };
-const sizeStyles = (size, theme) => {
+const sizeStyles = (size, theme, breakpoint) => {
   if (typeof size === "undefined") {
-    return fixedSizeStyles(theme.shared.columns, theme);
+    size = theme[breakpoint].columns;
   }
   if (!isResponsiveGridSize(size)) {
-    return fixedSizeStyles(size, theme);
+    return fixedSizeStyles(size, theme, breakpoint);
   }
-  return css`
-		${Object.entries(size).map(([breakpoint, breakpointSize]) => css`
-				${from[breakpoint]} {
-					${fixedSizeStyles(breakpointSize, theme)}
-				}
-			`)}
-	`;
+  return fixedSizeStyles(size[breakpoint] ?? theme[breakpoint].columns, theme, breakpoint);
 };
 const gridStyles = (theme) => {
   return css`
@@ -81,17 +67,43 @@ const gridStyles = (theme) => {
 		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};
+
+		${from.sm} {
+			gap: ${theme.sm.gap};
+			padding: 0 ${theme.sm.padding};
+		}
+
+		${from.md} {
+			gap: ${theme.md.gap};
+			padding: 0 ${theme.md.padding};
+		}
+
+		${from.lg} {
+			gap: ${theme.lg.gap};
+			padding: 0 ${theme.lg.padding};
+		}
 	`;
 };
 const itemStyles = (theme, { size, offset }) => {
   return css`
 		min-width: 0;
-		${sizeStyles(size, theme)}
-		${offsetStyles(offset, theme)}
+
+		${from.sm} {
+			${sizeStyles(size, theme, "sm")}
+			${offsetStyles(offset, theme, "sm")}
+		}
+
+		${from.md} {
+			${sizeStyles(size, theme, "md")}
+			${offsetStyles(offset, theme, "md")}
+		}
+
+		${from.lg} {
+			${sizeStyles(size, theme, "lg")}
+			${offsetStyles(offset, theme, "lg")}
+		}
 	`;
 };
 

package/dist/components/icon/Icon.js

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { iconStyles, defaultIconTheme } from './styles.js';
+import { defaultIconTheme, iconStyles } from './styles.js';
 
 function Icon({ children, size = "md", fill, alt, symbol, theme = {}, cssOverrides, className }) {
   const mergedTheme = mergeDeep(defaultIconTheme, theme);

package/dist/components/icon-button/IconButton.js

@@ -3,7 +3,7 @@ import { useRef, useEffect } from 'react';
 import { Button, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
-import { iconButtonStyles, defaultIconButtonTheme } from './styles.js';
+import { defaultIconButtonTheme, iconButtonStyles } from './styles.js';
 
 function IconButton({ variant = "primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultIconButtonTheme, theme);

package/dist/components/icon-button/styles.js

@@ -1,4 +1,4 @@
-import { buttonStyles, defaultButtonTheme } from '../button/styles.js';
+import { defaultButtonTheme, buttonStyles } from '../button/styles.js';
 
 const defaultIconButtonTheme = defaultButtonTheme;
 const iconButtonStyles = buttonStyles;

package/dist/components/icon-link-button/IconLinkButton.js

@@ -3,7 +3,7 @@ import { useRef, useEffect } from 'react';
 import { Link, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
-import { iconLinkButtonStyles, defaultIconLinkButtonTheme } from './styles.js';
+import { defaultIconLinkButtonTheme, iconLinkButtonStyles } from './styles.js';
 
 function IconLinkButton({ variant = "primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultIconLinkButtonTheme, theme);

package/dist/components/icon-link-button/styles.js

@@ -1,4 +1,4 @@
-import { buttonStyles, defaultButtonTheme } from '../button/styles.js';
+import { defaultButtonTheme, buttonStyles } from '../button/styles.js';
 
 const defaultIconLinkButtonTheme = defaultButtonTheme;
 const iconLinkButtonStyles = buttonStyles;

package/dist/components/inline-message/InlineMessage.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { Typography } from '../typography/Typography.js';
-import { inlineMessageIconStyles, inlineMessageStyles, defaultInlineMessageTheme } from './styles.js';
+import { defaultInlineMessageTheme, inlineMessageIconStyles, inlineMessageStyles } from './styles.js';
 
 function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) {
   const mergedTheme = mergeDeep(defaultInlineMessageTheme, theme);

package/dist/components/intended-audience-signifier/IntendedAudienceSignifier.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { DoubleChevronRightSvg, globeIcon, auFlag, usFlag, ukFlag } from './FlagIcons.js';
-import { intendedAudienceSignifierStyles, intendedAudienceSignifierIconStyles, intendedAudienceSignifierChevronIconStyles, defaultIntendedAudienceSignifierTheme } from './styles.js';
+import { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierStyles, intendedAudienceSignifierIconStyles, intendedAudienceSignifierChevronIconStyles } from './styles.js';
 
 const sourceIcons = {
   UK: ukFlag,

package/dist/components/layout/Layout.cjs

@@ -1,15 +1,27 @@
 '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({
+const LayoutAlertBanner = ({
+  as: Component = "aside",
+  children,
+  cssOverrides,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { css: [styles.alertBannerLayoutStyles(), cssOverrides], ...props, children });
+};
+const LayoutTopBar = ({
+  as: Component = "nav",
+  children,
+  cssOverrides,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { css: [styles.topBarLayoutStyles(), cssOverrides], ...props, children });
+};
+function LayoutSidebar({
+  as: Component = "aside",
   children,
   layoutSmBreakpoint = "hidden",
   theme = {},
@@ -18,97 +30,50 @@ function Sidebar({
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultSidebarTheme, theme);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "aside",
+    Component,
     {
-      css: [styles.sidebarStyles(mergedTheme, { layoutSmBreakpoint }), cssOverrides],
+      css: [
+        styles.sidebarLayoutStyles(),
+        styles.sidebarStyles(mergedTheme, { layoutSmBreakpoint }),
+        cssOverrides
+      ],
       ...props,
       children
     }
   );
 }
-function Layout({
+function LayoutMain({
+  as: Component = "main",
   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
-          ]
-        }));
-      }
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultMainTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      css: [styles.mainLayoutStyles(mergedTheme, { fluid }), cssOverrides],
+      ...props,
+      children
     }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.layoutStyles(mergedTheme), cssOverrides], ...props, children: [
-    alertBanner,
-    topBar,
-    sidebar,
-    main
-  ] });
+  );
+}
+function LayoutRoot({
+  children,
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultLayoutTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.layoutStyles(mergedTheme), cssOverrides], ...props, children });
 }
+const Layout = Object.assign(LayoutRoot, {
+  AlertBanner: LayoutAlertBanner,
+  TopBar: LayoutTopBar,
+  Sidebar: LayoutSidebar,
+  Main: LayoutMain
+});
 
 exports.Layout = Layout;
-exports.Sidebar = Sidebar;