@asherng/styled-system - npm Package Compare versions

Comparing version 0.1.19 to 1.0.6

package.json

 {
   "name": "@asherng/styled-system",
-  "version": "0.1.19",
+  "version": "1.0.6",
   "description": "Styled system for UI",
@@ -15,26 +15,30 @@ "bugs": {
   "author": "Asher Nguyen <[e-mail]>",
-  "main": "lib/index",
-  "types": "lib/index.d.ts",
+  "main": "dist/index",
+  "types": "dist/index.d.ts",
   "files": [
-    "lib/**/*"
+    "dist"
   ],
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json"
+  ".": {
+    "types": "./dist/index.d.ts",
+    "require": "./dist/index.js",
+    "import": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    }
   },
   "dependencies": {
-    "@asherng/common-types": "^0.1.3",
-    "@asherng/hooks": "^0.1.10",
-    "@asherng/theme": "^0.1.11",
-    "@asherng/utils": "^0.1.7",
-    "@compiled/react": "^0.13.1",
-    "@stitches/core": "^1.2.8",
-    "clsx": "2.0.0",
+    "@stitches/core": "1.2.8",
+    "clsx": "2.1.0",
     "fast-deep-equal": "3.1.3",
     "lodash.mergewith": "4.6.2",
-    "zustand": "4.3.9"
+    "zustand": "4.5.2",
+    "@asherng/hooks": "^1.0.6",
+    "@asherng/utils": "^1.0.6",
+    "@asherng/theme": "^1.0.6"
   },
   "devDependencies": {
-    "@types/lodash.mergewith": "4.6.7",
-    "csstype": "3.1.2",
-    "typescript": "5.1.6"
+    "@types/lodash.mergewith": "4.6.9",
+    "csstype": "3.1.3",
+    "typescript": "5.4.3",
+    "@asherng/common-types": "^1.0.6"
   },
@@ -44,3 +48,9 @@ "publishConfig": {
   },
-  "gitHead": "dc88200d1846cea6c9f7f9143a8ec13dfbe89bc0"
-}
+  "gitHead": "c4702ddc44863e127b8f57ceee1141daecad5d35",
+  "scripts": {
+    "build": "tsup",
+    "build:fast": "pnpm build --no-splitting --shims",
+    "dev": "pnpm clean && pnpm build:fast --watch src",
+    "clean": "rimraf dist"
+  }
+}

README.md

@@ -1,3 +0,2 @@
-@asherng/styled-system
-======================
+# @asherng/styled-system
 
@@ -9,3 +8,3 @@ Styled-system for UI
 ```bash
-$ yarn add @asherng/styled-system
+$ pnpm add @asherng/styled-system
 ```
@@ -16,7 +15,7 @@
 ```js
-import { styled } from '@asherng/styled-system';
+import { styled } from "@asherng/styled-system";
 
-const Box = styled('div', {
-  componentName: 'Box'
+const Box = styled("div", {
+  componentName: "Box",
 });
-```
+```

lib/colorMode/core.d.ts

-import { ColorMode, StorageManager, ColorModeUtils } from './types';
-export declare const getColorModeUtils: ColorModeUtils;
-export declare const createLocalStorageManager: (key: string) => StorageManager;
-export declare const localStorageManager: StorageManager;
-export declare const cookieStorageManager: StorageManager;
-export declare const cookieStorageManagerSSR: (cookie: string) => StorageManager;
-export declare const getColorModeFromStorage: (manager: StorageManager, fallback: ColorMode) => ColorMode;

lib/colorMode/core.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColorModeFromStorage = exports.cookieStorageManagerSSR = exports.cookieStorageManager = exports.localStorageManager = exports.createLocalStorageManager = exports.getColorModeUtils = void 0;
-const colorMode_1 = require("../config/colorMode");
-const types_1 = require("./types");
-const classNames = {
-    light: colorMode_1.LIGHT_MODE_CLASS_NAME,
-    dark: colorMode_1.DARK_MODE_CLASS_NAME
-};
-const getColorModeUtils = (preventTransition = true) => {
-    const utils = {
-        onColorModeUpdated(value) {
-            document.documentElement.dataset.theme = value;
-            document.documentElement.style.colorScheme = value;
-            document.body.classList.add(value === types_1.ColorMode.dark ? classNames.dark : classNames.light);
-            document.body.classList.remove(value === types_1.ColorMode.dark ? classNames.light : classNames.dark);
-            if (preventTransition) {
-                utils.preventTransition();
-            }
-        },
-        query() {
-            return window.matchMedia('(prefers-color-scheme: dark)');
-        },
-        getSystemThemeColor(fallback) {
-            var _a;
-            const dark = (_a = utils.query().matches) !== null && _a !== void 0 ? _a : fallback === 'dark';
-            return dark ? types_1.ColorMode.dark : types_1.ColorMode.light;
-        },
-        preventTransition() {
-            const css = document.createElement('style');
-            css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
-            document.head.appendChild(css);
-            return () => {
-                (() => window.getComputedStyle(document.body))();
-                requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
-                        document.head.removeChild(css);
-                    });
-                });
-            };
-        }
-    };
-    return utils;
-};
-exports.getColorModeUtils = getColorModeUtils;
-const createLocalStorageManager = (key) => ({
-    ssr: false,
-    type: 'localStorage',
-    get(init) {
-        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
-            return init;
-        }
-        let value;
-        try {
-            value = localStorage.getItem(key) || init;
-        }
-        catch (e) {
-            return e;
-        }
-        return value || init;
-    },
-    set(value) {
-        try {
-            localStorage.setItem(key, value);
-        }
-        catch (e) {
-            console.error(e); // eslint-disable-line no-console
-        }
-    }
-});
-exports.createLocalStorageManager = createLocalStorageManager;
-exports.localStorageManager = (0, exports.createLocalStorageManager)(colorMode_1.COLOR_MODE_STORAGE_KEY);
-const parseCookie = (cookie, key) => {
-    const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
-    return match === null || match === void 0 ? void 0 : match[2];
-};
-const createCookieStorageManager = (key, cookie) => ({
-    ssr: !!cookie,
-    type: 'cookie',
-    get(init) {
-        if (cookie) {
-            return parseCookie(cookie, key);
-        }
-        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
-            return init;
-        }
-        return parseCookie(document.cookie, key) || init;
-    },
-    set(value) {
-        document.cookie = `${key}=${value}; max-age=31536000; path=/`;
-    }
-});
-exports.cookieStorageManager = createCookieStorageManager(colorMode_1.COLOR_MODE_STORAGE_KEY);
-const cookieStorageManagerSSR = (cookie) => createCookieStorageManager(colorMode_1.COLOR_MODE_STORAGE_KEY, cookie);
-exports.cookieStorageManagerSSR = cookieStorageManagerSSR;
-const getColorModeFromStorage = (manager, fallback) => (manager.type === 'cookie' && manager.ssr ? manager.get(fallback) : fallback);
-exports.getColorModeFromStorage = getColorModeFromStorage;

lib/colorMode/hooks.d.ts

-import { ColorMode, UseColorModeContext } from './types';
-export declare const useColorMode: import("zustand").UseBoundStore<import("zustand").StoreApi<UseColorModeContext>>;
-export declare const useColorModeValue: () => ColorMode;
-export declare const useToggleColorMode: () => UseColorModeContext['toggleColorMode'];
-export declare const useSetColorMode: () => UseColorModeContext['setColorMode'];

lib/colorMode/hooks.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSetColorMode = exports.useToggleColorMode = exports.useColorModeValue = exports.useColorMode = void 0;
-const zustand_1 = require("zustand");
-const types_1 = require("./types");
-const core_1 = require("./core");
-const { getSystemThemeColor, onColorModeUpdated } = (0, core_1.getColorModeUtils)();
-exports.useColorMode = (0, zustand_1.create)(set => ({
-    colorMode: types_1.ColorMode.light,
-    initial: ({ initialColorMode, useSystemColorMode, colorModeManager }) => set(() => {
-        const defaultColorMode = initialColorMode === types_1.ColorMode.dark ? types_1.ColorMode.dark : types_1.ColorMode.light;
-        const storageValue = colorModeManager.get();
-        let newColorMode = defaultColorMode;
-        if (storageValue && Object.values(types_1.ColorMode).includes(storageValue)) {
-            onColorModeUpdated(storageValue);
-            newColorMode = storageValue;
-        }
-        else {
-            newColorMode = useSystemColorMode ? getSystemThemeColor() : defaultColorMode;
-            onColorModeUpdated(newColorMode);
-            colorModeManager.set(newColorMode);
-        }
-        onColorModeUpdated(newColorMode);
-        return { colorMode: newColorMode };
-    }),
-    setColorMode: (colorMode, colorModeManager) => set(() => {
-        onColorModeUpdated(colorMode);
-        colorModeManager.set(colorMode);
-        return { colorMode };
-    }),
-    toggleColorMode: colorModeManager => set(state => {
-        const newColorMode = state.colorMode === types_1.ColorMode.dark ? types_1.ColorMode.light : types_1.ColorMode.dark;
-        onColorModeUpdated(newColorMode);
-        colorModeManager.set(newColorMode);
-        return { colorMode: newColorMode };
-    })
-}));
-const useColorModeValue = () => (0, exports.useColorMode)(state => state.colorMode);
-exports.useColorModeValue = useColorModeValue;
-const useToggleColorMode = () => (0, exports.useColorMode)(state => state.toggleColorMode);
-exports.useToggleColorMode = useToggleColorMode;
-const useSetColorMode = () => (0, exports.useColorMode)(state => state.setColorMode);
-exports.useSetColorMode = useSetColorMode;

lib/colorMode/index.d.ts

-export * from './core';
-export * from './types';
-export * from './hooks';

lib/colorMode/index.js

-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./core"), exports);
-__exportStar(require("./types"), exports);
-__exportStar(require("./hooks"), exports);

lib/colorMode/types.d.ts

-import { MayBe, GeneralFunction } from '@asherng/common-types';
-export declare enum ColorMode {
-    'light' = "light",
-    'dark' = "dark",
-    'system' = "system"
-}
-export interface StorageManager {
-    type: 'cookie' | 'localStorage';
-    ssr?: boolean;
-    get(init?: ColorMode): MayBe<ColorMode>;
-    set(value: ColorMode): void;
-}
-interface ColorModeUtilsResponse {
-    onColorModeUpdated(value: ColorMode): void;
-    query(): MediaQueryList;
-    getSystemThemeColor(fallback?: ColorMode): ColorMode;
-    preventTransition(): GeneralFunction;
-}
-export type ColorModeUtils = (preventTransition?: boolean) => ColorModeUtilsResponse;
-export interface ColorModeOption {
-    initialColorMode: ColorMode;
-    useSystemColorMode: boolean;
-    colorModeManager: StorageManager;
-}
-interface InitialiseColorModeParams extends ColorModeOption {
-}
-export interface UseColorModeContext {
-    colorMode: ColorMode;
-    initial(params: InitialiseColorModeParams): void;
-    toggleColorMode: (colorModeManager: StorageManager) => void;
-    setColorMode(value: ColorMode, colorModeManager: StorageManager): void;
-}
-export {};

lib/colorMode/types.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorMode = void 0;
-var ColorMode;
-(function (ColorMode) {
-    ColorMode["light"] = "light";
-    ColorMode["dark"] = "dark";
-    ColorMode["system"] = "system";
-})(ColorMode || (exports.ColorMode = ColorMode = {}));

lib/config/animation.d.ts

-import { AnimationsStyleConfig } from './types';
-declare const animationsStyleConfig: AnimationsStyleConfig;
-export default animationsStyleConfig;

lib/config/animation.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const animationsStyleConfig = {
-    animation: true,
-    animationName: true,
-    animationDuration: true,
-    animationTimingFunction: true,
-    animationDelay: true,
-    animationIterationCount: true,
-    animationDirection: true,
-    animationFillMode: true,
-    animationPlayState: true
-};
-exports.default = animationsStyleConfig;

lib/config/background.d.ts

-import { BackgroundsStyleConfig } from './types';
-declare const backgroundsStyleConfig: BackgroundsStyleConfig;
-export default backgroundsStyleConfig;

lib/config/background.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const styling_1 = require("../styling");
-const core_1 = require("./core");
-const backgroundsStyleConfig = {
-    background: core_1.styleConfigBase.colors('background'),
-    bg: core_1.styleConfigBase.colors('background'),
-    backgroundColor: core_1.styleConfigBase.colors('backgroundColor'),
-    bgColor: core_1.styleConfigBase.colors('backgroundColor'),
-    backgroundImage: (0, styling_1.toStyleConfig)({ transform: styling_1.transforms.bgImage, property: 'backgroundImage' }),
-    bgImage: (0, styling_1.toStyleConfig)({ transform: styling_1.transforms.bgImage, property: 'backgroundImage' }),
-    backgroundClip: (0, styling_1.toStyleConfig)({ transform: styling_1.transforms.bgClip, property: 'backgroundClip' }),
-    bgClip: (0, styling_1.toStyleConfig)({ transform: styling_1.transforms.bgClip, property: 'backgroundClip' }),
-    backgroundSize: true,
-    bgSize: (0, styling_1.toStyleConfig)({ property: 'backgroundSize' }),
-    backgroundPosition: true,
-    bgPosition: (0, styling_1.toStyleConfig)({ property: 'backgroundPosition' }),
-    backgroundRepeat: true,
-    bgRepeat: (0, styling_1.toStyleConfig)({ property: 'backgroundRepeat' }),
-    backgroundAttachment: true,
-    bgAttachment: (0, styling_1.toStyleConfig)({ property: 'backgroundAttachment' }),
-    backgroundGradient: (0, styling_1.toStyleConfig)({
-        transform: styling_1.transforms.gradient,
-        property: 'backgroundImage'
-    }),
-    bgGradient: (0, styling_1.toStyleConfig)({ transform: styling_1.transforms.gradient, property: 'backgroundImage' }),
-    backgroundOrigin: true,
-    bgOrigin: (0, styling_1.toStyleConfig)({ property: 'backgroundOrigin' })
-};
-exports.default = backgroundsStyleConfig;

lib/config/border.d.ts

-import { BordersStyleConfig } from './types';
-declare const bordersStyleConfig: BordersStyleConfig;
-export default bordersStyleConfig;

lib/config/border.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("./core");
-const bordersStyleConfig = {
-    border: core_1.styleConfigBase.borders('border'),
-    borderWidth: core_1.styleConfigBase.borderWidths('borderWidth'),
-    borderStyle: core_1.styleConfigBase.borderStyles('borderStyle'),
-    borderColor: core_1.styleConfigBase.colors('borderColor'),
-    borderRadius: core_1.styleConfigBase.radii('borderRadius'),
-    borderX: core_1.styleConfigBase.borders(['borderLeft', 'borderRight']),
-    borderY: core_1.styleConfigBase.borders(['borderTop', 'borderBottom']),
-    borderCollapse: true,
-    // Border top
-    borderTop: core_1.styleConfigBase.borders('borderTop'),
-    borderBlockStart: core_1.styleConfigBase.borders('borderBlockStart'),
-    borderTopWidth: core_1.styleConfigBase.borderWidths('borderTopWidth'),
-    borderBlockStartWidth: core_1.styleConfigBase.borderWidths('borderBlockStartWidth'),
-    borderTopStyle: core_1.styleConfigBase.borderStyles('borderTopStyle'),
-    borderBlockStartStyle: core_1.styleConfigBase.borderStyles('borderBlockStartStyle'),
-    borderTopColor: core_1.styleConfigBase.colors('borderTopColor'),
-    borderBlockStartColor: core_1.styleConfigBase.colors('borderBlockStartColor'),
-    borderTopLeftRadius: core_1.styleConfigBase.radii('borderTopLeftRadius'),
-    borderTopRightRadius: core_1.styleConfigBase.radii('borderTopRightRadius'),
-    // Border right
-    borderRight: core_1.styleConfigBase.borders('borderRight'),
-    borderInlineEnd: core_1.styleConfigBase.borders('borderInlineEnd'),
-    borderRightWidth: core_1.styleConfigBase.borderWidths('borderRightWidth'),
-    borderInlineEndWidth: core_1.styleConfigBase.borderWidths('borderInlineEndWidth'),
-    borderRightStyle: core_1.styleConfigBase.borderStyles('borderRightStyle'),
-    borderInlineEndStyle: core_1.styleConfigBase.borderStyles('borderInlineEndStyle'),
-    borderRightColor: core_1.styleConfigBase.colors('borderRightColor'),
-    borderInlineEndColor: core_1.styleConfigBase.colors('borderInlineEndColor'),
-    // Border bottom
-    borderBottom: core_1.styleConfigBase.borders('borderBottom'),
-    borderBlockEnd: core_1.styleConfigBase.borders('borderBlockEnd'),
-    borderBottomWidth: core_1.styleConfigBase.borderWidths('borderBottomWidth'),
-    borderBlockEndWidth: core_1.styleConfigBase.borderWidths('borderBlockEndWidth'),
-    borderBottomStyle: core_1.styleConfigBase.borderStyles('borderBottomStyle'),
-    borderBlockEndStyle: core_1.styleConfigBase.borderStyles('borderBlockEndStyle'),
-    borderBottomColor: core_1.styleConfigBase.colors('borderBottomColor'),
-    borderBlockEndColor: core_1.styleConfigBase.colors('borderBlockEndColor'),
-    borderBottomLeftRadius: core_1.styleConfigBase.radii('borderBottomLeftRadius'),
-    borderBottomRightRadius: core_1.styleConfigBase.radii('borderBottomRightRadius'),
-    // Border left
-    borderLeft: core_1.styleConfigBase.borders('borderLeft'),
-    borderInlineStart: core_1.styleConfigBase.borders('borderInlineStart'),
-    borderLeftWidth: core_1.styleConfigBase.borderWidths('borderLeftWidth'),
-    borderInlineStartWidth: core_1.styleConfigBase.borderWidths('borderInlineStartWidth'),
-    borderLeftStyle: core_1.styleConfigBase.borderStyles('borderLeftStyle'),
-    borderInlineStartStyle: core_1.styleConfigBase.borderStyles('borderInlineStartStyle'),
-    borderLeftColor: core_1.styleConfigBase.colors('borderLeftColor'),
-    borderInlineStartColor: core_1.styleConfigBase.colors('borderInlineStartColor')
-};
-exports.default = bordersStyleConfig;

lib/config/color.d.ts

-import { ColorsStyleConfig } from './types';
-declare const colorsStyleConfig: ColorsStyleConfig;
-export default colorsStyleConfig;

lib/config/color.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("./core");
-const colorsStyleConfig = {
-    color: core_1.styleConfigBase.colors('color'),
-    caretColor: core_1.styleConfigBase.colors('caretColor'),
-    fill: core_1.styleConfigBase.colors('fill'),
-    stroke: core_1.styleConfigBase.colors('stroke')
-};
-exports.default = colorsStyleConfig;

lib/config/colorMode.d.ts

-export declare const DARK_MODE_CLASS_NAME = "dark-mode";
-export declare const LIGHT_MODE_CLASS_NAME = "light-mode";
-export declare const DARK_MODE_SELECTOR: string;
-export declare const LIGHT_MODE_SELECTOR: string;
-export declare const COLOR_MODE_STORAGE_KEY = "styled-system-color-mode";

lib/config/colorMode.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLOR_MODE_STORAGE_KEY = exports.LIGHT_MODE_SELECTOR = exports.DARK_MODE_SELECTOR = exports.LIGHT_MODE_CLASS_NAME = exports.DARK_MODE_CLASS_NAME = void 0;
-exports.DARK_MODE_CLASS_NAME = 'dark-mode';
-exports.LIGHT_MODE_CLASS_NAME = 'light-mode';
-exports.DARK_MODE_SELECTOR = `.${exports.DARK_MODE_CLASS_NAME} :host:not([data-theme]),.${exports.DARK_MODE_CLASS_NAME} :root:not([data-theme]),.${exports.DARK_MODE_CLASS_NAME} [data-theme]:not([data-theme]),[data-theme=dark] :host:not([data-theme]),[data-theme=dark] :root:not([data-theme]),[data-theme=dark] [data-theme]:not([data-theme]),:host[data-theme=dark],:root[data-theme=dark],[data-theme][data-theme=dark],:host[data-theme=dark] *::before,:root[data-theme=dark] *::before,[data-theme][data-theme=dark] *::before,:host[data-theme=dark] *::after,:root[data-theme=dark] *::after,[data-theme][data-theme=dark] *::after`;
-exports.LIGHT_MODE_SELECTOR = `.${exports.LIGHT_MODE_CLASS_NAME} :host:not([data-theme]),.${exports.LIGHT_MODE_CLASS_NAME} :root:not([data-theme]),.${exports.LIGHT_MODE_CLASS_NAME} [data-theme]:not([data-theme]),[data-theme=light] :host:not([data-theme]),[data-theme=light] :root:not([data-theme]),[data-theme=light] [data-theme]:not([data-theme]),:host[data-theme=light],:root[data-theme=light],[data-theme][data-theme=light],:host[data-theme=light] *::before,:root[data-theme=light] *::before,[data-theme][data-theme=light] *::before,:host[data-theme=light] *::after,:root[data-theme=light] *::after,[data-theme][data-theme=light] *::after`;
-exports.COLOR_MODE_STORAGE_KEY = 'styled-system-color-mode';

lib/config/core.d.ts

-import { StyleConfigBase } from './types';
-export declare const styleConfigBase: StyleConfigBase;

lib/config/core.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.styleConfigBase = void 0;
-const styling_1 = require("../styling");
-exports.styleConfigBase = {
-    sizes: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'sizes', transform: styling_1.transforms.px }),
-    space: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'space', transform: styling_1.transforms.px }),
-    colors: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'colors', transform: styling_1.transforms.color }),
-    fontSizes: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'fontSizes', transform: styling_1.transforms.px }),
-    fonts: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'fonts' }),
-    fontWeights: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'fontWeights' }),
-    shadows: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'shadows' }),
-    lineHeights: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'lineHeights' }),
-    letterSpacings: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'letterSpacings' }),
-    borders: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'borders' }),
-    borderWidths: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'borderWidths', transform: styling_1.transforms.px }),
-    borderStyles: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'borderStyles' }),
-    zIndices: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'zIndices' }),
-    radii: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'radii', transform: styling_1.transforms.px }),
-    opacity: (0, styling_1.toStyleConfigByProperty)({ themeScale: 'opacity' })
-};

lib/config/effect.d.ts

-import { EffectsStyleConfig } from './types';
-declare const effectsStyleConfig: EffectsStyleConfig;
-export default effectsStyleConfig;

lib/config/effect.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const styling_1 = require("../styling");
-const core_1 = require("./core");
-const effectsStyleConfig = {
-    boxShadow: core_1.styleConfigBase.shadows('boxShadow'),
-    shadow: core_1.styleConfigBase.shadows('boxShadow'),
-    mixBlendMode: true,
-    blendMode: (0, styling_1.toStyleConfig)({ property: 'mixBlendMode' }),
-    backgroundBlendMode: true,
-    bgBlendMode: (0, styling_1.toStyleConfig)({ property: 'backgroundBlendMode' }),
-    opacity: core_1.styleConfigBase.opacity('opacity'),
-    maskSize: true,
-    maskPosition: true,
-    maskRepeat: true,
-    maskImage: true
-};
-exports.default = effectsStyleConfig;

lib/config/filter.d.ts

-import { FiltersStyleConfig } from './types';
-declare const filtersStyleConfig: FiltersStyleConfig;
-export default filtersStyleConfig;

lib/config/filter.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const filtersStyleConfig = {
-    filter: true,
-    backdropFilter: true
-};
-exports.default = filtersStyleConfig;

lib/config/flexBox.d.ts

-import { FlexboxsStyleConfig } from './types';
-declare const flexboxsStyleConfig: FlexboxsStyleConfig;
-export default flexboxsStyleConfig;

lib/config/flexBox.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("./core");
-const flexboxsStyleConfig = {
-    alignItems: true,
-    alignContent: true,
-    justifyItems: true,
-    justifyContent: true,
-    flexWrap: true,
-    flexFlow: true,
-    flexBasis: core_1.styleConfigBase.sizes('flexBasis'),
-    flexDirection: true,
-    flex: true,
-    gap: core_1.styleConfigBase.space('gap'),
-    rowGap: core_1.styleConfigBase.space('rowGap'),
-    columnGap: core_1.styleConfigBase.space('columnGap'),
-    justifySelf: true,
-    alignSelf: true,
-    order: true,
-    flexGrow: true,
-    flexShrink: true,
-    placeItems: true,
-    placeContent: true,
-    placeSelf: true
-};
-exports.default = flexboxsStyleConfig;

lib/config/grid.d.ts

-import { GridsStyleConfig } from './types';
-declare const gridsStyleConfig: GridsStyleConfig;
-export default gridsStyleConfig;

lib/config/grid.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("./core");
-const gridsStyleConfig = {
-    gridGap: core_1.styleConfigBase.space('gridGap'),
-    gridColumnGap: core_1.styleConfigBase.space('gridColumnGap'),
-    gridRowGap: core_1.styleConfigBase.space('gridRowGap'),
-    gridColumn: true,
-    gridColumnStart: true,
-    gridColumnEnd: true,
-    gridRow: true,
-    gridRowStart: true,
-    gridRowEnd: true,
-    gridTemplate: true,
-    gridTemplateColumns: true,
-    gridTemplateRows: true,
-    gridTemplateAreas: true,
-    gridArea: true,
-    gridAutoFlow: true,
-    gridAutoColumns: true,
-    gridAutoRows: true
-};
-exports.default = gridsStyleConfig;

lib/config/index.d.ts

-import { ThemeScale } from '../types';
-import { StyleConfig } from './types';
-export { default as pseudoConfig } from './pseudo';
-export { default as animation } from './animation';
-export { default as background } from './background';
-export { default as border } from './border';
-export { default as color } from './color';
-export { default as effect } from './effect';
-export { default as filter } from './filter';
-export { default as flexbox } from './flexBox';
-export { default as grid } from './grid';
-export { default as interactivity } from './interactivity';
-export { default as layout } from './layout';
-export { default as list } from './list';
-export { default as position } from './position';
-export { default as scroll } from './scroll';
-export { default as space } from './space';
-export { default as transform } from './transform';
-export { default as transition } from './transition';
-export { default as typography } from './typography';
-export * from './core';
-export * from './types';
-export declare const styleConfig: StyleConfig;
-export declare const themeScales: ThemeScale[];
-export declare const themeScalesWithPxValue: ThemeScale[];
-export declare const stylePropNames: string[];
-export declare const basePropsName: Set<string>;
-export declare const styledConfigWithPseudo: {
-    _hover: string;
-    _hoverFocus: string;
-    _focusVisited: string;
-    _active: string;
-    _focus: string;
-    _highlighted: string;
-    _focusWithin: string;
-    _focusVisible: string;
-    _disabled: string;
-    _readOnly: string;
-    _before: string;
-    _after: string;
-    _empty: string;
-    _notEmpty: string;
-    _expanded: string;
-    _checked: string;
-    _grabbed: string;
-    _pressed: string;
-    _invalid: string;
-    _valid: string;
-    _loading: string;
-    _selected: string;
-    _hidden: string;
-    _autofill: string;
-    _even: string;
-    _odd: string;
-    _first: string;
-    _firstChild: string;
-    _last: string;
-    _lastChild: string;
-    _notFirst: string;
-    _notLast: string;
-    _visited: string;
-    _activeLink: string;
-    _activeStep: string;
-    _indeterminate: string;
-    _placeholder: string;
-    _placeholderShown: string;
-    _fullScreen: string;
-    _selection: string;
-    _dark: string;
-    _light: string;
-    filter?: boolean | import("./types").StyleConfigValue | undefined;
-    fill?: boolean | import("./types").StyleConfigValue | undefined;
-    stroke?: boolean | import("./types").StyleConfigValue | undefined;
-    animationName?: boolean | import("./types").StyleConfigValue | undefined;
-    flex?: boolean | import("./types").StyleConfigValue | undefined;
-    height?: boolean | import("./types").StyleConfigValue | undefined;
-    width?: boolean | import("./types").StyleConfigValue | undefined;
-    left?: boolean | import("./types").StyleConfigValue | undefined;
-    top?: boolean | import("./types").StyleConfigValue | undefined;
-    alignContent?: boolean | import("./types").StyleConfigValue | undefined;
-    alignItems?: boolean | import("./types").StyleConfigValue | undefined;
-    alignSelf?: boolean | import("./types").StyleConfigValue | undefined;
-    animation?: boolean | import("./types").StyleConfigValue | undefined;
-    animationDelay?: boolean | import("./types").StyleConfigValue | undefined;
-    animationDirection?: boolean | import("./types").StyleConfigValue | undefined;
-    animationDuration?: boolean | import("./types").StyleConfigValue | undefined;
-    animationFillMode?: boolean | import("./types").StyleConfigValue | undefined;
-    animationIterationCount?: boolean | import("./types").StyleConfigValue | undefined;
-    animationPlayState?: boolean | import("./types").StyleConfigValue | undefined;
-    animationTimingFunction?: boolean | import("./types").StyleConfigValue | undefined;
-    appearance?: boolean | import("./types").StyleConfigValue | undefined;
-    aspectRatio?: boolean | import("./types").StyleConfigValue | undefined;
-    backdropFilter?: boolean | import("./types").StyleConfigValue | undefined;
-    backfaceVisibility?: boolean | import("./types").StyleConfigValue | undefined;
-    background?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundAttachment?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundBlendMode?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundClip?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundColor?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundImage?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundOrigin?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundPosition?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundRepeat?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundSize?: boolean | import("./types").StyleConfigValue | undefined;
-    blockSize?: boolean | import("./types").StyleConfigValue | undefined;
-    border?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBlockEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBlockEndColor?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBlockEndStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBlockEndWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBlockStart?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBlockStartColor?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBlockStartStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBlockStartWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBottom?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBottomColor?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBottomLeftRadius?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBottomRightRadius?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBottomStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    borderBottomWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    borderCollapse?: boolean | import("./types").StyleConfigValue | undefined;
-    borderColor?: boolean | import("./types").StyleConfigValue | undefined;
-    borderInlineEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    borderInlineEndColor?: boolean | import("./types").StyleConfigValue | undefined;
-    borderInlineEndStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    borderInlineEndWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    borderInlineStart?: boolean | import("./types").StyleConfigValue | undefined;
-    borderInlineStartColor?: boolean | import("./types").StyleConfigValue | undefined;
-    borderInlineStartStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    borderInlineStartWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    borderLeft?: boolean | import("./types").StyleConfigValue | undefined;
-    borderLeftColor?: boolean | import("./types").StyleConfigValue | undefined;
-    borderLeftStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    borderLeftWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    borderRadius?: boolean | import("./types").StyleConfigValue | undefined;
-    borderRight?: boolean | import("./types").StyleConfigValue | undefined;
-    borderRightColor?: boolean | import("./types").StyleConfigValue | undefined;
-    borderRightStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    borderRightWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    borderStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    borderTop?: boolean | import("./types").StyleConfigValue | undefined;
-    borderTopColor?: boolean | import("./types").StyleConfigValue | undefined;
-    borderTopLeftRadius?: boolean | import("./types").StyleConfigValue | undefined;
-    borderTopRightRadius?: boolean | import("./types").StyleConfigValue | undefined;
-    borderTopStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    borderTopWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    borderWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    bottom?: boolean | import("./types").StyleConfigValue | undefined;
-    boxShadow?: boolean | import("./types").StyleConfigValue | undefined;
-    boxSizing?: boolean | import("./types").StyleConfigValue | undefined;
-    breakAfter?: boolean | import("./types").StyleConfigValue | undefined;
-    breakBefore?: boolean | import("./types").StyleConfigValue | undefined;
-    breakInside?: boolean | import("./types").StyleConfigValue | undefined;
-    caretColor?: boolean | import("./types").StyleConfigValue | undefined;
-    clear?: boolean | import("./types").StyleConfigValue | undefined;
-    clipPath?: boolean | import("./types").StyleConfigValue | undefined;
-    color?: boolean | import("./types").StyleConfigValue | undefined;
-    columnGap?: boolean | import("./types").StyleConfigValue | undefined;
-    columns?: boolean | import("./types").StyleConfigValue | undefined;
-    cursor?: boolean | import("./types").StyleConfigValue | undefined;
-    display?: boolean | import("./types").StyleConfigValue | undefined;
-    flexBasis?: boolean | import("./types").StyleConfigValue | undefined;
-    flexDirection?: boolean | import("./types").StyleConfigValue | undefined;
-    flexFlow?: boolean | import("./types").StyleConfigValue | undefined;
-    flexGrow?: boolean | import("./types").StyleConfigValue | undefined;
-    flexShrink?: boolean | import("./types").StyleConfigValue | undefined;
-    flexWrap?: boolean | import("./types").StyleConfigValue | undefined;
-    float?: boolean | import("./types").StyleConfigValue | undefined;
-    fontFamily?: boolean | import("./types").StyleConfigValue | undefined;
-    fontSize?: boolean | import("./types").StyleConfigValue | undefined;
-    fontStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    fontWeight?: boolean | import("./types").StyleConfigValue | undefined;
-    gap?: boolean | import("./types").StyleConfigValue | undefined;
-    gridArea?: boolean | import("./types").StyleConfigValue | undefined;
-    gridAutoColumns?: boolean | import("./types").StyleConfigValue | undefined;
-    gridAutoFlow?: boolean | import("./types").StyleConfigValue | undefined;
-    gridAutoRows?: boolean | import("./types").StyleConfigValue | undefined;
-    gridColumn?: boolean | import("./types").StyleConfigValue | undefined;
-    gridColumnEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    gridColumnGap?: boolean | import("./types").StyleConfigValue | undefined;
-    gridColumnStart?: boolean | import("./types").StyleConfigValue | undefined;
-    gridGap?: boolean | import("./types").StyleConfigValue | undefined;
-    gridRow?: boolean | import("./types").StyleConfigValue | undefined;
-    gridRowEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    gridRowGap?: boolean | import("./types").StyleConfigValue | undefined;
-    gridRowStart?: boolean | import("./types").StyleConfigValue | undefined;
-    gridTemplate?: boolean | import("./types").StyleConfigValue | undefined;
-    gridTemplateAreas?: boolean | import("./types").StyleConfigValue | undefined;
-    gridTemplateColumns?: boolean | import("./types").StyleConfigValue | undefined;
-    gridTemplateRows?: boolean | import("./types").StyleConfigValue | undefined;
-    hyphens?: boolean | import("./types").StyleConfigValue | undefined;
-    inlineSize?: boolean | import("./types").StyleConfigValue | undefined;
-    inset?: boolean | import("./types").StyleConfigValue | undefined;
-    insetBlock?: boolean | import("./types").StyleConfigValue | undefined;
-    insetBlockEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    insetBlockStart?: boolean | import("./types").StyleConfigValue | undefined;
-    insetInline?: boolean | import("./types").StyleConfigValue | undefined;
-    insetInlineEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    insetInlineStart?: boolean | import("./types").StyleConfigValue | undefined;
-    isolation?: boolean | import("./types").StyleConfigValue | undefined;
-    justifyContent?: boolean | import("./types").StyleConfigValue | undefined;
-    justifyItems?: boolean | import("./types").StyleConfigValue | undefined;
-    justifySelf?: boolean | import("./types").StyleConfigValue | undefined;
-    letterSpacing?: boolean | import("./types").StyleConfigValue | undefined;
-    lineHeight?: boolean | import("./types").StyleConfigValue | undefined;
-    listStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    listStyleImage?: boolean | import("./types").StyleConfigValue | undefined;
-    listStylePosition?: boolean | import("./types").StyleConfigValue | undefined;
-    listStyleType?: boolean | import("./types").StyleConfigValue | undefined;
-    margin?: boolean | import("./types").StyleConfigValue | undefined;
-    marginBlock?: boolean | import("./types").StyleConfigValue | undefined;
-    marginBlockEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    marginBlockStart?: boolean | import("./types").StyleConfigValue | undefined;
-    marginBottom?: boolean | import("./types").StyleConfigValue | undefined;
-    marginInline?: boolean | import("./types").StyleConfigValue | undefined;
-    marginInlineEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    marginInlineStart?: boolean | import("./types").StyleConfigValue | undefined;
-    marginLeft?: boolean | import("./types").StyleConfigValue | undefined;
-    marginRight?: boolean | import("./types").StyleConfigValue | undefined;
-    marginTop?: boolean | import("./types").StyleConfigValue | undefined;
-    maskImage?: boolean | import("./types").StyleConfigValue | undefined;
-    maskPosition?: boolean | import("./types").StyleConfigValue | undefined;
-    maskRepeat?: boolean | import("./types").StyleConfigValue | undefined;
-    maskSize?: boolean | import("./types").StyleConfigValue | undefined;
-    maxBlockSize?: boolean | import("./types").StyleConfigValue | undefined;
-    maxHeight?: boolean | import("./types").StyleConfigValue | undefined;
-    maxInlineSize?: boolean | import("./types").StyleConfigValue | undefined;
-    maxWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    minBlockSize?: boolean | import("./types").StyleConfigValue | undefined;
-    minHeight?: boolean | import("./types").StyleConfigValue | undefined;
-    minInlineSize?: boolean | import("./types").StyleConfigValue | undefined;
-    minWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    mixBlendMode?: boolean | import("./types").StyleConfigValue | undefined;
-    objectFit?: boolean | import("./types").StyleConfigValue | undefined;
-    objectPosition?: boolean | import("./types").StyleConfigValue | undefined;
-    opacity?: boolean | import("./types").StyleConfigValue | undefined;
-    order?: boolean | import("./types").StyleConfigValue | undefined;
-    outline?: boolean | import("./types").StyleConfigValue | undefined;
-    outlineColor?: boolean | import("./types").StyleConfigValue | undefined;
-    outlineOffset?: boolean | import("./types").StyleConfigValue | undefined;
-    outlineStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    outlineWidth?: boolean | import("./types").StyleConfigValue | undefined;
-    overflow?: boolean | import("./types").StyleConfigValue | undefined;
-    overflowWrap?: boolean | import("./types").StyleConfigValue | undefined;
-    overflowX?: boolean | import("./types").StyleConfigValue | undefined;
-    overflowY?: boolean | import("./types").StyleConfigValue | undefined;
-    overscrollBehavior?: boolean | import("./types").StyleConfigValue | undefined;
-    overscrollBehaviorX?: boolean | import("./types").StyleConfigValue | undefined;
-    overscrollBehaviorY?: boolean | import("./types").StyleConfigValue | undefined;
-    padding?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingBlock?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingBlockEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingBlockStart?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingBottom?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingInline?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingInlineEnd?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingInlineStart?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingLeft?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingRight?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingTop?: boolean | import("./types").StyleConfigValue | undefined;
-    placeContent?: boolean | import("./types").StyleConfigValue | undefined;
-    placeItems?: boolean | import("./types").StyleConfigValue | undefined;
-    placeSelf?: boolean | import("./types").StyleConfigValue | undefined;
-    pointerEvents?: boolean | import("./types").StyleConfigValue | undefined;
-    position?: boolean | import("./types").StyleConfigValue | undefined;
-    resize?: boolean | import("./types").StyleConfigValue | undefined;
-    right?: boolean | import("./types").StyleConfigValue | undefined;
-    rowGap?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollBehavior?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollMargin?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollMarginBottom?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollMarginLeft?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollMarginRight?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollMarginTop?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollPadding?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollPaddingBottom?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollPaddingLeft?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollPaddingRight?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollPaddingTop?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollSnapAlign?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollSnapStop?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollSnapType?: boolean | import("./types").StyleConfigValue | undefined;
-    textAlign?: boolean | import("./types").StyleConfigValue | undefined;
-    textDecoration?: boolean | import("./types").StyleConfigValue | undefined;
-    textDecorationColor?: boolean | import("./types").StyleConfigValue | undefined;
-    textDecorationLine?: boolean | import("./types").StyleConfigValue | undefined;
-    textDecorationStyle?: boolean | import("./types").StyleConfigValue | undefined;
-    textDecorationThickness?: boolean | import("./types").StyleConfigValue | undefined;
-    textIndent?: boolean | import("./types").StyleConfigValue | undefined;
-    textOverflow?: boolean | import("./types").StyleConfigValue | undefined;
-    textShadow?: boolean | import("./types").StyleConfigValue | undefined;
-    textTransform?: boolean | import("./types").StyleConfigValue | undefined;
-    textUnderlineOffset?: boolean | import("./types").StyleConfigValue | undefined;
-    touchAction?: boolean | import("./types").StyleConfigValue | undefined;
-    transform?: boolean | import("./types").StyleConfigValue | undefined;
-    transformOrigin?: boolean | import("./types").StyleConfigValue | undefined;
-    transition?: boolean | import("./types").StyleConfigValue | undefined;
-    transitionDelay?: boolean | import("./types").StyleConfigValue | undefined;
-    transitionDuration?: boolean | import("./types").StyleConfigValue | undefined;
-    transitionProperty?: boolean | import("./types").StyleConfigValue | undefined;
-    transitionTimingFunction?: boolean | import("./types").StyleConfigValue | undefined;
-    userSelect?: boolean | import("./types").StyleConfigValue | undefined;
-    verticalAlign?: boolean | import("./types").StyleConfigValue | undefined;
-    visibility?: boolean | import("./types").StyleConfigValue | undefined;
-    whiteSpace?: boolean | import("./types").StyleConfigValue | undefined;
-    willChange?: boolean | import("./types").StyleConfigValue | undefined;
-    wordBreak?: boolean | import("./types").StyleConfigValue | undefined;
-    wordSpacing?: boolean | import("./types").StyleConfigValue | undefined;
-    wordWrap?: boolean | import("./types").StyleConfigValue | undefined;
-    writingMode?: boolean | import("./types").StyleConfigValue | undefined;
-    zIndex?: boolean | import("./types").StyleConfigValue | undefined;
-    p?: boolean | import("./types").StyleConfigValue | undefined;
-    ms?: boolean | import("./types").StyleConfigValue | undefined;
-    boxDecorationBreak?: boolean | import("./types").StyleConfigValue | undefined;
-    m?: boolean | import("./types").StyleConfigValue | undefined;
-    bg?: boolean | import("./types").StyleConfigValue | undefined;
-    bgColor?: boolean | import("./types").StyleConfigValue | undefined;
-    bgImage?: boolean | import("./types").StyleConfigValue | undefined;
-    bgClip?: boolean | import("./types").StyleConfigValue | undefined;
-    bgSize?: boolean | import("./types").StyleConfigValue | undefined;
-    bgPosition?: boolean | import("./types").StyleConfigValue | undefined;
-    bgRepeat?: boolean | import("./types").StyleConfigValue | undefined;
-    bgAttachment?: boolean | import("./types").StyleConfigValue | undefined;
-    backgroundGradient?: boolean | import("./types").StyleConfigValue | undefined;
-    bgGradient?: boolean | import("./types").StyleConfigValue | undefined;
-    bgOrigin?: boolean | import("./types").StyleConfigValue | undefined;
-    borderX?: boolean | import("./types").StyleConfigValue | undefined;
-    borderY?: boolean | import("./types").StyleConfigValue | undefined;
-    shadow?: boolean | import("./types").StyleConfigValue | undefined;
-    blendMode?: boolean | import("./types").StyleConfigValue | undefined;
-    bgBlendMode?: boolean | import("./types").StyleConfigValue | undefined;
-    w?: boolean | import("./types").StyleConfigValue | undefined;
-    boxSize?: boolean | import("./types").StyleConfigValue | undefined;
-    maxW?: boolean | import("./types").StyleConfigValue | undefined;
-    minW?: boolean | import("./types").StyleConfigValue | undefined;
-    h?: boolean | import("./types").StyleConfigValue | undefined;
-    maxH?: boolean | import("./types").StyleConfigValue | undefined;
-    minH?: boolean | import("./types").StyleConfigValue | undefined;
-    overscroll?: boolean | import("./types").StyleConfigValue | undefined;
-    overscrollX?: boolean | import("./types").StyleConfigValue | undefined;
-    overscrollY?: boolean | import("./types").StyleConfigValue | undefined;
-    insetX?: boolean | import("./types").StyleConfigValue | undefined;
-    insetY?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollMarginX?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollMarginY?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollPaddingX?: boolean | import("./types").StyleConfigValue | undefined;
-    scrollPaddingY?: boolean | import("./types").StyleConfigValue | undefined;
-    mt?: boolean | import("./types").StyleConfigValue | undefined;
-    mr?: boolean | import("./types").StyleConfigValue | undefined;
-    mb?: boolean | import("./types").StyleConfigValue | undefined;
-    ml?: boolean | import("./types").StyleConfigValue | undefined;
-    marginX?: boolean | import("./types").StyleConfigValue | undefined;
-    mx?: boolean | import("./types").StyleConfigValue | undefined;
-    marginY?: boolean | import("./types").StyleConfigValue | undefined;
-    my?: boolean | import("./types").StyleConfigValue | undefined;
-    me?: boolean | import("./types").StyleConfigValue | undefined;
-    pt?: boolean | import("./types").StyleConfigValue | undefined;
-    pr?: boolean | import("./types").StyleConfigValue | undefined;
-    pb?: boolean | import("./types").StyleConfigValue | undefined;
-    pl?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingX?: boolean | import("./types").StyleConfigValue | undefined;
-    px?: boolean | import("./types").StyleConfigValue | undefined;
-    paddingY?: boolean | import("./types").StyleConfigValue | undefined;
-    py?: boolean | import("./types").StyleConfigValue | undefined;
-    ps?: boolean | import("./types").StyleConfigValue | undefined;
-    pe?: boolean | import("./types").StyleConfigValue | undefined;
-};

lib/config/index.js

-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.styledConfigWithPseudo = exports.basePropsName = exports.stylePropNames = exports.themeScalesWithPxValue = exports.themeScales = exports.styleConfig = exports.typography = exports.transition = exports.transform = exports.space = exports.scroll = exports.position = exports.list = exports.layout = exports.interactivity = exports.grid = exports.flexbox = exports.filter = exports.effect = exports.color = exports.border = exports.background = exports.animation = exports.pseudoConfig = void 0;
-const animation_1 = __importDefault(require("./animation"));
-const background_1 = __importDefault(require("./background"));
-const color_1 = __importDefault(require("./color"));
-const filter_1 = __importDefault(require("./filter"));
-const flexBox_1 = __importDefault(require("./flexBox"));
-const layout_1 = __importDefault(require("./layout"));
-const interactivity_1 = __importDefault(require("./interactivity"));
-const grid_1 = __importDefault(require("./grid"));
-const position_1 = __importDefault(require("./position"));
-const effect_1 = __importDefault(require("./effect"));
-const space_1 = __importDefault(require("./space"));
-const scroll_1 = __importDefault(require("./scroll"));
-const typography_1 = __importDefault(require("./typography"));
-const transform_1 = __importDefault(require("./transform"));
-const list_1 = __importDefault(require("./list"));
-const transition_1 = __importDefault(require("./transition"));
-const border_1 = __importDefault(require("./border"));
-const pseudo_1 = __importDefault(require("./pseudo"));
-var pseudo_2 = require("./pseudo");
-Object.defineProperty(exports, "pseudoConfig", { enumerable: true, get: function () { return __importDefault(pseudo_2).default; } });
-var animation_2 = require("./animation");
-Object.defineProperty(exports, "animation", { enumerable: true, get: function () { return __importDefault(animation_2).default; } });
-var background_2 = require("./background");
-Object.defineProperty(exports, "background", { enumerable: true, get: function () { return __importDefault(background_2).default; } });
-var border_2 = require("./border");
-Object.defineProperty(exports, "border", { enumerable: true, get: function () { return __importDefault(border_2).default; } });
-var color_2 = require("./color");
-Object.defineProperty(exports, "color", { enumerable: true, get: function () { return __importDefault(color_2).default; } });
-var effect_2 = require("./effect");
-Object.defineProperty(exports, "effect", { enumerable: true, get: function () { return __importDefault(effect_2).default; } });
-var filter_2 = require("./filter");
-Object.defineProperty(exports, "filter", { enumerable: true, get: function () { return __importDefault(filter_2).default; } });
-var flexBox_2 = require("./flexBox");
-Object.defineProperty(exports, "flexbox", { enumerable: true, get: function () { return __importDefault(flexBox_2).default; } });
-var grid_2 = require("./grid");
-Object.defineProperty(exports, "grid", { enumerable: true, get: function () { return __importDefault(grid_2).default; } });
-var interactivity_2 = require("./interactivity");
-Object.defineProperty(exports, "interactivity", { enumerable: true, get: function () { return __importDefault(interactivity_2).default; } });
-var layout_2 = require("./layout");
-Object.defineProperty(exports, "layout", { enumerable: true, get: function () { return __importDefault(layout_2).default; } });
-var list_2 = require("./list");
-Object.defineProperty(exports, "list", { enumerable: true, get: function () { return __importDefault(list_2).default; } });
-var position_2 = require("./position");
-Object.defineProperty(exports, "position", { enumerable: true, get: function () { return __importDefault(position_2).default; } });
-var scroll_2 = require("./scroll");
-Object.defineProperty(exports, "scroll", { enumerable: true, get: function () { return __importDefault(scroll_2).default; } });
-var space_2 = require("./space");
-Object.defineProperty(exports, "space", { enumerable: true, get: function () { return __importDefault(space_2).default; } });
-var transform_2 = require("./transform");
-Object.defineProperty(exports, "transform", { enumerable: true, get: function () { return __importDefault(transform_2).default; } });
-var transition_2 = require("./transition");
-Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return __importDefault(transition_2).default; } });
-var typography_2 = require("./typography");
-Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return __importDefault(typography_2).default; } });
-__exportStar(require("./core"), exports);
-__exportStar(require("./types"), exports);
-exports.styleConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, animation_1.default), background_1.default), border_1.default), color_1.default), flexBox_1.default), layout_1.default), filter_1.default), interactivity_1.default), grid_1.default), position_1.default), effect_1.default), space_1.default), scroll_1.default), typography_1.default), transform_1.default), list_1.default), transition_1.default);
-exports.themeScales = [
-    'sizes',
-    'space',
-    'colors',
-    'fontSizes',
-    'fonts',
-    'fontWeights',
-    'shadows',
-    'borders',
-    'borderWidths',
-    'borderStyles',
-    'radii',
-    'lineHeights',
-    'letterSpacings',
-    'zIndices',
-    'opacity'
-];
-exports.themeScalesWithPxValue = [
-    'sizes',
-    'space',
-    'fontSizes',
-    'borderWidths',
-    'radii'
-];
-exports.stylePropNames = [...Object.keys(exports.styleConfig), ...Object.keys(pseudo_1.default)];
-exports.basePropsName = new Set(['as', 'tx', 'variant', 'sx', '__defaultStyles']);
-exports.styledConfigWithPseudo = Object.assign(Object.assign({}, exports.styleConfig), pseudo_1.default);

lib/config/interactivity.d.ts

-import { InteractivityStyleConfig } from './types';
-declare const interactivityStyleConfig: InteractivityStyleConfig;
-export default interactivityStyleConfig;

lib/config/interactivity.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const styling_1 = require("../styling");
-const core_1 = require("./core");
-const interactivityStyleConfig = {
-    appearance: true,
-    userSelect: true,
-    pointerEvents: true,
-    resize: true,
-    cursor: true,
-    outline: true,
-    outlineOffset: (0, styling_1.toStyleConfig)({ property: 'outlineOffset', transform: styling_1.transforms.px }),
-    outlineColor: core_1.styleConfigBase.colors('outlineColor'),
-    outlineWidth: core_1.styleConfigBase.borderWidths('outlineWidth'),
-    outlineStyle: core_1.styleConfigBase.borderStyles('outlineStyle')
-};
-exports.default = interactivityStyleConfig;

lib/config/layout.d.ts

-import { LayoutStyleConfig } from './types';
-declare const layoutsStyleConfig: LayoutStyleConfig;
-export default layoutsStyleConfig;

lib/config/layout.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const styling_1 = require("../styling");
-const core_1 = require("./core");
-const layoutsStyleConfig = {
-    display: true,
-    width: core_1.styleConfigBase.sizes('width'),
-    w: core_1.styleConfigBase.sizes('width'),
-    maxWidth: core_1.styleConfigBase.sizes('maxWidth'),
-    maxW: core_1.styleConfigBase.sizes('maxWidth'),
-    minWidth: core_1.styleConfigBase.sizes('minWidth'),
-    minW: core_1.styleConfigBase.sizes('minWidth'),
-    height: core_1.styleConfigBase.sizes('height'),
-    h: core_1.styleConfigBase.sizes('height'),
-    minHeight: core_1.styleConfigBase.sizes('minHeight'),
-    minH: core_1.styleConfigBase.sizes('minHeight'),
-    maxHeight: core_1.styleConfigBase.sizes('maxHeight'),
-    maxH: core_1.styleConfigBase.sizes('maxHeight'),
-    boxSize: core_1.styleConfigBase.sizes(['width', 'height']),
-    inlineSize: core_1.styleConfigBase.sizes('inlineSize'),
-    blockSize: core_1.styleConfigBase.sizes('blockSize'),
-    minInlineSize: core_1.styleConfigBase.sizes('minInlineSize'),
-    maxInlineSize: core_1.styleConfigBase.sizes('maxInlineSize'),
-    minBlockSize: core_1.styleConfigBase.sizes('minBlockSize'),
-    maxBlockSize: core_1.styleConfigBase.sizes('maxBlockSize'),
-    overflow: true,
-    overflowX: true,
-    overflowY: true,
-    overscrollBehavior: true,
-    overscroll: (0, styling_1.toStyleConfig)({ property: 'overscrollBehavior' }),
-    overscrollBehaviorX: true,
-    overscrollX: (0, styling_1.toStyleConfig)({ property: 'overscrollBehaviorX' }),
-    overscrollBehaviorY: true,
-    overscrollY: (0, styling_1.toStyleConfig)({ property: 'overscrollBehaviorY' }),
-    verticalAlign: (0, styling_1.toStyleConfig)({ property: 'verticalAlign', transform: styling_1.transforms.px }),
-    float: true,
-    boxSizing: true,
-    boxDecorationBreak: true,
-    objectFit: true,
-    objectPosition: true,
-    visibility: true,
-    isolation: true,
-    writingMode: true,
-    columns: true,
-    breakAfter: true,
-    breakBefore: true,
-    breakInside: true,
-    aspectRatio: true,
-    clear: true
-};
-exports.default = layoutsStyleConfig;

lib/config/list.d.ts

-import { ListsStyleConfig } from './types';
-declare const listsStyleConfig: ListsStyleConfig;
-export default listsStyleConfig;

lib/config/list.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const styling_1 = require("../styling");
-const listsStyleConfig = {
-    listStyle: true,
-    listStyleType: true,
-    listStylePosition: true,
-    listStyleImage: (0, styling_1.toStyleConfig)({
-        transform: styling_1.transforms.gradient,
-        property: 'listStyleImage'
-    })
-};
-exports.default = listsStyleConfig;

lib/config/position.d.ts

-import { PositionsStyleConfig } from './types';
-declare const positionsStyleConfig: PositionsStyleConfig;
-export default positionsStyleConfig;

lib/config/position.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("./core");
-const positionsStyleConfig = {
-    position: true,
-    zIndex: core_1.styleConfigBase.zIndices('zIndex'),
-    inset: core_1.styleConfigBase.space('inset'),
-    top: core_1.styleConfigBase.space('top'),
-    left: core_1.styleConfigBase.space('left'),
-    right: core_1.styleConfigBase.space('right'),
-    bottom: core_1.styleConfigBase.space('bottom'),
-    insetX: core_1.styleConfigBase.space(['left', 'right']),
-    insetY: core_1.styleConfigBase.space(['top', 'bottom']),
-    insetInline: core_1.styleConfigBase.space('insetInline'),
-    insetInlineStart: core_1.styleConfigBase.space('insetInlineStart'),
-    insetInlineEnd: core_1.styleConfigBase.space('insetInlineEnd'),
-    insetBlock: core_1.styleConfigBase.space('insetBlock'),
-    insetBlockStart: core_1.styleConfigBase.space('insetBlockStart'),
-    insetBlockEnd: core_1.styleConfigBase.space('insetBlockEnd')
-};
-exports.default = positionsStyleConfig;

lib/config/pseudo.d.ts

-import { PseudoConfig } from './types';
-declare const pseudoSelectors: PseudoConfig;
-export default pseudoSelectors;

lib/config/pseudo.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const colorMode_1 = require("./colorMode");
-const pseudoSelectors = {
-    _hover: '&:hover, &[data-hover]',
-    _hoverFocus: '&:hover, &[data-hover], &:focus, &[data-focus]',
-    _focusVisited: '&:focus, &[data-focus], &:visited',
-    _active: '&:active, &[data-active]',
-    _focus: '&:focus, &[data-focus]',
-    _highlighted: '&[data-highlighted]',
-    _focusWithin: '&:focus-within',
-    _focusVisible: '&:focus-visible, &[data-focus-visible]',
-    _disabled: '&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]',
-    _readOnly: '&[aria-readonly=true], &[readonly], &[data-readonly]',
-    _before: '&::before',
-    _after: '&::after',
-    _empty: '&:empty',
-    _notEmpty: '&:not(:empty)',
-    _expanded: '&[aria-expanded=true], &[data-expanded]',
-    _checked: '&[aria-checked=true], &[data-checked]',
-    _grabbed: '&[aria-grabbed=true], &[data-grabbed]',
-    _pressed: '&[aria-pressed=true], &[data-pressed]',
-    _invalid: '&[aria-invalid=true], &[data-invalid]',
-    _valid: '&[data-valid], &[data-state=valid]',
-    _loading: '&[data-loading], &[aria-busy=true]',
-    _selected: '&[aria-selected=true], &[data-selected]',
-    _hidden: '&[hidden], &[data-hidden]',
-    _autofill: '&:-webkit-autofill',
-    _even: '&:nth-of-type(even)',
-    _odd: '&:nth-of-type(odd)',
-    _first: '&:first-of-type',
-    _last: '&:last-of-type',
-    _firstChild: '&:first-child',
-    _lastChild: '&:last-child',
-    _notFirst: '&:not(:first-of-type)',
-    _notLast: '&:not(:last-of-type)',
-    _visited: '&:visited',
-    _activeLink: '&[aria-current=page]',
-    _activeStep: '&[aria-current=step]',
-    _indeterminate: '&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]',
-    _placeholder: '&::placeholder',
-    _placeholderShown: '&:placeholder-shown',
-    _fullScreen: '&:fullscreen',
-    _selection: '&::selection',
-    _dark: `.${colorMode_1.DARK_MODE_CLASS_NAME} [data-theme=dark] &:not([data-theme]), &[data-theme=dark]`,
-    _light: `.${colorMode_1.LIGHT_MODE_CLASS_NAME} [data-theme=light] &:not([data-theme]), &[data-theme=light]`
-};
-exports.default = pseudoSelectors;

lib/config/scroll.d.ts

-import { ScrollsStyleConfig } from './types';
-declare const scrollsStyleConfig: ScrollsStyleConfig;
-export default scrollsStyleConfig;

lib/config/scroll.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("./core");
-const scrollsStyleConfig = {
-    scrollBehavior: true,
-    scrollSnapAlign: true,
-    scrollSnapStop: true,
-    scrollSnapType: true,
-    // scroll margin
-    scrollMargin: core_1.styleConfigBase.space('scrollMargin'),
-    scrollMarginTop: core_1.styleConfigBase.space('scrollMarginTop'),
-    scrollMarginBottom: core_1.styleConfigBase.space('scrollMarginBottom'),
-    scrollMarginLeft: core_1.styleConfigBase.space('scrollMarginLeft'),
-    scrollMarginRight: core_1.styleConfigBase.space('scrollMarginRight'),
-    scrollMarginX: core_1.styleConfigBase.space(['scrollMarginLeft', 'scrollMarginRight']),
-    scrollMarginY: core_1.styleConfigBase.space(['scrollMarginTop', 'scrollMarginBottom']),
-    // scroll padding
-    scrollPadding: core_1.styleConfigBase.space('scrollPadding'),
-    scrollPaddingTop: core_1.styleConfigBase.space('scrollPaddingTop'),
-    scrollPaddingBottom: core_1.styleConfigBase.space('scrollPaddingBottom'),
-    scrollPaddingLeft: core_1.styleConfigBase.space('scrollPaddingLeft'),
-    scrollPaddingRight: core_1.styleConfigBase.space('scrollPaddingRight'),
-    scrollPaddingX: core_1.styleConfigBase.space(['scrollPaddingLeft', 'scrollPaddingRight']),
-    scrollPaddingY: core_1.styleConfigBase.space(['scrollPaddingTop', 'scrollPaddingBottom'])
-};
-exports.default = scrollsStyleConfig;

lib/config/shouldForwardProps.d.ts

-declare const _default: RegExp;
-export default _default;

lib/config/shouldForwardProps.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const props = {
-    children: true,
-    dangerouslySetInnerHTML: true,
-    key: true,
-    ref: true,
-    autoFocus: true,
-    defaultValue: true,
-    defaultChecked: true,
-    innerHTML: true,
-    suppressContentEditableWarning: true,
-    suppressHydrationWarning: true,
-    valueLink: true,
-    abbr: true,
-    accept: true,
-    acceptCharset: true,
-    accessKey: true,
-    action: true,
-    allow: true,
-    allowUserMedia: true,
-    allowPaymentRequest: true,
-    allowFullScreen: true,
-    allowTransparency: true,
-    alt: true,
-    async: true,
-    autoComplete: true,
-    autoPlay: true,
-    capture: true,
-    cellPadding: true,
-    cellSpacing: true,
-    challenge: true,
-    charSet: true,
-    checked: true,
-    cite: true,
-    classID: true,
-    className: true,
-    cols: true,
-    colSpan: true,
-    content: true,
-    contentEditable: true,
-    contextMenu: true,
-    controls: true,
-    controlsList: true,
-    coords: true,
-    crossOrigin: true,
-    data: true,
-    dateTime: true,
-    decoding: true,
-    default: true,
-    defer: true,
-    dir: true,
-    disabled: true,
-    disablePictureInPicture: true,
-    download: true,
-    draggable: true,
-    encType: true,
-    enterKeyHint: true,
-    form: true,
-    formAction: true,
-    formEncType: true,
-    formMethod: true,
-    formNoValidate: true,
-    formTarget: true,
-    frameBorder: true,
-    headers: true,
-    height: true,
-    hidden: true,
-    high: true,
-    href: true,
-    hrefLang: true,
-    htmlFor: true,
-    httpEquiv: true,
-    id: true,
-    inputMode: true,
-    integrity: true,
-    is: true,
-    keyParams: true,
-    keyType: true,
-    kind: true,
-    label: true,
-    lang: true,
-    list: true,
-    loop: true,
-    low: true,
-    marginHeight: true,
-    marginWidth: true,
-    max: true,
-    maxLength: true,
-    media: true,
-    mediaGroup: true,
-    method: true,
-    min: true,
-    minLength: true,
-    multiple: true,
-    muted: true,
-    name: true,
-    nonce: true,
-    noValidate: true,
-    open: true,
-    optimum: true,
-    pattern: true,
-    placeholder: true,
-    playsInline: true,
-    poster: true,
-    preload: true,
-    profile: true,
-    radioGroup: true,
-    readOnly: true,
-    referrerPolicy: true,
-    rel: true,
-    required: true,
-    reversed: true,
-    role: true,
-    rows: true,
-    rowSpan: true,
-    sandbox: true,
-    scope: true,
-    scoped: true,
-    scrolling: true,
-    seamless: true,
-    selected: true,
-    shape: true,
-    size: true,
-    sizes: true,
-    slot: true,
-    span: true,
-    spellCheck: true,
-    src: true,
-    srcDoc: true,
-    srcLang: true,
-    srcSet: true,
-    start: true,
-    step: true,
-    style: true,
-    summary: true,
-    tabIndex: true,
-    target: true,
-    title: true,
-    translate: true,
-    type: true,
-    useMap: true,
-    value: true,
-    width: true,
-    wmode: true,
-    wrap: true,
-    about: true,
-    datatype: true,
-    inlist: true,
-    prefix: true,
-    property: true,
-    resource: true,
-    typeof: true,
-    vocab: true,
-    autoCapitalize: true,
-    autoCorrect: true,
-    autoSave: true,
-    color: true,
-    incremental: true,
-    fallback: true,
-    inert: true,
-    itemProp: true,
-    itemScope: true,
-    itemType: true,
-    itemID: true,
-    itemRef: true,
-    on: true,
-    option: true,
-    results: true,
-    security: true,
-    unselectable: true,
-    accentHeight: true,
-    accumulate: true,
-    additive: true,
-    alignmentBaseline: true,
-    allowReorder: true,
-    alphabetic: true,
-    amplitude: true,
-    arabicForm: true,
-    ascent: true,
-    attributeName: true,
-    attributeType: true,
-    autoReverse: true,
-    azimuth: true,
-    baseFrequency: true,
-    baselineShift: true,
-    baseProfile: true,
-    bbox: true,
-    begin: true,
-    bias: true,
-    by: true,
-    calcMode: true,
-    capHeight: true,
-    clip: true,
-    clipPathUnits: true,
-    clipPath: true,
-    clipRule: true,
-    colorInterpolation: true,
-    colorInterpolationFilters: true,
-    colorProfile: true,
-    colorRendering: true,
-    contentScriptType: true,
-    contentStyleType: true,
-    cursor: true,
-    cx: true,
-    cy: true,
-    d: true,
-    decelerate: true,
-    descent: true,
-    diffuseConstant: true,
-    direction: true,
-    display: true,
-    divisor: true,
-    dominantBaseline: true,
-    dur: true,
-    dx: true,
-    dy: true,
-    edgeMode: true,
-    elevation: true,
-    enableBackground: true,
-    end: true,
-    exponent: true,
-    externalResourcesRequired: true,
-    fill: true,
-    fillOpacity: true,
-    fillRule: true,
-    filter: true,
-    filterRes: true,
-    filterUnits: true,
-    floodColor: true,
-    floodOpacity: true,
-    focusable: true,
-    fontFamily: true,
-    fontSize: true,
-    fontSizeAdjust: true,
-    fontStretch: true,
-    fontStyle: true,
-    fontVariant: true,
-    fontWeight: true,
-    format: true,
-    from: true,
-    fr: true,
-    fx: true,
-    fy: true,
-    g1: true,
-    g2: true,
-    glyphName: true,
-    glyphOrientationHorizontal: true,
-    glyphOrientationVertical: true,
-    glyphRef: true,
-    gradientTransform: true,
-    gradientUnits: true,
-    hanging: true,
-    horizAdvX: true,
-    horizOriginX: true,
-    ideographic: true,
-    imageRendering: true,
-    in: true,
-    in2: true,
-    intercept: true,
-    k: true,
-    k1: true,
-    k2: true,
-    k3: true,
-    k4: true,
-    kernelMatrix: true,
-    kernelUnitLength: true,
-    kerning: true,
-    keyPoints: true,
-    keySplines: true,
-    keyTimes: true,
-    lengthAdjust: true,
-    letterSpacing: true,
-    lightingColor: true,
-    limitingConeAngle: true,
-    local: true,
-    markerEnd: true,
-    markerMid: true,
-    markerStart: true,
-    markerHeight: true,
-    markerUnits: true,
-    markerWidth: true,
-    mask: true,
-    maskContentUnits: true,
-    maskUnits: true,
-    mathematical: true,
-    mode: true,
-    numOctaves: true,
-    offset: true,
-    opacity: true,
-    operator: true,
-    order: true,
-    orient: true,
-    orientation: true,
-    origin: true,
-    overflow: true,
-    overlinePosition: true,
-    overlineThickness: true,
-    panose1: true,
-    paintOrder: true,
-    pathLength: true,
-    patternContentUnits: true,
-    patternTransform: true,
-    patternUnits: true,
-    pointerEvents: true,
-    points: true,
-    pointsAtX: true,
-    pointsAtY: true,
-    pointsAtZ: true,
-    preserveAlpha: true,
-    preserveAspectRatio: true,
-    primitiveUnits: true,
-    r: true,
-    radius: true,
-    refX: true,
-    refY: true,
-    renderingIntent: true,
-    repeatCount: true,
-    repeatDur: true,
-    requiredExtensions: true,
-    requiredFeatures: true,
-    restart: true,
-    result: true,
-    rotate: true,
-    rx: true,
-    ry: true,
-    scale: true,
-    seed: true,
-    shapeRendering: true,
-    slope: true,
-    spacing: true,
-    specularConstant: true,
-    specularExponent: true,
-    speed: true,
-    spreadMethod: true,
-    startOffset: true,
-    stdDeviation: true,
-    stemh: true,
-    stemv: true,
-    stitchTiles: true,
-    stopColor: true,
-    stopOpacity: true,
-    strikethroughPosition: true,
-    strikethroughThickness: true,
-    // eslint-disable-next-line id-blacklist
-    string: true,
-    stroke: true,
-    strokeDasharray: true,
-    strokeDashoffset: true,
-    strokeLinecap: true,
-    strokeLinejoin: true,
-    strokeMiterlimit: true,
-    strokeOpacity: true,
-    strokeWidth: true,
-    surfaceScale: true,
-    systemLanguage: true,
-    tableValues: true,
-    targetX: true,
-    targetY: true,
-    textAnchor: true,
-    textDecoration: true,
-    textRendering: true,
-    textLength: true,
-    to: true,
-    transform: true,
-    u1: true,
-    u2: true,
-    underlinePosition: true,
-    underlineThickness: true,
-    unicode: true,
-    unicodeBidi: true,
-    unicodeRange: true,
-    unitsPerEm: true,
-    vAlphabetic: true,
-    vHanging: true,
-    vIdeographic: true,
-    vMathematical: true,
-    values: true,
-    vectorEffect: true,
-    version: true,
-    vertAdvY: true,
-    vertOriginX: true,
-    vertOriginY: true,
-    viewBox: true,
-    viewTarget: true,
-    visibility: true,
-    widths: true,
-    wordSpacing: true,
-    writingMode: true,
-    x: true,
-    xHeight: true,
-    x1: true,
-    x2: true,
-    xChannelSelector: true,
-    xlinkActuate: true,
-    xlinkArcrole: true,
-    xlinkHref: true,
-    xlinkRole: true,
-    xlinkShow: true,
-    xlinkTitle: true,
-    xlinkType: true,
-    xmlBase: true,
-    xmlns: true,
-    xmlnsXlink: true,
-    xmlLang: true,
-    xmlSpace: true,
-    y: true,
-    y1: true,
-    y2: true,
-    yChannelSelector: true,
-    z: true,
-    zoomAndPan: true,
-    for: true,
-    class: true,
-    autofocus: true
-};
-exports.default = new RegExp(`^((${Object.keys(props).join('|')})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$`);

lib/config/space.d.ts

-import { SpacesStyleConfig } from './types';
-declare const spacesStyleConfig: SpacesStyleConfig;
-export default spacesStyleConfig;

lib/config/space.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("./core");
-const spacesStyleConfig = {
-    // margins
-    margin: core_1.styleConfigBase.space('margin'),
-    m: core_1.styleConfigBase.space('margin'),
-    marginTop: core_1.styleConfigBase.space('marginTop'),
-    mt: core_1.styleConfigBase.space('marginTop'),
-    marginRight: core_1.styleConfigBase.space('marginRight'),
-    mr: core_1.styleConfigBase.space('marginRight'),
-    marginBottom: core_1.styleConfigBase.space('marginBottom'),
-    mb: core_1.styleConfigBase.space('marginBottom'),
-    marginLeft: core_1.styleConfigBase.space('marginLeft'),
-    ml: core_1.styleConfigBase.space('marginLeft'),
-    marginX: core_1.styleConfigBase.space(['marginLeft', 'marginRight']),
-    mx: core_1.styleConfigBase.space(['marginLeft', 'marginRight']),
-    marginY: core_1.styleConfigBase.space(['marginTop', 'marginBottom']),
-    my: core_1.styleConfigBase.space(['marginTop', 'marginBottom']),
-    marginBlockStart: core_1.styleConfigBase.space('marginBlockStart'),
-    marginBlockEnd: core_1.styleConfigBase.space('marginBlockEnd'),
-    marginInlineStart: core_1.styleConfigBase.space('marginInlineStart'),
-    ms: core_1.styleConfigBase.space('marginInlineStart'),
-    marginInlineEnd: core_1.styleConfigBase.space('marginInlineEnd'),
-    me: core_1.styleConfigBase.space('marginInlineEnd'),
-    marginInline: core_1.styleConfigBase.space('marginInline'),
-    marginBlock: core_1.styleConfigBase.space('marginBlock'),
-    // padding
-    padding: core_1.styleConfigBase.space('padding'),
-    p: core_1.styleConfigBase.space('padding'),
-    paddingTop: core_1.styleConfigBase.space('paddingTop'),
-    pt: core_1.styleConfigBase.space('paddingTop'),
-    paddingRight: core_1.styleConfigBase.space('paddingRight'),
-    pr: core_1.styleConfigBase.space('paddingRight'),
-    paddingBottom: core_1.styleConfigBase.space('paddingBottom'),
-    pb: core_1.styleConfigBase.space('paddingBottom'),
-    paddingLeft: core_1.styleConfigBase.space('paddingLeft'),
-    pl: core_1.styleConfigBase.space('paddingLeft'),
-    paddingX: core_1.styleConfigBase.space(['paddingLeft', 'paddingRight']),
-    px: core_1.styleConfigBase.space(['paddingLeft', 'paddingRight']),
-    paddingY: core_1.styleConfigBase.space(['paddingTop', 'paddingBottom']),
-    py: core_1.styleConfigBase.space(['paddingTop', 'paddingBottom']),
-    paddingInlineStart: core_1.styleConfigBase.space('paddingInlineStart'),
-    ps: core_1.styleConfigBase.space('paddingInlineStart'),
-    paddingInlineEnd: core_1.styleConfigBase.space('paddingInlineEnd'),
-    pe: core_1.styleConfigBase.space('paddingInlineEnd'),
-    paddingBlockStart: core_1.styleConfigBase.space('paddingBlockStart'),
-    paddingBlockEnd: core_1.styleConfigBase.space('paddingBlockEnd'),
-    paddingInline: core_1.styleConfigBase.space('paddingInline'),
-    paddingBlock: core_1.styleConfigBase.space('paddingBlock')
-};
-exports.default = spacesStyleConfig;

lib/config/transform.d.ts

-import { TransformStyleConfig } from './types';
-declare const transformStyleConfig: TransformStyleConfig;
-export default transformStyleConfig;

lib/config/transform.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const transformStyleConfig = {
-    transform: true,
-    transformOrigin: true,
-    clipPath: true,
-    touchAction: true,
-    backfaceVisibility: true
-};
-exports.default = transformStyleConfig;

lib/config/transition.d.ts

-import { TransitionsStyleConfig } from './types';
-declare const transitionsStyleConfig: TransitionsStyleConfig;
-export default transitionsStyleConfig;

lib/config/transition.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const transitionsStyleConfig = {
-    willChange: true,
-    transition: true,
-    transitionDelay: true,
-    transitionDuration: true,
-    transitionProperty: true,
-    transitionTimingFunction: true
-};
-exports.default = transitionsStyleConfig;

lib/config/types.d.ts

-import * as CSS from 'csstype';
-import { SpaceScaleKey, ColorScaleKey, RadiiScaleKey, BorderScaleKey, BorderStyleScaleKey, ShadowScaleKey, SizeScaleKey, OpacityScaleKey, FontWeightScaleKey, LineHeightScaleKey, FontFamilyScaleKey } from '@asherng/theme/web';
-import { AriaAttributes, PropsWithChildren } from 'react';
-import { CSSObject, LengthStyledSystem, Property, ThemeScale, Token, TransformFn, ResponsiveStyleValue, BaseAsComponent, DOMElements, StyledSystemTheme } from '../types';
-import { ToStyleConfigByPropertyResponse } from '../styling/types';
-export interface StyleConfigValue {
-    property?: Property | Property[];
-    themeScale?: ThemeScale;
-    transform?: TransformFn;
-}
-export interface AnimationProps {
-    animation?: Token<CSS.Property.Animation<LengthStyledSystem>>;
-    animationName?: Token<CSS.Property.AnimationName>;
-    animationDuration?: Token<CSS.Property.AnimationDuration<LengthStyledSystem>>;
-    animationTimingFunction?: Token<CSS.Property.AnimationTimingFunction>;
-    animationDelay?: Token<CSS.Property.AnimationDelay<LengthStyledSystem>>;
-    animationIterationCount?: Token<CSS.Property.AnimationIterationCount>;
-    animationDirection?: Token<CSS.Property.AnimationDirection>;
-    animationFillMode?: Token<CSS.Property.AnimationFillMode>;
-    animationPlayState?: Token<CSS.Property.AnimationPlayState>;
-}
-export type AnimationProperty = keyof AnimationProps;
-export type AnimationsStyleConfig = BaseStyleConfig<AnimationProperty>;
-export interface BackgroundProps {
-    background?: Token<CSS.Property.Background<LengthStyledSystem>, ColorScaleKey>;
-    bg?: Token<CSS.Property.Background<LengthStyledSystem>, ColorScaleKey>;
-    backgroundColor?: Token<CSS.Property.BackgroundColor, ColorScaleKey>;
-    bgColor?: Token<CSS.Property.BackgroundColor, ColorScaleKey>;
-    backgroundImage?: Token<CSS.Property.BackgroundImage>;
-    bgImage?: Token<CSS.Property.BackgroundImage>;
-    backgroundClip?: Token<CSS.Property.BackgroundClip>;
-    bgClip?: Token<CSS.Property.BackgroundClip>;
-    backgroundSize?: Token<CSS.Property.BackgroundSize<LengthStyledSystem>>;
-    bgSize?: Token<CSS.Property.BackgroundSize<LengthStyledSystem>>;
-    backgroundPosition?: Token<CSS.Property.BackgroundPosition<LengthStyledSystem>>;
-    bgPosition?: Token<CSS.Property.BackgroundPosition<LengthStyledSystem>>;
-    backgroundRepeat?: Token<CSS.Property.BackgroundRepeat>;
-    bgRepeat?: Token<CSS.Property.BackgroundRepeat>;
-    backgroundAttachment?: Token<CSS.Property.BackgroundAttachment>;
-    bgAttachment?: Token<CSS.Property.BackgroundAttachment>;
-    backgroundGradient?: Token<CSS.Property.BackgroundImage>;
-    bgGradient?: Token<CSS.Property.BackgroundImage>;
-    backgroundOrigin?: Token<CSS.Property.BackgroundOrigin>;
-    bgOrigin?: Token<CSS.Property.BackgroundOrigin>;
-}
-export type BackgroundProperty = keyof BackgroundProps;
-export type BackgroundsStyleConfig = BaseStyleConfig<BackgroundProperty>;
-export interface BorderProps {
-    border?: Token<CSS.Property.Border<LengthStyledSystem>>;
-    borderWidth?: Token<CSS.Property.BorderWidth | number>;
-    borderStyle?: Token<CSS.Property.BorderStyle>;
-    borderColor?: Token<CSS.Property.BorderColor, ColorScaleKey>;
-    borderRadius?: Token<CSS.Property.BorderRadius<LengthStyledSystem>, RadiiScaleKey>;
-    borderTopLeftRadius?: Token<CSS.Property.BorderRadius<LengthStyledSystem>, RadiiScaleKey>;
-    borderTopRightRadius?: Token<CSS.Property.BorderRadius<LengthStyledSystem>, RadiiScaleKey>;
-    borderBottomLeftRadius?: Token<CSS.Property.BorderRadius<LengthStyledSystem>, RadiiScaleKey>;
-    borderBottomRightRadius?: Token<CSS.Property.BorderRadius<LengthStyledSystem>, RadiiScaleKey>;
-    borderCollapse?: Token<CSS.Property.BorderCollapse>;
-    borderTop?: Token<CSS.Property.BorderTop<LengthStyledSystem>, BorderScaleKey>;
-    borderBlockStart?: Token<CSS.Property.BorderBlockStart | number>;
-    borderTopWidth?: Token<CSS.Property.BorderTopWidth<LengthStyledSystem>, BorderScaleKey>;
-    borderBlockStartWidth?: Token<CSS.Property.BorderBlockStartWidth<LengthStyledSystem>, BorderScaleKey>;
-    borderTopStyle?: Token<CSS.Property.BorderTopStyle, BorderStyleScaleKey>;
-    borderBlockStartStyle?: Token<CSS.Property.BorderBlockStartStyle, BorderStyleScaleKey>;
-    borderTopColor?: Token<CSS.Property.BorderTopColor, ColorScaleKey>;
-    borderBlockStartColor?: Token<CSS.Property.BorderBlockStartColor, ColorScaleKey>;
-    borderRight?: Token<CSS.Property.BorderRight<LengthStyledSystem>, BorderScaleKey>;
-    borderInlineEnd?: Token<CSS.Property.BorderInlineEnd | number>;
-    borderRightWidth?: Token<CSS.Property.BorderRightWidth<LengthStyledSystem>, BorderScaleKey>;
-    borderInlineEndWidth?: Token<CSS.Property.BorderInlineEndWidth<LengthStyledSystem>, BorderScaleKey>;
-    borderRightStyle?: Token<CSS.Property.BorderRightStyle, BorderStyleScaleKey>;
-    borderInlineEndStyle?: Token<CSS.Property.BorderInlineEndWidth<LengthStyledSystem>, BorderStyleScaleKey>;
-    borderRightColor?: Token<CSS.Property.BorderRightColor, ColorScaleKey>;
-    borderInlineEndColor?: Token<CSS.Property.BorderInlineEndColor, ColorScaleKey>;
-    borderBottom?: Token<CSS.Property.BorderBottom<LengthStyledSystem>, BorderScaleKey>;
-    borderBlockEnd?: Token<CSS.Property.BorderBlockEnd<LengthStyledSystem>, BorderScaleKey>;
-    borderBottomWidth?: Token<CSS.Property.BorderWidth<LengthStyledSystem>, BorderScaleKey>;
-    borderBlockEndWidth?: Token<CSS.Property.BorderBlockEndWidth<LengthStyledSystem>, BorderScaleKey>;
-    borderBottomStyle?: Token<CSS.Property.BorderBottomStyle, BorderStyleScaleKey>;
-    borderBlockEndStyle?: Token<CSS.Property.BorderBlockEndStyle, BorderStyleScaleKey>;
-    borderBottomColor?: Token<CSS.Property.BorderBottomColor, ColorScaleKey>;
-    borderBlockEndColor?: Token<CSS.Property.BorderBottomColor, ColorScaleKey>;
-    borderLeft?: Token<CSS.Property.BorderLeft<LengthStyledSystem>, BorderScaleKey>;
-    borderInlineStart?: Token<CSS.Property.BorderInlineStart<LengthStyledSystem>, BorderScaleKey>;
-    borderLeftWidth?: Token<CSS.Property.BorderLeftWidth<LengthStyledSystem>, BorderScaleKey>;
-    borderInlineStartWidth?: Token<CSS.Property.BorderInlineStartWidth<LengthStyledSystem>, BorderScaleKey>;
-    borderLeftStyle?: Token<CSS.Property.BorderLeftStyle, BorderStyleScaleKey>;
-    borderInlineStartStyle?: Token<CSS.Property.BorderInlineStartStyle, BorderStyleScaleKey>;
-    borderLeftColor?: Token<CSS.Property.BorderLeftColor, ColorScaleKey>;
-    borderInlineStartColor?: Token<CSS.Property.BorderInlineStartColor, ColorScaleKey>;
-    borderX?: Token<CSS.Property.Border<LengthStyledSystem>>;
-    borderY?: Token<CSS.Property.Border<LengthStyledSystem>>;
-}
-export type BorderProperty = keyof BorderProps;
-export type BordersStyleConfig = BaseStyleConfig<BorderProperty>;
-export interface ColorProps {
-    color?: Token<CSS.Property.Color, ColorScaleKey>;
-    caretColor?: Token<CSS.Property.CaretColor, ColorScaleKey>;
-    fill?: Token<CSS.Property.Color, ColorScaleKey>;
-    stroke?: Token<CSS.Property.Color, ColorScaleKey>;
-}
-export type ColorProperty = keyof ColorProps;
-export type ColorsStyleConfig = BaseStyleConfig<ColorProperty>;
-export interface EffectProps {
-    boxShadow?: Token<CSS.Property.BoxShadow, ShadowScaleKey>;
-    shadow?: Token<CSS.Property.BoxShadow, ShadowScaleKey>;
-    mixBlendMode?: Token<CSS.Property.MixBlendMode>;
-    blendMode?: Token<CSS.Property.MixBlendMode>;
-    backgroundBlendMode?: Token<CSS.Property.BackgroundBlendMode>;
-    bgBlendMode?: Token<CSS.Property.BackgroundBlendMode>;
-    opacity?: Token<CSS.Property.Opacity, OpacityScaleKey>;
-    maskSize?: Token<CSS.Property.MaskSize<LengthStyledSystem>>;
-    maskRepeat?: Token<CSS.Property.MaskRepeat>;
-    maskPosition?: Token<CSS.Property.MaskPosition<LengthStyledSystem>>;
-    maskImage?: Token<CSS.Property.MaskImage>;
-}
-export type EffectProperty = keyof EffectProps;
-export type EffectsStyleConfig = BaseStyleConfig<EffectProperty>;
-export interface FilterProps {
-    filter?: Token<CSS.Property.Filter | 'auto'>;
-    backdropFilter?: Token<CSS.Property.BackdropFilter | 'auto'>;
-}
-export type FilterProperty = keyof FilterProps;
-export type FiltersStyleConfig = BaseStyleConfig<FilterProperty>;
-export interface FlexboxProps {
-    /**
-     * The CSS `align-items` property.
-     *
-     * It defines the `align-self` value on all direct children as a group.
-     *
-     * - In Flexbox, it controls the alignment of items on the Cross Axis.
-     * - In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/align-items)
-     */
-    alignItems?: Token<CSS.Property.AlignItems>;
-    /**
-     * The CSS `align-content` property.
-     *
-     * It defines the distribution of space between and around
-     * content items along a flexbox cross-axis or a grid's block axis.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/align-content)
-     */
-    alignContent?: Token<CSS.Property.AlignContent>;
-    /**
-     * The CSS `justify-items` property.
-     *
-     * It defines the default `justify-self` for all items of the box,
-     * giving them all a default way of justifying each box
-     * along the appropriate axis.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/justify-items)
-     */
-    justifyItems?: Token<CSS.Property.JustifyItems>;
-    /**
-     * The CSS `justify-content` property.
-     *
-     * It defines how the browser distributes space between and around content items
-     * along the main-axis of a flex container, and the inline axis of a grid container.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/justify-content)
-     */
-    justifyContent?: Token<CSS.Property.JustifyContent>;
-    /**
-     * The CSS `flex-wrap` property.
-     *
-     * It defines whether flex items are forced onto one line or
-     * can wrap onto multiple lines. If wrapping is allowed,
-     * it sets the direction that lines are stacked.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-wrap)
-     */
-    flexWrap?: Token<CSS.Property.FlexWrap>;
-    /**
-     * The CSS `flex-flow` property.
-     *
-     * It is a shorthand property for `flex-direction` and `flex-wrap`.
-     * It specifies the direction of a flex container, as well as its wrapping behavior.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-flow)
-     */
-    flexFlow?: Token<CSS.Property.FlexFlow>;
-    /**
-     * The CSS `flex-basis` property.
-     *
-     * It defines the initial main size of a flex item.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-basis)
-     */
-    flexBasis?: Token<CSS.Property.FlexBasis<LengthStyledSystem>, SizeScaleKey>;
-    /**
-     * The CSS `flex-direction` property.
-     *
-     * It defines how flex items are placed in the flex container
-     * defining the main axis and the direction (normal or reversed).
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-direction)
-     */
-    flexDirection?: Token<CSS.Property.FlexDirection>;
-    /**
-     * The CSS `flex-direction` property.
-     *
-     * It defines how flex items are placed in the flex container
-     * defining the main axis and the direction (normal or reversed).
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-direction)
-     */
-    flex?: Token<CSS.Property.Flex<LengthStyledSystem>>;
-    /**
-     * The CSS `gap` property.
-     *
-     * It defines the gap between items in both flex and
-     * grid contexts.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/gap)
-     */
-    gap?: Token<CSS.Property.Gap<LengthStyledSystem>, SpaceScaleKey>;
-    /**
-     * The CSS `row-gap` property.
-     *
-     * It sets the size of the gap (gutter) between an element's grid rows.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/row-gap)
-     */
-    rowGap?: Token<CSS.Property.RowGap<LengthStyledSystem>, SpaceScaleKey>;
-    /**
-     * The CSS `column-gap` property.
-     *
-     * It sets the size of the gap (gutter) between an element's columns.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/column-gap)
-     */
-    columnGap?: Token<CSS.Property.ColumnGap<LengthStyledSystem>, SpaceScaleKey>;
-    /**
-     * The CSS `justify-self` property.
-     *
-     * It defines the way a box is justified inside its
-     * alignment container along the appropriate axis.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-flow)
-     */
-    justifySelf?: Token<CSS.Property.JustifySelf>;
-    /**
-     * The CSS `align-self` property.
-     *
-     * It works like `align-items`, but applies only to a
-     * single flexbox item, instead of all of them.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/align-self)
-     */
-    alignSelf?: Token<CSS.Property.AlignSelf>;
-    /**
-     * The CSS `order` property.
-     *
-     * It defines the order to lay out an item in a flex or grid container.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/order)
-     */
-    order?: Token<CSS.Property.Order>;
-    /**
-     * The CSS `flex-grow` property.
-     *
-     * It defines how much a flexbox item should grow
-     * if there's space available.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-grow)
-     */
-    flexGrow?: Token<CSS.Property.FlexGrow | (string & number)>;
-    /**
-     * The CSS `flex-shrink` property.
-     *
-     * It defines how much a flexbox item should shrink
-     * if there's not enough space available.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-shrink)
-     */
-    flexShrink?: Token<CSS.Property.FlexShrink | (string & number)>;
-    /**
-     * The CSS `place-items` property.
-     *
-     * It allows you to align items along both the block and
-     * inline directions at once (i.e. the align-items and justify-items properties)
-     * in a relevant layout system such as `Grid` or `Flex`.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/place-items)
-     */
-    placeItems?: Token<CSS.Property.PlaceItems>;
-    /**
-     * The CSS `place-content` property.
-     *
-     * It allows you to align content along both the block and
-     * inline directions at once (i.e. the align-content and justify-content properties)
-     * in a relevant layout system such as Grid or Flexbox.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/place-content)
-     */
-    placeContent?: Token<CSS.Property.PlaceContent>;
-    /**
-     * The CSS `place-self` property.
-     *
-     * It allows you to align an individual item in both the block and
-     * inline directions at once (i.e. the align-self and justify-self properties)
-     * in a relevant layout system such as Grid or Flexbox.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/place-self)
-     */
-    placeSelf?: Token<CSS.Property.PlaceSelf>;
-}
-export type FlexboxProperty = keyof FlexboxProps;
-export type FlexboxsStyleConfig = BaseStyleConfig<FlexboxProperty>;
-export interface GridProps {
-    /**
-     * The CSS `grid-gap` property.
-     *
-     * It defines the gaps (gutters) between rows and columns
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap)
-     */
-    gridGap?: Token<CSS.Property.GridGap<LengthStyledSystem>, SpaceScaleKey>;
-    /**
-     * The CSS `grid-column-gap` property.
-     *
-     * It defines the size of the gap (gutter) between an element's columns.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
-     */
-    gridColumnGap?: Token<CSS.Property.GridColumnGap<LengthStyledSystem>, SpaceScaleKey>;
-    /**
-     * The CSS `grid-row-gap` property.
-     *
-     * It defines the size of the gap (gutter) between an element's grid rows.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
-     */
-    gridRowGap?: Token<CSS.Property.GridRowGap<LengthStyledSystem>, SpaceScaleKey>;
-    /**
-     * The CSS `grid-column` property.
-     *
-     * It specifies a grid item’s start position within the grid column by
-     * contributing a line, a span, or nothing (automatic) to its grid placement
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)
-     */
-    gridColumnStart?: Token<CSS.Property.GridColumnStart>;
-    /**
-     * The CSS `grid-row-start` property
-     *
-     * It specifies a grid item’s start position within the grid row by
-     * contributing a line, a span, or nothing (automatic) to its grid placement,
-     * thereby specifying the `inline-start` edge of its grid area.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)
-     */
-    gridRowStart?: Token<CSS.Property.GridRowStart>;
-    /**
-     * The CSS `grid-row-end` property
-     *
-     * It specifies a grid item’s end position within the grid row by
-     * contributing a line, a span, or nothing (automatic) to its grid placement,
-     * thereby specifying the `inline-end` edge of its grid area.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)
-     */
-    gridRowEnd?: Token<CSS.Property.GridRowEnd>;
-    /**
-     * The CSS `grid-template` property.
-     *
-     * It is a shorthand property for defining grid columns, rows, and areas.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template)
-     */
-    gridTemplate?: Token<CSS.Property.GridTemplate>;
-    /**
-     * The CSS `grid-column` property
-     *
-     * It specifies a grid item’s end position within the grid column by
-     * contributing a line, a span, or nothing (automatic) to its grid placement,
-     * thereby specifying the block-end edge of its grid area.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)
-     */
-    gridColumnEnd?: Token<CSS.Property.GridColumnEnd>;
-    /**
-     * The CSS `grid-column` property.
-     *
-     * It specifies a grid item's size and location within a grid column
-     * by contributing a line, a span, or nothing (automatic) to its grid placement,
-     * thereby specifying the `inline-start` and `inline-end` edge of its grid area.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
-     */
-    gridColumn?: Token<CSS.Property.GridColumn>;
-    /**
-     * The CSS `grid-row` property
-     *
-     * It specifies a grid item’s size and location within the grid row
-     * by contributing a line, a span, or nothing (automatic) to its grid placement,
-     * thereby specifying the `inline-start` and `inline-end` edge of its grid area.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
-     */
-    gridRow?: Token<CSS.Property.GridRow>;
-    /**
-     * The CSS `grid-auto-flow` property
-     *
-     * It controls how the auto-placement algorithm works,
-     * specifying exactly how auto-placed items get flowed into the grid.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)
-     */
-    gridAutoFlow?: Token<CSS.Property.GridAutoFlow>;
-    /**
-     * The CSS `grid-auto-columns` property.
-     *
-     * It specifies the size of an implicitly-created grid column track or pattern of tracks.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)
-     */
-    gridAutoColumns?: Token<CSS.Property.GridAutoColumns>;
-    /**
-     * The CSS `grid-auto-rows` property.
-     *
-     * It specifies the size of an implicitly-created grid row track or pattern of tracks.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
-     */
-    gridAutoRows?: Token<CSS.Property.GridAutoRows>;
-    /**
-     * The CSS `grid-template-columns` property
-     *
-     * It defines the line names and track sizing functions of the grid columns.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
-     */
-    gridTemplateColumns?: Token<CSS.Property.GridTemplateColumns>;
-    /**
-     * The CSS `grid-template-rows` property.
-     *
-     * It defines the line names and track sizing functions of the grid rows.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
-     */
-    gridTemplateRows?: Token<CSS.Property.GridTemplateRows>;
-    /**
-     * The CSS `grid-template-areas` property.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
-     */
-    gridTemplateAreas?: Token<CSS.Property.GridTemplateAreas>;
-    /**
-     * The CSS `grid-areas` property.
-     *
-     * It specifies a grid item’s size and location within a grid by
-     * contributing a line, a span, or nothing (automatic)
-     * to its grid placement, thereby specifying the edges of its grid area.
-     *
-     * @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
-     */
-    gridArea?: Token<CSS.Property.GridArea>;
-}
-export type GridProperty = keyof GridProps;
-export type GridsStyleConfig = BaseStyleConfig<GridProperty>;
-export interface InteractivityProps {
-    appearance?: Token<CSS.Property.Appearance>;
-    userSelect?: Token<CSS.Property.UserSelect>;
-    pointerEvents?: Token<CSS.Property.PointerEvents>;
-    resize?: Token<CSS.Property.Resize>;
-    cursor?: Token<CSS.Property.Cursor>;
-    outline?: Token<CSS.Property.Outline<LengthStyledSystem>>;
-    outlineOffset?: Token<CSS.Property.OutlineOffset<LengthStyledSystem>>;
-    outlineColor?: Token<CSS.Property.OutlineColor, ColorScaleKey>;
-    outlineStyle?: Token<CSS.Property.OutlineStyle, BorderStyleScaleKey>;
-    outlineWidth?: Token<CSS.Property.OutlineWidth<LengthStyledSystem>, BorderScaleKey>;
-}
-export type InteractivityProperty = keyof InteractivityProps;
-export type InteractivityStyleConfig = BaseStyleConfig<InteractivityProperty>;
-export interface LayoutProps {
-    display?: Token<CSS.Property.Display>;
-    width?: Token<CSS.Property.Width<LengthStyledSystem>, SizeScaleKey>;
-    w?: Token<CSS.Property.Width<LengthStyledSystem>, SizeScaleKey>;
-    inlineSize?: Token<CSS.Property.InlineSize<LengthStyledSystem>, SizeScaleKey>;
-    boxSize?: Token<CSS.Property.Width<LengthStyledSystem>, SizeScaleKey>;
-    maxWidth?: Token<CSS.Property.MaxWidth<LengthStyledSystem>, SizeScaleKey>;
-    maxW?: Token<CSS.Property.MaxWidth<LengthStyledSystem>, SizeScaleKey>;
-    maxInlineSize?: Token<CSS.Property.MaxInlineSize<LengthStyledSystem>, SizeScaleKey>;
-    minWidth?: Token<CSS.Property.MinWidth<LengthStyledSystem>, SizeScaleKey>;
-    minW?: Token<CSS.Property.MinWidth<LengthStyledSystem>, SizeScaleKey>;
-    minInlineSize?: Token<CSS.Property.MinInlineSize<LengthStyledSystem>, SizeScaleKey>;
-    height?: Token<CSS.Property.Height<LengthStyledSystem>, SizeScaleKey>;
-    h?: Token<CSS.Property.Height<LengthStyledSystem>, SizeScaleKey>;
-    blockSize?: Token<CSS.Property.BlockSize<LengthStyledSystem>, SizeScaleKey>;
-    maxHeight?: Token<CSS.Property.MaxHeight<LengthStyledSystem>, SizeScaleKey>;
-    maxH?: Token<CSS.Property.MaxHeight<LengthStyledSystem>, SizeScaleKey>;
-    maxBlockSize?: Token<CSS.Property.MaxBlockSize<LengthStyledSystem>, SizeScaleKey>;
-    minHeight?: Token<CSS.Property.MinHeight<LengthStyledSystem>, SizeScaleKey>;
-    minH?: Token<CSS.Property.MinHeight<LengthStyledSystem>, SizeScaleKey>;
-    minBlockSize?: Token<CSS.Property.MinBlockSize<LengthStyledSystem>, SizeScaleKey>;
-    verticalAlign?: Token<CSS.Property.VerticalAlign<LengthStyledSystem>>;
-    overflow?: Token<CSS.Property.Overflow>;
-    overflowX?: Token<CSS.Property.OverflowX>;
-    overflowY?: Token<CSS.Property.OverflowY>;
-    boxSizing?: Token<CSS.Property.BoxSizing>;
-    boxDecorationBreak?: Token<CSS.Property.BoxDecorationBreak>;
-    float?: Token<CSS.Property.Float>;
-    objectFit?: Token<CSS.Property.ObjectFit>;
-    objectPosition?: Token<CSS.Property.ObjectPosition<LengthStyledSystem>>;
-    overscrollBehavior?: Token<CSS.Property.OverscrollBehavior>;
-    overscroll?: Token<CSS.Property.OverscrollBehavior>;
-    overscrollBehaviorX?: Token<CSS.Property.OverscrollBehaviorX>;
-    overscrollX?: Token<CSS.Property.OverscrollBehaviorX>;
-    overscrollBehaviorY?: Token<CSS.Property.OverscrollBehaviorY>;
-    overscrollY?: Token<CSS.Property.OverscrollBehaviorY>;
-    visibility?: Token<CSS.Property.Visibility>;
-    isolation?: Token<CSS.Property.Isolation>;
-    writingMode?: Token<CSS.Property.WritingMode>;
-    aspectRatio?: Token<CSS.Property.AspectRatio>;
-    columns?: Token<CSS.Property.Columns>;
-    clear?: Token<CSS.Property.Clear>;
-    breakAfter?: Token<CSS.Property.BreakAfter>;
-    breakBefore?: Token<CSS.Property.BreakBefore>;
-    breakInside?: Token<CSS.Property.BreakInside>;
-}
-export type LayoutProperty = keyof LayoutProps;
-export type LayoutStyleConfig = BaseStyleConfig<LayoutProperty>;
-export interface ListProps {
-    listStyle?: Token<CSS.Property.ListStyle>;
-    listStyleType?: Token<CSS.Property.ListStyleType>;
-    listStylePosition?: Token<CSS.Property.ListStylePosition>;
-    listStyleImage?: Token<CSS.Property.ListStyleImage>;
-}
-export type ListProperty = keyof ListProps;
-export type ListsStyleConfig = BaseStyleConfig<ListProperty>;
-export interface PositionProps {
-    zIndex?: Token<CSS.Property.ZIndex, 'zIndices'>;
-    top?: Token<CSS.Property.Top<LengthStyledSystem>, SpaceScaleKey>;
-    insetBlockStart?: Token<CSS.Property.InsetBlockStart<LengthStyledSystem>, SpaceScaleKey>;
-    right?: Token<CSS.Property.Right<LengthStyledSystem>, SpaceScaleKey>;
-    insetInlineEnd?: Token<CSS.Property.InsetInlineEnd<LengthStyledSystem>, SpaceScaleKey>;
-    bottom?: Token<CSS.Property.Bottom<LengthStyledSystem>, SpaceScaleKey>;
-    insetBlockEnd?: Token<CSS.Property.InsetBlockEnd<LengthStyledSystem>, SpaceScaleKey>;
-    left?: Token<CSS.Property.Left<LengthStyledSystem>, SpaceScaleKey>;
-    insetInlineStart?: Token<CSS.Property.InsetInlineStart<LengthStyledSystem>, SpaceScaleKey>;
-    inset?: Token<CSS.Property.Inset<LengthStyledSystem>, SpaceScaleKey>;
-    insetX?: Token<CSS.Property.Left<LengthStyledSystem>, SpaceScaleKey>;
-    insetY?: Token<CSS.Property.Top<LengthStyledSystem>, SpaceScaleKey>;
-    position?: Token<CSS.Property.Position>;
-    insetInline?: Token<CSS.Property.InsetInline<LengthStyledSystem>>;
-    insetBlock?: Token<CSS.Property.InsetBlock<LengthStyledSystem>>;
-}
-export type PositionProperty = keyof PositionProps;
-export type PositionsStyleConfig = BaseStyleConfig<PositionProperty>;
-export interface ScrollProps {
-    scrollBehavior?: Token<CSS.Property.ScrollBehavior>;
-    scrollSnapAlign?: Token<CSS.Property.ScrollSnapAlign>;
-    scrollSnapStop?: Token<CSS.Property.ScrollSnapStop>;
-    scrollSnapType?: Token<CSS.Property.ScrollSnapType>;
-    scrollMargin?: Token<CSS.Property.ScrollMargin<LengthStyledSystem>, SpaceScaleKey>;
-    scrollMarginTop?: Token<CSS.Property.ScrollMarginTop<LengthStyledSystem>, SpaceScaleKey>;
-    scrollMarginBottom?: Token<CSS.Property.ScrollMarginBottom<LengthStyledSystem>, SpaceScaleKey>;
-    scrollMarginLeft?: Token<CSS.Property.ScrollMarginLeft<LengthStyledSystem>, SpaceScaleKey>;
-    scrollMarginRight?: Token<CSS.Property.ScrollMarginRight<LengthStyledSystem>, SpaceScaleKey>;
-    scrollMarginX?: Token<CSS.Property.ScrollMargin<LengthStyledSystem>, SpaceScaleKey>;
-    scrollMarginY?: Token<CSS.Property.ScrollMargin<LengthStyledSystem>, SpaceScaleKey>;
-    scrollPadding?: Token<CSS.Property.ScrollPadding<LengthStyledSystem>, SpaceScaleKey>;
-    scrollPaddingTop?: Token<CSS.Property.ScrollPaddingTop<LengthStyledSystem>, SpaceScaleKey>;
-    scrollPaddingBottom?: Token<CSS.Property.ScrollPaddingBottom<LengthStyledSystem>, SpaceScaleKey>;
-    scrollPaddingLeft?: Token<CSS.Property.ScrollPaddingLeft<LengthStyledSystem>, SpaceScaleKey>;
-    scrollPaddingRight?: Token<CSS.Property.ScrollPaddingRight<LengthStyledSystem>, SpaceScaleKey>;
-    scrollPaddingX?: Token<CSS.Property.ScrollPadding<LengthStyledSystem>, SpaceScaleKey>;
-    scrollPaddingY?: Token<CSS.Property.ScrollPadding<LengthStyledSystem>, SpaceScaleKey>;
-}
-export type ScrollProperty = keyof ScrollProps;
-export type ScrollsStyleConfig = BaseStyleConfig<ScrollProperty>;
-export interface SpaceProps {
-    margin?: Token<CSS.Property.Margin<LengthStyledSystem>, SpaceScaleKey>;
-    m?: Token<CSS.Property.Margin<LengthStyledSystem>, SpaceScaleKey>;
-    marginTop?: Token<CSS.Property.MarginTop<LengthStyledSystem>, SpaceScaleKey>;
-    mt?: Token<CSS.Property.Margin<LengthStyledSystem>, SpaceScaleKey>;
-    marginRight?: Token<CSS.Property.MarginRight<LengthStyledSystem>, SpaceScaleKey>;
-    mr?: Token<CSS.Property.MarginRight<LengthStyledSystem>, SpaceScaleKey>;
-    marginBottom?: Token<CSS.Property.MarginBottom<LengthStyledSystem>, SpaceScaleKey>;
-    mb?: Token<CSS.Property.MarginBottom<LengthStyledSystem>, SpaceScaleKey>;
-    marginLeft?: Token<CSS.Property.MarginLeft<LengthStyledSystem>, SpaceScaleKey>;
-    ml?: Token<CSS.Property.MarginLeft<LengthStyledSystem>, SpaceScaleKey>;
-    marginX?: Token<CSS.Property.Margin<LengthStyledSystem>, SpaceScaleKey>;
-    mx?: Token<CSS.Property.Margin<LengthStyledSystem>, SpaceScaleKey>;
-    marginY?: Token<CSS.Property.Margin<LengthStyledSystem>, SpaceScaleKey>;
-    my?: Token<CSS.Property.Margin<LengthStyledSystem>, SpaceScaleKey>;
-    marginBlockStart?: Token<CSS.Property.MarginBlockStart<LengthStyledSystem>, SpaceScaleKey>;
-    marginBlockEnd?: Token<CSS.Property.MarginBlockEnd<LengthStyledSystem>, SpaceScaleKey>;
-    marginInlineStart?: Token<CSS.Property.MarginInlineStart<LengthStyledSystem>, SpaceScaleKey>;
-    ms?: Token<CSS.Property.MarginInlineStart<LengthStyledSystem>, SpaceScaleKey>;
-    marginInlineEnd?: Token<CSS.Property.MarginInlineEnd<LengthStyledSystem>, SpaceScaleKey>;
-    me?: Token<CSS.Property.MarginInlineEnd<LengthStyledSystem>, SpaceScaleKey>;
-    marginInline?: Token<CSS.Property.MarginInline<LengthStyledSystem>, SpaceScaleKey>;
-    marginBlock?: Token<CSS.Property.MarginBlock<LengthStyledSystem>, SpaceScaleKey>;
-    padding?: Token<CSS.Property.Padding<LengthStyledSystem>, SpaceScaleKey>;
-    p?: Token<CSS.Property.Padding<LengthStyledSystem>, SpaceScaleKey>;
-    paddingTop?: Token<CSS.Property.PaddingTop<LengthStyledSystem>, SpaceScaleKey>;
-    pt?: Token<CSS.Property.PaddingTop<LengthStyledSystem>, SpaceScaleKey>;
-    paddingRight?: Token<CSS.Property.PaddingRight<LengthStyledSystem>, SpaceScaleKey>;
-    pr?: Token<CSS.Property.PaddingRight<LengthStyledSystem>, SpaceScaleKey>;
-    paddingBottom?: Token<CSS.Property.PaddingBottom<LengthStyledSystem>, SpaceScaleKey>;
-    pb?: Token<CSS.Property.PaddingBottom<LengthStyledSystem>, SpaceScaleKey>;
-    paddingLeft?: Token<CSS.Property.PaddingLeft<LengthStyledSystem>, SpaceScaleKey>;
-    pl?: Token<CSS.Property.PaddingLeft<LengthStyledSystem>, SpaceScaleKey>;
-    paddingX?: Token<CSS.Property.Padding<LengthStyledSystem>, SpaceScaleKey>;
-    px?: Token<CSS.Property.Padding<LengthStyledSystem>, SpaceScaleKey>;
-    paddingY?: Token<CSS.Property.Padding<LengthStyledSystem>, SpaceScaleKey>;
-    py?: Token<CSS.Property.Padding<LengthStyledSystem>, SpaceScaleKey>;
-    paddingInlineStart?: Token<CSS.Property.PaddingInlineStart<LengthStyledSystem>, SpaceScaleKey>;
-    ps?: Token<CSS.Property.PaddingInlineStart<LengthStyledSystem>, SpaceScaleKey>;
-    paddingInlineEnd?: Token<CSS.Property.PaddingInlineEnd<LengthStyledSystem>, SpaceScaleKey>;
-    pe?: Token<CSS.Property.PaddingInlineEnd<LengthStyledSystem>, SpaceScaleKey>;
-    paddingBlockStart?: Token<CSS.Property.PaddingBlockStart<LengthStyledSystem>, SpaceScaleKey>;
-    paddingBlockEnd?: Token<CSS.Property.PaddingBlockEnd<LengthStyledSystem>, SpaceScaleKey>;
-    paddingInline?: Token<CSS.Property.PaddingInline<LengthStyledSystem>, SpaceScaleKey>;
-    paddingBlock?: Token<CSS.Property.PaddingBlock<LengthStyledSystem>, SpaceScaleKey>;
-}
-export type SpaceProperty = keyof SpaceProps;
-export type SpacesStyleConfig = BaseStyleConfig<SpaceProperty>;
-export interface TypographyProps {
-    fontWeight?: Token<CSS.Property.LineHeight | string, FontWeightScaleKey>;
-    lineHeight?: Token<CSS.Property.LineHeight<LengthStyledSystem>, LineHeightScaleKey>;
-    letterSpacing?: Token<CSS.Property.LetterSpacing<LengthStyledSystem>, LengthStyledSystem>;
-    fontSize?: Token<CSS.Property.FontSize<LengthStyledSystem>, FontFamilyScaleKey>;
-    fontFamily?: Token<CSS.Property.FontFamily, FontFamilyScaleKey>;
-    textAlign?: Token<CSS.Property.TextAlign>;
-    fontStyle?: Token<CSS.Property.FontStyle>;
-    wordBreak?: Token<CSS.Property.WordBreak>;
-    wordWrap?: Token<CSS.Property.WordWrap>;
-    wordSpacing?: Token<CSS.Property.WordSpacing<LengthStyledSystem>>;
-    overflowWrap?: Token<CSS.Property.OverflowWrap>;
-    whiteSpace?: Token<CSS.Property.WhiteSpace>;
-    textOverflow?: Token<CSS.Property.TextOverflow>;
-    textTransform?: Token<CSS.Property.TextTransform>;
-    textDecoration?: Token<CSS.Property.TextDecoration | number>;
-    textDecorationColor?: Token<CSS.Property.TextDecorationColor, ColorScaleKey>;
-    textDecorationThickness?: Token<CSS.Property.TextDecorationThickness>;
-    textDecorationStyle?: Token<CSS.Property.TextDecorationStyle>;
-    textDecorationLine?: Token<CSS.Property.TextDecorationLine>;
-    textUnderlineOffset?: Token<CSS.Property.TextUnderlineOffset | number>;
-    textShadow?: Token<CSS.Property.TextShadow, ShadowScaleKey>;
-    textIndent?: Token<CSS.Property.TextIndent<LengthStyledSystem>>;
-    hyphens?: Token<CSS.Property.Hyphens>;
-}
-export type TypographyProperty = keyof TypographyProps;
-export type TypographyStyleConfig = BaseStyleConfig<TypographyProperty>;
-export interface TransformProps {
-    transform?: Token<CSS.Property.Transform | 'auto' | 'auto-gpu'>;
-    transformOrigin?: Token<CSS.Property.TransformOrigin<LengthStyledSystem>, SpaceScaleKey>;
-    clipPath?: Token<CSS.Property.ClipPath>;
-    touchAction?: Token<CSS.Property.TouchAction>;
-    backfaceVisibility?: Token<CSS.Property.BackfaceVisibility>;
-}
-export type TransformProperty = keyof TransformProps;
-export type TransformStyleConfig = BaseStyleConfig<TransformProperty>;
-export interface TransitionProps {
-    transition?: Token<CSS.Property.Transition>;
-    transitionProperty?: Token<CSS.Property.TransitionProperty>;
-    transitionTimingFunction?: Token<CSS.Property.TransitionTimingFunction>;
-    transitionDuration?: Token<CSS.Property.TransitionDuration>;
-    transitionDelay?: Token<CSS.Property.TransitionDelay>;
-    willChange?: Token<CSS.Property.WillChange>;
-}
-export type TransitionProperty = keyof TransitionProps;
-export type TransitionsStyleConfig = BaseStyleConfig<TransitionProperty>;
-export type PseudoProperty = '_hover' | '_hoverFocus' | '_focusVisited' | '_active' | '_focus' | '_highlighted' | '_focusWithin' | '_focusVisible' | '_disabled' | '_readOnly' | '_before' | '_after' | '_empty' | '_notEmpty' | '_expanded' | '_checked' | '_grabbed' | '_pressed' | '_invalid' | '_valid' | '_loading' | '_selected' | '_hidden' | '_autofill' | '_even' | '_odd' | '_first' | '_firstChild' | '_last' | '_lastChild' | '_notFirst' | '_notLast' | '_visited' | '_activeLink' | '_activeStep' | '_indeterminate' | '_placeholder' | '_placeholderShown' | '_fullScreen' | '_selection' | '_dark' | '_light';
-export type PseudoConfig = Record<PseudoProperty, string>;
-export type StylePropName = AnimationProperty | BackgroundProperty | BorderProperty | ColorProperty | EffectProperty | FilterProperty | FlexboxProperty | GridProperty | InteractivityProperty | LayoutProperty | ListProperty | PositionProperty | ScrollProperty | SpaceProperty | TypographyProperty | TransformProperty | TransitionProperty | PseudoProperty;
-export type BaseStyleConfig<K extends StylePropName> = {
-    [key in K]: StyleConfigValue | boolean;
-};
-export interface BaseStyledProps extends AnimationProps, BackgroundProps, BorderProps, ColorProps, EffectProps, FilterProps, FlexboxProps, GridProps, InteractivityProps, LayoutProps, ListProps, PositionProps, ScrollProps, SpaceProps, TypographyProps, TransformProps, TransitionProps {
-}
-export type StyleConfig = Partial<BaseStyleConfig<StylePropName>>;
-export type ExtendedStyledProps = BaseStyledProps & Omit<CSSObject, keyof BaseStyledProps>;
-export type PseudoStyledProps = {
-    [K in PseudoProperty]?: SystemStyleObject;
-};
-export type SystemCssProperties = BaseStyledProps | PseudoStyledProps;
-export type CSSPseudoSelectorProps = {
-    [K in CSS.Pseudos]?: SystemStyleObject;
-};
-export interface CSSSelectorObject {
-    [cssSelector: string]: SystemStyleObject;
-}
-export type SystemStyleObject = SystemCssProperties | CSSPseudoSelectorProps | CSSSelectorObject | ExtendedStyledProps;
-export type StyledObject = SystemStyleObject | Record<string, ExtendedStyledProps | ResponsiveStyleValue<number | string> | Record<string, SystemStyleObject | ResponsiveStyleValue<number | string>>>;
-type StyledPropFn<P = {}> = (props: WithStyledProps<P>) => StyledObject;
-export interface StyledProps extends PropsWithChildren<BaseStyledProps>, PseudoStyledProps, AriaAttributes {
-    as?: BaseAsComponent | DOMElements;
-    v?: string;
-    tx?: keyof StyledSystemTheme['variants'];
-    sx?: StyledObjectOrFn;
-    testID?: string;
-    loading?: boolean | 'lazy' | 'eager';
-    __defaultStyles?: StyledObjectOrFn;
-}
-export type StyledObjectOrFn<P = {}> = StyledObject | StyledPropFn<P>;
-export type WithStyledProps<P = {}> = P & StyledProps;
-export type StyleConfigBase = Record<ThemeScale, ToStyleConfigByPropertyResponse>;
-export {};

lib/config/types.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

lib/config/typography.d.ts

-import { TypographyStyleConfig } from './types';
-declare const typographyStyleConfig: TypographyStyleConfig;
-export default typographyStyleConfig;

lib/config/typography.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const styling_1 = require("./../styling");
-const core_1 = require("./core");
-const typographyStyleConfig = {
-    fontFamily: core_1.styleConfigBase.fonts('fontFamily'),
-    fontSize: core_1.styleConfigBase.fontSizes('fontSize'),
-    fontWeight: core_1.styleConfigBase.fontWeights('fontWeight'),
-    lineHeight: core_1.styleConfigBase.lineHeights('lineHeight'),
-    letterSpacing: core_1.styleConfigBase.letterSpacings('letterSpacing'),
-    hyphens: true,
-    textAlign: true,
-    textIndent: core_1.styleConfigBase.space('textIndent'),
-    fontStyle: true,
-    wordBreak: true,
-    overflowWrap: true,
-    whiteSpace: true,
-    wordWrap: true,
-    wordSpacing: (0, styling_1.toStyleConfig)({ property: 'wordSpacing', transform: styling_1.transforms.px }),
-    textOverflow: true,
-    textTransform: true,
-    textShadow: core_1.styleConfigBase.shadows('textShadow'),
-    textDecoration: true,
-    textDecorationColor: core_1.styleConfigBase.colors('textDecorationColor'),
-    textDecorationThickness: true,
-    textDecorationStyle: true,
-    textDecorationLine: true,
-    textUnderlineOffset: true
-};
-exports.default = typographyStyleConfig;

lib/core/index.d.ts

-import { StyledProps, StylePropName } from '../config';
-import { BaseAsComponent, UIComponent, StyledSystemTheme, CSSObject } from '../types';
-import { CreateStyledSystem, StyledOptions, ExtendTheme } from './types';
-declare const keyframes: (style: {
-    [offset: string]: import("@stitches/core/types/css-util").CSS<{}, {}, import("@stitches/core/types/config").DefaultThemeMap, {}>;
-}) => {
-    (): string;
-    name: string;
-}, getCssText: () => string, globalCss: <Styles extends {
-    [K: string]: any;
-}>(...styles: ({
-    '@import'?: unknown;
-    '@font-face'?: unknown;
-} & { [K in keyof Styles]: K extends "@import" ? string | string[] : K extends "@font-face" ? import("@stitches/core/types/css").AtRule.FontFace | import("@stitches/core/types/css").AtRule.FontFace[] : K extends `@keyframes ${string}` ? {
-    [x: string]: import("@stitches/core/types/css-util").CSS<{}, {}, import("@stitches/core/types/config").DefaultThemeMap, {}>;
-} : K extends `@property ${string}` ? import("@stitches/core/types/css").AtRule.Property : import("@stitches/core/types/css-util").CSS<{}, {}, import("@stitches/core/types/config").DefaultThemeMap, {}>; })[]) => () => string;
-export declare const responsive: <P extends StyledProps = StyledProps>(styles: P) => (theme: StyledSystemTheme) => Record<string, any>;
-export declare const css: <P extends StyledProps = StyledProps>(stylesOrFn: P) => (theme: StyledSystemTheme) => Record<string, any>;
-export declare const isStyledProp: (propName: StylePropName) => boolean;
-export declare const shouldForwardProp: (propName: string) => boolean;
-export declare const getClassName: (props: CSSObject) => string;
-export declare const defaultStyledSystemConfig: {
-    theme: import("packages/theme/types").Theme;
-    prefix: undefined;
-    useColorMode: boolean;
-    darkThemeScales: {
-        colors: import("packages/theme/types").ColorTheme;
-    };
-};
-export declare const createStyledSystem: CreateStyledSystem;
-declare const styled: <T extends BaseAsComponent = "div", P = {}, E = HTMLDivElement>(component: T, options?: StyledOptions<P, E> | undefined) => UIComponent<P, E>, extendTheme: ExtendTheme;
-export { styled, globalCss, keyframes, extendTheme, getCssText };

lib/core/index.js

-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCssText = exports.extendTheme = exports.keyframes = exports.globalCss = exports.styled = exports.createStyledSystem = exports.defaultStyledSystemConfig = exports.getClassName = exports.shouldForwardProp = exports.isStyledProp = exports.css = exports.responsive = void 0;
-const lodash_mergewith_1 = __importDefault(require("lodash.mergewith"));
-const react_1 = require("react");
-const web_1 = __importStar(require("@asherng/theme/web"));
-const isObject_1 = __importDefault(require("@asherng/utils/isObject"));
-const runIfFn_1 = __importDefault(require("@asherng/utils/runIfFn"));
-const pickBy_1 = __importDefault(require("@asherng/utils/pickBy"));
-const isNil_1 = __importDefault(require("@asherng/utils/isNil"));
-const getNestedObjectValue_1 = __importDefault(require("@asherng/utils/getNestedObjectValue"));
-const isEmpty_1 = __importDefault(require("@asherng/utils/isEmpty"));
-const clsx_1 = __importDefault(require("clsx"));
-const core_1 = require("@stitches/core");
-const useStableMemo_1 = __importDefault(require("@asherng/hooks/useStableMemo"));
-const config_1 = require("../config");
-const styling_1 = require("../styling");
-const theme_1 = require("../theme");
-const utils_1 = require("../utils");
-const { css: generateCss, keyframes, getCssText, globalCss } = (0, core_1.createStitches)();
-exports.keyframes = keyframes;
-exports.getCssText = getCssText;
-exports.globalCss = globalCss;
-const responsive = (styles) => (theme) => {
-    if (!theme.breakpointsMap) {
-        return styles;
-    }
-    const { isResponsive, toArrayValue, medias } = theme.breakpointsMap;
-    const res = {};
-    for (const key in styles) {
-        if (Object.prototype.hasOwnProperty.call(styles, key)) {
-            let value = (0, runIfFn_1.default)(styles[key], theme);
-            if (value === null) {
-                continue;
-            }
-            value = ((0, isObject_1.default)(value) && isResponsive(value) ? toArrayValue(value) : value);
-            if (!Array.isArray(value)) {
-                res[key] = value;
-                continue;
-            }
-            const queries = value.slice(0, medias.length).length;
-            for (let index = 0; index < queries; index += 1) {
-                const media = medias === null || medias === void 0 ? void 0 : medias[index];
-                if (!media) {
-                    res[key] = value[index];
-                    continue;
-                }
-                res[media] = res[media] || {};
-                if (value[index] == null) {
-                    continue;
-                }
-                res[media][key] = value[index];
-            }
-        }
-    }
-    return res;
-};
-exports.responsive = responsive;
-const css = (stylesOrFn) => (theme) => {
-    var _a, _b, _c;
-    const _styles = (0, runIfFn_1.default)(stylesOrFn, theme);
-    const styles = (0, exports.responsive)(_styles)(theme);
-    let computedStyles = {};
-    for (let key in styles) {
-        if (Object.prototype.hasOwnProperty.call(styles, key)) {
-            const valueOrFn = styles[key];
-            const value = (0, runIfFn_1.default)(valueOrFn, theme);
-            if (config_1.pseudoConfig[key]) {
-                key = config_1.pseudoConfig[key];
-            }
-            let config = config_1.styleConfig[key];
-            if (config === true) {
-                config = (0, styling_1.toStyleConfig)({ property: key });
-            }
-            if ((0, isObject_1.default)(value)) {
-                computedStyles[key] = (_a = computedStyles[key]) !== null && _a !== void 0 ? _a : {};
-                computedStyles[key] = (0, lodash_mergewith_1.default)({}, computedStyles[key], (0, exports.css)(value)(theme));
-                continue;
-            }
-            const rawValue = (_c = (_b = config === null || config === void 0 ? void 0 : config.transform) === null || _b === void 0 ? void 0 : _b.call(config, {
-                value,
-                theme,
-                styleProps: _styles
-            })) !== null && _c !== void 0 ? _c : value;
-            const configProperty = (0, runIfFn_1.default)(config === null || config === void 0 ? void 0 : config.property, theme);
-            if (configProperty && Array.isArray(configProperty)) {
-                for (const property of configProperty) {
-                    computedStyles[property] = rawValue;
-                }
-                continue;
-            }
-            if (configProperty && !(0, isObject_1.default)(rawValue)) {
-                computedStyles[configProperty] = rawValue;
-                continue;
-            }
-            if ((0, isObject_1.default)(rawValue)) {
-                computedStyles = (0, lodash_mergewith_1.default)({}, computedStyles, rawValue);
-                continue;
-            }
-            computedStyles[key] = rawValue;
-        }
-    }
-    return computedStyles;
-};
-exports.css = css;
-const isStyledProp = (propName) => !!config_1.styledConfigWithPseudo[propName];
-exports.isStyledProp = isStyledProp;
-const shouldForwardProp = (propName) => (0, utils_1.isPropValid)(propName) && !config_1.basePropsName.has(propName) && !(0, exports.isStyledProp)(propName);
-exports.shouldForwardProp = shouldForwardProp;
-const getClassName = (props) => {
-    return (0, isEmpty_1.default)(props) ? '' : generateCss(props)().className;
-};
-exports.getClassName = getClassName;
-exports.defaultStyledSystemConfig = {
-    theme: web_1.default,
-    prefix: undefined,
-    useColorMode: true,
-    darkThemeScales: { colors: web_1.defaultDarkColorTheme }
-};
-const createStyledSystem = ({ useColorMode, darkThemeScales, prefix, theme: defaultTheme } = exports.defaultStyledSystemConfig) => {
-    if (useColorMode && !darkThemeScales) {
-        throw new Error('Please provide dark theme when color mode is enabled');
-    }
-    let theme = (0, theme_1.generateStyledSystemTheme)({
-        prefix,
-        useColorMode,
-        theme: defaultTheme,
-        darkThemeScales
-    });
-    const addVariants = (variants) => {
-        theme.variants = Object.assign(Object.assign({}, theme.variants), variants);
-    };
-    const addGlobalStyles = (globalStyles = web_1.globalStyles) => {
-        const createGlobalStyles = globalCss(Object.assign(Object.assign(Object.assign({}, web_1.normalize), (0, exports.css)(globalStyles)(theme)), theme.cssVars));
-        createGlobalStyles();
-    };
-    const extendTheme = params => {
-        var _a;
-        theme = (0, theme_1.generateStyledSystemTheme)({
-            prefix,
-            useColorMode: (_a = params.useColorMode) !== null && _a !== void 0 ? _a : useColorMode,
-            theme: (0, lodash_mergewith_1.default)({}, defaultTheme, params.theme),
-            darkThemeScales: (0, lodash_mergewith_1.default)({}, darkThemeScales, params.darkThemeScales)
-        });
-        addGlobalStyles(params.globalStyles);
-    };
-    const generateClassNameFromStyle = ({ styledObj, props }) => {
-        if (typeof styledObj !== 'function' && (0, isEmpty_1.default)(styledObj)) {
-            return '';
-        }
-        const cssObj = (0, exports.css)((0, runIfFn_1.default)(styledObj, props))(theme);
-        const className = (0, exports.getClassName)(cssObj);
-        return className;
-    };
-    const generateVariantClassName = ({ v, tx }) => {
-        var _a;
-        if (!tx || !v) {
-            return '';
-        }
-        const stylesByVariant = (0, getNestedObjectValue_1.default)({
-            data: (_a = theme.variants) !== null && _a !== void 0 ? _a : {},
-            path: `${tx}.${v}`
-        });
-        if (!stylesByVariant) {
-            if (process.env.NODE_ENV === 'development') {
-                throw new Error(`Variant "${v}" not found in "${tx}"`);
-            }
-            else {
-                return '';
-            }
-        }
-        const cssObj = (0, exports.css)(stylesByVariant)(theme);
-        const className = (0, exports.getClassName)(cssObj);
-        return className;
-    };
-    const styled = (component, options) => {
-        const { baseStyles, componentName = 'UIComponent', defaultProps, customProps } = options !== null && options !== void 0 ? options : {};
-        const Component = (0, react_1.forwardRef)((props, ref) => {
-            var _a;
-            const finalProps = (0, useStableMemo_1.default)(() => (Object.assign(Object.assign({}, customProps === null || customProps === void 0 ? void 0 : customProps(props)), props)), [props]);
-            const styleProps = (0, useStableMemo_1.default)(() => (0, pickBy_1.default)(finalProps, (val, k) => (0, exports.isStyledProp)(k) && !(0, isNil_1.default)(val)), [finalProps]);
-            const forwardProps = (0, useStableMemo_1.default)(() => (0, pickBy_1.default)(finalProps, (_, k) => (0, exports.shouldForwardProp)(k)), [finalProps]);
-            const baseStyleClassName = (0, useStableMemo_1.default)(() => {
-                return generateClassNameFromStyle({
-                    props: {},
-                    key: 'defaultBaseStyle',
-                    styledObj: baseStyles
-                });
-            }, []);
-            const variantClassName = (0, useStableMemo_1.default)(() => {
-                return generateVariantClassName({
-                    v: finalProps.v,
-                    tx: finalProps.tx
-                });
-            }, [finalProps.v, finalProps.tx]);
-            const defaultStyleClassName = (0, useStableMemo_1.default)(() => {
-                return generateClassNameFromStyle({
-                    props: {},
-                    key: 'defaultStyles',
-                    styledObj: finalProps.__defaultStyles
-                });
-            }, [finalProps.__defaultStyles]);
-            const sxClassName = (0, useStableMemo_1.default)(() => {
-                return generateClassNameFromStyle({
-                    props: {},
-                    key: 'sx',
-                    styledObj: finalProps.sx
-                });
-            }, [finalProps.sx]);
-            const coreStyleClassName = (0, useStableMemo_1.default)(() => {
-                return generateClassNameFromStyle({
-                    props: {},
-                    key: 'coreStyle',
-                    styledObj: styleProps
-                });
-            }, [styleProps]);
-            return (0, react_1.createElement)((_a = props === null || props === void 0 ? void 0 : props.as) !== null && _a !== void 0 ? _a : component, Object.assign({ ref, className: (0, clsx_1.default)(baseStyleClassName, defaultStyleClassName, variantClassName, sxClassName, coreStyleClassName, finalProps.className) }, forwardProps));
-        });
-        Component.displayName = componentName;
-        Component.defaultProps = defaultProps;
-        return Component;
-    };
-    return {
-        styled,
-        addVariants,
-        extendTheme,
-        addGlobalStyles
-    };
-};
-exports.createStyledSystem = createStyledSystem;
-const { styled, extendTheme } = (0, exports.createStyledSystem)();
-exports.styled = styled;
-exports.extendTheme = extendTheme;

lib/core/types.d.ts

-import { ThemeWithScale } from '@asherng/theme/web';
-import { StyledObject, StyledProps } from '../config';
-import { BaseAsComponent, CSSObject, Theme, UIComponent, UIComponentProps } from '../types';
-type PropsFn<P> = (p: P) => P;
-export type StyleFn = (props: StyledProps) => CSSObject;
-export interface StyledOptions<P = {}, E = HTMLDivElement> {
-    shouldForwardProp?(prop: string): boolean;
-    label?: string;
-    baseStyles?: StyledObject;
-    customProps?: PropsFn<UIComponentProps<P, E>>;
-    defaultProps?: UIComponent<P, E>['defaultProps'];
-    componentName?: string;
-}
-export interface StyledCacheMapValue {
-    styledProps: StyledProps;
-    cssObj: Record<string, string>;
-    className: string;
-}
-export type StyledCacheMap = Map<string, StyledCacheMapValue>;
-interface GenerateCSSObjectParams {
-    styledObj: StyledProps;
-    props: StyledProps;
-    key: string;
-}
-export type GenerateCSSObject = (params: GenerateCSSObjectParams) => CSSObject;
-interface GenerateClassNameFromStyleParams {
-    props: StyledProps;
-    styledObj: StyledProps;
-    key: string;
-}
-interface GenerateVariantClassNameParams {
-    v?: string;
-    tx?: string;
-}
-export type GenerateClassNameFromStyle = (params: GenerateClassNameFromStyleParams) => string;
-export type GenerateVariantClassName = (params: GenerateVariantClassNameParams) => string;
-export interface CreateStyledSystemParams {
-    theme: Theme;
-    prefix?: string;
-    useColorMode?: boolean;
-    darkThemeScales?: Partial<ThemeWithScale>;
-}
-export interface CreateStyledSystemResponse {
-    styled: <T extends BaseAsComponent = 'div', P = {}, E = HTMLDivElement>(component: T, options?: StyledOptions<P, E>) => UIComponent<P, E>;
-    extendTheme: ExtendTheme;
-}
-interface ExtendThemeParams {
-    theme?: Partial<Theme>;
-    globalStyles?: CSSObject;
-    prefix?: string;
-    useColorMode?: boolean;
-    darkThemeScales?: Partial<ThemeWithScale>;
-}
-export type ExtendTheme = (params: ExtendThemeParams) => void;
-export type CreateStyledSystem = (params?: CreateStyledSystemParams) => CreateStyledSystemResponse;
-export {};

lib/core/types.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

lib/index.d.ts

-export * from './config';
-export * from './config/colorMode';
-export * from './core';
-export * from './types';
-export * from './theme/types';
-export * from './colorMode';
-export { defaultColorModeOption, generateStyledSystemTheme } from './theme';

lib/index.js

-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateStyledSystemTheme = exports.defaultColorModeOption = void 0;
-__exportStar(require("./config"), exports);
-__exportStar(require("./config/colorMode"), exports);
-__exportStar(require("./core"), exports);
-__exportStar(require("./types"), exports);
-__exportStar(require("./theme/types"), exports);
-__exportStar(require("./colorMode"), exports);
-var theme_1 = require("./theme");
-Object.defineProperty(exports, "defaultColorModeOption", { enumerable: true, get: function () { return theme_1.defaultColorModeOption; } });
-Object.defineProperty(exports, "generateStyledSystemTheme", { enumerable: true, get: function () { return theme_1.generateStyledSystemTheme; } });

lib/styling/index.d.ts

-import { MayBe } from '@asherng/common-types';
-import { StyledSystemTheme, TransformFn } from '../types';
-import { CreateTransform, GetRefValue, ThemeScaleToCSSVar, ToStyleConfig, ToStyleConfigByProperty } from './types';
-export declare const getRefValue: GetRefValue;
-export declare const toStyleConfig: ToStyleConfig;
-export declare const toStyleConfigByProperty: ToStyleConfigByProperty;
-export declare const parseGradient: (value: MayBe<string>, theme: StyledSystemTheme) => MayBe<string>;
-export declare const parseColor: (value: MayBe<string>, theme: StyledSystemTheme) => MayBe<string>;
-export declare const transforms: Record<string, TransformFn>;
-export declare const createTransform: CreateTransform;
-export declare const withoutImportant: (value: string | number) => string | number;
-export declare const isImportant: (value: string) => boolean;
-export declare const themeScaleToCSSVar: ThemeScaleToCSSVar;

lib/styling/index.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.themeScaleToCSSVar = exports.isImportant = exports.withoutImportant = exports.createTransform = exports.transforms = exports.parseColor = exports.parseGradient = exports.toStyleConfigByProperty = exports.toStyleConfig = exports.getRefValue = void 0;
-const utils_1 = require("../utils");
-const globalSet = new Set(['none', '-moz-initial', 'inherit', 'initial', 'revert', 'unset']);
-const globalColor = new Set(['currentColor', 'transparent']);
-const directionMap = {
-    'to-t': 'to top',
-    'to-tr': 'to top right',
-    'to-r': 'to right',
-    'to-br': 'to bottom right',
-    'to-b': 'to bottom',
-    'to-bl': 'to bottom left',
-    'to-l': 'to left',
-    'to-tl': 'to top left'
-};
-const trimSpace = (str) => str.trim();
-const valueSet = new Set(Object.values(directionMap));
-const getRefValue = ({ theme, themeScaleKey, fallback }) => {
-    var _a, _b;
-    return (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cssMap) === null || _a === void 0 ? void 0 : _a[themeScaleKey]) !== null && _b !== void 0 ? _b : fallback;
-};
-exports.getRefValue = getRefValue;
-const toStyleConfig = ({ themeScale, transform, property }) => ({
-    property,
-    themeScale,
-    transform: themeScale
-        ? (0, exports.createTransform)({
-            themeScale,
-            transform
-        })
-        : transform
-});
-exports.toStyleConfig = toStyleConfig;
-const toStyleConfigByProperty = ({ themeScale, transform }) => property => (0, exports.toStyleConfig)({ property, themeScale, transform });
-exports.toStyleConfigByProperty = toStyleConfigByProperty;
-const parseGradient = (value, theme) => {
-    var _a, _b;
-    if (value == null || globalSet.has(value)) {
-        return value;
-    }
-    const regex = /(?<type>^[a-z-A-Z]+)\((?<values>(.*))\)/g;
-    const { type, values } = (_b = (_a = regex.exec(value)) === null || _a === void 0 ? void 0 : _a.groups) !== null && _b !== void 0 ? _b : {};
-    if (!type || !values) {
-        return value;
-    }
-    const _type = type.includes('-gradient') ? type : `${type}-gradient`;
-    const [maybeDirection, ...stops] = values.split(',').map(trimSpace).filter(Boolean);
-    if ((stops === null || stops === void 0 ? void 0 : stops.length) === 0) {
-        return value;
-    }
-    const direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection;
-    stops.unshift(direction);
-    const _values = stops.map(stop => {
-        if (valueSet.has(stop)) {
-            return stop;
-        }
-        const firstStop = stop.indexOf(' ');
-        const [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop];
-        const _stopOrFunc = _stop && (0, utils_1.isCSSFunction)(_stop) ? _stop : _stop && _stop.split(' ');
-        const key = `colors.${_color}`;
-        const color = (0, exports.getRefValue)({ theme, themeScaleKey: key, fallback: _color });
-        return _stopOrFunc
-            ? [color, ...(Array.isArray(_stopOrFunc) ? _stopOrFunc : [_stopOrFunc])].join(' ')
-            : color;
-    });
-    return `${_type}(${_values.join(', ')})`;
-};
-exports.parseGradient = parseGradient;
-const parseHslaValue = (str, theme) => {
-    const regex = /^hsla\(([a-z]+\.[a-z0-9-]+)\/(\d*\.?\d+|[1])/i;
-    const isMatched = regex.test(str);
-    if (!isMatched) {
-        return str;
-    }
-    const formatRegex = /hsla\((.*)\/(.*)\)/;
-    const matches = str.match(formatRegex);
-    if (!matches) {
-        return str;
-    }
-    const [colorValue, opacityValue] = matches.slice(1);
-    if (!colorValue || !opacityValue) {
-        return str;
-    }
-    let opacity = Number(opacityValue);
-    const colorKey = `colors.${colorValue}`;
-    const color = (0, exports.getRefValue)({ theme, themeScaleKey: colorKey, fallback: colorValue });
-    if (isNaN(Number(opacityValue))) {
-        const key = `opacity.${opacityValue}`;
-        opacity = (0, exports.getRefValue)({
-            theme,
-            themeScaleKey: key,
-            fallback: opacityValue
-        });
-    }
-    else {
-        opacity = parseFloat(opacityValue);
-    }
-    if (color === colorValue) {
-        return str;
-    }
-    return `hsl(${color} / ${opacity})`;
-};
-const parseColor = (value, theme) => {
-    if (value == null || globalSet.has(value) || globalColor.has(value)) {
-        return value;
-    }
-    if (value.startsWith('var(--color')) {
-        return `hsl(${value})`;
-    }
-    return parseHslaValue(value, theme);
-};
-exports.parseColor = parseColor;
-exports.transforms = {
-    color({ value, theme }) {
-        return (0, exports.parseColor)(String(value), theme);
-    },
-    bgClip({ value }) {
-        return value === 'text'
-            ? { color: 'transparent', backgroundClip: 'text' }
-            : { backgroundClip: value };
-    },
-    px({ value }) {
-        return (0, utils_1.px)(value);
-    },
-    gradient: ({ value, theme }) => (typeof value === 'number' ? value : (0, exports.parseGradient)(value, theme)),
-    bgImage({ value }) {
-        if (value == null) {
-            return value;
-        }
-        const prevent = (0, utils_1.isCSSFunction)(value) || (typeof value === 'string' && globalSet.has(value));
-        return !prevent ? `url(${value})` : value;
-    }
-};
-const createTransform = ({ themeScale, transform }) => {
-    const fn = ({ value, theme, styleProps }) => {
-        var _a;
-        const _value = (0, exports.themeScaleToCSSVar)({ themeScale, value })(theme);
-        return (_a = transform === null || transform === void 0 ? void 0 : transform({ value: _value, theme, styleProps })) !== null && _a !== void 0 ? _a : _value;
-    };
-    return fn;
-};
-exports.createTransform = createTransform;
-const withoutImportant = (value) => typeof value === 'string' ? value.replace(/!(important)?$/, '').trim() : value;
-exports.withoutImportant = withoutImportant;
-const isImportant = (value) => /!(important)?$/.test(value);
-exports.isImportant = isImportant;
-const themeScaleToCSSVar = ({ themeScale, value }) => theme => {
-    const valueStr = String(value);
-    const important = (0, exports.isImportant)(valueStr);
-    const valueWithoutImportant = important ? (0, exports.withoutImportant)(valueStr) : valueStr;
-    const key = themeScale ? `${themeScale}.${valueWithoutImportant}` : `${valueWithoutImportant}`;
-    let transformed = (0, exports.getRefValue)({ theme, themeScaleKey: key, fallback: value });
-    transformed = important ? (0, exports.withoutImportant)(transformed) : transformed;
-    return important ? `${transformed} !important` : transformed;
-};
-exports.themeScaleToCSSVar = themeScaleToCSSVar;

lib/styling/types.d.ts

-import { StyledSystemTheme, ThemeScale, TransformFn, Property } from '../types';
-import { StyleConfigValue } from '../config';
-interface ThemeScaleToCSSVarParams {
-    themeScale: ThemeScale;
-    value: string | number;
-}
-export type ThemeScaleToCSSVar = (params: ThemeScaleToCSSVarParams) => (theme: StyledSystemTheme) => string | number;
-interface CreateTransformParams {
-    themeScale: ThemeScale;
-    transform?: TransformFn;
-}
-export type CreateTransform = (params: CreateTransformParams) => TransformFn;
-export interface ToStyleConfigParams {
-    themeScale?: ThemeScale;
-    transform?: TransformFn;
-    property: Property | Property[];
-}
-export type ToStyleConfig = (params: ToStyleConfigParams) => StyleConfigValue;
-interface ToStyleConfigByPropertyParams extends Pick<ToStyleConfigParams, 'themeScale' | 'transform'> {
-}
-export type ToStyleConfigByPropertyResponse = (property: Property | Property[]) => StyleConfigValue;
-export type ToStyleConfigByProperty = (params: ToStyleConfigByPropertyParams) => ToStyleConfigByPropertyResponse;
-interface GetRefValueParams {
-    theme: StyledSystemTheme;
-    themeScaleKey: string;
-    fallback: string | number;
-}
-export type GetRefValue = (params: GetRefValueParams) => GetRefValueParams['fallback'];
-export {};

lib/styling/types.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

lib/theme/index.d.ts

-import { MayBe } from '@asherng/common-types';
-import { BreakpointsMap, ThemeScale } from '../types';
-import { ColorModeOption } from '../colorMode';
-import { Breakpoints, CreateThemeVar, GenerateStyledSystemTheme } from './types';
-export declare const defaultColorModeOption: ColorModeOption;
-export declare const isThemeScale: (themeScale: ThemeScale) => boolean;
-export declare const simplifyThemeScale: (themeScaleMappedKey: string) => string;
-export declare const createCssVar: (mappedKey: string, prefix?: string) => string;
-export declare const generateCssVar: (themeScaleMappedKey: string, prefix?: string) => {
-    variable: string;
-    reference: string;
-};
-export declare const pxValue: (themeScaleMappedKey: string, value: string | number) => string | number;
-export declare const createThemeVar: CreateThemeVar;
-export declare const sortByEntryBreakpointValue: (a: (string | number)[], b: (string | number)[]) => number;
-export declare const sortBreakpointValue: (a: string | number, b: string | number) => number;
-export declare const sortBreakpoints: (breakpoints: Breakpoints) => Record<string, string | number>;
-export declare const getBreakpointKeys: (breakpoints: Record<string, any>) => Set<string>;
-export declare const normalizeBreakpoints: (breakpoints: Breakpoints) => (string | number)[] & Record<string, string | number>;
-export declare const generateBreakpointsMap: (breakpoints: Breakpoints) => MayBe<BreakpointsMap>;
-export declare const generateStyledSystemTheme: GenerateStyledSystemTheme;

lib/theme/index.js

-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateStyledSystemTheme = exports.generateBreakpointsMap = exports.normalizeBreakpoints = exports.getBreakpointKeys = exports.sortBreakpoints = exports.sortBreakpointValue = exports.sortByEntryBreakpointValue = exports.createThemeVar = exports.pxValue = exports.generateCssVar = exports.createCssVar = exports.simplifyThemeScale = exports.isThemeScale = exports.defaultColorModeOption = void 0;
-const isObject_1 = __importDefault(require("@asherng/utils/isObject"));
-const flattenObject_1 = __importDefault(require("@asherng/utils/flattenObject"));
-const web_1 = require("@asherng/theme/web");
-const isEmpty_1 = __importDefault(require("@asherng/utils/isEmpty"));
-const config_1 = require("../config");
-const utils_1 = require("../utils");
-const colorMode_1 = require("../colorMode");
-const colorMode_2 = require("../config/colorMode");
-exports.defaultColorModeOption = {
-    initialColorMode: colorMode_1.ColorMode.light,
-    colorModeManager: colorMode_1.cookieStorageManager,
-    useSystemColorMode: false
-};
-const themeScaleValueMap = {
-    space: 'space',
-    opacity: false,
-    sizes: 'size',
-    colors: 'color',
-    fontSizes: 'fs',
-    fonts: 'f',
-    fontWeights: 'fw',
-    shadows: 's',
-    borders: 'b',
-    borderWidths: 'bw',
-    borderStyles: false,
-    radii: 'r',
-    lineHeights: 'lh',
-    letterSpacings: 'ls',
-    zIndices: false
-};
-const isThemeScale = (themeScale) => typeof themeScaleValueMap[themeScale] === 'string' ||
-    typeof themeScaleValueMap[themeScale] === 'boolean';
-exports.isThemeScale = isThemeScale;
-const simplifyThemeScale = (themeScaleMappedKey) => {
-    const themeScaleMappedValueArr = themeScaleMappedKey.split('.');
-    if ((0, exports.isThemeScale)(themeScaleMappedValueArr[0])) {
-        themeScaleMappedValueArr[0] = themeScaleValueMap[themeScaleMappedValueArr[0]];
-    }
-    return themeScaleMappedValueArr.filter(Boolean).join('-');
-};
-exports.simplifyThemeScale = simplifyThemeScale;
-const createCssVar = (mappedKey, prefix) => encodeURI(`--${[prefix, mappedKey].filter(Boolean).join('-')}`);
-exports.createCssVar = createCssVar;
-const generateCssVar = (themeScaleMappedKey, prefix) => {
-    const simplifiedName = (0, exports.simplifyThemeScale)(String(themeScaleMappedKey)).replace(/\./g, '-');
-    const variable = (0, exports.createCssVar)(simplifiedName, prefix);
-    return {
-        variable,
-        reference: `var(${variable})`
-    };
-};
-exports.generateCssVar = generateCssVar;
-const pxValue = (themeScaleMappedKey, value) => {
-    const [themeScale] = themeScaleMappedKey.split('.');
-    if ((0, exports.isThemeScale)(themeScale) &&
-        config_1.themeScalesWithPxValue.includes(themeScale)) {
-        return (0, utils_1.px)(value);
-    }
-    return value;
-};
-exports.pxValue = pxValue;
-const createThemeVar = ({ theme, prefix, darkTheme }) => {
-    var _a, _b;
-    const flatThemeScaleObj = (_a = (0, flattenObject_1.default)(theme.scales)) !== null && _a !== void 0 ? _a : {};
-    const flatDarkThemeScaleObj = (_b = (0, flattenObject_1.default)(darkTheme)) !== null && _b !== void 0 ? _b : {};
-    const cssVars = {
-        default: {},
-        dark: {}
-    };
-    const cssMap = {};
-    for (const [themeScaleMappedKey, themeScaleValue] of Object.entries(flatThemeScaleObj)) {
-        const value = (0, exports.pxValue)(themeScaleMappedKey, themeScaleValue);
-        const { variable, reference } = (0, exports.generateCssVar)(themeScaleMappedKey, prefix);
-        cssVars.default[variable] = value;
-        cssMap[themeScaleMappedKey] = reference;
-    }
-    for (const [themeScaleMappedKey, themeScaleValue] of Object.entries(flatDarkThemeScaleObj)) {
-        const value = (0, exports.pxValue)(themeScaleMappedKey, themeScaleValue);
-        const { variable } = (0, exports.generateCssVar)(themeScaleMappedKey, prefix);
-        if (cssVars.dark) {
-            cssVars.dark[variable] = value;
-        }
-    }
-    const cssVarsObj = Object.assign({ ':root, :host, *::before, *::after, [data-theme]': cssVars.default }, (!(0, isEmpty_1.default)(cssVars.dark) && { [colorMode_2.DARK_MODE_SELECTOR]: cssVars.dark }));
-    return {
-        cssVars: cssVarsObj,
-        cssMap
-    };
-};
-exports.createThemeVar = createThemeVar;
-const sortByEntryBreakpointValue = (a, b) => (parseInt(String(a[1]), 10) > parseInt(String(b[1]), 10) ? 1 : -1);
-exports.sortByEntryBreakpointValue = sortByEntryBreakpointValue;
-const sortBreakpointValue = (a, b) => parseInt(String(a), 10) > parseInt(String(b), 10) ? 1 : -1;
-exports.sortBreakpointValue = sortBreakpointValue;
-const sortBreakpoints = (breakpoints) => {
-    if (Array.isArray(breakpoints)) {
-        breakpoints = breakpoints.sort(exports.sortBreakpointValue);
-    }
-    return Object.fromEntries(Object.entries(breakpoints).sort(exports.sortByEntryBreakpointValue));
-};
-exports.sortBreakpoints = sortBreakpoints;
-const getBreakpointKeys = (breakpoints) => new Set(Object.keys((0, exports.sortBreakpoints)(breakpoints)));
-exports.getBreakpointKeys = getBreakpointKeys;
-const normalizeBreakpoints = (breakpoints) => {
-    const sorted = (0, exports.sortBreakpoints)(breakpoints);
-    return Object.assign(Object.values(sorted), sorted);
-};
-exports.normalizeBreakpoints = normalizeBreakpoints;
-const generateBreakpointsMap = (breakpoints) => {
-    var _a;
-    if (!breakpoints) {
-        return null;
-    }
-    if (Array.isArray(breakpoints)) {
-        breakpoints = [0, ...breakpoints];
-    }
-    else {
-        breakpoints.base = (_a = breakpoints.base) !== null && _a !== void 0 ? _a : '0px';
-    }
-    const normalized = (0, exports.normalizeBreakpoints)(breakpoints);
-    const _keys = (0, exports.getBreakpointKeys)(breakpoints);
-    const _keysArr = Array.from(_keys.values());
-    return {
-        medias: [null, ...normalized.map(minW => (0, utils_1.generateMediaQuery)({ min: minW })).slice(1)],
-        isResponsive: (test) => {
-            const valueKeys = Object.keys(test);
-            return valueKeys.length > 0 && valueKeys.every(key => _keys.has(key));
-        },
-        toArrayValue: (test) => {
-            if (!(0, isObject_1.default)(test)) {
-                throw new Error('toArrayValue: value must be an object');
-            }
-            const result = _keysArr.map(bp => { var _a; return (_a = test[bp]) !== null && _a !== void 0 ? _a : null; });
-            while (result[result.length - 1] === null) {
-                result.pop();
-            }
-            return result;
-        }
-    };
-};
-exports.generateBreakpointsMap = generateBreakpointsMap;
-const generateStyledSystemTheme = ({ prefix, theme, useColorMode = true, darkThemeScales }) => {
-    const themeWithHslColors = (0, web_1.convertColorThemeToHsl)(theme);
-    const { cssMap, cssVars } = (0, exports.createThemeVar)({
-        theme: themeWithHslColors,
-        prefix,
-        darkTheme: useColorMode
-            ? (0, web_1.convertColorThemeToHsl)({ scales: darkThemeScales }).scales
-            : undefined
-    });
-    const breakpointsMap = (0, exports.generateBreakpointsMap)(themeWithHslColors.breakpoints);
-    return Object.assign(themeWithHslColors, {
-        cssMap,
-        cssVars,
-        breakpointsMap
-    });
-};
-exports.generateStyledSystemTheme = generateStyledSystemTheme;

lib/theme/types.d.ts

-import { ThemeWithScale } from '@asherng/theme/web';
-import { CSSMap, StyledSystemTheme, Theme, ThemeScale } from '../types';
-import { StyledObject } from '../config';
-import { ColorModeOption } from '../colorMode/types';
-export type ThemeScaleObj = Record<ThemeScale, any>;
-export type Breakpoints = Record<string, string | number> | Array<string | number>;
-export type ThemeScaleValueMap = Record<ThemeScale, string | boolean>;
-interface CreateThemeVarResponse {
-    cssVars: Record<string, any>;
-    cssMap: CSSMap;
-}
-interface CreateThemeVarParams {
-    theme: Theme;
-    prefix?: string;
-    useColorMode?: boolean;
-    colorModeOption?: ColorModeOption;
-    darkTheme?: Partial<ThemeWithScale>;
-}
-export type CreateThemeVar = (params: CreateThemeVarParams) => CreateThemeVarResponse;
-export type VariantConfig<K extends string = string> = Record<K, StyledObject>;
-export interface GenerateStyledSystemThemeParams {
-    theme: Theme;
-    useColorMode?: boolean;
-    prefix?: string;
-    darkThemeScales?: Partial<ThemeWithScale>;
-}
-export type GenerateStyledSystemTheme = (params: GenerateStyledSystemThemeParams) => StyledSystemTheme;
-export {};

lib/theme/types.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

lib/types.d.ts

-import * as CSS from 'csstype';
-import { ComponentType, ElementType, HTMLProps, RefAttributes } from 'react';
-import { Theme as BaseTheme, ScaleKey, ThemeWithScale } from '@asherng/theme/web';
-import { Assign, MayBe, Nullable } from '@asherng/common-types';
-import { StyledProps } from './config/types';
-export type Property = keyof CSS.Properties;
-export type LengthStyledSystem = string | 0 | number;
-export type ThemeScale = keyof ThemeWithScale;
-export type ObjectOrArray<T, K extends keyof any = keyof any> = T[] | Record<K, T | Record<K, T> | T[]>;
-export type ResponsiveStyleValue<T> = T | Array<T | null>;
-export type Theme = Required<BaseTheme>;
-export type Union<T> = T | (string & {});
-export type ThemeValue<K extends keyof T, T = Theme, V = any> = T[K] extends V[] ? number : T[K] extends Record<infer E, V> ? E : T[K] extends ObjectOrArray<infer F> ? F : never;
-export type ResponsiveArray<T> = Array<T | null>;
-export type ResponsiveValue<T> = Nullable<T> | ResponsiveArray<T> | ((theme: StyledSystemTheme) => ResponsiveValue<T>) | {
-    [key in (ThemeValue<'breakpoints', Theme> & string) | number]?: T;
-};
-export type Token<CSSType, ThemeScaleKey = unknown> = ThemeScaleKey extends ScaleKey ? ResponsiveValue<Union<ThemeScaleKey | CSSType>> : ResponsiveValue<CSSType>;
-export type CSSMap = Record<string, string>;
-export interface CSSVars {
-    default: Record<string, string | number>;
-    dark?: Record<string, string | number>;
-}
-export interface BreakpointsMap {
-    medias: MayBe<string>[];
-    isResponsive(value: Record<string, any>): boolean;
-    toArrayValue<T extends Record<string, any>>(value: T): T[keyof T][];
-}
-interface AddVariantsParams {
-    variants: StyledSystemTheme['variants'];
-}
-export type AddVariants = (params: AddVariantsParams) => StyledSystemTheme;
-export interface StyledSystemTheme extends Theme {
-    cssVars: Record<string, any>;
-    cssMap: CSSMap;
-    breakpointsMap: MayBe<BreakpointsMap>;
-}
-export interface TransformFnParams {
-    value: string | number;
-    theme: StyledSystemTheme;
-    styleProps?: StyledProps;
-}
-export type TransformFn = (params: TransformFnParams) => any;
-export type BaseAsComponent<Props = any> = ElementType<Props>;
-export type DOMElements = keyof JSX.IntrinsicElements;
-export type UIComponentProps<P = {}, E = HTMLDivElement> = Assign<HTMLProps<E>, StyledProps> & RefAttributes<E> & P;
-export type UIComponent<P = {}, E = HTMLDivElement> = ComponentType<UIComponentProps<P, E>>;
-export type CSSProperties = CSS.PropertiesFallback<number | string>;
-export type CSSPseudos = {
-    [K in CSS.Pseudos]?: CSSObject;
-};
-export type CSSPropertiesWithMultiValues = {
-    [K in keyof CSSProperties]: CSSProperties[K] | Array<Extract<CSSProperties[K], string>>;
-};
-export type InterpolationPrimitive = null | undefined | boolean | number | string | CSSObject;
-export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {
-}
-export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation;
-export interface CSSOthersObject {
-    [propertiesName: string]: CSSInterpolation;
-}
-export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {
-}
-export {};

lib/types.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

lib/utils/index.d.ts

-import { MayBe } from '@asherng/common-types';
-import { GenerateMediaQuery, Memoize } from './types';
-export declare const isCSSFunction: (value: string | number) => boolean;
-export declare const isUnitlessValue: (value: number | string) => boolean;
-export declare const px: (value: MayBe<string | number>) => MayBe<string | number>;
-export declare const generateMediaQuery: GenerateMediaQuery;
-export declare const memoize: Memoize;
-export declare const isPropValid: (arg: string) => any;

lib/utils/index.js

-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isPropValid = exports.memoize = exports.generateMediaQuery = exports.px = exports.isUnitlessValue = exports.isCSSFunction = void 0;
-const shouldForwardProps_1 = __importDefault(require("../config/shouldForwardProps"));
-const isCSSFunction = (value) => typeof value === 'string' && value.includes('(') && value.includes(')');
-exports.isCSSFunction = isCSSFunction;
-const isUnitlessValue = (value) => !value.toString().replace(String(parseFloat(value.toString())), '');
-exports.isUnitlessValue = isUnitlessValue;
-const px = (value) => {
-    if (value == null) {
-        return value;
-    }
-    const isUnitless = (0, exports.isUnitlessValue)(value);
-    return isUnitless || typeof value === 'number' ? `${value}px` : value;
-};
-exports.px = px;
-const generateMediaQuery = ({ min, max }) => {
-    const query = ['@media screen'];
-    if (min) {
-        query.push('and', `(min-width: ${(0, exports.px)(min)})`);
-    }
-    if (max) {
-        query.push('and', `(max-width: ${(0, exports.px)(max)})`);
-    }
-    return query.join(' ');
-};
-exports.generateMediaQuery = generateMediaQuery;
-const memoize = fn => {
-    const cache = Object.create(null);
-    return (arg) => {
-        if (cache[arg] === undefined) {
-            cache[arg] = fn(arg);
-        }
-        return cache[arg];
-    };
-};
-exports.memoize = memoize;
-exports.isPropValid = (0, exports.memoize)(propName => shouldForwardProps_1.default.test(propName) ||
-    (propName.charCodeAt(0) === 111 &&
-        propName.charCodeAt(1) === 110 &&
-        propName.charCodeAt(2) < 91));

lib/utils/types.d.ts

-interface GenerateMediaQueryParams {
-    min: string;
-    max?: string;
-}
-export type GenerateMediaQuery = (params: GenerateMediaQueryParams) => string;
-export type Memoize = <V>(fn: (p: string) => V) => (arg: string) => V;
-export {};

lib/utils/types.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

New alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

8

-20%

Number of low quality alerts

1

-50%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

2649

-98.35%

Dev dependency count

4

33.33%

Number of package files

3

-96.1%

Lines of code

0

-100%

Number of medium supply chain risk alerts

2

Infinity%

Dependency changes

• + Added

  @asherng/hooks@1.0.15
  (transitive)

• + Added

  @asherng/theme@1.0.15
  (transitive)

• + Added

  @asherng/utils@1.0.15
  (transitive)

• + Added

  @hookform/resolvers@3.3.4
  (transitive)

• + Added

  clsx@2.1.0
  (transitive)

• + Added

  react-hook-form@7.51.1
  (transitive)

• + Added

  zod@3.22.4
  (transitive)

• + Added

  zustand@4.5.2
  (transitive)

• - Removed

  @asherng/common-types@^0.1.3

• - Removed

  @compiled/react@^0.13.1

• - Removed

  @asherng/common-types@0.1.3
  (transitive)

• - Removed

  @asherng/hooks@0.1.10
  (transitive)

• - Removed

  @asherng/theme@0.1.11
  (transitive)

• - Removed

  @asherng/utils@0.1.7
  (transitive)

• - Removed

  @compiled/react@0.13.1
  (transitive)

• - Removed

  @hookform/resolvers@3.1.1
  (transitive)

• - Removed

  clsx@2.0.0
  (transitive)

• - Removed

  csstype@3.2.3
  (transitive)

• - Removed

  property-expr@2.0.6
  (transitive)

• - Removed

  react@19.2.7
  (transitive)

• - Removed

  react-hook-form@7.45.1
  (transitive)

• - Removed

  tiny-case@1.0.3
  (transitive)

• - Removed

  toposort@2.0.2
  (transitive)

• - Removed

  type-fest@2.19.0
  (transitive)

• - Removed

  yup@1.2.0
  (transitive)

• - Removed

  zustand@4.3.9
  (transitive)

• Updated

  @asherng/hooks@^1.0.6

• Updated

  @asherng/theme@^1.0.6

• Updated

  @asherng/utils@^1.0.6

• Updated

  @stitches/core@1.2.8

• Updated

  clsx@2.1.0

• Updated

  zustand@4.5.2