rsuite 6.0.0-canary-20250624 → 6.0.0-canary-20250702

package/cjs/internals/styled-system/css-alias.js

@@ -0,0 +1,391 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.cssSystemPropAlias = void 0;
+var _utils = require("../utils");
+const transformRadiusValue = value => (0, _utils.getSizeValue)('radius', value);
+const transformShadowValue = value => (0, _utils.getSizeValue)('shadow', value);
+
+/**
+ * CSS Property Alias
+ * This type maps all the CSS properties defined in cssSystemPropAlias to their corresponding React CSS types
+ */
+const cssSystemPropAlias = exports.cssSystemPropAlias = {
+  // — Spacing ————————————————————
+  p: {
+    type: 'any',
+    property: 'padding'
+  },
+  pt: {
+    type: 'any',
+    property: 'padding-top'
+  },
+  pr: {
+    type: 'any',
+    property: 'padding-right'
+  },
+  pb: {
+    type: 'any',
+    property: 'padding-bottom'
+  },
+  pl: {
+    type: 'any',
+    property: 'padding-left'
+  },
+  px: {
+    type: 'any',
+    property: 'padding-inline'
+  },
+  py: {
+    type: 'any',
+    property: 'padding-block'
+  },
+  ps: {
+    type: 'any',
+    property: 'padding-inline-start'
+  },
+  pe: {
+    type: 'any',
+    property: 'padding-inline-end'
+  },
+  m: {
+    type: 'any',
+    property: 'margin'
+  },
+  mt: {
+    type: 'any',
+    property: 'margin-top'
+  },
+  mr: {
+    type: 'any',
+    property: 'margin-right'
+  },
+  mb: {
+    type: 'any',
+    property: 'margin-bottom'
+  },
+  ml: {
+    type: 'any',
+    property: 'margin-left'
+  },
+  mx: {
+    type: 'any',
+    property: 'margin-inline'
+  },
+  my: {
+    type: 'any',
+    property: 'margin-block'
+  },
+  ms: {
+    type: 'any',
+    property: 'margin-inline-start'
+  },
+  me: {
+    type: 'any',
+    property: 'margin-inline-end'
+  },
+  // — Sizing ————————————————————
+  w: {
+    type: 'any',
+    property: 'width'
+  },
+  h: {
+    type: 'any',
+    property: 'height'
+  },
+  minw: {
+    type: 'any',
+    property: 'min-width'
+  },
+  maxw: {
+    type: 'any',
+    property: 'max-width'
+  },
+  minh: {
+    type: 'any',
+    property: 'min-height'
+  },
+  maxh: {
+    type: 'any',
+    property: 'max-height'
+  },
+  // — Layout & Position ————————————————————
+  display: {
+    type: 'any',
+    property: 'display'
+  },
+  pos: {
+    type: 'any',
+    property: 'position'
+  },
+  left: {
+    type: 'any',
+    property: 'left'
+  },
+  top: {
+    type: 'any',
+    property: 'top'
+  },
+  right: {
+    type: 'any',
+    property: 'right'
+  },
+  bottom: {
+    type: 'any',
+    property: 'bottom'
+  },
+  inset: {
+    type: 'any',
+    property: 'inset'
+  },
+  insetx: {
+    type: 'any',
+    property: 'inset-inline'
+  },
+  insety: {
+    type: 'any',
+    property: 'inset-block'
+  },
+  bsz: {
+    type: 'string',
+    property: 'box-sizing'
+  },
+  z: {
+    type: 'number',
+    property: 'z-index'
+  },
+  // — Background ————————————————————
+  bg: {
+    type: 'string',
+    property: 'background',
+    transformer: _utils.getColorValue
+  },
+  bgc: {
+    type: 'string',
+    property: 'background-color',
+    transformer: _utils.getColorValue
+  },
+  bgi: {
+    type: 'string',
+    property: 'background-image'
+  },
+  bga: {
+    type: 'string',
+    property: 'background-attachment'
+  },
+  bgp: {
+    type: 'string',
+    property: 'background-position'
+  },
+  bgsz: {
+    type: 'string',
+    property: 'background-size'
+  },
+  bgr: {
+    type: 'string',
+    property: 'background-repeat'
+  },
+  // — Typography ————————————————————
+  c: {
+    type: 'string',
+    property: 'color',
+    transformer: _utils.getColorValue
+  },
+  ff: {
+    type: 'string',
+    property: 'font-family'
+  },
+  fs: {
+    type: 'string',
+    property: 'font-size'
+  },
+  fw: {
+    type: 'string',
+    property: 'font-weight'
+  },
+  ta: {
+    type: 'string',
+    property: 'text-align'
+  },
+  tt: {
+    type: 'string',
+    property: 'text-transform'
+  },
+  td: {
+    type: 'string',
+    property: 'text-decoration'
+  },
+  tds: {
+    type: 'string',
+    property: 'text-decoration-style'
+  },
+  tdc: {
+    type: 'string',
+    property: 'text-decoration-color',
+    transformer: _utils.getColorValue
+  },
+  lts: {
+    type: 'string',
+    property: 'letter-spacing'
+  },
+  lh: {
+    type: 'any',
+    property: 'line-height'
+  },
+  // — Border ————————————————————
+  bd: {
+    type: 'string',
+    property: 'border'
+  },
+  bs: {
+    type: 'string',
+    property: 'border-style'
+  },
+  bc: {
+    type: 'string',
+    property: 'border-color',
+    transformer: _utils.getColorValue
+  },
+  bw: {
+    type: 'any',
+    property: 'border-width'
+  },
+  bdt: {
+    type: 'string',
+    property: 'border-top'
+  },
+  bdb: {
+    type: 'string',
+    property: 'border-bottom'
+  },
+  bdl: {
+    type: 'string',
+    property: 'border-left'
+  },
+  bdr: {
+    type: 'string',
+    property: 'border-right'
+  },
+  bdts: {
+    type: 'string',
+    property: 'border-top-style'
+  },
+  bdbs: {
+    type: 'string',
+    property: 'border-bottom-style'
+  },
+  bdls: {
+    type: 'string',
+    property: 'border-left-style'
+  },
+  bdrs: {
+    type: 'string',
+    property: 'border-right-style'
+  },
+  bdtc: {
+    type: 'string',
+    property: 'border-top-color',
+    transformer: _utils.getColorValue
+  },
+  bdbc: {
+    type: 'string',
+    property: 'border-bottom-color',
+    transformer: _utils.getColorValue
+  },
+  bdlc: {
+    type: 'string',
+    property: 'border-left-color',
+    transformer: _utils.getColorValue
+  },
+  bdrc: {
+    type: 'string',
+    property: 'border-right-color',
+    transformer: _utils.getColorValue
+  },
+  bdtw: {
+    type: 'any',
+    property: 'border-top-width'
+  },
+  bdbw: {
+    type: 'any',
+    property: 'border-bottom-width'
+  },
+  bdlw: {
+    type: 'any',
+    property: 'border-left-width'
+  },
+  bdrw: {
+    type: 'any',
+    property: 'border-right-width'
+  },
+  rounded: {
+    type: 'any',
+    property: 'border-radius',
+    transformer: transformRadiusValue
+  },
+  // — Shadow & Effects ————————————————————
+  shadow: {
+    type: 'any',
+    property: 'box-shadow',
+    transformer: transformShadowValue
+  },
+  opacity: {
+    type: 'any',
+    property: 'opacity'
+  },
+  // — Flex ————————————————————
+  gap: {
+    type: 'any',
+    property: 'gap'
+  },
+  spacing: {
+    type: 'any',
+    property: 'gap'
+  },
+  // alias for gap
+  rowgap: {
+    type: 'any',
+    property: 'row-gap'
+  },
+  colgap: {
+    type: 'any',
+    property: 'column-gap'
+  },
+  align: {
+    type: 'string',
+    property: 'align-items'
+  },
+  justify: {
+    type: 'string',
+    property: 'justify-content'
+  },
+  self: {
+    type: 'string',
+    property: 'align-self'
+  },
+  basis: {
+    type: 'any',
+    property: 'flex-basis'
+  },
+  flex: {
+    type: 'string',
+    property: 'flex'
+  },
+  grow: {
+    type: 'number',
+    property: 'flex-grow'
+  },
+  order: {
+    type: 'number',
+    property: 'order'
+  },
+  shrink: {
+    type: 'number',
+    property: 'flex-shrink'
+  },
+  direction: {
+    type: 'string',
+    property: 'flex-direction'
+  }
+};

package/cjs/internals/styled-system/css-properties.d.ts

@@ -0,0 +1,6 @@
+/**
+ * List of commonly used CSS properties in React components
+ * Focused on layout, spacing, typography, and common UI patterns
+ */
+export declare const supportedCSSProperties: readonly ["display", "position", "top", "right", "bottom", "left", "zIndex", "boxSizing", "width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "overflow", "overflowX", "overflowY", "aspectRatio", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "flex", "flexGrow", "flexShrink", "flexBasis", "flexDirection", "flexWrap", "justifyContent", "alignItems", "alignSelf", "alignContent", "gap", "rowGap", "columnGap", "order", "grid", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "gridArea", "gridColumn", "gridRow", "gridAutoFlow", "gridAutoColumns", "gridAutoRows", "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "lineHeight", "textAlign", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "wordWrap", "textOverflow", "letterSpacing", "background", "backgroundColor", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "border", "borderColor", "borderStyle", "borderWidth", "borderRadius", "borderTop", "borderRight", "borderBottom", "borderLeft", "boxShadow", "opacity", "transform", "transformOrigin", "transition", "transitionProperty", "transitionDuration", "transitionTimingFunction", "transitionDelay", "cursor", "pointerEvents", "userSelect", "visibility", "scrollBehavior", "scrollbarWidth", "scrollbarColor", "overscrollBehavior", "clipPath", "filter", "objectFit", "objectPosition", "resize"];
+export type SupportedCSSProperty = (typeof supportedCSSProperties)[number];

package/cjs/internals/styled-system/css-properties.js

@@ -0,0 +1,30 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.supportedCSSProperties = void 0;
+/**
+ * List of commonly used CSS properties in React components
+ * Focused on layout, spacing, typography, and common UI patterns
+ */
+const supportedCSSProperties = exports.supportedCSSProperties = [
+// Layout & Box Model
+'display', 'position', 'top', 'right', 'bottom', 'left', 'zIndex', 'boxSizing', 'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'overflow', 'overflowX', 'overflowY', 'aspectRatio',
+// Spacing
+'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+// Flexbox
+'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignSelf', 'alignContent', 'gap', 'rowGap', 'columnGap', 'order',
+// Grid
+'grid', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'gridArea', 'gridColumn', 'gridRow', 'gridAutoFlow', 'gridAutoColumns', 'gridAutoRows',
+// Typography
+'color', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'lineHeight', 'textAlign', 'textDecoration', 'textTransform', 'whiteSpace', 'wordBreak', 'wordWrap', 'textOverflow', 'letterSpacing',
+// Background & Borders
+'background', 'backgroundColor', 'backgroundImage', 'backgroundPosition', 'backgroundSize', 'backgroundRepeat', 'border', 'borderColor', 'borderStyle', 'borderWidth', 'borderRadius', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'boxShadow', 'opacity',
+// Transforms & Transitions
+'transform', 'transformOrigin', 'transition', 'transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay',
+// Interactivity
+'cursor', 'pointerEvents', 'userSelect', 'visibility',
+// Scroll
+'scrollBehavior', 'scrollbarWidth', 'scrollbarColor', 'overscrollBehavior',
+// Other
+'clipPath', 'filter', 'objectFit', 'objectPosition', 'resize'];

package/cjs/internals/styled-system/index.d.ts

@@ -1,5 +1,5 @@
 export * from './responsive';
 export * from './useStyled';
 export * from './style-manager';
-export * from './css-property';
+export * from './css-alias';
 export * from './types';

package/cjs/internals/styled-system/index.js

@@ -20,11 +20,11 @@ Object.keys(_styleManager).forEach(function (key) {
   if (key in exports && exports[key] === _styleManager[key]) return;
   exports[key] = _styleManager[key];
 });
-var _cssProperty = require("./css-property");
-Object.keys(_cssProperty).forEach(function (key) {
+var _cssAlias = require("./css-alias");
+Object.keys(_cssAlias).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _cssProperty[key]) return;
-  exports[key] = _cssProperty[key];
+  if (key in exports && exports[key] === _cssAlias[key]) return;
+  exports[key] = _cssAlias[key];
 });
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {

package/cjs/internals/styled-system/responsive.d.ts

@@ -19,10 +19,6 @@ export declare function isResponsiveValue(value: any): value is ResponsiveValue<
  */
 export declare function processResponsiveValue<T, R extends string | number | undefined>(value: T | ResponsiveValue<T> | undefined, processor: (val: T) => R): R | ResponsiveValue<R> | undefined;
 type CSSVarValue = WithResponsive<string | number | undefined>;
-/**
- * Converts layout properties to CSS variables with abbreviated names
- */
-export declare const getCSSVariables2: (props: Record<string, any>, prefix?: string) => Record<string, CSSVarValue>;
 /**
  * Converts layout properties to CSS variables with abbreviated names
  */

package/cjs/internals/styled-system/responsive.js

@@ -3,14 +3,14 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.getCSSVariables2 = exports.getCSSVariables = exports.breakpointValues = void 0;
+exports.getCSSVariables = exports.breakpointValues = void 0;
 exports.isResponsiveValue = isResponsiveValue;
 exports.processResponsiveValue = processResponsiveValue;
 var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _utils = require("../utils");
 var _constants = require("../constants");
-var _cssProperty = require("./css-property");
+var _cssAlias = require("./css-alias");
 /**
  * Breakpoint values in pixels - matching SCSS variables
  * These values are used for responsive design across the application.
@@ -68,46 +68,24 @@ function processResponsiveValue(value, processor) {
 
 // Type for CSS variable values that can be string, number, or responsive values
 
-/**
- * Converts layout properties to CSS variables with abbreviated names
- */
-const getCSSVariables2 = (props, prefix = `--rs-`) => {
-  const cssVars = {};
-  const cssVar = name => `${prefix}${name}`;
-
-  // Process padding, margin, size properties
-  Object.entries(_cssProperty.cssPropertyMap).forEach(([name, prop]) => {
-    const {
-      transformer,
-      property
-    } = prop;
-    const propName = (0, _camelCase.default)(property);
-    if (typeof props[name] === 'undefined' && typeof props[propName] === 'undefined') {
-      return;
-    }
-    const varName = cssVar(name || propName);
-    const value = props[name] || props[propName];
-    if (transformer) {
-      cssVars[varName] = processResponsiveValue(value, val => transformer(val));
-    } else {
-      cssVars[varName] = processResponsiveValue(value, val => (0, _utils.getCssValue)(val));
-    }
-  });
-  return cssVars;
+const transformCSSValue = (value, type) => {
+  if (type === 'number') {
+    return value;
+  }
+  return (0, _utils.getCssValue)(value);
 };
 
 /**
  * Converts layout properties to CSS variables with abbreviated names
  */
-exports.getCSSVariables2 = getCSSVariables2;
 const getCSSVariables = (props, prefix = `--rs-`) => {
   const cssVars = {};
   const cssVar = name => `${prefix}${(0, _kebabCase.default)(name)}`;
   const getCSSProperty = name => {
     let cssName = name;
-    let cssProp = _cssProperty.cssPropertyMap[name];
+    let cssProp = _cssAlias.cssSystemPropAlias[name];
     if (!cssProp) {
-      Object.entries(_cssProperty.cssPropertyMap).forEach(([key, prop]) => {
+      Object.entries(_cssAlias.cssSystemPropAlias).forEach(([key, prop]) => {
         if ((0, _camelCase.default)(prop.property) === name) {
           cssProp = prop;
           cssName = key;
@@ -124,10 +102,11 @@ const getCSSVariables = (props, prefix = `--rs-`) => {
     const varName = cssVar(cssName);
     if (cssProp) {
       const {
-        transformer
+        transformer,
+        type
       } = cssProp;
       cssVars[varName] = processResponsiveValue(value, val => {
-        return transformer ? transformer(val) : (0, _utils.getCssValue)(val);
+        return transformer ? transformer(val) : transformCSSValue(val, type);
       });
     } else if ((0, _utils.isCSSProperty)(cssName)) {
       // For non-predefined CSS properties, directly process with getCssValue

package/cjs/internals/styled-system/types.d.ts

@@ -1,11 +1,12 @@
 import { CSSProperties as CSS } from 'react';
+import { supportedCSSProperties } from './css-properties';
 import type { WithResponsive, ColorScheme, Size } from '../types';
-type CSSPropertyGroup = 'spacing' | 'sizing' | 'layout' | 'color' | 'border' | 'effect' | 'flex' | 'radius' | 'typography' | 'position' | 'background';
+export type CSSPropertyValueType = 'string' | 'number' | 'any';
 export type CSSProperty = {
     /**
      * CSS Property Type
      */
-    type: CSSPropertyGroup;
+    type: CSSPropertyValueType;
     /**
      * CSS Property
      */
@@ -15,11 +16,16 @@ export type CSSProperty = {
      */
     transformer?: (value: any) => any;
 };
+export type SupportedCSSProperty = (typeof supportedCSSProperties)[number];
+type MakeResponsive<T> = {
+    [K in keyof T]?: T[K] | WithResponsive<T[K]>;
+};
+export type StandardCSSProps = MakeResponsive<Pick<CSS, SupportedCSSProperty>>;
 /**
  * CSS Properties type for Box component
- * This type maps all the CSS properties defined in cssPropertyMap to their corresponding React CSS types
+ * This type maps all the CSS properties defined in cssSystemPropAlias to their corresponding React CSS types
  */
-export interface CSSSystemProps {
+export interface CSSSystemProps extends StandardCSSProps {
     /** Shorthand for CSS property `padding` */
     p?: WithResponsive<CSS['padding']>;
     /** Shorthand for CSS property `paddingTop` */
@@ -87,7 +93,9 @@ export interface CSSSystemProps {
     /** Shorthand for CSS property `insetBlock` */
     insety?: WithResponsive<CSS['insetBlock']>;
     /** Shorthand for CSS property `boxSizing` */
-    boxsizing?: WithResponsive<CSS['boxSizing']>;
+    bsz?: WithResponsive<CSS['boxSizing']>;
+    /** Shorthand for CSS property `zIndex` */
+    z?: WithResponsive<CSS['zIndex']>;
     /** Shorthand for CSS property `background` */
     bg?: WithResponsive<ColorScheme | CSS['background']>;
     /** Shorthand for CSS property `backgroundColor` */
@@ -132,6 +140,38 @@ export interface CSSSystemProps {
     bc?: WithResponsive<ColorScheme | CSS['borderColor']>;
     /** Shorthand for CSS property `borderWidth` */
     bw?: WithResponsive<CSS['borderWidth']>;
+    /** Shorthand for CSS property `borderTop` */
+    bdt?: WithResponsive<CSS['borderTop']>;
+    /** Shorthand for CSS property `borderBottom` */
+    bdb?: WithResponsive<CSS['borderBottom']>;
+    /** Shorthand for CSS property `borderLeft` */
+    bdl?: WithResponsive<CSS['borderLeft']>;
+    /** Shorthand for CSS property `borderRight` */
+    bdr?: WithResponsive<CSS['borderRight']>;
+    /** Shorthand for CSS property `borderTopStyle` */
+    bdts?: WithResponsive<CSS['borderTopStyle']>;
+    /** Shorthand for CSS property `borderBottomStyle` */
+    bdbs?: WithResponsive<CSS['borderBottomStyle']>;
+    /** Shorthand for CSS property `borderLeftStyle` */
+    bdls?: WithResponsive<CSS['borderLeftStyle']>;
+    /** Shorthand for CSS property `borderRightStyle` */
+    bdrs?: WithResponsive<CSS['borderRightStyle']>;
+    /** Shorthand for CSS property `borderTopColor` */
+    bdtc?: WithResponsive<ColorScheme | CSS['borderTopColor']>;
+    /** Shorthand for CSS property `borderBottomColor` */
+    bdbc?: WithResponsive<ColorScheme | CSS['borderBottomColor']>;
+    /** Shorthand for CSS property `borderLeftColor` */
+    bdlc?: WithResponsive<ColorScheme | CSS['borderLeftColor']>;
+    /** Shorthand for CSS property `borderRightColor` */
+    bdrc?: WithResponsive<ColorScheme | CSS['borderRightColor']>;
+    /** Shorthand for CSS property `borderTopWidth` */
+    bdtw?: WithResponsive<CSS['borderTopWidth']>;
+    /** Shorthand for CSS property `borderBottomWidth` */
+    bdbw?: WithResponsive<CSS['borderBottomWidth']>;
+    /** Shorthand for CSS property `borderLeftWidth` */
+    bdlw?: WithResponsive<CSS['borderLeftWidth']>;
+    /** Shorthand for CSS property `borderRightWidth` */
+    bdrw?: WithResponsive<CSS['borderRightWidth']>;
     /** Shorthand for CSS property `borderRadius` */
     rounded?: WithResponsive<Size | CSS['borderRadius'] | 'full'>;
     /** Shorthand for CSS property `boxShadow` */
@@ -150,5 +190,19 @@ export interface CSSSystemProps {
     align?: WithResponsive<CSS['alignItems']>;
     /** Shorthand for CSS property `justifyContent` */
     justify?: WithResponsive<CSS['justifyContent']>;
+    /** Shorthand for CSS property `alignSelf` */
+    self?: WithResponsive<CSS['alignSelf']>;
+    /** Shorthand for CSS property `flexBasis` */
+    basis?: WithResponsive<CSS['flexBasis']>;
+    /** Shorthand for CSS property `flex` */
+    flex?: WithResponsive<CSS['flex']>;
+    /** Shorthand for CSS property `flexGrow` */
+    grow?: WithResponsive<CSS['flexGrow']>;
+    /** Shorthand for CSS property `order` */
+    order?: WithResponsive<CSS['order']>;
+    /** Shorthand for CSS property `flexShrink` */
+    shrink?: WithResponsive<CSS['flexShrink']>;
+    /** Shorthand for CSS property `flexDirection` */
+    direction?: WithResponsive<CSS['flexDirection']>;
 }
 export {};

package/cjs/internals/styled-system/useStyled.js

@@ -11,7 +11,7 @@ var _hooks = require("../hooks");
 var _utils = require("../utils");
 var _CustomContext = require("../Provider/CustomContext");
 var _responsive = require("./responsive");
-var _cssProperty = require("./css-property");
+var _cssAlias = require("./css-alias");
 var _styleManager = require("./style-manager");
 /**
  * Result of the useStyled hook
@@ -90,7 +90,7 @@ function useStyled(options) {
       const propName = varName.startsWith(cssVarPrefix) ? varName.substring(cssVarPrefix.length) : varName;
 
       // Check if the property has a corresponding CSS property mapping
-      const cssProperty = _cssProperty.cssPropertyMap[propName];
+      const cssProperty = _cssAlias.cssSystemPropAlias[propName];
       if (cssProperty) {
         basePropRules += `${cssProperty.property}: var(${varName}); `;
       } else if ((0, _utils.isCSSProperty)(propName)) {
@@ -141,7 +141,7 @@ function useStyled(options) {
             const propName = varName.startsWith(cssVarPrefix) ? varName.substring(cssVarPrefix.length) : varName;
 
             // Check if the property has a corresponding CSS property mapping
-            const cssProperty = _cssProperty.cssPropertyMap[propName];
+            const cssProperty = _cssAlias.cssSystemPropAlias[propName];
             if (cssProperty) {
               breakpointPropRules[bp] += `${cssProperty}: var(${varName}); `;
             } else if ((0, _utils.isCSSProperty)(propName)) {