@guardian/stand 0.0.40 → 0.0.41

package/dist/components/Layout/Layout.cjs

@@ -1,79 +1,93 @@
-'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 });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/Layout/Layout.tsx
+/**
+* Places children into the alert banner grid area of the Layout.
+*/
+const LayoutAlertBanner = ({ as: Component = "aside", children, cssOverrides, ...props }) => {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Component, {
+		css: [require_styles.alertBannerLayoutStyles(), cssOverrides],
+		...props,
+		children
+	});
 };
-const LayoutTopBar = ({
-  as: Component = "nav",
-  children,
-  cssOverrides,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { css: [styles.topBarLayoutStyles(), cssOverrides], ...props, children });
+/**
+* Places children into the top bar grid area of the Layout.
+*/
+const LayoutTopBar = ({ as: Component = "nav", children, cssOverrides, ...props }) => {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Component, {
+		css: [require_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
-    }
-  );
+/**
+* Places children into the sidebar grid area of the Layout.
+*
+* Supports two layout behaviors at the sm breakpoint:
+* - 'above-grid': places the sidebar above the grid content
+* - 'hidden': hides the sidebar entirely (default)
+*/
+function LayoutSidebar({ as: Component = "aside", children, layoutSmBreakpoint = "hidden", theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSidebarTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Component, {
+		css: [
+			require_styles.sidebarLayoutStyles(),
+			require_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
-    }
-  );
+/**
+* Places children into the main grid area of the Layout.
+*/
+function LayoutMain({ as: Component = "main", children, fluid = true, theme = {}, cssOverrides, ...props }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Component, {
+		css: [require_styles.mainLayoutStyles(require_mergeDeep.mergeDeep(require_styles.defaultMainTheme, theme), { 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 });
+/**
+* A layout component that defines a grid structure for the page.
+*
+* Use the compound components to place content in the correct grid areas:
+* - `Layout.AlertBanner` – alert banner area
+* - `Layout.TopBar` – top bar area
+* - `Layout.Sidebar` – sidebar area
+* - `Layout.Main` – main content area
+*
+* @example
+* ```tsx
+* <Layout>
+*   <Layout.TopBar>
+*     <TopBar>...</TopBar>
+*   </Layout.TopBar>
+*   <Layout.Sidebar layoutSmBreakpoint="above-grid">
+*     <nav>...</nav>
+*   </Layout.Sidebar>
+*   <Layout.Main>
+*     <Grid>...</Grid>
+*   </Layout.Main>
+* </Layout>
+* ```
+*/
+function LayoutRoot({ children, theme = {}, cssOverrides, ...props }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: [require_styles.layoutStyles(require_mergeDeep.mergeDeep(require_styles.defaultLayoutTheme, theme)), cssOverrides],
+		...props,
+		children
+	});
 }
 const Layout = Object.assign(LayoutRoot, {
-  AlertBanner: LayoutAlertBanner,
-  TopBar: LayoutTopBar,
-  Sidebar: LayoutSidebar,
-  Main: LayoutMain
+	AlertBanner: LayoutAlertBanner,
+	TopBar: LayoutTopBar,
+	Sidebar: LayoutSidebar,
+	Main: LayoutMain
 });
-
+//#endregion
 exports.Layout = Layout;

package/dist/components/Layout/Layout.d.cts

@@ -0,0 +1,14 @@
+import { LayoutProps, LayoutSlotProps, MainProps, SidebarProps } from "./types.cjs";
+import React from "react";
+
+//#region src/components/Layout/Layout.d.ts
+interface LayoutCompound {
+  (props: LayoutProps): React.ReactElement;
+  AlertBanner: (props: LayoutSlotProps) => React.ReactElement;
+  TopBar: (props: LayoutSlotProps) => React.ReactElement;
+  Sidebar: (props: SidebarProps) => React.ReactElement;
+  Main: (props: MainProps) => React.ReactElement;
+}
+declare const Layout: LayoutCompound;
+//#endregion
+export { Layout };

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,14 @@
+import { LayoutProps, LayoutSlotProps, MainProps, SidebarProps } from "./types.js";
+import React from "react";
+
+//#region src/components/Layout/Layout.d.ts
+interface LayoutCompound {
+  (props: LayoutProps): React.ReactElement;
+  AlertBanner: (props: LayoutSlotProps) => React.ReactElement;
+  TopBar: (props: LayoutSlotProps) => React.ReactElement;
+  Sidebar: (props: SidebarProps) => React.ReactElement;
+  Main: (props: MainProps) => React.ReactElement;
+}
+declare const Layout: LayoutCompound;
+//#endregion
+export { Layout };

package/dist/components/Layout/Layout.js

@@ -1,34 +1,92 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { mergeDeep } from '../../util/mergeDeep.js';
-import { layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles, alertBannerLayoutStyles, defaultSidebarTheme, defaultMainTheme, defaultLayoutTheme } from './styles.js';
-
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { alertBannerLayoutStyles, defaultLayoutTheme, defaultMainTheme, defaultSidebarTheme, layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles } from "./styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+//#region src/components/Layout/Layout.tsx
+/**
+* Places children into the alert banner grid area of the Layout.
+*/
 const LayoutAlertBanner = ({ as: Component = "aside", children, cssOverrides, ...props }) => {
-  return jsx(Component, { css: [alertBannerLayoutStyles(), cssOverrides], ...props, children });
+	return /* @__PURE__ */ jsx(Component, {
+		css: [alertBannerLayoutStyles(), cssOverrides],
+		...props,
+		children
+	});
 };
+/**
+* Places children into the top bar grid area of the Layout.
+*/
 const LayoutTopBar = ({ as: Component = "nav", children, cssOverrides, ...props }) => {
-  return jsx(Component, { css: [topBarLayoutStyles(), cssOverrides], ...props, children });
+	return /* @__PURE__ */ jsx(Component, {
+		css: [topBarLayoutStyles(), cssOverrides],
+		...props,
+		children
+	});
 };
+/**
+* Places children into the sidebar grid area of the Layout.
+*
+* Supports two layout behaviors at the sm breakpoint:
+* - 'above-grid': places the sidebar above the grid content
+* - 'hidden': hides the sidebar entirely (default)
+*/
 function LayoutSidebar({ as: Component = "aside", children, layoutSmBreakpoint = "hidden", theme = {}, cssOverrides, ...props }) {
-  const mergedTheme = mergeDeep(defaultSidebarTheme, theme);
-  return jsx(Component, { css: [
-    sidebarLayoutStyles(),
-    sidebarStyles(mergedTheme, { layoutSmBreakpoint }),
-    cssOverrides
-  ], ...props, children });
+	const mergedTheme = mergeDeep(defaultSidebarTheme, theme);
+	return /* @__PURE__ */ jsx(Component, {
+		css: [
+			sidebarLayoutStyles(),
+			sidebarStyles(mergedTheme, { layoutSmBreakpoint }),
+			cssOverrides
+		],
+		...props,
+		children
+	});
 }
+/**
+* Places children into the main grid area of the Layout.
+*/
 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 });
+	return /* @__PURE__ */ jsx(Component, {
+		css: [mainLayoutStyles(mergeDeep(defaultMainTheme, theme), { fluid }), cssOverrides],
+		...props,
+		children
+	});
 }
+/**
+* A layout component that defines a grid structure for the page.
+*
+* Use the compound components to place content in the correct grid areas:
+* - `Layout.AlertBanner` – alert banner area
+* - `Layout.TopBar` – top bar area
+* - `Layout.Sidebar` – sidebar area
+* - `Layout.Main` – main content area
+*
+* @example
+* ```tsx
+* <Layout>
+*   <Layout.TopBar>
+*     <TopBar>...</TopBar>
+*   </Layout.TopBar>
+*   <Layout.Sidebar layoutSmBreakpoint="above-grid">
+*     <nav>...</nav>
+*   </Layout.Sidebar>
+*   <Layout.Main>
+*     <Grid>...</Grid>
+*   </Layout.Main>
+* </Layout>
+* ```
+*/
 function LayoutRoot({ children, theme = {}, cssOverrides, ...props }) {
-  const mergedTheme = mergeDeep(defaultLayoutTheme, theme);
-  return jsx("div", { css: [layoutStyles(mergedTheme), cssOverrides], ...props, children });
+	return /* @__PURE__ */ jsx("div", {
+		css: [layoutStyles(mergeDeep(defaultLayoutTheme, theme)), cssOverrides],
+		...props,
+		children
+	});
 }
 const Layout = Object.assign(LayoutRoot, {
-  AlertBanner: LayoutAlertBanner,
-  TopBar: LayoutTopBar,
-  Sidebar: LayoutSidebar,
-  Main: LayoutMain
+	AlertBanner: LayoutAlertBanner,
+	TopBar: LayoutTopBar,
+	Sidebar: LayoutSidebar,
+	Main: LayoutMain
 });
-
+//#endregion
 export { Layout };

package/dist/components/Layout/styles.cjs

@@ -1,31 +1,30 @@
-'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 defaultMainTheme = layout.componentLayout["main"];
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mq = require("../../styleD/utils/semantic/mq.cjs");
+const require_layout = require("../../styleD/build/typescript/component/layout.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Layout/styles.ts
+const defaultLayoutTheme = require_layout.componentLayout["layout"];
+const defaultSidebarTheme = require_layout.componentLayout["sidebar"];
+const defaultMainTheme = require_layout.componentLayout["main"];
 const alertBannerLayoutStyles = () => {
-  return react.css`
+	return _emotion_react.css`
 		grid-area: alertbanner;
 	`;
 };
 const topBarLayoutStyles = () => {
-  return react.css`
+	return _emotion_react.css`
 		grid-area: topbar;
 	`;
 };
 const sidebarLayoutStyles = () => {
-  return react.css`
+	return _emotion_react.css`
 		grid-area: sidebar;
 	`;
 };
 const mainLayoutStyles = (theme, { fluid }) => {
-  return react.css`
+	return _emotion_react.css`
 		grid-area: main;
-		${fluid ? "" : react.css`
+		${fluid ? "" : _emotion_react.css`
 					max-width: ${theme.maxWidth};
 					margin-left: ${theme.marginLeft};
 					margin-right: ${theme.marginRight};
@@ -33,7 +32,7 @@ const mainLayoutStyles = (theme, { fluid }) => {
 	`;
 };
 const layoutStyles = (theme) => {
-  return react.css`
+	return _emotion_react.css`
 		display: ${theme.shared.display};
 		min-height: ${theme.shared.minHeight};
 		width: ${theme.shared.width};
@@ -42,13 +41,13 @@ const layoutStyles = (theme) => {
 		grid-template-columns: ${theme.sm.gridTemplateColumns};
 		grid-template-rows: ${theme.sm.gridTemplateRows};
 
-		${mq.from.md} {
+		${require_mq.from.md} {
 			grid-template-areas: ${theme.md.gridTemplateAreas};
 			grid-template-columns: ${theme.md.gridTemplateColumns};
 			grid-template-rows: ${theme.md.gridTemplateRows};
 		}
 
-		${mq.from.lg} {
+		${require_mq.from.lg} {
 			grid-template-areas: ${theme.lg.gridTemplateAreas};
 			grid-template-columns: ${theme.lg.gridTemplateColumns};
 			grid-template-rows: ${theme.lg.gridTemplateRows};
@@ -56,33 +55,31 @@ const layoutStyles = (theme) => {
 	`;
 };
 const sidebarStyles = (theme, { layoutSmBreakpoint }) => {
-  return react.css`
-		${mq.from.sm} {
+	return _emotion_react.css`
+		${require_mq.from.sm} {
 			${(() => {
-    switch (layoutSmBreakpoint) {
-      case "above-grid":
-        return react.css`
+		switch (layoutSmBreakpoint) {
+			case "above-grid": return _emotion_react.css`
 							display: ${theme.sm.aboveGrid.display};
 						`;
-      case "hidden":
-        return react.css`
+			case "hidden": return _emotion_react.css`
 							display: ${theme.sm.hidden.display};
 						`;
-    }
-  })()}
+		}
+	})()}
 		}
 
-		${mq.from.md} {
+		${require_mq.from.md} {
 			display: ${theme.md.display};
 			width: ${theme.md.width};
 		}
 
-		${mq.from.lg} {
+		${require_mq.from.lg} {
 			width: ${theme.lg.width};
 		}
 	`;
 };
-
+//#endregion
 exports.alertBannerLayoutStyles = alertBannerLayoutStyles;
 exports.defaultLayoutTheme = defaultLayoutTheme;
 exports.defaultMainTheme = defaultMainTheme;

package/dist/components/Layout/styles.d.cts

@@ -0,0 +1,13 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentLayout } from "../../styleD/build/typescript/component/layout.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Layout/styles.d.ts
+type LayoutTheme = Prettify<ComponentLayout['layout']>;
+type PartialLayoutTheme = Prettify<DeepPartial<LayoutTheme>>;
+type SidebarTheme = Prettify<ComponentLayout['sidebar']>;
+type PartialSidebarTheme = Prettify<DeepPartial<SidebarTheme>>;
+type MainTheme = Prettify<ComponentLayout['main']>;
+type PartialMainTheme = Prettify<DeepPartial<MainTheme>>;
+//#endregion
+export { LayoutTheme, MainTheme, PartialLayoutTheme, PartialMainTheme, PartialSidebarTheme, SidebarTheme };

package/dist/components/Layout/styles.d.ts

@@ -0,0 +1,13 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentLayout } from "../../styleD/build/typescript/component/layout.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Layout/styles.d.ts
+type LayoutTheme = Prettify<ComponentLayout['layout']>;
+type PartialLayoutTheme = Prettify<DeepPartial<LayoutTheme>>;
+type SidebarTheme = Prettify<ComponentLayout['sidebar']>;
+type PartialSidebarTheme = Prettify<DeepPartial<SidebarTheme>>;
+type MainTheme = Prettify<ComponentLayout['main']>;
+type PartialMainTheme = Prettify<DeepPartial<MainTheme>>;
+//#endregion
+export { LayoutTheme, MainTheme, PartialLayoutTheme, PartialMainTheme, PartialSidebarTheme, SidebarTheme };

package/dist/components/Layout/styles.js

@@ -1,27 +1,27 @@
-import { css } from '@emotion/react';
-import { componentLayout } from '../../styleD/build/typescript/component/layout.js';
-import { from } from '../../styleD/utils/semantic/mq.js';
-
+import { from } from "../../styleD/utils/semantic/mq.js";
+import { componentLayout } from "../../styleD/build/typescript/component/layout.js";
+import { css } from "@emotion/react";
+//#region src/components/Layout/styles.ts
 const defaultLayoutTheme = componentLayout["layout"];
 const defaultSidebarTheme = componentLayout["sidebar"];
 const defaultMainTheme = componentLayout["main"];
 const alertBannerLayoutStyles = () => {
-  return css`
+	return css`
 		grid-area: alertbanner;
 	`;
 };
 const topBarLayoutStyles = () => {
-  return css`
+	return css`
 		grid-area: topbar;
 	`;
 };
 const sidebarLayoutStyles = () => {
-  return css`
+	return css`
 		grid-area: sidebar;
 	`;
 };
 const mainLayoutStyles = (theme, { fluid }) => {
-  return css`
+	return css`
 		grid-area: main;
 		${fluid ? "" : css`
 					max-width: ${theme.maxWidth};
@@ -31,7 +31,7 @@ const mainLayoutStyles = (theme, { fluid }) => {
 	`;
 };
 const layoutStyles = (theme) => {
-  return css`
+	return css`
 		display: ${theme.shared.display};
 		min-height: ${theme.shared.minHeight};
 		width: ${theme.shared.width};
@@ -54,20 +54,18 @@ const layoutStyles = (theme) => {
 	`;
 };
 const sidebarStyles = (theme, { layoutSmBreakpoint }) => {
-  return css`
+	return css`
 		${from.sm} {
 			${(() => {
-    switch (layoutSmBreakpoint) {
-      case "above-grid":
-        return css`
+		switch (layoutSmBreakpoint) {
+			case "above-grid": return css`
 							display: ${theme.sm.aboveGrid.display};
 						`;
-      case "hidden":
-        return css`
+			case "hidden": return css`
 							display: ${theme.sm.hidden.display};
 						`;
-    }
-  })()}
+		}
+	})()}
 		}
 
 		${from.md} {
@@ -80,5 +78,5 @@ const sidebarStyles = (theme, { layoutSmBreakpoint }) => {
 		}
 	`;
 };
-
+//#endregion
 export { alertBannerLayoutStyles, defaultLayoutTheme, defaultMainTheme, defaultSidebarTheme, layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles };

package/dist/components/Layout/types.d.cts

@@ -0,0 +1,34 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { LayoutTheme, MainTheme, SidebarTheme } from "./styles.cjs";
+import { SerializedStyles } from "@emotion/react";
+import React from "react";
+
+//#region src/components/Layout/types.d.ts
+type LayoutProps = DefaultPropsWithChildren<LayoutTheme>;
+interface MainProps extends DefaultPropsWithChildren<MainTheme>, React.HTMLAttributes<HTMLElement> {
+  /**
+   * When `true`, the layout will take up the full width of its container, enabled by default.
+   * When `false`, the layout will have a max-width of 1584px and be centered within its container.
+   * This can be used to prevent the layout from becoming too stretched on very wide screens.
+   */
+  fluid?: boolean;
+  as?: React.ElementType;
+}
+interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme>, React.HTMLAttributes<HTMLElement> {
+  /**
+   * Defines the layout behavior of the sidebar at the sm breakpoint.
+   *
+   * - 'above-grid' will place the sidebar above the grid content, effectively making it a horizontal bar at the top of the page, consumers may want to adjust the sidebar content styling for this breakpoint to make it look good in a horizontal layout.
+   * - 'hidden' will hide the sidebar entirely at the sm breakpoint, the consumer can choose how to make the sidebar content accessible through other means (e.g. a collapsible menu in the TopBar).
+   *
+   */
+  layoutSmBreakpoint?: 'above-grid' | 'hidden';
+  as?: React.ElementType;
+}
+interface LayoutSlotProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+  cssOverrides?: SerializedStyles | SerializedStyles[];
+  as?: React.ElementType;
+}
+//#endregion
+export { LayoutProps, LayoutSlotProps, MainProps, SidebarProps };

package/dist/components/Layout/types.d.ts

@@ -0,0 +1,34 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { LayoutTheme, MainTheme, SidebarTheme } from "./styles.js";
+import React from "react";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Layout/types.d.ts
+type LayoutProps = DefaultPropsWithChildren<LayoutTheme>;
+interface MainProps extends DefaultPropsWithChildren<MainTheme>, React.HTMLAttributes<HTMLElement> {
+  /**
+   * When `true`, the layout will take up the full width of its container, enabled by default.
+   * When `false`, the layout will have a max-width of 1584px and be centered within its container.
+   * This can be used to prevent the layout from becoming too stretched on very wide screens.
+   */
+  fluid?: boolean;
+  as?: React.ElementType;
+}
+interface SidebarProps extends DefaultPropsWithChildren<SidebarTheme>, React.HTMLAttributes<HTMLElement> {
+  /**
+   * Defines the layout behavior of the sidebar at the sm breakpoint.
+   *
+   * - 'above-grid' will place the sidebar above the grid content, effectively making it a horizontal bar at the top of the page, consumers may want to adjust the sidebar content styling for this breakpoint to make it look good in a horizontal layout.
+   * - 'hidden' will hide the sidebar entirely at the sm breakpoint, the consumer can choose how to make the sidebar content accessible through other means (e.g. a collapsible menu in the TopBar).
+   *
+   */
+  layoutSmBreakpoint?: 'above-grid' | 'hidden';
+  as?: React.ElementType;
+}
+interface LayoutSlotProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+  cssOverrides?: SerializedStyles | SerializedStyles[];
+  as?: React.ElementType;
+}
+//#endregion
+export { LayoutProps, LayoutSlotProps, MainProps, SidebarProps };

package/dist/components/Link/Link.cjs

@@ -1,37 +1,23 @@
-'use strict';
-
-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$1 = require('../Typography/styles.cjs');
-var styles = require('./styles.cjs');
-
-function Link({
-  children,
-  typography = "bodySm",
-  theme = {},
-  cssOverrides,
-  className,
-  ...props
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultLinkTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Link,
-    {
-      css: [
-        styles$1.typographyStyles(
-          { color: colors.semanticColors.text.strong },
-          { variant: typography }
-        ),
-        styles.linkStyles(mergedTheme),
-        cssOverrides
-      ],
-      className,
-      ...props,
-      children
-    }
-  );
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_colors = require("../../styleD/build/typescript/semantic/colors.cjs");
+const require_styles = require("../Typography/styles.cjs");
+const require_styles$1 = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/Link/Link.tsx
+function Link({ children, typography = "bodySm", theme = {}, cssOverrides, className, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles$1.defaultLinkTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Link, {
+		css: [
+			require_styles.typographyStyles({ color: require_colors.semanticColors.text.strong }, { variant: typography }),
+			require_styles$1.linkStyles(mergedTheme),
+			cssOverrides
+		],
+		className,
+		...props,
+		children
+	});
 }
-
+//#endregion
 exports.Link = Link;