@chakra-ui/styled-system - npm Package Compare versions

Comparing version 1.0.0-rc.1 to 1.0.0-rc.2

CHANGELOG.md

 # Change Log
 
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.0.0-rc.2 (2020-08-09)
+
+**Note:** Version bump only for package @chakra-ui/styled-system
+
+
+
+
+
+# Change Log
+
 All notable changes to this project will be documented in this file. See
@@ -4,0 +17,0 @@ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

dist/cjs/pseudo/pseudo.utils.js

@@ -14,3 +14,3 @@ "use strict";
 
-var getPropName = (0, _utils.memoizeOne)(function (prop) {
+var getPropName = (0, _utils.memoize)(function (prop) {
   return isPseudoProp(prop) ? _pseudo.pseudoSelectors[prop] : prop;
@@ -17,0 +17,0 @@ });

dist/esm/pseudo/pseudo.utils.js

@@ -1,2 +0,2 @@
-import { memoizeOne, isObject, isFunction } from "@chakra-ui/utils";
+import { memoize, isObject, isFunction } from "@chakra-ui/utils";
 import { pseudoSelectors } from "./pseudo.selector";
@@ -6,3 +6,3 @@
 
-var getPropName = memoizeOne(prop => isPseudoProp(prop) ? pseudoSelectors[prop] : prop);
+var getPropName = memoize(prop => isPseudoProp(prop) ? pseudoSelectors[prop] : prop);
 export function parsePseudo(props) {
@@ -9,0 +9,0 @@ var next = {};

dist/types/config/background.d.ts

@@ -8,73 +8,73 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    bg?: ResponsiveValue<CSS.BackgroundProperty<Length>>;
+    bg?: ResponsiveValue<CSS.Property.Background<Length>>;
     /**
      * The CSS `background` property
      */
-    background?: ResponsiveValue<CSS.BackgroundProperty<Length>>;
+    background?: ResponsiveValue<CSS.Property.Background<Length>>;
     /**
      * The CSS `background-color` property
      */
-    bgColor?: ResponsiveValue<CSS.BackgroundColorProperty>;
+    bgColor?: ResponsiveValue<CSS.Property.BackgroundColor>;
     /**
      * The CSS `background-color` property
      */
-    backgroundColor?: ResponsiveValue<CSS.BackgroundColorProperty>;
+    backgroundColor?: ResponsiveValue<CSS.Property.BackgroundColor>;
     /**
      * The CSS `background-image` property
      */
-    backgroundImage?: ResponsiveValue<CSS.BackgroundImageProperty>;
+    backgroundImage?: ResponsiveValue<CSS.Property.BackgroundImage>;
     /**
      * The CSS `background-blend-mode` property
      */
-    backgroundBlendMode?: ResponsiveValue<CSS.BackgroundBlendModeProperty>;
+    backgroundBlendMode?: ResponsiveValue<CSS.Property.BackgroundBlendMode>;
     /**
      * The CSS `background-blend-mode` property
      */
-    bgBlendMode?: ResponsiveValue<CSS.BackgroundBlendModeProperty>;
+    bgBlendMode?: ResponsiveValue<CSS.Property.BackgroundBlendMode>;
     /**
      * The CSS `background-size` property
      */
-    backgroundSize?: ResponsiveValue<CSS.BackgroundSizeProperty<Length>>;
+    backgroundSize?: ResponsiveValue<CSS.Property.BackgroundSize<Length>>;
     /**
      * The CSS `background-position` property
      */
-    bgPos?: ResponsiveValue<CSS.BackgroundPositionProperty<Length>>;
+    bgPos?: ResponsiveValue<CSS.Property.BackgroundPosition<Length>>;
     /**
      * The CSS `background-position` property
      */
-    backgroundPosition?: ResponsiveValue<CSS.BackgroundPositionProperty<Length>>;
+    backgroundPosition?: ResponsiveValue<CSS.Property.BackgroundPosition<Length>>;
     /**
      * The CSS `background-image` property
      */
-    bgImage?: ResponsiveValue<CSS.BackgroundImageProperty>;
+    bgImage?: ResponsiveValue<CSS.Property.BackgroundImage>;
     /**
      * The CSS `background-image` property
      */
-    bgImg?: ResponsiveValue<CSS.BackgroundImageProperty>;
+    bgImg?: ResponsiveValue<CSS.Property.BackgroundImage>;
     /**
      * The CSS `background-repeat` property
      */
-    bgRepeat?: ResponsiveValue<CSS.BackgroundRepeatProperty>;
+    bgRepeat?: ResponsiveValue<CSS.Property.BackgroundRepeat>;
     /**
      * The CSS `background-repeat` property
      */
-    backgroundRepeat?: ResponsiveValue<CSS.BackgroundRepeatProperty>;
+    backgroundRepeat?: ResponsiveValue<CSS.Property.BackgroundRepeat>;
     /**
      * The CSS `background-size` property
      */
-    bgSize?: ResponsiveValue<CSS.BackgroundSizeProperty<Length>>;
+    bgSize?: ResponsiveValue<CSS.Property.BackgroundSize<Length>>;
     /**
      * The CSS `background-attachment` property
      */
-    bgAttachment?: ResponsiveValue<CSS.BackgroundAttachmentProperty>;
+    bgAttachment?: ResponsiveValue<CSS.Property.BackgroundAttachment>;
     /**
      * The CSS `background-attachment` property
      */
-    backgroundAttachment?: ResponsiveValue<CSS.BackgroundAttachmentProperty>;
+    backgroundAttachment?: ResponsiveValue<CSS.Property.BackgroundAttachment>;
     /**
      * The CSS `background-position` property
      */
-    bgPosition?: ResponsiveValue<CSS.BackgroundPositionProperty<Length>>;
+    bgPosition?: ResponsiveValue<CSS.Property.BackgroundPosition<Length>>;
 }
 export declare const background: import("@styled-system/core").styleFn;
 export declare const backgroundParser: import("@styled-system/core").styleFn;

dist/types/config/border.d.ts

@@ -11,19 +11,19 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    border?: ResponsiveValue<CSS.BorderProperty<Length>>;
+    border?: ResponsiveValue<CSS.Property.Border<Length>>;
     /**
      * The CSS `border-width` property
      */
-    borderWidth?: ResponsiveValue<CSS.BorderWidthProperty<Length>>;
+    borderWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
     /**
      * The CSS `border-style` property
      */
-    borderStyle?: ResponsiveValue<CSS.BorderStyleProperty>;
+    borderStyle?: ResponsiveValue<CSS.Property.BorderStyle>;
     /**
      * The CSS `border-color` property
      */
-    borderColor?: ResponsiveValue<CSS.BorderTopColorProperty>;
+    borderColor?: ResponsiveValue<CSS.Property.BorderTopColor>;
     /**
      * The CSS `border-radius` property
      */
-    borderRadius?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    borderRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
@@ -33,71 +33,71 @@ * The CSS `border-radius` property
      */
-    rounded?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    rounded?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
      * The CSS `border-top` property
      */
-    borderTop?: ResponsiveValue<CSS.BorderTopProperty<Length>>;
+    borderTop?: ResponsiveValue<CSS.Property.BorderTop<Length>>;
     /**
      * The CSS `border-top-width` property
      */
-    borderTopWidth?: ResponsiveValue<CSS.BorderWidthProperty<Length>>;
+    borderTopWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
     /**
      * The CSS `border-bottom-width` property
      */
-    borderBottomWidth?: ResponsiveValue<CSS.BorderWidthProperty<Length>>;
+    borderBottomWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
     /**
      * The CSS `border-left-width` property
      */
-    borderLeftWidth?: ResponsiveValue<CSS.BorderWidthProperty<Length>>;
+    borderLeftWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
     /**
      * The CSS `border-right-width` property
      */
-    borderRightWidth?: ResponsiveValue<CSS.BorderWidthProperty<Length>>;
+    borderRightWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
     /**
      * The CSS `border-top-style` property
      */
-    borderTopStyle?: ResponsiveValue<CSS.BorderTopStyleProperty>;
+    borderTopStyle?: ResponsiveValue<CSS.Property.BorderTopStyle>;
     /**
      * The CSS `border-bottom-style` property
      */
-    borderBottomStyle?: ResponsiveValue<CSS.BorderBottomStyleProperty>;
+    borderBottomStyle?: ResponsiveValue<CSS.Property.BorderBottomStyle>;
     /**
      * The CSS `border-left-style` property
      */
-    borderLeftStyle?: ResponsiveValue<CSS.BorderLeftStyleProperty>;
+    borderLeftStyle?: ResponsiveValue<CSS.Property.BorderLeftStyle>;
     /**
      * The CSS `border-right-styles` property
      */
-    borderRightStyle?: ResponsiveValue<CSS.BorderRightStyleProperty>;
+    borderRightStyle?: ResponsiveValue<CSS.Property.BorderRightStyle>;
     /**
      * The CSS `border-top-color` property
      */
-    borderTopColor?: ResponsiveValue<CSS.BorderTopColorProperty>;
+    borderTopColor?: ResponsiveValue<CSS.Property.BorderTopColor>;
     /**
      * The CSS `border-bottom-color` property
      */
-    borderBottomColor?: ResponsiveValue<CSS.BorderBottomColorProperty>;
+    borderBottomColor?: ResponsiveValue<CSS.Property.BorderBottomColor>;
     /**
      * The CSS `border-left-color` property
      */
-    borderLeftColor?: ResponsiveValue<CSS.BorderLeftColorProperty>;
+    borderLeftColor?: ResponsiveValue<CSS.Property.BorderLeftColor>;
     /**
      * The CSS `border-right-color` property
      */
-    borderRightColor?: ResponsiveValue<CSS.BorderRightColorProperty>;
+    borderRightColor?: ResponsiveValue<CSS.Property.BorderRightColor>;
     /**
      * The CSS `border-right` property
      */
-    borderRight?: ResponsiveValue<CSS.BorderRightProperty<Length>>;
+    borderRight?: ResponsiveValue<CSS.Property.BorderRight<Length>>;
     /**
      * The CSS `border-bottom` property
      */
-    borderBottom?: ResponsiveValue<CSS.BorderBottomProperty<Length>>;
+    borderBottom?: ResponsiveValue<CSS.Property.BorderBottom<Length>>;
     /**
      * The CSS `border-left` property
      */
-    borderLeft?: ResponsiveValue<CSS.BorderLeftProperty<Length>>;
+    borderLeft?: ResponsiveValue<CSS.Property.BorderLeft<Length>>;
     /**
      * The CSS `border-top-radius` property
      */
-    borderTopRadius?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    borderTopRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
@@ -107,7 +107,7 @@ * The CSS `border-top-radius` property
      */
-    roundedTop?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    roundedTop?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
      * The CSS `border-right-radius` property
      */
-    borderRightRadius?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    borderRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
@@ -117,7 +117,7 @@ * The CSS `border-right-radius` property
      */
-    roundedRight?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    roundedRight?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
      * The CSS `border-bottom-radius` property
      */
-    borderBottomRadius?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    borderBottomRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
@@ -127,7 +127,7 @@ * The CSS `border-bottom-radius` property
      */
-    roundedBottom?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    roundedBottom?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
      * The CSS `border-left-radius` property
      */
-    borderLeftRadius?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    borderLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
@@ -137,7 +137,7 @@ * The CSS `border-left-radius` property
      */
-    roundedLeft?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    roundedLeft?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
      * The CSS `border-top-left-radius` property
      */
-    borderTopLeftRadius?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    borderTopLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
@@ -147,7 +147,7 @@ * The CSS `border-top-left-radius` property
      */
-    roundedTopLeft?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    roundedTopLeft?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
      * The CSS `border-top-right-radius` property
      */
-    borderTopRightRadius?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    borderTopRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
@@ -157,7 +157,7 @@ * The CSS `border-top-right-radius` property
      */
-    roundedTopRight?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    roundedTopRight?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
      * The CSS `border-bottom-left-radius` property
      */
-    borderBottomLeftRadius?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    borderBottomLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
@@ -167,7 +167,7 @@ * The CSS `border-bottom-left-radius` property
      */
-    roundedBottomLeft?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    roundedBottomLeft?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
      * The CSS `border-bottom-right-radius` property
      */
-    borderBottomRightRadius?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    borderBottomRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
@@ -177,13 +177,13 @@ * The CSS `border-bottom-right-radius` property
      */
-    roundedBottomRight?: ResponsiveValue<CSS.BorderRadiusProperty<Length>>;
+    roundedBottomRight?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     /**
      * The CSS `border-right` and `border-left` property
      */
-    borderX?: ResponsiveValue<CSS.BorderProperty<Length>>;
+    borderX?: ResponsiveValue<CSS.Property.Border<Length>>;
     /**
      * The CSS `border-top` and `border-bottom` property
      */
-    borderY?: ResponsiveValue<CSS.BorderProperty<Length>>;
+    borderY?: ResponsiveValue<CSS.Property.Border<Length>>;
 }
 export declare const border: import("@styled-system/core").styleFn;
 export declare const borderParser: import("@styled-system/core").styleFn;

dist/types/config/color.d.ts

@@ -8,21 +8,21 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    textColor?: ResponsiveValue<CSS.ColorProperty>;
+    textColor?: ResponsiveValue<CSS.Property.Color>;
     /**
      * The CSS `color` property
      */
-    color?: ResponsiveValue<CSS.ColorProperty>;
+    color?: ResponsiveValue<CSS.Property.Color>;
     /**
      * The CSS `fill` property for icon svgs and paths
      */
-    fill?: ResponsiveValue<CSS.ColorProperty>;
+    fill?: ResponsiveValue<CSS.Property.Color>;
     /**
      * The CSS `stroke` property for icon svgs and paths
      */
-    stroke?: ResponsiveValue<CSS.ColorProperty>;
+    stroke?: ResponsiveValue<CSS.Property.Color>;
     /**
      * The CSS `opacity` property
      */
-    opacity?: ResponsiveValue<CSS.GlobalsNumber>;
+    opacity?: ResponsiveValue<CSS.Property.Opacity>;
 }
 export declare const color: import("@styled-system/core").styleFn;
 export declare const colorParser: import("@styled-system/core").styleFn;

dist/types/config/flexbox.d.ts

@@ -11,57 +11,57 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    alignItems?: ResponsiveValue<CSS.AlignItemsProperty>;
+    alignItems?: ResponsiveValue<CSS.Property.AlignItems>;
     /**
      * The CSS `align-content` property
      */
-    alignContent?: ResponsiveValue<CSS.AlignContentProperty>;
+    alignContent?: ResponsiveValue<CSS.Property.AlignContent>;
     /**
      * The CSS `justify-items` property
      */
-    justifyItems?: ResponsiveValue<CSS.JustifyItemsProperty>;
+    justifyItems?: ResponsiveValue<CSS.Property.JustifyItems>;
     /**
      * The CSS `justify-content` property
      */
-    justifyContent?: ResponsiveValue<CSS.JustifyContentProperty>;
+    justifyContent?: ResponsiveValue<CSS.Property.JustifyContent>;
     /**
      * The CSS `flex-wrap` property
      */
-    flexWrap?: ResponsiveValue<CSS.FlexWrapProperty>;
+    flexWrap?: ResponsiveValue<CSS.Property.FlexWrap>;
     /**
      * The CSS `flex-basis` property
      */
-    flexBasis?: ResponsiveValue<CSS.FlexBasisProperty<Length>>;
+    flexBasis?: ResponsiveValue<CSS.Property.FlexBasis<Length>>;
     /**
      * The CSS `flex-direction` property
      */
-    flexDirection?: ResponsiveValue<CSS.FlexDirectionProperty>;
+    flexDirection?: ResponsiveValue<CSS.Property.FlexDirection>;
     /**
      * The CSS `flex-direction` property
      */
-    flexDir?: ResponsiveValue<CSS.FlexDirectionProperty>;
+    flexDir?: ResponsiveValue<CSS.Property.FlexDirection>;
     /**
      * The CSS `flex` property
      */
-    flex?: ResponsiveValue<CSS.FlexProperty<Length>>;
+    flex?: ResponsiveValue<CSS.Property.Flex<Length>>;
     /**
      * The CSS `justify-self` property
      */
-    justifySelf?: ResponsiveValue<CSS.JustifySelfProperty>;
+    justifySelf?: ResponsiveValue<CSS.Property.JustifySelf>;
     /**
      * The CSS `align-self` property
      */
-    alignSelf?: ResponsiveValue<CSS.AlignSelfProperty>;
+    alignSelf?: ResponsiveValue<CSS.Property.AlignSelf>;
     /**
      * The CSS `order` property
      */
-    order?: ResponsiveValue<CSS.GlobalsNumber>;
+    order?: ResponsiveValue<CSS.Property.Order>;
     /**
      * The CSS `flex-grow` property
      */
-    flexGrow?: ResponsiveValue<CSS.GlobalsNumber>;
+    flexGrow?: ResponsiveValue<CSS.Property.FlexGrow>;
     /**
      * The CSS `flex-shrink` property
      */
-    flexShrink?: ResponsiveValue<CSS.GlobalsNumber>;
+    flexShrink?: ResponsiveValue<CSS.Property.FlexShrink>;
 }
 export declare const flexbox: import("@styled-system/core").styleFn;
 export declare const flexboxParser: import("@styled-system/core").styleFn;

dist/types/config/grid.d.ts

@@ -11,53 +11,53 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    gridGap?: ResponsiveValue<CSS.GridGapProperty<Length>>;
+    gridGap?: ResponsiveValue<CSS.Property.GridGap<Length>>;
     /**
      * The CSS `grid-column-gap` property
      */
-    gridColumnGap?: ResponsiveValue<CSS.GridColumnGapProperty<Length>>;
+    gridColumnGap?: ResponsiveValue<CSS.Property.GridColumnGap<Length>>;
     /**
      * The CSS `grid-row-gap` property
      */
-    gridRowGap?: ResponsiveValue<CSS.GridRowGapProperty<Length>>;
+    gridRowGap?: ResponsiveValue<CSS.Property.GridRowGap<Length>>;
     /**
      * The CSS `grid-column` property
      */
-    gridColumn?: ResponsiveValue<CSS.GridColumnProperty>;
+    gridColumn?: ResponsiveValue<CSS.Property.GridColumn>;
     /**
      * The CSS `grid-row` property
      */
-    gridRow?: ResponsiveValue<CSS.GridRowProperty>;
+    gridRow?: ResponsiveValue<CSS.Property.GridRow>;
     /**
      * The CSS `grid-auto-flow` property
      */
-    gridAutoFlow?: ResponsiveValue<CSS.GridAutoFlowProperty>;
+    gridAutoFlow?: ResponsiveValue<CSS.Property.GridAutoFlow>;
     /**
      * The CSS `grid-auto-columns` property
      */
-    gridAutoColumns?: ResponsiveValue<CSS.GridAutoColumnsProperty<Length>>;
+    gridAutoColumns?: ResponsiveValue<CSS.Property.GridAutoColumns<Length>>;
     /**
      * The CSS `grid-auto-rows` property
      */
-    gridAutoRows?: ResponsiveValue<CSS.GridAutoRowsProperty<Length>>;
+    gridAutoRows?: ResponsiveValue<CSS.Property.GridAutoRows<Length>>;
     /**
      * The CSS `grid-template-columns` property
      */
-    gridTemplateColumns?: ResponsiveValue<CSS.GridTemplateColumnsProperty<Length>>;
+    gridTemplateColumns?: ResponsiveValue<CSS.Property.GridTemplateColumns<Length>>;
     /**
      * The CSS `grid-template-rows` property
      */
-    gridTemplateRows?: ResponsiveValue<CSS.GridTemplateRowsProperty<Length>>;
+    gridTemplateRows?: ResponsiveValue<CSS.Property.GridTemplateRows<Length>>;
     /**
      * The CSS `grid-template-areas` property
      */
-    gridTemplateAreas?: ResponsiveValue<CSS.GridTemplateAreasProperty>;
+    gridTemplateAreas?: ResponsiveValue<CSS.Property.GridTemplateAreas>;
     /**
      * The CSS `grid-areas` property
      */
-    gridArea?: ResponsiveValue<CSS.GridAreaProperty>;
+    gridArea?: ResponsiveValue<CSS.Property.GridArea>;
     /**
      * The CSS `place-items` property
      */
-    placeItems?: ResponsiveValue<CSS.PlaceItemsProperty>;
+    placeItems?: ResponsiveValue<CSS.Property.PlaceItems>;
 }
 export declare const grid: import("@styled-system/core").styleFn;
 export declare const gridParser: import("@styled-system/core").styleFn;

dist/types/config/layout.d.ts

@@ -11,81 +11,81 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    display?: ResponsiveValue<CSS.DisplayProperty>;
+    display?: ResponsiveValue<CSS.Property.Display>;
     /**
      * The CSS `display` property
      */
-    d?: ResponsiveValue<CSS.DisplayProperty>;
+    d?: ResponsiveValue<CSS.Property.Display>;
     /**
      * The CSS `width` property
      */
-    width?: ResponsiveValue<CSS.WidthProperty<Length>>;
+    width?: ResponsiveValue<CSS.Property.Width<Length>>;
     /**
      * The CSS `width` property
      */
-    w?: ResponsiveValue<CSS.WidthProperty<Length>>;
+    w?: ResponsiveValue<CSS.Property.Width<Length>>;
     /**
      * The CSS `width` and `height` property
      */
-    boxSize?: ResponsiveValue<CSS.WidthProperty<Length>>;
+    boxSize?: ResponsiveValue<CSS.Property.Width<Length>>;
     /**
      * The CSS `max-width` property
      */
-    maxWidth?: ResponsiveValue<CSS.MaxWidthProperty<Length>>;
+    maxWidth?: ResponsiveValue<CSS.Property.MaxWidth<Length>>;
     /**
      * The CSS `max-width` property
      */
-    maxW?: ResponsiveValue<CSS.MaxWidthProperty<Length>>;
+    maxW?: ResponsiveValue<CSS.Property.MaxWidth<Length>>;
     /**
      * The CSS `min-width` property
      */
-    minWidth?: ResponsiveValue<CSS.MinWidthProperty<Length>>;
+    minWidth?: ResponsiveValue<CSS.Property.MinWidth<Length>>;
     /**
      * The CSS `min-width` property
      */
-    minW?: ResponsiveValue<CSS.MinWidthProperty<Length>>;
+    minW?: ResponsiveValue<CSS.Property.MinWidth<Length>>;
     /**
      * The CSS `height` property
      */
-    height?: ResponsiveValue<CSS.HeightProperty<Length>>;
+    height?: ResponsiveValue<CSS.Property.Height<Length>>;
     /**
      * The CSS `height` property
      */
-    h?: ResponsiveValue<CSS.HeightProperty<Length>>;
+    h?: ResponsiveValue<CSS.Property.Height<Length>>;
     /**
      * The CSS `max-height` property
      */
-    maxHeight?: ResponsiveValue<CSS.MaxHeightProperty<Length>>;
+    maxHeight?: ResponsiveValue<CSS.Property.MaxHeight<Length>>;
     /**
      * The CSS `max-height` property
      */
-    maxH?: ResponsiveValue<CSS.MaxHeightProperty<Length>>;
+    maxH?: ResponsiveValue<CSS.Property.MaxHeight<Length>>;
     /**
      * The CSS `min-height` property
      */
-    minHeight?: ResponsiveValue<CSS.MinHeightProperty<Length>>;
+    minHeight?: ResponsiveValue<CSS.Property.MinHeight<Length>>;
     /**
      * The CSS `min-height` property
      */
-    minH?: ResponsiveValue<CSS.MinHeightProperty<Length>>;
+    minH?: ResponsiveValue<CSS.Property.MinHeight<Length>>;
     /**
      * The CSS `vertical-align` property
      */
-    verticalAlign?: ResponsiveValue<CSS.VerticalAlignProperty<Length>>;
+    verticalAlign?: ResponsiveValue<CSS.Property.VerticalAlign<Length>>;
     /**
      * The CSS `overflow` property
      */
-    overflow?: ResponsiveValue<CSS.OverflowProperty>;
+    overflow?: ResponsiveValue<CSS.Property.Overflow>;
     /**
      * The CSS `overflow-x` property
      */
-    overflowX?: ResponsiveValue<CSS.OverflowXProperty>;
+    overflowX?: ResponsiveValue<CSS.Property.OverflowX>;
     /**
      * The CSS `overflow-y` property
      */
-    overflowY?: ResponsiveValue<CSS.OverflowYProperty>;
+    overflowY?: ResponsiveValue<CSS.Property.OverflowY>;
     /**
      * The CSS `box-sizing` property
      */
-    boxSizing?: CSS.BoxSizingProperty;
+    boxSizing?: CSS.Property.BoxSizing;
 }
 export declare const layout: import("@styled-system/core").styleFn;
 export declare const layoutParser: import("@styled-system/core").styleFn;

dist/types/config/list.d.ts

@@ -5,21 +5,21 @@ /// <reference path="../styled-system__core.d.ts" />
 export interface ListProps {
-    listStyleType?: ResponsiveValue<CSS.ListStyleTypeProperty>;
+    listStyleType?: ResponsiveValue<CSS.Property.ListStyleType>;
     /**
      * The CSS `list-style-position` property
      */
-    listStylePosition?: ResponsiveValue<CSS.ListStylePositionProperty>;
+    listStylePosition?: ResponsiveValue<CSS.Property.ListStylePosition>;
     /**
      * The CSS `list-style-position` property
      */
-    listStylePos?: ResponsiveValue<CSS.ListStylePositionProperty>;
+    listStylePos?: ResponsiveValue<CSS.Property.ListStylePosition>;
     /**
      * The CSS `list-style-image` property
      */
-    listStyleImage?: ResponsiveValue<CSS.ListStyleImageProperty>;
+    listStyleImage?: ResponsiveValue<CSS.Property.ListStyleImage>;
     /**
      * The CSS `list-style-image` property
      */
-    listStyleImg?: ResponsiveValue<CSS.ListStyleImageProperty>;
+    listStyleImg?: ResponsiveValue<CSS.Property.ListStyleImage>;
 }
 export declare const list: import("@styled-system/core").styleFn;
 export declare const listParser: import("@styled-system/core").styleFn;

dist/types/config/others.d.ts

@@ -8,45 +8,45 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    animation?: ResponsiveValue<CSS.AnimationProperty>;
+    animation?: ResponsiveValue<CSS.Property.Animation>;
     /**
      * The CSS `appearance` property
      */
-    appearance?: ResponsiveValue<CSS.AppearanceProperty>;
+    appearance?: ResponsiveValue<CSS.Property.Appearance>;
     /**
      * The CSS `visibility` property
      */
-    visibility?: ResponsiveValue<CSS.VisibilityProperty>;
+    visibility?: ResponsiveValue<CSS.Property.Visibility>;
     /**
      * The CSS `user-select` property
      */
-    userSelect?: ResponsiveValue<CSS.UserSelectProperty>;
+    userSelect?: ResponsiveValue<CSS.Property.UserSelect>;
     /**
      * The CSS `pointer-events` property
      */
-    pointerEvents?: ResponsiveValue<CSS.PointerEventsProperty>;
+    pointerEvents?: ResponsiveValue<CSS.Property.PointerEvents>;
     /**
      * The CSS `cursor` property
      */
-    cursor?: ResponsiveValue<CSS.CursorProperty>;
+    cursor?: ResponsiveValue<CSS.Property.Cursor>;
     /**
      * The CSS `resize` property
      */
-    resize?: ResponsiveValue<CSS.ResizeProperty>;
+    resize?: ResponsiveValue<CSS.Property.Resize>;
     /**
      * The CSS `object-fit` property
      */
-    objectFit?: ResponsiveValue<CSS.ObjectFitProperty>;
+    objectFit?: ResponsiveValue<CSS.Property.ObjectFit>;
     /**
      * The CSS `object-psition` property
      */
-    objectPosition?: ResponsiveValue<CSS.ObjectPositionProperty<Length>>;
+    objectPosition?: ResponsiveValue<CSS.Property.ObjectPosition<Length>>;
     /**
      * The CSS `float` property
      */
-    float?: ResponsiveValue<CSS.FloatProperty>;
+    float?: ResponsiveValue<CSS.Property.Float>;
     /**
      * The CSS `will-change` property
      */
-    willChange?: ResponsiveValue<CSS.WillChangeProperty>;
+    willChange?: ResponsiveValue<CSS.Property.WillChange>;
 }
 export declare const others: import("@styled-system/core").styleFn;
 export declare const othersParser: import("@styled-system/core").styleFn;

dist/types/config/outline.d.ts

@@ -8,13 +8,13 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    outline?: ResponsiveValue<CSS.OutlineProperty<Length>>;
+    outline?: ResponsiveValue<CSS.Property.Outline<Length>>;
     /**
      * The CSS `outline-offset` property
      */
-    outlineOffset?: ResponsiveValue<CSS.OutlineOffsetProperty<Length>>;
+    outlineOffset?: ResponsiveValue<CSS.Property.OutlineOffset<Length>>;
     /**
      * The CSS `outline-color` property
      */
-    outlineColor?: ResponsiveValue<CSS.OutlineColorProperty>;
+    outlineColor?: ResponsiveValue<CSS.Property.OutlineColor>;
 }
 export declare const outline: import("@styled-system/core").styleFn;
 export declare const outlineParser: import("@styled-system/core").styleFn;

dist/types/config/position.d.ts

@@ -11,41 +11,41 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    zIndex?: ResponsiveValue<string | CSS.ZIndexProperty>;
+    zIndex?: ResponsiveValue<string | CSS.Property.ZIndex>;
     /**
      * The CSS `top` property
      */
-    top?: ResponsiveValue<CSS.TopProperty<Length>>;
+    top?: ResponsiveValue<CSS.Property.Top<Length>>;
     /**
      * The CSS `right` property
      */
-    right?: ResponsiveValue<CSS.RightProperty<Length>>;
+    right?: ResponsiveValue<CSS.Property.Right<Length>>;
     /**
      * The CSS `bottom` property
      */
-    bottom?: ResponsiveValue<CSS.BottomProperty<Length>>;
+    bottom?: ResponsiveValue<CSS.Property.Bottom<Length>>;
     /**
      * The CSS `left` property
      */
-    left?: ResponsiveValue<CSS.LeftProperty<Length>>;
+    left?: ResponsiveValue<CSS.Property.Left<Length>>;
     /**
      * The CSS `left`, `right`, `top`, `bottom` property
      */
-    inset?: ResponsiveValue<CSS.LeftProperty<Length>>;
+    inset?: ResponsiveValue<CSS.Property.Left<Length>>;
     /**
      * The CSS `left`, and `right` property
      */
-    insetX?: ResponsiveValue<CSS.LeftProperty<Length>>;
+    insetX?: ResponsiveValue<CSS.Property.Left<Length>>;
     /**
      * The CSS `top`, and `bottom` property
      */
-    insetY?: ResponsiveValue<CSS.LeftProperty<Length>>;
+    insetY?: ResponsiveValue<CSS.Property.Left<Length>>;
     /**
      * The CSS `position` property
      */
-    pos?: ResponsiveValue<CSS.PositionProperty>;
+    pos?: ResponsiveValue<CSS.Property.Position>;
     /**
      * The CSS `position` property
      */
-    position?: ResponsiveValue<CSS.PositionProperty>;
+    position?: ResponsiveValue<CSS.Property.Position>;
 }
 export declare const position: import("@styled-system/core").styleFn;
 export declare const positionParser: import("@styled-system/core").styleFn;

dist/types/config/shadow.d.ts

@@ -11,13 +11,13 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    boxShadow?: ResponsiveValue<CSS.BoxShadowProperty | number>;
+    boxShadow?: ResponsiveValue<CSS.Property.BoxShadow | number>;
     /**
      * The `box-shadow` property
      */
-    shadow?: ResponsiveValue<CSS.BoxShadowProperty | number>;
+    shadow?: ResponsiveValue<CSS.Property.BoxShadow | number>;
     /**
      * The `text-shadow` property
      */
-    textShadow?: ResponsiveValue<CSS.TextShadowProperty | number>;
+    textShadow?: ResponsiveValue<CSS.Property.TextShadow | number>;
 }
 export declare const shadow: import("@styled-system/core").styleFn;
 export declare const shadowParser: import("@styled-system/core").styleFn;

dist/types/config/space.d.ts

@@ -11,111 +11,111 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    m?: ResponsiveValue<CSS.MarginProperty<Length>>;
+    m?: ResponsiveValue<CSS.Property.Margin<Length>>;
     /**
      * Margin on top, left, bottom and right
      */
-    margin?: ResponsiveValue<CSS.MarginProperty<Length>>;
+    margin?: ResponsiveValue<CSS.Property.Margin<Length>>;
     /**
      * Margin on top
      */
-    mt?: ResponsiveValue<CSS.MarginProperty<Length>>;
+    mt?: ResponsiveValue<CSS.Property.Margin<Length>>;
     /**
      * Margin on top
      */
-    marginTop?: ResponsiveValue<CSS.MarginTopProperty<Length>>;
+    marginTop?: ResponsiveValue<CSS.Property.MarginTop<Length>>;
     /**
      * Margin on right
      */
-    mr?: ResponsiveValue<CSS.MarginRightProperty<Length>>;
+    mr?: ResponsiveValue<CSS.Property.MarginRight<Length>>;
     /**
      * Margin on right
      */
-    marginRight?: ResponsiveValue<CSS.MarginRightProperty<Length>>;
+    marginRight?: ResponsiveValue<CSS.Property.MarginRight<Length>>;
     /**
      * Margin on bottom
      */
-    mb?: ResponsiveValue<CSS.MarginBottomProperty<Length>>;
+    mb?: ResponsiveValue<CSS.Property.MarginBottom<Length>>;
     /**
      * Margin on bottom
      */
-    marginBottom?: ResponsiveValue<CSS.MarginBottomProperty<Length>>;
+    marginBottom?: ResponsiveValue<CSS.Property.MarginBottom<Length>>;
     /**
      * Margin on left
      */
-    ml?: ResponsiveValue<CSS.MarginLeftProperty<Length>>;
+    ml?: ResponsiveValue<CSS.Property.MarginLeft<Length>>;
     /**
      * Margin on left
      */
-    marginLeft?: ResponsiveValue<CSS.MarginLeftProperty<Length>>;
+    marginLeft?: ResponsiveValue<CSS.Property.MarginLeft<Length>>;
     /**
      * Margin on left and right
      */
-    mx?: ResponsiveValue<CSS.MarginProperty<Length>>;
+    mx?: ResponsiveValue<CSS.Property.Margin<Length>>;
     /**
      * Margin on left and right
      */
-    marginX?: ResponsiveValue<CSS.MarginProperty<Length>>;
+    marginX?: ResponsiveValue<CSS.Property.Margin<Length>>;
     /**
      * Margin on top and bottom
      */
-    my?: ResponsiveValue<CSS.MarginProperty<Length>>;
+    my?: ResponsiveValue<CSS.Property.Margin<Length>>;
     /**
      * Margin on top and bottom
      */
-    marginY?: ResponsiveValue<CSS.MarginProperty<Length>>;
+    marginY?: ResponsiveValue<CSS.Property.Margin<Length>>;
     /**
      * Padding on top, left, bottom and right
      */
-    p?: ResponsiveValue<CSS.PaddingProperty<Length>>;
+    p?: ResponsiveValue<CSS.Property.Padding<Length>>;
     /**
      * Padding on top, left, bottom and right
      */
-    padding?: ResponsiveValue<CSS.PaddingProperty<Length>>;
+    padding?: ResponsiveValue<CSS.Property.Padding<Length>>;
     /**
      * Padding on top
      */
-    pt?: ResponsiveValue<CSS.PaddingTopProperty<Length>>;
+    pt?: ResponsiveValue<CSS.Property.PaddingTop<Length>>;
     /**
      * Padding on top
      */
-    paddingTop?: ResponsiveValue<CSS.PaddingTopProperty<Length>>;
+    paddingTop?: ResponsiveValue<CSS.Property.PaddingTop<Length>>;
     /**
      * Padding on right
      */
-    pr?: ResponsiveValue<CSS.PaddingRightProperty<Length>>;
+    pr?: ResponsiveValue<CSS.Property.PaddingRight<Length>>;
     /**
      * Padding on right
      */
-    paddingRight?: ResponsiveValue<CSS.PaddingRightProperty<Length>>;
+    paddingRight?: ResponsiveValue<CSS.Property.PaddingRight<Length>>;
     /**
      * Padding on bottom
      */
-    pb?: ResponsiveValue<CSS.PaddingBottomProperty<Length>>;
+    pb?: ResponsiveValue<CSS.Property.PaddingBottom<Length>>;
     /**
      * Padding on bottom
      */
-    paddingBottom?: ResponsiveValue<CSS.PaddingBottomProperty<Length>>;
+    paddingBottom?: ResponsiveValue<CSS.Property.PaddingBottom<Length>>;
     /**
      * Padding on left
      */
-    pl?: ResponsiveValue<CSS.PaddingLeftProperty<Length>>;
+    pl?: ResponsiveValue<CSS.Property.PaddingLeft<Length>>;
     /**
      * Padding on left
      */
-    paddingLeft?: ResponsiveValue<CSS.PaddingLeftProperty<Length>>;
+    paddingLeft?: ResponsiveValue<CSS.Property.PaddingLeft<Length>>;
     /**
      * Padding on left and right
      */
-    px?: ResponsiveValue<CSS.PaddingProperty<Length>>;
+    px?: ResponsiveValue<CSS.Property.Padding<Length>>;
     /**
      * Padding on left and right
      */
-    paddingX?: ResponsiveValue<CSS.PaddingProperty<Length>>;
+    paddingX?: ResponsiveValue<CSS.Property.Padding<Length>>;
     /**
      * Padding on top and bottom
      */
-    py?: ResponsiveValue<CSS.PaddingProperty<Length>>;
+    py?: ResponsiveValue<CSS.Property.Padding<Length>>;
     /**
      * Padding on top and bottom
      */
-    paddingY?: ResponsiveValue<CSS.PaddingProperty<Length>>;
+    paddingY?: ResponsiveValue<CSS.Property.Padding<Length>>;
 }
@@ -122,0 +122,0 @@ /**

dist/types/config/transform.d.ts

@@ -8,9 +8,9 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    transform?: ResponsiveValue<CSS.TransformProperty>;
+    transform?: ResponsiveValue<CSS.Property.Transform>;
     /**
      * The CSS `transform-origin` property
      */
-    transformOrigin?: ResponsiveValue<CSS.TransformOriginProperty<Length>>;
+    transformOrigin?: ResponsiveValue<CSS.Property.TransformOrigin<Length>>;
 }
 export declare const transform: import("@styled-system/core").styleFn;
 export declare const transformParser: import("@styled-system/core").styleFn;

dist/types/config/transition.d.ts

@@ -8,11 +8,11 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    transition?: ResponsiveValue<CSS.TransitionProperty>;
+    transition?: ResponsiveValue<CSS.Property.Transition>;
     /**
      * The CSS `transition-property` property
      */
-    transitionProperty?: ResponsiveValue<CSS.TransitionPropertyProperty>;
+    transitionProperty?: ResponsiveValue<CSS.Property.TransitionProperty>;
     /**
      * The CSS `transition-timing-function` property
      */
-    transitionTimingFunction?: ResponsiveValue<CSS.TransitionTimingFunctionProperty>;
+    transitionTimingFunction?: ResponsiveValue<CSS.Property.TransitionTimingFunction>;
     /**
@@ -19,0 +19,0 @@ * The CSS `transition-duration` property

dist/types/config/typography.d.ts

@@ -15,53 +15,53 @@ /// <reference path="../styled-system__core.d.ts" />
      */
-    lineHeight?: ResponsiveValue<CSS.LineHeightProperty<Length>>;
+    lineHeight?: ResponsiveValue<CSS.Property.LineHeight<Length>>;
     /**
      * The CSS `line-height` property
      */
-    letterSpacing?: ResponsiveValue<CSS.LetterSpacingProperty<Length>>;
+    letterSpacing?: ResponsiveValue<CSS.Property.LetterSpacing<Length>>;
     /**
      * The CSS `font-size` property
      */
-    fontSize?: ResponsiveValue<CSS.FontSizeProperty<Length>>;
+    fontSize?: ResponsiveValue<CSS.Property.FontSize<Length>>;
     /**
      * The CSS `font-family` property
      */
-    fontFamily?: ResponsiveValue<CSS.FontFamilyProperty>;
+    fontFamily?: ResponsiveValue<CSS.Property.FontFamily>;
     /**
      * The CSS `text-align` property
      */
-    textAlign?: ResponsiveValue<CSS.TextAlignProperty>;
+    textAlign?: ResponsiveValue<CSS.Property.TextAlign>;
     /**
      * The CSS `font-style` property
      */
-    fontStyle?: ResponsiveValue<CSS.FontStyleProperty>;
+    fontStyle?: ResponsiveValue<CSS.Property.FontStyle>;
     /**
      * The CSS `word-break` property
      */
-    wordBreak?: ResponsiveValue<CSS.WordBreakProperty>;
+    wordBreak?: ResponsiveValue<CSS.Property.WordBreak>;
     /**
      * The CSS `overflow-wrap` property
      */
-    overflowWrap?: ResponsiveValue<CSS.OverflowWrapProperty>;
+    overflowWrap?: ResponsiveValue<CSS.Property.OverflowWrap>;
     /**
      * The CSS `text-overflow` property
      */
-    textOverflow?: ResponsiveValue<CSS.TextOverflowProperty>;
+    textOverflow?: ResponsiveValue<CSS.Property.TextOverflow>;
     /**
      * The CSS `text-transform` property
      */
-    textTransform?: ResponsiveValue<CSS.TextTransformProperty>;
+    textTransform?: ResponsiveValue<CSS.Property.TextTransform>;
     /**
      * The CSS `white-space` property
      */
-    whiteSpace?: ResponsiveValue<CSS.WhiteSpaceProperty>;
+    whiteSpace?: ResponsiveValue<CSS.Property.WhiteSpace>;
     /**
      * The CSS `text-decoration` property
      */
-    textDecoration?: ResponsiveValue<CSS.TextDecorationProperty<Length>>;
+    textDecoration?: ResponsiveValue<CSS.Property.TextDecoration<Length>>;
     /**
      * The CSS `text-decoration` property
      */
-    textDecor?: ResponsiveValue<CSS.TextDecorationProperty<Length>>;
+    textDecor?: ResponsiveValue<CSS.Property.TextDecoration<Length>>;
 }
 export declare const typography: import("@styled-system/core").styleFn;
 export declare const typographyParser: import("@styled-system/core").styleFn;

dist/types/css.types.d.ts

 import { ResponsiveValue } from "./utils";
 import { Omit, Dict } from "@chakra-ui/utils";
 import { Pseudos } from "./pseudo";
-import { BoxShadowProperty, FontWeightProperty, PropertiesFallback, Pseudos as CSSPseudos, StandardProperties, SvgProperties, ZIndexProperty } from "csstype";
+import { Property, PropertiesFallback, Pseudos as CSSPseudos, StandardProperties, SvgProperties } from "csstype";
 declare type CSS = PropertiesFallback<number | string>;
@@ -73,5 +73,5 @@ declare type CSSProperties = StandardProperties<number | string> & SvgProperties<number | string>;
 interface OverwriteCSSProperties {
-    boxShadow?: BoxShadowProperty | number;
-    fontWeight?: FontWeightProperty | string;
-    zIndex?: ZIndexProperty | string;
+    boxShadow?: Property.BoxShadow | number;
+    fontWeight?: Property.FontWeight | string;
+    zIndex?: Property.ZIndex | string;
 }
@@ -78,0 +78,0 @@ interface AllSystemCSSProperties extends Omit<CSSProperties, "boxShadow" | "fontWeight" | "zIndex" | "inset">, AliasesCSSProperties, OverwriteCSSProperties {

dist/types/parser.types.d.ts

@@ -21,18 +21,18 @@ import * as CSS from "csstype";
 }
-export interface Theme {
+export interface BaseTheme {
     breakpoints?: Record<string, Length> | Length[];
-    space?: ThemeValue<CSS.MarginProperty<Length>>;
-    fontSizes?: ThemeValue<CSS.FontSizeProperty<Length>>;
-    colors?: ThemeValue<CSS.ColorProperty>;
-    fonts?: ThemeValue<CSS.FontFamilyProperty>;
-    fontWeights?: ThemeValue<CSS.FontWeightProperty>;
-    lineHeights?: ThemeValue<CSS.LineHeightProperty<Length>>;
-    letterSpacings?: ThemeValue<CSS.LetterSpacingProperty<Length>>;
-    sizes?: ThemeValue<CSS.HeightProperty<Length> | CSS.WidthProperty<Length>>;
-    borders?: ThemeValue<CSS.BorderProperty<Length>>;
-    borderStyles?: ThemeValue<CSS.BorderStyleProperty>;
-    borderWidths?: ThemeValue<CSS.BorderWidthProperty<Length>>;
-    radii?: ThemeValue<CSS.BorderRadiusProperty<Length>>;
-    shadows?: ThemeValue<CSS.BoxShadowProperty>;
-    zIndices?: ThemeValue<CSS.ZIndexProperty>;
+    space?: ThemeValue<CSS.Property.Margin<Length>>;
+    fontSizes?: ThemeValue<CSS.Property.FontSize<Length>>;
+    colors?: ThemeValue<CSS.Property.Color>;
+    fonts?: ThemeValue<CSS.Property.FontFamily>;
+    fontWeights?: ThemeValue<CSS.Property.FontWeight>;
+    lineHeights?: ThemeValue<CSS.Property.LineHeight<Length>>;
+    letterSpacings?: ThemeValue<CSS.Property.LetterSpacing<Length>>;
+    sizes?: ThemeValue<CSS.Property.Height<Length> | CSS.Property.Width<Length>>;
+    borders?: ThemeValue<CSS.Property.Border<Length>>;
+    borderStyles?: ThemeValue<CSS.Property.BorderStyle>;
+    borderWidths?: ThemeValue<CSS.Property.BorderWidth<Length>>;
+    radii?: ThemeValue<CSS.Property.BorderRadius<Length>>;
+    shadows?: ThemeValue<CSS.Property.BoxShadow>;
+    zIndices?: ThemeValue<CSS.Property.ZIndex>;
     components?: {
@@ -39,0 +39,0 @@ [component: string]: Component;

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "Style function for css-in-js building component libraries",
@@ -51,5 +51,5 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/utils": "1.0.0-rc.1",
+    "@chakra-ui/utils": "1.0.0-rc.2",
     "@styled-system/core": "5.1.2",
-    "csstype": "2.6.9"
+    "csstype": "3.0.2"
   },
@@ -59,3 +59,3 @@ "peerDependencies": {
   },
-  "gitHead": "e0470c73a9f6be24525dc5458d6fb157096b5ae3"
+  "gitHead": "c0a55ae7279887996fd2cbfb410476c86793e1bc"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

291378

increased by0.29%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@chakra-ui/utils@1.0.0-rc.2(transitive)

• + Addedcsstype@3.0.2(transitive)

• - Removed@chakra-ui/utils@1.0.0-rc.1(transitive)

• - Removedcsstype@2.6.9(transitive)

• Updated@chakra-ui/utils@1.0.0-rc.2

• Updatedcsstype@3.0.2