@guardian/stand 0.0.37 → 0.0.38

package/dist/components/layout/Layout.js

@@ -1,83 +1,34 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import React from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
 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';
+import { layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles, alertBannerLayoutStyles, defaultSidebarTheme, defaultMainTheme, defaultLayoutTheme } from './styles.js';
 
-function Sidebar({ children, layoutSmBreakpoint = "hidden", theme = {}, cssOverrides, ...props }) {
+const LayoutAlertBanner = ({ as: Component = "aside", children, cssOverrides, ...props }) => {
+  return jsx(Component, { css: [alertBannerLayoutStyles(), cssOverrides], ...props, children });
+};
+const LayoutTopBar = ({ as: Component = "nav", children, cssOverrides, ...props }) => {
+  return jsx(Component, { css: [topBarLayoutStyles(), cssOverrides], ...props, children });
+};
+function LayoutSidebar({ as: Component = "aside", children, layoutSmBreakpoint = "hidden", theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultSidebarTheme, theme);
-  return jsx("aside", { css: [sidebarStyles(mergedTheme, { layoutSmBreakpoint }), cssOverrides], ...props, children });
+  return jsx(Component, { css: [
+    sidebarLayoutStyles(),
+    sidebarStyles(mergedTheme, { layoutSmBreakpoint }),
+    cssOverrides
+  ], ...props, children });
 }
-function Layout({ children, fluid = true, theme = {}, cssOverrides, ...props }) {
+function LayoutMain({ as: Component = "main", children, fluid = true, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultMainTheme, theme);
+  return jsx(Component, { css: [mainLayoutStyles(mergedTheme, { fluid }), cssOverrides], ...props, children });
+}
+function LayoutRoot({ children, 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] });
+  return jsx("div", { css: [layoutStyles(mergedTheme), cssOverrides], ...props, children });
 }
+const Layout = Object.assign(LayoutRoot, {
+  AlertBanner: LayoutAlertBanner,
+  TopBar: LayoutTopBar,
+  Sidebar: LayoutSidebar,
+  Main: LayoutMain
+});
 
-export { Layout, Sidebar };
+export { Layout };

package/dist/components/layout/styles.cjs

@@ -6,6 +6,7 @@ var mq = require('../../styleD/utils/semantic/mq.cjs');
 
 const defaultLayoutTheme = layout.componentLayout["layout"];
 const defaultSidebarTheme = layout.componentLayout["sidebar"];
+const defaultMainTheme = layout.componentLayout["main"];
 const alertBannerLayoutStyles = () => {
   return react.css`
 		grid-area: alertbanner;
@@ -25,9 +26,9 @@ 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"]};
+					max-width: ${theme["max-width"]};
+					margin-left: ${theme["margin-left"]};
+					margin-right: ${theme["margin-right"]};
 				`}
 	`;
 };
@@ -84,6 +85,7 @@ const sidebarStyles = (theme, { layoutSmBreakpoint }) => {
 
 exports.alertBannerLayoutStyles = alertBannerLayoutStyles;
 exports.defaultLayoutTheme = defaultLayoutTheme;
+exports.defaultMainTheme = defaultMainTheme;
 exports.defaultSidebarTheme = defaultSidebarTheme;
 exports.layoutStyles = layoutStyles;
 exports.mainLayoutStyles = mainLayoutStyles;

package/dist/components/layout/styles.js

@@ -4,6 +4,7 @@ import { from } from '../../styleD/utils/semantic/mq.js';
 
 const defaultLayoutTheme = componentLayout["layout"];
 const defaultSidebarTheme = componentLayout["sidebar"];
+const defaultMainTheme = componentLayout["main"];
 const alertBannerLayoutStyles = () => {
   return css`
 		grid-area: alertbanner;
@@ -23,9 +24,9 @@ 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"]};
+					max-width: ${theme["max-width"]};
+					margin-left: ${theme["margin-left"]};
+					margin-right: ${theme["margin-right"]};
 				`}
 	`;
 };
@@ -80,4 +81,4 @@ const sidebarStyles = (theme, { layoutSmBreakpoint }) => {
 	`;
 };
 
-export { alertBannerLayoutStyles, defaultLayoutTheme, defaultSidebarTheme, layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles };
+export { alertBannerLayoutStyles, defaultLayoutTheme, defaultMainTheme, defaultSidebarTheme, layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles };

package/dist/components/link/Link.cjs

@@ -4,8 +4,8 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var colors = require('../../styleD/build/typescript/semantic/colors.cjs');
 var mergeDeep = require('../../util/mergeDeep.cjs');
-var styles = require('../typography/styles.cjs');
-var styles$1 = require('./styles.cjs');
+var styles$1 = require('../typography/styles.cjs');
+var styles = require('./styles.cjs');
 
 function Link({
   children,
@@ -15,16 +15,16 @@ function Link({
   className,
   ...props
 }) {
-  const mergedTheme = mergeDeep.mergeDeep(styles$1.defaultLinkTheme, theme);
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultLinkTheme, theme);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Link,
     {
       css: [
-        styles.typographyStyles(
+        styles$1.typographyStyles(
           { color: colors.semanticColors.text.strong },
           { variant: typography }
         ),
-        styles$1.linkStyles(mergedTheme),
+        styles.linkStyles(mergedTheme),
         cssOverrides
       ],
       className,

package/dist/components/link/Link.js

@@ -3,7 +3,7 @@ import { Link as Link$1 } from 'react-aria-components';
 import { semanticColors } from '../../styleD/build/typescript/semantic/colors.js';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { typographyStyles } from '../typography/styles.js';
-import { linkStyles, defaultLinkTheme } from './styles.js';
+import { defaultLinkTheme, linkStyles } from './styles.js';
 
 function Link({ children, typography = "body-sm", theme = {}, cssOverrides, className, ...props }) {
   const mergedTheme = mergeDeep(defaultLinkTheme, theme);

package/dist/components/link-button/LinkButton.js

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

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

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

package/dist/components/menu/Menu.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import React from 'react';
 import { MenuTrigger, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, Header, Separator, Popover as Popover$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { menuStyles, menuItemIconStyles, menuItemLabelStyles, menuItemDescriptionStyles, menuItemAsideStyles, menuItemStyles, menuSectionHeaderStyles, menuSeparatorStyles, defaultMenuPopoverTheme, menuPopoverStyles, defaultMenuSeparatorTheme, defaultMenuSectionTheme, defaultMenuItemTheme, defaultMenuTheme } from './styles.js';
+import { defaultMenuTheme, menuStyles, defaultMenuItemTheme, menuItemIconStyles, menuItemLabelStyles, menuItemDescriptionStyles, menuItemAsideStyles, menuItemStyles, defaultMenuSectionTheme, menuSectionHeaderStyles, defaultMenuSeparatorTheme, menuSeparatorStyles, defaultMenuPopoverTheme, menuPopoverStyles } from './styles.js';
 import { Icon } from '../icon/Icon.js';
 
 function Popover({ size = "md", children, theme = {}, cssOverrides, ...props }) {

package/dist/components/radio-group/RadioGroup.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Radio as Radio$1, composeRenderProps, RadioGroup as RadioGroup$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { FormInputContainer } from '../form/Form.js';
-import { radioIndicatorStyles, radioStyles, radioGroupStyles, defaultRadioGroupTheme } from './styles.js';
+import { defaultRadioGroupTheme, radioIndicatorStyles, radioStyles, radioGroupStyles } from './styles.js';
 
 function RadioGroup({ size = "md", isInvalid = false, theme = {}, children, ...props }) {
   const mergedTheme = mergeDeep(defaultRadioGroupTheme, theme);

package/dist/components/select/Select.js

@@ -4,7 +4,7 @@ import { ListBoxItem, Select as Select$1, Button, SelectValue, Popover, ListBox
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { FormInputContainer } from '../form/Form.js';
 import { Icon } from '../icon/Icon.js';
-import { listBoxItemStyles, buttonStyles, popoverStyles, defaultSelectTheme, listBoxStyles } from './styles.js';
+import { defaultSelectTheme, listBoxItemStyles, buttonStyles, popoverStyles, listBoxStyles } from './styles.js';
 
 function Option({ children, theme = {} }) {
   const mergedTheme = mergeDeep(defaultSelectTheme, theme);

package/dist/components/text-area/TextArea.js

@@ -2,7 +2,7 @@ import { jsx } from '@emotion/react/jsx-runtime';
 import { TextField, TextArea as TextArea$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { FormInputContainer } from '../form/Form.js';
-import { textAreaStyles, defaultTextAreaTheme } from './styles.js';
+import { defaultTextAreaTheme, textAreaStyles } from './styles.js';
 
 function TextArea({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {
   const mergedTheme = mergeDeep(defaultTextAreaTheme, theme);

package/dist/components/text-input/TextInput.js

@@ -2,7 +2,7 @@ import { jsx } from '@emotion/react/jsx-runtime';
 import { TextField, Input } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { FormInputContainer } from '../form/Form.js';
-import { textInputStyles, defaultTextInputTheme } from './styles.js';
+import { defaultTextInputTheme, textInputStyles } from './styles.js';
 
 function TextInput({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {
   const mergedTheme = mergeDeep(defaultTextInputTheme, theme);

package/dist/components/topbar/TopBar.js

@@ -5,7 +5,7 @@ import { mergeDeep } from '../../util/mergeDeep.js';
 import { useResize } from '../../util/useResize.js';
 import { Avatar } from '../avatar/Avatar.js';
 import { Icon } from '../icon/Icon.js';
-import { topBarCollapsedNavMenuButtonStyles, topBarCollapsedNavMenuPopoverStyles, topBarContainerStyles, topBarSpacerStyles, topBarStyles, defaultTopBarTheme } from './styles.js';
+import { defaultTopBarTheme, topBarCollapsedNavMenuButtonStyles, topBarCollapsedNavMenuPopoverStyles, topBarContainerStyles, topBarSpacerStyles, topBarStyles } from './styles.js';
 import { TopBarItem } from './topBarItem/TopBarItem.js';
 import { TopBarNavigation } from './topBarNavigation/TopBarNavigation.js';
 import { TopBarToolName } from './topBarToolName/TopBarToolName.js';

package/dist/components/topbar/topBarItem/TopBarItem.js

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { mergeDeep } from '../../../util/mergeDeep.js';
-import { topBarItemStyles, defaultTopBarItemTheme } from './styles.js';
+import { defaultTopBarItemTheme, topBarItemStyles } from './styles.js';
 
 function TopBarItem({ children, alignment = "left", theme = {}, cssOverrides, className, size = "md", _menuOpen, ...props }) {
   const mergedTheme = mergeDeep(defaultTopBarItemTheme, theme);

package/dist/components/topbar/topBarNavigation/TopBarNavigation.js

@@ -3,7 +3,7 @@ import { Pressable, Link } from 'react-aria-components';
 import { mergeDeep } from '../../../util/mergeDeep.js';
 import { Icon } from '../../icon/Icon.js';
 import { Menu, MenuToggle } from '../../menu/Menu.js';
-import { topBarNavigationTextStyles, topBarMenuIndicatorStyles, topBarNavigationStyles, topBarNavigationTypographyStyles, topBarNavigationDividerStyles, defaultTopBarNavigationTheme } from './styles.js';
+import { defaultTopBarNavigationTheme, topBarNavigationTextStyles, topBarMenuIndicatorStyles, topBarNavigationStyles, topBarNavigationTypographyStyles, topBarNavigationDividerStyles } from './styles.js';
 
 const menuIndicator = "keyboard_arrow_down";
 function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChildren, href, onPress, isDisabled, alignment = "left", theme = {}, cssOverrides, className, _menuOpen, ...props }) {

package/dist/components/topbar/topBarToolName/TopBarToolName.js

@@ -4,7 +4,7 @@ import { mergeDeep } from '../../../util/mergeDeep.js';
 import { Favicon } from '../../favicon/Favicon.js';
 import { Icon } from '../../icon/Icon.js';
 import { TopBarItem } from '../topBarItem/TopBarItem.js';
-import { toolNameHoverLinkTextExpandedStyles, toolNameHoverLinkTextCollapsedStyles, toolNameHoverLinkStyles, toolNameLinkStyles, defaultToolNameTheme, toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles } from './styles.js';
+import { defaultToolNameTheme, toolNameHoverLinkTextExpandedStyles, toolNameHoverLinkTextCollapsedStyles, toolNameHoverLinkStyles, toolNameLinkStyles, toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles } from './styles.js';
 
 function ToolName({ name, favicon, subsection, subsectionIcon, collapseBelow = "lg", theme = {}, cssOverrides }) {
   const mergedTheme = mergeDeep(defaultToolNameTheme, theme);

package/dist/components/typography/Typography.js

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { typographyStyles, defaultTypographyTheme } from './styles.js';
+import { defaultTypographyTheme, typographyStyles } from './styles.js';
 
 const Typography = ({ element = "span", variant = "body-md", children, cssOverrides, theme = {}, ...props }) => {
   const mergedTheme = mergeDeep(defaultTypographyTheme, theme);

package/dist/components/typography/styles.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 var react = require('@emotion/react');
-var typography$2 = require('../../styleD/build/typescript/component/typography.cjs');
-var typography = require('../../styleD/utils/semantic/typography.cjs');
-var typography$1 = require('../../styleD/build/typescript/semantic/typography.cjs');
+var typography = require('../../styleD/build/typescript/component/typography.cjs');
+var typography$1 = require('../../styleD/utils/semantic/typography.cjs');
+var typography$2 = require('../../styleD/build/typescript/semantic/typography.cjs');
 
-const defaultTypographyTheme = typography$2.componentTypography;
+const defaultTypographyTheme = typography.componentTypography;
 const typographyStyles = (theme, { variant }) => react.css`
-	${typography.convertTypographyToEmotionStringStyle(typography$1.semanticTypography[variant])}
+	${typography$1.convertTypographyToEmotionStringStyle(typography$2.semanticTypography[variant])}
 	color: ${theme.color};
 `;
 

package/dist/index.cjs

@@ -30,6 +30,7 @@ var sizing = require('./styleD/build/typescript/base/sizing.cjs');
 var spacing = require('./styleD/build/typescript/base/spacing.cjs');
 var typography = require('./styleD/build/typescript/base/typography.cjs');
 var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
+var grid$1 = require('./styleD/build/typescript/semantic/grid.cjs');
 var typography$2 = require('./styleD/build/typescript/semantic/typography.cjs');
 var sizing$1 = require('./styleD/build/typescript/semantic/sizing.cjs');
 var shadow = require('./styleD/build/typescript/semantic/shadow.cjs');
@@ -67,6 +68,7 @@ exports.baseSizing = sizing.baseSizing;
 exports.baseSpacing = spacing.baseSpacing;
 exports.baseTypography = typography.baseTypography;
 exports.semanticColors = colors$1.semanticColors;
+exports.semanticGrid = grid$1.semanticGrid;
 exports.semanticTypography = typography$2.semanticTypography;
 exports.semanticSizing = sizing$1.semanticSizing;
 exports.semanticShadow = shadow.semanticShadow;

package/dist/index.js

@@ -28,6 +28,7 @@ export { baseSizing } from './styleD/build/typescript/base/sizing.js';
 export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
 export { baseTypography } from './styleD/build/typescript/base/typography.js';
 export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
+export { semanticGrid } from './styleD/build/typescript/semantic/grid.js';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';
 export { semanticShadow } from './styleD/build/typescript/semantic/shadow.js';

package/dist/layout.cjs

@@ -6,5 +6,4 @@ var layout = require('./styleD/build/typescript/component/layout.cjs');
 
 
 exports.Layout = Layout.Layout;
-exports.Sidebar = Layout.Sidebar;
 exports.componentLayout = layout.componentLayout;

package/dist/layout.js

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

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

@@ -5,10 +5,17 @@
 :root {
 	--component-grid-shared-display: flex;
 	--component-grid-shared-width: 100%;
-	--component-grid-shared-columns: 12;
-	--component-grid-shared-gap: 8px;
 	--component-grid-shared-direction: row;
 	--component-grid-shared-wrap: wrap;
 	--component-grid-shared-justify-content: flex-start;
 	--component-grid-shared-align-items: stretch;
+	--component-grid-sm-columns: 12;
+	--component-grid-sm-gap: 16px;
+	--component-grid-sm-padding: 16px;
+	--component-grid-md-columns: 12;
+	--component-grid-md-gap: 16px;
+	--component-grid-md-padding: 24px;
+	--component-grid-lg-columns: 12;
+	--component-grid-lg-gap: 16px;
+	--component-grid-lg-padding: 24px;
 }

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

@@ -6,9 +6,6 @@
 	--component-layout-layout-shared-display: grid;
 	--component-layout-layout-shared-min-height: 100svh;
 	--component-layout-layout-shared-width: 100%;
-	--component-layout-layout-shared-max-width: 1584px;
-	--component-layout-layout-shared-margin-left: auto;
-	--component-layout-layout-shared-margin-right: auto;
 	--component-layout-layout-sm-grid-template-areas: 'alertbanner' 'topbar'
 		'sidebar' 'main';
 	--component-layout-layout-sm-grid-template-columns: 1fr;
@@ -26,5 +23,8 @@
 	--component-layout-sidebar-sm-above-grid-display: block;
 	--component-layout-sidebar-md-display: block;
 	--component-layout-sidebar-md-width: 200px;
-	--component-layout-sidebar-lg-width: 320px;
+	--component-layout-sidebar-lg-width: 280px;
+	--component-layout-main-max-width: 1584px;
+	--component-layout-main-margin-left: auto;
+	--component-layout-main-margin-right: auto;
 }

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

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-grid-gutter-lg-px: 16px;
+	--semantic-grid-gutter-md-px: 16px;
+	--semantic-grid-gutter-sm-px: 16px;
+	--semantic-grid-margin-lg-px: 24px;
+	--semantic-grid-margin-md-px: 24px;
+	--semantic-grid-margin-sm-px: 16px;
+	--semantic-grid-columns-lg: 12;
+	--semantic-grid-columns-md: 12;
+	--semantic-grid-columns-sm: 12;
+}

package/dist/styleD/build/css/semantic/sizing.css

@@ -15,4 +15,7 @@
 	--semantic-sizing-border-default: 0.0625rem;
 	--semantic-sizing-border-md: 0.125rem;
 	--semantic-sizing-border-extra-wide: 0.5rem;
+	--semantic-sizing-sidebar-md-px: 200px;
+	--semantic-sizing-sidebar-lg-px: 280px;
+	--semantic-sizing-layout-max-width-px: 1584px;
 }

package/dist/styleD/build/typescript/component/grid.cjs

@@ -4,12 +4,25 @@ const componentGrid = {
   shared: {
     display: "flex",
     width: "100%",
-    columns: 12,
-    gap: "8px",
     direction: "row",
     wrap: "wrap",
     justifyContent: "flex-start",
     alignItems: "stretch"
+  },
+  sm: {
+    columns: 12,
+    gap: "16px",
+    padding: "16px"
+  },
+  md: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
+  },
+  lg: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
   }
 };
 

package/dist/styleD/build/typescript/component/grid.js

@@ -2,12 +2,25 @@ const componentGrid = {
   shared: {
     display: "flex",
     width: "100%",
-    columns: 12,
-    gap: "8px",
     direction: "row",
     wrap: "wrap",
     justifyContent: "flex-start",
     alignItems: "stretch"
+  },
+  sm: {
+    columns: 12,
+    gap: "16px",
+    padding: "16px"
+  },
+  md: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
+  },
+  lg: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
   }
 };
 

package/dist/styleD/build/typescript/component/layout.cjs

@@ -5,10 +5,7 @@ const componentLayout = {
     shared: {
       display: "grid",
       minHeight: "100svh",
-      width: "100%",
-      "max-width": "1584px",
-      "margin-left": "auto",
-      "margin-right": "auto"
+      width: "100%"
     },
     sm: {
       gridTemplateAreas: "'alertbanner'\n'topbar'\n'sidebar'\n'main'",
@@ -40,8 +37,13 @@ const componentLayout = {
       width: "200px"
     },
     lg: {
-      width: "320px"
+      width: "280px"
     }
+  },
+  main: {
+    "max-width": "1584px",
+    "margin-left": "auto",
+    "margin-right": "auto"
   }
 };
 

package/dist/styleD/build/typescript/component/layout.js

@@ -3,10 +3,7 @@ const componentLayout = {
     shared: {
       display: "grid",
       minHeight: "100svh",
-      width: "100%",
-      "max-width": "1584px",
-      "margin-left": "auto",
-      "margin-right": "auto"
+      width: "100%"
     },
     sm: {
       gridTemplateAreas: "'alertbanner'\n'topbar'\n'sidebar'\n'main'",
@@ -38,8 +35,13 @@ const componentLayout = {
       width: "200px"
     },
     lg: {
-      width: "320px"
+      width: "280px"
     }
+  },
+  main: {
+    "max-width": "1584px",
+    "margin-left": "auto",
+    "margin-right": "auto"
   }
 };
 

package/dist/styleD/build/typescript/semantic/grid.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+const semanticGrid = {
+  gutter: {
+    "lg-px": "16px",
+    "md-px": "16px",
+    "sm-px": "16px"
+  },
+  margin: {
+    "lg-px": "24px",
+    "md-px": "24px",
+    "sm-px": "16px"
+  },
+  columns: {
+    lg: 12,
+    md: 12,
+    sm: 12
+  }
+};
+
+exports.semanticGrid = semanticGrid;

package/dist/styleD/build/typescript/semantic/grid.js

@@ -0,0 +1,19 @@
+const semanticGrid = {
+  gutter: {
+    "lg-px": "16px",
+    "md-px": "16px",
+    "sm-px": "16px"
+  },
+  margin: {
+    "lg-px": "24px",
+    "md-px": "24px",
+    "sm-px": "16px"
+  },
+  columns: {
+    lg: 12,
+    md: 12,
+    sm: 12
+  }
+};
+
+export { semanticGrid };

package/dist/styleD/build/typescript/semantic/sizing.cjs

@@ -18,6 +18,13 @@ const semanticSizing = {
     default: "0.0625rem",
     md: "0.125rem",
     "extra-wide": "0.5rem"
+  },
+  sidebar: {
+    "md-px": "200px",
+    "lg-px": "280px"
+  },
+  layout: {
+    "max-width-px": "1584px"
   }
 };
 

package/dist/styleD/build/typescript/semantic/sizing.js

@@ -16,6 +16,13 @@ const semanticSizing = {
     default: "0.0625rem",
     md: "0.125rem",
     "extra-wide": "0.5rem"
+  },
+  sidebar: {
+    "md-px": "200px",
+    "lg-px": "280px"
+  },
+  layout: {
+    "max-width-px": "1584px"
   }
 };