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

package/dist/background.d.cts

@@ -1,3 +1,3 @@
-import { t as background } from "./index-BBuQfHYC.cjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-B52XAdkx.cjs";
+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";
 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-yC71Yo0d.mjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-B52XAdkx.mjs";
+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";
 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-B52XAdkx.cjs";
-import { t as border } from "./index-Daclwf93.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-Cv5WjcVA.cjs";
+import { t as border } from "./index-D5xp7RWT.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-B52XAdkx.mjs";
-import { t as border } from "./index-DdlTo1c6.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-Cv5WjcVA.mjs";
+import { t as border } from "./index-CQWZd4iQ.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-B52XAdkx.cjs";
-import { t as color } from "./index-RXhfbqjT.cjs";
+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";
 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-B52XAdkx.mjs";
-import { t as color } from "./index-BNnm8JPL.mjs";
+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";
 export { type BackgroundColorProps, type ColorProps, type OpacityProps, type TextColorProps, color, color as default };

package/dist/core.cjs

@@ -1,4 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_media = require("./media-DSJdRy_k.cjs");
 //#region src/core/core.ts
 const merge = (a, b) => {
 	const result = {
@@ -11,14 +12,10 @@ const merge = (a, b) => {
 	}
 	return result;
 };
-const sort = (obj) => {
+const sort = (obj, order) => {
 	const next = {};
-	Object.keys(obj).sort((a, b) => a.localeCompare(b, void 0, {
-		numeric: true,
-		sensitivity: "base"
-	})).forEach((key) => {
-		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: [
@@ -26,7 +23,6 @@ const defaults = { breakpoints: [
 	52,
 	64
 ].map((n) => n + "em") };
-const createMediaQuery = (n) => `@media screen and (min-width: ${n})`;
 const getValue = (n, scale) => get(scale, n, n);
 const get = (obj, key, def, p = 0, undef) => {
 	const path = typeof key === "string" ? key.split(".") : [key];
@@ -47,19 +43,16 @@ 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 = breakpoints[key];
-		const value = raw[key];
-		const style = sx(value, scale, props);
-		if (breakpoint) {
-			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;
 };
@@ -75,21 +68,26 @@ const createParser = (config) => {
 			const raw = props[key];
 			const scale = get(props.theme, sx.scale, sx.defaults);
 			if (typeof raw === "object") {
-				cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
+				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)) {
-					cache.media = !isCacheDisabled && cache.media || [null, ...cache.breakpoints.map(createMediaQuery)];
-					styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
+					styles = merge(styles, parseResponsiveStyle(queries.array, sx, scale, raw, props));
+					shouldSort = true;
 					continue;
 				}
 				if (raw !== null) {
-					styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
+					styles = merge(styles, parseResponsiveObject(queries.keyed, sx, scale, raw, props));
 					shouldSort = true;
 				}
 				continue;
 			}
 			Object.assign(styles, sx(raw, scale, props));
 		}
-		if (shouldSort) styles = sort(styles);
+		if (shouldSort && cache.queries) styles = sort(styles, cache.queries.order);
 		return styles;
 	});
 	parse.config = config;
@@ -144,9 +142,15 @@ const compose = (...parsers) => {
 	return createParser(config);
 };
 //#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,2 +1,3 @@
-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-C0SM54dQ.cjs";
-export { CSSObject, Config, ConfigFunction, ConfigStyle, Parser, ParserConfig, Props, StyleFn, StyleObject, SystemConfig, Theme, Transform, compose, 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,2 +1,3 @@
-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-C0SM54dQ.mjs";
-export { CSSObject, Config, ConfigFunction, ConfigStyle, Parser, ParserConfig, Props, StyleFn, StyleObject, SystemConfig, Theme, Transform, compose, 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,3 +1,4 @@
+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 = {
@@ -10,14 +11,10 @@ const merge = (a, b) => {
 	}
 	return result;
 };
-const sort = (obj) => {
+const sort = (obj, order) => {
 	const next = {};
-	Object.keys(obj).sort((a, b) => a.localeCompare(b, void 0, {
-		numeric: true,
-		sensitivity: "base"
-	})).forEach((key) => {
-		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: [
@@ -25,7 +22,6 @@ const defaults = { breakpoints: [
 	52,
 	64
 ].map((n) => n + "em") };
-const createMediaQuery = (n) => `@media screen and (min-width: ${n})`;
 const getValue = (n, scale) => get(scale, n, n);
 const get = (obj, key, def, p = 0, undef) => {
 	const path = typeof key === "string" ? key.split(".") : [key];
@@ -46,19 +42,16 @@ 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 = breakpoints[key];
-		const value = raw[key];
-		const style = sx(value, scale, props);
-		if (breakpoint) {
-			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;
 };
@@ -74,21 +67,26 @@ const createParser = (config) => {
 			const raw = props[key];
 			const scale = get(props.theme, sx.scale, sx.defaults);
 			if (typeof raw === "object") {
-				cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
+				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)) {
-					cache.media = !isCacheDisabled && cache.media || [null, ...cache.breakpoints.map(createMediaQuery)];
-					styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
+					styles = merge(styles, parseResponsiveStyle(queries.array, sx, scale, raw, props));
+					shouldSort = true;
 					continue;
 				}
 				if (raw !== null) {
-					styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
+					styles = merge(styles, parseResponsiveObject(queries.keyed, sx, scale, raw, props));
 					shouldSort = true;
 				}
 				continue;
 			}
 			Object.assign(styles, sx(raw, scale, props));
 		}
-		if (shouldSort) styles = sort(styles);
+		if (shouldSort && cache.queries) styles = sort(styles, cache.queries.order);
 		return styles;
 	});
 	parse.config = config;
@@ -143,4 +141,4 @@ const compose = (...parsers) => {
 	return createParser(config);
 };
 //#endregion
-export { compose, createParser, createStyleFunction, get, merge, system };
+export { breakpointQueries, compose, containerKey, createContainerQueries, createMediaHelpers, createMediaQuery, createParser, createStyleFunction, get, merge, responsiveQueries, system };

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

@@ -1,3 +1,4 @@
+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];
@@ -154,28 +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 mediaQueries = [null, ...get(theme, "breakpoints", defaultBreakpoints).map((n) => `@media screen and (min-width: ${n})`)];
+	const blocks = /* @__PURE__ */ new Map();
+	const breakpoints = get(theme, "breakpoints", defaultBreakpoints);
+	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-CeNnKyGm.cjs → css-D1zAlDVz.cjs}

@@ -1,3 +1,4 @@
+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];
@@ -154,28 +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 mediaQueries = [null, ...get(theme, "breakpoints", defaultBreakpoints).map((n) => `@media screen and (min-width: ${n})`)];
+	const blocks = /* @__PURE__ */ new Map();
+	const breakpoints = get(theme, "breakpoints", defaultBreakpoints);
+	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-CeNnKyGm.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,7 +1,8 @@
+import { n as Breakpoints } from "./media-CfYDomHt.cjs";
 //#region src/css/css.d.ts
 type CSSObject = Record<string, unknown>;
 interface CssTheme {
-  breakpoints?: (string | number)[];
+  breakpoints?: Breakpoints;
   [key: string]: unknown;
 }
 type CssArg = CSSObject | ((theme: CssTheme) => CSSObject);

package/dist/css.d.mts

@@ -1,7 +1,8 @@
+import { n as Breakpoints } from "./media-CfYDomHt.mjs";
 //#region src/css/css.d.ts
 type CSSObject = Record<string, unknown>;
 interface CssTheme {
-  breakpoints?: (string | number)[];
+  breakpoints?: Breakpoints;
   [key: string]: unknown;
 }
 type CssArg = CSSObject | ((theme: CssTheme) => CSSObject);

package/dist/css.mjs

@@ -1,2 +1,2 @@
-import { n as get, r as responsive, t as css } from "./css-BTuRmXCo.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-B52XAdkx.cjs";
-import { t as flexbox } from "./index-CpDyBw8z.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-Cv5WjcVA.cjs";
+import { t as flexbox } from "./index-CQyvhO-h.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-B52XAdkx.mjs";
-import { t as flexbox } from "./index-DuI1XGHT.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-Cv5WjcVA.mjs";
+import { t as flexbox } from "./index-aRomguCQ.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-BlMUPDJM.cjs

@@ -0,0 +1,156 @@
+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 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. 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`.
+*/
+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 { keyed } = require_media.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 override = Object.hasOwn(overrides, key) ? overrides[key] : 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, 1)";
+	const gutter = "var(--layout-gutter, 0px)";
+	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 = require_core.system({ span: (n) => ({
+	gridColumn: `span ${n}`,
+	flex: flexSpan(n)
+}) });
+//#endregion
+Object.defineProperty(exports, "grid", {
+	enumerable: true,
+	get: function() {
+		return grid;
+	}
+});
+Object.defineProperty(exports, "layoutFlex", {
+	enumerable: true,
+	get: function() {
+		return layoutFlex;
+	}
+});
+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;
+	}
+});