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

package/dist/grid-CYjL4-gb.mjs

@@ -0,0 +1,126 @@
+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. 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 = get(theme, "breakpoints", {});
+	const layout = get(theme, "layout", {});
+	const overrides = typeof value === "object" ? value : {};
+	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 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 = 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 };

package/dist/grid.cjs

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

package/dist/grid.d.cts

@@ -1,3 +1,3 @@
-import { B as GridAutoColumnsProps, G as GridGapProps, H as GridAutoRowsProps, J as GridRowProps, K as GridProps, U as GridColumnGapProps, V as GridAutoFlowProps, W as GridColumnProps, X as GridTemplateColumnsProps, Y as GridTemplateAreasProps, Z as GridTemplateRowsProps, q as GridRowGapProps, z as GridAreaProps } from "./types-B0SNbm6V.cjs";
-import { t as grid } from "./index-0k2kzlK5.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, grid as default, grid };
+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";
+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 { B as GridAutoColumnsProps, G as GridGapProps, H as GridAutoRowsProps, J as GridRowProps, K as GridProps, U as GridColumnGapProps, V as GridAutoFlowProps, W as GridColumnProps, X as GridTemplateColumnsProps, Y as GridTemplateAreasProps, Z as GridTemplateRowsProps, q as GridRowGapProps, z as GridAreaProps } from "./types-B0SNbm6V.mjs";
-import { t as grid } from "./index-DQhcFrR9.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, grid as default, grid };
+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";
+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 { t as grid } from "./grid-Bpk-QjhF.mjs";
-export { grid as default, grid };
+import { a as grid, i as span, n as layoutGrid, r as layoutGridStyles, t as layoutFlex } from "./grid-CYjL4-gb.mjs";
+export { grid as default, grid, layoutFlex, layoutGrid, layoutGridStyles, span };

package/dist/index-90_abc05.d.mts

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

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

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

package/dist/index-BmyL5qR7.d.cts

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

package/dist/index-Bwpwvg1h.d.cts

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

package/dist/index-Bxh1FNcS.d.cts

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

package/dist/index-ByDfI1go.d.cts

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

package/dist/index-C1IdMVtQ.d.mts

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

package/dist/index-CQWZd4iQ.d.mts

@@ -0,0 +1,6 @@
+import { a as Parser } from "./index-IulNhyDt.mjs";
+import "./types-Cv5WjcVA.mjs";
+//#region src/border/border.d.ts
+declare const border: Parser;
+//#endregion
+export { border as t };

package/dist/index-CQyvhO-h.d.cts

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

package/dist/index-CXK27dY_.d.cts

@@ -0,0 +1,42 @@
+import { a as Parser, l as StyleObject } from "./index-iVqAMF2L.cjs";
+import "./types-Cv5WjcVA.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. */
+  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 entries for named breakpoints that replace it there. */
+type LayoutGridValue = boolean | Record<string, 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`.
+ */
+declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
+/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
+declare const layoutGrid: Parser;
+/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
+declare const layoutFlex: Parser;
+/**
+ * The `span` prop: how many layout-grid columns an element takes. It writes both
+ * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
+ * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
+ * other's property. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
+ */
+declare const span: Parser;
+//#endregion
+export { layoutGrid as a, grid as c, layoutFlex as i, LayoutGridEntry as n, layoutGridStyles as o, LayoutGridValue as r, span as s, LayoutGridDisplay as t };

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

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

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

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

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

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

package/dist/index-D1mRMWDm.d.cts

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

package/dist/index-D2v_oJEm.d.cts

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

package/dist/index-D5xp7RWT.d.cts

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

package/dist/index-D7IZ8-Zq.d.mts

@@ -0,0 +1,42 @@
+import { a as Parser, l as StyleObject } from "./index-IulNhyDt.mjs";
+import "./types-Cv5WjcVA.mjs";
+//#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. */
+  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 entries for named breakpoints that replace it there. */
+type LayoutGridValue = boolean | Record<string, 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`.
+ */
+declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
+/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
+declare const layoutGrid: Parser;
+/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
+declare const layoutFlex: Parser;
+/**
+ * The `span` prop: how many layout-grid columns an element takes. It writes both
+ * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
+ * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
+ * other's property. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
+ */
+declare const span: Parser;
+//#endregion
+export { layoutGrid as a, grid as c, layoutFlex as i, LayoutGridEntry as n, layoutGridStyles as o, LayoutGridValue as r, span as s, LayoutGridDisplay as t };

package/dist/index-DKz4zEeT.d.mts

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

package/dist/{index-BXP1-da3.d.mts → index-IulNhyDt.d.mts}

@@ -1,4 +1,4 @@
-import { t as Breakpoints } from "./media-np0uvO4C.mjs";
+import { a as ResponsiveQueries, n as Breakpoints } from "./media-CfYDomHt.mjs";
 import * as CSS from "csstype";
 //#region src/core/core.d.ts
 type StyleObject = Record<string, any>;
@@ -41,7 +41,7 @@ type Config = SystemConfig;
 type ConfigFunction = StyleFn;
 interface ParserCache {
   breakpoints?: Breakpoints;
-  media: (string | null)[];
+  queries?: ResponsiveQueries;
 }
 interface Parser {
   (...args: any[]): any;

package/dist/index-MbcUN6uf.d.mts

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

package/dist/index-aRomguCQ.d.mts

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

package/dist/{index-BYkO78Xl.d.cts → index-iVqAMF2L.d.cts}

@@ -1,4 +1,4 @@
-import { t as Breakpoints } from "./media-np0uvO4C.cjs";
+import { a as ResponsiveQueries, n as Breakpoints } from "./media-CfYDomHt.cjs";
 import * as CSS from "csstype";
 //#region src/core/core.d.ts
 type StyleObject = Record<string, any>;
@@ -41,7 +41,7 @@ type Config = SystemConfig;
 type ConfigFunction = StyleFn;
 interface ParserCache {
   breakpoints?: Breakpoints;
-  media: (string | null)[];
+  queries?: ResponsiveQueries;
 }
 interface Parser {
   (...args: any[]): any;

package/dist/index-nfjmLzHF.d.mts

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

package/dist/index-pzogdlkS.d.mts

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

package/dist/index.cjs

@@ -1,17 +1,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_media = require("./media-BoIPXBPV.cjs");
+const require_media = require("./media-DSJdRy_k.cjs");
 const require_core = require("./core.cjs");
 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-CpvRIng4.cjs");
-const require_layout = require("./layout-kqQ2OsL5.cjs");
+const require_grid = require("./grid-BlMUPDJM.cjs");
+const require_layout = require("./layout-D3pG7vBp.cjs");
 const require_position = require("./position-zWvCE4hD.cjs");
 const require_typography = require("./typography-7jHZXqtc.cjs");
 const require_space = require("./space-Q-1mECZz.cjs");
 const require_shadow = require("./shadow-BrDnaQQl.cjs");
-const require_variant = require("./variant-DdSForfI.cjs");
+const require_variant = require("./variant-BSPTyRcQ.cjs");
 //#region src/style/style.ts
 const style = ({ prop, cssProperty, alias, key, transformValue, scale, properties }) => {
 	const config = {};
@@ -131,6 +131,9 @@ exports.buttonStyle = require_variant.buttonStyle;
 exports.color = require_color.color;
 exports.colorStyle = require_variant.colorStyle;
 exports.compose = require_core.compose;
+exports.containerKey = require_media.containerKey;
+exports.createContainerQueries = require_media.createContainerQueries;
+exports.createMediaHelpers = require_media.createMediaHelpers;
 exports.createMediaQuery = require_media.createMediaQuery;
 exports.createParser = require_core.createParser;
 exports.createStyleFunction = require_core.createStyleFunction;
@@ -166,6 +169,9 @@ exports.justifyContent = justifyContent;
 exports.justifyItems = justifyItems;
 exports.justifySelf = justifySelf;
 exports.layout = require_layout.layout;
+exports.layoutFlex = require_grid.layoutFlex;
+exports.layoutGrid = require_grid.layoutGrid;
+exports.layoutGridStyles = require_grid.layoutGridStyles;
 exports.left = left;
 exports.letterSpacing = letterSpacing;
 exports.lineHeight = lineHeight;
@@ -181,10 +187,12 @@ exports.overflowX = overflowX;
 exports.overflowY = overflowY;
 exports.padding = require_space.padding;
 exports.position = require_position.position;
+exports.responsiveQueries = require_media.responsiveQueries;
 exports.right = right;
 exports.shadow = require_shadow.shadow;
 exports.size = size;
 exports.space = require_space.space;
+exports.span = require_grid.span;
 exports.style = style;
 exports.system = require_core.system;
 exports.textAlign = textAlign;

package/dist/index.d.cts

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