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

Comparing version 1.5.0 to 1.6.0

CHANGELOG.md

 # Change Log
 
+## 1.6.0
+
+### Minor Changes
+
+- [`90c7a4fbf`](https://github.com/chakra-ui/chakra-ui/commit/90c7a4fbfde69c01395ffe2876d7348dd72ea65a)
+  [#3092](https://github.com/chakra-ui/chakra-ui/pull/3092) Thanks
+  [@TimKolberger](https://github.com/TimKolberger)! - - Improved theme typing in
+  order to provide a better autocomplete experience
+  - Fixed a type issue where pseudo style props like `_hover` and `_active`
+    didn't allow regular css properties
+
+### Patch Changes
+
+- [`e434aed4a`](https://github.com/chakra-ui/chakra-ui/commit/e434aed4a7d769d0c6e98e048b2100f0efed277a)
+  [#3214](https://github.com/chakra-ui/chakra-ui/pull/3214) Thanks
+  [@TimKolberger](https://github.com/TimKolberger)! - Fix issue where CSS color
+  names are not passed correctly.
+
+  ```jsx
+  <Box backgroundColor="red">Background is red</Box>
+  ```
+
 ## 1.5.0
@@ -4,0 +26,0 @@

dist/cjs/css.js

@@ -117,5 +117,5 @@ "use strict";
 
-var css = function css(args) {
-  if (args === void 0) {
-    args = {};
+var css = function css(styleOrFn) {
+  if (styleOrFn === void 0) {
+    styleOrFn = {};
   }
@@ -130,3 +130,3 @@
     var computedStyles = {};
-    var styleObject = (0, _utils.runIfFn)(args, theme);
+    var styleObject = (0, _utils.runIfFn)(styleOrFn, theme);
     var styles = processResponsive(styleObject)(theme);
@@ -133,0 +133,0 @@

dist/cjs/index.js

@@ -44,18 +44,18 @@ "use strict";
 
-var _css2 = require("./css.types");
+var _types = require("./types");
 
-Object.keys(_css2).forEach(function (key) {
+Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _css2[key]) return;
-  exports[key] = _css2[key];
+  if (key in exports && exports[key] === _types[key]) return;
+  exports[key] = _types[key];
 });
 
-var _parser = require("./parser.types");
+var _theming = require("./theming.types");
 
-Object.keys(_parser).forEach(function (key) {
+Object.keys(_theming).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _parser[key]) return;
-  exports[key] = _parser[key];
+  if (key in exports && exports[key] === _theming[key]) return;
+  exports[key] = _theming[key];
 });
@@ -62,0 +62,0 @@

dist/cjs/pseudo/index.js

@@ -20,10 +20,2 @@ "use strict";
 });
-
-var _pseudo3 = require("./pseudo.types");
-
-Object.keys(_pseudo3).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _pseudo3[key]) return;
-  exports[key] = _pseudo3[key];
-});
 //# sourceMappingURL=index.js.map

dist/cjs/utils/index.js

@@ -68,3 +68,6 @@ "use strict";
   borderStyles: makeConfig("borderStyles"),
-  colors: makeConfig("colors"),
+  colors: makeConfig("colors", function (value, scale) {
+    var resolvedValue = (0, _utils.get)(scale, value, value);
+    return (0, _utils.isObject)(resolvedValue) ? value : resolvedValue;
+  }),
   borders: makeConfig("borders"),
@@ -71,0 +74,0 @@ radii: makeConfig("radii"),

dist/esm/css.js

@@ -95,5 +95,5 @@ import { isArray, isCustomBreakpoint, isObject, isResponsiveObjectLike, memoizedGet as get, mergeWith, objectToArrayNotation, runIfFn } from "@chakra-ui/utils";
 };
-export var css = function css(args) {
-  if (args === void 0) {
-    args = {};
+export var css = function css(styleOrFn) {
+  if (styleOrFn === void 0) {
+    styleOrFn = {};
   }
@@ -108,3 +108,3 @@
     var computedStyles = {};
-    var styleObject = runIfFn(args, theme);
+    var styleObject = runIfFn(styleOrFn, theme);
     var styles = processResponsive(styleObject)(theme);
@@ -111,0 +111,0 @@

dist/esm/index.js

@@ -5,5 +5,5 @@ export * from "./config";
 export * from "./css";
-export * from "./css.types";
-export * from "./parser.types";
+export * from "./types";
+export * from "./theming.types";
 export * from "./system";
 //# sourceMappingURL=index.js.map

dist/esm/pseudo/index.js

 export * from "./pseudo.utils";
 export * from "./pseudo.selector";
-export * from "./pseudo.types";
 //# sourceMappingURL=index.js.map

dist/esm/utils/index.js

@@ -1,2 +0,2 @@
-import { get, isNumber } from "@chakra-ui/utils";
+import { get, isNumber, isObject } from "@chakra-ui/utils";
 import { logical } from "./logical-prop";
@@ -27,3 +27,6 @@ import { positiveOrNegative } from "./positive-or-negative";
   borderStyles: makeConfig("borderStyles"),
-  colors: makeConfig("colors"),
+  colors: makeConfig("colors", (value, scale) => {
+    var resolvedValue = get(scale, value, value);
+    return isObject(resolvedValue) ? value : resolvedValue;
+  }),
   borders: makeConfig("borders"),
@@ -30,0 +33,0 @@ radii: makeConfig("radii"),

dist/types/config/background.d.ts

 import * as CSS from "csstype";
-import { ResponsiveValue, Length } from "../utils";
+import { Token } from "../utils";
 export interface BackgroundProps {
@@ -7,83 +7,83 @@ /**
      */
-    bg?: ResponsiveValue<CSS.Property.Background<Length>>;
+    bg?: Token<CSS.Property.Color, "colors">;
     /**
      * The CSS `background-clip` property
      */
-    bgClip?: ResponsiveValue<CSS.Property.BackgroundClip | "text">;
+    bgClip?: Token<CSS.Property.BackgroundClip | "text">;
     /**
      * The CSS `background-clip` property
      */
-    backgroundClip?: ResponsiveValue<CSS.Property.BackgroundClip | "text">;
+    backgroundClip?: Token<CSS.Property.BackgroundClip | "text">;
     /**
      * The CSS `background` property
      */
-    background?: ResponsiveValue<CSS.Property.Background<Length>>;
+    background?: Token<CSS.Property.Color, "colors">;
     /**
      * The CSS `background-color` property
      */
-    bgColor?: ResponsiveValue<CSS.Property.BackgroundColor>;
+    bgColor?: Token<CSS.Property.Color, "colors">;
     /**
      * The CSS `background-color` property
      */
-    backgroundColor?: ResponsiveValue<CSS.Property.BackgroundColor>;
+    backgroundColor?: Token<CSS.Property.Color, "colors">;
     /**
      * The CSS `background-image` property
      */
-    backgroundImage?: ResponsiveValue<CSS.Property.BackgroundImage>;
+    backgroundImage?: Token<CSS.Property.BackgroundImage>;
     /**
      * The background-gradient shorthand
      */
-    bgGradient?: ResponsiveValue<CSS.Property.BackgroundImage>;
+    bgGradient?: Token<CSS.Property.BackgroundImage>;
     /**
      * The CSS `background-blend-mode` property
      */
-    backgroundBlendMode?: ResponsiveValue<CSS.Property.BackgroundBlendMode>;
+    backgroundBlendMode?: Token<CSS.Property.BackgroundBlendMode>;
     /**
      * The CSS `background-blend-mode` property
      */
-    bgBlendMode?: ResponsiveValue<CSS.Property.BackgroundBlendMode>;
+    bgBlendMode?: Token<CSS.Property.BackgroundBlendMode>;
     /**
      * The CSS `background-size` property
      */
-    backgroundSize?: ResponsiveValue<CSS.Property.BackgroundSize<Length>>;
+    backgroundSize?: Token<CSS.Property.BackgroundSize | number>;
     /**
      * The CSS `background-position` property
      */
-    bgPos?: ResponsiveValue<CSS.Property.BackgroundPosition<Length>>;
+    bgPos?: Token<CSS.Property.BackgroundPosition | number>;
     /**
      * The CSS `background-position` property
      */
-    backgroundPosition?: ResponsiveValue<CSS.Property.BackgroundPosition<Length>>;
+    backgroundPosition?: Token<CSS.Property.BackgroundPosition | number>;
     /**
      * The CSS `background-image` property
      */
-    bgImage?: ResponsiveValue<CSS.Property.BackgroundImage>;
+    bgImage?: Token<CSS.Property.BackgroundImage>;
     /**
      * The CSS `background-image` property
      */
-    bgImg?: ResponsiveValue<CSS.Property.BackgroundImage>;
+    bgImg?: Token<CSS.Property.BackgroundImage>;
     /**
      * The CSS `background-repeat` property
      */
-    bgRepeat?: ResponsiveValue<CSS.Property.BackgroundRepeat>;
+    bgRepeat?: Token<CSS.Property.BackgroundRepeat>;
     /**
      * The CSS `background-repeat` property
      */
-    backgroundRepeat?: ResponsiveValue<CSS.Property.BackgroundRepeat>;
+    backgroundRepeat?: Token<CSS.Property.BackgroundRepeat>;
     /**
      * The CSS `background-size` property
      */
-    bgSize?: ResponsiveValue<CSS.Property.BackgroundSize<Length>>;
+    bgSize?: Token<CSS.Property.BackgroundSize | number>;
     /**
      * The CSS `background-attachment` property
      */
-    bgAttachment?: ResponsiveValue<CSS.Property.BackgroundAttachment>;
+    bgAttachment?: Token<CSS.Property.BackgroundAttachment>;
     /**
      * The CSS `background-attachment` property
      */
-    backgroundAttachment?: ResponsiveValue<CSS.Property.BackgroundAttachment>;
+    backgroundAttachment?: Token<CSS.Property.BackgroundAttachment>;
     /**
      * The CSS `background-position` property
      */
-    bgPosition?: ResponsiveValue<CSS.Property.BackgroundPosition<Length>>;
+    bgPosition?: Token<CSS.Property.BackgroundPosition | number>;
 }
@@ -90,0 +90,0 @@ export declare const background: import("../core").Parser;

dist/types/config/border.d.ts

 import * as CSS from "csstype";
-import { Length, ResponsiveValue } from "../utils";
+import { Token } from "../utils";
 /**
@@ -10,127 +10,127 @@ * The prop types for border properties listed above
      */
-    border?: ResponsiveValue<CSS.Property.Border<Length>>;
+    border?: Token<CSS.Property.Border | number, "borders">;
     /**
      * The CSS `border-width` property
      */
-    borderWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
+    borderWidth?: Token<CSS.Property.BorderWidth | number>;
     /**
      * The CSS `border-style` property
      */
-    borderStyle?: ResponsiveValue<CSS.Property.BorderStyle>;
+    borderStyle?: Token<CSS.Property.BorderStyle>;
     /**
      * The CSS `border-color` property
      */
-    borderColor?: ResponsiveValue<CSS.Property.BorderTopColor>;
+    borderColor?: Token<CSS.Property.BorderTopColor, "colors">;
     /**
      * The CSS `border-radius` property
      */
-    borderRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-radius` property
      */
-    rounded?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    rounded?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-top` property
      */
-    borderTop?: ResponsiveValue<CSS.Property.BorderTop<Length>>;
-    borderBlockStart?: ResponsiveValue<CSS.Property.BorderBlockStart<Length>>;
+    borderTop?: Token<CSS.Property.BorderTop, "borders">;
+    borderBlockStart?: Token<CSS.Property.BorderBlockStart | number>;
     /**
      * The CSS `border-top-width` property
      */
-    borderTopWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
-    borderBlockStartWidth?: ResponsiveValue<CSS.Property.BorderBlockStartWidth<Length>>;
+    borderTopWidth?: Token<CSS.Property.BorderWidth | number>;
+    borderBlockStartWidth?: Token<CSS.Property.BorderBlockStartWidth | number>;
     /**
      * The CSS `border-bottom-width` property
      */
-    borderBottomWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
-    borderBlockEndWidth?: ResponsiveValue<CSS.Property.BorderBlockEndWidth<Length>>;
+    borderBottomWidth?: Token<CSS.Property.BorderWidth | number>;
+    borderBlockEndWidth?: Token<CSS.Property.BorderBlockEndWidth | number>;
     /**
      * The CSS `border-left-width` property
      */
-    borderLeftWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
-    borderStartWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
-    borderInlineStartWidth?: ResponsiveValue<CSS.Property.BorderInlineStartWidth<Length>>;
+    borderLeftWidth?: Token<CSS.Property.BorderWidth | number>;
+    borderStartWidth?: Token<CSS.Property.BorderWidth | number>;
+    borderInlineStartWidth?: Token<CSS.Property.BorderInlineStartWidth | number>;
     /**
      * The CSS `border-right-width` property
      */
-    borderRightWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
-    borderEndWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
-    borderInlineEndWidth?: ResponsiveValue<CSS.Property.BorderInlineEndWidth<Length>>;
+    borderRightWidth?: Token<CSS.Property.BorderWidth | number>;
+    borderEndWidth?: Token<CSS.Property.BorderWidth | number>;
+    borderInlineEndWidth?: Token<CSS.Property.BorderInlineEndWidth | number>;
     /**
      * The CSS `border-top-style` property
      */
-    borderTopStyle?: ResponsiveValue<CSS.Property.BorderTopStyle>;
-    borderBlockStartStyle?: ResponsiveValue<CSS.Property.BorderBlockStartStyle>;
+    borderTopStyle?: Token<CSS.Property.BorderTopStyle>;
+    borderBlockStartStyle?: Token<CSS.Property.BorderBlockStartStyle>;
     /**
      * The CSS `border-bottom-style` property
      */
-    borderBottomStyle?: ResponsiveValue<CSS.Property.BorderBottomStyle>;
-    borderBlockEndStyle?: ResponsiveValue<CSS.Property.BorderBlockEndStyle>;
+    borderBottomStyle?: Token<CSS.Property.BorderBottomStyle>;
+    borderBlockEndStyle?: Token<CSS.Property.BorderBlockEndStyle>;
     /**
      * The CSS `border-left-style` property
      */
-    borderLeftStyle?: ResponsiveValue<CSS.Property.BorderLeftStyle>;
-    borderStartStyle?: ResponsiveValue<CSS.Property.BorderInlineStartStyle>;
-    borderInlineStartStyle?: ResponsiveValue<CSS.Property.BorderInlineStartStyle>;
+    borderLeftStyle?: Token<CSS.Property.BorderLeftStyle>;
+    borderStartStyle?: Token<CSS.Property.BorderInlineStartStyle>;
+    borderInlineStartStyle?: Token<CSS.Property.BorderInlineStartStyle>;
     /**
      * The CSS `border-right-styles` property
      */
-    borderRightStyle?: ResponsiveValue<CSS.Property.BorderRightStyle>;
-    borderEndStyle?: ResponsiveValue<CSS.Property.BorderInlineEndStyle>;
-    borderInlineEndStyle?: ResponsiveValue<CSS.Property.BorderInlineEndStyle>;
+    borderRightStyle?: Token<CSS.Property.BorderRightStyle>;
+    borderEndStyle?: Token<CSS.Property.BorderInlineEndStyle>;
+    borderInlineEndStyle?: Token<CSS.Property.BorderInlineEndStyle>;
     /**
      * The CSS `border-top-color` property
      */
-    borderTopColor?: ResponsiveValue<CSS.Property.BorderTopColor>;
-    borderBlockStartColor?: ResponsiveValue<CSS.Property.BorderBlockStartColor>;
+    borderTopColor?: Token<CSS.Property.BorderTopColor, "colors">;
+    borderBlockStartColor?: Token<CSS.Property.BorderBlockStartColor, "colors">;
     /**
      * The CSS `border-bottom-color` property
      */
-    borderBottomColor?: ResponsiveValue<CSS.Property.BorderBottomColor>;
-    borderBlockEndColor?: ResponsiveValue<CSS.Property.BorderBlockEndColor>;
+    borderBottomColor?: Token<CSS.Property.BorderBottomColor, "colors">;
+    borderBlockEndColor?: Token<CSS.Property.BorderBlockEndColor, "colors">;
     /**
      * The CSS `border-left-color` property
      */
-    borderLeftColor?: ResponsiveValue<CSS.Property.BorderLeftColor>;
-    borderStartColor?: ResponsiveValue<CSS.Property.BorderInlineStartColor>;
-    borderInlineStartColor?: ResponsiveValue<CSS.Property.BorderInlineStartColor>;
+    borderLeftColor?: Token<CSS.Property.BorderLeftColor, "colors">;
+    borderStartColor?: Token<CSS.Property.BorderInlineStartColor>;
+    borderInlineStartColor?: Token<CSS.Property.BorderInlineStartColor, "colors">;
     /**
      * The CSS `border-right-color` property
      */
-    borderRightColor?: ResponsiveValue<CSS.Property.BorderRightColor>;
-    borderEndColor?: ResponsiveValue<CSS.Property.BorderInlineEndColor>;
-    borderInlineEndColor?: ResponsiveValue<CSS.Property.BorderInlineEndColor>;
+    borderRightColor?: Token<CSS.Property.BorderRightColor, "colors">;
+    borderEndColor?: Token<CSS.Property.BorderInlineEndColor>;
+    borderInlineEndColor?: Token<CSS.Property.BorderInlineEndColor, "colors">;
     /**
      * The CSS `border-right` property
      */
-    borderRight?: ResponsiveValue<CSS.Property.BorderRight<Length>>;
-    borderEnd?: ResponsiveValue<CSS.Property.BorderInlineStart<Length>>;
-    borderInlineEnd?: ResponsiveValue<CSS.Property.BorderInlineEnd<Length>>;
+    borderRight?: Token<CSS.Property.BorderRight | number, "borders">;
+    borderEnd?: Token<CSS.Property.BorderInlineStart | number>;
+    borderInlineEnd?: Token<CSS.Property.BorderInlineEnd | number>;
     /**
      * The CSS `border-bottom` property
      */
-    borderBottom?: ResponsiveValue<CSS.Property.BorderBottom<Length>>;
-    borderBlockEnd?: ResponsiveValue<CSS.Property.BorderBlockEnd<Length>>;
+    borderBottom?: Token<CSS.Property.BorderBottom | number, "borders">;
+    borderBlockEnd?: Token<CSS.Property.BorderBlockEnd | number>;
     /**
      * The CSS `border-left` property
      */
-    borderLeft?: ResponsiveValue<CSS.Property.BorderLeft<Length>>;
-    borderStart?: ResponsiveValue<CSS.Property.BorderInlineStart<Length>>;
-    borderInlineStart?: ResponsiveValue<CSS.Property.BorderInlineStart<Length>>;
+    borderLeft?: Token<CSS.Property.BorderLeft | number, "borders">;
+    borderStart?: Token<CSS.Property.BorderInlineStart | number>;
+    borderInlineStart?: Token<CSS.Property.BorderInlineStart | number>;
     /**
      * The CSS `border-top-radius` property
      */
-    borderTopRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderTopRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-top-radius` property
      */
-    roundedTop?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedTop?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-right-radius` property
      */
-    borderRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderRightRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-right-radius` property
      */
-    roundedRight?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedRight?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
@@ -140,3 +140,3 @@ * When direction is `ltr`, `roundedEnd` is equivalent to `borderRightRadius`.
      */
-    roundedEnd?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedEnd?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
@@ -146,3 +146,3 @@ * When direction is `ltr`, `borderInlineEndRadius` is equivalent to `borderRightRadius`.
      */
-    borderInlineEndRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderInlineEndRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
@@ -152,19 +152,19 @@ * When direction is `ltr`, `borderEndRadius` is equivalent to `borderRightRadius`.
      */
-    borderEndRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderEndRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-bottom-radius` property
      */
-    borderBottomRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderBottomRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-bottom-radius` property
      */
-    roundedBottom?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedBottom?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-left-radius` property
      */
-    borderLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderLeftRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-left-radius` property
      */
-    roundedLeft?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedLeft?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
@@ -174,3 +174,3 @@ * When direction is `ltr`, `roundedEnd` is equivalent to `borderRightRadius`.
      */
-    roundedStart?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedStart?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
@@ -180,3 +180,3 @@ * When direction is `ltr`, `borderInlineStartRadius` is equivalent to `borderLeftRadius`.
      */
-    borderInlineStartRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderInlineStartRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
@@ -186,57 +186,57 @@ * When direction is `ltr`, `borderStartRadius` is equivalent to `borderLeftRadius`.
      */
-    borderStartRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderStartRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-top-left-radius` property
      */
-    borderTopLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    borderTopStartRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    borderStartStartRadius?: ResponsiveValue<CSS.Property.BorderStartStartRadius<Length>>;
+    borderTopLeftRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
+    borderTopStartRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
+    borderStartStartRadius?: Token<CSS.Property.BorderStartStartRadius | number, "radii">;
     /**
      * The CSS `border-top-left-radius` property
      */
-    roundedTopLeft?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    roundedTopStart?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedTopLeft?: Token<CSS.Property.BorderRadius | number, "radii">;
+    roundedTopStart?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-top-right-radius` property
      */
-    borderTopRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    borderTopEndRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    borderStartEndRadius?: ResponsiveValue<CSS.Property.BorderStartEndRadius<Length>>;
+    borderTopRightRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
+    borderTopEndRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
+    borderStartEndRadius?: Token<CSS.Property.BorderStartEndRadius | number, "radii">;
     /**
      * The CSS `border-top-right-radius` property
      */
-    roundedTopRight?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    roundedTopEnd?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedTopRight?: Token<CSS.Property.BorderRadius | number, "radii">;
+    roundedTopEnd?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-bottom-left-radius` property
      */
-    borderBottomLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    borderBottomStartRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    borderEndStartRadius?: ResponsiveValue<CSS.Property.BorderEndStartRadius<Length>>;
+    borderBottomLeftRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
+    borderBottomStartRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
+    borderEndStartRadius?: Token<CSS.Property.BorderEndStartRadius | number, "radii">;
     /**
      * The CSS `border-bottom-left-radius` property
      */
-    roundedBottomLeft?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    roundedBottomStart?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedBottomLeft?: Token<CSS.Property.BorderRadius | number, "radii">;
+    roundedBottomStart?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-bottom-right-radius` property
      */
-    borderBottomRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    borderBottomEndRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    borderEndEndRadius?: ResponsiveValue<CSS.Property.BorderEndEndRadius<Length>>;
+    borderBottomRightRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
+    borderBottomEndRadius?: Token<CSS.Property.BorderRadius | number, "radii">;
+    borderEndEndRadius?: Token<CSS.Property.BorderEndEndRadius | number, "radii">;
     /**
      * The CSS `border-bottom-right-radius` property
      */
-    roundedBottomRight?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
-    roundedBottomEnd?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    roundedBottomRight?: Token<CSS.Property.BorderRadius | number, "radii">;
+    roundedBottomEnd?: Token<CSS.Property.BorderRadius | number, "radii">;
     /**
      * The CSS `border-right` and `border-left` property
      */
-    borderX?: ResponsiveValue<CSS.Property.Border<Length>>;
-    borderInline?: ResponsiveValue<CSS.Property.BorderInline<Length>>;
+    borderX?: Token<CSS.Property.Border | number, "borders">;
+    borderInline?: Token<CSS.Property.BorderInline | number>;
     /**
      * The CSS `border-top` and `border-bottom` property
      */
-    borderY?: ResponsiveValue<CSS.Property.Border<Length>>;
-    borderBlock?: ResponsiveValue<CSS.Property.BorderBlock<Length>>;
+    borderY?: Token<CSS.Property.Border | number, "borders">;
+    borderBlock?: Token<CSS.Property.BorderBlock | number>;
 }
@@ -243,0 +243,0 @@ export declare const border: import("../core").Parser;

dist/types/config/color.d.ts

 import * as CSS from "csstype";
-import { ResponsiveValue } from "../utils";
+import { Token } from "../utils";
 export interface ColorProps {
@@ -7,19 +7,19 @@ /**
      */
-    textColor?: ResponsiveValue<CSS.Property.Color>;
+    textColor?: Token<CSS.Property.Color, "colors">;
     /**
      * The CSS `color` property
      */
-    color?: ResponsiveValue<CSS.Property.Color>;
+    color?: Token<CSS.Property.Color, "colors">;
     /**
      * The CSS `fill` property for icon svgs and paths
      */
-    fill?: ResponsiveValue<CSS.Property.Color>;
+    fill?: Token<CSS.Property.Color, "colors">;
     /**
      * The CSS `stroke` property for icon svgs and paths
      */
-    stroke?: ResponsiveValue<CSS.Property.Color>;
+    stroke?: Token<CSS.Property.Color, "colors">;
     /**
      * The CSS `opacity` property
      */
-    opacity?: ResponsiveValue<CSS.Property.Opacity>;
+    opacity?: Token<CSS.Property.Opacity>;
 }
@@ -26,0 +26,0 @@ export declare const color: import("../core").Parser;

dist/types/config/flexbox.d.ts

 import * as CSS from "csstype";
-import { ResponsiveValue, Length } from "../utils";
+import { Token, Length } from "../utils";
 export interface FlexboxProps {
@@ -14,3 +14,3 @@ /**
      */
-    alignItems?: ResponsiveValue<CSS.Property.AlignItems>;
+    alignItems?: Token<CSS.Property.AlignItems>;
     /**
@@ -24,3 +24,3 @@ * The CSS `align-content` property.
      */
-    alignContent?: ResponsiveValue<CSS.Property.AlignContent>;
+    alignContent?: Token<CSS.Property.AlignContent>;
     /**
@@ -35,3 +35,3 @@ * The CSS `justify-items` property.
      */
-    justifyItems?: ResponsiveValue<CSS.Property.JustifyItems>;
+    justifyItems?: Token<CSS.Property.JustifyItems>;
     /**
@@ -45,3 +45,3 @@ * The CSS `justify-content` property.
      */
-    justifyContent?: ResponsiveValue<CSS.Property.JustifyContent>;
+    justifyContent?: Token<CSS.Property.JustifyContent>;
     /**
@@ -56,3 +56,3 @@ * The CSS `flex-wrap` property.
      */
-    flexWrap?: ResponsiveValue<CSS.Property.FlexWrap>;
+    flexWrap?: Token<CSS.Property.FlexWrap>;
     /**
@@ -66,3 +66,3 @@ * The CSS `flex-flow` property.
      */
-    flexFlow?: ResponsiveValue<CSS.Property.FlexFlow>;
+    flexFlow?: Token<CSS.Property.FlexFlow>;
     /**
@@ -75,3 +75,3 @@ * The CSS `flex-basis` property.
      */
-    flexBasis?: ResponsiveValue<CSS.Property.FlexBasis<Length>>;
+    flexBasis?: Token<CSS.Property.FlexBasis<Length>>;
     /**
@@ -85,3 +85,3 @@ * The CSS `flex-direction` property.
      */
-    flexDirection?: ResponsiveValue<CSS.Property.FlexDirection>;
+    flexDirection?: Token<CSS.Property.FlexDirection>;
     /**
@@ -95,3 +95,3 @@ * The CSS `flex-direction` property.
      */
-    flexDir?: ResponsiveValue<CSS.Property.FlexDirection>;
+    flexDir?: Token<CSS.Property.FlexDirection>;
     /**
@@ -105,3 +105,3 @@ * The CSS `flex` property.
      */
-    flex?: ResponsiveValue<CSS.Property.Flex<Length>>;
+    flex?: Token<CSS.Property.Flex<Length>>;
     /**
@@ -115,3 +115,3 @@ * The CSS `justify-self` property.
      */
-    justifySelf?: ResponsiveValue<CSS.Property.JustifySelf>;
+    justifySelf?: Token<CSS.Property.JustifySelf>;
     /**
@@ -125,3 +125,3 @@ * The CSS `align-self` property.
      */
-    alignSelf?: ResponsiveValue<CSS.Property.AlignSelf>;
+    alignSelf?: Token<CSS.Property.AlignSelf>;
     /**
@@ -134,3 +134,3 @@ * The CSS `order` property.
      */
-    order?: ResponsiveValue<CSS.Property.Order>;
+    order?: Token<CSS.Property.Order>;
     /**
@@ -144,3 +144,3 @@ * The CSS `flex-grow` property.
      */
-    flexGrow?: ResponsiveValue<CSS.Property.FlexGrow>;
+    flexGrow?: Token<CSS.Property.FlexGrow | (string & number)>;
     /**
@@ -154,3 +154,3 @@ * The CSS `flex-shrink` property.
      */
-    flexShrink?: ResponsiveValue<CSS.Property.FlexShrink>;
+    flexShrink?: Token<CSS.Property.FlexShrink | (string & number)>;
     /**
@@ -165,3 +165,3 @@ * The CSS `place-items` property.
      */
-    placeItems?: ResponsiveValue<CSS.Property.PlaceItems>;
+    placeItems?: Token<CSS.Property.PlaceItems>;
     /**
@@ -176,3 +176,3 @@ * The CSS `place-content` property.
      */
-    placeContent?: ResponsiveValue<CSS.Property.PlaceContent>;
+    placeContent?: Token<CSS.Property.PlaceContent>;
     /**
@@ -187,3 +187,3 @@ * The CSS `place-self` property.
      */
-    placeSelf?: ResponsiveValue<CSS.Property.PlaceSelf>;
+    placeSelf?: Token<CSS.Property.PlaceSelf>;
 }
@@ -190,0 +190,0 @@ export declare const flexbox: import("../core").Parser;

dist/types/config/grid.d.ts

 import * as CSS from "csstype";
-import { Length, ResponsiveValue } from "../utils";
+import { Token } from "../utils";
 export interface GridProps {
@@ -11,3 +11,3 @@ /**
      */
-    gridGap?: ResponsiveValue<CSS.Property.GridGap<Length>>;
+    gridGap?: Token<CSS.Property.GridGap | number, "sizes">;
     /**
@@ -20,3 +20,3 @@ * The CSS `grid-column-gap` property.
      */
-    gridColumnGap?: ResponsiveValue<CSS.Property.GridColumnGap<Length>>;
+    gridColumnGap?: Token<CSS.Property.GridColumnGap | number, "sizes">;
     /**
@@ -29,3 +29,3 @@ * The CSS `grid-row-gap` property.
      */
-    gridRowGap?: ResponsiveValue<CSS.Property.GridRowGap<Length>>;
+    gridRowGap?: Token<CSS.Property.GridRowGap | number, "sizes">;
     /**
@@ -39,3 +39,3 @@ * The CSS `grid-column` property.
      */
-    gridColumnStart?: ResponsiveValue<CSS.Property.GridColumnStart>;
+    gridColumnStart?: Token<CSS.Property.GridColumnStart>;
     /**
@@ -50,3 +50,3 @@ * The CSS `grid-row-start` property
      */
-    gridRowStart?: ResponsiveValue<CSS.Property.GridRowStart>;
+    gridRowStart?: Token<CSS.Property.GridRowStart>;
     /**
@@ -61,3 +61,3 @@ * The CSS `grid-row-end` property
      */
-    gridRowEnd?: ResponsiveValue<CSS.Property.GridRowEnd>;
+    gridRowEnd?: Token<CSS.Property.GridRowEnd>;
     /**
@@ -70,3 +70,3 @@ * The CSS `grid-template` property.
      */
-    gridTemplate?: ResponsiveValue<CSS.Property.GridTemplate>;
+    gridTemplate?: Token<CSS.Property.GridTemplate>;
     /**
@@ -81,3 +81,3 @@ * The CSS `grid-column` property
      */
-    gridColumnEnd?: ResponsiveValue<CSS.Property.GridColumnEnd>;
+    gridColumnEnd?: Token<CSS.Property.GridColumnEnd>;
     /**
@@ -92,3 +92,3 @@ * The CSS `grid-column` property.
      */
-    gridColumn?: ResponsiveValue<CSS.Property.GridColumn>;
+    gridColumn?: Token<CSS.Property.GridColumn>;
     /**
@@ -103,3 +103,3 @@ * The CSS `grid-row` property
      */
-    gridRow?: ResponsiveValue<CSS.Property.GridRow>;
+    gridRow?: Token<CSS.Property.GridRow>;
     /**
@@ -113,3 +113,3 @@ * The CSS `grid-auto-flow` property
      */
-    gridAutoFlow?: ResponsiveValue<CSS.Property.GridAutoFlow>;
+    gridAutoFlow?: Token<CSS.Property.GridAutoFlow>;
     /**
@@ -122,3 +122,3 @@ * The CSS `grid-auto-columns` property.
      */
-    gridAutoColumns?: ResponsiveValue<CSS.Property.GridAutoColumns<Length>>;
+    gridAutoColumns?: Token<CSS.Property.GridAutoColumns | number, "sizes">;
     /**
@@ -131,3 +131,3 @@ * The CSS `grid-auto-rows` property.
      */
-    gridAutoRows?: ResponsiveValue<CSS.Property.GridAutoRows<Length>>;
+    gridAutoRows?: Token<CSS.Property.GridAutoRows | number, "sizes">;
     /**
@@ -140,3 +140,3 @@ * The CSS `grid-template-columns` property
      */
-    gridTemplateColumns?: ResponsiveValue<CSS.Property.GridTemplateColumns<Length>>;
+    gridTemplateColumns?: Token<CSS.Property.GridTemplateColumns | number, "sizes">;
     /**
@@ -149,3 +149,3 @@ * The CSS `grid-template-rows` property.
      */
-    gridTemplateRows?: ResponsiveValue<CSS.Property.GridTemplateRows<Length>>;
+    gridTemplateRows?: Token<CSS.Property.GridTemplateRows | number, "sizes">;
     /**
@@ -156,3 +156,3 @@ * The CSS `grid-template-areas` property.
      */
-    gridTemplateAreas?: ResponsiveValue<CSS.Property.GridTemplateAreas>;
+    gridTemplateAreas?: Token<CSS.Property.GridTemplateAreas>;
     /**
@@ -167,3 +167,3 @@ * The CSS `grid-areas` property.
      */
-    gridArea?: ResponsiveValue<CSS.Property.GridArea>;
+    gridArea?: Token<CSS.Property.GridArea>;
 }
@@ -170,0 +170,0 @@ export declare const grid: import("../core").Parser;

dist/types/config/layout.d.ts

 import * as CSS from "csstype";
-import { Length, ResponsiveValue } from "../utils";
+import { Length, Token } from "../utils";
 /**
@@ -10,81 +10,81 @@ * Types for layout related CSS properties
      */
-    display?: ResponsiveValue<CSS.Property.Display>;
+    display?: Token<CSS.Property.Display>;
     /**
      * The CSS `display` property
      */
-    d?: ResponsiveValue<CSS.Property.Display>;
+    d?: Token<CSS.Property.Display>;
     /**
      * The CSS `width` property
      */
-    width?: ResponsiveValue<CSS.Property.Width<Length>>;
+    width?: Token<CSS.Property.Width | number, "sizes">;
     /**
      * The CSS `width` property
      */
-    w?: ResponsiveValue<CSS.Property.Width<Length>>;
-    inlineSize?: ResponsiveValue<CSS.Property.InlineSize<Length>>;
+    w?: Token<CSS.Property.Width | number, "sizes">;
+    inlineSize?: Token<CSS.Property.InlineSize | number, "sizes">;
     /**
      * The CSS `width` and `height` property
      */
-    boxSize?: ResponsiveValue<CSS.Property.Width<Length>>;
+    boxSize?: Token<CSS.Property.Width | number, "sizes">;
     /**
      * The CSS `max-width` property
      */
-    maxWidth?: ResponsiveValue<CSS.Property.MaxWidth<Length>>;
+    maxWidth?: Token<CSS.Property.MaxWidth | number, "sizes">;
     /**
      * The CSS `max-width` property
      */
-    maxW?: ResponsiveValue<CSS.Property.MaxWidth<Length>>;
-    maxInlineSize?: ResponsiveValue<CSS.Property.MaxInlineSize<Length>>;
+    maxW?: Token<CSS.Property.MaxWidth | number, "sizes">;
+    maxInlineSize?: Token<CSS.Property.MaxInlineSize | number, "sizes">;
     /**
      * The CSS `min-width` property
      */
-    minWidth?: ResponsiveValue<CSS.Property.MinWidth<Length>>;
+    minWidth?: Token<CSS.Property.MinWidth | number, "sizes">;
     /**
      * The CSS `min-width` property
      */
-    minW?: ResponsiveValue<CSS.Property.MinWidth<Length>>;
-    minInlineSize?: ResponsiveValue<CSS.Property.MinInlineSize<Length>>;
+    minW?: Token<CSS.Property.MinWidth | number, "sizes">;
+    minInlineSize?: Token<CSS.Property.MinInlineSize | number, "sizes">;
     /**
      * The CSS `height` property
      */
-    height?: ResponsiveValue<CSS.Property.Height<Length>>;
+    height?: Token<CSS.Property.Height | number, "sizes">;
     /**
      * The CSS `height` property
      */
-    h?: ResponsiveValue<CSS.Property.Height<Length>>;
-    blockSize?: ResponsiveValue<CSS.Property.BlockSize<Length>>;
+    h?: Token<CSS.Property.Height | number, "sizes">;
+    blockSize?: Token<CSS.Property.BlockSize | number, "sizes">;
     /**
      * The CSS `max-height` property
      */
-    maxHeight?: ResponsiveValue<CSS.Property.MaxHeight<Length>>;
+    maxHeight?: Token<CSS.Property.MaxHeight | number, "sizes">;
     /**
      * The CSS `max-height` property
      */
-    maxH?: ResponsiveValue<CSS.Property.MaxHeight<Length>>;
-    maxBlockSize?: ResponsiveValue<CSS.Property.MaxBlockSize<Length>>;
+    maxH?: Token<CSS.Property.MaxHeight | number, "sizes">;
+    maxBlockSize?: Token<CSS.Property.MaxBlockSize | number, "sizes">;
     /**
      * The CSS `min-height` property
      */
-    minHeight?: ResponsiveValue<CSS.Property.MinHeight<Length>>;
+    minHeight?: Token<CSS.Property.MinHeight | number, "sizes">;
     /**
      * The CSS `min-height` property
      */
-    minH?: ResponsiveValue<CSS.Property.MinHeight<Length>>;
-    minBlockSize?: ResponsiveValue<CSS.Property.MinBlockSize<Length>>;
+    minH?: Token<CSS.Property.MinHeight | number, "sizes">;
+    minBlockSize?: Token<CSS.Property.MinBlockSize | number, "sizes">;
     /**
      * The CSS `vertical-align` property
      */
-    verticalAlign?: ResponsiveValue<CSS.Property.VerticalAlign<Length>>;
+    verticalAlign?: Token<CSS.Property.VerticalAlign<Length>>;
     /**
      * The CSS `overflow` property
      */
-    overflow?: ResponsiveValue<CSS.Property.Overflow>;
+    overflow?: Token<CSS.Property.Overflow>;
     /**
      * The CSS `overflow-x` property
      */
-    overflowX?: ResponsiveValue<CSS.Property.OverflowX>;
+    overflowX?: Token<CSS.Property.OverflowX>;
     /**
      * The CSS `overflow-y` property
      */
-    overflowY?: ResponsiveValue<CSS.Property.OverflowY>;
+    overflowY?: Token<CSS.Property.OverflowY>;
     /**
@@ -91,0 +91,0 @@ * The CSS `box-sizing` property

dist/types/config/others.d.ts

 import * as CSS from "csstype";
 import { PropConfig } from "../core";
-import { Length, ResponsiveValue } from "../utils/types";
+import { Length, ResponsiveValue } from "../utils";
 export interface OtherProps {
@@ -38,3 +38,3 @@ /**
     /**
-     * The CSS `object-psition` property
+     * The CSS `object-position` property
      */
@@ -41,0 +41,0 @@ objectPosition?: ResponsiveValue<CSS.Property.ObjectPosition<Length>>;

dist/types/config/position.d.ts

 import * as CSS from "csstype";
-import { Length, ResponsiveValue } from "../utils";
+import { Token } from "../utils";
 /**
@@ -10,12 +10,12 @@ * Types for position CSS properties
      */
-    zIndex?: ResponsiveValue<string | CSS.Property.ZIndex>;
+    zIndex?: Token<CSS.Property.ZIndex, "zIndices">;
     /**
      * The CSS `top` property
      */
-    top?: ResponsiveValue<CSS.Property.Top<Length>>;
-    insetBlockStart?: ResponsiveValue<CSS.Property.InsetBlockStart<Length>>;
+    top?: Token<CSS.Property.Top | number, "sizes">;
+    insetBlockStart?: Token<CSS.Property.InsetBlockStart | number, "sizes">;
     /**
      * The CSS `right` property
      */
-    right?: ResponsiveValue<CSS.Property.Right<Length>>;
+    right?: Token<CSS.Property.Right | number, "sizes">;
     /**
@@ -25,3 +25,3 @@ * When the direction is `ltr`, `insetInlineEnd` is equivalent to `right`.
      */
-    insetInlineEnd?: ResponsiveValue<CSS.Property.InsetInlineEnd<Length>>;
+    insetInlineEnd?: Token<CSS.Property.InsetInlineEnd | number, "sizes">;
     /**
@@ -31,13 +31,13 @@ * When the direction is `ltr`, `insetEnd` is equivalent to `right`.
      */
-    insetEnd?: ResponsiveValue<CSS.Property.InsetInlineEnd<Length>>;
+    insetEnd?: Token<CSS.Property.InsetInlineEnd | number, "sizes">;
     /**
      * The CSS `bottom` property
      */
-    bottom?: ResponsiveValue<CSS.Property.Bottom<Length>>;
-    insetBlockEnd?: ResponsiveValue<CSS.Property.InsetBlockEnd<Length>>;
+    bottom?: Token<CSS.Property.Bottom | number, "sizes">;
+    insetBlockEnd?: Token<CSS.Property.InsetBlockEnd | number, "sizes">;
     /**
      * The CSS `left` property
      */
-    left?: ResponsiveValue<CSS.Property.Left<Length>>;
-    insetInlineStart?: ResponsiveValue<CSS.Property.InsetInlineStart<Length>>;
+    left?: Token<CSS.Property.Left | number, "sizes">;
+    insetInlineStart?: Token<CSS.Property.InsetInlineStart | number, "sizes">;
     /**
@@ -47,25 +47,25 @@ * When the direction is `start`, `end` is equivalent to `left`.
      */
-    insetStart?: ResponsiveValue<CSS.Property.InsetInlineStart<Length>>;
+    insetStart?: Token<CSS.Property.InsetInlineStart | number, "sizes">;
     /**
      * The CSS `left`, `right`, `top`, `bottom` property
      */
-    inset?: ResponsiveValue<CSS.Property.Left<Length>>;
+    inset?: Token<CSS.Property.Left | number, "sizes">;
     /**
      * The CSS `left`, and `right` property
      */
-    insetX?: ResponsiveValue<CSS.Property.Left<Length>>;
+    insetX?: Token<CSS.Property.Left | number, "sizes">;
     /**
      * The CSS `top`, and `bottom` property
      */
-    insetY?: ResponsiveValue<CSS.Property.Left<Length>>;
+    insetY?: Token<CSS.Property.Left | number, "sizes">;
     /**
      * The CSS `position` property
      */
-    pos?: ResponsiveValue<CSS.Property.Position>;
+    pos?: Token<CSS.Property.Position>;
     /**
      * The CSS `position` property
      */
-    position?: ResponsiveValue<CSS.Property.Position>;
-    insetInline?: ResponsiveValue<CSS.Property.InsetInline>;
-    insetBlock?: ResponsiveValue<CSS.Property.InsetBlock>;
+    position?: Token<CSS.Property.Position>;
+    insetInline?: Token<CSS.Property.InsetInline>;
+    insetBlock?: Token<CSS.Property.InsetBlock>;
 }
@@ -72,0 +72,0 @@ export declare const position: import("../core").Parser;

dist/types/config/shadow.d.ts

 import * as CSS from "csstype";
-import { ResponsiveValue } from "../utils";
+import { Token } from "../utils";
 /**
@@ -10,11 +10,11 @@ * Types for box and text shadow properties
      */
-    boxShadow?: ResponsiveValue<CSS.Property.BoxShadow | number>;
+    boxShadow?: Token<CSS.Property.BoxShadow | number, "shadows">;
     /**
      * The `box-shadow` property
      */
-    shadow?: ResponsiveValue<CSS.Property.BoxShadow | number>;
+    shadow?: Token<CSS.Property.BoxShadow | number, "shadows">;
     /**
      * The `text-shadow` property
      */
-    textShadow?: ResponsiveValue<CSS.Property.TextShadow | number>;
+    textShadow?: Token<CSS.Property.TextShadow | number, "shadows">;
 }
@@ -21,0 +21,0 @@ export declare const shadow: import("../core").Parser;

dist/types/config/space.d.ts

 import * as CSS from "csstype";
-import { Length, ResponsiveValue } from "../utils";
+import { Token } from "../utils";
 /**
@@ -10,20 +10,20 @@ * Types for space related CSS properties
      */
-    m?: ResponsiveValue<CSS.Property.Margin<Length>>;
+    m?: Token<CSS.Property.Margin | number, "space">;
     /**
      * Margin on top, left, bottom and right
      */
-    margin?: ResponsiveValue<CSS.Property.Margin<Length>>;
+    margin?: Token<CSS.Property.Margin | number, "space">;
     /**
      * Margin on top
      */
-    mt?: ResponsiveValue<CSS.Property.Margin<Length>>;
-    marginBlockStart?: ResponsiveValue<CSS.Property.MarginBlockStart<Length>>;
+    mt?: Token<CSS.Property.Margin | number, "space">;
+    marginBlockStart?: Token<CSS.Property.MarginBlockStart | number, "space">;
     /**
      * Margin on top
      */
-    marginTop?: ResponsiveValue<CSS.Property.MarginTop<Length>>;
+    marginTop?: Token<CSS.Property.MarginTop | number, "space">;
     /**
      * Margin on right
      */
-    mr?: ResponsiveValue<CSS.Property.MarginRight<Length>>;
+    mr?: Token<CSS.Property.MarginRight | number, "space">;
     /**
@@ -33,3 +33,3 @@ * When direction is `ltr`, `marginInlineEnd` is equivalent to `marginRight`.
      */
-    marginInlineEnd?: ResponsiveValue<CSS.Property.MarginInlineEnd<Length>>;
+    marginInlineEnd?: Token<CSS.Property.MarginInlineEnd | number, "space">;
     /**
@@ -39,3 +39,3 @@ * When direction is `ltr`, `marginEnd` is equivalent to `marginRight`.
      */
-    marginEnd?: ResponsiveValue<CSS.Property.MarginInlineEnd<Length>>;
+    marginEnd?: Token<CSS.Property.MarginInlineEnd | number, "space">;
     /**
@@ -45,20 +45,20 @@ * When direction is `ltr`, `me` is equivalent to `marginRight`.
      */
-    me?: ResponsiveValue<CSS.Property.MarginInlineEnd<Length>>;
+    me?: Token<CSS.Property.MarginInlineEnd | number, "space">;
     /**
      * Margin on right
      */
-    marginRight?: ResponsiveValue<CSS.Property.MarginRight<Length>>;
+    marginRight?: Token<CSS.Property.MarginRight | number, "space">;
     /**
      * Margin on bottom
      */
-    mb?: ResponsiveValue<CSS.Property.MarginBottom<Length>>;
-    marginBlockEnd?: ResponsiveValue<CSS.Property.MarginBlockEnd<Length>>;
+    mb?: Token<CSS.Property.MarginBottom | number, "space">;
+    marginBlockEnd?: Token<CSS.Property.MarginBlockEnd | number, "space">;
     /**
      * Margin on bottom
      */
-    marginBottom?: ResponsiveValue<CSS.Property.MarginBottom<Length>>;
+    marginBottom?: Token<CSS.Property.MarginBottom | number, "space">;
     /**
      * Margin on left
      */
-    ml?: ResponsiveValue<CSS.Property.MarginLeft<Length>>;
+    ml?: Token<CSS.Property.MarginLeft | number, "space">;
     /**
@@ -68,3 +68,3 @@ * When direction is `ltr`, `marginInlineStart` is equivalent to `marginLeft`.
      */
-    marginInlineStart?: ResponsiveValue<CSS.Property.MarginInlineStart<Length>>;
+    marginInlineStart?: Token<CSS.Property.MarginInlineStart | number, "space">;
     /**
@@ -74,3 +74,3 @@ * When direction is `ltr`, `marginStart` is equivalent to `marginLeft`.
      */
-    marginStart?: ResponsiveValue<CSS.Property.MarginInlineStart<Length>>;
+    marginStart?: Token<CSS.Property.MarginInlineStart | number, "space">;
     /**
@@ -80,46 +80,46 @@ * When direction is `ltr`, `ms` is equivalent to `marginLeft`.
      */
-    ms?: ResponsiveValue<CSS.Property.MarginInlineStart<Length>>;
+    ms?: Token<CSS.Property.MarginInlineStart | number, "space">;
     /**
      * Margin on left
      */
-    marginLeft?: ResponsiveValue<CSS.Property.MarginLeft<Length>>;
+    marginLeft?: Token<CSS.Property.MarginLeft | number, "space">;
     /**
      * Margin on left and right
      */
-    mx?: ResponsiveValue<CSS.Property.Margin<Length>>;
-    marginInline?: ResponsiveValue<CSS.Property.MarginInline<Length>>;
+    mx?: Token<CSS.Property.Margin | number, "space">;
+    marginInline?: Token<CSS.Property.MarginInline | number, "space">;
     /**
      * Margin on left and right
      */
-    marginX?: ResponsiveValue<CSS.Property.Margin<Length>>;
+    marginX?: Token<CSS.Property.Margin | number, "space">;
     /**
      * Margin on top and bottom
      */
-    my?: ResponsiveValue<CSS.Property.Margin<Length>>;
-    marginBlock?: ResponsiveValue<CSS.Property.MarginBlock<Length>>;
+    my?: Token<CSS.Property.Margin | number, "space">;
+    marginBlock?: Token<CSS.Property.MarginBlock | number, "space">;
     /**
      * Margin on top and bottom
      */
-    marginY?: ResponsiveValue<CSS.Property.Margin<Length>>;
+    marginY?: Token<CSS.Property.Margin | number, "space">;
     /**
      * Padding on top, left, bottom and right
      */
-    p?: ResponsiveValue<CSS.Property.Padding<Length>>;
+    p?: Token<CSS.Property.Padding | number, "space">;
     /**
      * Padding on top, left, bottom and right
      */
-    padding?: ResponsiveValue<CSS.Property.Padding<Length>>;
+    padding?: Token<CSS.Property.Padding | number, "space">;
     /**
      * Padding on top
      */
-    pt?: ResponsiveValue<CSS.Property.PaddingTop<Length>>;
-    paddingBlockStart?: ResponsiveValue<CSS.Property.PaddingBlockStart<Length>>;
+    pt?: Token<CSS.Property.PaddingTop | number, "space">;
+    paddingBlockStart?: Token<CSS.Property.PaddingBlockStart | number, "space">;
     /**
      * Padding on top
      */
-    paddingTop?: ResponsiveValue<CSS.Property.PaddingTop<Length>>;
+    paddingTop?: Token<CSS.Property.PaddingTop | number, "space">;
     /**
      * Padding on right
      */
-    pr?: ResponsiveValue<CSS.Property.PaddingRight<Length>>;
+    pr?: Token<CSS.Property.PaddingRight | number, "space">;
     /**
@@ -129,3 +129,3 @@ * When direction is `ltr`, `paddingInlineEnd` is equivalent to `paddingRight`.
      */
-    paddingInlineEnd?: ResponsiveValue<CSS.Property.PaddingInlineEnd<Length>>;
+    paddingInlineEnd?: Token<CSS.Property.PaddingInlineEnd | number, "space">;
     /**
@@ -135,3 +135,3 @@ * When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`.
      */
-    paddingEnd?: ResponsiveValue<CSS.Property.PaddingInlineEnd<Length>>;
+    paddingEnd?: Token<CSS.Property.PaddingInlineEnd | number, "space">;
     /**
@@ -141,20 +141,20 @@ * When direction is `ltr`, `pe` is equivalent to `paddingRight`.
      */
-    pe?: ResponsiveValue<CSS.Property.PaddingInlineEnd<Length>>;
+    pe?: Token<CSS.Property.PaddingInlineEnd | number, "space">;
     /**
      * Padding on right
      */
-    paddingRight?: ResponsiveValue<CSS.Property.PaddingRight<Length>>;
+    paddingRight?: Token<CSS.Property.PaddingRight | number, "space">;
     /**
      * Padding on bottom
      */
-    pb?: ResponsiveValue<CSS.Property.PaddingBottom<Length>>;
-    paddingBlockEnd?: ResponsiveValue<CSS.Property.PaddingBlockEnd<Length>>;
+    pb?: Token<CSS.Property.PaddingBottom | number, "space">;
+    paddingBlockEnd?: Token<CSS.Property.PaddingBlockEnd | number, "space">;
     /**
      * Padding on bottom
      */
-    paddingBottom?: ResponsiveValue<CSS.Property.PaddingBottom<Length>>;
+    paddingBottom?: Token<CSS.Property.PaddingBottom | number, "space">;
     /**
      * Padding on left
      */
-    pl?: ResponsiveValue<CSS.Property.PaddingLeft<Length>>;
+    pl?: Token<CSS.Property.PaddingLeft | number, "space">;
     /**
@@ -164,3 +164,3 @@ * When direction is `ltr`, `paddingInlineStart` is equivalent to `paddingLeft`.
      */
-    paddingInlineStart?: ResponsiveValue<CSS.Property.PaddingInlineStart<Length>>;
+    paddingInlineStart?: Token<CSS.Property.PaddingInlineStart | number, "space">;
     /**
@@ -170,3 +170,3 @@ * When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`.
      */
-    paddingStart?: ResponsiveValue<CSS.Property.PaddingInlineStart<Length>>;
+    paddingStart?: Token<CSS.Property.PaddingInlineStart | number, "space">;
     /**
@@ -176,25 +176,25 @@ * When direction is `ltr`, `ps` is equivalent to `paddingLeft`.
      */
-    ps?: ResponsiveValue<CSS.Property.PaddingInlineStart<Length>>;
+    ps?: Token<CSS.Property.PaddingInlineStart | number, "space">;
     /**
      * Padding on left
      */
-    paddingLeft?: ResponsiveValue<CSS.Property.PaddingLeft<Length>>;
+    paddingLeft?: Token<CSS.Property.PaddingLeft | number, "space">;
     /**
      * Padding on left and right
      */
-    px?: ResponsiveValue<CSS.Property.Padding<Length>>;
-    paddingInline?: ResponsiveValue<CSS.Property.PaddingInline<Length>>;
+    px?: Token<CSS.Property.Padding | number, "space">;
+    paddingInline?: Token<CSS.Property.PaddingInline | number, "space">;
     /**
      * Padding on left and right
      */
-    paddingX?: ResponsiveValue<CSS.Property.Padding<Length>>;
+    paddingX?: Token<CSS.Property.Padding | number, "space">;
     /**
      * Padding on top and bottom
      */
-    py?: ResponsiveValue<CSS.Property.Padding<Length>>;
-    paddingBlock?: ResponsiveValue<CSS.Property.PaddingBlock<Length>>;
+    py?: Token<CSS.Property.Padding | number, "space">;
+    paddingBlock?: Token<CSS.Property.PaddingBlock | number, "space">;
     /**
      * Padding on top and bottom
      */
-    paddingY?: ResponsiveValue<CSS.Property.Padding<Length>>;
+    paddingY?: Token<CSS.Property.Padding | number, "space">;
 }
@@ -215,5 +215,3 @@ /**
     propNames: string[];
-    cache: Map<string, any>; /**
-     * Margin on top, left, bottom and right
-     */
+    cache: Map<string, any>;
 };

dist/types/config/transform.d.ts

 import * as CSS from "csstype";
-import { Length, ResponsiveValue } from "../utils";
+import { Token } from "../utils";
 export interface TransformProps {
@@ -7,7 +7,7 @@ /**
      */
-    transform?: ResponsiveValue<CSS.Property.Transform>;
+    transform?: Token<CSS.Property.Transform>;
     /**
      * The CSS `transform-origin` property
      */
-    transformOrigin?: ResponsiveValue<CSS.Property.TransformOrigin<Length>>;
+    transformOrigin?: Token<CSS.Property.TransformOrigin | number, "sizes">;
 }
@@ -14,0 +14,0 @@ export declare const transform: import("../core").Parser;

dist/types/config/typography.d.ts

 import * as CSS from "csstype";
-import { ResponsiveValue, Length } from "../utils";
+import { Token } from "../utils";
 /**
@@ -10,55 +10,55 @@ * Types for typography related CSS properties
      */
-    fontWeight?: ResponsiveValue<string | number>;
+    fontWeight?: Token<string, "fontWeights">;
     /**
      * The CSS `line-height` property
      */
-    lineHeight?: ResponsiveValue<CSS.Property.LineHeight<Length>>;
+    lineHeight?: Token<CSS.Property.LineHeight | number, "lineHeights">;
     /**
      * The CSS `letter-spacing` property
      */
-    letterSpacing?: ResponsiveValue<CSS.Property.LetterSpacing<Length>>;
+    letterSpacing?: Token<CSS.Property.LetterSpacing | number, "letterSpacings">;
     /**
      * The CSS `font-size` property
      */
-    fontSize?: ResponsiveValue<CSS.Property.FontSize<Length>>;
+    fontSize?: Token<CSS.Property.FontSize | number, "fontSizes">;
     /**
      * The CSS `font-family` property
      */
-    fontFamily?: ResponsiveValue<CSS.Property.FontFamily>;
+    fontFamily?: Token<CSS.Property.FontFamily, "fonts">;
     /**
      * The CSS `text-align` property
      */
-    textAlign?: ResponsiveValue<CSS.Property.TextAlign>;
+    textAlign?: Token<CSS.Property.TextAlign>;
     /**
      * The CSS `font-style` property
      */
-    fontStyle?: ResponsiveValue<CSS.Property.FontStyle>;
+    fontStyle?: Token<CSS.Property.FontStyle>;
     /**
      * The CSS `word-break` property
      */
-    wordBreak?: ResponsiveValue<CSS.Property.WordBreak>;
+    wordBreak?: Token<CSS.Property.WordBreak>;
     /**
      * The CSS `overflow-wrap` property
      */
-    overflowWrap?: ResponsiveValue<CSS.Property.OverflowWrap>;
+    overflowWrap?: Token<CSS.Property.OverflowWrap>;
     /**
      * The CSS `text-overflow` property
      */
-    textOverflow?: ResponsiveValue<CSS.Property.TextOverflow>;
+    textOverflow?: Token<CSS.Property.TextOverflow>;
     /**
      * The CSS `text-transform` property
      */
-    textTransform?: ResponsiveValue<CSS.Property.TextTransform>;
+    textTransform?: Token<CSS.Property.TextTransform>;
     /**
      * The CSS `white-space` property
      */
-    whiteSpace?: ResponsiveValue<CSS.Property.WhiteSpace>;
+    whiteSpace?: Token<CSS.Property.WhiteSpace>;
     /**
      * The CSS `text-decoration` property
      */
-    textDecoration?: ResponsiveValue<CSS.Property.TextDecoration<Length>>;
+    textDecoration?: Token<CSS.Property.TextDecoration | number>;
     /**
      * The CSS `text-decoration` property
      */
-    textDecor?: ResponsiveValue<CSS.Property.TextDecoration<Length>>;
+    textDecor?: Token<CSS.Property.TextDecoration | number>;
 }
@@ -65,0 +65,0 @@ export declare const typography: import("../core").Parser;

dist/types/css.d.ts

 import { Dict } from "@chakra-ui/utils";
-import { CSSObject, StyleObjectOrFn } from "./css.types";
+import { CSSObject, StyleObjectOrFn } from "./types";
 export declare const processResponsive: (styles: any) => (theme: Dict) => any;
@@ -7,3 +7,3 @@ declare type PropsOrTheme = Dict | {
 };
-export declare const css: (args?: StyleObjectOrFn) => (props?: PropsOrTheme) => CSSObject;
+export declare const css: (styleOrFn?: StyleObjectOrFn) => (props?: PropsOrTheme) => CSSObject;
 export {};

dist/types/index.d.ts

@@ -5,5 +5,5 @@ export * from "./config";
 export * from "./css";
-export * from "./css.types";
-export * from "./parser.types";
+export * from "./types";
+export * from "./theming.types";
 export * from "./system";
 export type { ResponsiveValue } from "./utils";

dist/types/pseudo/index.d.ts

 export * from "./pseudo.utils";
 export * from "./pseudo.selector";
-export * from "./pseudo.types";

dist/types/utils/directionality.d.ts

@@ -21,4 +21,4 @@ import { Dict } from "@chakra-ui/utils";
     direction: TextDirection;
-    getLogicalStyle: <P extends "alignContent" | "alignItems" | "alignSelf" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clipPath" | "color" | "colorAdjust" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "content" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "pointerEvents" | "position" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMargin" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollbarColor" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textDecorationWidth" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "background" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "columnRule" | "columns" | "flex" | "flexFlow" | "font" | "gap" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "lineClamp" | "listStyle" | "margin" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "padding" | "placeItems" | "placeSelf" | "textDecoration" | "textEmphasis" | "transition" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnCount" | "MozColumnFill" | "MozColumnGap" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozImageRegion" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransformOrigin" | "MozTransformStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msAlignSelf" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransformOrigin" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnGap" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphens" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontVariantAlternates" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "scrollbarTrackColor" | "textCombineHorizontal" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundInlinePolicy" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBinding" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineRadius" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozUserInput" | "msImeMode" | "msScrollbarTrackColor" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OTransform" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "WebkitScrollSnapPointsX" | "WebkitScrollSnapPointsY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect">(options: GetLogicalValue<P>) => Record<"alignContent" | "alignItems" | "alignSelf" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clipPath" | "color" | "colorAdjust" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "content" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "pointerEvents" | "position" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMargin" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollbarColor" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textDecorationWidth" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "background" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "columnRule" | "columns" | "flex" | "flexFlow" | "font" | "gap" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "lineClamp" | "listStyle" | "margin" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "padding" | "placeItems" | "placeSelf" | "textDecoration" | "textEmphasis" | "transition" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnCount" | "MozColumnFill" | "MozColumnGap" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozImageRegion" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransformOrigin" | "MozTransformStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msAlignSelf" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransformOrigin" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnGap" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphens" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontVariantAlternates" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "scrollbarTrackColor" | "textCombineHorizontal" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundInlinePolicy" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBinding" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineRadius" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozUserInput" | "msImeMode" | "msScrollbarTrackColor" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OTransform" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "WebkitScrollSnapPointsX" | "WebkitScrollSnapPointsY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", string | number>;
+    getLogicalStyle: <P extends "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clipPath" | "color" | "colorAdjust" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "pointerEvents" | "position" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMargin" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textDecorationWidth" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "background" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "columnRule" | "columns" | "flex" | "flexFlow" | "font" | "gap" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "lineClamp" | "listStyle" | "margin" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "padding" | "placeItems" | "placeSelf" | "textDecoration" | "textEmphasis" | "transition" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnCount" | "MozColumnFill" | "MozColumnGap" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozImageRegion" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransformOrigin" | "MozTransformStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msAlignSelf" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msJustifySelf" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransformOrigin" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnGap" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphens" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "azimuth" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontVariantAlternates" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "scrollbarTrackColor" | "textCombineHorizontal" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundInlinePolicy" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBinding" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineRadius" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozUserInput" | "msImeMode" | "msScrollbarTrackColor" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OTransform" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "WebkitScrollSnapPointsX" | "WebkitScrollSnapPointsY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect">(options: GetLogicalValue<P>) => Record<"alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clipPath" | "color" | "colorAdjust" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "pointerEvents" | "position" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMargin" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textDecorationWidth" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "background" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "columnRule" | "columns" | "flex" | "flexFlow" | "font" | "gap" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "lineClamp" | "listStyle" | "margin" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "padding" | "placeItems" | "placeSelf" | "textDecoration" | "textEmphasis" | "transition" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnCount" | "MozColumnFill" | "MozColumnGap" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozImageRegion" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransformOrigin" | "MozTransformStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msAlignSelf" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msJustifySelf" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransformOrigin" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnGap" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphens" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "azimuth" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontVariantAlternates" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "scrollbarTrackColor" | "textCombineHorizontal" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundInlinePolicy" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBinding" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineRadius" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozUserInput" | "msImeMode" | "msScrollbarTrackColor" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OTransform" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "WebkitScrollSnapPointsX" | "WebkitScrollSnapPointsY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect", string | number>;
 };
 export default directionality;

dist/types/utils/types.d.ts

@@ -0,6 +1,7 @@
+import { ThemeTypings } from "../theming.types";
 export declare type ResponsiveArray<T> = Array<T | null>;
-export declare type ResponsiveObject<T> = {
-    [breakpoint: string]: T;
-};
+export declare type ResponsiveObject<T> = Partial<Record<ThemeTypings["breakpoints"], T>>;
 export declare type ResponsiveValue<T> = T | ResponsiveArray<T> | ResponsiveObject<T>;
 export declare type Length = string | 0 | number;
+export declare type Union<T> = T | (string & {});
+export declare type Token<CSSType, ThemeKey = unknown> = ThemeKey extends keyof ThemeTypings ? ResponsiveValue<Union<CSSType | ThemeTypings[ThemeKey]>> : ResponsiveValue<CSSType>;

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Style function for css-in-js building component libraries",
@@ -59,4 +59,4 @@ "keywords": [
     "css-get-unit": "1.0.1",
-    "csstype": "3.0.3"
+    "csstype": "^3.0.6"
   }
 }

README.md

@@ -1,2 +0,2 @@
-# Component Name
+# @chakra-ui/styled-system
 
@@ -3,0 +3,0 @@ The framework agnostic styling engine for Chakra UI. It's used in the `system`

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

Improved metrics

Total package byte prevSize

728321

increased by1.12%

Lines of code

6325

increased by8.32%

Worsened metrics

Number of package files

203

decreased by-2.4%

Dependency changes

• + Addedcsstype@3.1.3(transitive)

• - Removedcsstype@3.0.3(transitive)

• Updatedcsstype@^3.0.6