@soroush.tech/styled-system 5.1.6 → 5.2.0

package/README.md

@@ -143,8 +143,8 @@ Full docs live in [`docs/`](./docs/README.md):
 - [TypeScript](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/typescript.md)
 - [Guides](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/docs/guides/index.md)
 
-Runnable demos live in [`examples/styled-system/`](../../examples/styled-system).
+Runnable demos live in [`examples/styled-system/`](https://github.com/soroush-tech/soroush.tech/tree/main/examples/styled-system).
 
 ## License
 
-MIT — a rewrite of styled-system (© 2017–2021 Brent Jackson), see [`LICENSE`](./LICENSE).
+MIT — a rewrite of styled-system (© 2017–2021 Brent Jackson), see [`LICENSE`](https://github.com/soroush-tech/soroush.tech/tree/main/packages/styled-system/LICENSE).

package/dist/core.cjs

@@ -1,7 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/core/core.ts
 const merge = (a, b) => {
-	const result = Object.assign({}, a, b);
+	const result = {
+		...a,
+		...b
+	};
 	for (const key in a) {
 		if (!a[key] || typeof b[key] !== "object") continue;
 		Object.assign(result, { [key]: Object.assign(a[key], b[key]) });
@@ -25,10 +28,10 @@ const defaults = { breakpoints: [
 ].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, undef) => {
+const get = (obj, key, def, p = 0, undef) => {
 	const path = typeof key === "string" ? key.split(".") : [key];
 	let value = obj;
-	for (p = 0; p < path.length; p++) value = value ? value[path[p]] : undef;
+	for (; p < path.length; p++) value = value ? value[path[p]] : undef;
 	return value === undef ? def : value;
 };
 const parseResponsiveStyle = (mediaQueries, sx, scale, raw, props) => {
@@ -36,8 +39,11 @@ const parseResponsiveStyle = (mediaQueries, sx, scale, raw, props) => {
 	raw.slice(0, mediaQueries.length).forEach((value, i) => {
 		const media = mediaQueries[i];
 		const style = sx(value, scale, props);
-		if (!media) Object.assign(styles, style);
-		else Object.assign(styles, { [media]: Object.assign({}, styles[media], style) });
+		if (media) Object.assign(styles, { [media]: {
+			...styles[media],
+			...style
+		} });
+		else Object.assign(styles, style);
 	});
 	return styles;
 };
@@ -47,11 +53,13 @@ const parseResponsiveObject = (breakpoints, sx, scale, raw, props) => {
 		const breakpoint = breakpoints[key];
 		const value = raw[key];
 		const style = sx(value, scale, props);
-		if (!breakpoint) Object.assign(styles, style);
-		else {
+		if (breakpoint) {
 			const media = createMediaQuery(breakpoint);
-			Object.assign(styles, { [media]: Object.assign({}, styles[media], style) });
-		}
+			Object.assign(styles, { [media]: {
+				...styles[media],
+				...style
+			} });
+		} else Object.assign(styles, style);
 	}
 	return styles;
 };
@@ -60,7 +68,7 @@ const createParser = (config) => {
 	const parse = ((props) => {
 		let styles = {};
 		let shouldSort = false;
-		const isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
+		const isCacheDisabled = props.theme?.disableStyledSystemCache;
 		for (const key in props) {
 			if (!config[key]) continue;
 			const sx = config[key];
@@ -130,7 +138,7 @@ const system = (args = {}) => {
 const compose = (...parsers) => {
 	const config = {};
 	parsers.forEach((parser) => {
-		if (!parser || !parser.config) return;
+		if (!parser?.config) return;
 		Object.assign(config, parser.config);
 	});
 	return createParser(config);

package/dist/core.mjs

@@ -1,6 +1,9 @@
 //#region src/core/core.ts
 const merge = (a, b) => {
-	const result = Object.assign({}, a, b);
+	const result = {
+		...a,
+		...b
+	};
 	for (const key in a) {
 		if (!a[key] || typeof b[key] !== "object") continue;
 		Object.assign(result, { [key]: Object.assign(a[key], b[key]) });
@@ -24,10 +27,10 @@ const defaults = { breakpoints: [
 ].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, undef) => {
+const get = (obj, key, def, p = 0, undef) => {
 	const path = typeof key === "string" ? key.split(".") : [key];
 	let value = obj;
-	for (p = 0; p < path.length; p++) value = value ? value[path[p]] : undef;
+	for (; p < path.length; p++) value = value ? value[path[p]] : undef;
 	return value === undef ? def : value;
 };
 const parseResponsiveStyle = (mediaQueries, sx, scale, raw, props) => {
@@ -35,8 +38,11 @@ const parseResponsiveStyle = (mediaQueries, sx, scale, raw, props) => {
 	raw.slice(0, mediaQueries.length).forEach((value, i) => {
 		const media = mediaQueries[i];
 		const style = sx(value, scale, props);
-		if (!media) Object.assign(styles, style);
-		else Object.assign(styles, { [media]: Object.assign({}, styles[media], style) });
+		if (media) Object.assign(styles, { [media]: {
+			...styles[media],
+			...style
+		} });
+		else Object.assign(styles, style);
 	});
 	return styles;
 };
@@ -46,11 +52,13 @@ const parseResponsiveObject = (breakpoints, sx, scale, raw, props) => {
 		const breakpoint = breakpoints[key];
 		const value = raw[key];
 		const style = sx(value, scale, props);
-		if (!breakpoint) Object.assign(styles, style);
-		else {
+		if (breakpoint) {
 			const media = createMediaQuery(breakpoint);
-			Object.assign(styles, { [media]: Object.assign({}, styles[media], style) });
-		}
+			Object.assign(styles, { [media]: {
+				...styles[media],
+				...style
+			} });
+		} else Object.assign(styles, style);
 	}
 	return styles;
 };
@@ -59,7 +67,7 @@ const createParser = (config) => {
 	const parse = ((props) => {
 		let styles = {};
 		let shouldSort = false;
-		const isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
+		const isCacheDisabled = props.theme?.disableStyledSystemCache;
 		for (const key in props) {
 			if (!config[key]) continue;
 			const sx = config[key];
@@ -129,7 +137,7 @@ const system = (args = {}) => {
 const compose = (...parsers) => {
 	const config = {};
 	parsers.forEach((parser) => {
-		if (!parser || !parser.config) return;
+		if (!parser?.config) return;
 		Object.assign(config, parser.config);
 	});
 	return createParser(config);

package/dist/{css-nzeM_Xnf.cjs → css-BQ6QmZDs.cjs}

@@ -1,8 +1,8 @@
 //#region src/css/css.ts
-const get = (obj, key, def, p, undef) => {
+const get = (obj, key, def, p = 0, undef) => {
 	const path = typeof key === "string" ? key.split(".") : [key];
 	let value = obj;
-	for (p = 0; p < path.length; p++) value = value ? value[path[p]] : undef;
+	for (; p < path.length; p++) value = value ? value[path[p]] : undef;
 	return value === undef ? def : value;
 };
 const defaultBreakpoints = [
@@ -205,7 +205,7 @@ const css = (args) => (props = {}) => {
 		const value = get(transforms, prop, get)(scale, val, val);
 		if (multiples[prop]) {
 			const dirs = multiples[prop];
-			for (let i = 0; i < dirs.length; i++) result[dirs[i]] = value;
+			for (const dir of dirs) result[dir] = value;
 		} else result[prop] = value;
 	}
 	return result;

package/dist/{css-rLZ9Oeye.mjs → css-DPyZNAmX.mjs}

@@ -1,8 +1,8 @@
 //#region src/css/css.ts
-const get = (obj, key, def, p, undef) => {
+const get = (obj, key, def, p = 0, undef) => {
 	const path = typeof key === "string" ? key.split(".") : [key];
 	let value = obj;
-	for (p = 0; p < path.length; p++) value = value ? value[path[p]] : undef;
+	for (; p < path.length; p++) value = value ? value[path[p]] : undef;
 	return value === undef ? def : value;
 };
 const defaultBreakpoints = [
@@ -205,7 +205,7 @@ const css = (args) => (props = {}) => {
 		const value = get(transforms, prop, get)(scale, val, val);
 		if (multiples[prop]) {
 			const dirs = multiples[prop];
-			for (let i = 0; i < dirs.length; i++) result[dirs[i]] = value;
+			for (const dir of dirs) result[dir] = value;
 		} else result[prop] = value;
 	}
 	return result;

package/dist/css.cjs

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

package/dist/css.mjs

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

package/dist/index.cjs

@@ -5,12 +5,12 @@ 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-B1-2dfQ9.cjs");
+const require_layout = require("./layout-JlwVxg8y.cjs");
 const require_position = require("./position-zWvCE4hD.cjs");
 const require_typography = require("./typography-DD_eWLLx.cjs");
-const require_space = require("./space-C14uiNpw.cjs");
+const require_space = require("./space-CAX_62yL.cjs");
 const require_shadow = require("./shadow-BrDnaQQl.cjs");
-const require_variant = require("./variant-ChsBzwrI.cjs");
+const require_variant = require("./variant-C7vPzZHo.cjs");
 //#region src/style/style.ts
 const style = ({ prop, cssProperty, alias, key, transformValue, scale, properties }) => {
 	const config = {};

package/dist/index.d.cts

@@ -35,7 +35,7 @@ declare const style: ({
 //#region src/types.d.ts
 type ObjectOrArray<T, K extends keyof never = keyof never> = T[] | Record<K, T | Record<K, T> | T[]>;
 type Scale = ObjectOrArray<number | string>;
-type TLengthStyledSystem = string | 0 | number;
+type TLengthStyledSystem = string | number;
 interface Theme<TLength = TLengthStyledSystem> {
   breakpoints?: ObjectOrArray<number | string | symbol>;
   mediaQueries?: {
@@ -62,37 +62,7 @@ interface Theme<TLength = TLengthStyledSystem> {
 type RequiredTheme = Required<Theme>;
 type ThemeValue<K extends keyof ThemeType, ThemeType, TVal = unknown> = NonNullable<ThemeType[K]> extends TVal[] ? number : NonNullable<ThemeType[K]> extends Record<infer E, TVal> ? E : NonNullable<ThemeType[K]> extends ObjectOrArray<infer F> ? F : never;
 type ResponsiveValue<T, ThemeType extends Theme = RequiredTheme> = T | null | Array<T | null> | { [key in (ThemeValue<'breakpoints', ThemeType> & string) | number]?: T };
-type L = TLengthStyledSystem;
-interface SpaceProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {
-  m?: ResponsiveValue<TVal, ThemeType>;
-  margin?: ResponsiveValue<TVal, ThemeType>;
-  mt?: ResponsiveValue<TVal, ThemeType>;
-  marginTop?: ResponsiveValue<TVal, ThemeType>;
-  mr?: ResponsiveValue<TVal, ThemeType>;
-  marginRight?: ResponsiveValue<TVal, ThemeType>;
-  mb?: ResponsiveValue<TVal, ThemeType>;
-  marginBottom?: ResponsiveValue<TVal, ThemeType>;
-  ml?: ResponsiveValue<TVal, ThemeType>;
-  marginLeft?: ResponsiveValue<TVal, ThemeType>;
-  mx?: ResponsiveValue<TVal, ThemeType>;
-  marginX?: ResponsiveValue<TVal, ThemeType>;
-  my?: ResponsiveValue<TVal, ThemeType>;
-  marginY?: ResponsiveValue<TVal, ThemeType>;
-  p?: ResponsiveValue<TVal, ThemeType>;
-  padding?: ResponsiveValue<TVal, ThemeType>;
-  pt?: ResponsiveValue<TVal, ThemeType>;
-  paddingTop?: ResponsiveValue<TVal, ThemeType>;
-  pr?: ResponsiveValue<TVal, ThemeType>;
-  paddingRight?: ResponsiveValue<TVal, ThemeType>;
-  pb?: ResponsiveValue<TVal, ThemeType>;
-  paddingBottom?: ResponsiveValue<TVal, ThemeType>;
-  pl?: ResponsiveValue<TVal, ThemeType>;
-  paddingLeft?: ResponsiveValue<TVal, ThemeType>;
-  px?: ResponsiveValue<TVal, ThemeType>;
-  paddingX?: ResponsiveValue<TVal, ThemeType>;
-  py?: ResponsiveValue<TVal, ThemeType>;
-  paddingY?: ResponsiveValue<TVal, ThemeType>;
-}
+interface SpaceProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> extends MarginProps<ThemeType, TVal>, PaddingProps<ThemeType, TVal> {}
 interface MarginProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {
   m?: ResponsiveValue<TVal, ThemeType>;
   margin?: ResponsiveValue<TVal, ThemeType>;
@@ -126,25 +96,25 @@ interface PaddingProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValu
   paddingY?: ResponsiveValue<TVal, ThemeType>;
 }
 interface LayoutProps<ThemeType extends Theme = RequiredTheme> {
-  width?: ResponsiveValue<CSS.Property.Width<L>, ThemeType>;
-  height?: ResponsiveValue<CSS.Property.Height<L>, ThemeType>;
-  minWidth?: ResponsiveValue<CSS.Property.MinWidth<L>, ThemeType>;
-  minHeight?: ResponsiveValue<CSS.Property.MinHeight<L>, ThemeType>;
-  maxWidth?: ResponsiveValue<CSS.Property.MaxWidth<L>, ThemeType>;
-  maxHeight?: ResponsiveValue<CSS.Property.MaxHeight<L>, ThemeType>;
-  size?: ResponsiveValue<CSS.Property.Width<L>, ThemeType>;
+  width?: ResponsiveValue<CSS.Property.Width<TLengthStyledSystem>, ThemeType>;
+  height?: ResponsiveValue<CSS.Property.Height<TLengthStyledSystem>, ThemeType>;
+  minWidth?: ResponsiveValue<CSS.Property.MinWidth<TLengthStyledSystem>, ThemeType>;
+  minHeight?: ResponsiveValue<CSS.Property.MinHeight<TLengthStyledSystem>, ThemeType>;
+  maxWidth?: ResponsiveValue<CSS.Property.MaxWidth<TLengthStyledSystem>, ThemeType>;
+  maxHeight?: ResponsiveValue<CSS.Property.MaxHeight<TLengthStyledSystem>, ThemeType>;
+  size?: ResponsiveValue<CSS.Property.Width<TLengthStyledSystem>, ThemeType>;
   overflow?: ResponsiveValue<CSS.Property.Overflow, ThemeType>;
   overflowX?: ResponsiveValue<CSS.Property.OverflowX, ThemeType>;
   overflowY?: ResponsiveValue<CSS.Property.OverflowY, ThemeType>;
   display?: ResponsiveValue<CSS.Property.Display, ThemeType>;
-  verticalAlign?: ResponsiveValue<CSS.Property.VerticalAlign<L>, ThemeType>;
+  verticalAlign?: ResponsiveValue<CSS.Property.VerticalAlign<TLengthStyledSystem>, ThemeType>;
 }
 interface TypographyProps<ThemeType extends Theme = RequiredTheme> {
   fontFamily?: ResponsiveValue<CSS.Property.FontFamily, ThemeType>;
   fontSize?: ResponsiveValue<ThemeValue<'fontSizes', ThemeType>, ThemeType>;
   fontWeight?: ResponsiveValue<ThemeValue<'fontWeights', ThemeType> | string, ThemeType>;
   lineHeight?: ResponsiveValue<ThemeValue<'lineHeights', ThemeType>, ThemeType>;
-  letterSpacing?: ResponsiveValue<CSS.Property.LetterSpacing<L>, ThemeType>;
+  letterSpacing?: ResponsiveValue<CSS.Property.LetterSpacing<TLengthStyledSystem>, ThemeType>;
   textAlign?: ResponsiveValue<CSS.Property.TextAlign, ThemeType>;
   fontStyle?: ResponsiveValue<CSS.Property.FontStyle, ThemeType>;
 }
@@ -155,10 +125,10 @@ interface FlexboxProps<ThemeType extends Theme = RequiredTheme> {
   justifyContent?: ResponsiveValue<CSS.Property.JustifyContent, ThemeType>;
   flexWrap?: ResponsiveValue<CSS.Property.FlexWrap, ThemeType>;
   flexDirection?: ResponsiveValue<CSS.Property.FlexDirection, ThemeType>;
-  flex?: ResponsiveValue<CSS.Property.Flex<L>, ThemeType>;
+  flex?: ResponsiveValue<CSS.Property.Flex<TLengthStyledSystem>, ThemeType>;
   flexGrow?: ResponsiveValue<CSS.Property.FlexGrow, ThemeType>;
   flexShrink?: ResponsiveValue<CSS.Property.FlexShrink, ThemeType>;
-  flexBasis?: ResponsiveValue<CSS.Property.FlexBasis<L>, ThemeType>;
+  flexBasis?: ResponsiveValue<CSS.Property.FlexBasis<TLengthStyledSystem>, ThemeType>;
   justifySelf?: ResponsiveValue<CSS.Property.JustifySelf, ThemeType>;
   alignSelf?: ResponsiveValue<CSS.Property.AlignSelf, ThemeType>;
   order?: ResponsiveValue<CSS.Property.Order, ThemeType>;
@@ -166,10 +136,10 @@ interface FlexboxProps<ThemeType extends Theme = RequiredTheme> {
 interface PositionProps<ThemeType extends Theme = RequiredTheme> {
   position?: ResponsiveValue<CSS.Property.Position, ThemeType>;
   zIndex?: ResponsiveValue<CSS.Property.ZIndex, ThemeType>;
-  top?: ResponsiveValue<CSS.Property.Top<L>, ThemeType>;
-  right?: ResponsiveValue<CSS.Property.Right<L>, ThemeType>;
-  bottom?: ResponsiveValue<CSS.Property.Bottom<L>, ThemeType>;
-  left?: ResponsiveValue<CSS.Property.Left<L>, ThemeType>;
+  top?: ResponsiveValue<CSS.Property.Top<TLengthStyledSystem>, ThemeType>;
+  right?: ResponsiveValue<CSS.Property.Right<TLengthStyledSystem>, ThemeType>;
+  bottom?: ResponsiveValue<CSS.Property.Bottom<TLengthStyledSystem>, ThemeType>;
+  left?: ResponsiveValue<CSS.Property.Left<TLengthStyledSystem>, ThemeType>;
 }
 interface ColorProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'colors', ThemeType>> {
   color?: ResponsiveValue<TVal, ThemeType>;
@@ -178,34 +148,34 @@ interface ColorProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<
   opacity?: ResponsiveValue<CSS.Property.Opacity, ThemeType>;
 }
 interface BorderProps<ThemeType extends Theme = RequiredTheme> {
-  border?: ResponsiveValue<CSS.Property.Border<L>, ThemeType>;
-  borderWidth?: ResponsiveValue<CSS.Property.BorderWidth<L>, ThemeType>;
+  border?: ResponsiveValue<CSS.Property.Border<TLengthStyledSystem>, ThemeType>;
+  borderWidth?: ResponsiveValue<CSS.Property.BorderWidth<TLengthStyledSystem>, ThemeType>;
   borderStyle?: ResponsiveValue<CSS.Property.BorderStyle, ThemeType>;
   borderColor?: ResponsiveValue<ThemeValue<'colors', ThemeType>, ThemeType>;
   borderRadius?: ResponsiveValue<ThemeValue<'radii', ThemeType>, ThemeType>;
-  borderTop?: ResponsiveValue<CSS.Property.BorderTop<L>, ThemeType>;
-  borderRight?: ResponsiveValue<CSS.Property.BorderRight<L>, ThemeType>;
-  borderBottom?: ResponsiveValue<CSS.Property.BorderBottom<L>, ThemeType>;
-  borderLeft?: ResponsiveValue<CSS.Property.BorderLeft<L>, ThemeType>;
+  borderTop?: ResponsiveValue<CSS.Property.BorderTop<TLengthStyledSystem>, ThemeType>;
+  borderRight?: ResponsiveValue<CSS.Property.BorderRight<TLengthStyledSystem>, ThemeType>;
+  borderBottom?: ResponsiveValue<CSS.Property.BorderBottom<TLengthStyledSystem>, ThemeType>;
+  borderLeft?: ResponsiveValue<CSS.Property.BorderLeft<TLengthStyledSystem>, ThemeType>;
 }
 interface BackgroundProps<ThemeType extends Theme = RequiredTheme> {
-  background?: ResponsiveValue<CSS.Property.Background<L>, ThemeType>;
+  background?: ResponsiveValue<CSS.Property.Background<TLengthStyledSystem>, ThemeType>;
   backgroundImage?: ResponsiveValue<CSS.Property.BackgroundImage, ThemeType>;
-  backgroundSize?: ResponsiveValue<CSS.Property.BackgroundSize<L>, ThemeType>;
-  backgroundPosition?: ResponsiveValue<CSS.Property.BackgroundPosition<L>, ThemeType>;
+  backgroundSize?: ResponsiveValue<CSS.Property.BackgroundSize<TLengthStyledSystem>, ThemeType>;
+  backgroundPosition?: ResponsiveValue<CSS.Property.BackgroundPosition<TLengthStyledSystem>, ThemeType>;
   backgroundRepeat?: ResponsiveValue<CSS.Property.BackgroundRepeat, ThemeType>;
 }
 interface GridProps<ThemeType extends Theme = RequiredTheme> {
-  gridGap?: ResponsiveValue<CSS.Property.GridGap<L>, ThemeType>;
-  gridColumnGap?: ResponsiveValue<CSS.Property.GridColumnGap<L>, ThemeType>;
-  gridRowGap?: ResponsiveValue<CSS.Property.GridRowGap<L>, ThemeType>;
+  gridGap?: ResponsiveValue<CSS.Property.GridGap<TLengthStyledSystem>, ThemeType>;
+  gridColumnGap?: ResponsiveValue<CSS.Property.GridColumnGap<TLengthStyledSystem>, ThemeType>;
+  gridRowGap?: ResponsiveValue<CSS.Property.GridRowGap<TLengthStyledSystem>, ThemeType>;
   gridColumn?: ResponsiveValue<CSS.Property.GridColumn, ThemeType>;
   gridRow?: ResponsiveValue<CSS.Property.GridRow, ThemeType>;
   gridAutoFlow?: ResponsiveValue<CSS.Property.GridAutoFlow, ThemeType>;
-  gridAutoColumns?: ResponsiveValue<CSS.Property.GridAutoColumns<L>, ThemeType>;
-  gridAutoRows?: ResponsiveValue<CSS.Property.GridAutoRows<L>, ThemeType>;
-  gridTemplateColumns?: ResponsiveValue<CSS.Property.GridTemplateColumns<L>, ThemeType>;
-  gridTemplateRows?: ResponsiveValue<CSS.Property.GridTemplateRows<L>, ThemeType>;
+  gridAutoColumns?: ResponsiveValue<CSS.Property.GridAutoColumns<TLengthStyledSystem>, ThemeType>;
+  gridAutoRows?: ResponsiveValue<CSS.Property.GridAutoRows<TLengthStyledSystem>, ThemeType>;
+  gridTemplateColumns?: ResponsiveValue<CSS.Property.GridTemplateColumns<TLengthStyledSystem>, ThemeType>;
+  gridTemplateRows?: ResponsiveValue<CSS.Property.GridTemplateRows<TLengthStyledSystem>, ThemeType>;
   gridTemplateAreas?: ResponsiveValue<CSS.Property.GridTemplateAreas, ThemeType>;
   gridArea?: ResponsiveValue<CSS.Property.GridArea, ThemeType>;
 }

package/dist/index.d.mts

@@ -35,7 +35,7 @@ declare const style: ({
 //#region src/types.d.ts
 type ObjectOrArray<T, K extends keyof never = keyof never> = T[] | Record<K, T | Record<K, T> | T[]>;
 type Scale = ObjectOrArray<number | string>;
-type TLengthStyledSystem = string | 0 | number;
+type TLengthStyledSystem = string | number;
 interface Theme<TLength = TLengthStyledSystem> {
   breakpoints?: ObjectOrArray<number | string | symbol>;
   mediaQueries?: {
@@ -62,37 +62,7 @@ interface Theme<TLength = TLengthStyledSystem> {
 type RequiredTheme = Required<Theme>;
 type ThemeValue<K extends keyof ThemeType, ThemeType, TVal = unknown> = NonNullable<ThemeType[K]> extends TVal[] ? number : NonNullable<ThemeType[K]> extends Record<infer E, TVal> ? E : NonNullable<ThemeType[K]> extends ObjectOrArray<infer F> ? F : never;
 type ResponsiveValue<T, ThemeType extends Theme = RequiredTheme> = T | null | Array<T | null> | { [key in (ThemeValue<'breakpoints', ThemeType> & string) | number]?: T };
-type L = TLengthStyledSystem;
-interface SpaceProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {
-  m?: ResponsiveValue<TVal, ThemeType>;
-  margin?: ResponsiveValue<TVal, ThemeType>;
-  mt?: ResponsiveValue<TVal, ThemeType>;
-  marginTop?: ResponsiveValue<TVal, ThemeType>;
-  mr?: ResponsiveValue<TVal, ThemeType>;
-  marginRight?: ResponsiveValue<TVal, ThemeType>;
-  mb?: ResponsiveValue<TVal, ThemeType>;
-  marginBottom?: ResponsiveValue<TVal, ThemeType>;
-  ml?: ResponsiveValue<TVal, ThemeType>;
-  marginLeft?: ResponsiveValue<TVal, ThemeType>;
-  mx?: ResponsiveValue<TVal, ThemeType>;
-  marginX?: ResponsiveValue<TVal, ThemeType>;
-  my?: ResponsiveValue<TVal, ThemeType>;
-  marginY?: ResponsiveValue<TVal, ThemeType>;
-  p?: ResponsiveValue<TVal, ThemeType>;
-  padding?: ResponsiveValue<TVal, ThemeType>;
-  pt?: ResponsiveValue<TVal, ThemeType>;
-  paddingTop?: ResponsiveValue<TVal, ThemeType>;
-  pr?: ResponsiveValue<TVal, ThemeType>;
-  paddingRight?: ResponsiveValue<TVal, ThemeType>;
-  pb?: ResponsiveValue<TVal, ThemeType>;
-  paddingBottom?: ResponsiveValue<TVal, ThemeType>;
-  pl?: ResponsiveValue<TVal, ThemeType>;
-  paddingLeft?: ResponsiveValue<TVal, ThemeType>;
-  px?: ResponsiveValue<TVal, ThemeType>;
-  paddingX?: ResponsiveValue<TVal, ThemeType>;
-  py?: ResponsiveValue<TVal, ThemeType>;
-  paddingY?: ResponsiveValue<TVal, ThemeType>;
-}
+interface SpaceProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> extends MarginProps<ThemeType, TVal>, PaddingProps<ThemeType, TVal> {}
 interface MarginProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {
   m?: ResponsiveValue<TVal, ThemeType>;
   margin?: ResponsiveValue<TVal, ThemeType>;
@@ -126,25 +96,25 @@ interface PaddingProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValu
   paddingY?: ResponsiveValue<TVal, ThemeType>;
 }
 interface LayoutProps<ThemeType extends Theme = RequiredTheme> {
-  width?: ResponsiveValue<CSS.Property.Width<L>, ThemeType>;
-  height?: ResponsiveValue<CSS.Property.Height<L>, ThemeType>;
-  minWidth?: ResponsiveValue<CSS.Property.MinWidth<L>, ThemeType>;
-  minHeight?: ResponsiveValue<CSS.Property.MinHeight<L>, ThemeType>;
-  maxWidth?: ResponsiveValue<CSS.Property.MaxWidth<L>, ThemeType>;
-  maxHeight?: ResponsiveValue<CSS.Property.MaxHeight<L>, ThemeType>;
-  size?: ResponsiveValue<CSS.Property.Width<L>, ThemeType>;
+  width?: ResponsiveValue<CSS.Property.Width<TLengthStyledSystem>, ThemeType>;
+  height?: ResponsiveValue<CSS.Property.Height<TLengthStyledSystem>, ThemeType>;
+  minWidth?: ResponsiveValue<CSS.Property.MinWidth<TLengthStyledSystem>, ThemeType>;
+  minHeight?: ResponsiveValue<CSS.Property.MinHeight<TLengthStyledSystem>, ThemeType>;
+  maxWidth?: ResponsiveValue<CSS.Property.MaxWidth<TLengthStyledSystem>, ThemeType>;
+  maxHeight?: ResponsiveValue<CSS.Property.MaxHeight<TLengthStyledSystem>, ThemeType>;
+  size?: ResponsiveValue<CSS.Property.Width<TLengthStyledSystem>, ThemeType>;
   overflow?: ResponsiveValue<CSS.Property.Overflow, ThemeType>;
   overflowX?: ResponsiveValue<CSS.Property.OverflowX, ThemeType>;
   overflowY?: ResponsiveValue<CSS.Property.OverflowY, ThemeType>;
   display?: ResponsiveValue<CSS.Property.Display, ThemeType>;
-  verticalAlign?: ResponsiveValue<CSS.Property.VerticalAlign<L>, ThemeType>;
+  verticalAlign?: ResponsiveValue<CSS.Property.VerticalAlign<TLengthStyledSystem>, ThemeType>;
 }
 interface TypographyProps<ThemeType extends Theme = RequiredTheme> {
   fontFamily?: ResponsiveValue<CSS.Property.FontFamily, ThemeType>;
   fontSize?: ResponsiveValue<ThemeValue<'fontSizes', ThemeType>, ThemeType>;
   fontWeight?: ResponsiveValue<ThemeValue<'fontWeights', ThemeType> | string, ThemeType>;
   lineHeight?: ResponsiveValue<ThemeValue<'lineHeights', ThemeType>, ThemeType>;
-  letterSpacing?: ResponsiveValue<CSS.Property.LetterSpacing<L>, ThemeType>;
+  letterSpacing?: ResponsiveValue<CSS.Property.LetterSpacing<TLengthStyledSystem>, ThemeType>;
   textAlign?: ResponsiveValue<CSS.Property.TextAlign, ThemeType>;
   fontStyle?: ResponsiveValue<CSS.Property.FontStyle, ThemeType>;
 }
@@ -155,10 +125,10 @@ interface FlexboxProps<ThemeType extends Theme = RequiredTheme> {
   justifyContent?: ResponsiveValue<CSS.Property.JustifyContent, ThemeType>;
   flexWrap?: ResponsiveValue<CSS.Property.FlexWrap, ThemeType>;
   flexDirection?: ResponsiveValue<CSS.Property.FlexDirection, ThemeType>;
-  flex?: ResponsiveValue<CSS.Property.Flex<L>, ThemeType>;
+  flex?: ResponsiveValue<CSS.Property.Flex<TLengthStyledSystem>, ThemeType>;
   flexGrow?: ResponsiveValue<CSS.Property.FlexGrow, ThemeType>;
   flexShrink?: ResponsiveValue<CSS.Property.FlexShrink, ThemeType>;
-  flexBasis?: ResponsiveValue<CSS.Property.FlexBasis<L>, ThemeType>;
+  flexBasis?: ResponsiveValue<CSS.Property.FlexBasis<TLengthStyledSystem>, ThemeType>;
   justifySelf?: ResponsiveValue<CSS.Property.JustifySelf, ThemeType>;
   alignSelf?: ResponsiveValue<CSS.Property.AlignSelf, ThemeType>;
   order?: ResponsiveValue<CSS.Property.Order, ThemeType>;
@@ -166,10 +136,10 @@ interface FlexboxProps<ThemeType extends Theme = RequiredTheme> {
 interface PositionProps<ThemeType extends Theme = RequiredTheme> {
   position?: ResponsiveValue<CSS.Property.Position, ThemeType>;
   zIndex?: ResponsiveValue<CSS.Property.ZIndex, ThemeType>;
-  top?: ResponsiveValue<CSS.Property.Top<L>, ThemeType>;
-  right?: ResponsiveValue<CSS.Property.Right<L>, ThemeType>;
-  bottom?: ResponsiveValue<CSS.Property.Bottom<L>, ThemeType>;
-  left?: ResponsiveValue<CSS.Property.Left<L>, ThemeType>;
+  top?: ResponsiveValue<CSS.Property.Top<TLengthStyledSystem>, ThemeType>;
+  right?: ResponsiveValue<CSS.Property.Right<TLengthStyledSystem>, ThemeType>;
+  bottom?: ResponsiveValue<CSS.Property.Bottom<TLengthStyledSystem>, ThemeType>;
+  left?: ResponsiveValue<CSS.Property.Left<TLengthStyledSystem>, ThemeType>;
 }
 interface ColorProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'colors', ThemeType>> {
   color?: ResponsiveValue<TVal, ThemeType>;
@@ -178,34 +148,34 @@ interface ColorProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<
   opacity?: ResponsiveValue<CSS.Property.Opacity, ThemeType>;
 }
 interface BorderProps<ThemeType extends Theme = RequiredTheme> {
-  border?: ResponsiveValue<CSS.Property.Border<L>, ThemeType>;
-  borderWidth?: ResponsiveValue<CSS.Property.BorderWidth<L>, ThemeType>;
+  border?: ResponsiveValue<CSS.Property.Border<TLengthStyledSystem>, ThemeType>;
+  borderWidth?: ResponsiveValue<CSS.Property.BorderWidth<TLengthStyledSystem>, ThemeType>;
   borderStyle?: ResponsiveValue<CSS.Property.BorderStyle, ThemeType>;
   borderColor?: ResponsiveValue<ThemeValue<'colors', ThemeType>, ThemeType>;
   borderRadius?: ResponsiveValue<ThemeValue<'radii', ThemeType>, ThemeType>;
-  borderTop?: ResponsiveValue<CSS.Property.BorderTop<L>, ThemeType>;
-  borderRight?: ResponsiveValue<CSS.Property.BorderRight<L>, ThemeType>;
-  borderBottom?: ResponsiveValue<CSS.Property.BorderBottom<L>, ThemeType>;
-  borderLeft?: ResponsiveValue<CSS.Property.BorderLeft<L>, ThemeType>;
+  borderTop?: ResponsiveValue<CSS.Property.BorderTop<TLengthStyledSystem>, ThemeType>;
+  borderRight?: ResponsiveValue<CSS.Property.BorderRight<TLengthStyledSystem>, ThemeType>;
+  borderBottom?: ResponsiveValue<CSS.Property.BorderBottom<TLengthStyledSystem>, ThemeType>;
+  borderLeft?: ResponsiveValue<CSS.Property.BorderLeft<TLengthStyledSystem>, ThemeType>;
 }
 interface BackgroundProps<ThemeType extends Theme = RequiredTheme> {
-  background?: ResponsiveValue<CSS.Property.Background<L>, ThemeType>;
+  background?: ResponsiveValue<CSS.Property.Background<TLengthStyledSystem>, ThemeType>;
   backgroundImage?: ResponsiveValue<CSS.Property.BackgroundImage, ThemeType>;
-  backgroundSize?: ResponsiveValue<CSS.Property.BackgroundSize<L>, ThemeType>;
-  backgroundPosition?: ResponsiveValue<CSS.Property.BackgroundPosition<L>, ThemeType>;
+  backgroundSize?: ResponsiveValue<CSS.Property.BackgroundSize<TLengthStyledSystem>, ThemeType>;
+  backgroundPosition?: ResponsiveValue<CSS.Property.BackgroundPosition<TLengthStyledSystem>, ThemeType>;
   backgroundRepeat?: ResponsiveValue<CSS.Property.BackgroundRepeat, ThemeType>;
 }
 interface GridProps<ThemeType extends Theme = RequiredTheme> {
-  gridGap?: ResponsiveValue<CSS.Property.GridGap<L>, ThemeType>;
-  gridColumnGap?: ResponsiveValue<CSS.Property.GridColumnGap<L>, ThemeType>;
-  gridRowGap?: ResponsiveValue<CSS.Property.GridRowGap<L>, ThemeType>;
+  gridGap?: ResponsiveValue<CSS.Property.GridGap<TLengthStyledSystem>, ThemeType>;
+  gridColumnGap?: ResponsiveValue<CSS.Property.GridColumnGap<TLengthStyledSystem>, ThemeType>;
+  gridRowGap?: ResponsiveValue<CSS.Property.GridRowGap<TLengthStyledSystem>, ThemeType>;
   gridColumn?: ResponsiveValue<CSS.Property.GridColumn, ThemeType>;
   gridRow?: ResponsiveValue<CSS.Property.GridRow, ThemeType>;
   gridAutoFlow?: ResponsiveValue<CSS.Property.GridAutoFlow, ThemeType>;
-  gridAutoColumns?: ResponsiveValue<CSS.Property.GridAutoColumns<L>, ThemeType>;
-  gridAutoRows?: ResponsiveValue<CSS.Property.GridAutoRows<L>, ThemeType>;
-  gridTemplateColumns?: ResponsiveValue<CSS.Property.GridTemplateColumns<L>, ThemeType>;
-  gridTemplateRows?: ResponsiveValue<CSS.Property.GridTemplateRows<L>, ThemeType>;
+  gridAutoColumns?: ResponsiveValue<CSS.Property.GridAutoColumns<TLengthStyledSystem>, ThemeType>;
+  gridAutoRows?: ResponsiveValue<CSS.Property.GridAutoRows<TLengthStyledSystem>, ThemeType>;
+  gridTemplateColumns?: ResponsiveValue<CSS.Property.GridTemplateColumns<TLengthStyledSystem>, ThemeType>;
+  gridTemplateRows?: ResponsiveValue<CSS.Property.GridTemplateRows<TLengthStyledSystem>, ThemeType>;
   gridTemplateAreas?: ResponsiveValue<CSS.Property.GridTemplateAreas, ThemeType>;
   gridArea?: ResponsiveValue<CSS.Property.GridArea, ThemeType>;
 }

package/dist/index.mjs

@@ -4,12 +4,12 @@ import { t as border } from "./border-Dder4Dhp.mjs";
 import { t as color } from "./color-CGmMe8yP.mjs";
 import { t as flexbox } from "./flexbox-XQnlnfa4.mjs";
 import { t as grid } from "./grid-Bpk-QjhF.mjs";
-import { t as layout } from "./layout-TqD8vcEl.mjs";
+import { t as layout } from "./layout-Dx0Un_6l.mjs";
 import { t as position } from "./position-jf6VlRyR.mjs";
 import { t as typography } from "./typography-CptBXSy0.mjs";
-import { n as padding, r as space, t as margin } from "./space-CNrX-zoo.mjs";
+import { n as padding, r as space, t as margin } from "./space-DEf9-0r9.mjs";
 import { t as shadow } from "./shadow-Bp7lx_41.mjs";
-import { i as variant, n as colorStyle, r as textStyle, t as buttonStyle } from "./variant-CWUfe1Cc.mjs";
+import { i as variant, n as colorStyle, r as textStyle, t as buttonStyle } from "./variant-DQA9pqwW.mjs";
 //#region src/style/style.ts
 const style = ({ prop, cssProperty, alias, key, transformValue, scale, properties }) => {
 	const config = {};

package/dist/{layout-TqD8vcEl.mjs → layout-Dx0Un_6l.mjs}

@@ -1,6 +1,6 @@
 import { get, system } from "./core.mjs";
 //#region src/layout/layout.ts
-const isNumber = (n) => typeof n === "number" && !isNaN(n);
+const isNumber = (n) => typeof n === "number" && !Number.isNaN(n);
 const getWidth = (n, scale) => get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + "%");
 const layout = system({
 	width: {

package/dist/{layout-B1-2dfQ9.cjs → layout-JlwVxg8y.cjs}

@@ -1,6 +1,6 @@
 const require_core = require("./core.cjs");
 //#region src/layout/layout.ts
-const isNumber = (n) => typeof n === "number" && !isNaN(n);
+const isNumber = (n) => typeof n === "number" && !Number.isNaN(n);
 const getWidth = (n, scale) => require_core.get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + "%");
 const config = {
 	width: {

package/dist/layout.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_layout = require("./layout-B1-2dfQ9.cjs");
+const require_layout = require("./layout-JlwVxg8y.cjs");
 exports.default = require_layout.layout;
 exports.layout = require_layout.layout;

package/dist/layout.mjs

@@ -1,2 +1,2 @@
-import { t as layout } from "./layout-TqD8vcEl.mjs";
+import { t as layout } from "./layout-Dx0Un_6l.mjs";
 export { layout as default, layout };

package/dist/{presets-DlUVOAIL.cjs → presets-BgKBhlRl.cjs}

@@ -4,12 +4,12 @@ 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-B1-2dfQ9.cjs");
+const require_layout = require("./layout-JlwVxg8y.cjs");
 const require_position = require("./position-zWvCE4hD.cjs");
 const require_typography = require("./typography-DD_eWLLx.cjs");
-const require_space = require("./space-C14uiNpw.cjs");
+const require_space = require("./space-CAX_62yL.cjs");
 const require_shadow = require("./shadow-BrDnaQQl.cjs");
-const require_variant = require("./variant-ChsBzwrI.cjs");
+const require_variant = require("./variant-C7vPzZHo.cjs");
 //#region src/presets/presets.ts
 const all = require_core.compose(require_space.space, require_typography.typography, require_color.color, require_layout.layout, require_flexbox.flexbox, require_border.border, require_background.background, require_position.position, require_grid.grid, require_shadow.shadow, require_variant.buttonStyle, require_variant.textStyle, require_variant.colorStyle);
 //#endregion

package/dist/{presets-DjaCx0dm.mjs → presets-CcKoA0BA.mjs}

@@ -4,12 +4,12 @@ import { t as border } from "./border-Dder4Dhp.mjs";
 import { t as color } from "./color-CGmMe8yP.mjs";
 import { t as flexbox } from "./flexbox-XQnlnfa4.mjs";
 import { t as grid } from "./grid-Bpk-QjhF.mjs";
-import { t as layout } from "./layout-TqD8vcEl.mjs";
+import { t as layout } from "./layout-Dx0Un_6l.mjs";
 import { t as position } from "./position-jf6VlRyR.mjs";
 import { t as typography } from "./typography-CptBXSy0.mjs";
-import { r as space } from "./space-CNrX-zoo.mjs";
+import { r as space } from "./space-DEf9-0r9.mjs";
 import { t as shadow } from "./shadow-Bp7lx_41.mjs";
-import { n as colorStyle, r as textStyle, t as buttonStyle } from "./variant-CWUfe1Cc.mjs";
+import { n as colorStyle, r as textStyle, t as buttonStyle } from "./variant-DQA9pqwW.mjs";
 //#region src/presets/presets.ts
 const all = compose(space, typography, color, layout, flexbox, border, background, position, grid, shadow, buttonStyle, textStyle, colorStyle);
 //#endregion

package/dist/props.cjs

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_presets = require("./presets-DlUVOAIL.cjs");
+const require_presets = require("./presets-BgKBhlRl.cjs");
 //#region src/props/props.ts
-const regex = new RegExp(`^(${require_presets.all.propNames.join("|")})$`);
+const styledSystemProps = new Set(require_presets.all.propNames);
 const omit = (props) => {
 	const next = {};
 	for (const key in props) {
-		if (regex.test(key)) continue;
+		if (key === "__proto__" || styledSystemProps.has(key)) continue;
 		next[key] = props[key];
 	}
 	return next;
@@ -13,7 +13,7 @@ const omit = (props) => {
 const pick = (props) => {
 	const next = {};
 	for (const key in props) {
-		if (!regex.test(key)) continue;
+		if (!styledSystemProps.has(key)) continue;
 		next[key] = props[key];
 	}
 	return next;

package/dist/props.mjs

@@ -1,10 +1,10 @@
-import { t as all } from "./presets-DjaCx0dm.mjs";
+import { t as all } from "./presets-CcKoA0BA.mjs";
 //#region src/props/props.ts
-const regex = new RegExp(`^(${all.propNames.join("|")})$`);
+const styledSystemProps = new Set(all.propNames);
 const omit = (props) => {
 	const next = {};
 	for (const key in props) {
-		if (regex.test(key)) continue;
+		if (key === "__proto__" || styledSystemProps.has(key)) continue;
 		next[key] = props[key];
 	}
 	return next;
@@ -12,7 +12,7 @@ const omit = (props) => {
 const pick = (props) => {
 	const next = {};
 	for (const key in props) {
-		if (!regex.test(key)) continue;
+		if (!styledSystemProps.has(key)) continue;
 		next[key] = props[key];
 	}
 	return next;

package/dist/should-forward-prop.cjs

@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
-const require_presets = require("./presets-DlUVOAIL.cjs");
+const require_presets = require("./presets-BgKBhlRl.cjs");
 let _emotion_is_prop_valid = require("@emotion/is-prop-valid");
 _emotion_is_prop_valid = __toESM(_emotion_is_prop_valid, 1);
 //#region src/should-forward-prop/should-forward-prop.ts
@@ -37,8 +37,8 @@ const memoize = (fn) => {
 };
 const props = require_presets.all.propNames;
 const createShouldForwardProp = (propNames) => {
-	const regex = new RegExp(`^(${propNames.join("|")})$`);
-	return memoize((prop) => (0, _emotion_is_prop_valid.default)(prop) && !regex.test(prop));
+	const blocked = new Set(propNames);
+	return memoize((prop) => (0, _emotion_is_prop_valid.default)(prop) && !blocked.has(prop));
 };
 var should_forward_prop_default = createShouldForwardProp(props);
 //#endregion

package/dist/should-forward-prop.mjs

@@ -1,4 +1,4 @@
-import { t as all } from "./presets-DjaCx0dm.mjs";
+import { t as all } from "./presets-CcKoA0BA.mjs";
 import isPropValid from "@emotion/is-prop-valid";
 //#region src/should-forward-prop/should-forward-prop.ts
 const memoize = (fn) => {
@@ -10,8 +10,8 @@ const memoize = (fn) => {
 };
 const props = all.propNames;
 const createShouldForwardProp = (propNames) => {
-	const regex = new RegExp(`^(${propNames.join("|")})$`);
-	return memoize((prop) => isPropValid(prop) && !regex.test(prop));
+	const blocked = new Set(propNames);
+	return memoize((prop) => isPropValid(prop) && !blocked.has(prop));
 };
 var should_forward_prop_default = createShouldForwardProp(props);
 //#endregion

package/dist/{space-C14uiNpw.cjs → space-CAX_62yL.cjs}

@@ -11,7 +11,7 @@ const spaceScale = [
 	256,
 	512
 ];
-const isNumber = (n) => typeof n === "number" && !isNaN(n);
+const isNumber = (n) => typeof n === "number" && !Number.isNaN(n);
 const getMargin = (n, scale) => {
 	if (!isNumber(n)) return require_core.get(scale, n, n);
 	const isNegative = n < 0;

package/dist/{space-CNrX-zoo.mjs → space-DEf9-0r9.mjs}

@@ -11,7 +11,7 @@ const spaceScale = [
 	256,
 	512
 ];
-const isNumber = (n) => typeof n === "number" && !isNaN(n);
+const isNumber = (n) => typeof n === "number" && !Number.isNaN(n);
 const getMargin = (n, scale) => {
 	if (!isNumber(n)) return get(scale, n, n);
 	const isNegative = n < 0;

package/dist/space.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_space = require("./space-C14uiNpw.cjs");
+const require_space = require("./space-CAX_62yL.cjs");
 exports.default = require_space.space;
 exports.margin = require_space.margin;
 exports.padding = require_space.padding;

package/dist/space.mjs

@@ -1,2 +1,2 @@
-import { n as padding, r as space, t as margin } from "./space-CNrX-zoo.mjs";
+import { n as padding, r as space, t as margin } from "./space-DEf9-0r9.mjs";
 export { space as default, space, margin, padding };

package/dist/{variant-ChsBzwrI.cjs → variant-C7vPzZHo.cjs}

@@ -1,5 +1,5 @@
 const require_core = require("./core.cjs");
-const require_css = require("./css-nzeM_Xnf.cjs");
+const require_css = require("./css-BQ6QmZDs.cjs");
 //#region src/variant/variant.ts
 const variant = (options = {}) => {
 	const { scale, prop = "variant", variants = {}, key } = options;

package/dist/{variant-CWUfe1Cc.mjs → variant-DQA9pqwW.mjs}

@@ -1,5 +1,5 @@
 import { createParser, get } from "./core.mjs";
-import { t as css } from "./css-rLZ9Oeye.mjs";
+import { t as css } from "./css-DPyZNAmX.mjs";
 //#region src/variant/variant.ts
 const variant = (options = {}) => {
 	const { scale, prop = "variant", variants = {}, key } = options;

package/dist/variant.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_variant = require("./variant-ChsBzwrI.cjs");
+const require_variant = require("./variant-C7vPzZHo.cjs");
 exports.buttonStyle = require_variant.buttonStyle;
 exports.colorStyle = require_variant.colorStyle;
 exports.default = require_variant.variant;

package/dist/variant.mjs

@@ -1,2 +1,2 @@
-import { i as variant, n as colorStyle, r as textStyle, t as buttonStyle } from "./variant-CWUfe1Cc.mjs";
+import { i as variant, n as colorStyle, r as textStyle, t as buttonStyle } from "./variant-DQA9pqwW.mjs";
 export { buttonStyle, colorStyle, variant as default, variant, textStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/styled-system",
-  "version": "5.1.6",
+  "version": "5.2.0",
   "description": "Maintained, first-class-TypeScript rewrite of styled-system — responsive, theme-aware style props for CSS-in-JS. Drop-in replacement for styled-system v5.",
   "keywords": [
     "styled-system",
@@ -28,213 +28,183 @@
     "dist"
   ],
   "exports": {
-    ".": "./src/index.ts",
-    "./core": "./src/core/index.ts",
-    "./space": "./src/space/index.ts",
-    "./color": "./src/color/index.ts",
-    "./layout": "./src/layout/index.ts",
-    "./typography": "./src/typography/index.ts",
-    "./flexbox": "./src/flexbox/index.ts",
-    "./grid": "./src/grid/index.ts",
-    "./background": "./src/background/index.ts",
-    "./border": "./src/border/index.ts",
-    "./position": "./src/position/index.ts",
-    "./shadow": "./src/shadow/index.ts",
-    "./variant": "./src/variant/index.ts",
-    "./css": "./src/css/index.ts",
-    "./theme-get": "./src/theme-get/index.ts",
-    "./props": "./src/props/index.ts",
-    "./should-forward-prop": "./src/should-forward-prop/index.ts"
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./core": {
+      "import": {
+        "types": "./dist/core.d.mts",
+        "default": "./dist/core.mjs"
+      },
+      "require": {
+        "types": "./dist/core.d.cts",
+        "default": "./dist/core.cjs"
+      }
+    },
+    "./space": {
+      "import": {
+        "types": "./dist/space.d.mts",
+        "default": "./dist/space.mjs"
+      },
+      "require": {
+        "types": "./dist/space.d.cts",
+        "default": "./dist/space.cjs"
+      }
+    },
+    "./color": {
+      "import": {
+        "types": "./dist/color.d.mts",
+        "default": "./dist/color.mjs"
+      },
+      "require": {
+        "types": "./dist/color.d.cts",
+        "default": "./dist/color.cjs"
+      }
+    },
+    "./layout": {
+      "import": {
+        "types": "./dist/layout.d.mts",
+        "default": "./dist/layout.mjs"
+      },
+      "require": {
+        "types": "./dist/layout.d.cts",
+        "default": "./dist/layout.cjs"
+      }
+    },
+    "./typography": {
+      "import": {
+        "types": "./dist/typography.d.mts",
+        "default": "./dist/typography.mjs"
+      },
+      "require": {
+        "types": "./dist/typography.d.cts",
+        "default": "./dist/typography.cjs"
+      }
+    },
+    "./flexbox": {
+      "import": {
+        "types": "./dist/flexbox.d.mts",
+        "default": "./dist/flexbox.mjs"
+      },
+      "require": {
+        "types": "./dist/flexbox.d.cts",
+        "default": "./dist/flexbox.cjs"
+      }
+    },
+    "./grid": {
+      "import": {
+        "types": "./dist/grid.d.mts",
+        "default": "./dist/grid.mjs"
+      },
+      "require": {
+        "types": "./dist/grid.d.cts",
+        "default": "./dist/grid.cjs"
+      }
+    },
+    "./background": {
+      "import": {
+        "types": "./dist/background.d.mts",
+        "default": "./dist/background.mjs"
+      },
+      "require": {
+        "types": "./dist/background.d.cts",
+        "default": "./dist/background.cjs"
+      }
+    },
+    "./border": {
+      "import": {
+        "types": "./dist/border.d.mts",
+        "default": "./dist/border.mjs"
+      },
+      "require": {
+        "types": "./dist/border.d.cts",
+        "default": "./dist/border.cjs"
+      }
+    },
+    "./position": {
+      "import": {
+        "types": "./dist/position.d.mts",
+        "default": "./dist/position.mjs"
+      },
+      "require": {
+        "types": "./dist/position.d.cts",
+        "default": "./dist/position.cjs"
+      }
+    },
+    "./shadow": {
+      "import": {
+        "types": "./dist/shadow.d.mts",
+        "default": "./dist/shadow.mjs"
+      },
+      "require": {
+        "types": "./dist/shadow.d.cts",
+        "default": "./dist/shadow.cjs"
+      }
+    },
+    "./variant": {
+      "import": {
+        "types": "./dist/variant.d.mts",
+        "default": "./dist/variant.mjs"
+      },
+      "require": {
+        "types": "./dist/variant.d.cts",
+        "default": "./dist/variant.cjs"
+      }
+    },
+    "./css": {
+      "import": {
+        "types": "./dist/css.d.mts",
+        "default": "./dist/css.mjs"
+      },
+      "require": {
+        "types": "./dist/css.d.cts",
+        "default": "./dist/css.cjs"
+      }
+    },
+    "./theme-get": {
+      "import": {
+        "types": "./dist/theme-get.d.mts",
+        "default": "./dist/theme-get.mjs"
+      },
+      "require": {
+        "types": "./dist/theme-get.d.cts",
+        "default": "./dist/theme-get.cjs"
+      }
+    },
+    "./props": {
+      "import": {
+        "types": "./dist/props.d.mts",
+        "default": "./dist/props.mjs"
+      },
+      "require": {
+        "types": "./dist/props.d.cts",
+        "default": "./dist/props.cjs"
+      }
+    },
+    "./should-forward-prop": {
+      "import": {
+        "types": "./dist/should-forward-prop.d.mts",
+        "default": "./dist/should-forward-prop.mjs"
+      },
+      "require": {
+        "types": "./dist/should-forward-prop.d.cts",
+        "default": "./dist/should-forward-prop.cjs"
+      }
+    }
   },
   "imports": {
     "#presets": "./src/presets/index.ts"
   },
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.mts",
   "publishConfig": {
-    "access": "public",
-    "exports": {
-      ".": {
-        "import": {
-          "types": "./dist/index.d.mts",
-          "default": "./dist/index.mjs"
-        },
-        "require": {
-          "types": "./dist/index.d.cts",
-          "default": "./dist/index.cjs"
-        }
-      },
-      "./core": {
-        "import": {
-          "types": "./dist/core.d.mts",
-          "default": "./dist/core.mjs"
-        },
-        "require": {
-          "types": "./dist/core.d.cts",
-          "default": "./dist/core.cjs"
-        }
-      },
-      "./space": {
-        "import": {
-          "types": "./dist/space.d.mts",
-          "default": "./dist/space.mjs"
-        },
-        "require": {
-          "types": "./dist/space.d.cts",
-          "default": "./dist/space.cjs"
-        }
-      },
-      "./color": {
-        "import": {
-          "types": "./dist/color.d.mts",
-          "default": "./dist/color.mjs"
-        },
-        "require": {
-          "types": "./dist/color.d.cts",
-          "default": "./dist/color.cjs"
-        }
-      },
-      "./layout": {
-        "import": {
-          "types": "./dist/layout.d.mts",
-          "default": "./dist/layout.mjs"
-        },
-        "require": {
-          "types": "./dist/layout.d.cts",
-          "default": "./dist/layout.cjs"
-        }
-      },
-      "./typography": {
-        "import": {
-          "types": "./dist/typography.d.mts",
-          "default": "./dist/typography.mjs"
-        },
-        "require": {
-          "types": "./dist/typography.d.cts",
-          "default": "./dist/typography.cjs"
-        }
-      },
-      "./flexbox": {
-        "import": {
-          "types": "./dist/flexbox.d.mts",
-          "default": "./dist/flexbox.mjs"
-        },
-        "require": {
-          "types": "./dist/flexbox.d.cts",
-          "default": "./dist/flexbox.cjs"
-        }
-      },
-      "./grid": {
-        "import": {
-          "types": "./dist/grid.d.mts",
-          "default": "./dist/grid.mjs"
-        },
-        "require": {
-          "types": "./dist/grid.d.cts",
-          "default": "./dist/grid.cjs"
-        }
-      },
-      "./background": {
-        "import": {
-          "types": "./dist/background.d.mts",
-          "default": "./dist/background.mjs"
-        },
-        "require": {
-          "types": "./dist/background.d.cts",
-          "default": "./dist/background.cjs"
-        }
-      },
-      "./border": {
-        "import": {
-          "types": "./dist/border.d.mts",
-          "default": "./dist/border.mjs"
-        },
-        "require": {
-          "types": "./dist/border.d.cts",
-          "default": "./dist/border.cjs"
-        }
-      },
-      "./position": {
-        "import": {
-          "types": "./dist/position.d.mts",
-          "default": "./dist/position.mjs"
-        },
-        "require": {
-          "types": "./dist/position.d.cts",
-          "default": "./dist/position.cjs"
-        }
-      },
-      "./shadow": {
-        "import": {
-          "types": "./dist/shadow.d.mts",
-          "default": "./dist/shadow.mjs"
-        },
-        "require": {
-          "types": "./dist/shadow.d.cts",
-          "default": "./dist/shadow.cjs"
-        }
-      },
-      "./variant": {
-        "import": {
-          "types": "./dist/variant.d.mts",
-          "default": "./dist/variant.mjs"
-        },
-        "require": {
-          "types": "./dist/variant.d.cts",
-          "default": "./dist/variant.cjs"
-        }
-      },
-      "./css": {
-        "import": {
-          "types": "./dist/css.d.mts",
-          "default": "./dist/css.mjs"
-        },
-        "require": {
-          "types": "./dist/css.d.cts",
-          "default": "./dist/css.cjs"
-        }
-      },
-      "./theme-get": {
-        "import": {
-          "types": "./dist/theme-get.d.mts",
-          "default": "./dist/theme-get.mjs"
-        },
-        "require": {
-          "types": "./dist/theme-get.d.cts",
-          "default": "./dist/theme-get.cjs"
-        }
-      },
-      "./props": {
-        "import": {
-          "types": "./dist/props.d.mts",
-          "default": "./dist/props.mjs"
-        },
-        "require": {
-          "types": "./dist/props.d.cts",
-          "default": "./dist/props.cjs"
-        }
-      },
-      "./should-forward-prop": {
-        "import": {
-          "types": "./dist/should-forward-prop.d.mts",
-          "default": "./dist/should-forward-prop.mjs"
-        },
-        "require": {
-          "types": "./dist/should-forward-prop.d.cts",
-          "default": "./dist/should-forward-prop.cjs"
-        }
-      }
-    },
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.mts"
-  },
-  "scripts": {
-    "build": "tsdown",
-    "lint": "eslint . --max-warnings 0",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "prepublishOnly": "pnpm build"
+    "access": "public"
   },
   "dependencies": {
     "csstype": "^3.1.3"
@@ -244,12 +214,21 @@
   },
   "devDependencies": {
     "@emotion/is-prop-valid": "^1.4.0",
-    "@soroush.tech/eslint-config": "workspace:*",
     "@vitest/coverage-v8": "^4.1.9",
     "eslint": "^10.5.0",
     "globals": "^17.7.0",
     "tsdown": "^0.22.3",
     "typescript": "~6.0.3",
-    "vitest": "^4.1.9"
-  }
-}
+    "vitest": "^4.1.9",
+    "@soroush.tech/eslint-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint . --max-warnings 0",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs"
+}