@soroush.tech/styled-system 6.0.0-alpha.1 → 6.0.0-alpha.2

package/dist/background.d.cts

@@ -1,3 +1,3 @@
-import { t as background } from "./index-DS5tvdki.cjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-C4ogGxde.cjs";
+import { t as background } from "./index-IfEDsoFj.cjs";
+import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cj6Jx5LX.cjs";
 export { type BackgroundImageProps, type BackgroundPositionProps, type BackgroundProps, type BackgroundRepeatProps, type BackgroundSizeProps, background, background as default };

package/dist/background.d.mts

@@ -1,3 +1,3 @@
-import { t as background } from "./index-CVxHdrQd.mjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-C4ogGxde.mjs";
+import { t as background } from "./index-Xh-lC-ge.mjs";
+import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cj6Jx5LX.mjs";
 export { type BackgroundImageProps, type BackgroundPositionProps, type BackgroundProps, type BackgroundRepeatProps, type BackgroundSizeProps, background, background as default };

package/dist/border.d.cts

@@ -1,3 +1,3 @@
-import { _ as BorderStyleProps, d as BorderBottomProps, f as BorderColorProps, g as BorderRightProps, h as BorderRadiusProps, m as BorderProps, p as BorderLeftProps, v as BorderTopProps, y as BorderWidthProps } from "./types-C4ogGxde.cjs";
-import { t as border } from "./index-BolQQ69W.cjs";
+import { _ as BorderStyleProps, d as BorderBottomProps, f as BorderColorProps, g as BorderRightProps, h as BorderRadiusProps, m as BorderProps, p as BorderLeftProps, v as BorderTopProps, y as BorderWidthProps } from "./types-Cj6Jx5LX.cjs";
+import { t as border } from "./index-C8kegqfi.cjs";
 export { type BorderBottomProps, type BorderColorProps, type BorderLeftProps, type BorderProps, type BorderRadiusProps, type BorderRightProps, type BorderStyleProps, type BorderTopProps, type BorderWidthProps, border, border as default };

package/dist/border.d.mts

@@ -1,3 +1,3 @@
-import { _ as BorderStyleProps, d as BorderBottomProps, f as BorderColorProps, g as BorderRightProps, h as BorderRadiusProps, m as BorderProps, p as BorderLeftProps, v as BorderTopProps, y as BorderWidthProps } from "./types-C4ogGxde.mjs";
-import { t as border } from "./index-z2p2DCxL.mjs";
+import { _ as BorderStyleProps, d as BorderBottomProps, f as BorderColorProps, g as BorderRightProps, h as BorderRadiusProps, m as BorderProps, p as BorderLeftProps, v as BorderTopProps, y as BorderWidthProps } from "./types-Cj6Jx5LX.mjs";
+import { t as border } from "./index-BgSrVqHI.mjs";
 export { type BorderBottomProps, type BorderColorProps, type BorderLeftProps, type BorderProps, type BorderRadiusProps, type BorderRightProps, type BorderStyleProps, type BorderTopProps, type BorderWidthProps, border, border as default };

package/dist/color.d.cts

@@ -1,3 +1,3 @@
-import { Mt as TextColorProps, a as BackgroundColorProps, ht as OpacityProps, w as ColorProps } from "./types-C4ogGxde.cjs";
-import { t as color } from "./index-MqRHkwxm.cjs";
+import { Nt as TextColorProps, a as BackgroundColorProps, gt as OpacityProps, w as ColorProps } from "./types-Cj6Jx5LX.cjs";
+import { t as color } from "./index-DOzfQDfG.cjs";
 export { type BackgroundColorProps, type ColorProps, type OpacityProps, type TextColorProps, color, color as default };

package/dist/color.d.mts

@@ -1,3 +1,3 @@
-import { Mt as TextColorProps, a as BackgroundColorProps, ht as OpacityProps, w as ColorProps } from "./types-C4ogGxde.mjs";
-import { t as color } from "./index-BiZPbJuj.mjs";
+import { Nt as TextColorProps, a as BackgroundColorProps, gt as OpacityProps, w as ColorProps } from "./types-Cj6Jx5LX.mjs";
+import { t as color } from "./index-fuBvJDhs.mjs";
 export { type BackgroundColorProps, type ColorProps, type OpacityProps, type TextColorProps, color, color as default };

package/dist/flexbox.d.cts

@@ -1,3 +1,3 @@
-import { A as FlexDirectionProps, F as FlexboxProps, M as FlexProps, N as FlexShrinkProps, P as FlexWrapProps, gt as OrderProps, j as FlexGrowProps, k as FlexBasisProps, n as AlignItemsProps, nt as JustifyItemsProps, r as AlignSelfProps, rt as JustifySelfProps, t as AlignContentProps, tt as JustifyContentProps } from "./types-C4ogGxde.cjs";
-import { t as flexbox } from "./index-CXOIz3b_.cjs";
+import { A as FlexDirectionProps, F as FlexboxProps, M as FlexProps, N as FlexShrinkProps, P as FlexWrapProps, _t as OrderProps, j as FlexGrowProps, k as FlexBasisProps, n as AlignItemsProps, nt as JustifyItemsProps, r as AlignSelfProps, rt as JustifySelfProps, t as AlignContentProps, tt as JustifyContentProps } from "./types-Cj6Jx5LX.cjs";
+import { t as flexbox } from "./index-ILo8rb05.cjs";
 export { type AlignContentProps, type AlignItemsProps, type AlignSelfProps, type FlexBasisProps, type FlexDirectionProps, type FlexGrowProps, type FlexProps, type FlexShrinkProps, type FlexWrapProps, type FlexboxProps, type JustifyContentProps, type JustifyItemsProps, type JustifySelfProps, type OrderProps, flexbox as default, flexbox };

package/dist/flexbox.d.mts

@@ -1,3 +1,3 @@
-import { A as FlexDirectionProps, F as FlexboxProps, M as FlexProps, N as FlexShrinkProps, P as FlexWrapProps, gt as OrderProps, j as FlexGrowProps, k as FlexBasisProps, n as AlignItemsProps, nt as JustifyItemsProps, r as AlignSelfProps, rt as JustifySelfProps, t as AlignContentProps, tt as JustifyContentProps } from "./types-C4ogGxde.mjs";
-import { t as flexbox } from "./index-BCO1q3Ee.mjs";
+import { A as FlexDirectionProps, F as FlexboxProps, M as FlexProps, N as FlexShrinkProps, P as FlexWrapProps, _t as OrderProps, j as FlexGrowProps, k as FlexBasisProps, n as AlignItemsProps, nt as JustifyItemsProps, r as AlignSelfProps, rt as JustifySelfProps, t as AlignContentProps, tt as JustifyContentProps } from "./types-Cj6Jx5LX.mjs";
+import { t as flexbox } from "./index-D8sNCYCo.mjs";
 export { type AlignContentProps, type AlignItemsProps, type AlignSelfProps, type FlexBasisProps, type FlexDirectionProps, type FlexGrowProps, type FlexProps, type FlexShrinkProps, type FlexWrapProps, type FlexboxProps, type JustifyContentProps, type JustifyItemsProps, type JustifySelfProps, type OrderProps, flexbox as default, flexbox };

package/dist/{grid-BdKZQBHF.mjs → grid-CAuvylKs.mjs}

@@ -44,30 +44,37 @@ const spaceValue = (theme, value) => {
 	const resolved = get(theme, `space.${value}`, value);
 	return typeof resolved === "number" ? `${resolved}px` : resolved;
 };
-const declarations = (theme, display, entry) => {
-	const { columns, margin, gutter, mode, maxWidth } = entry;
-	const isFixed = mode === "fixed";
+const frameDeclarations = (theme, { margin, mode, maxWidth }) => {
+	const width = mode === "fixed" && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : void 0;
+	return {
+		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
+		maxWidth: width ?? "none",
+		marginInline: width === void 0 ? 0 : `max(0px, calc((100% - ${width}) / 2))`
+	};
+};
+const columnDeclarations = (theme, display, { columns, gutter }) => {
 	const gap = gutter === void 0 ? void 0 : spaceValue(theme, gutter);
-	const styles = {
+	return {
 		"--layout-columns": columns,
 		"--layout-gutter": gap,
 		gridTemplateColumns: display === "grid" && columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : void 0,
-		columnGap: gap,
-		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
-		maxWidth: isFixed && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : "none",
-		marginInline: isFixed ? "auto" : 0
+		columnGap: gap
 	};
+};
+const declarations = (theme, parts, entry) => {
+	const styles = Object.assign({}, ...parts.map((part) => part === "frame" ? frameDeclarations(theme, entry) : columnDeclarations(theme, part, entry)));
 	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
 };
-/**
-* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
-* margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
-* theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
-* there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
-* breakpoint is back to the theme. Every written block carries the full set, so no block
-* inherits a stale `max-width`.
-*/
-const layoutGridStyles = (theme, value, display = "grid") => {
+const DISPLAY = {
+	frame: {},
+	grid: { display: "grid" },
+	flex: {
+		display: "flex",
+		flexDirection: "row",
+		flexWrap: "wrap"
+	}
+};
+const layoutStyles = (theme, value, parts) => {
 	if (!value) return {};
 	const breakpoints = get(theme, "breakpoints", {});
 	const layout = get(theme, "layout", {});
@@ -76,11 +83,7 @@ const layoutGridStyles = (theme, value, display = "grid") => {
 	const overrides = Object.fromEntries(fields.filter(([, field]) => typeof field === "object"));
 	const hasEverywhere = Object.keys(everywhere).length > 0;
 	const { keyed } = responsiveQueries(breakpoints);
-	const styles = display === "grid" ? { display: "grid" } : {
-		display: "flex",
-		flexDirection: "row",
-		flexWrap: "wrap"
-	};
+	const styles = Object.assign({}, ...parts.map((part) => DISPLAY[part]));
 	let themed = {};
 	let overridden = false;
 	for (const key of Object.keys(breakpoints)) {
@@ -95,7 +98,7 @@ const layoutGridStyles = (theme, value, display = "grid") => {
 			...layer
 		};
 		if (layer || override || overridden) {
-			const block = declarations(theme, display, {
+			const block = declarations(theme, parts, {
 				...themed,
 				...override
 			});
@@ -107,14 +110,30 @@ const layoutGridStyles = (theme, value, display = "grid") => {
 	}
 	return styles;
 };
-const layoutParser = (display) => Object.assign((props) => layoutGridStyles(props.theme, props.layout, display), {
+/**
+* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
+* margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
+* theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
+* there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
+* breakpoint is back to the theme. Every written block carries the full set, so no block
+* inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
+* `maxWidth` on the same element does not override it; rows take `rowGap`.
+*/
+const layoutGridStyles = (theme, value, display = "grid") => layoutStyles(theme, value, [display, "frame"]);
+const layoutParser = (part) => Object.assign((props) => layoutStyles(props.theme, props.layout, [part]), {
 	config: {},
 	propNames: ["layout"],
 	cache: {}
 });
-/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
+/**
+* The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
+* width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
+* or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
+*/
+const layoutFrame = layoutParser("frame");
+/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
 const layoutGrid = layoutParser("grid");
-/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
+/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
 const layoutFlex = layoutParser("flex");
 const flexSpan = (n) => {
 	const columns = "var(--layout-columns)";
@@ -125,11 +144,15 @@ const flexSpan = (n) => {
 * The `span` prop: how many layout-grid columns an element takes. It writes both
 * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
 * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
-* other's property. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
+* other's property. `span="full"` takes the whole row whatever the column count - in any grid,
+* layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
 */
-const span = system({ span: (n) => ({
+const span = system({ span: (n) => n === "full" ? {
+	gridColumn: "1 / -1",
+	flex: "0 0 100%"
+} : {
 	gridColumn: `span ${n}`,
 	flex: flexSpan(n)
-}) });
+} });
 //#endregion
-export { grid as a, span as i, layoutGrid as n, layoutGridStyles as r, layoutFlex as t };
+export { span as a, layoutGridStyles as i, layoutFrame as n, grid as o, layoutGrid as r, layoutFlex as t };

package/dist/{grid-CAlwl8LZ.cjs → grid-Cv-XGWcr.cjs}

@@ -45,30 +45,37 @@ const spaceValue = (theme, value) => {
 	const resolved = require_core.get(theme, `space.${value}`, value);
 	return typeof resolved === "number" ? `${resolved}px` : resolved;
 };
-const declarations = (theme, display, entry) => {
-	const { columns, margin, gutter, mode, maxWidth } = entry;
-	const isFixed = mode === "fixed";
+const frameDeclarations = (theme, { margin, mode, maxWidth }) => {
+	const width = mode === "fixed" && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : void 0;
+	return {
+		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
+		maxWidth: width ?? "none",
+		marginInline: width === void 0 ? 0 : `max(0px, calc((100% - ${width}) / 2))`
+	};
+};
+const columnDeclarations = (theme, display, { columns, gutter }) => {
 	const gap = gutter === void 0 ? void 0 : spaceValue(theme, gutter);
-	const styles = {
+	return {
 		"--layout-columns": columns,
 		"--layout-gutter": gap,
 		gridTemplateColumns: display === "grid" && columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : void 0,
-		columnGap: gap,
-		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
-		maxWidth: isFixed && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : "none",
-		marginInline: isFixed ? "auto" : 0
+		columnGap: gap
 	};
+};
+const declarations = (theme, parts, entry) => {
+	const styles = Object.assign({}, ...parts.map((part) => part === "frame" ? frameDeclarations(theme, entry) : columnDeclarations(theme, part, entry)));
 	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
 };
-/**
-* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
-* margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
-* theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
-* there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
-* breakpoint is back to the theme. Every written block carries the full set, so no block
-* inherits a stale `max-width`.
-*/
-const layoutGridStyles = (theme, value, display = "grid") => {
+const DISPLAY = {
+	frame: {},
+	grid: { display: "grid" },
+	flex: {
+		display: "flex",
+		flexDirection: "row",
+		flexWrap: "wrap"
+	}
+};
+const layoutStyles = (theme, value, parts) => {
 	if (!value) return {};
 	const breakpoints = require_core.get(theme, "breakpoints", {});
 	const layout = require_core.get(theme, "layout", {});
@@ -77,11 +84,7 @@ const layoutGridStyles = (theme, value, display = "grid") => {
 	const overrides = Object.fromEntries(fields.filter(([, field]) => typeof field === "object"));
 	const hasEverywhere = Object.keys(everywhere).length > 0;
 	const { keyed } = require_media.responsiveQueries(breakpoints);
-	const styles = display === "grid" ? { display: "grid" } : {
-		display: "flex",
-		flexDirection: "row",
-		flexWrap: "wrap"
-	};
+	const styles = Object.assign({}, ...parts.map((part) => DISPLAY[part]));
 	let themed = {};
 	let overridden = false;
 	for (const key of Object.keys(breakpoints)) {
@@ -96,7 +99,7 @@ const layoutGridStyles = (theme, value, display = "grid") => {
 			...layer
 		};
 		if (layer || override || overridden) {
-			const block = declarations(theme, display, {
+			const block = declarations(theme, parts, {
 				...themed,
 				...override
 			});
@@ -108,14 +111,30 @@ const layoutGridStyles = (theme, value, display = "grid") => {
 	}
 	return styles;
 };
-const layoutParser = (display) => Object.assign((props) => layoutGridStyles(props.theme, props.layout, display), {
+/**
+* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
+* margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
+* theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
+* there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
+* breakpoint is back to the theme. Every written block carries the full set, so no block
+* inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
+* `maxWidth` on the same element does not override it; rows take `rowGap`.
+*/
+const layoutGridStyles = (theme, value, display = "grid") => layoutStyles(theme, value, [display, "frame"]);
+const layoutParser = (part) => Object.assign((props) => layoutStyles(props.theme, props.layout, [part]), {
 	config: {},
 	propNames: ["layout"],
 	cache: {}
 });
-/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
+/**
+* The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
+* width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
+* or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
+*/
+const layoutFrame = layoutParser("frame");
+/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
 const layoutGrid = layoutParser("grid");
-/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
+/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
 const layoutFlex = layoutParser("flex");
 const flexSpan = (n) => {
 	const columns = "var(--layout-columns)";
@@ -126,12 +145,16 @@ const flexSpan = (n) => {
 * The `span` prop: how many layout-grid columns an element takes. It writes both
 * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
 * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
-* other's property. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
+* other's property. `span="full"` takes the whole row whatever the column count - in any grid,
+* layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
 */
-const span = require_core.system({ span: (n) => ({
+const span = require_core.system({ span: (n) => n === "full" ? {
+	gridColumn: "1 / -1",
+	flex: "0 0 100%"
+} : {
 	gridColumn: `span ${n}`,
 	flex: flexSpan(n)
-}) });
+} });
 //#endregion
 Object.defineProperty(exports, "grid", {
 	enumerable: true,
@@ -145,6 +168,12 @@ Object.defineProperty(exports, "layoutFlex", {
 		return layoutFlex;
 	}
 });
+Object.defineProperty(exports, "layoutFrame", {
+	enumerable: true,
+	get: function() {
+		return layoutFrame;
+	}
+});
 Object.defineProperty(exports, "layoutGrid", {
 	enumerable: true,
 	get: function() {

package/dist/grid.cjs

@@ -2,10 +2,11 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_grid = require("./grid-CAlwl8LZ.cjs");
+const require_grid = require("./grid-Cv-XGWcr.cjs");
 exports.default = require_grid.grid;
 exports.grid = require_grid.grid;
 exports.layoutFlex = require_grid.layoutFlex;
+exports.layoutFrame = require_grid.layoutFrame;
 exports.layoutGrid = require_grid.layoutGrid;
 exports.layoutGridStyles = require_grid.layoutGridStyles;
 exports.span = require_grid.span;

package/dist/grid.d.cts

@@ -1,3 +1,3 @@
-import { $ as GridTemplateRowsProps, G as GridColumnGapProps, H as GridAutoColumnsProps, J as GridProps, K as GridColumnProps, Ot as SpanProps, Q as GridTemplateColumnsProps, U as GridAutoFlowProps, V as GridAreaProps, W as GridAutoRowsProps, X as GridRowProps, Y as GridRowGapProps, Z as GridTemplateAreasProps, it as LayoutGridProps, q as GridGapProps } from "./types-C4ogGxde.cjs";
-import { a as layoutGrid, c as grid, i as layoutFlex, n as LayoutGridEntry, o as layoutGridStyles, r as LayoutGridValue, s as span, t as LayoutGridDisplay } from "./index-DrwsZZkS.cjs";
-export { type GridAreaProps, type GridAutoColumnsProps, type GridAutoFlowProps, type GridAutoRowsProps, type GridColumnGapProps, type GridColumnProps, type GridGapProps, type GridProps, type GridRowGapProps, type GridRowProps, type GridTemplateAreasProps, type GridTemplateColumnsProps, type GridTemplateRowsProps, LayoutGridDisplay, LayoutGridEntry, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, layoutFlex, layoutGrid, layoutGridStyles, span };
+import { $ as GridTemplateRowsProps, G as GridColumnGapProps, H as GridAutoColumnsProps, J as GridProps, K as GridColumnProps, Q as GridTemplateColumnsProps, U as GridAutoFlowProps, V as GridAreaProps, W as GridAutoRowsProps, X as GridRowProps, Y as GridRowGapProps, Z as GridTemplateAreasProps, at as LayoutGridProps, it as LayoutFrameProps, kt as SpanProps, q as GridGapProps } from "./types-Cj6Jx5LX.cjs";
+import { a as layoutFrame, c as span, i as layoutFlex, l as grid, n as LayoutGridEntry, o as layoutGrid, r as LayoutGridValue, s as layoutGridStyles, t as LayoutGridDisplay } from "./index-DHAamdKa.cjs";
+export { type GridAreaProps, type GridAutoColumnsProps, type GridAutoFlowProps, type GridAutoRowsProps, type GridColumnGapProps, type GridColumnProps, type GridGapProps, type GridProps, type GridRowGapProps, type GridRowProps, type GridTemplateAreasProps, type GridTemplateColumnsProps, type GridTemplateRowsProps, type LayoutFrameProps, LayoutGridDisplay, LayoutGridEntry, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, layoutFlex, layoutFrame, layoutGrid, layoutGridStyles, span };

package/dist/grid.d.mts

@@ -1,3 +1,3 @@
-import { $ as GridTemplateRowsProps, G as GridColumnGapProps, H as GridAutoColumnsProps, J as GridProps, K as GridColumnProps, Ot as SpanProps, Q as GridTemplateColumnsProps, U as GridAutoFlowProps, V as GridAreaProps, W as GridAutoRowsProps, X as GridRowProps, Y as GridRowGapProps, Z as GridTemplateAreasProps, it as LayoutGridProps, q as GridGapProps } from "./types-C4ogGxde.mjs";
-import { a as layoutGrid, c as grid, i as layoutFlex, n as LayoutGridEntry, o as layoutGridStyles, r as LayoutGridValue, s as span, t as LayoutGridDisplay } from "./index-Cy51GZK8.mjs";
-export { type GridAreaProps, type GridAutoColumnsProps, type GridAutoFlowProps, type GridAutoRowsProps, type GridColumnGapProps, type GridColumnProps, type GridGapProps, type GridProps, type GridRowGapProps, type GridRowProps, type GridTemplateAreasProps, type GridTemplateColumnsProps, type GridTemplateRowsProps, LayoutGridDisplay, LayoutGridEntry, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, layoutFlex, layoutGrid, layoutGridStyles, span };
+import { $ as GridTemplateRowsProps, G as GridColumnGapProps, H as GridAutoColumnsProps, J as GridProps, K as GridColumnProps, Q as GridTemplateColumnsProps, U as GridAutoFlowProps, V as GridAreaProps, W as GridAutoRowsProps, X as GridRowProps, Y as GridRowGapProps, Z as GridTemplateAreasProps, at as LayoutGridProps, it as LayoutFrameProps, kt as SpanProps, q as GridGapProps } from "./types-Cj6Jx5LX.mjs";
+import { a as layoutFrame, c as span, i as layoutFlex, l as grid, n as LayoutGridEntry, o as layoutGrid, r as LayoutGridValue, s as layoutGridStyles, t as LayoutGridDisplay } from "./index-C0X-fL6a.mjs";
+export { type GridAreaProps, type GridAutoColumnsProps, type GridAutoFlowProps, type GridAutoRowsProps, type GridColumnGapProps, type GridColumnProps, type GridGapProps, type GridProps, type GridRowGapProps, type GridRowProps, type GridTemplateAreasProps, type GridTemplateColumnsProps, type GridTemplateRowsProps, type LayoutFrameProps, LayoutGridDisplay, LayoutGridEntry, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, layoutFlex, layoutFrame, layoutGrid, layoutGridStyles, span };

package/dist/grid.mjs

@@ -1,2 +1,2 @@
-import { a as grid, i as span, n as layoutGrid, r as layoutGridStyles, t as layoutFlex } from "./grid-BdKZQBHF.mjs";
-export { grid as default, grid, layoutFlex, layoutGrid, layoutGridStyles, span };
+import { a as span, i as layoutGridStyles, n as layoutFrame, o as grid, r as layoutGrid, t as layoutFlex } from "./grid-CAuvylKs.mjs";
+export { grid as default, grid, layoutFlex, layoutFrame, layoutGrid, layoutGridStyles, span };

package/dist/{index-Cow4kTN2.d.mts → index-4_E8pg8R.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/variant/variant.d.ts
 interface VariantOptions {
   scale?: string;

package/dist/{index-BgcnUGws.d.cts → index-B7YL_4tg.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/variant/variant.d.ts
 interface VariantOptions {
   scale?: string;

package/dist/{index-z2p2DCxL.d.mts → index-BgSrVqHI.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/border/border.d.ts
 declare const border: Parser;
 //#endregion

package/dist/{index-k5b5FR_o.d.mts → index-BnfK4WNL.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/space/space.d.ts
 declare const margin: Parser;
 declare const padding: Parser;

package/dist/{index-CkSwZa-Z.d.mts → index-BvyUTPw5.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/typography/typography.d.ts
 declare const typography: Parser;
 //#endregion

package/dist/{index-Cy51GZK8.d.mts → index-C0X-fL6a.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser, l as StyleObject } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/grid/grid.d.ts
 declare const grid: Parser;
 //#endregion
@@ -29,19 +29,27 @@ type LayoutGridDisplay = 'grid' | 'flex';
  * theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
  * there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
  * breakpoint is back to the theme. Every written block carries the full set, so no block
- * inherits a stale `max-width`.
+ * inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
+ * `maxWidth` on the same element does not override it; rows take `rowGap`.
  */
 declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
-/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
+/**
+ * The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
+ * width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
+ * or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
+ */
+declare const layoutFrame: Parser;
+/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
 declare const layoutGrid: Parser;
-/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
+/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
 declare const layoutFlex: Parser;
 /**
  * The `span` prop: how many layout-grid columns an element takes. It writes both
  * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
  * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
- * other's property. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
+ * other's property. `span="full"` takes the whole row whatever the column count - in any grid,
+ * layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
  */
 declare const span: Parser;
 //#endregion
-export { layoutGrid as a, grid as c, layoutFlex as i, LayoutGridEntry as n, layoutGridStyles as o, LayoutGridValue as r, span as s, LayoutGridDisplay as t };
+export { layoutFrame as a, span as c, layoutFlex as i, grid as l, LayoutGridEntry as n, layoutGrid as o, LayoutGridValue as r, layoutGridStyles as s, LayoutGridDisplay as t };

package/dist/{index-BolQQ69W.d.cts → index-C8kegqfi.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/border/border.d.ts
 declare const border: Parser;
 //#endregion

package/dist/{index-ygAGm7QY.d.cts → index-CnHK2xHk.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/layout/layout.d.ts
 declare const layout: Parser;
 //#endregion

package/dist/{index-Cnya5hgU.d.mts → index-CnVRmFIZ.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/shadow/shadow.d.ts
 declare const shadow: Parser;
 //#endregion

package/dist/{index-DJw2NCm-.d.cts → index-CpS2pkHD.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/position/position.d.ts
 declare const position: Parser;
 //#endregion

package/dist/{index-BCO1q3Ee.d.mts → index-D8sNCYCo.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/flexbox/flexbox.d.ts
 declare const flexbox: Parser;
 //#endregion

package/dist/{index-DrwsZZkS.d.cts → index-DHAamdKa.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser, l as StyleObject } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/grid/grid.d.ts
 declare const grid: Parser;
 //#endregion
@@ -29,19 +29,27 @@ type LayoutGridDisplay = 'grid' | 'flex';
  * theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
  * there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
  * breakpoint is back to the theme. Every written block carries the full set, so no block
- * inherits a stale `max-width`.
+ * inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
+ * `maxWidth` on the same element does not override it; rows take `rowGap`.
  */
 declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
-/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
+/**
+ * The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
+ * width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
+ * or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
+ */
+declare const layoutFrame: Parser;
+/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
 declare const layoutGrid: Parser;
-/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
+/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
 declare const layoutFlex: Parser;
 /**
  * The `span` prop: how many layout-grid columns an element takes. It writes both
  * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
  * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
- * other's property. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
+ * other's property. `span="full"` takes the whole row whatever the column count - in any grid,
+ * layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
  */
 declare const span: Parser;
 //#endregion
-export { layoutGrid as a, grid as c, layoutFlex as i, LayoutGridEntry as n, layoutGridStyles as o, LayoutGridValue as r, span as s, LayoutGridDisplay as t };
+export { layoutFrame as a, span as c, layoutFlex as i, grid as l, LayoutGridEntry as n, layoutGrid as o, LayoutGridValue as r, layoutGridStyles as s, LayoutGridDisplay as t };

package/dist/{index-MqRHkwxm.d.cts → index-DOzfQDfG.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/color/color.d.ts
 declare const color: Parser;
 //#endregion

package/dist/{index-CV2xW58U.d.mts → index-DbwnL32Q.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/position/position.d.ts
 declare const position: Parser;
 //#endregion

package/dist/{index-C4BUuCOD.d.cts → index-Dpqn1WzM.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/space/space.d.ts
 declare const margin: Parser;
 declare const padding: Parser;

package/dist/{index-CXOIz3b_.d.cts → index-ILo8rb05.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/flexbox/flexbox.d.ts
 declare const flexbox: Parser;
 //#endregion

package/dist/{index-DS5tvdki.d.cts → index-IfEDsoFj.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/background/background.d.ts
 declare const background: Parser;
 //#endregion

package/dist/{index-Bq7LA-5J.d.cts → index-PoT1oV9X.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/typography/typography.d.ts
 declare const typography: Parser;
 //#endregion

package/dist/{index-CVxHdrQd.d.mts → index-Xh-lC-ge.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/background/background.d.ts
 declare const background: Parser;
 //#endregion

package/dist/{index-o6j0bywN.d.cts → index-eWVK6SXF.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/shadow/shadow.d.ts
 declare const shadow: Parser;
 //#endregion

package/dist/{index-BiZPbJuj.d.mts → index-fuBvJDhs.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/color/color.d.ts
 declare const color: Parser;
 //#endregion

package/dist/{index-DBX-YuCP.d.mts → index-kkyge37R.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/layout/layout.d.ts
 declare const layout: Parser;
 //#endregion

package/dist/index.cjs

@@ -5,7 +5,7 @@ const require_background = require("./background-wugr6cG7.cjs");
 const require_border = require("./border-UuT-fTpy.cjs");
 const require_color = require("./color-BNs17Gw-.cjs");
 const require_flexbox = require("./flexbox-CFkO6PrP.cjs");
-const require_grid = require("./grid-CAlwl8LZ.cjs");
+const require_grid = require("./grid-Cv-XGWcr.cjs");
 const require_layout = require("./layout-D3pG7vBp.cjs");
 const require_position = require("./position-zWvCE4hD.cjs");
 const require_typography = require("./typography-7jHZXqtc.cjs");
@@ -170,6 +170,7 @@ exports.justifyItems = justifyItems;
 exports.justifySelf = justifySelf;
 exports.layout = require_layout.layout;
 exports.layoutFlex = require_grid.layoutFlex;
+exports.layoutFrame = require_grid.layoutFrame;
 exports.layoutGrid = require_grid.layoutGrid;
 exports.layoutGridStyles = require_grid.layoutGridStyles;
 exports.left = left;

package/dist/index.d.cts

@@ -1,17 +1,17 @@
 import { a as ResponsiveQueries, c as createContainerQueries, d as responsiveQueries, i as QueryHelpers, l as createMediaHelpers, n as Breakpoints, o as breakpointQueries, r as ContainerQueries, s as containerKey, t as BreakpointInput, u as createMediaQuery } from "./media-CfYDomHt.cjs";
 import { a as Parser, c as StyleFn, f as Transform, g as get, h as createStyleFunction, i as ConfigStyle, l as StyleObject, m as createParser, n as Config, o as ParserConfig, p as compose, r as ConfigFunction, s as Props, u as SystemConfig, v as styleFn, y as system } from "./index-iVqAMF2L.cjs";
-import { t as background } from "./index-DS5tvdki.cjs";
-import { $ as GridTemplateRowsProps, A as FlexDirectionProps, At as TextAlignLastProps, B as GapProps, Bt as TextStyleProps, C as ButtonStyleProps, Ct as RowGapProps, D as ContainerProps, Dt as SpaceProps, E as ColumnGapProps, Et as SizeProps, F as FlexboxProps, Ft as TextDecorationProps, G as GridColumnGapProps, Gt as TypographyProps, H as GridAutoColumnsProps, Ht as Theme, I as FontFamilyProps, It as TextDecorationStyleProps, J as GridProps, Jt as WidthProps, K as GridColumnProps, Kt as VerticalAlignProps, L as FontSizeProps, Lt as TextDecorationThicknessProps, M as FlexProps, Mt as TextColorProps, N as FlexShrinkProps, Nt as TextDecorationColorProps, O as DisplayProps, Ot as SpanProps, P as FlexWrapProps, Pt as TextDecorationLineProps, Q as GridTemplateColumnsProps, R as FontStyleProps, Rt as TextOverflowProps, S as BreakpointName, St as RightProps, T as ColorStyleProps, Tt as ShadowProps, U as GridAutoFlowProps, Ut as ThemeValue, V as GridAreaProps, Vt as TextTransformProps, W as GridAutoRowsProps, Wt as TopProps, X as GridRowProps, Y as GridRowGapProps, Yt as ZIndexProps, Z as GridTemplateAreasProps, _ as BorderStyleProps, _t as OverflowProps, a as BackgroundColorProps, at as LayoutProps, b as BottomProps, bt as RequiredTheme, c as BackgroundProps, ct as LineHeightProps, d as BorderBottomProps, dt as MaxWidthProps, et as HeightProps, f as BorderColorProps, ft as MinHeightProps, g as BorderRightProps, gt as OrderProps, h as BorderRadiusProps, ht as OpacityProps, i as AspectRatioProps, it as LayoutGridProps, j as FlexGrowProps, jt as TextAlignProps, k as FlexBasisProps, kt as TLengthStyledSystem, l as BackgroundRepeatProps, lt as MarginProps, m as BorderProps, mt as ObjectOrArray, n as AlignItemsProps, nt as JustifyItemsProps, o as BackgroundImageProps, ot as LeftProps, p as BorderLeftProps, pt as MinWidthProps, q as GridGapProps, qt as WhiteSpaceProps, r as AlignSelfProps, rt as JustifySelfProps, s as BackgroundPositionProps, st as LetterSpacingProps, t as AlignContentProps, tt as JustifyContentProps, u as BackgroundSizeProps, ut as MaxHeightProps, v as BorderTopProps, vt as PaddingProps, w as ColorProps, wt as Scale, x as BoxShadowProps, xt as ResponsiveValue, y as BorderWidthProps, yt as PositionProps, z as FontWeightProps, zt as TextShadowProps } from "./types-C4ogGxde.cjs";
-import { t as border } from "./index-BolQQ69W.cjs";
-import { t as color } from "./index-MqRHkwxm.cjs";
-import { t as flexbox } from "./index-CXOIz3b_.cjs";
-import { a as layoutGrid, c as grid, i as layoutFlex, n as LayoutGridEntry, o as layoutGridStyles, r as LayoutGridValue, s as span, t as LayoutGridDisplay } from "./index-DrwsZZkS.cjs";
-import { i as space, n as margin, r as padding, t as gap } from "./index-C4BUuCOD.cjs";
-import { t as layout } from "./index-ygAGm7QY.cjs";
-import { t as typography } from "./index-Bq7LA-5J.cjs";
-import { t as position } from "./index-DJw2NCm-.cjs";
-import { t as shadow } from "./index-o6j0bywN.cjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-BgcnUGws.cjs";
+import { t as background } from "./index-IfEDsoFj.cjs";
+import { $ as GridTemplateRowsProps, A as FlexDirectionProps, At as TLengthStyledSystem, B as GapProps, Bt as TextShadowProps, C as ButtonStyleProps, Ct as RightProps, D as ContainerProps, Dt as SizeProps, E as ColumnGapProps, Et as ShadowProps, F as FlexboxProps, Ft as TextDecorationLineProps, G as GridColumnGapProps, Gt as TopProps, H as GridAutoColumnsProps, Ht as TextTransformProps, I as FontFamilyProps, It as TextDecorationProps, J as GridProps, Jt as WhiteSpaceProps, K as GridColumnProps, Kt as TypographyProps, L as FontSizeProps, Lt as TextDecorationStyleProps, M as FlexProps, Mt as TextAlignProps, N as FlexShrinkProps, Nt as TextColorProps, O as DisplayProps, Ot as SpaceProps, P as FlexWrapProps, Pt as TextDecorationColorProps, Q as GridTemplateColumnsProps, R as FontStyleProps, Rt as TextDecorationThicknessProps, S as BreakpointName, St as ResponsiveValue, T as ColorStyleProps, Tt as Scale, U as GridAutoFlowProps, Ut as Theme, V as GridAreaProps, Vt as TextStyleProps, W as GridAutoRowsProps, Wt as ThemeValue, X as GridRowProps, Xt as ZIndexProps, Y as GridRowGapProps, Yt as WidthProps, Z as GridTemplateAreasProps, _ as BorderStyleProps, _t as OrderProps, a as BackgroundColorProps, at as LayoutGridProps, b as BottomProps, bt as PositionProps, c as BackgroundProps, ct as LetterSpacingProps, d as BorderBottomProps, dt as MaxHeightProps, et as HeightProps, f as BorderColorProps, ft as MaxWidthProps, g as BorderRightProps, gt as OpacityProps, h as BorderRadiusProps, ht as ObjectOrArray, i as AspectRatioProps, it as LayoutFrameProps, j as FlexGrowProps, jt as TextAlignLastProps, k as FlexBasisProps, kt as SpanProps, l as BackgroundRepeatProps, lt as LineHeightProps, m as BorderProps, mt as MinWidthProps, n as AlignItemsProps, nt as JustifyItemsProps, o as BackgroundImageProps, ot as LayoutProps, p as BorderLeftProps, pt as MinHeightProps, q as GridGapProps, qt as VerticalAlignProps, r as AlignSelfProps, rt as JustifySelfProps, s as BackgroundPositionProps, st as LeftProps, t as AlignContentProps, tt as JustifyContentProps, u as BackgroundSizeProps, ut as MarginProps, v as BorderTopProps, vt as OverflowProps, w as ColorProps, wt as RowGapProps, x as BoxShadowProps, xt as RequiredTheme, y as BorderWidthProps, yt as PaddingProps, z as FontWeightProps, zt as TextOverflowProps } from "./types-Cj6Jx5LX.cjs";
+import { t as border } from "./index-C8kegqfi.cjs";
+import { t as color } from "./index-DOzfQDfG.cjs";
+import { t as flexbox } from "./index-ILo8rb05.cjs";
+import { a as layoutFrame, c as span, i as layoutFlex, l as grid, n as LayoutGridEntry, o as layoutGrid, r as LayoutGridValue, s as layoutGridStyles, t as LayoutGridDisplay } from "./index-DHAamdKa.cjs";
+import { i as space, n as margin, r as padding, t as gap } from "./index-Dpqn1WzM.cjs";
+import { t as layout } from "./index-CnHK2xHk.cjs";
+import { t as typography } from "./index-PoT1oV9X.cjs";
+import { t as position } from "./index-CpS2pkHD.cjs";
+import { t as shadow } from "./index-eWVK6SXF.cjs";
+import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-B7YL_4tg.cjs";
 //#region src/style/style.d.ts
 interface StyleOptions {
   prop: string;
@@ -99,4 +99,4 @@ declare const right: Parser;
 declare const bottom: Parser;
 declare const left: Parser;
 //#endregion
-export { AlignContentProps, AlignItemsProps, AlignSelfProps, AspectRatioProps, BackgroundColorProps, BackgroundImageProps, BackgroundPositionProps, BackgroundProps, BackgroundRepeatProps, BackgroundSizeProps, BorderBottomProps, BorderColorProps, BorderLeftProps, BorderProps, BorderRadiusProps, BorderRightProps, BorderStyleProps, BorderTopProps, BorderWidthProps, BottomProps, BoxShadowProps, type BreakpointInput, BreakpointName, type Breakpoints, ButtonStyleProps, ColorProps, ColorStyleProps, ColumnGapProps, type Config, type ConfigFunction, type ConfigStyle, ContainerProps, type ContainerQueries, DisplayProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, FlexboxProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnGapProps, GridColumnProps, GridGapProps, GridProps, GridRowGapProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, HeightProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, type LayoutGridDisplay, type LayoutGridEntry, LayoutGridProps, type LayoutGridValue, LayoutProps, LeftProps, LetterSpacingProps, LineHeightProps, type LowLevelStyleFunctionArguments, MarginProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, ObjectOrArray, OpacityProps, OrderProps, OverflowProps, PaddingProps, type Parser, type ParserConfig, PositionProps, type Props, type QueryHelpers, RequiredTheme, type ResponsiveQueries, ResponsiveValue, RightProps, RowGapProps, Scale, ShadowProps, SizeProps, SpaceProps, SpanProps, type StyleFn, type StyleObject, type StyleOptions, type SystemConfig, TLengthStyledSystem, TextAlignLastProps, TextAlignProps, TextColorProps, TextDecorationColorProps, TextDecorationLineProps, TextDecorationProps, TextDecorationStyleProps, TextDecorationThicknessProps, TextOverflowProps, TextShadowProps, TextStyleProps, TextTransformProps, Theme, ThemeValue, TopProps, type Transform, TypographyProps, type VariantArgs, type VariantOptions, VerticalAlignProps, WhiteSpaceProps, WidthProps, ZIndexProps, alignContent, alignItems, alignSelf, background, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, border, border as borders, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderStyle, borderTop, borderWidth, bottom, shadow as boxShadow, shadow, shadow as textShadow, breakpointQueries, buttonStyle, color, colorStyle, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, display, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexbox, fontFamily, fontSize, fontStyle, fontWeight, gap, get, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, justifyContent, justifyItems, justifySelf, layout, layoutFlex, layoutGrid, layoutGridStyles, left, letterSpacing, lineHeight, margin, maxHeight, maxWidth, minHeight, minWidth, opacity, order, overflow, overflowX, overflowY, padding, position, responsiveQueries, right, size, space, span, style, type styleFn, system, textAlign, textAlignLast, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textOverflow, textStyle, textTransform, top, typography, variant, verticalAlign, whiteSpace, width, zIndex };
+export { AlignContentProps, AlignItemsProps, AlignSelfProps, AspectRatioProps, BackgroundColorProps, BackgroundImageProps, BackgroundPositionProps, BackgroundProps, BackgroundRepeatProps, BackgroundSizeProps, BorderBottomProps, BorderColorProps, BorderLeftProps, BorderProps, BorderRadiusProps, BorderRightProps, BorderStyleProps, BorderTopProps, BorderWidthProps, BottomProps, BoxShadowProps, type BreakpointInput, BreakpointName, type Breakpoints, ButtonStyleProps, ColorProps, ColorStyleProps, ColumnGapProps, type Config, type ConfigFunction, type ConfigStyle, ContainerProps, type ContainerQueries, DisplayProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, FlexboxProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnGapProps, GridColumnProps, GridGapProps, GridProps, GridRowGapProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, HeightProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, LayoutFrameProps, type LayoutGridDisplay, type LayoutGridEntry, LayoutGridProps, type LayoutGridValue, LayoutProps, LeftProps, LetterSpacingProps, LineHeightProps, type LowLevelStyleFunctionArguments, MarginProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, ObjectOrArray, OpacityProps, OrderProps, OverflowProps, PaddingProps, type Parser, type ParserConfig, PositionProps, type Props, type QueryHelpers, RequiredTheme, type ResponsiveQueries, ResponsiveValue, RightProps, RowGapProps, Scale, ShadowProps, SizeProps, SpaceProps, SpanProps, type StyleFn, type StyleObject, type StyleOptions, type SystemConfig, TLengthStyledSystem, TextAlignLastProps, TextAlignProps, TextColorProps, TextDecorationColorProps, TextDecorationLineProps, TextDecorationProps, TextDecorationStyleProps, TextDecorationThicknessProps, TextOverflowProps, TextShadowProps, TextStyleProps, TextTransformProps, Theme, ThemeValue, TopProps, type Transform, TypographyProps, type VariantArgs, type VariantOptions, VerticalAlignProps, WhiteSpaceProps, WidthProps, ZIndexProps, alignContent, alignItems, alignSelf, background, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, border, border as borders, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderStyle, borderTop, borderWidth, bottom, shadow as boxShadow, shadow, shadow as textShadow, breakpointQueries, buttonStyle, color, colorStyle, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, display, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexbox, fontFamily, fontSize, fontStyle, fontWeight, gap, get, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, justifyContent, justifyItems, justifySelf, layout, layoutFlex, layoutFrame, layoutGrid, layoutGridStyles, left, letterSpacing, lineHeight, margin, maxHeight, maxWidth, minHeight, minWidth, opacity, order, overflow, overflowX, overflowY, padding, position, responsiveQueries, right, size, space, span, style, type styleFn, system, textAlign, textAlignLast, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textOverflow, textStyle, textTransform, top, typography, variant, verticalAlign, whiteSpace, width, zIndex };

package/dist/index.d.mts

@@ -1,17 +1,17 @@
 import { a as ResponsiveQueries, c as createContainerQueries, d as responsiveQueries, i as QueryHelpers, l as createMediaHelpers, n as Breakpoints, o as breakpointQueries, r as ContainerQueries, s as containerKey, t as BreakpointInput, u as createMediaQuery } from "./media-CfYDomHt.mjs";
 import { a as Parser, c as StyleFn, f as Transform, g as get, h as createStyleFunction, i as ConfigStyle, l as StyleObject, m as createParser, n as Config, o as ParserConfig, p as compose, r as ConfigFunction, s as Props, u as SystemConfig, v as styleFn, y as system } from "./index-IulNhyDt.mjs";
-import { t as background } from "./index-CVxHdrQd.mjs";
-import { $ as GridTemplateRowsProps, A as FlexDirectionProps, At as TextAlignLastProps, B as GapProps, Bt as TextStyleProps, C as ButtonStyleProps, Ct as RowGapProps, D as ContainerProps, Dt as SpaceProps, E as ColumnGapProps, Et as SizeProps, F as FlexboxProps, Ft as TextDecorationProps, G as GridColumnGapProps, Gt as TypographyProps, H as GridAutoColumnsProps, Ht as Theme, I as FontFamilyProps, It as TextDecorationStyleProps, J as GridProps, Jt as WidthProps, K as GridColumnProps, Kt as VerticalAlignProps, L as FontSizeProps, Lt as TextDecorationThicknessProps, M as FlexProps, Mt as TextColorProps, N as FlexShrinkProps, Nt as TextDecorationColorProps, O as DisplayProps, Ot as SpanProps, P as FlexWrapProps, Pt as TextDecorationLineProps, Q as GridTemplateColumnsProps, R as FontStyleProps, Rt as TextOverflowProps, S as BreakpointName, St as RightProps, T as ColorStyleProps, Tt as ShadowProps, U as GridAutoFlowProps, Ut as ThemeValue, V as GridAreaProps, Vt as TextTransformProps, W as GridAutoRowsProps, Wt as TopProps, X as GridRowProps, Y as GridRowGapProps, Yt as ZIndexProps, Z as GridTemplateAreasProps, _ as BorderStyleProps, _t as OverflowProps, a as BackgroundColorProps, at as LayoutProps, b as BottomProps, bt as RequiredTheme, c as BackgroundProps, ct as LineHeightProps, d as BorderBottomProps, dt as MaxWidthProps, et as HeightProps, f as BorderColorProps, ft as MinHeightProps, g as BorderRightProps, gt as OrderProps, h as BorderRadiusProps, ht as OpacityProps, i as AspectRatioProps, it as LayoutGridProps, j as FlexGrowProps, jt as TextAlignProps, k as FlexBasisProps, kt as TLengthStyledSystem, l as BackgroundRepeatProps, lt as MarginProps, m as BorderProps, mt as ObjectOrArray, n as AlignItemsProps, nt as JustifyItemsProps, o as BackgroundImageProps, ot as LeftProps, p as BorderLeftProps, pt as MinWidthProps, q as GridGapProps, qt as WhiteSpaceProps, r as AlignSelfProps, rt as JustifySelfProps, s as BackgroundPositionProps, st as LetterSpacingProps, t as AlignContentProps, tt as JustifyContentProps, u as BackgroundSizeProps, ut as MaxHeightProps, v as BorderTopProps, vt as PaddingProps, w as ColorProps, wt as Scale, x as BoxShadowProps, xt as ResponsiveValue, y as BorderWidthProps, yt as PositionProps, z as FontWeightProps, zt as TextShadowProps } from "./types-C4ogGxde.mjs";
-import { t as border } from "./index-z2p2DCxL.mjs";
-import { t as color } from "./index-BiZPbJuj.mjs";
-import { t as flexbox } from "./index-BCO1q3Ee.mjs";
-import { a as layoutGrid, c as grid, i as layoutFlex, n as LayoutGridEntry, o as layoutGridStyles, r as LayoutGridValue, s as span, t as LayoutGridDisplay } from "./index-Cy51GZK8.mjs";
-import { i as space, n as margin, r as padding, t as gap } from "./index-k5b5FR_o.mjs";
-import { t as layout } from "./index-DBX-YuCP.mjs";
-import { t as typography } from "./index-CkSwZa-Z.mjs";
-import { t as position } from "./index-CV2xW58U.mjs";
-import { t as shadow } from "./index-Cnya5hgU.mjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-Cow4kTN2.mjs";
+import { t as background } from "./index-Xh-lC-ge.mjs";
+import { $ as GridTemplateRowsProps, A as FlexDirectionProps, At as TLengthStyledSystem, B as GapProps, Bt as TextShadowProps, C as ButtonStyleProps, Ct as RightProps, D as ContainerProps, Dt as SizeProps, E as ColumnGapProps, Et as ShadowProps, F as FlexboxProps, Ft as TextDecorationLineProps, G as GridColumnGapProps, Gt as TopProps, H as GridAutoColumnsProps, Ht as TextTransformProps, I as FontFamilyProps, It as TextDecorationProps, J as GridProps, Jt as WhiteSpaceProps, K as GridColumnProps, Kt as TypographyProps, L as FontSizeProps, Lt as TextDecorationStyleProps, M as FlexProps, Mt as TextAlignProps, N as FlexShrinkProps, Nt as TextColorProps, O as DisplayProps, Ot as SpaceProps, P as FlexWrapProps, Pt as TextDecorationColorProps, Q as GridTemplateColumnsProps, R as FontStyleProps, Rt as TextDecorationThicknessProps, S as BreakpointName, St as ResponsiveValue, T as ColorStyleProps, Tt as Scale, U as GridAutoFlowProps, Ut as Theme, V as GridAreaProps, Vt as TextStyleProps, W as GridAutoRowsProps, Wt as ThemeValue, X as GridRowProps, Xt as ZIndexProps, Y as GridRowGapProps, Yt as WidthProps, Z as GridTemplateAreasProps, _ as BorderStyleProps, _t as OrderProps, a as BackgroundColorProps, at as LayoutGridProps, b as BottomProps, bt as PositionProps, c as BackgroundProps, ct as LetterSpacingProps, d as BorderBottomProps, dt as MaxHeightProps, et as HeightProps, f as BorderColorProps, ft as MaxWidthProps, g as BorderRightProps, gt as OpacityProps, h as BorderRadiusProps, ht as ObjectOrArray, i as AspectRatioProps, it as LayoutFrameProps, j as FlexGrowProps, jt as TextAlignLastProps, k as FlexBasisProps, kt as SpanProps, l as BackgroundRepeatProps, lt as LineHeightProps, m as BorderProps, mt as MinWidthProps, n as AlignItemsProps, nt as JustifyItemsProps, o as BackgroundImageProps, ot as LayoutProps, p as BorderLeftProps, pt as MinHeightProps, q as GridGapProps, qt as VerticalAlignProps, r as AlignSelfProps, rt as JustifySelfProps, s as BackgroundPositionProps, st as LeftProps, t as AlignContentProps, tt as JustifyContentProps, u as BackgroundSizeProps, ut as MarginProps, v as BorderTopProps, vt as OverflowProps, w as ColorProps, wt as RowGapProps, x as BoxShadowProps, xt as RequiredTheme, y as BorderWidthProps, yt as PaddingProps, z as FontWeightProps, zt as TextOverflowProps } from "./types-Cj6Jx5LX.mjs";
+import { t as border } from "./index-BgSrVqHI.mjs";
+import { t as color } from "./index-fuBvJDhs.mjs";
+import { t as flexbox } from "./index-D8sNCYCo.mjs";
+import { a as layoutFrame, c as span, i as layoutFlex, l as grid, n as LayoutGridEntry, o as layoutGrid, r as LayoutGridValue, s as layoutGridStyles, t as LayoutGridDisplay } from "./index-C0X-fL6a.mjs";
+import { i as space, n as margin, r as padding, t as gap } from "./index-BnfK4WNL.mjs";
+import { t as layout } from "./index-kkyge37R.mjs";
+import { t as typography } from "./index-BvyUTPw5.mjs";
+import { t as position } from "./index-DbwnL32Q.mjs";
+import { t as shadow } from "./index-CnVRmFIZ.mjs";
+import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-4_E8pg8R.mjs";
 //#region src/style/style.d.ts
 interface StyleOptions {
   prop: string;
@@ -99,4 +99,4 @@ declare const right: Parser;
 declare const bottom: Parser;
 declare const left: Parser;
 //#endregion
-export { AlignContentProps, AlignItemsProps, AlignSelfProps, AspectRatioProps, BackgroundColorProps, BackgroundImageProps, BackgroundPositionProps, BackgroundProps, BackgroundRepeatProps, BackgroundSizeProps, BorderBottomProps, BorderColorProps, BorderLeftProps, BorderProps, BorderRadiusProps, BorderRightProps, BorderStyleProps, BorderTopProps, BorderWidthProps, BottomProps, BoxShadowProps, type BreakpointInput, BreakpointName, type Breakpoints, ButtonStyleProps, ColorProps, ColorStyleProps, ColumnGapProps, type Config, type ConfigFunction, type ConfigStyle, ContainerProps, type ContainerQueries, DisplayProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, FlexboxProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnGapProps, GridColumnProps, GridGapProps, GridProps, GridRowGapProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, HeightProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, type LayoutGridDisplay, type LayoutGridEntry, LayoutGridProps, type LayoutGridValue, LayoutProps, LeftProps, LetterSpacingProps, LineHeightProps, type LowLevelStyleFunctionArguments, MarginProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, ObjectOrArray, OpacityProps, OrderProps, OverflowProps, PaddingProps, type Parser, type ParserConfig, PositionProps, type Props, type QueryHelpers, RequiredTheme, type ResponsiveQueries, ResponsiveValue, RightProps, RowGapProps, Scale, ShadowProps, SizeProps, SpaceProps, SpanProps, type StyleFn, type StyleObject, type StyleOptions, type SystemConfig, TLengthStyledSystem, TextAlignLastProps, TextAlignProps, TextColorProps, TextDecorationColorProps, TextDecorationLineProps, TextDecorationProps, TextDecorationStyleProps, TextDecorationThicknessProps, TextOverflowProps, TextShadowProps, TextStyleProps, TextTransformProps, Theme, ThemeValue, TopProps, type Transform, TypographyProps, type VariantArgs, type VariantOptions, VerticalAlignProps, WhiteSpaceProps, WidthProps, ZIndexProps, alignContent, alignItems, alignSelf, background, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, border, border as borders, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderStyle, borderTop, borderWidth, bottom, shadow as boxShadow, shadow, shadow as textShadow, breakpointQueries, buttonStyle, color, colorStyle, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, display, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexbox, fontFamily, fontSize, fontStyle, fontWeight, gap, get, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, justifyContent, justifyItems, justifySelf, layout, layoutFlex, layoutGrid, layoutGridStyles, left, letterSpacing, lineHeight, margin, maxHeight, maxWidth, minHeight, minWidth, opacity, order, overflow, overflowX, overflowY, padding, position, responsiveQueries, right, size, space, span, style, type styleFn, system, textAlign, textAlignLast, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textOverflow, textStyle, textTransform, top, typography, variant, verticalAlign, whiteSpace, width, zIndex };
+export { AlignContentProps, AlignItemsProps, AlignSelfProps, AspectRatioProps, BackgroundColorProps, BackgroundImageProps, BackgroundPositionProps, BackgroundProps, BackgroundRepeatProps, BackgroundSizeProps, BorderBottomProps, BorderColorProps, BorderLeftProps, BorderProps, BorderRadiusProps, BorderRightProps, BorderStyleProps, BorderTopProps, BorderWidthProps, BottomProps, BoxShadowProps, type BreakpointInput, BreakpointName, type Breakpoints, ButtonStyleProps, ColorProps, ColorStyleProps, ColumnGapProps, type Config, type ConfigFunction, type ConfigStyle, ContainerProps, type ContainerQueries, DisplayProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, FlexboxProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnGapProps, GridColumnProps, GridGapProps, GridProps, GridRowGapProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, HeightProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, LayoutFrameProps, type LayoutGridDisplay, type LayoutGridEntry, LayoutGridProps, type LayoutGridValue, LayoutProps, LeftProps, LetterSpacingProps, LineHeightProps, type LowLevelStyleFunctionArguments, MarginProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, ObjectOrArray, OpacityProps, OrderProps, OverflowProps, PaddingProps, type Parser, type ParserConfig, PositionProps, type Props, type QueryHelpers, RequiredTheme, type ResponsiveQueries, ResponsiveValue, RightProps, RowGapProps, Scale, ShadowProps, SizeProps, SpaceProps, SpanProps, type StyleFn, type StyleObject, type StyleOptions, type SystemConfig, TLengthStyledSystem, TextAlignLastProps, TextAlignProps, TextColorProps, TextDecorationColorProps, TextDecorationLineProps, TextDecorationProps, TextDecorationStyleProps, TextDecorationThicknessProps, TextOverflowProps, TextShadowProps, TextStyleProps, TextTransformProps, Theme, ThemeValue, TopProps, type Transform, TypographyProps, type VariantArgs, type VariantOptions, VerticalAlignProps, WhiteSpaceProps, WidthProps, ZIndexProps, alignContent, alignItems, alignSelf, background, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, border, border as borders, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderStyle, borderTop, borderWidth, bottom, shadow as boxShadow, shadow, shadow as textShadow, breakpointQueries, buttonStyle, color, colorStyle, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, display, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexbox, fontFamily, fontSize, fontStyle, fontWeight, gap, get, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, justifyContent, justifyItems, justifySelf, layout, layoutFlex, layoutFrame, layoutGrid, layoutGridStyles, left, letterSpacing, lineHeight, margin, maxHeight, maxWidth, minHeight, minWidth, opacity, order, overflow, overflowX, overflowY, padding, position, responsiveQueries, right, size, space, span, style, type styleFn, system, textAlign, textAlignLast, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textOverflow, textStyle, textTransform, top, typography, variant, verticalAlign, whiteSpace, width, zIndex };

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { t as background } from "./background-B-jql3jb.mjs";
 import { t as border } from "./border-Dder4Dhp.mjs";
 import { t as color } from "./color-CGmMe8yP.mjs";
 import { t as flexbox } from "./flexbox-XQnlnfa4.mjs";
-import { a as grid, i as span, n as layoutGrid, r as layoutGridStyles, t as layoutFlex } from "./grid-BdKZQBHF.mjs";
+import { a as span, i as layoutGridStyles, n as layoutFrame, o as grid, r as layoutGrid, t as layoutFlex } from "./grid-CAuvylKs.mjs";
 import { t as layout } from "./layout-DF83ooFn.mjs";
 import { t as position } from "./position-jf6VlRyR.mjs";
 import { t as typography } from "./typography-p6qWP6Px.mjs";
@@ -105,4 +105,4 @@ const right = positionFns.right;
 const bottom = positionFns.bottom;
 const left = positionFns.left;
 //#endregion
-export { alignContent, alignItems, alignSelf, background, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, border, border as borders, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderStyle, borderTop, borderWidth, bottom, shadow as boxShadow, shadow, shadow as textShadow, breakpointQueries, buttonStyle, color, colorStyle, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, display, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexbox, fontFamily, fontSize, fontStyle, fontWeight, gap, get, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, justifyContent, justifyItems, justifySelf, layout, layoutFlex, layoutGrid, layoutGridStyles, left, letterSpacing, lineHeight, margin, maxHeight, maxWidth, minHeight, minWidth, opacity, order, overflow, overflowX, overflowY, padding, position, responsiveQueries, right, size, space, span, style, system, textAlign, textAlignLast, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textOverflow, textStyle, textTransform, top, typography, variant, verticalAlign, whiteSpace, width, zIndex };
+export { alignContent, alignItems, alignSelf, background, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, border, border as borders, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderStyle, borderTop, borderWidth, bottom, shadow as boxShadow, shadow, shadow as textShadow, breakpointQueries, buttonStyle, color, colorStyle, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, display, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexbox, fontFamily, fontSize, fontStyle, fontWeight, gap, get, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, justifyContent, justifyItems, justifySelf, layout, layoutFlex, layoutFrame, layoutGrid, layoutGridStyles, left, letterSpacing, lineHeight, margin, maxHeight, maxWidth, minHeight, minWidth, opacity, order, overflow, overflowX, overflowY, padding, position, responsiveQueries, right, size, space, span, style, system, textAlign, textAlignLast, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textOverflow, textStyle, textTransform, top, typography, variant, verticalAlign, whiteSpace, width, zIndex };

package/dist/layout.d.cts

@@ -1,3 +1,3 @@
-import { D as ContainerProps, Et as SizeProps, Jt as WidthProps, Kt as VerticalAlignProps, O as DisplayProps, _t as OverflowProps, at as LayoutProps, dt as MaxWidthProps, et as HeightProps, ft as MinHeightProps, i as AspectRatioProps, pt as MinWidthProps, ut as MaxHeightProps } from "./types-C4ogGxde.cjs";
-import { t as layout } from "./index-ygAGm7QY.cjs";
+import { D as ContainerProps, Dt as SizeProps, O as DisplayProps, Yt as WidthProps, dt as MaxHeightProps, et as HeightProps, ft as MaxWidthProps, i as AspectRatioProps, mt as MinWidthProps, ot as LayoutProps, pt as MinHeightProps, qt as VerticalAlignProps, vt as OverflowProps } from "./types-Cj6Jx5LX.cjs";
+import { t as layout } from "./index-CnHK2xHk.cjs";
 export { type AspectRatioProps, type ContainerProps, type DisplayProps, type HeightProps, type LayoutProps, type MaxHeightProps, type MaxWidthProps, type MinHeightProps, type MinWidthProps, type OverflowProps, type SizeProps, type VerticalAlignProps, type WidthProps, layout as default, layout };

package/dist/layout.d.mts

@@ -1,3 +1,3 @@
-import { D as ContainerProps, Et as SizeProps, Jt as WidthProps, Kt as VerticalAlignProps, O as DisplayProps, _t as OverflowProps, at as LayoutProps, dt as MaxWidthProps, et as HeightProps, ft as MinHeightProps, i as AspectRatioProps, pt as MinWidthProps, ut as MaxHeightProps } from "./types-C4ogGxde.mjs";
-import { t as layout } from "./index-DBX-YuCP.mjs";
+import { D as ContainerProps, Dt as SizeProps, O as DisplayProps, Yt as WidthProps, dt as MaxHeightProps, et as HeightProps, ft as MaxWidthProps, i as AspectRatioProps, mt as MinWidthProps, ot as LayoutProps, pt as MinHeightProps, qt as VerticalAlignProps, vt as OverflowProps } from "./types-Cj6Jx5LX.mjs";
+import { t as layout } from "./index-kkyge37R.mjs";
 export { type AspectRatioProps, type ContainerProps, type DisplayProps, type HeightProps, type LayoutProps, type MaxHeightProps, type MaxWidthProps, type MinHeightProps, type MinWidthProps, type OverflowProps, type SizeProps, type VerticalAlignProps, type WidthProps, layout as default, layout };

package/dist/position.d.cts

@@ -1,3 +1,3 @@
-import { St as RightProps, Wt as TopProps, Yt as ZIndexProps, b as BottomProps, ot as LeftProps, yt as PositionProps } from "./types-C4ogGxde.cjs";
-import { t as position } from "./index-DJw2NCm-.cjs";
+import { Ct as RightProps, Gt as TopProps, Xt as ZIndexProps, b as BottomProps, bt as PositionProps, st as LeftProps } from "./types-Cj6Jx5LX.cjs";
+import { t as position } from "./index-CpS2pkHD.cjs";
 export { type BottomProps, type LeftProps, type PositionProps, type RightProps, type TopProps, type ZIndexProps, position as default, position };

package/dist/position.d.mts

@@ -1,3 +1,3 @@
-import { St as RightProps, Wt as TopProps, Yt as ZIndexProps, b as BottomProps, ot as LeftProps, yt as PositionProps } from "./types-C4ogGxde.mjs";
-import { t as position } from "./index-CV2xW58U.mjs";
+import { Ct as RightProps, Gt as TopProps, Xt as ZIndexProps, b as BottomProps, bt as PositionProps, st as LeftProps } from "./types-Cj6Jx5LX.mjs";
+import { t as position } from "./index-DbwnL32Q.mjs";
 export { type BottomProps, type LeftProps, type PositionProps, type RightProps, type TopProps, type ZIndexProps, position as default, position };

package/dist/{presets-DtE_nRxp.mjs → presets-B4QR0tKt.mjs}

@@ -3,7 +3,7 @@ import { t as background } from "./background-B-jql3jb.mjs";
 import { t as border } from "./border-Dder4Dhp.mjs";
 import { t as color } from "./color-CGmMe8yP.mjs";
 import { t as flexbox } from "./flexbox-XQnlnfa4.mjs";
-import { a as grid, i as span } from "./grid-BdKZQBHF.mjs";
+import { a as span, o as grid } from "./grid-CAuvylKs.mjs";
 import { t as layout } from "./layout-DF83ooFn.mjs";
 import { t as position } from "./position-jf6VlRyR.mjs";
 import { t as typography } from "./typography-p6qWP6Px.mjs";

package/dist/{presets-fJFZ74qt.cjs → presets-Da2kvQPo.cjs}

@@ -3,7 +3,7 @@ const require_background = require("./background-wugr6cG7.cjs");
 const require_border = require("./border-UuT-fTpy.cjs");
 const require_color = require("./color-BNs17Gw-.cjs");
 const require_flexbox = require("./flexbox-CFkO6PrP.cjs");
-const require_grid = require("./grid-CAlwl8LZ.cjs");
+const require_grid = require("./grid-Cv-XGWcr.cjs");
 const require_layout = require("./layout-D3pG7vBp.cjs");
 const require_position = require("./position-zWvCE4hD.cjs");
 const require_typography = require("./typography-7jHZXqtc.cjs");

package/dist/prop-types.cjs

@@ -7,7 +7,7 @@ const require_background = require("./background-wugr6cG7.cjs");
 const require_border = require("./border-UuT-fTpy.cjs");
 const require_color = require("./color-BNs17Gw-.cjs");
 const require_flexbox = require("./flexbox-CFkO6PrP.cjs");
-const require_grid = require("./grid-CAlwl8LZ.cjs");
+const require_grid = require("./grid-Cv-XGWcr.cjs");
 const require_layout = require("./layout-D3pG7vBp.cjs");
 const require_position = require("./position-zWvCE4hD.cjs");
 const require_typography = require("./typography-7jHZXqtc.cjs");

package/dist/prop-types.mjs

@@ -2,7 +2,7 @@ import { t as background } from "./background-B-jql3jb.mjs";
 import { t as border } from "./border-Dder4Dhp.mjs";
 import { t as color } from "./color-CGmMe8yP.mjs";
 import { t as flexbox } from "./flexbox-XQnlnfa4.mjs";
-import { a as grid } from "./grid-BdKZQBHF.mjs";
+import { o as grid } from "./grid-CAuvylKs.mjs";
 import { t as layout } from "./layout-DF83ooFn.mjs";
 import { t as position } from "./position-jf6VlRyR.mjs";
 import { t as typography } from "./typography-p6qWP6Px.mjs";

package/dist/props.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_presets = require("./presets-fJFZ74qt.cjs");
+const require_presets = require("./presets-Da2kvQPo.cjs");
 //#region src/props/props.ts
 const styledSystemProps = new Set(require_presets.all.propNames);
 const omit = (props) => {

package/dist/props.mjs

@@ -1,4 +1,4 @@
-import { t as all } from "./presets-DtE_nRxp.mjs";
+import { t as all } from "./presets-B4QR0tKt.mjs";
 //#region src/props/props.ts
 const styledSystemProps = new Set(all.propNames);
 const omit = (props) => {

package/dist/shadow.d.cts

@@ -1,3 +1,3 @@
-import { Tt as ShadowProps, x as BoxShadowProps, zt as TextShadowProps } from "./types-C4ogGxde.cjs";
-import { t as shadow } from "./index-o6j0bywN.cjs";
+import { Bt as TextShadowProps, Et as ShadowProps, x as BoxShadowProps } from "./types-Cj6Jx5LX.cjs";
+import { t as shadow } from "./index-eWVK6SXF.cjs";
 export { type BoxShadowProps, type ShadowProps, type TextShadowProps, shadow as default, shadow };

package/dist/shadow.d.mts

@@ -1,3 +1,3 @@
-import { Tt as ShadowProps, x as BoxShadowProps, zt as TextShadowProps } from "./types-C4ogGxde.mjs";
-import { t as shadow } from "./index-Cnya5hgU.mjs";
+import { Bt as TextShadowProps, Et as ShadowProps, x as BoxShadowProps } from "./types-Cj6Jx5LX.mjs";
+import { t as shadow } from "./index-CnVRmFIZ.mjs";
 export { type BoxShadowProps, type ShadowProps, type TextShadowProps, shadow as default, shadow };

package/dist/should-forward-prop.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 const require_rolldown_runtime = require("./rolldown-runtime-VH7oDXx4.cjs");
-const require_presets = require("./presets-fJFZ74qt.cjs");
+const require_presets = require("./presets-Da2kvQPo.cjs");
 let _emotion_is_prop_valid = require("@emotion/is-prop-valid");
 _emotion_is_prop_valid = require_rolldown_runtime.__toESM(_emotion_is_prop_valid, 1);
 //#region src/should-forward-prop/should-forward-prop.ts

package/dist/should-forward-prop.mjs

@@ -1,4 +1,4 @@
-import { t as all } from "./presets-DtE_nRxp.mjs";
+import { t as all } from "./presets-B4QR0tKt.mjs";
 import isPropValid from "@emotion/is-prop-valid";
 //#region src/should-forward-prop/should-forward-prop.ts
 const memoize = (fn) => {

package/dist/space.d.cts

@@ -1,3 +1,3 @@
-import { B as GapProps, Ct as RowGapProps, Dt as SpaceProps, E as ColumnGapProps, lt as MarginProps, vt as PaddingProps } from "./types-C4ogGxde.cjs";
-import { i as space, n as margin, r as padding, t as gap } from "./index-C4BUuCOD.cjs";
+import { B as GapProps, E as ColumnGapProps, Ot as SpaceProps, ut as MarginProps, wt as RowGapProps, yt as PaddingProps } from "./types-Cj6Jx5LX.cjs";
+import { i as space, n as margin, r as padding, t as gap } from "./index-Dpqn1WzM.cjs";
 export { type ColumnGapProps, type GapProps, type MarginProps, type PaddingProps, type RowGapProps, type SpaceProps, space as default, space, gap, margin, padding };

package/dist/space.d.mts

@@ -1,3 +1,3 @@
-import { B as GapProps, Ct as RowGapProps, Dt as SpaceProps, E as ColumnGapProps, lt as MarginProps, vt as PaddingProps } from "./types-C4ogGxde.mjs";
-import { i as space, n as margin, r as padding, t as gap } from "./index-k5b5FR_o.mjs";
+import { B as GapProps, E as ColumnGapProps, Ot as SpaceProps, ut as MarginProps, wt as RowGapProps, yt as PaddingProps } from "./types-Cj6Jx5LX.mjs";
+import { i as space, n as margin, r as padding, t as gap } from "./index-BnfK4WNL.mjs";
 export { type ColumnGapProps, type GapProps, type MarginProps, type PaddingProps, type RowGapProps, type SpaceProps, space as default, space, gap, margin, padding };

package/dist/{types-C4ogGxde.d.cts → types-Cj6Jx5LX.d.cts}

@@ -339,13 +339,23 @@ interface GridTemplateAreasProps<ThemeType extends Theme = RequiredTheme> {
 interface GridAreaProps<ThemeType extends Theme = RequiredTheme> {
   gridArea?: ResponsiveValue<CSS.Property.GridArea, ThemeType>;
 }
-interface LayoutGridEntryProps<ThemeType extends Theme> {
-  columns?: number;
+interface LayoutFrameEntryProps<ThemeType extends Theme> {
   margin?: ThemeValue<'space', ThemeType> | string;
-  gutter?: ThemeValue<'space', ThemeType> | string;
   mode?: 'fluid' | 'fixed';
   maxWidth?: string;
 }
+interface LayoutGridEntryProps<ThemeType extends Theme> extends LayoutFrameEntryProps<ThemeType> {
+  columns?: number;
+  gutter?: ThemeValue<'space', ThemeType> | string;
+}
+/**
+ * Not in upstream styled-system: the page frame from `theme.layout` - its margin and max width
+ * per breakpoint, no columns. Takes the same values as {@link LayoutGridProps}, minus the
+ * column fields.
+ */
+interface LayoutFrameProps<ThemeType extends Theme = RequiredTheme> {
+  layout?: boolean | (LayoutFrameEntryProps<ThemeType> & { [key in BreakpointName<ThemeType>]?: LayoutFrameEntryProps<ThemeType>; });
+}
 /**
  * Not in upstream styled-system: the layout grid from `theme.layout` on a Grid or Flex - `true`
  * for the theme's, or an entry whose fields replace it at every breakpoint (`{ gutter: 8 }`),
@@ -354,9 +364,12 @@ interface LayoutGridEntryProps<ThemeType extends Theme> {
 interface LayoutGridProps<ThemeType extends Theme = RequiredTheme> {
   layout?: boolean | (LayoutGridEntryProps<ThemeType> & { [key in BreakpointName<ThemeType>]?: LayoutGridEntryProps<ThemeType>; });
 }
-/** Not in upstream styled-system: how many layout-grid columns the element takes. */
+/**
+ * Not in upstream styled-system: how many layout-grid columns the element takes, or `'full'`
+ * for the whole row.
+ */
 interface SpanProps<ThemeType extends Theme = RequiredTheme> {
-  span?: ResponsiveValue<number, ThemeType>;
+  span?: ResponsiveValue<number | 'full', ThemeType>;
 }
 interface GridProps<ThemeType extends Theme = RequiredTheme> extends GridGapProps<ThemeType>, GridColumnGapProps<ThemeType>, GridRowGapProps<ThemeType>, GridColumnProps<ThemeType>, GridRowProps<ThemeType>, GridAutoFlowProps<ThemeType>, GridAutoColumnsProps<ThemeType>, GridAutoRowsProps<ThemeType>, GridTemplateColumnsProps<ThemeType>, GridTemplateRowsProps<ThemeType>, GridTemplateAreasProps<ThemeType>, GridAreaProps<ThemeType> {}
 interface BoxShadowProps<ThemeType extends Theme = RequiredTheme> {
@@ -376,4 +389,4 @@ interface ColorStyleProps<ThemeType extends Theme = RequiredTheme> {
   colors?: ResponsiveValue<string, ThemeType>;
 }
 //#endregion
-export { GridTemplateRowsProps as $, FlexDirectionProps as A, TextAlignLastProps as At, GapProps as B, TextStyleProps as Bt, ButtonStyleProps as C, RowGapProps as Ct, ContainerProps as D, SpaceProps as Dt, ColumnGapProps as E, SizeProps as Et, FlexboxProps as F, TextDecorationProps as Ft, GridColumnGapProps as G, TypographyProps as Gt, GridAutoColumnsProps as H, Theme as Ht, FontFamilyProps as I, TextDecorationStyleProps as It, GridProps as J, WidthProps as Jt, GridColumnProps as K, VerticalAlignProps as Kt, FontSizeProps as L, TextDecorationThicknessProps as Lt, FlexProps as M, TextColorProps as Mt, FlexShrinkProps as N, TextDecorationColorProps as Nt, DisplayProps as O, SpanProps as Ot, FlexWrapProps as P, TextDecorationLineProps as Pt, GridTemplateColumnsProps as Q, FontStyleProps as R, TextOverflowProps as Rt, BreakpointName as S, RightProps as St, ColorStyleProps as T, ShadowProps as Tt, GridAutoFlowProps as U, ThemeValue as Ut, GridAreaProps as V, TextTransformProps as Vt, GridAutoRowsProps as W, TopProps as Wt, GridRowProps as X, GridRowGapProps as Y, ZIndexProps as Yt, GridTemplateAreasProps as Z, BorderStyleProps as _, OverflowProps as _t, BackgroundColorProps as a, LayoutProps as at, BottomProps as b, RequiredTheme as bt, BackgroundProps as c, LineHeightProps as ct, BorderBottomProps as d, MaxWidthProps as dt, HeightProps as et, BorderColorProps as f, MinHeightProps as ft, BorderRightProps as g, OrderProps as gt, BorderRadiusProps as h, OpacityProps as ht, AspectRatioProps as i, LayoutGridProps as it, FlexGrowProps as j, TextAlignProps as jt, FlexBasisProps as k, TLengthStyledSystem as kt, BackgroundRepeatProps as l, MarginProps as lt, BorderProps as m, ObjectOrArray as mt, AlignItemsProps as n, JustifyItemsProps as nt, BackgroundImageProps as o, LeftProps as ot, BorderLeftProps as p, MinWidthProps as pt, GridGapProps as q, WhiteSpaceProps as qt, AlignSelfProps as r, JustifySelfProps as rt, BackgroundPositionProps as s, LetterSpacingProps as st, AlignContentProps as t, JustifyContentProps as tt, BackgroundSizeProps as u, MaxHeightProps as ut, BorderTopProps as v, PaddingProps as vt, ColorProps as w, Scale as wt, BoxShadowProps as x, ResponsiveValue as xt, BorderWidthProps as y, PositionProps as yt, FontWeightProps as z, TextShadowProps as zt };
+export { GridTemplateRowsProps as $, FlexDirectionProps as A, TLengthStyledSystem as At, GapProps as B, TextShadowProps as Bt, ButtonStyleProps as C, RightProps as Ct, ContainerProps as D, SizeProps as Dt, ColumnGapProps as E, ShadowProps as Et, FlexboxProps as F, TextDecorationLineProps as Ft, GridColumnGapProps as G, TopProps as Gt, GridAutoColumnsProps as H, TextTransformProps as Ht, FontFamilyProps as I, TextDecorationProps as It, GridProps as J, WhiteSpaceProps as Jt, GridColumnProps as K, TypographyProps as Kt, FontSizeProps as L, TextDecorationStyleProps as Lt, FlexProps as M, TextAlignProps as Mt, FlexShrinkProps as N, TextColorProps as Nt, DisplayProps as O, SpaceProps as Ot, FlexWrapProps as P, TextDecorationColorProps as Pt, GridTemplateColumnsProps as Q, FontStyleProps as R, TextDecorationThicknessProps as Rt, BreakpointName as S, ResponsiveValue as St, ColorStyleProps as T, Scale as Tt, GridAutoFlowProps as U, Theme as Ut, GridAreaProps as V, TextStyleProps as Vt, GridAutoRowsProps as W, ThemeValue as Wt, GridRowProps as X, ZIndexProps as Xt, GridRowGapProps as Y, WidthProps as Yt, GridTemplateAreasProps as Z, BorderStyleProps as _, OrderProps as _t, BackgroundColorProps as a, LayoutGridProps as at, BottomProps as b, PositionProps as bt, BackgroundProps as c, LetterSpacingProps as ct, BorderBottomProps as d, MaxHeightProps as dt, HeightProps as et, BorderColorProps as f, MaxWidthProps as ft, BorderRightProps as g, OpacityProps as gt, BorderRadiusProps as h, ObjectOrArray as ht, AspectRatioProps as i, LayoutFrameProps as it, FlexGrowProps as j, TextAlignLastProps as jt, FlexBasisProps as k, SpanProps as kt, BackgroundRepeatProps as l, LineHeightProps as lt, BorderProps as m, MinWidthProps as mt, AlignItemsProps as n, JustifyItemsProps as nt, BackgroundImageProps as o, LayoutProps as ot, BorderLeftProps as p, MinHeightProps as pt, GridGapProps as q, VerticalAlignProps as qt, AlignSelfProps as r, JustifySelfProps as rt, BackgroundPositionProps as s, LeftProps as st, AlignContentProps as t, JustifyContentProps as tt, BackgroundSizeProps as u, MarginProps as ut, BorderTopProps as v, OverflowProps as vt, ColorProps as w, RowGapProps as wt, BoxShadowProps as x, RequiredTheme as xt, BorderWidthProps as y, PaddingProps as yt, FontWeightProps as z, TextOverflowProps as zt };

package/dist/{types-C4ogGxde.d.mts → types-Cj6Jx5LX.d.mts}

@@ -339,13 +339,23 @@ interface GridTemplateAreasProps<ThemeType extends Theme = RequiredTheme> {
 interface GridAreaProps<ThemeType extends Theme = RequiredTheme> {
   gridArea?: ResponsiveValue<CSS.Property.GridArea, ThemeType>;
 }
-interface LayoutGridEntryProps<ThemeType extends Theme> {
-  columns?: number;
+interface LayoutFrameEntryProps<ThemeType extends Theme> {
   margin?: ThemeValue<'space', ThemeType> | string;
-  gutter?: ThemeValue<'space', ThemeType> | string;
   mode?: 'fluid' | 'fixed';
   maxWidth?: string;
 }
+interface LayoutGridEntryProps<ThemeType extends Theme> extends LayoutFrameEntryProps<ThemeType> {
+  columns?: number;
+  gutter?: ThemeValue<'space', ThemeType> | string;
+}
+/**
+ * Not in upstream styled-system: the page frame from `theme.layout` - its margin and max width
+ * per breakpoint, no columns. Takes the same values as {@link LayoutGridProps}, minus the
+ * column fields.
+ */
+interface LayoutFrameProps<ThemeType extends Theme = RequiredTheme> {
+  layout?: boolean | (LayoutFrameEntryProps<ThemeType> & { [key in BreakpointName<ThemeType>]?: LayoutFrameEntryProps<ThemeType>; });
+}
 /**
  * Not in upstream styled-system: the layout grid from `theme.layout` on a Grid or Flex - `true`
  * for the theme's, or an entry whose fields replace it at every breakpoint (`{ gutter: 8 }`),
@@ -354,9 +364,12 @@ interface LayoutGridEntryProps<ThemeType extends Theme> {
 interface LayoutGridProps<ThemeType extends Theme = RequiredTheme> {
   layout?: boolean | (LayoutGridEntryProps<ThemeType> & { [key in BreakpointName<ThemeType>]?: LayoutGridEntryProps<ThemeType>; });
 }
-/** Not in upstream styled-system: how many layout-grid columns the element takes. */
+/**
+ * Not in upstream styled-system: how many layout-grid columns the element takes, or `'full'`
+ * for the whole row.
+ */
 interface SpanProps<ThemeType extends Theme = RequiredTheme> {
-  span?: ResponsiveValue<number, ThemeType>;
+  span?: ResponsiveValue<number | 'full', ThemeType>;
 }
 interface GridProps<ThemeType extends Theme = RequiredTheme> extends GridGapProps<ThemeType>, GridColumnGapProps<ThemeType>, GridRowGapProps<ThemeType>, GridColumnProps<ThemeType>, GridRowProps<ThemeType>, GridAutoFlowProps<ThemeType>, GridAutoColumnsProps<ThemeType>, GridAutoRowsProps<ThemeType>, GridTemplateColumnsProps<ThemeType>, GridTemplateRowsProps<ThemeType>, GridTemplateAreasProps<ThemeType>, GridAreaProps<ThemeType> {}
 interface BoxShadowProps<ThemeType extends Theme = RequiredTheme> {
@@ -376,4 +389,4 @@ interface ColorStyleProps<ThemeType extends Theme = RequiredTheme> {
   colors?: ResponsiveValue<string, ThemeType>;
 }
 //#endregion
-export { GridTemplateRowsProps as $, FlexDirectionProps as A, TextAlignLastProps as At, GapProps as B, TextStyleProps as Bt, ButtonStyleProps as C, RowGapProps as Ct, ContainerProps as D, SpaceProps as Dt, ColumnGapProps as E, SizeProps as Et, FlexboxProps as F, TextDecorationProps as Ft, GridColumnGapProps as G, TypographyProps as Gt, GridAutoColumnsProps as H, Theme as Ht, FontFamilyProps as I, TextDecorationStyleProps as It, GridProps as J, WidthProps as Jt, GridColumnProps as K, VerticalAlignProps as Kt, FontSizeProps as L, TextDecorationThicknessProps as Lt, FlexProps as M, TextColorProps as Mt, FlexShrinkProps as N, TextDecorationColorProps as Nt, DisplayProps as O, SpanProps as Ot, FlexWrapProps as P, TextDecorationLineProps as Pt, GridTemplateColumnsProps as Q, FontStyleProps as R, TextOverflowProps as Rt, BreakpointName as S, RightProps as St, ColorStyleProps as T, ShadowProps as Tt, GridAutoFlowProps as U, ThemeValue as Ut, GridAreaProps as V, TextTransformProps as Vt, GridAutoRowsProps as W, TopProps as Wt, GridRowProps as X, GridRowGapProps as Y, ZIndexProps as Yt, GridTemplateAreasProps as Z, BorderStyleProps as _, OverflowProps as _t, BackgroundColorProps as a, LayoutProps as at, BottomProps as b, RequiredTheme as bt, BackgroundProps as c, LineHeightProps as ct, BorderBottomProps as d, MaxWidthProps as dt, HeightProps as et, BorderColorProps as f, MinHeightProps as ft, BorderRightProps as g, OrderProps as gt, BorderRadiusProps as h, OpacityProps as ht, AspectRatioProps as i, LayoutGridProps as it, FlexGrowProps as j, TextAlignProps as jt, FlexBasisProps as k, TLengthStyledSystem as kt, BackgroundRepeatProps as l, MarginProps as lt, BorderProps as m, ObjectOrArray as mt, AlignItemsProps as n, JustifyItemsProps as nt, BackgroundImageProps as o, LeftProps as ot, BorderLeftProps as p, MinWidthProps as pt, GridGapProps as q, WhiteSpaceProps as qt, AlignSelfProps as r, JustifySelfProps as rt, BackgroundPositionProps as s, LetterSpacingProps as st, AlignContentProps as t, JustifyContentProps as tt, BackgroundSizeProps as u, MaxHeightProps as ut, BorderTopProps as v, PaddingProps as vt, ColorProps as w, Scale as wt, BoxShadowProps as x, ResponsiveValue as xt, BorderWidthProps as y, PositionProps as yt, FontWeightProps as z, TextShadowProps as zt };
+export { GridTemplateRowsProps as $, FlexDirectionProps as A, TLengthStyledSystem as At, GapProps as B, TextShadowProps as Bt, ButtonStyleProps as C, RightProps as Ct, ContainerProps as D, SizeProps as Dt, ColumnGapProps as E, ShadowProps as Et, FlexboxProps as F, TextDecorationLineProps as Ft, GridColumnGapProps as G, TopProps as Gt, GridAutoColumnsProps as H, TextTransformProps as Ht, FontFamilyProps as I, TextDecorationProps as It, GridProps as J, WhiteSpaceProps as Jt, GridColumnProps as K, TypographyProps as Kt, FontSizeProps as L, TextDecorationStyleProps as Lt, FlexProps as M, TextAlignProps as Mt, FlexShrinkProps as N, TextColorProps as Nt, DisplayProps as O, SpaceProps as Ot, FlexWrapProps as P, TextDecorationColorProps as Pt, GridTemplateColumnsProps as Q, FontStyleProps as R, TextDecorationThicknessProps as Rt, BreakpointName as S, ResponsiveValue as St, ColorStyleProps as T, Scale as Tt, GridAutoFlowProps as U, Theme as Ut, GridAreaProps as V, TextStyleProps as Vt, GridAutoRowsProps as W, ThemeValue as Wt, GridRowProps as X, ZIndexProps as Xt, GridRowGapProps as Y, WidthProps as Yt, GridTemplateAreasProps as Z, BorderStyleProps as _, OrderProps as _t, BackgroundColorProps as a, LayoutGridProps as at, BottomProps as b, PositionProps as bt, BackgroundProps as c, LetterSpacingProps as ct, BorderBottomProps as d, MaxHeightProps as dt, HeightProps as et, BorderColorProps as f, MaxWidthProps as ft, BorderRightProps as g, OpacityProps as gt, BorderRadiusProps as h, ObjectOrArray as ht, AspectRatioProps as i, LayoutFrameProps as it, FlexGrowProps as j, TextAlignLastProps as jt, FlexBasisProps as k, SpanProps as kt, BackgroundRepeatProps as l, LineHeightProps as lt, BorderProps as m, MinWidthProps as mt, AlignItemsProps as n, JustifyItemsProps as nt, BackgroundImageProps as o, LayoutProps as ot, BorderLeftProps as p, MinHeightProps as pt, GridGapProps as q, VerticalAlignProps as qt, AlignSelfProps as r, JustifySelfProps as rt, BackgroundPositionProps as s, LeftProps as st, AlignContentProps as t, JustifyContentProps as tt, BackgroundSizeProps as u, MarginProps as ut, BorderTopProps as v, OverflowProps as vt, ColorProps as w, RowGapProps as wt, BoxShadowProps as x, RequiredTheme as xt, BorderWidthProps as y, PaddingProps as yt, FontWeightProps as z, TextOverflowProps as zt };

package/dist/typography.d.cts

@@ -1,3 +1,3 @@
-import { Gt as TypographyProps, I as FontFamilyProps, L as FontSizeProps, R as FontStyleProps, Rt as TextOverflowProps, ct as LineHeightProps, jt as TextAlignProps, qt as WhiteSpaceProps, st as LetterSpacingProps, z as FontWeightProps } from "./types-C4ogGxde.cjs";
-import { t as typography } from "./index-Bq7LA-5J.cjs";
+import { I as FontFamilyProps, Jt as WhiteSpaceProps, Kt as TypographyProps, L as FontSizeProps, Mt as TextAlignProps, R as FontStyleProps, ct as LetterSpacingProps, lt as LineHeightProps, z as FontWeightProps, zt as TextOverflowProps } from "./types-Cj6Jx5LX.cjs";
+import { t as typography } from "./index-PoT1oV9X.cjs";
 export { type FontFamilyProps, type FontSizeProps, type FontStyleProps, type FontWeightProps, type LetterSpacingProps, type LineHeightProps, type TextAlignProps, type TextOverflowProps, type TypographyProps, type WhiteSpaceProps, typography as default, typography };

package/dist/typography.d.mts

@@ -1,3 +1,3 @@
-import { Gt as TypographyProps, I as FontFamilyProps, L as FontSizeProps, R as FontStyleProps, Rt as TextOverflowProps, ct as LineHeightProps, jt as TextAlignProps, qt as WhiteSpaceProps, st as LetterSpacingProps, z as FontWeightProps } from "./types-C4ogGxde.mjs";
-import { t as typography } from "./index-CkSwZa-Z.mjs";
+import { I as FontFamilyProps, Jt as WhiteSpaceProps, Kt as TypographyProps, L as FontSizeProps, Mt as TextAlignProps, R as FontStyleProps, ct as LetterSpacingProps, lt as LineHeightProps, z as FontWeightProps, zt as TextOverflowProps } from "./types-Cj6Jx5LX.mjs";
+import { t as typography } from "./index-BvyUTPw5.mjs";
 export { type FontFamilyProps, type FontSizeProps, type FontStyleProps, type FontWeightProps, type LetterSpacingProps, type LineHeightProps, type TextAlignProps, type TextOverflowProps, type TypographyProps, type WhiteSpaceProps, typography as default, typography };

package/dist/variant.d.cts

@@ -1,3 +1,3 @@
-import { Bt as TextStyleProps, C as ButtonStyleProps, T as ColorStyleProps } from "./types-C4ogGxde.cjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-BgcnUGws.cjs";
+import { C as ButtonStyleProps, T as ColorStyleProps, Vt as TextStyleProps } from "./types-Cj6Jx5LX.cjs";
+import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-B7YL_4tg.cjs";
 export { type ButtonStyleProps, type ColorStyleProps, type TextStyleProps, VariantArgs, VariantOptions, buttonStyle, colorStyle, variant as default, variant, textStyle };

package/dist/variant.d.mts

@@ -1,3 +1,3 @@
-import { Bt as TextStyleProps, C as ButtonStyleProps, T as ColorStyleProps } from "./types-C4ogGxde.mjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-Cow4kTN2.mjs";
+import { C as ButtonStyleProps, T as ColorStyleProps, Vt as TextStyleProps } from "./types-Cj6Jx5LX.mjs";
+import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-4_E8pg8R.mjs";
 export { type ButtonStyleProps, type ColorStyleProps, type TextStyleProps, VariantArgs, VariantOptions, buttonStyle, colorStyle, variant as default, variant, textStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/styled-system",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.2",
   "description": "Maintained, first-class-TypeScript rewrite of styled-system - responsive, theme-aware style props for CSS-in-JS. Drop-in replacement for styled-system v5.",
   "keywords": [
     "styled-system",