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

package/dist/background.d.cts

@@ -1,3 +1,3 @@
-import { t as background } from "./index-Q8q5VND1.cjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-B0SNbm6V.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-C-B6-_Ku.mjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-B0SNbm6V.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-B0SNbm6V.cjs";
-import { t as border } from "./index-C9CxJ5Zn.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-B0SNbm6V.mjs";
-import { t as border } from "./index-D9dwDAhC.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 { C as ColorProps, Ot as TextColorProps, a as BackgroundColorProps, ft as OpacityProps } from "./types-B0SNbm6V.cjs";
-import { t as color } from "./index-Cd_CcxMh.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 { C as ColorProps, Ot as TextColorProps, a as BackgroundColorProps, ft as OpacityProps } from "./types-B0SNbm6V.mjs";
-import { t as color } from "./index-CJT-n3Vq.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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_media = require("./media-BoIPXBPV.cjs");
+const require_media = require("./media-DSJdRy_k.cjs");
 //#region src/core/core.ts
 const merge = (a, b) => {
 	const result = {
@@ -12,10 +12,10 @@ const merge = (a, b) => {
 	}
 	return result;
 };
-const sort = (obj, media) => {
+const sort = (obj, order) => {
 	const next = {};
-	for (const key in obj) if (!media.includes(key)) next[key] = obj[key];
-	for (const key of media) if (key && key in obj) next[key] = obj[key];
+	for (const key in obj) if (!order.includes(key)) next[key] = obj[key];
+	for (const key of order) if (key in obj) next[key] = obj[key];
 	return next;
 };
 const defaults = { breakpoints: [
@@ -43,52 +43,48 @@ const parseResponsiveStyle = (mediaQueries, sx, scale, raw, props) => {
 	});
 	return styles;
 };
-const parseResponsiveObject = (breakpoints, sx, scale, raw, props) => {
+const parseResponsiveObject = (keyed, sx, scale, raw, props) => {
 	const styles = {};
 	for (const key in raw) {
-		const breakpoint = Object.hasOwn(breakpoints, key) ? breakpoints[key] : void 0;
-		const value = raw[key];
-		const style = sx(value, scale, props);
-		if (breakpoint !== void 0) {
-			const media = require_media.createMediaQuery(breakpoint);
-			Object.assign(styles, { [media]: {
-				...styles[media],
-				...style
-			} });
-		} else Object.assign(styles, style);
+		const media = keyed.get(key);
+		const style = sx(raw[key], scale, props);
+		if (media) Object.assign(styles, { [media]: {
+			...styles[media],
+			...style
+		} });
+		else Object.assign(styles, style);
 	}
 	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 = { media: [] };
+	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.breakpoints = breakpoints;
-					cache.media = [null, ...Object.values(breakpoints).map(require_media.createMediaQuery)];
-				}
-				if (Array.isArray(raw)) {
-					styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
-					continue;
-				}
-				if (raw !== null) {
-					styles = merge(styles, parseResponsiveObject(breakpoints, 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));
 		}
-		if (shouldSort) styles = sort(styles, cache.media);
+		if (shouldSort && cache.queries) styles = sort(styles, cache.queries.order);
 		return styles;
 	});
 	parse.config = config;
@@ -145,9 +141,13 @@ const compose = (...parsers) => {
 //#endregion
 exports.breakpointQueries = require_media.breakpointQueries;
 exports.compose = compose;
+exports.containerKey = require_media.containerKey;
+exports.createContainerQueries = require_media.createContainerQueries;
+exports.createMediaHelpers = require_media.createMediaHelpers;
 exports.createMediaQuery = require_media.createMediaQuery;
 exports.createParser = createParser;
 exports.createStyleFunction = createStyleFunction;
 exports.get = get;
 exports.merge = merge;
+exports.responsiveQueries = require_media.responsiveQueries;
 exports.system = system;

package/dist/core.d.cts

@@ -1,3 +1,3 @@
-import { n as breakpointQueries, r as createMediaQuery, t as Breakpoints } from "./media-np0uvO4C.cjs";
-import { _ as merge, a as Parser, c as StyleFn, d as Theme, 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, t as CSSObject, u as SystemConfig, v as styleFn, y as system } from "./index-BYkO78Xl.cjs";
-export { Breakpoints, CSSObject, Config, ConfigFunction, ConfigStyle, Parser, ParserConfig, Props, StyleFn, StyleObject, SystemConfig, Theme, Transform, breakpointQueries, compose, createMediaQuery, createParser, createStyleFunction, get, merge, styleFn, system };
+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 { _ as merge, a as Parser, c as StyleFn, d as Theme, 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, t as CSSObject, u as SystemConfig, v as styleFn, y as system } from "./index-iVqAMF2L.cjs";
+export { BreakpointInput, Breakpoints, CSSObject, Config, ConfigFunction, ConfigStyle, ContainerQueries, Parser, ParserConfig, Props, QueryHelpers, ResponsiveQueries, StyleFn, StyleObject, SystemConfig, Theme, Transform, breakpointQueries, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, get, merge, responsiveQueries, styleFn, system };

package/dist/core.d.mts

@@ -1,3 +1,3 @@
-import { n as breakpointQueries, r as createMediaQuery, t as Breakpoints } from "./media-np0uvO4C.mjs";
-import { _ as merge, a as Parser, c as StyleFn, d as Theme, 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, t as CSSObject, u as SystemConfig, v as styleFn, y as system } from "./index-BXP1-da3.mjs";
-export { Breakpoints, CSSObject, Config, ConfigFunction, ConfigStyle, Parser, ParserConfig, Props, StyleFn, StyleObject, SystemConfig, Theme, Transform, breakpointQueries, compose, createMediaQuery, createParser, createStyleFunction, get, merge, styleFn, system };
+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 { _ as merge, a as Parser, c as StyleFn, d as Theme, 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, t as CSSObject, u as SystemConfig, v as styleFn, y as system } from "./index-IulNhyDt.mjs";
+export { BreakpointInput, Breakpoints, CSSObject, Config, ConfigFunction, ConfigStyle, ContainerQueries, Parser, ParserConfig, Props, QueryHelpers, ResponsiveQueries, StyleFn, StyleObject, SystemConfig, Theme, Transform, breakpointQueries, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, get, merge, responsiveQueries, styleFn, system };

package/dist/core.mjs

@@ -1,4 +1,4 @@
-import { n as createMediaQuery, t as breakpointQueries } from "./media-B8UpEDpY.mjs";
+import { a as createMediaQuery, i as createMediaHelpers, n as containerKey, o as responsiveQueries, r as createContainerQueries, t as breakpointQueries } from "./media-Bho3l7WK.mjs";
 //#region src/core/core.ts
 const merge = (a, b) => {
 	const result = {
@@ -11,10 +11,10 @@ const merge = (a, b) => {
 	}
 	return result;
 };
-const sort = (obj, media) => {
+const sort = (obj, order) => {
 	const next = {};
-	for (const key in obj) if (!media.includes(key)) next[key] = obj[key];
-	for (const key of media) if (key && key in obj) next[key] = obj[key];
+	for (const key in obj) if (!order.includes(key)) next[key] = obj[key];
+	for (const key of order) if (key in obj) next[key] = obj[key];
 	return next;
 };
 const defaults = { breakpoints: [
@@ -42,52 +42,48 @@ const parseResponsiveStyle = (mediaQueries, sx, scale, raw, props) => {
 	});
 	return styles;
 };
-const parseResponsiveObject = (breakpoints, sx, scale, raw, props) => {
+const parseResponsiveObject = (keyed, sx, scale, raw, props) => {
 	const styles = {};
 	for (const key in raw) {
-		const breakpoint = Object.hasOwn(breakpoints, key) ? breakpoints[key] : void 0;
-		const value = raw[key];
-		const style = sx(value, scale, props);
-		if (breakpoint !== void 0) {
-			const media = createMediaQuery(breakpoint);
-			Object.assign(styles, { [media]: {
-				...styles[media],
-				...style
-			} });
-		} else Object.assign(styles, style);
+		const media = keyed.get(key);
+		const style = sx(raw[key], scale, props);
+		if (media) Object.assign(styles, { [media]: {
+			...styles[media],
+			...style
+		} });
+		else Object.assign(styles, style);
 	}
 	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 = { media: [] };
+	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.breakpoints = breakpoints;
-					cache.media = [null, ...Object.values(breakpoints).map(createMediaQuery)];
-				}
-				if (Array.isArray(raw)) {
-					styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
-					continue;
-				}
-				if (raw !== null) {
-					styles = merge(styles, parseResponsiveObject(breakpoints, 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));
 		}
-		if (shouldSort) styles = sort(styles, cache.media);
+		if (shouldSort && cache.queries) styles = sort(styles, cache.queries.order);
 		return styles;
 	});
 	parse.config = config;
@@ -142,4 +138,4 @@ const compose = (...parsers) => {
 	return createParser(config);
 };
 //#endregion
-export { breakpointQueries, compose, createMediaQuery, createParser, createStyleFunction, get, merge, system };
+export { breakpointQueries, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, get, merge, responsiveQueries, system };

package/dist/{css-CunBKyMl.mjs → css-Ba4jdXOq.mjs}

@@ -1,4 +1,4 @@
-import { n as createMediaQuery } from "./media-B8UpEDpY.mjs";
+import { o as responsiveQueries } from "./media-Bho3l7WK.mjs";
 //#region src/css/css.ts
 const get = (obj, key, def, p = 0, undef) => {
 	const path = typeof key === "string" ? key.split(".") : [key];
@@ -155,29 +155,37 @@ const transforms = [
 	...acc,
 	[curr]: positiveOrNegative
 }), {});
+const isResponsiveObject = (value, keyed) => typeof value === "object" && value !== null && !Array.isArray(value) && Object.keys(value).length > 0 && Object.keys(value).every((key) => keyed.has(key));
 const responsive = (styles) => (theme) => {
 	const next = {};
+	const blocks = /* @__PURE__ */ new Map();
 	const breakpoints = get(theme, "breakpoints", defaultBreakpoints);
-	const mediaQueries = [null, ...Object.values(breakpoints).map(createMediaQuery)];
+	const { array, keyed, order } = responsiveQueries(breakpoints);
+	const place = (key, media, value) => {
+		if (!media) {
+			next[key] = value;
+			return;
+		}
+		const block = blocks.get(media) ?? {};
+		blocks.set(media, block);
+		if (value != null) block[key] = value;
+	};
 	for (const key in styles) {
 		const value = typeof styles[key] === "function" ? styles[key](theme) : styles[key];
 		if (value == null) continue;
-		if (!Array.isArray(value)) {
-			next[key] = value;
-			continue;
-		}
-		const slice = value.slice(0, mediaQueries.length);
-		for (let i = 0; i < slice.length; i++) {
-			const media = mediaQueries[i];
-			if (!media) {
-				next[key] = slice[i];
-				continue;
-			}
-			const block = next[media] || {};
-			next[media] = block;
-			if (slice[i] == null) continue;
-			block[key] = slice[i];
-		}
+		if (Array.isArray(value)) value.slice(0, array.length).forEach((item, i) => place(key, array[i], item));
+		else if (isResponsiveObject(value, keyed)) for (const [name, item] of Object.entries(value)) place(key, keyed.get(name), item);
+		else next[key] = value;
+	}
+	for (const media of order) {
+		const block = blocks.get(media);
+		if (!block) continue;
+		const own = next[media];
+		delete next[media];
+		next[media] = {
+			...own,
+			...block
+		};
 	}
 	return next;
 };

package/dist/{css-BnnO16Cw.cjs → css-D1zAlDVz.cjs}

@@ -1,4 +1,4 @@
-const require_media = require("./media-BoIPXBPV.cjs");
+const require_media = require("./media-DSJdRy_k.cjs");
 //#region src/css/css.ts
 const get = (obj, key, def, p = 0, undef) => {
 	const path = typeof key === "string" ? key.split(".") : [key];
@@ -155,29 +155,37 @@ const transforms = [
 	...acc,
 	[curr]: positiveOrNegative
 }), {});
+const isResponsiveObject = (value, keyed) => typeof value === "object" && value !== null && !Array.isArray(value) && Object.keys(value).length > 0 && Object.keys(value).every((key) => keyed.has(key));
 const responsive = (styles) => (theme) => {
 	const next = {};
+	const blocks = /* @__PURE__ */ new Map();
 	const breakpoints = get(theme, "breakpoints", defaultBreakpoints);
-	const mediaQueries = [null, ...Object.values(breakpoints).map(require_media.createMediaQuery)];
+	const { array, keyed, order } = require_media.responsiveQueries(breakpoints);
+	const place = (key, media, value) => {
+		if (!media) {
+			next[key] = value;
+			return;
+		}
+		const block = blocks.get(media) ?? {};
+		blocks.set(media, block);
+		if (value != null) block[key] = value;
+	};
 	for (const key in styles) {
 		const value = typeof styles[key] === "function" ? styles[key](theme) : styles[key];
 		if (value == null) continue;
-		if (!Array.isArray(value)) {
-			next[key] = value;
-			continue;
-		}
-		const slice = value.slice(0, mediaQueries.length);
-		for (let i = 0; i < slice.length; i++) {
-			const media = mediaQueries[i];
-			if (!media) {
-				next[key] = slice[i];
-				continue;
-			}
-			const block = next[media] || {};
-			next[media] = block;
-			if (slice[i] == null) continue;
-			block[key] = slice[i];
-		}
+		if (Array.isArray(value)) value.slice(0, array.length).forEach((item, i) => place(key, array[i], item));
+		else if (isResponsiveObject(value, keyed)) for (const [name, item] of Object.entries(value)) place(key, keyed.get(name), item);
+		else next[key] = value;
+	}
+	for (const media of order) {
+		const block = blocks.get(media);
+		if (!block) continue;
+		const own = next[media];
+		delete next[media];
+		next[media] = {
+			...own,
+			...block
+		};
 	}
 	return next;
 };

package/dist/css.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_css = require("./css-BnnO16Cw.cjs");
+const require_css = require("./css-D1zAlDVz.cjs");
 exports.css = require_css.css;
 exports.default = require_css.css;
 exports.get = require_css.get;

package/dist/css.d.cts

@@ -1,4 +1,4 @@
-import { t as Breakpoints } from "./media-np0uvO4C.cjs";
+import { n as Breakpoints } from "./media-CfYDomHt.cjs";
 //#region src/css/css.d.ts
 type CSSObject = Record<string, unknown>;
 interface CssTheme {

package/dist/css.d.mts

@@ -1,4 +1,4 @@
-import { t as Breakpoints } from "./media-np0uvO4C.mjs";
+import { n as Breakpoints } from "./media-CfYDomHt.mjs";
 //#region src/css/css.d.ts
 type CSSObject = Record<string, unknown>;
 interface CssTheme {

package/dist/css.mjs

@@ -1,2 +1,2 @@
-import { n as get, r as responsive, t as css } from "./css-CunBKyMl.mjs";
+import { n as get, r as responsive, t as css } from "./css-Ba4jdXOq.mjs";
 export { css, css as default, get, responsive };

package/dist/flexbox.d.cts

@@ -1,3 +1,3 @@
-import { $ as JustifyContentProps, A as FlexProps, D as FlexBasisProps, M as FlexWrapProps, N as FlexboxProps, O as FlexDirectionProps, et as JustifyItemsProps, j as FlexShrinkProps, k as FlexGrowProps, n as AlignItemsProps, pt as OrderProps, r as AlignSelfProps, t as AlignContentProps, tt as JustifySelfProps } from "./types-B0SNbm6V.cjs";
-import { t as flexbox } from "./index-CIccdXWj.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 { $ as JustifyContentProps, A as FlexProps, D as FlexBasisProps, M as FlexWrapProps, N as FlexboxProps, O as FlexDirectionProps, et as JustifyItemsProps, j as FlexShrinkProps, k as FlexGrowProps, n as AlignItemsProps, pt as OrderProps, r as AlignSelfProps, t as AlignContentProps, tt as JustifySelfProps } from "./types-B0SNbm6V.mjs";
-import { t as flexbox } from "./index-DcRfFIAZ.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-BdKZQBHF.mjs

@@ -0,0 +1,135 @@
+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 declarations = (theme, display, entry) => {
+	const { columns, margin, gutter, mode, maxWidth } = entry;
+	const isFixed = mode === "fixed";
+	const gap = gutter === void 0 ? void 0 : spaceValue(theme, gutter);
+	const styles = {
+		"--layout-columns": columns,
+		"--layout-gutter": gap,
+		gridTemplateColumns: display === "grid" && columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : void 0,
+		columnGap: gap,
+		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
+		maxWidth: isFixed && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : "none",
+		marginInline: isFixed ? "auto" : 0
+	};
+	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
+};
+/**
+* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
+* margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
+* theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
+* there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
+* breakpoint is back to the theme. Every written block carries the full set, so no block
+* inherits a stale `max-width`.
+*/
+const layoutGridStyles = (theme, value, display = "grid") => {
+	if (!value) return {};
+	const breakpoints = get(theme, "breakpoints", {});
+	const layout = get(theme, "layout", {});
+	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",
+		flexDirection: "row",
+		flexWrap: "wrap"
+	};
+	let themed = {};
+	let overridden = false;
+	for (const key of Object.keys(breakpoints)) {
+		const layer = layout[key]?.content;
+		const named = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
+		const override = hasEverywhere || named ? {
+			...everywhere,
+			...named
+		} : void 0;
+		themed = {
+			...themed,
+			...layer
+		};
+		if (layer || override || overridden) {
+			const block = declarations(theme, display, {
+				...themed,
+				...override
+			});
+			const media = keyed.get(key);
+			if (media) styles[media] = block;
+			else Object.assign(styles, block);
+		}
+		overridden = override !== void 0;
+	}
+	return styles;
+};
+const layoutParser = (display) => Object.assign((props) => layoutGridStyles(props.theme, props.layout, display), {
+	config: {},
+	propNames: ["layout"],
+	cache: {}
+});
+/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
+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)";
+	const gutter = "var(--layout-gutter)";
+	return `0 0 calc((100% - (${columns} - 1) * ${gutter}) / ${columns} * ${n} + ${n - 1} * ${gutter})`;
+};
+/**
+* The `span` prop: how many layout-grid columns an element takes. It writes both
+* `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
+* `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
+* other's property. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
+*/
+const span = system({ span: (n) => ({
+	gridColumn: `span ${n}`,
+	flex: flexSpan(n)
+}) });
+//#endregion
+export { grid as a, span as i, layoutGrid as n, layoutGridStyles as r, layoutFlex as t };