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

package/dist/background.d.cts

@@ -1,3 +1,3 @@
-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";
+import { t as background } from "./index-Di8gHXKt.cjs";
+import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cl2haWqC.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-Xh-lC-ge.mjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cj6Jx5LX.mjs";
+import { t as background } from "./index-mSyoGVmz.mjs";
+import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cl2haWqC.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-Cj6Jx5LX.cjs";
-import { t as border } from "./index-C8kegqfi.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-Cl2haWqC.cjs";
+import { t as border } from "./index-BqZjtkzF.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-Cj6Jx5LX.mjs";
-import { t as border } from "./index-BgSrVqHI.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-Cl2haWqC.mjs";
+import { t as border } from "./index-DXURX22V.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 { Nt as TextColorProps, a as BackgroundColorProps, gt as OpacityProps, w as ColorProps } from "./types-Cj6Jx5LX.cjs";
-import { t as color } from "./index-DOzfQDfG.cjs";
+import { Nt as TextColorProps, a as BackgroundColorProps, gt as OpacityProps, w as ColorProps } from "./types-Cl2haWqC.cjs";
+import { t as color } from "./index-DwJSd01p.cjs";
 export { type BackgroundColorProps, type ColorProps, type OpacityProps, type TextColorProps, color, color as default };

package/dist/color.d.mts

@@ -1,3 +1,3 @@
-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";
+import { Nt as TextColorProps, a as BackgroundColorProps, gt as OpacityProps, w as ColorProps } from "./types-Cl2haWqC.mjs";
+import { t as color } from "./index-BTZ4J3Ql.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, _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";
+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-Cl2haWqC.cjs";
+import { t as flexbox } from "./index-BUX09rTq.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, _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";
+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-Cl2haWqC.mjs";
+import { t as flexbox } from "./index-BZs9fI-P.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-D6l0ftY0.mjs

@@ -0,0 +1,170 @@
+import { o as responsiveQueries } from "./media-Bho3l7WK.mjs";
+import { get, system } from "./core.mjs";
+//#region src/grid/grid.ts
+const spaceScale = [
+	0,
+	4,
+	8,
+	16,
+	32,
+	64,
+	128,
+	256,
+	512
+];
+const grid = system({
+	gridGap: {
+		property: "gridGap",
+		scale: "space",
+		defaultScale: spaceScale
+	},
+	gridColumnGap: {
+		property: "gridColumnGap",
+		scale: "space",
+		defaultScale: spaceScale
+	},
+	gridRowGap: {
+		property: "gridRowGap",
+		scale: "space",
+		defaultScale: spaceScale
+	},
+	gridColumn: true,
+	gridRow: true,
+	gridAutoFlow: true,
+	gridAutoColumns: true,
+	gridAutoRows: true,
+	gridTemplateColumns: true,
+	gridTemplateRows: true,
+	gridTemplateAreas: true,
+	gridArea: true
+});
+//#endregion
+//#region src/grid/layoutGrid.ts
+const spaceValue = (theme, value) => {
+	const resolved = get(theme, `space.${value}`, value);
+	return typeof resolved === "number" ? `${resolved}px` : resolved;
+};
+const frameDeclarations = (theme, { margin, mode, maxWidth }) => {
+	const width = mode === "fixed" && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : void 0;
+	return {
+		boxSizing: "border-box",
+		width: "100%",
+		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
+		maxWidth: width ?? "none",
+		marginInline: width === void 0 ? 0 : "auto"
+	};
+};
+const gridDeclarations = (theme, { columns, gutter }) => ({
+	gridTemplateColumns: columns === void 0 ? void 0 : `repeat(${columns}, minmax(0, 1fr))`,
+	columnGap: gutter === void 0 ? void 0 : spaceValue(theme, gutter)
+});
+const declarations = (theme, part, entry) => {
+	const styles = part === "frame" ? frameDeclarations(theme, entry) : gridDeclarations(theme, entry);
+	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
+};
+const gapAsGutter = (breakpoints, gap) => {
+	if (gap === void 0 || gap === null) return {
+		field: {},
+		entries: {}
+	};
+	if (typeof gap !== "object") return {
+		field: { gutter: gap },
+		entries: {}
+	};
+	const names = Object.keys(breakpoints);
+	const pairs = Array.isArray(gap) ? gap.map((value, index) => [names[index], value]) : Object.entries(gap);
+	const entries = {};
+	for (const [name, value] of pairs) if (name !== void 0 && value !== null) entries[name] = { gutter: value };
+	return {
+		field: {},
+		entries
+	};
+};
+const layoutStyles = (theme, value, part, gap) => {
+	if (!value) return {};
+	const breakpoints = get(theme, "breakpoints", {});
+	const layout = get(theme, "layout", {});
+	const fields = typeof value === "object" ? Object.entries(value) : [];
+	const named = Object.fromEntries(fields.filter(([, field]) => typeof field === "object"));
+	const fromGap = gapAsGutter(breakpoints, gap);
+	const everywhere = {
+		...Object.fromEntries(fields.filter(([, field]) => typeof field !== "object")),
+		...fromGap.field
+	};
+	const hasEverywhere = Object.keys(everywhere).length > 0;
+	const { keyed } = responsiveQueries(breakpoints);
+	const styles = part === "grid" ? { display: "grid" } : {};
+	let themed = {};
+	let carried = {};
+	Object.keys(breakpoints).forEach((key, index) => {
+		const layer = layout[key]?.content;
+		const entry = Object.hasOwn(named, key) ? named[key] : void 0;
+		const gapEntry = Object.hasOwn(fromGap.entries, key) ? fromGap.entries[key] : void 0;
+		themed = {
+			...themed,
+			...layer
+		};
+		carried = {
+			...carried,
+			...entry,
+			...gapEntry
+		};
+		if (layer || entry || gapEntry || index === 0 && hasEverywhere) {
+			const block = declarations(theme, part, {
+				...themed,
+				...everywhere,
+				...carried
+			});
+			const media = keyed.get(key);
+			if (media) styles[media] = block;
+			else Object.assign(styles, block);
+		}
+	});
+	return styles;
+};
+/**
+* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
+* margin, gutter, fluid or fixed), mobile-first. A field in `value` replaces the theme's at
+* every breakpoint (`{ maxWidth: '1280px' }`); an entry under a breakpoint name replaces it
+* from that breakpoint up, on top of those fields (`{ lg: { columns: 16 } }`). `gap` - the
+* element's own `gap` / `columnGap` - sets the gutter the same way, single or responsive; where
+* it is not set, the theme's gutter applies. Every written block carries the full set, so no
+* block inherits a stale `max-width`. Rows take `rowGap` (or `gap`'s row half), never the layout.
+*/
+const layoutGridStyles = (theme, value, gap) => {
+	const grid = layoutStyles(theme, value, "grid", gap);
+	const frame = layoutStyles(theme, value, "frame");
+	for (const [key, block] of Object.entries(frame)) grid[key] = key.startsWith("@") ? {
+		...grid[key],
+		...block
+	} : block;
+	return grid;
+};
+/**
+* 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. Every View-based component
+* takes it; compose it with `layoutGrid` for the columns.
+*/
+const layoutFrame = Object.assign((props) => layoutStyles(props.theme, props.layout, "frame"), {
+	config: {},
+	propNames: ["layout"],
+	cache: {}
+});
+/**
+* The `layout` prop's columns on a grid container: the tracks and the gutter. The gutter is the
+* element's own `columnGap` or `gap` where it sets one, the theme's elsewhere - so `column-gap`
+* has a single source and an explicit gap is never silently replaced.
+*/
+const layoutGrid = Object.assign((props) => layoutStyles(props.theme, props.layout, "grid", props.columnGap ?? props.gap), {
+	config: {},
+	propNames: ["layout"],
+	cache: {}
+});
+/**
+* The `span` prop: how many columns of a grid an element takes - `grid-column: span N` - or
+* `span="full"` for the whole row whatever the column count. Responsive like any prop:
+* `span={{ xs: 'full', md: 6 }}`.
+*/
+const span = system({ span: (n) => ({ gridColumn: n === "full" ? "1 / -1" : `span ${n}` }) });
+//#endregion
+export { grid as a, span as i, layoutGrid as n, layoutGridStyles as r, layoutFrame as t };

package/dist/grid-NyoJxJGh.cjs

@@ -0,0 +1,200 @@
+const require_media = require("./media-DSJdRy_k.cjs");
+const require_core = require("./core.cjs");
+//#region src/grid/grid.ts
+const spaceScale = [
+	0,
+	4,
+	8,
+	16,
+	32,
+	64,
+	128,
+	256,
+	512
+];
+const config = {
+	gridGap: {
+		property: "gridGap",
+		scale: "space",
+		defaultScale: spaceScale
+	},
+	gridColumnGap: {
+		property: "gridColumnGap",
+		scale: "space",
+		defaultScale: spaceScale
+	},
+	gridRowGap: {
+		property: "gridRowGap",
+		scale: "space",
+		defaultScale: spaceScale
+	},
+	gridColumn: true,
+	gridRow: true,
+	gridAutoFlow: true,
+	gridAutoColumns: true,
+	gridAutoRows: true,
+	gridTemplateColumns: true,
+	gridTemplateRows: true,
+	gridTemplateAreas: true,
+	gridArea: true
+};
+const grid = require_core.system(config);
+//#endregion
+//#region src/grid/layoutGrid.ts
+const spaceValue = (theme, value) => {
+	const resolved = require_core.get(theme, `space.${value}`, value);
+	return typeof resolved === "number" ? `${resolved}px` : resolved;
+};
+const frameDeclarations = (theme, { margin, mode, maxWidth }) => {
+	const width = mode === "fixed" && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : void 0;
+	return {
+		boxSizing: "border-box",
+		width: "100%",
+		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
+		maxWidth: width ?? "none",
+		marginInline: width === void 0 ? 0 : "auto"
+	};
+};
+const gridDeclarations = (theme, { columns, gutter }) => ({
+	gridTemplateColumns: columns === void 0 ? void 0 : `repeat(${columns}, minmax(0, 1fr))`,
+	columnGap: gutter === void 0 ? void 0 : spaceValue(theme, gutter)
+});
+const declarations = (theme, part, entry) => {
+	const styles = part === "frame" ? frameDeclarations(theme, entry) : gridDeclarations(theme, entry);
+	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
+};
+const gapAsGutter = (breakpoints, gap) => {
+	if (gap === void 0 || gap === null) return {
+		field: {},
+		entries: {}
+	};
+	if (typeof gap !== "object") return {
+		field: { gutter: gap },
+		entries: {}
+	};
+	const names = Object.keys(breakpoints);
+	const pairs = Array.isArray(gap) ? gap.map((value, index) => [names[index], value]) : Object.entries(gap);
+	const entries = {};
+	for (const [name, value] of pairs) if (name !== void 0 && value !== null) entries[name] = { gutter: value };
+	return {
+		field: {},
+		entries
+	};
+};
+const layoutStyles = (theme, value, part, gap) => {
+	if (!value) return {};
+	const breakpoints = require_core.get(theme, "breakpoints", {});
+	const layout = require_core.get(theme, "layout", {});
+	const fields = typeof value === "object" ? Object.entries(value) : [];
+	const named = Object.fromEntries(fields.filter(([, field]) => typeof field === "object"));
+	const fromGap = gapAsGutter(breakpoints, gap);
+	const everywhere = {
+		...Object.fromEntries(fields.filter(([, field]) => typeof field !== "object")),
+		...fromGap.field
+	};
+	const hasEverywhere = Object.keys(everywhere).length > 0;
+	const { keyed } = require_media.responsiveQueries(breakpoints);
+	const styles = part === "grid" ? { display: "grid" } : {};
+	let themed = {};
+	let carried = {};
+	Object.keys(breakpoints).forEach((key, index) => {
+		const layer = layout[key]?.content;
+		const entry = Object.hasOwn(named, key) ? named[key] : void 0;
+		const gapEntry = Object.hasOwn(fromGap.entries, key) ? fromGap.entries[key] : void 0;
+		themed = {
+			...themed,
+			...layer
+		};
+		carried = {
+			...carried,
+			...entry,
+			...gapEntry
+		};
+		if (layer || entry || gapEntry || index === 0 && hasEverywhere) {
+			const block = declarations(theme, part, {
+				...themed,
+				...everywhere,
+				...carried
+			});
+			const media = keyed.get(key);
+			if (media) styles[media] = block;
+			else Object.assign(styles, block);
+		}
+	});
+	return styles;
+};
+/**
+* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
+* margin, gutter, fluid or fixed), mobile-first. A field in `value` replaces the theme's at
+* every breakpoint (`{ maxWidth: '1280px' }`); an entry under a breakpoint name replaces it
+* from that breakpoint up, on top of those fields (`{ lg: { columns: 16 } }`). `gap` - the
+* element's own `gap` / `columnGap` - sets the gutter the same way, single or responsive; where
+* it is not set, the theme's gutter applies. Every written block carries the full set, so no
+* block inherits a stale `max-width`. Rows take `rowGap` (or `gap`'s row half), never the layout.
+*/
+const layoutGridStyles = (theme, value, gap) => {
+	const grid = layoutStyles(theme, value, "grid", gap);
+	const frame = layoutStyles(theme, value, "frame");
+	for (const [key, block] of Object.entries(frame)) grid[key] = key.startsWith("@") ? {
+		...grid[key],
+		...block
+	} : block;
+	return grid;
+};
+/**
+* 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. Every View-based component
+* takes it; compose it with `layoutGrid` for the columns.
+*/
+const layoutFrame = Object.assign((props) => layoutStyles(props.theme, props.layout, "frame"), {
+	config: {},
+	propNames: ["layout"],
+	cache: {}
+});
+/**
+* The `layout` prop's columns on a grid container: the tracks and the gutter. The gutter is the
+* element's own `columnGap` or `gap` where it sets one, the theme's elsewhere - so `column-gap`
+* has a single source and an explicit gap is never silently replaced.
+*/
+const layoutGrid = Object.assign((props) => layoutStyles(props.theme, props.layout, "grid", props.columnGap ?? props.gap), {
+	config: {},
+	propNames: ["layout"],
+	cache: {}
+});
+/**
+* The `span` prop: how many columns of a grid an element takes - `grid-column: span N` - or
+* `span="full"` for the whole row whatever the column count. Responsive like any prop:
+* `span={{ xs: 'full', md: 6 }}`.
+*/
+const span = require_core.system({ span: (n) => ({ gridColumn: n === "full" ? "1 / -1" : `span ${n}` }) });
+//#endregion
+Object.defineProperty(exports, "grid", {
+	enumerable: true,
+	get: function() {
+		return grid;
+	}
+});
+Object.defineProperty(exports, "layoutFrame", {
+	enumerable: true,
+	get: function() {
+		return layoutFrame;
+	}
+});
+Object.defineProperty(exports, "layoutGrid", {
+	enumerable: true,
+	get: function() {
+		return layoutGrid;
+	}
+});
+Object.defineProperty(exports, "layoutGridStyles", {
+	enumerable: true,
+	get: function() {
+		return layoutGridStyles;
+	}
+});
+Object.defineProperty(exports, "span", {
+	enumerable: true,
+	get: function() {
+		return span;
+	}
+});

package/dist/grid.cjs

@@ -2,10 +2,9 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_grid = require("./grid-Cv-XGWcr.cjs");
+const require_grid = require("./grid-NyoJxJGh.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;

package/dist/grid.d.cts

@@ -1,3 +1,3 @@
-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 };
+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-Cl2haWqC.cjs";
+import { a as layoutGrid, c as grid, i as layoutFrame, n as LayoutGridGap, o as layoutGridStyles, r as LayoutGridValue, s as span, t as LayoutGridEntry } from "./index-BZI1xwTA.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, LayoutGridEntry, LayoutGridGap, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, 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, 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 };
+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-Cl2haWqC.mjs";
+import { a as layoutGrid, c as grid, i as layoutFrame, n as LayoutGridGap, o as layoutGridStyles, r as LayoutGridValue, s as span, t as LayoutGridEntry } from "./index-Np-KvYhu.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, LayoutGridEntry, LayoutGridGap, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, layoutFrame, layoutGrid, layoutGridStyles, span };

package/dist/grid.mjs

@@ -1,2 +1,2 @@
-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 };
+import { a as grid, i as span, n as layoutGrid, r as layoutGridStyles, t as layoutFrame } from "./grid-D6l0ftY0.mjs";
+export { grid as default, grid, layoutFrame, layoutGrid, layoutGridStyles, span };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/index-BZI1xwTA.d.cts

@@ -0,0 +1,55 @@
+import { a as Parser, l as StyleObject } from "./index-iVqAMF2L.cjs";
+import "./types-Cl2haWqC.cjs";
+//#region src/grid/grid.d.ts
+declare const grid: Parser;
+//#endregion
+//#region src/grid/layoutGrid.d.ts
+/** The layout grid at one breakpoint - the `content` part of a `theme.layout` entry. */
+interface LayoutGridEntry {
+  /** Equal columns. */
+  columns?: number;
+  /** Inline padding - a `theme.space` key or a CSS length. */
+  margin?: string | number;
+  /** Gap between columns - a `theme.space` key or a CSS length. Set per element with `gap`. */
+  gutter?: string | number;
+  /** `fluid` spans the space; `fixed` is a container centred at `maxWidth`. */
+  mode?: 'fluid' | 'fixed';
+  maxWidth?: string | number;
+}
+/**
+ * `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 from that breakpoint up.
+ */
+type LayoutGridValue = boolean | Record<string, LayoutGridEntry | LayoutGridEntry[keyof LayoutGridEntry]>;
+/** A `gap` / `columnGap` value: one value, an array by breakpoint position, or an object by name. */
+type LayoutGridGap = string | number | null | undefined | Array<string | number | null> | Record<string, string | number | null>;
+/**
+ * The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
+ * margin, gutter, fluid or fixed), mobile-first. A field in `value` replaces the theme's at
+ * every breakpoint (`{ maxWidth: '1280px' }`); an entry under a breakpoint name replaces it
+ * from that breakpoint up, on top of those fields (`{ lg: { columns: 16 } }`). `gap` - the
+ * element's own `gap` / `columnGap` - sets the gutter the same way, single or responsive; where
+ * it is not set, the theme's gutter applies. Every written block carries the full set, so no
+ * block inherits a stale `max-width`. Rows take `rowGap` (or `gap`'s row half), never the layout.
+ */
+declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, gap?: LayoutGridGap) => StyleObject;
+/**
+ * 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. Every View-based component
+ * takes it; compose it with `layoutGrid` for the columns.
+ */
+declare const layoutFrame: Parser;
+/**
+ * The `layout` prop's columns on a grid container: the tracks and the gutter. The gutter is the
+ * element's own `columnGap` or `gap` where it sets one, the theme's elsewhere - so `column-gap`
+ * has a single source and an explicit gap is never silently replaced.
+ */
+declare const layoutGrid: Parser;
+/**
+ * The `span` prop: how many columns of a grid an element takes - `grid-column: span N` - or
+ * `span="full"` for the whole row whatever the column count. Responsive like any prop:
+ * `span={{ xs: 'full', md: 6 }}`.
+ */
+declare const span: Parser;
+//#endregion
+export { layoutGrid as a, grid as c, layoutFrame as i, LayoutGridGap as n, layoutGridStyles as o, LayoutGridValue as r, span as s, LayoutGridEntry as t };

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

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

package/dist/{index-kkyge37R.d.mts → index-Bhpc-68J.d.mts}

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

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

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

package/dist/{index-PoT1oV9X.d.cts → index-C56_VCbD.d.cts}

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

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

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

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

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

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

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

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

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