@pandacss/studio 0.13.1 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -33,19 +33,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.9",
-    "@pandacss/types": "0.13.1",
-    "@pandacss/config": "0.13.1",
-    "@pandacss/shared": "0.13.1",
-    "@pandacss/token-dictionary": "0.13.1",
-    "@pandacss/logger": "0.13.1",
-    "@pandacss/node": "0.13.1"
+    "@pandacss/types": "0.15.0",
+    "@pandacss/config": "0.15.0",
+    "@pandacss/shared": "0.15.0",
+    "@pandacss/token-dictionary": "0.15.0",
+    "@pandacss/logger": "0.15.0",
+    "@pandacss/node": "0.15.0"
   },
   "devDependencies": {
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react": "4.0.4",
     "execa": "7.2.0",
-    "@pandacss/dev": "0.13.1"
+    "@pandacss/dev": "0.15.0"
   },
   "scripts": {
     "codegen": "panda",

package/styled-system/chunks/..__core____tests____atomic-rule.test.css

@@ -0,0 +1,216 @@
+@layer utilities {
+  .styles\:text_red\! {
+    color: red !important
+    }
+
+  .styles\:fs_30px\! {
+    font-size: 30px !important
+    }
+
+  .styles\:bg_red\.300 {
+    background: var(--colors-red-300)
+    }
+
+  .styles\:w_20px {
+    width: 20px
+    }
+
+  .styles\:w_70px {
+    width: 70px
+    }
+
+  .styles\:w_50px {
+    width: 50px
+    }
+      @media screen and (min-width: 40em) {
+    [dir=ltr] .styles\:ltr\:sm\:ml_4 {
+        margin-left: var(--spacing-4)
+        }
+            }
+    [dir=rtl] .styles\:rtl\:ml_-4 {
+      margin-left: calc(var(--spacing-4) * -1)
+        }
+    .styles\:light\:text_red.light, .light .styles\:light\:text_red {
+      color: red
+        }
+    .styles\:dark\:text_green.dark, .dark .styles\:dark\:text_green {
+      color: green
+        }
+    .styles\:dark\:opacity_slate400.dark, .dark .styles\:dark\:opacity_slate400 {
+      opacity: slate400
+        }
+      @media screen and (min-width: 40em) {
+    [dir=rtl] .styles\:sm\:rtl\:top_20px {
+        top: 20px
+        }
+            }
+    .styles\:left_20px,.styles\:\[\&_\>_p\]\:left_20px > p {
+      left: 20px
+        }
+      @media screen and (min-width: 48em) {
+    .styles\:\[\&_\>_p\]\:md\:left_40px > p {
+        left: 40px
+        }
+            }
+      .styles\:\[\&_\>_p\]\:light\:bg_red400 > p.light, .light .styles\:\[\&_\>_p\]\:light\:bg_red400 > p {
+        background: red400
+            }
+      .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p.dark, .dark .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p {
+        background: green500
+            }
+      [dir=rtl] .styles\:\[\&_\>_p\]\:rtl\:font_sans > p {
+        font: sans
+            }
+    .styles\:\[\&\:\:placeholder\]\:left_40px::placeholder {
+      left: 40px
+        }
+    .styles\:\[\&\:\:placeholder\]\:bg_red400::placeholder {
+      background: red400
+        }
+      @media screen and (min-width: 40em) {
+    .styles\:\[\&\:\:placeholder\]\:sm\:text_left::placeholder {
+        text-align: left
+        }
+            }
+
+  .styles\:all_unset {
+    all: unset
+    }
+
+  .styles\:bg_red {
+    background-color: red
+    }
+
+  .styles\:border_none {
+    border: var(--borders-none)
+    }
+
+  .styles\:p_\$3_\$3 {
+    padding: $3 $3
+    }
+
+  .styles\:rounded_\$button {
+    border-radius: $button
+    }
+
+  .styles\:fs_\$xsmall {
+    font-size: $xsmall
+    }
+
+  .styles\:cursor_pointer {
+    cursor: pointer
+    }
+    .styles\:\[\&_\+_span\]\:ml_\$2 + span {
+      margin-left: $2
+        }
+    .test .styles\:\[\.test_\&\]\:bg_blue {
+      background-color: blue
+        }
+    .styles\:\[\&_\.my-class\]\:text_red .my-class,.styles\:\[\&_span\]\:text_red span,.styles\:\[\&_kbd\]\:text_red kbd {
+      color: red
+        }
+    .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:focus, .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:hover {
+      box-shadow: none
+        }
+    :focus > .styles\:\[\:focus_\>_\&\]\:text_white {
+      color: var(--colors-white)
+        }
+      @media screen and (min-width: 40em) {
+    .styles\:sm\:hover\:top_50px:is(:hover, [data-hover]) {
+        top: 50px
+        }
+            }
+            @media screen and (min-width: 40em) {
+          [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]).dark, .dark [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]) {
+              font: serif
+                    }
+                        }
+    input:hover .styles\:\[input\:hover_\&\]\:bg_red400 {
+      background: red400
+        }
+      @media screen and (min-width: 40em) {
+    input:hover .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
+        font-size: 14px
+        }
+            }
+      @media screen and (min-width: 64em) {
+    input:hover .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
+        font-size: 18px
+        }
+            }
+    .styles\:hover\:bg_pink\.400:is(:hover, [data-hover]) {
+      background: var(--colors-pink-400)
+        }
+        @media screen and (min-width: 40em) {
+      .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]).dark, .dark .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]) {
+          background: var(--colors-red-300)
+            }
+                }
+    .styles\:hover\:text_pink\.400:is(:hover, [data-hover]) {
+      color: var(--colors-pink-400)
+        }
+        @media screen and (min-width: 40em) {
+      .styles\:hover\:disabled\:sm\:bg_red\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+          background: var(--colors-red-300)
+            }
+                }
+      @media base {
+    .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px:hover {
+        left: 40px
+        }
+            }
+      @media base {
+        @media screen and (min-width: 40em) {
+    .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left:hover {
+          text-align: left
+        }
+                }
+            }
+      @media (min-width: 768px) {
+    .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow:hover {
+        background-color: yellow
+        }
+            }
+    @media screen and (min-width: 40em) {
+
+  .styles\:sm\:w_60px {
+      width: 60px
+    }
+        }
+    @media screen and (min-width: 64em) {
+
+  .styles\:lg\:top_120px {
+      top: 120px
+    }
+        }
+    @media screen and (min-width: 48em) {
+
+  .styles\:md\:left_40px {
+      left: 40px
+    }
+        }
+    @media base {
+
+  .styles\:\[\@media_base\]\:left_40px {
+      left: 40px
+    }
+        }
+    @media base {
+      @media screen and (min-width: 40em) {
+
+  .styles\:\[\@media_base\]\:sm\:text_left {
+        text-align: left
+    }
+            }
+        }
+    @media (min-width: 768px) {
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
+      background-color: green
+    }
+
+  .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
+      font-size: $small
+    }
+        }
+}

package/styled-system/css/conditions.mjs

@@ -1,6 +1,6 @@
 import { withoutSpace } from '../helpers.mjs';
 
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base"
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base"
 const conditions = new Set(conditionsStr.split(','))
 
 export function isCondition(value){

package/styled-system/css/css.d.ts

@@ -2,8 +2,8 @@
 import type { SystemStyleObject } from '../types/index';
 
 interface CssFunction {
-  (...styles: SystemStyleObject[]): string
-  raw: (styles: SystemStyleObject) => SystemStyleObject
+  (...styles: Array<SystemStyleObject | undefined | null | false>): string
+  raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
 }
 
 export declare const css: CssFunction;

package/styled-system/css/css.mjs

@@ -39,6 +39,6 @@ const context = {
 
 const cssFn = createCss(context)
 export const css = (...styles) => cssFn(mergeCss(...styles))
-css.raw = (styles) => styles
+css.raw = (...styles) => mergeCss(...styles)
 
 export const { mergeCss, assignCss } = createMergeCss(context)

package/styled-system/css/cva.mjs

@@ -57,7 +57,7 @@ export function getCompoundVariantCss(compoundVariants, variantMap) {
 }
 
 export function assertCompoundVariant(name, compoundVariants, variants, prop) {
-  if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
+  if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {
     throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
   }
 }

package/styled-system/css/sva.mjs

@@ -3,12 +3,17 @@ import { cva } from './cva.mjs';
 
 export function sva(config) {
   const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
-  
+
   function svaFn(props) {
     const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
     return Object.fromEntries(result)
   }
 
+  function raw(props) {
+    const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)])
+    return Object.fromEntries(result)
+  }
+
   const variants = config.variants ?? {};
   const variantKeys = Object.keys(variants);
 
@@ -22,6 +27,7 @@ export function sva(config) {
 
   return Object.assign(svaFn, {
     __cva__: false,
+    raw,
     variantMap,
     variantKeys,
     splitVariantProps,

package/styled-system/helpers.mjs

@@ -210,49 +210,24 @@ var hypenateProperty = memo((property) => {
 });
 
 // src/slot.ts
-var assign = (obj, path, value) => {
-  const last = path.pop();
-  const target = path.reduce((acc, key) => {
-    if (acc[key] == null)
-      acc[key] = {};
-    return acc[key];
-  }, obj);
-  if (last != null)
-    target[last] = value;
-};
 var getSlotRecipes = (recipe) => {
-  const parts = recipe.slots.map((slot) => [
-    slot,
-    // setup base recipe
-    {
-      // create class-base on BEM
-      className: [recipe.className ?? "", slot].join("__"),
-      base: {},
-      variants: {},
-      defaultVariants: recipe.defaultVariants ?? {},
-      compoundVariants: []
-    }
-  ]).map(([slot, cva]) => {
-    const base = recipe.base[slot];
-    if (base)
-      cva.base = base;
-    walkObject(
-      recipe.variants ?? {},
-      (variant, path) => {
-        if (!variant[slot])
-          return;
-        assign(cva, ["variants", ...path], variant[slot]);
-      },
-      {
-        stop: (_value, path) => path.includes(slot)
-      }
-    );
-    if (recipe.compoundVariants) {
-      cva.compoundVariants = getSlotCompoundVariant(recipe.compoundVariants, slot);
-    }
-    return [slot, cva];
+  const init = (slot) => ({
+    className: [recipe.className, slot].filter(Boolean).join("__"),
+    base: recipe.base?.[slot] ?? {},
+    variants: {},
+    defaultVariants: recipe.defaultVariants ?? {},
+    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
   });
-  return Object.fromEntries(parts);
+  const recipeParts = recipe.slots.map((slot) => [slot, init(slot)]);
+  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
+    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
+      recipeParts.forEach(([slot, slotRecipe]) => {
+        slotRecipe.variants[variantsKey] ??= {};
+        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};
+      });
+    }
+  }
+  return Object.fromEntries(recipeParts);
 };
 var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
 

package/styled-system/jsx/index.d.ts

@@ -25,4 +25,4 @@ export * from './bleed';
 export * from './visually-hidden';
 export * from './styled-link';
 
-export type { HTMLPandaProps } from '../types/jsx';
+export type { HTMLPandaProps, PandaComponent } from '../types/jsx';

package/styled-system/jsx/is-valid-prop.mjs

@@ -1,6 +1,6 @@
 import { memo } from '../helpers.mjs';
 // src/index.ts
-var userGeneratedStr = "css,pos,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,insetX,insetY,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFrom,gradientTo,gradientVia,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationDelay,transformOrigin,scale,scaleX,scaleY,translate,translateX,translateY,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginX,scrollMarginY,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingX,scrollPaddingY,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,colorPalette,textStyle,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl"
+var userGeneratedStr = "css,pos,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,insetX,insetY,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFrom,gradientTo,gradientVia,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationDelay,transformOrigin,scale,scaleX,scaleY,translate,translateX,translateY,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginX,scrollMarginY,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingX,scrollPaddingY,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,colorPalette,textStyle,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl"
 var userGenerated = userGeneratedStr.split(",");
 var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockOverflow,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTransitionName,visibility,whiteSpace,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect";
 var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);

package/styled-system/patterns/aspect-ratio.d.ts

@@ -14,7 +14,7 @@ type AspectRatioStyles = AspectRatioProperties & DistributiveOmit<SystemStyleObj
 
 interface AspectRatioPatternFn {
   (styles?: AspectRatioStyles): string
-  raw: (styles: AspectRatioStyles) => SystemStyleObject
+  raw: (styles?: AspectRatioStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/bleed.d.ts

@@ -15,7 +15,7 @@ type BleedStyles = BleedProperties & DistributiveOmit<SystemStyleObject, keyof B
 
 interface BleedPatternFn {
   (styles?: BleedStyles): string
-  raw: (styles: BleedStyles) => SystemStyleObject
+  raw: (styles?: BleedStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/box.d.ts

@@ -14,7 +14,7 @@ type BoxStyles = BoxProperties & DistributiveOmit<SystemStyleObject, keyof BoxPr
 
 interface BoxPatternFn {
   (styles?: BoxStyles): string
-  raw: (styles: BoxStyles) => SystemStyleObject
+  raw: (styles?: BoxStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/center.d.ts

@@ -14,7 +14,7 @@ type CenterStyles = CenterProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface CenterPatternFn {
   (styles?: CenterStyles): string
-  raw: (styles: CenterStyles) => SystemStyleObject
+  raw: (styles?: CenterStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/circle.d.ts

@@ -14,7 +14,7 @@ type CircleStyles = CircleProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface CirclePatternFn {
   (styles?: CircleStyles): string
-  raw: (styles: CircleStyles) => SystemStyleObject
+  raw: (styles?: CircleStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/container.d.ts

@@ -14,7 +14,7 @@ type ContainerStyles = ContainerProperties & DistributiveOmit<SystemStyleObject,
 
 interface ContainerPatternFn {
   (styles?: ContainerStyles): string
-  raw: (styles: ContainerStyles) => SystemStyleObject
+  raw: (styles?: ContainerStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/divider.d.ts

@@ -16,7 +16,7 @@ type DividerStyles = DividerProperties & DistributiveOmit<SystemStyleObject, key
 
 interface DividerPatternFn {
   (styles?: DividerStyles): string
-  raw: (styles: DividerStyles) => SystemStyleObject
+  raw: (styles?: DividerStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/flex.d.ts

@@ -20,7 +20,7 @@ type FlexStyles = FlexProperties & DistributiveOmit<SystemStyleObject, keyof Fle
 
 interface FlexPatternFn {
   (styles?: FlexStyles): string
-  raw: (styles: FlexStyles) => SystemStyleObject
+  raw: (styles?: FlexStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/float.d.ts

@@ -17,7 +17,7 @@ type FloatStyles = FloatProperties & DistributiveOmit<SystemStyleObject, keyof F
 
 interface FloatPatternFn {
   (styles?: FloatStyles): string
-  raw: (styles: FloatStyles) => SystemStyleObject
+  raw: (styles?: FloatStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/grid-item.d.ts

@@ -19,7 +19,7 @@ type GridItemStyles = GridItemProperties & DistributiveOmit<SystemStyleObject, k
 
 interface GridItemPatternFn {
   (styles?: GridItemStyles): string
-  raw: (styles: GridItemStyles) => SystemStyleObject
+  raw: (styles?: GridItemStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/grid.d.ts

@@ -18,7 +18,7 @@ type GridStyles = GridProperties & DistributiveOmit<SystemStyleObject, keyof Gri
 
 interface GridPatternFn {
   (styles?: GridStyles): string
-  raw: (styles: GridStyles) => SystemStyleObject
+  raw: (styles?: GridStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/hstack.d.ts

@@ -15,7 +15,7 @@ type HstackStyles = HstackProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface HstackPatternFn {
   (styles?: HstackStyles): string
-  raw: (styles: HstackStyles) => SystemStyleObject
+  raw: (styles?: HstackStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/link-box.d.ts

@@ -14,7 +14,7 @@ type LinkBoxStyles = LinkBoxProperties & DistributiveOmit<SystemStyleObject, key
 
 interface LinkBoxPatternFn {
   (styles?: LinkBoxStyles): string
-  raw: (styles: LinkBoxStyles) => SystemStyleObject
+  raw: (styles?: LinkBoxStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/link-overlay.d.ts

@@ -14,7 +14,7 @@ type LinkOverlayStyles = LinkOverlayProperties & DistributiveOmit<SystemStyleObj
 
 interface LinkOverlayPatternFn {
   (styles?: LinkOverlayStyles): string
-  raw: (styles: LinkOverlayStyles) => SystemStyleObject
+  raw: (styles?: LinkOverlayStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/spacer.d.ts

@@ -14,7 +14,7 @@ type SpacerStyles = SpacerProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface SpacerPatternFn {
   (styles?: SpacerStyles): string
-  raw: (styles: SpacerStyles) => SystemStyleObject
+  raw: (styles?: SpacerStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/square.d.ts

@@ -14,7 +14,7 @@ type SquareStyles = SquareProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface SquarePatternFn {
   (styles?: SquareStyles): string
-  raw: (styles: SquareStyles) => SystemStyleObject
+  raw: (styles?: SquareStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/stack.d.ts

@@ -17,7 +17,7 @@ type StackStyles = StackProperties & DistributiveOmit<SystemStyleObject, keyof S
 
 interface StackPatternFn {
   (styles?: StackStyles): string
-  raw: (styles: StackStyles) => SystemStyleObject
+  raw: (styles?: StackStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/styled-link.d.ts

@@ -14,7 +14,7 @@ type StyledLinkStyles = StyledLinkProperties & DistributiveOmit<SystemStyleObjec
 
 interface StyledLinkPatternFn {
   (styles?: StyledLinkStyles): string
-  raw: (styles: StyledLinkStyles) => SystemStyleObject
+  raw: (styles?: StyledLinkStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/visually-hidden.d.ts

@@ -14,7 +14,7 @@ type VisuallyHiddenStyles = VisuallyHiddenProperties & DistributiveOmit<SystemSt
 
 interface VisuallyHiddenPatternFn {
   (styles?: VisuallyHiddenStyles): string
-  raw: (styles: VisuallyHiddenStyles) => SystemStyleObject
+  raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/vstack.d.ts

@@ -15,7 +15,7 @@ type VstackStyles = VstackProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface VstackPatternFn {
   (styles?: VstackStyles): string
-  raw: (styles: VstackStyles) => SystemStyleObject
+  raw: (styles?: VstackStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/wrap.d.ts

@@ -18,7 +18,7 @@ type WrapStyles = WrapProperties & DistributiveOmit<SystemStyleObject, keyof Wra
 
 interface WrapPatternFn {
   (styles?: WrapStyles): string
-  raw: (styles: WrapStyles) => SystemStyleObject
+  raw: (styles?: WrapStyles) => SystemStyleObject
 }
 
 

package/styled-system/styles.css

@@ -11,18 +11,109 @@
 @import './tokens/keyframes.css';
 
 @layer utilities {
-  .styles\:dark\:text_green500.dark,
-    .dark .styles\:dark\:text_green500 {
-    color: green500;
+  .styles\:text_red\! {
+    color: red !important
     }
 
-  .font_12px\/1\.5_Helvetica\,_Arial\,_sans-serif {
-    font: 12px/1.5 Helvetica, Arial, sans-serif;
-  }
+  .styles\:fs_30px\! {
+    font-size: 30px !important
+    }
 
-  .text_red {
-    color: red;
-  }
+  .styles\:bg_red\.300 {
+    background: var(--colors-red-300)
+    }
+
+  .styles\:w_20px {
+    width: 20px
+    }
+
+  .styles\:w_70px {
+    width: 70px
+    }
+
+  .styles\:w_50px {
+    width: 50px
+    }
+
+  [dir=rtl] .styles\:rtl\:ml_-4 {
+    margin-left: calc(var(--spacing-4) * -1)
+        }
+
+  .styles\:light\:text_red.light, .light .styles\:light\:text_red {
+    color: red
+        }
+
+  .styles\:dark\:text_green.dark, .dark .styles\:dark\:text_green {
+    color: green
+        }
+
+  .styles\:dark\:opacity_slate400.dark, .dark .styles\:dark\:opacity_slate400 {
+    opacity: slate400
+        }
+
+  .styles\:left_20px,.styles\:\[\&_\>_p\]\:left_20px > p {
+    left: 20px
+        }
+
+  .styles\:\[\&_\>_p\]\:light\:bg_red400 > p.light, .light .styles\:\[\&_\>_p\]\:light\:bg_red400 > p {
+    background: red400
+            }
+
+  .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p.dark, .dark .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p {
+    background: green500
+            }
+
+  [dir=rtl] .styles\:\[\&_\>_p\]\:rtl\:font_sans > p {
+    font: sans
+            }
+
+  .styles\:\[\&\:\:placeholder\]\:left_40px::placeholder {
+    left: 40px
+        }
+
+  .styles\:\[\&\:\:placeholder\]\:bg_red400::placeholder {
+    background: red400
+        }
+
+  .styles\:all_unset {
+    all: unset
+    }
+
+  .styles\:bg_red {
+    background-color: red
+    }
+
+  .styles\:border_none {
+    border: var(--borders-none)
+    }
+
+  .styles\:p_\$3_\$3 {
+    padding: $3 $3
+    }
+
+  .styles\:rounded_\$button {
+    border-radius: $button
+    }
+
+  .styles\:fs_\$xsmall {
+    font-size: $xsmall
+    }
+
+  .styles\:cursor_pointer {
+    cursor: pointer
+    }
+
+  .styles\:\[\&_\+_span\]\:ml_\$2 + span {
+    margin-left: $2
+        }
+
+  .test .styles\:\[\.test_\&\]\:bg_blue {
+    background-color: blue
+        }
+
+  .styles\:\[\&_\.my-class\]\:text_red .my-class,.styles\:\[\&_span\]\:text_red span,.styles\:\[\&_kbd\]\:text_red kbd {
+    color: red
+        }
 
   .w_26px {
     width: 26px;
@@ -973,6 +1064,14 @@
     outline-color: var(--colors-neutral-400);
     }
 
+  .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:focus, .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:hover {
+    box-shadow: none
+        }
+
+  :focus > .styles\:\[\:focus_\>_\&\]\:text_white {
+    color: var(--colors-white)
+        }
+
   .hover\:bg_gray\.100:where(:hover, [data-hover]) {
     background-color: var(--colors-gray-100);
     }
@@ -1009,9 +1108,17 @@
     border-bottom-color: var(--colors-black);
     }
 
-  .\[\&\:hover\]\:text_blue:hover {
-    color: blue;
-    }
+  input:hover .styles\:\[input\:hover_\&\]\:bg_red400 {
+    background: red400
+        }
+
+  .styles\:hover\:bg_pink\.400:is(:hover, [data-hover]) {
+    background: var(--colors-pink-400)
+        }
+
+  .styles\:hover\:text_pink\.400:is(:hover, [data-hover]) {
+    color: var(--colors-pink-400)
+        }
 
   .\[\&\:hover\]\:bg_\#4049f0:hover {
     background: #4049f0;
@@ -1025,14 +1132,77 @@
     opacity: 0.8;
       }
 
-  @media screen and (min-width: 640px) {
-    @media screen and (min-width: 768px) {
-      .styles\:dark\:sm\:md\:text_red200.dark,
-    .dark .styles\:dark\:sm\:md\:text_red200 {
-        color: red200
+  @media screen and (min-width: 40em) {
+    [dir=ltr] .styles\:ltr\:sm\:ml_4 {
+      margin-left: var(--spacing-4)
+        }
+
+    [dir=rtl] .styles\:sm\:rtl\:top_20px {
+      top: 20px
+        }
+            }
+
+  @media screen and (min-width: 40em) {
+    .styles\:\[\&\:\:placeholder\]\:sm\:text_left::placeholder {
+      text-align: left
+        }
+            }
+
+  @media screen and (min-width: 40em) {
+    .styles\:sm\:hover\:top_50px:is(:hover, [data-hover]) {
+      top: 50px
+        }
+            }
+
+  @media screen and (min-width: 40em) {
+    [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]).dark, .dark [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]) {
+      font: serif
+                    }
+                        }
+
+  @media screen and (min-width: 40em) {
+    input:hover .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
+      font-size: 14px
+        }
+            }
+
+  @media screen and (min-width: 40em) {
+    .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]).dark, .dark .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]) {
+      background: var(--colors-red-300)
+            }
+                }
+
+  @media screen and (min-width: 40em) {
+    .styles\:hover\:disabled\:sm\:bg_red\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+      background: var(--colors-red-300)
+            }
+                }
+
+  @media screen and (min-width: 40em) {
+    .styles\:sm\:w_60px {
+      width: 60px
     }
         }
-      }
+
+  @media (min-width: 768px) {
+    .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
+      background-color: green
+    }
+
+    .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
+      font-size: $small
+    }
+
+    .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow:hover {
+      background-color: yellow
+        }
+            }
+
+  @media screen and (min-width: 48em) {
+    .styles\:\[\&_\>_p\]\:md\:left_40px > p,.styles\:md\:left_40px {
+      left: 40px
+    }
+            }
 
   @media screen and (min-width: 768px) {
     .md\:px_6 {
@@ -1045,4 +1215,42 @@
       padding-inline: var(--spacing-8)
   }
     }
+
+  @media screen and (min-width: 64em) {
+    .styles\:lg\:top_120px {
+      top: 120px
+    }
+
+    input:hover .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
+      font-size: 18px
+        }
+            }
+
+  @media base {
+    .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px:hover {
+      left: 40px
+        }
+            }
+
+  @media base {
+    @media screen and (min-width: 40em) {
+      .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left:hover {
+        text-align: left
+        }
+                }
+            }
+
+  @media base {
+    .styles\:\[\@media_base\]\:left_40px {
+      left: 40px
+    }
+        }
+
+  @media base {
+    @media screen and (min-width: 40em) {
+      .styles\:\[\@media_base\]\:sm\:text_left {
+        text-align: left
+    }
+            }
+        }
 }

package/styled-system/types/conditions.d.ts

@@ -2,118 +2,119 @@
 import type { AnySelector, Selectors } from './selectors';
 
 export type Conditions = {
-	"_hover": string
-	"_focus": string
-	"_focusWithin": string
-	"_focusVisible": string
-	"_disabled": string
-	"_active": string
-	"_visited": string
-	"_target": string
-	"_readOnly": string
-	"_readWrite": string
-	"_empty": string
-	"_checked": string
-	"_enabled": string
-	"_expanded": string
-	"_highlighted": string
-	"_before": string
-	"_after": string
-	"_firstLetter": string
-	"_firstLine": string
-	"_marker": string
-	"_selection": string
-	"_file": string
-	"_backdrop": string
-	"_first": string
-	"_last": string
-	"_only": string
-	"_even": string
-	"_odd": string
-	"_firstOfType": string
-	"_lastOfType": string
-	"_onlyOfType": string
-	"_peerFocus": string
-	"_peerHover": string
-	"_peerActive": string
-	"_peerFocusWithin": string
-	"_peerFocusVisible": string
-	"_peerDisabled": string
-	"_peerChecked": string
-	"_peerInvalid": string
-	"_peerExpanded": string
-	"_peerPlaceholderShown": string
-	"_groupFocus": string
-	"_groupHover": string
-	"_groupActive": string
-	"_groupFocusWithin": string
-	"_groupFocusVisible": string
-	"_groupDisabled": string
-	"_groupChecked": string
-	"_groupExpanded": string
-	"_groupInvalid": string
-	"_indeterminate": string
-	"_required": string
-	"_valid": string
-	"_invalid": string
-	"_autofill": string
-	"_inRange": string
-	"_outOfRange": string
-	"_placeholder": string
-	"_placeholderShown": string
-	"_pressed": string
-	"_selected": string
-	"_default": string
-	"_optional": string
-	"_open": string
-	"_fullscreen": string
-	"_loading": string
-	"_currentPage": string
-	"_currentStep": string
-	"_motionReduce": string
-	"_motionSafe": string
-	"_print": string
-	"_landscape": string
-	"_portrait": string
-	"_dark": string
-	"_light": string
-	"_osDark": string
-	"_osLight": string
-	"_highContrast": string
-	"_lessContrast": string
-	"_moreContrast": string
-	"_ltr": string
-	"_rtl": string
-	"_scrollbar": string
-	"_scrollbarThumb": string
-	"_scrollbarTrack": string
-	"_horizontal": string
-	"_vertical": string
-	"sm": string
-	"smOnly": string
-	"smDown": string
-	"md": string
-	"mdOnly": string
-	"mdDown": string
-	"lg": string
-	"lgOnly": string
-	"lgDown": string
-	"xl": string
-	"xlOnly": string
-	"xlDown": string
-	"2xl": string
-	"2xlOnly": string
-	"smToMd": string
-	"smToLg": string
-	"smToXl": string
-	"smTo2xl": string
-	"mdToLg": string
-	"mdToXl": string
-	"mdTo2xl": string
-	"lgToXl": string
-	"lgTo2xl": string
-	"xlTo2xl": string
-	"base": string
+	/** `&:is(:hover, [data-hover])` */"_hover": string
+	/** `&:is(:focus, [data-focus])` */"_focus": string
+	/** `&:focus-within` */"_focusWithin": string
+	/** `&:is(:focus-visible, [data-focus-visible])` */"_focusVisible": string
+	/** `&:is(:disabled, [disabled], [data-disabled])` */"_disabled": string
+	/** `&:is(:active, [data-active])` */"_active": string
+	/** `&:visited` */"_visited": string
+	/** `&:target` */"_target": string
+	/** `&:is(:read-only, [data-read-only])` */"_readOnly": string
+	/** `&:read-write` */"_readWrite": string
+	/** `&:is(:empty, [data-empty])` */"_empty": string
+	/** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */"_checked": string
+	/** `&:enabled` */"_enabled": string
+	/** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */"_expanded": string
+	/** `&[data-highlighted]` */"_highlighted": string
+	/** `&::before` */"_before": string
+	/** `&::after` */"_after": string
+	/** `&::first-letter` */"_firstLetter": string
+	/** `&::first-line` */"_firstLine": string
+	/** `&::marker` */"_marker": string
+	/** `&::selection` */"_selection": string
+	/** `&::file-selector-button` */"_file": string
+	/** `&::backdrop` */"_backdrop": string
+	/** `&:first-child` */"_first": string
+	/** `&:last-child` */"_last": string
+	/** `&:only-child` */"_only": string
+	/** `&:nth-child(even)` */"_even": string
+	/** `&:nth-child(odd)` */"_odd": string
+	/** `&:first-of-type` */"_firstOfType": string
+	/** `&:last-of-type` */"_lastOfType": string
+	/** `&:only-of-type` */"_onlyOfType": string
+	/** `.peer:is(:focus, [data-focus]) ~ &` */"_peerFocus": string
+	/** `.peer:is(:hover, [data-hover]) ~ &` */"_peerHover": string
+	/** `.peer:is(:active, [data-active]) ~ &` */"_peerActive": string
+	/** `.peer:focus-within ~ &` */"_peerFocusWithin": string
+	/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */"_peerFocusVisible": string
+	/** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */"_peerDisabled": string
+	/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */"_peerChecked": string
+	/** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */"_peerInvalid": string
+	/** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */"_peerExpanded": string
+	/** `.peer:placeholder-shown ~ &` */"_peerPlaceholderShown": string
+	/** `.group:is(:focus, [data-focus]) &` */"_groupFocus": string
+	/** `.group:is(:hover, [data-hover]) &` */"_groupHover": string
+	/** `.group:is(:active, [data-active]) &` */"_groupActive": string
+	/** `.group:focus-within &` */"_groupFocusWithin": string
+	/** `.group:is(:focus-visible, [data-focus-visible]) &` */"_groupFocusVisible": string
+	/** `.group:is(:disabled, [disabled], [data-disabled]) &` */"_groupDisabled": string
+	/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */"_groupChecked": string
+	/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */"_groupExpanded": string
+	/** `.group:invalid &` */"_groupInvalid": string
+	/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")` */"_indeterminate": string
+	/** `&:required` */"_required": string
+	/** `&:is(:valid, [data-valid])` */"_valid": string
+	/** `&:is(:invalid, [data-invalid])` */"_invalid": string
+	/** `&:autofill` */"_autofill": string
+	/** `&:in-range` */"_inRange": string
+	/** `&:out-of-range` */"_outOfRange": string
+	/** `&::placeholder` */"_placeholder": string
+	/** `&:placeholder-shown` */"_placeholderShown": string
+	/** `&:is([aria-pressed=true], [data-pressed])` */"_pressed": string
+	/** `&:is([aria-selected=true], [data-selected])` */"_selected": string
+	/** `&:default` */"_default": string
+	/** `&:optional` */"_optional": string
+	/** `&:is([open], [data-open], [data-state="open"])` */"_open": string
+	/** `&:fullscreen` */"_fullscreen": string
+	/** `&:is([data-loading], [aria-busy=true])` */"_loading": string
+	/** `&[aria-current=page]` */"_currentPage": string
+	/** `&[aria-current=step]` */"_currentStep": string
+	/** `@media (prefers-reduced-motion: reduce)` */"_motionReduce": string
+	/** `@media (prefers-reduced-motion: no-preference)` */"_motionSafe": string
+	/** `@media print` */"_print": string
+	/** `@media (orientation: landscape)` */"_landscape": string
+	/** `@media (orientation: portrait)` */"_portrait": string
+	/** ` &.dark, .dark &` */"_dark": string
+	/** ` &.light, .light &` */"_light": string
+	/** `@media (prefers-color-scheme: dark)` */"_osDark": string
+	/** `@media (prefers-color-scheme: light)` */"_osLight": string
+	/** `@media (forced-colors: active)` */"_highContrast": string
+	/** `@media (prefers-contrast: less)` */"_lessContrast": string
+	/** `@media (prefers-contrast: more)` */"_moreContrast": string
+	/** `[dir=ltr] &` */"_ltr": string
+	/** `[dir=rtl] &` */"_rtl": string
+	/** `&::-webkit-scrollbar` */"_scrollbar": string
+	/** `&::-webkit-scrollbar-thumb` */"_scrollbarThumb": string
+	/** `&::-webkit-scrollbar-track` */"_scrollbarTrack": string
+	/** `&[data-orientation=horizontal]` */"_horizontal": string
+	/** `&[data-orientation=vertical]` */"_vertical": string
+	/** `@media screen and (min-width: 40em)` */"sm": string
+	/** `@media screen and (min-width: 40em) and (max-width: 47.996875em)` */"smOnly": string
+	/** `@media screen and (max-width: 40em)` */"smDown": string
+	/** `@media screen and (min-width: 48em)` */"md": string
+	/** `@media screen and (min-width: 48em) and (max-width: 63.996875em)` */"mdOnly": string
+	/** `@media screen and (max-width: 48em)` */"mdDown": string
+	/** `@media screen and (min-width: 64em)` */"lg": string
+	/** `@media screen and (min-width: 64em) and (max-width: 79.996875em)` */"lgOnly": string
+	/** `@media screen and (max-width: 64em)` */"lgDown": string
+	/** `@media screen and (min-width: 80em)` */"xl": string
+	/** `@media screen and (min-width: 80em) and (max-width: 95.996875em)` */"xlOnly": string
+	/** `@media screen and (max-width: 80em)` */"xlDown": string
+	/** `@media screen and (min-width: 96em)` */"2xl": string
+	/** `@media screen and (min-width: 96em)` */"2xlOnly": string
+	/** `@media screen and (max-width: 96em)` */"2xlDown": string
+	/** `@media screen and (min-width: 40em) and (max-width: 47.996875em)` */"smToMd": string
+	/** `@media screen and (min-width: 40em) and (max-width: 63.996875em)` */"smToLg": string
+	/** `@media screen and (min-width: 40em) and (max-width: 79.996875em)` */"smToXl": string
+	/** `@media screen and (min-width: 40em) and (max-width: 95.996875em)` */"smTo2xl": string
+	/** `@media screen and (min-width: 48em) and (max-width: 63.996875em)` */"mdToLg": string
+	/** `@media screen and (min-width: 48em) and (max-width: 79.996875em)` */"mdToXl": string
+	/** `@media screen and (min-width: 48em) and (max-width: 95.996875em)` */"mdTo2xl": string
+	/** `@media screen and (min-width: 64em) and (max-width: 79.996875em)` */"lgToXl": string
+	/** `@media screen and (min-width: 64em) and (max-width: 95.996875em)` */"lgTo2xl": string
+	/** `@media screen and (min-width: 80em) and (max-width: 95.996875em)` */"xlTo2xl": string
+	/** The base (=no conditions) styles to apply  */"base": string
 }
 
 export type Condition = keyof Conditions

package/styled-system/types/index.d.ts

@@ -1,4 +1,6 @@
 /* eslint-disable */
 import './global.d.ts'
 export type { ConditionalValue } from './conditions';
+export type { PatternConfig, PatternProperties } from './pattern';
+export type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe';
 export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types';

package/styled-system/types/recipe.d.ts

@@ -100,6 +100,7 @@ export type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord>
 ) => SlotRecord<S, string>
 
 export type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {
+  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>
   variantKeys: (keyof T)[]
   variantMap: RecipeVariantMap<T>
   splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]

package/styled-system/chunks/..__core____tests____complex-rule.test.css

@@ -1,19 +0,0 @@
-@layer utilities {
-  .styles\:dark\:text_green500 {
-    &.dark,
-    .dark & {
-      color: green500;
-    }
-  }
-
-  .styles\:dark\:sm\:md\:text_red200 {
-    &.dark,
-    .dark & {
-      @media screen and (min-width: 640px) {
-        @media screen and (min-width: 768px) {
-          color: red200;
-        }
-      }
-    }
-  }
-}

package/styled-system/chunks/..__shared____tests____string-literal.test.css

@@ -1,15 +0,0 @@
-@layer utilities {
-  .font_12px\/1\.5_Helvetica\,_Arial\,_sans-serif {
-    font: 12px/1.5 Helvetica, Arial, sans-serif;
-  }
-
-  .text_red {
-    color: red;
-  }
-
-  .\[\&\:hover\]\:text_blue {
-    &:hover {
-      color: blue;
-    }
-  }
-}