@guardian/stand 0.0.37 → 0.0.39

package/dist/components/Grid/styles.cjs

@@ -0,0 +1,126 @@
+'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, 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;
+			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 width = numericSizeWidth(
+    clampToColumns(size, theme[breakpoint].columns),
+    theme[breakpoint].columns,
+    theme[breakpoint].gap
+  );
+  return react.css`
+		flex-grow: 0;
+		flex-basis: ${width};
+		width: ${width};
+		max-width: ${width};
+	`;
+};
+const fixedOffsetStyles = (offset, theme, breakpoint) => {
+  if (typeof offset === "undefined") {
+    return react.css``;
+  }
+  if (offset === "auto") {
+    return react.css`
+			margin-left: auto;
+		`;
+  }
+  return react.css`
+		margin-left: ${numericOffsetMargin(
+    clampToColumns(offset, theme[breakpoint].columns),
+    theme[breakpoint].columns,
+    theme[breakpoint].gap
+  )};
+	`;
+};
+const offsetStyles = (offset, theme, breakpoint) => {
+  if (!isResponsiveOffset(offset)) {
+    return fixedOffsetStyles(offset, theme, breakpoint);
+  }
+  return fixedOffsetStyles(offset[breakpoint], theme, breakpoint);
+};
+const sizeStyles = (size, theme, breakpoint) => {
+  if (typeof size === "undefined") {
+    size = theme[breakpoint].columns;
+  }
+  if (!isResponsiveGridSize(size)) {
+    return fixedSizeStyles(size, theme, breakpoint);
+  }
+  return fixedSizeStyles(
+    size[breakpoint] ?? theme[breakpoint].columns,
+    theme,
+    breakpoint
+  );
+};
+const gridStyles = (theme) => {
+  return react.css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.width};
+		flex-direction: ${theme.shared.direction};
+		flex-wrap: ${theme.shared.wrap};
+		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;
+
+		${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")}
+		}
+	`;
+};
+
+exports.defaultGridTheme = defaultGridTheme;
+exports.gridStyles = gridStyles;
+exports.itemStyles = itemStyles;

package/dist/components/Grid/styles.js

@@ -0,0 +1,110 @@
+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, 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;
+			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 width = numericSizeWidth(clampToColumns(size, theme[breakpoint].columns), theme[breakpoint].columns, theme[breakpoint].gap);
+  return css`
+		flex-grow: 0;
+		flex-basis: ${width};
+		width: ${width};
+		max-width: ${width};
+	`;
+};
+const fixedOffsetStyles = (offset, theme, breakpoint) => {
+  if (typeof offset === "undefined") {
+    return css``;
+  }
+  if (offset === "auto") {
+    return css`
+			margin-left: auto;
+		`;
+  }
+  return css`
+		margin-left: ${numericOffsetMargin(clampToColumns(offset, theme[breakpoint].columns), theme[breakpoint].columns, theme[breakpoint].gap)};
+	`;
+};
+const offsetStyles = (offset, theme, breakpoint) => {
+  if (!isResponsiveOffset(offset)) {
+    return fixedOffsetStyles(offset, theme, breakpoint);
+  }
+  return fixedOffsetStyles(offset[breakpoint], theme, breakpoint);
+};
+const sizeStyles = (size, theme, breakpoint) => {
+  if (typeof size === "undefined") {
+    size = theme[breakpoint].columns;
+  }
+  if (!isResponsiveGridSize(size)) {
+    return fixedSizeStyles(size, theme, breakpoint);
+  }
+  return fixedSizeStyles(size[breakpoint] ?? theme[breakpoint].columns, theme, breakpoint);
+};
+const gridStyles = (theme) => {
+  return css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.width};
+		flex-direction: ${theme.shared.direction};
+		flex-wrap: ${theme.shared.wrap};
+		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;
+
+		${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")}
+		}
+	`;
+};
+
+export { defaultGridTheme, gridStyles, itemStyles };

package/dist/components/{icon → 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 → Icon}/styles.cjs

@@ -11,7 +11,7 @@ const iconStyles = (theme, {
 }) => react.css`
 	display: ${theme.shared.display};
 	font-size: ${theme[size].size};
-	user-select: ${theme.shared["user-select"]};
+	user-select: ${theme.shared.userSelect};
 	${fill ? `color: ${fill};` : ""}
 
 	${mode === "svg" ? `

package/dist/components/{icon → Icon}/styles.js

@@ -5,7 +5,7 @@ const defaultIconTheme = componentIcon;
 const iconStyles = (theme, { size, fill, mode }) => css`
 	display: ${theme.shared.display};
 	font-size: ${theme[size].size};
-	user-select: ${theme.shared["user-select"]};
+	user-select: ${theme.shared.userSelect};
 	${fill ? `color: ${fill};` : ""}
 
 	${mode === "svg" ? `

package/dist/components/{icon-button → IconButton}/IconButton.cjs

@@ -4,7 +4,7 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
-var Icon = require('../icon/Icon.cjs');
+var Icon = require('../Icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function IconButton({

package/dist/components/{icon-button → IconButton}/IconButton.js

@@ -2,8 +2,8 @@ import { jsx } from '@emotion/react/jsx-runtime';
 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 { Icon } from '../Icon/Icon.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 → IconButton}/styles.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var styles = require('../button/styles.cjs');
+var styles = require('../Button/styles.cjs');
 
 const defaultIconButtonTheme = styles.defaultButtonTheme;
 const iconButtonStyles = styles.buttonStyles;

package/dist/components/{icon-button → IconButton}/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}/IconLinkButton.cjs

@@ -4,7 +4,7 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
-var Icon = require('../icon/Icon.cjs');
+var Icon = require('../Icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function IconLinkButton({

package/dist/components/{icon-link-button → IconLinkButton}/IconLinkButton.js

@@ -2,8 +2,8 @@ import { jsx } from '@emotion/react/jsx-runtime';
 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 { Icon } from '../Icon/Icon.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 → IconLinkButton}/styles.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var styles = require('../button/styles.cjs');
+var styles = require('../Button/styles.cjs');
 
 const defaultIconLinkButtonTheme = styles.defaultButtonTheme;
 const iconLinkButtonStyles = styles.buttonStyles;

package/dist/components/{icon-link-button → IconLinkButton}/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}/InlineMessage.cjs

@@ -3,8 +3,8 @@
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var mergeDeep = require('../../util/mergeDeep.cjs');
-var Icon = require('../icon/Icon.cjs');
-var Typography = require('../typography/Typography.cjs');
+var Icon = require('../Icon/Icon.cjs');
+var Typography = require('../Typography/Typography.cjs');
 var styles = require('./styles.cjs');
 
 function InlineMessage({
@@ -51,7 +51,7 @@ function InlineMessage({
         /* @__PURE__ */ jsxRuntime.jsx(
           Typography.Typography,
           {
-            variant: "help-text-form-md",
+            variant: "helpTextFormMd",
             theme: { color: mergedTheme[level].color },
             children
           }

package/dist/components/{inline-message → InlineMessage}/InlineMessage.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 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 { Icon } from '../Icon/Icon.js';
+import { Typography } from '../Typography/Typography.js';
+import { defaultInlineMessageTheme, inlineMessageIconStyles, inlineMessageStyles } from './styles.js';
 
 function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) {
   const mergedTheme = mergeDeep(defaultInlineMessageTheme, theme);
@@ -21,7 +21,7 @@ function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cs
         return "info";
     }
   }, [icon, level]);
-  return jsxs("div", { css: [inlineMessageStyles(mergedTheme, { level }), cssOverrides], className, ...props, children: [!hideIcon && jsx(Icon, { fill: mergedTheme[level].color, cssOverrides: inlineMessageIconStyles(mergedTheme), size: "md", children: determinedIcon }), jsx(Typography, { variant: "help-text-form-md", theme: { color: mergedTheme[level].color }, children })] });
+  return jsxs("div", { css: [inlineMessageStyles(mergedTheme, { level }), cssOverrides], className, ...props, children: [!hideIcon && jsx(Icon, { fill: mergedTheme[level].color, cssOverrides: inlineMessageIconStyles(mergedTheme), size: "md", children: determinedIcon }), jsx(Typography, { variant: "helpTextFormMd", theme: { color: mergedTheme[level].color }, children })] });
 }
 
 export { InlineMessage };

package/dist/components/{inline-message → InlineMessage}/styles.cjs

@@ -7,14 +7,14 @@ const defaultInlineMessageTheme = inlineMessage.componentInlineMessage;
 const inlineMessageStyles = (theme, { level }) => {
   return react.css`
 		display: ${theme.shared.display};
-		align-items: ${theme.shared["align-items"]};
+		align-items: ${theme.shared.alignItems};
 		gap: ${theme.shared.gap};
 		color: ${theme[level].color};
 	`;
 };
 const inlineMessageIconStyles = (theme) => {
   return react.css`
-		align-self: ${theme.shared.icon["align-self"]};
+		align-self: ${theme.shared.icon.alignSelf};
 	`;
 };
 

package/dist/components/{inline-message → InlineMessage}/styles.js

@@ -5,14 +5,14 @@ const defaultInlineMessageTheme = componentInlineMessage;
 const inlineMessageStyles = (theme, { level }) => {
   return css`
 		display: ${theme.shared.display};
-		align-items: ${theme.shared["align-items"]};
+		align-items: ${theme.shared.alignItems};
 		gap: ${theme.shared.gap};
 		color: ${theme[level].color};
 	`;
 };
 const inlineMessageIconStyles = (theme) => {
   return css`
-		align-self: ${theme.shared.icon["align-self"]};
+		align-self: ${theme.shared.icon.alignSelf};
 	`;
 };
 

package/dist/components/{intended-audience-signifier → IntendedAudienceSignifier}/IntendedAudienceSignifier.cjs

@@ -11,21 +11,50 @@ const sourceIcons = {
   AUS: FlagIcons.auFlag,
   Global: FlagIcons.globeIcon
 };
-const getSourceIconElement = (sourceTag, audience) => {
+const getSourceIconElement = (source, audience) => {
   if (audience === "Global") {
     return FlagIcons.globeIcon;
   }
-  return sourceIcons[sourceTag];
+  return sourceIcons[source];
 };
-const getIntendedAudienceIconElement = (sourceTag, audience) => {
+const getIntendedAudienceIconElement = (source, audience) => {
   if (audience === "Domestic for Domestic") {
-    return getSourceIconElement(sourceTag, audience);
+    return getSourceIconElement(source, audience);
   }
   if (audience === "Global" || audience === "Domestic For Global") {
     return FlagIcons.globeIcon;
   }
   return sourceIcons[audience];
 };
+const getSourceDescription = (source, audience) => {
+  switch (audience) {
+    case "Global":
+      return "Global";
+    case "Domestic For Global":
+    case "Domestic for Domestic":
+    case "UK":
+    case "US":
+    case "AUS":
+      return source;
+  }
+};
+const getAudienceDescription = (source, audience) => {
+  switch (audience) {
+    case "Global":
+    case "Domestic For Global":
+      return "Global";
+    case "Domestic for Domestic":
+      return "Domestic";
+    case "UK":
+    case "US":
+    case "AUS":
+      return audience === source ? "Domestic" : audience;
+  }
+};
+const getSignifierDescription = (source, audience) => {
+  return `${getSourceDescription(source, audience)} article for ${getAudienceDescription(source, audience)} audience`;
+};
+const AUDIENCE_NOT_KNOWN_DESCRIPTION = "Intended audience unknown";
 function IntendedAudienceSignifier({
   source,
   intendedAudience,
@@ -42,18 +71,21 @@ function IntendedAudienceSignifier({
         ...props,
         className,
         css: [styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
+        "aria-label": AUDIENCE_NOT_KNOWN_DESCRIPTION,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Don\u2018t know" })
       }
     );
   }
   const iconStyles = styles.intendedAudienceSignifierIconStyles(mergedTheme);
   const chevronIconStyles = styles.intendedAudienceSignifierChevronIconStyles(mergedTheme);
+  const description = getSignifierDescription(source, intendedAudience);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ...props,
       className,
       css: [styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
+      "aria-label": description,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { css: iconStyles, children: getSourceIconElement(source, intendedAudience) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { css: chevronIconStyles, children: FlagIcons.DoubleChevronRightSvg }),

package/dist/components/IntendedAudienceSignifier/IntendedAudienceSignifier.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { DoubleChevronRightSvg, globeIcon, auFlag, usFlag, ukFlag } from './FlagIcons.js';
+import { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierStyles, intendedAudienceSignifierIconStyles, intendedAudienceSignifierChevronIconStyles } from './styles.js';
+
+const sourceIcons = {
+  UK: ukFlag,
+  US: usFlag,
+  AUS: auFlag,
+  Global: globeIcon
+};
+const getSourceIconElement = (source, audience) => {
+  if (audience === "Global") {
+    return globeIcon;
+  }
+  return sourceIcons[source];
+};
+const getIntendedAudienceIconElement = (source, audience) => {
+  if (audience === "Domestic for Domestic") {
+    return getSourceIconElement(source, audience);
+  }
+  if (audience === "Global" || audience === "Domestic For Global") {
+    return globeIcon;
+  }
+  return sourceIcons[audience];
+};
+const getSourceDescription = (source, audience) => {
+  switch (audience) {
+    case "Global":
+      return "Global";
+    case "Domestic For Global":
+    case "Domestic for Domestic":
+    case "UK":
+    case "US":
+    case "AUS":
+      return source;
+  }
+};
+const getAudienceDescription = (source, audience) => {
+  switch (audience) {
+    case "Global":
+    case "Domestic For Global":
+      return "Global";
+    case "Domestic for Domestic":
+      return "Domestic";
+    case "UK":
+    case "US":
+    case "AUS":
+      return audience === source ? "Domestic" : audience;
+  }
+};
+const getSignifierDescription = (source, audience) => {
+  return `${getSourceDescription(source, audience)} article for ${getAudienceDescription(source, audience)} audience`;
+};
+const AUDIENCE_NOT_KNOWN_DESCRIPTION = "Intended audience unknown";
+function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultIntendedAudienceSignifierTheme, theme);
+  if (intendedAudience === "Don't know") {
+    return jsx("div", { ...props, className, css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides], "aria-label": AUDIENCE_NOT_KNOWN_DESCRIPTION, children: jsx("span", { children: "Don\u2018t know" }) });
+  }
+  const iconStyles = intendedAudienceSignifierIconStyles(mergedTheme);
+  const chevronIconStyles = intendedAudienceSignifierChevronIconStyles(mergedTheme);
+  const description = getSignifierDescription(source, intendedAudience);
+  return jsxs("div", { ...props, className, css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides], "aria-label": description, children: [jsx("div", { css: iconStyles, children: getSourceIconElement(source, intendedAudience) }), jsx("div", { css: chevronIconStyles, children: DoubleChevronRightSvg }), jsx("div", { css: iconStyles, children: getIntendedAudienceIconElement(source, intendedAudience) })] });
+}
+
+export { IntendedAudienceSignifier };

package/dist/components/Layout/Layout.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+
+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 = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultSidebarTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      css: [
+        styles.sidebarLayoutStyles(),
+        styles.sidebarStyles(mergedTheme, { layoutSmBreakpoint }),
+        cssOverrides
+      ],
+      ...props,
+      children
+    }
+  );
+}
+function LayoutMain({
+  as: Component = "main",
+  children,
+  fluid = true,
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultMainTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      css: [styles.mainLayoutStyles(mergedTheme, { fluid }), cssOverrides],
+      ...props,
+      children
+    }
+  );
+}
+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;