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

package/dist/background.d.cts

@@ -1,3 +1,3 @@
-import { t as background } from "./index-Bwpwvg1h.cjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cv5WjcVA.cjs";
+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";
 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-DKz4zEeT.mjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cv5WjcVA.mjs";
+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";
 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-Cv5WjcVA.cjs";
-import { t as border } from "./index-D5xp7RWT.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-C4ogGxde.cjs";
+import { t as border } from "./index-BolQQ69W.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-Cv5WjcVA.mjs";
-import { t as border } from "./index-CQWZd4iQ.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-C4ogGxde.mjs";
+import { t as border } from "./index-z2p2DCxL.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-Cv5WjcVA.cjs";
-import { t as color } from "./index-ByDfI1go.cjs";
+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";
 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-Cv5WjcVA.mjs";
-import { t as color } from "./index-90_abc05.mjs";
+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";
 export { type BackgroundColorProps, type ColorProps, type OpacityProps, type TextColorProps, color, color as default };

package/dist/core.cjs

@@ -56,33 +56,30 @@ const parseResponsiveObject = (keyed, sx, scale, raw, props) => {
 	}
 	return styles;
 };
+const queriesFor = (cache, theme) => {
+	const breakpoints = get(theme, "breakpoints", defaults.breakpoints);
+	if (theme?.disableStyledSystemCache || cache.breakpoints !== breakpoints || !cache.queries) {
+		cache.breakpoints = breakpoints;
+		cache.queries = require_media.responsiveQueries(breakpoints);
+	}
+	return cache.queries;
+};
 const createParser = (config) => {
 	const cache = {};
 	const parse = ((props) => {
 		let styles = {};
 		let shouldSort = false;
-		const isCacheDisabled = props.theme?.disableStyledSystemCache;
 		for (const key in props) {
 			if (!config[key]) continue;
 			const sx = config[key];
 			const raw = props[key];
 			const scale = get(props.theme, sx.scale, sx.defaults);
 			if (typeof raw === "object") {
-				const breakpoints = get(props.theme, "breakpoints", defaults.breakpoints);
-				if (isCacheDisabled || cache.breakpoints !== breakpoints || !cache.queries) {
-					cache.breakpoints = breakpoints;
-					cache.queries = require_media.responsiveQueries(breakpoints);
-				}
-				const queries = cache.queries;
-				if (Array.isArray(raw)) {
-					styles = merge(styles, parseResponsiveStyle(queries.array, sx, scale, raw, props));
-					shouldSort = true;
-					continue;
-				}
-				if (raw !== null) {
-					styles = merge(styles, parseResponsiveObject(queries.keyed, sx, scale, raw, props));
-					shouldSort = true;
-				}
+				if (raw === null) continue;
+				const { array, keyed } = queriesFor(cache, props.theme);
+				const responsive = Array.isArray(raw) ? parseResponsiveStyle(array, sx, scale, raw, props) : parseResponsiveObject(keyed, sx, scale, raw, props);
+				styles = merge(styles, responsive);
+				shouldSort = true;
 				continue;
 			}
 			Object.assign(styles, sx(raw, scale, props));

package/dist/core.mjs

@@ -55,33 +55,30 @@ const parseResponsiveObject = (keyed, sx, scale, raw, props) => {
 	}
 	return styles;
 };
+const queriesFor = (cache, theme) => {
+	const breakpoints = get(theme, "breakpoints", defaults.breakpoints);
+	if (theme?.disableStyledSystemCache || cache.breakpoints !== breakpoints || !cache.queries) {
+		cache.breakpoints = breakpoints;
+		cache.queries = responsiveQueries(breakpoints);
+	}
+	return cache.queries;
+};
 const createParser = (config) => {
 	const cache = {};
 	const parse = ((props) => {
 		let styles = {};
 		let shouldSort = false;
-		const isCacheDisabled = props.theme?.disableStyledSystemCache;
 		for (const key in props) {
 			if (!config[key]) continue;
 			const sx = config[key];
 			const raw = props[key];
 			const scale = get(props.theme, sx.scale, sx.defaults);
 			if (typeof raw === "object") {
-				const breakpoints = get(props.theme, "breakpoints", defaults.breakpoints);
-				if (isCacheDisabled || cache.breakpoints !== breakpoints || !cache.queries) {
-					cache.breakpoints = breakpoints;
-					cache.queries = responsiveQueries(breakpoints);
-				}
-				const queries = cache.queries;
-				if (Array.isArray(raw)) {
-					styles = merge(styles, parseResponsiveStyle(queries.array, sx, scale, raw, props));
-					shouldSort = true;
-					continue;
-				}
-				if (raw !== null) {
-					styles = merge(styles, parseResponsiveObject(queries.keyed, sx, scale, raw, props));
-					shouldSort = true;
-				}
+				if (raw === null) continue;
+				const { array, keyed } = queriesFor(cache, props.theme);
+				const responsive = Array.isArray(raw) ? parseResponsiveStyle(array, sx, scale, raw, props) : parseResponsiveObject(keyed, sx, scale, raw, props);
+				styles = merge(styles, responsive);
+				shouldSort = true;
 				continue;
 			}
 			Object.assign(styles, sx(raw, scale, props));

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-Cv5WjcVA.cjs";
-import { t as flexbox } from "./index-CQyvhO-h.cjs";
+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";
 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-Cv5WjcVA.mjs";
-import { t as flexbox } from "./index-aRomguCQ.mjs";
+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";
 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-CYjL4-gb.mjs → grid-BdKZQBHF.mjs}

@@ -61,15 +61,20 @@ const declarations = (theme, display, entry) => {
 };
 /**
 * The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
-* margin, gutter, fluid or fixed), inherited mobile-first. An entry in `value` replaces the
-* theme's at the breakpoint it names only; the next breakpoint is back to the theme. Every
-* written block carries the full set, so no block inherits a stale `max-width`.
+* 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") => {
 	if (!value) return {};
 	const breakpoints = get(theme, "breakpoints", {});
 	const layout = get(theme, "layout", {});
-	const overrides = typeof value === "object" ? value : {};
+	const fields = typeof value === "object" ? Object.entries(value) : [];
+	const everywhere = Object.fromEntries(fields.filter(([, field]) => typeof field !== "object"));
+	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",
@@ -80,7 +85,11 @@ const layoutGridStyles = (theme, value, display = "grid") => {
 	let overridden = false;
 	for (const key of Object.keys(breakpoints)) {
 		const layer = layout[key]?.content;
-		const override = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
+		const named = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
+		const override = hasEverywhere || named ? {
+			...everywhere,
+			...named
+		} : void 0;
 		themed = {
 			...themed,
 			...layer
@@ -108,8 +117,8 @@ const layoutGrid = layoutParser("grid");
 /** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
 const layoutFlex = layoutParser("flex");
 const flexSpan = (n) => {
-	const columns = "var(--layout-columns, 1)";
-	const gutter = "var(--layout-gutter, 0px)";
+	const columns = "var(--layout-columns)";
+	const gutter = "var(--layout-gutter)";
 	return `0 0 calc((100% - (${columns} - 1) * ${gutter}) / ${columns} * ${n} + ${n - 1} * ${gutter})`;
 };
 /**

package/dist/{grid-BlMUPDJM.cjs → grid-CAlwl8LZ.cjs}

@@ -62,15 +62,20 @@ const declarations = (theme, display, entry) => {
 };
 /**
 * The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
-* margin, gutter, fluid or fixed), inherited mobile-first. An entry in `value` replaces the
-* theme's at the breakpoint it names only; the next breakpoint is back to the theme. Every
-* written block carries the full set, so no block inherits a stale `max-width`.
+* 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") => {
 	if (!value) return {};
 	const breakpoints = require_core.get(theme, "breakpoints", {});
 	const layout = require_core.get(theme, "layout", {});
-	const overrides = typeof value === "object" ? value : {};
+	const fields = typeof value === "object" ? Object.entries(value) : [];
+	const everywhere = Object.fromEntries(fields.filter(([, field]) => typeof field !== "object"));
+	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",
@@ -81,7 +86,11 @@ const layoutGridStyles = (theme, value, display = "grid") => {
 	let overridden = false;
 	for (const key of Object.keys(breakpoints)) {
 		const layer = layout[key]?.content;
-		const override = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
+		const named = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
+		const override = hasEverywhere || named ? {
+			...everywhere,
+			...named
+		} : void 0;
 		themed = {
 			...themed,
 			...layer
@@ -109,8 +118,8 @@ const layoutGrid = layoutParser("grid");
 /** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
 const layoutFlex = layoutParser("flex");
 const flexSpan = (n) => {
-	const columns = "var(--layout-columns, 1)";
-	const gutter = "var(--layout-gutter, 0px)";
+	const columns = "var(--layout-columns)";
+	const gutter = "var(--layout-gutter)";
 	return `0 0 calc((100% - (${columns} - 1) * ${gutter}) / ${columns} * ${n} + ${n - 1} * ${gutter})`;
 };
 /**

package/dist/grid.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_grid = require("./grid-BlMUPDJM.cjs");
+const require_grid = require("./grid-CAlwl8LZ.cjs");
 exports.default = require_grid.grid;
 exports.grid = require_grid.grid;
 exports.layoutFlex = require_grid.layoutFlex;

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-Cv5WjcVA.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-CXK27dY_.cjs";
+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 };

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-Cv5WjcVA.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-D7IZ8-Zq.mjs";
+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 };

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-CYjL4-gb.mjs";
+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 };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/{index-DKz4zEeT.d.mts → index-CVxHdrQd.d.mts}

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

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

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

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

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

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

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

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

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

package/dist/{index-D7IZ8-Zq.d.mts → index-Cy51GZK8.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser, l as StyleObject } from "./index-IulNhyDt.mjs";
-import "./types-Cv5WjcVA.mjs";
+import "./types-C4ogGxde.mjs";
 //#region src/grid/grid.d.ts
 declare const grid: Parser;
 //#endregion
@@ -16,15 +16,20 @@ interface LayoutGridEntry {
   mode?: 'fluid' | 'fixed';
   maxWidth?: string | number;
 }
-/** `true` for the theme's layout grid, or entries for named breakpoints that replace it there. */
-type LayoutGridValue = boolean | Record<string, LayoutGridEntry>;
+/**
+ * `true` for the theme's layout grid, or an entry: its fields replace the theme's at every
+ * breakpoint, and entries under breakpoint names replace it at that breakpoint only.
+ */
+type LayoutGridValue = boolean | Record<string, LayoutGridEntry | LayoutGridEntry[keyof LayoutGridEntry]>;
 /** The container a layout grid is drawn on: column tracks, or a wrapping flex row. */
 type LayoutGridDisplay = 'grid' | 'flex';
 /**
  * The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
- * margin, gutter, fluid or fixed), inherited mobile-first. An entry in `value` replaces the
- * theme's at the breakpoint it names only; the next breakpoint is back to the theme. Every
- * written block carries the full set, so no block inherits a stale `max-width`.
+ * 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`.
  */
 declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
 /** The `layout` prop on a grid container - see {@link layoutGridStyles}. */

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { a as Parser, l as StyleObject } from "./index-iVqAMF2L.cjs";
-import "./types-Cv5WjcVA.cjs";
+import "./types-C4ogGxde.cjs";
 //#region src/grid/grid.d.ts
 declare const grid: Parser;
 //#endregion
@@ -16,15 +16,20 @@ interface LayoutGridEntry {
   mode?: 'fluid' | 'fixed';
   maxWidth?: string | number;
 }
-/** `true` for the theme's layout grid, or entries for named breakpoints that replace it there. */
-type LayoutGridValue = boolean | Record<string, LayoutGridEntry>;
+/**
+ * `true` for the theme's layout grid, or an entry: its fields replace the theme's at every
+ * breakpoint, and entries under breakpoint names replace it at that breakpoint only.
+ */
+type LayoutGridValue = boolean | Record<string, LayoutGridEntry | LayoutGridEntry[keyof LayoutGridEntry]>;
 /** The container a layout grid is drawn on: column tracks, or a wrapping flex row. */
 type LayoutGridDisplay = 'grid' | 'flex';
 /**
  * The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
- * margin, gutter, fluid or fixed), inherited mobile-first. An entry in `value` replaces the
- * theme's at the breakpoint it names only; the next breakpoint is back to the theme. Every
- * written block carries the full set, so no block inherits a stale `max-width`.
+ * 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`.
  */
 declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
 /** The `layout` prop on a grid container - see {@link layoutGridStyles}. */

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-Cv5WjcVA.mjs";
+import "./types-C4ogGxde.mjs";
 //#region src/border/border.d.ts
 declare const border: 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-BlMUPDJM.cjs");
+const require_grid = require("./grid-CAlwl8LZ.cjs");
 const require_layout = require("./layout-D3pG7vBp.cjs");
 const require_position = require("./position-zWvCE4hD.cjs");
 const require_typography = require("./typography-7jHZXqtc.cjs");

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-Bwpwvg1h.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-Cv5WjcVA.cjs";
-import { t as border } from "./index-D5xp7RWT.cjs";
-import { t as color } from "./index-ByDfI1go.cjs";
-import { t as flexbox } from "./index-CQyvhO-h.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-CXK27dY_.cjs";
-import { i as space, n as margin, r as padding, t as gap } from "./index-CgJzEbXW.cjs";
-import { t as layout } from "./index-Bxh1FNcS.cjs";
-import { t as typography } from "./index-BmyL5qR7.cjs";
-import { t as position } from "./index-D2v_oJEm.cjs";
-import { t as shadow } from "./index-D1mRMWDm.cjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-Csbxj8Yo.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";
 //#region src/style/style.d.ts
 interface StyleOptions {
   prop: string;

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-DKz4zEeT.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-Cv5WjcVA.mjs";
-import { t as border } from "./index-CQWZd4iQ.mjs";
-import { t as color } from "./index-90_abc05.mjs";
-import { t as flexbox } from "./index-aRomguCQ.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-D7IZ8-Zq.mjs";
-import { i as space, n as margin, r as padding, t as gap } from "./index-BQPI7z-B.mjs";
-import { t as layout } from "./index-pzogdlkS.mjs";
-import { t as typography } from "./index-nfjmLzHF.mjs";
-import { t as position } from "./index-MbcUN6uf.mjs";
-import { t as shadow } from "./index-C1IdMVtQ.mjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-ClbGlQxq.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";
 //#region src/style/style.d.ts
 interface StyleOptions {
   prop: string;

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-CYjL4-gb.mjs";
+import { a as grid, i as span, n as layoutGrid, r as layoutGridStyles, t as layoutFlex } from "./grid-BdKZQBHF.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/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-Cv5WjcVA.cjs";
-import { t as layout } from "./index-Bxh1FNcS.cjs";
+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";
 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-Cv5WjcVA.mjs";
-import { t as layout } from "./index-pzogdlkS.mjs";
+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";
 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-Cv5WjcVA.cjs";
-import { t as position } from "./index-D2v_oJEm.cjs";
+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";
 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-Cv5WjcVA.mjs";
-import { t as position } from "./index-MbcUN6uf.mjs";
+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";
 export { type BottomProps, type LeftProps, type PositionProps, type RightProps, type TopProps, type ZIndexProps, position as default, position };

package/dist/{presets-DsxPfpSE.mjs → presets-DtE_nRxp.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-CYjL4-gb.mjs";
+import { a as grid, i as span } from "./grid-BdKZQBHF.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-KURYP1_7.cjs → presets-fJFZ74qt.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-BlMUPDJM.cjs");
+const require_grid = require("./grid-CAlwl8LZ.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-BlMUPDJM.cjs");
+const require_grid = require("./grid-CAlwl8LZ.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-CYjL4-gb.mjs";
+import { a as grid } from "./grid-BdKZQBHF.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-KURYP1_7.cjs");
+const require_presets = require("./presets-fJFZ74qt.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-DsxPfpSE.mjs";
+import { t as all } from "./presets-DtE_nRxp.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-Cv5WjcVA.cjs";
-import { t as shadow } from "./index-D1mRMWDm.cjs";
+import { Tt as ShadowProps, x as BoxShadowProps, zt as TextShadowProps } from "./types-C4ogGxde.cjs";
+import { t as shadow } from "./index-o6j0bywN.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-Cv5WjcVA.mjs";
-import { t as shadow } from "./index-C1IdMVtQ.mjs";
+import { Tt as ShadowProps, x as BoxShadowProps, zt as TextShadowProps } from "./types-C4ogGxde.mjs";
+import { t as shadow } from "./index-Cnya5hgU.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-KURYP1_7.cjs");
+const require_presets = require("./presets-fJFZ74qt.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-DsxPfpSE.mjs";
+import { t as all } from "./presets-DtE_nRxp.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-Cv5WjcVA.cjs";
-import { i as space, n as margin, r as padding, t as gap } from "./index-CgJzEbXW.cjs";
+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";
 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-Cv5WjcVA.mjs";
-import { i as space, n as margin, r as padding, t as gap } from "./index-BQPI7z-B.mjs";
+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";
 export { type ColumnGapProps, type GapProps, type MarginProps, type PaddingProps, type RowGapProps, type SpaceProps, space as default, space, gap, margin, padding };

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

@@ -339,19 +339,20 @@ 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;
+  margin?: ThemeValue<'space', ThemeType> | string;
+  gutter?: ThemeValue<'space', ThemeType> | string;
+  mode?: 'fluid' | 'fixed';
+  maxWidth?: string;
+}
 /**
  * Not in upstream styled-system: the layout grid from `theme.layout` on a Grid or Flex - `true`
- * for the theme's, or entries for named breakpoints that replace it there only
- * (`{ lg: { columns: 16 } }`).
+ * for the theme's, or an entry whose fields replace it at every breakpoint (`{ gutter: 8 }`),
+ * with entries under breakpoint names that replace it there only (`{ lg: { columns: 16 } }`).
  */
 interface LayoutGridProps<ThemeType extends Theme = RequiredTheme> {
-  layout?: boolean | { [key in BreakpointName<ThemeType>]?: {
-    columns?: number;
-    margin?: ThemeValue<'space', ThemeType> | string;
-    gutter?: ThemeValue<'space', ThemeType> | string;
-    mode?: 'fluid' | 'fixed';
-    maxWidth?: string;
-  }; };
+  layout?: boolean | (LayoutGridEntryProps<ThemeType> & { [key in BreakpointName<ThemeType>]?: LayoutGridEntryProps<ThemeType>; });
 }
 /** Not in upstream styled-system: how many layout-grid columns the element takes. */
 interface SpanProps<ThemeType extends Theme = RequiredTheme> {

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

@@ -339,19 +339,20 @@ 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;
+  margin?: ThemeValue<'space', ThemeType> | string;
+  gutter?: ThemeValue<'space', ThemeType> | string;
+  mode?: 'fluid' | 'fixed';
+  maxWidth?: string;
+}
 /**
  * Not in upstream styled-system: the layout grid from `theme.layout` on a Grid or Flex - `true`
- * for the theme's, or entries for named breakpoints that replace it there only
- * (`{ lg: { columns: 16 } }`).
+ * for the theme's, or an entry whose fields replace it at every breakpoint (`{ gutter: 8 }`),
+ * with entries under breakpoint names that replace it there only (`{ lg: { columns: 16 } }`).
  */
 interface LayoutGridProps<ThemeType extends Theme = RequiredTheme> {
-  layout?: boolean | { [key in BreakpointName<ThemeType>]?: {
-    columns?: number;
-    margin?: ThemeValue<'space', ThemeType> | string;
-    gutter?: ThemeValue<'space', ThemeType> | string;
-    mode?: 'fluid' | 'fixed';
-    maxWidth?: string;
-  }; };
+  layout?: boolean | (LayoutGridEntryProps<ThemeType> & { [key in BreakpointName<ThemeType>]?: LayoutGridEntryProps<ThemeType>; });
 }
 /** Not in upstream styled-system: how many layout-grid columns the element takes. */
 interface SpanProps<ThemeType extends Theme = RequiredTheme> {

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-Cv5WjcVA.cjs";
-import { t as typography } from "./index-BmyL5qR7.cjs";
+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";
 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-Cv5WjcVA.mjs";
-import { t as typography } from "./index-nfjmLzHF.mjs";
+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";
 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-Cv5WjcVA.cjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-Csbxj8Yo.cjs";
+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";
 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-Cv5WjcVA.mjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-ClbGlQxq.mjs";
+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";
 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.0",
+  "version": "6.0.0-alpha.1",
   "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",