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

package/dist/space.d.mts

@@ -1,3 +1,3 @@
-import { R as GapProps, T as ColumnGapProps, bt as RowGapProps, ht as PaddingProps, ot as MarginProps, wt as SpaceProps } from "./types-B0SNbm6V.mjs";
-import { i as space, n as margin, r as padding, t as gap } from "./index-wKeENlqd.mjs";
+import { B as GapProps, Ct as RowGapProps, Dt as SpaceProps, E as ColumnGapProps, lt as MarginProps, vt as PaddingProps } from "./types-C4ogGxde.mjs";
+import { i as space, n as margin, r as padding, t as gap } from "./index-k5b5FR_o.mjs";
 export { type ColumnGapProps, type GapProps, type MarginProps, type PaddingProps, type RowGapProps, type SpaceProps, space as default, space, gap, margin, padding };

package/dist/{types-B0SNbm6V.d.cts → types-C4ogGxde.d.cts}

@@ -4,7 +4,8 @@ type ObjectOrArray<T, K extends keyof any = keyof any> = T[] | Record<K, T | Rec
 type Scale = ObjectOrArray<number | string>;
 type TLengthStyledSystem = string | number;
 interface Theme<TLength = TLengthStyledSystem> {
-  breakpoints?: ObjectOrArray<number | string | symbol>;
+  /** Sizes by name or position; a scale may also carry helper methods, which are not breakpoints. */
+  breakpoints?: ObjectOrArray<number | string | symbol> | Record<string, unknown>;
   mediaQueries?: {
     [size: string]: string;
   };
@@ -28,10 +29,15 @@ interface Theme<TLength = TLengthStyledSystem> {
 }
 type RequiredTheme = Required<Theme>;
 type ThemeValue<K extends keyof ThemeType, ThemeType, TVal = any> = 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; } & {
-  /** The value below the first breakpoint. */
-  _?: T;
-});
+type SizeKeys<Scale> = Scale extends readonly unknown[] ? never : { [K in keyof Scale]: Scale[K] extends ((...args: never[]) => unknown) ? never : K; }[keyof Scale] & string;
+/** The theme's breakpoint names (array indexes for a list scale). */
+type BreakpointName<ThemeType extends Theme = RequiredTheme> = SizeKeys<NonNullable<ThemeType['breakpoints']>> | number;
+/**
+ * A responsive value: one value; an array mapped by position onto the breakpoints,
+ * mobile-first (`null` skips one); or an object keyed by breakpoint name, each from that
+ * size up, plus `cq<Name>` keys for the same sizes as container queries.
+ */
+type ResponsiveValue<T, ThemeType extends Theme = RequiredTheme> = T | null | Array<T | null> | ({ [key in BreakpointName<ThemeType>]?: T; } & { [key in `cq${Capitalize<SizeKeys<NonNullable<ThemeType['breakpoints']>>>}`]?: T; });
 interface MarginProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {
   m?: ResponsiveValue<TVal, ThemeType>;
   margin?: ResponsiveValue<TVal, ThemeType>;
@@ -113,7 +119,12 @@ interface VerticalAlignProps<ThemeType extends Theme = RequiredTheme, TVal = CSS
 interface AspectRatioProps<ThemeType extends Theme = RequiredTheme> {
   aspectRatio?: ResponsiveValue<CSS.Property.AspectRatio, ThemeType>;
 }
-interface LayoutProps<ThemeType extends Theme = RequiredTheme> extends WidthProps<ThemeType>, HeightProps<ThemeType>, MinWidthProps<ThemeType>, MinHeightProps<ThemeType>, MaxWidthProps<ThemeType>, MaxHeightProps<ThemeType>, DisplayProps<ThemeType>, VerticalAlignProps<ThemeType>, AspectRatioProps<ThemeType>, SizeProps<ThemeType>, OverflowProps<ThemeType> {}
+/** Not in upstream styled-system: makes the element a query container. */
+interface ContainerProps<ThemeType extends Theme = RequiredTheme> {
+  containerType?: ResponsiveValue<CSS.Property.ContainerType, ThemeType>;
+  containerName?: ResponsiveValue<CSS.Property.ContainerName, ThemeType>;
+}
+interface LayoutProps<ThemeType extends Theme = RequiredTheme> extends WidthProps<ThemeType>, HeightProps<ThemeType>, MinWidthProps<ThemeType>, MinHeightProps<ThemeType>, MaxWidthProps<ThemeType>, MaxHeightProps<ThemeType>, DisplayProps<ThemeType>, VerticalAlignProps<ThemeType>, AspectRatioProps<ThemeType>, ContainerProps<ThemeType>, SizeProps<ThemeType>, OverflowProps<ThemeType> {}
 interface FontFamilyProps<ThemeType extends Theme = RequiredTheme> {
   fontFamily?: ResponsiveValue<CSS.Property.FontFamily, ThemeType>;
 }
@@ -328,6 +339,25 @@ interface GridTemplateAreasProps<ThemeType extends Theme = RequiredTheme> {
 interface GridAreaProps<ThemeType extends Theme = RequiredTheme> {
   gridArea?: ResponsiveValue<CSS.Property.GridArea, ThemeType>;
 }
+interface LayoutGridEntryProps<ThemeType extends Theme> {
+  columns?: number;
+  margin?: ThemeValue<'space', ThemeType> | string;
+  gutter?: ThemeValue<'space', ThemeType> | string;
+  mode?: 'fluid' | 'fixed';
+  maxWidth?: string;
+}
+/**
+ * Not in upstream styled-system: the layout grid from `theme.layout` on a Grid or Flex - `true`
+ * for the theme's, or an entry whose fields replace it at every breakpoint (`{ gutter: 8 }`),
+ * with entries under breakpoint names that replace it there only (`{ lg: { columns: 16 } }`).
+ */
+interface LayoutGridProps<ThemeType extends Theme = RequiredTheme> {
+  layout?: boolean | (LayoutGridEntryProps<ThemeType> & { [key in BreakpointName<ThemeType>]?: LayoutGridEntryProps<ThemeType>; });
+}
+/** Not in upstream styled-system: how many layout-grid columns the element takes. */
+interface SpanProps<ThemeType extends Theme = RequiredTheme> {
+  span?: ResponsiveValue<number, ThemeType>;
+}
 interface GridProps<ThemeType extends Theme = RequiredTheme> extends GridGapProps<ThemeType>, GridColumnGapProps<ThemeType>, GridRowGapProps<ThemeType>, GridColumnProps<ThemeType>, GridRowProps<ThemeType>, GridAutoFlowProps<ThemeType>, GridAutoColumnsProps<ThemeType>, GridAutoRowsProps<ThemeType>, GridTemplateColumnsProps<ThemeType>, GridTemplateRowsProps<ThemeType>, GridTemplateAreasProps<ThemeType>, GridAreaProps<ThemeType> {}
 interface BoxShadowProps<ThemeType extends Theme = RequiredTheme> {
   boxShadow?: ResponsiveValue<CSS.Property.BoxShadow | string | number, ThemeType>;
@@ -346,4 +376,4 @@ interface ColorStyleProps<ThemeType extends Theme = RequiredTheme> {
   colors?: ResponsiveValue<string, ThemeType>;
 }
 //#endregion
-export { JustifyContentProps as $, FlexProps as A, TextDecorationLineProps as At, GridAutoColumnsProps as B, TopProps as Bt, ColorProps as C, SizeProps as Ct, FlexBasisProps as D, TextAlignProps as Dt, DisplayProps as E, TextAlignLastProps as Et, FontSizeProps as F, TextShadowProps as Ft, GridGapProps as G, ZIndexProps as Gt, GridAutoRowsProps as H, VerticalAlignProps as Ht, FontStyleProps as I, TextStyleProps as It, GridRowProps as J, GridProps as K, FontWeightProps as L, TextTransformProps as Lt, FlexWrapProps as M, TextDecorationStyleProps as Mt, FlexboxProps as N, TextDecorationThicknessProps as Nt, FlexDirectionProps as O, TextColorProps as Ot, FontFamilyProps as P, TextOverflowProps as Pt, HeightProps as Q, GapProps as R, Theme as Rt, ButtonStyleProps as S, ShadowProps as St, ColumnGapProps as T, TLengthStyledSystem as Tt, GridColumnGapProps as U, WhiteSpaceProps as Ut, GridAutoFlowProps as V, TypographyProps as Vt, GridColumnProps as W, WidthProps as Wt, GridTemplateColumnsProps as X, GridTemplateAreasProps as Y, GridTemplateRowsProps as Z, BorderStyleProps as _, RequiredTheme as _t, BackgroundColorProps as a, LineHeightProps as at, BottomProps as b, RowGapProps as bt, BackgroundProps as c, MaxWidthProps as ct, BorderBottomProps as d, ObjectOrArray as dt, JustifyItemsProps as et, BorderColorProps as f, OpacityProps as ft, BorderRightProps as g, PositionProps as gt, BorderRadiusProps as h, PaddingProps as ht, AspectRatioProps as i, LetterSpacingProps as it, FlexShrinkProps as j, TextDecorationProps as jt, FlexGrowProps as k, TextDecorationColorProps as kt, BackgroundRepeatProps as l, MinHeightProps as lt, BorderProps as m, OverflowProps as mt, AlignItemsProps as n, LayoutProps as nt, BackgroundImageProps as o, MarginProps as ot, BorderLeftProps as p, OrderProps as pt, GridRowGapProps as q, AlignSelfProps as r, LeftProps as rt, BackgroundPositionProps as s, MaxHeightProps as st, AlignContentProps as t, JustifySelfProps as tt, BackgroundSizeProps as u, MinWidthProps as ut, BorderTopProps as v, ResponsiveValue as vt, ColorStyleProps as w, SpaceProps as wt, BoxShadowProps as x, Scale as xt, BorderWidthProps as y, RightProps as yt, GridAreaProps as z, ThemeValue as zt };
+export { GridTemplateRowsProps as $, FlexDirectionProps as A, TextAlignLastProps as At, GapProps as B, TextStyleProps as Bt, ButtonStyleProps as C, RowGapProps as Ct, ContainerProps as D, SpaceProps as Dt, ColumnGapProps as E, SizeProps as Et, FlexboxProps as F, TextDecorationProps as Ft, GridColumnGapProps as G, TypographyProps as Gt, GridAutoColumnsProps as H, Theme as Ht, FontFamilyProps as I, TextDecorationStyleProps as It, GridProps as J, WidthProps as Jt, GridColumnProps as K, VerticalAlignProps as Kt, FontSizeProps as L, TextDecorationThicknessProps as Lt, FlexProps as M, TextColorProps as Mt, FlexShrinkProps as N, TextDecorationColorProps as Nt, DisplayProps as O, SpanProps as Ot, FlexWrapProps as P, TextDecorationLineProps as Pt, GridTemplateColumnsProps as Q, FontStyleProps as R, TextOverflowProps as Rt, BreakpointName as S, RightProps as St, ColorStyleProps as T, ShadowProps as Tt, GridAutoFlowProps as U, ThemeValue as Ut, GridAreaProps as V, TextTransformProps as Vt, GridAutoRowsProps as W, TopProps as Wt, GridRowProps as X, GridRowGapProps as Y, ZIndexProps as Yt, GridTemplateAreasProps as Z, BorderStyleProps as _, OverflowProps as _t, BackgroundColorProps as a, LayoutProps as at, BottomProps as b, RequiredTheme as bt, BackgroundProps as c, LineHeightProps as ct, BorderBottomProps as d, MaxWidthProps as dt, HeightProps as et, BorderColorProps as f, MinHeightProps as ft, BorderRightProps as g, OrderProps as gt, BorderRadiusProps as h, OpacityProps as ht, AspectRatioProps as i, LayoutGridProps as it, FlexGrowProps as j, TextAlignProps as jt, FlexBasisProps as k, TLengthStyledSystem as kt, BackgroundRepeatProps as l, MarginProps as lt, BorderProps as m, ObjectOrArray as mt, AlignItemsProps as n, JustifyItemsProps as nt, BackgroundImageProps as o, LeftProps as ot, BorderLeftProps as p, MinWidthProps as pt, GridGapProps as q, WhiteSpaceProps as qt, AlignSelfProps as r, JustifySelfProps as rt, BackgroundPositionProps as s, LetterSpacingProps as st, AlignContentProps as t, JustifyContentProps as tt, BackgroundSizeProps as u, MaxHeightProps as ut, BorderTopProps as v, PaddingProps as vt, ColorProps as w, Scale as wt, BoxShadowProps as x, ResponsiveValue as xt, BorderWidthProps as y, PositionProps as yt, FontWeightProps as z, TextShadowProps as zt };

package/dist/{types-B0SNbm6V.d.mts → types-C4ogGxde.d.mts}

@@ -4,7 +4,8 @@ type ObjectOrArray<T, K extends keyof any = keyof any> = T[] | Record<K, T | Rec
 type Scale = ObjectOrArray<number | string>;
 type TLengthStyledSystem = string | number;
 interface Theme<TLength = TLengthStyledSystem> {
-  breakpoints?: ObjectOrArray<number | string | symbol>;
+  /** Sizes by name or position; a scale may also carry helper methods, which are not breakpoints. */
+  breakpoints?: ObjectOrArray<number | string | symbol> | Record<string, unknown>;
   mediaQueries?: {
     [size: string]: string;
   };
@@ -28,10 +29,15 @@ interface Theme<TLength = TLengthStyledSystem> {
 }
 type RequiredTheme = Required<Theme>;
 type ThemeValue<K extends keyof ThemeType, ThemeType, TVal = any> = 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; } & {
-  /** The value below the first breakpoint. */
-  _?: T;
-});
+type SizeKeys<Scale> = Scale extends readonly unknown[] ? never : { [K in keyof Scale]: Scale[K] extends ((...args: never[]) => unknown) ? never : K; }[keyof Scale] & string;
+/** The theme's breakpoint names (array indexes for a list scale). */
+type BreakpointName<ThemeType extends Theme = RequiredTheme> = SizeKeys<NonNullable<ThemeType['breakpoints']>> | number;
+/**
+ * A responsive value: one value; an array mapped by position onto the breakpoints,
+ * mobile-first (`null` skips one); or an object keyed by breakpoint name, each from that
+ * size up, plus `cq<Name>` keys for the same sizes as container queries.
+ */
+type ResponsiveValue<T, ThemeType extends Theme = RequiredTheme> = T | null | Array<T | null> | ({ [key in BreakpointName<ThemeType>]?: T; } & { [key in `cq${Capitalize<SizeKeys<NonNullable<ThemeType['breakpoints']>>>}`]?: T; });
 interface MarginProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {
   m?: ResponsiveValue<TVal, ThemeType>;
   margin?: ResponsiveValue<TVal, ThemeType>;
@@ -113,7 +119,12 @@ interface VerticalAlignProps<ThemeType extends Theme = RequiredTheme, TVal = CSS
 interface AspectRatioProps<ThemeType extends Theme = RequiredTheme> {
   aspectRatio?: ResponsiveValue<CSS.Property.AspectRatio, ThemeType>;
 }
-interface LayoutProps<ThemeType extends Theme = RequiredTheme> extends WidthProps<ThemeType>, HeightProps<ThemeType>, MinWidthProps<ThemeType>, MinHeightProps<ThemeType>, MaxWidthProps<ThemeType>, MaxHeightProps<ThemeType>, DisplayProps<ThemeType>, VerticalAlignProps<ThemeType>, AspectRatioProps<ThemeType>, SizeProps<ThemeType>, OverflowProps<ThemeType> {}
+/** Not in upstream styled-system: makes the element a query container. */
+interface ContainerProps<ThemeType extends Theme = RequiredTheme> {
+  containerType?: ResponsiveValue<CSS.Property.ContainerType, ThemeType>;
+  containerName?: ResponsiveValue<CSS.Property.ContainerName, ThemeType>;
+}
+interface LayoutProps<ThemeType extends Theme = RequiredTheme> extends WidthProps<ThemeType>, HeightProps<ThemeType>, MinWidthProps<ThemeType>, MinHeightProps<ThemeType>, MaxWidthProps<ThemeType>, MaxHeightProps<ThemeType>, DisplayProps<ThemeType>, VerticalAlignProps<ThemeType>, AspectRatioProps<ThemeType>, ContainerProps<ThemeType>, SizeProps<ThemeType>, OverflowProps<ThemeType> {}
 interface FontFamilyProps<ThemeType extends Theme = RequiredTheme> {
   fontFamily?: ResponsiveValue<CSS.Property.FontFamily, ThemeType>;
 }
@@ -328,6 +339,25 @@ interface GridTemplateAreasProps<ThemeType extends Theme = RequiredTheme> {
 interface GridAreaProps<ThemeType extends Theme = RequiredTheme> {
   gridArea?: ResponsiveValue<CSS.Property.GridArea, ThemeType>;
 }
+interface LayoutGridEntryProps<ThemeType extends Theme> {
+  columns?: number;
+  margin?: ThemeValue<'space', ThemeType> | string;
+  gutter?: ThemeValue<'space', ThemeType> | string;
+  mode?: 'fluid' | 'fixed';
+  maxWidth?: string;
+}
+/**
+ * Not in upstream styled-system: the layout grid from `theme.layout` on a Grid or Flex - `true`
+ * for the theme's, or an entry whose fields replace it at every breakpoint (`{ gutter: 8 }`),
+ * with entries under breakpoint names that replace it there only (`{ lg: { columns: 16 } }`).
+ */
+interface LayoutGridProps<ThemeType extends Theme = RequiredTheme> {
+  layout?: boolean | (LayoutGridEntryProps<ThemeType> & { [key in BreakpointName<ThemeType>]?: LayoutGridEntryProps<ThemeType>; });
+}
+/** Not in upstream styled-system: how many layout-grid columns the element takes. */
+interface SpanProps<ThemeType extends Theme = RequiredTheme> {
+  span?: ResponsiveValue<number, ThemeType>;
+}
 interface GridProps<ThemeType extends Theme = RequiredTheme> extends GridGapProps<ThemeType>, GridColumnGapProps<ThemeType>, GridRowGapProps<ThemeType>, GridColumnProps<ThemeType>, GridRowProps<ThemeType>, GridAutoFlowProps<ThemeType>, GridAutoColumnsProps<ThemeType>, GridAutoRowsProps<ThemeType>, GridTemplateColumnsProps<ThemeType>, GridTemplateRowsProps<ThemeType>, GridTemplateAreasProps<ThemeType>, GridAreaProps<ThemeType> {}
 interface BoxShadowProps<ThemeType extends Theme = RequiredTheme> {
   boxShadow?: ResponsiveValue<CSS.Property.BoxShadow | string | number, ThemeType>;
@@ -346,4 +376,4 @@ interface ColorStyleProps<ThemeType extends Theme = RequiredTheme> {
   colors?: ResponsiveValue<string, ThemeType>;
 }
 //#endregion
-export { JustifyContentProps as $, FlexProps as A, TextDecorationLineProps as At, GridAutoColumnsProps as B, TopProps as Bt, ColorProps as C, SizeProps as Ct, FlexBasisProps as D, TextAlignProps as Dt, DisplayProps as E, TextAlignLastProps as Et, FontSizeProps as F, TextShadowProps as Ft, GridGapProps as G, ZIndexProps as Gt, GridAutoRowsProps as H, VerticalAlignProps as Ht, FontStyleProps as I, TextStyleProps as It, GridRowProps as J, GridProps as K, FontWeightProps as L, TextTransformProps as Lt, FlexWrapProps as M, TextDecorationStyleProps as Mt, FlexboxProps as N, TextDecorationThicknessProps as Nt, FlexDirectionProps as O, TextColorProps as Ot, FontFamilyProps as P, TextOverflowProps as Pt, HeightProps as Q, GapProps as R, Theme as Rt, ButtonStyleProps as S, ShadowProps as St, ColumnGapProps as T, TLengthStyledSystem as Tt, GridColumnGapProps as U, WhiteSpaceProps as Ut, GridAutoFlowProps as V, TypographyProps as Vt, GridColumnProps as W, WidthProps as Wt, GridTemplateColumnsProps as X, GridTemplateAreasProps as Y, GridTemplateRowsProps as Z, BorderStyleProps as _, RequiredTheme as _t, BackgroundColorProps as a, LineHeightProps as at, BottomProps as b, RowGapProps as bt, BackgroundProps as c, MaxWidthProps as ct, BorderBottomProps as d, ObjectOrArray as dt, JustifyItemsProps as et, BorderColorProps as f, OpacityProps as ft, BorderRightProps as g, PositionProps as gt, BorderRadiusProps as h, PaddingProps as ht, AspectRatioProps as i, LetterSpacingProps as it, FlexShrinkProps as j, TextDecorationProps as jt, FlexGrowProps as k, TextDecorationColorProps as kt, BackgroundRepeatProps as l, MinHeightProps as lt, BorderProps as m, OverflowProps as mt, AlignItemsProps as n, LayoutProps as nt, BackgroundImageProps as o, MarginProps as ot, BorderLeftProps as p, OrderProps as pt, GridRowGapProps as q, AlignSelfProps as r, LeftProps as rt, BackgroundPositionProps as s, MaxHeightProps as st, AlignContentProps as t, JustifySelfProps as tt, BackgroundSizeProps as u, MinWidthProps as ut, BorderTopProps as v, ResponsiveValue as vt, ColorStyleProps as w, SpaceProps as wt, BoxShadowProps as x, Scale as xt, BorderWidthProps as y, RightProps as yt, GridAreaProps as z, ThemeValue as zt };
+export { GridTemplateRowsProps as $, FlexDirectionProps as A, TextAlignLastProps as At, GapProps as B, TextStyleProps as Bt, ButtonStyleProps as C, RowGapProps as Ct, ContainerProps as D, SpaceProps as Dt, ColumnGapProps as E, SizeProps as Et, FlexboxProps as F, TextDecorationProps as Ft, GridColumnGapProps as G, TypographyProps as Gt, GridAutoColumnsProps as H, Theme as Ht, FontFamilyProps as I, TextDecorationStyleProps as It, GridProps as J, WidthProps as Jt, GridColumnProps as K, VerticalAlignProps as Kt, FontSizeProps as L, TextDecorationThicknessProps as Lt, FlexProps as M, TextColorProps as Mt, FlexShrinkProps as N, TextDecorationColorProps as Nt, DisplayProps as O, SpanProps as Ot, FlexWrapProps as P, TextDecorationLineProps as Pt, GridTemplateColumnsProps as Q, FontStyleProps as R, TextOverflowProps as Rt, BreakpointName as S, RightProps as St, ColorStyleProps as T, ShadowProps as Tt, GridAutoFlowProps as U, ThemeValue as Ut, GridAreaProps as V, TextTransformProps as Vt, GridAutoRowsProps as W, TopProps as Wt, GridRowProps as X, GridRowGapProps as Y, ZIndexProps as Yt, GridTemplateAreasProps as Z, BorderStyleProps as _, OverflowProps as _t, BackgroundColorProps as a, LayoutProps as at, BottomProps as b, RequiredTheme as bt, BackgroundProps as c, LineHeightProps as ct, BorderBottomProps as d, MaxWidthProps as dt, HeightProps as et, BorderColorProps as f, MinHeightProps as ft, BorderRightProps as g, OrderProps as gt, BorderRadiusProps as h, OpacityProps as ht, AspectRatioProps as i, LayoutGridProps as it, FlexGrowProps as j, TextAlignProps as jt, FlexBasisProps as k, TLengthStyledSystem as kt, BackgroundRepeatProps as l, MarginProps as lt, BorderProps as m, ObjectOrArray as mt, AlignItemsProps as n, JustifyItemsProps as nt, BackgroundImageProps as o, LeftProps as ot, BorderLeftProps as p, MinWidthProps as pt, GridGapProps as q, WhiteSpaceProps as qt, AlignSelfProps as r, JustifySelfProps as rt, BackgroundPositionProps as s, LetterSpacingProps as st, AlignContentProps as t, JustifyContentProps as tt, BackgroundSizeProps as u, MaxHeightProps as ut, BorderTopProps as v, PaddingProps as vt, ColorProps as w, Scale as wt, BoxShadowProps as x, ResponsiveValue as xt, BorderWidthProps as y, PositionProps as yt, FontWeightProps as z, TextShadowProps as zt };

package/dist/typography.d.cts

@@ -1,3 +1,3 @@
-import { Dt as TextAlignProps, F as FontSizeProps, I as FontStyleProps, L as FontWeightProps, P as FontFamilyProps, Pt as TextOverflowProps, Ut as WhiteSpaceProps, Vt as TypographyProps, at as LineHeightProps, it as LetterSpacingProps } from "./types-B0SNbm6V.cjs";
-import { t as typography } from "./index-UGE-V15i.cjs";
+import { Gt as TypographyProps, I as FontFamilyProps, L as FontSizeProps, R as FontStyleProps, Rt as TextOverflowProps, ct as LineHeightProps, jt as TextAlignProps, qt as WhiteSpaceProps, st as LetterSpacingProps, z as FontWeightProps } from "./types-C4ogGxde.cjs";
+import { t as typography } from "./index-Bq7LA-5J.cjs";
 export { type FontFamilyProps, type FontSizeProps, type FontStyleProps, type FontWeightProps, type LetterSpacingProps, type LineHeightProps, type TextAlignProps, type TextOverflowProps, type TypographyProps, type WhiteSpaceProps, typography as default, typography };

package/dist/typography.d.mts

@@ -1,3 +1,3 @@
-import { Dt as TextAlignProps, F as FontSizeProps, I as FontStyleProps, L as FontWeightProps, P as FontFamilyProps, Pt as TextOverflowProps, Ut as WhiteSpaceProps, Vt as TypographyProps, at as LineHeightProps, it as LetterSpacingProps } from "./types-B0SNbm6V.mjs";
-import { t as typography } from "./index-BReBwT6c.mjs";
+import { Gt as TypographyProps, I as FontFamilyProps, L as FontSizeProps, R as FontStyleProps, Rt as TextOverflowProps, ct as LineHeightProps, jt as TextAlignProps, qt as WhiteSpaceProps, st as LetterSpacingProps, z as FontWeightProps } from "./types-C4ogGxde.mjs";
+import { t as typography } from "./index-CkSwZa-Z.mjs";
 export { type FontFamilyProps, type FontSizeProps, type FontStyleProps, type FontWeightProps, type LetterSpacingProps, type LineHeightProps, type TextAlignProps, type TextOverflowProps, type TypographyProps, type WhiteSpaceProps, typography as default, typography };

package/dist/{variant-DdSForfI.cjs → variant-BSPTyRcQ.cjs}

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

package/dist/{variant-DfRW-ZJe.mjs → variant-D1u5rSqm.mjs}

@@ -1,5 +1,5 @@
 import { createParser, get } from "./core.mjs";
-import { t as css } from "./css-CunBKyMl.mjs";
+import { t as css } from "./css-Ba4jdXOq.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-DdSForfI.cjs");
+const require_variant = require("./variant-BSPTyRcQ.cjs");
 exports.buttonStyle = require_variant.buttonStyle;
 exports.colorStyle = require_variant.colorStyle;
 exports.default = require_variant.variant;

package/dist/variant.d.cts

@@ -1,3 +1,3 @@
-import { It as TextStyleProps, S as ButtonStyleProps, w as ColorStyleProps } from "./types-B0SNbm6V.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 { Bt as TextStyleProps, C as ButtonStyleProps, T as ColorStyleProps } from "./types-C4ogGxde.cjs";
+import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-BgcnUGws.cjs";
 export { type ButtonStyleProps, type ColorStyleProps, type TextStyleProps, VariantArgs, VariantOptions, buttonStyle, colorStyle, variant as default, variant, textStyle };

package/dist/variant.d.mts

@@ -1,3 +1,3 @@
-import { It as TextStyleProps, S as ButtonStyleProps, w as ColorStyleProps } from "./types-B0SNbm6V.mjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-BKofCDzL.mjs";
+import { Bt as TextStyleProps, C as ButtonStyleProps, T as ColorStyleProps } from "./types-C4ogGxde.mjs";
+import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-Cow4kTN2.mjs";
 export { type ButtonStyleProps, type ColorStyleProps, type TextStyleProps, VariantArgs, VariantOptions, buttonStyle, colorStyle, variant as default, variant, textStyle };

package/dist/variant.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/styled-system",
-  "version": "5.9.0-alpha.0",
+  "version": "6.0.0-alpha.1",
   "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",

package/dist/grid-Bpk-QjhF.mjs

@@ -1,41 +0,0 @@
-import { 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
-export { grid as t };

package/dist/grid-CpvRIng4.cjs

@@ -1,47 +0,0 @@
-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
-Object.defineProperty(exports, "grid", {
-	enumerable: true,
-	get: function() {
-		return grid;
-	}
-});

package/dist/index-0k2kzlK5.d.cts

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

package/dist/index-BReBwT6c.d.mts

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

package/dist/index-BhbWZw53.d.mts

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

package/dist/index-C-B6-_Ku.d.mts

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

package/dist/index-C9CxJ5Zn.d.cts

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

package/dist/index-CIccdXWj.d.cts

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

package/dist/index-CJT-n3Vq.d.mts

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

package/dist/index-CcorN1bQ.d.mts

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

package/dist/index-Cd_CcxMh.d.cts

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

package/dist/index-Co0JY1hd.d.cts

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

package/dist/index-D9dwDAhC.d.mts

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

package/dist/index-DP40bJIa.d.cts

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

package/dist/index-DQhcFrR9.d.mts

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

package/dist/index-DcRfFIAZ.d.mts

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

package/dist/index-Dsc6RgbZ.d.cts

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

package/dist/index-Q8q5VND1.d.cts

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

package/dist/index-UGE-V15i.d.cts

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

package/dist/index-sk97pkUE.d.mts

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

package/dist/media-B8UpEDpY.mjs

@@ -1,18 +0,0 @@
-//#region src/core/media.ts
-const isLength = (value) => /^[\d.+-]|^(calc|min|max|clamp)\(/.test(value);
-/**
-* The `@media` rule for one breakpoint value. A length is a min-width (a number
-* gets `px`); a string starting with `@media` is used as written; anything else
-* is a media query list - a condition like `(600px <= width < 1200px)` or
-* `(orientation: landscape)`, or a media type - and follows `@media `.
-*/
-const createMediaQuery = (value) => {
-	if (typeof value === "number") return `@media screen and (min-width: ${value}px)`;
-	if (value.startsWith("@media")) return value;
-	if (isLength(value)) return `@media screen and (min-width: ${value})`;
-	return `@media ${value}`;
-};
-/** Each breakpoint's `@media` rule, in declared order, keyed by its name (or array index). */
-const breakpointQueries = (breakpoints) => Object.entries(breakpoints).map(([key, value]) => [key, createMediaQuery(value)]);
-//#endregion
-export { createMediaQuery as n, breakpointQueries as t };

package/dist/media-BoIPXBPV.cjs

@@ -1,29 +0,0 @@
-//#region src/core/media.ts
-const isLength = (value) => /^[\d.+-]|^(calc|min|max|clamp)\(/.test(value);
-/**
-* The `@media` rule for one breakpoint value. A length is a min-width (a number
-* gets `px`); a string starting with `@media` is used as written; anything else
-* is a media query list - a condition like `(600px <= width < 1200px)` or
-* `(orientation: landscape)`, or a media type - and follows `@media `.
-*/
-const createMediaQuery = (value) => {
-	if (typeof value === "number") return `@media screen and (min-width: ${value}px)`;
-	if (value.startsWith("@media")) return value;
-	if (isLength(value)) return `@media screen and (min-width: ${value})`;
-	return `@media ${value}`;
-};
-/** Each breakpoint's `@media` rule, in declared order, keyed by its name (or array index). */
-const breakpointQueries = (breakpoints) => Object.entries(breakpoints).map(([key, value]) => [key, createMediaQuery(value)]);
-//#endregion
-Object.defineProperty(exports, "breakpointQueries", {
-	enumerable: true,
-	get: function() {
-		return breakpointQueries;
-	}
-});
-Object.defineProperty(exports, "createMediaQuery", {
-	enumerable: true,
-	get: function() {
-		return createMediaQuery;
-	}
-});

package/dist/media-np0uvO4C.d.cts

@@ -1,14 +0,0 @@
-//#region src/core/media.d.ts
-/** `theme.breakpoints`: an ascending list, or named breakpoints in their declared order. */
-type Breakpoints = readonly (string | number)[] | Record<string, string | number>;
-/**
- * The `@media` rule for one breakpoint value. A length is a min-width (a number
- * gets `px`); a string starting with `@media` is used as written; anything else
- * is a media query list - a condition like `(600px <= width < 1200px)` or
- * `(orientation: landscape)`, or a media type - and follows `@media `.
- */
-declare const createMediaQuery: (value: string | number) => string;
-/** Each breakpoint's `@media` rule, in declared order, keyed by its name (or array index). */
-declare const breakpointQueries: (breakpoints: Breakpoints) => [string, string][];
-//#endregion
-export { breakpointQueries as n, createMediaQuery as r, Breakpoints as t };

package/dist/media-np0uvO4C.d.mts

@@ -1,14 +0,0 @@
-//#region src/core/media.d.ts
-/** `theme.breakpoints`: an ascending list, or named breakpoints in their declared order. */
-type Breakpoints = readonly (string | number)[] | Record<string, string | number>;
-/**
- * The `@media` rule for one breakpoint value. A length is a min-width (a number
- * gets `px`); a string starting with `@media` is used as written; anything else
- * is a media query list - a condition like `(600px <= width < 1200px)` or
- * `(orientation: landscape)`, or a media type - and follows `@media `.
- */
-declare const createMediaQuery: (value: string | number) => string;
-/** Each breakpoint's `@media` rule, in declared order, keyed by its name (or array index). */
-declare const breakpointQueries: (breakpoints: Breakpoints) => [string, string][];
-//#endregion
-export { breakpointQueries as n, createMediaQuery as r, Breakpoints as t };