@pandacss/studio 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.14.0",
+  "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.14.0",
-    "@pandacss/config": "0.14.0",
-    "@pandacss/shared": "0.14.0",
-    "@pandacss/token-dictionary": "0.14.0",
-    "@pandacss/logger": "0.14.0",
-    "@pandacss/node": "0.14.0"
+    "@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.14.0"
+    "@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/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/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/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/styles.css

@@ -11,6 +11,110 @@
 @import './tokens/keyframes.css';
 
 @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
+    }
+
+  [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;
   }
@@ -960,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);
     }
@@ -996,6 +1108,18 @@
     border-bottom-color: var(--colors-black);
     }
 
+  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;
     }
@@ -1008,6 +1132,78 @@
     opacity: 0.8;
       }
 
+  @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 {
       padding-inline: var(--spacing-6)
@@ -1019,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

@@ -89,30 +89,31 @@ export type Conditions = {
 	/** `&::-webkit-scrollbar-track` */"_scrollbarTrack": string
 	/** `&[data-orientation=horizontal]` */"_horizontal": string
 	/** `&[data-orientation=vertical]` */"_vertical": string
-	/** `@media screen and (min-width: 640px)` */"sm": string
-	/** `@media screen and (min-width: 640px) and (max-width: 47.996875em)` */"smOnly": string
-	/** `@media screen and (max-width: 47.996875em)` */"smDown": string
-	/** `@media screen and (min-width: 768px)` */"md": string
-	/** `@media screen and (min-width: 768px) and (max-width: 63.996875em)` */"mdOnly": string
-	/** `@media screen and (max-width: 63.996875em)` */"mdDown": string
-	/** `@media screen and (min-width: 1024px)` */"lg": string
-	/** `@media screen and (min-width: 1024px) and (max-width: 79.996875em)` */"lgOnly": string
-	/** `@media screen and (max-width: 79.996875em)` */"lgDown": string
-	/** `@media screen and (min-width: 1280px)` */"xl": string
-	/** `@media screen and (min-width: 1280px) and (max-width: 95.996875em)` */"xlOnly": string
-	/** `@media screen and (max-width: 95.996875em)` */"xlDown": string
-	/** `@media screen and (min-width: 1536px)` */"2xl": string
-	/** `@media screen and (min-width: 1536px)` */"2xlOnly": string
-	/** `@media screen and (min-width: 640px) and (max-width: 63.996875em)` */"smToMd": string
-	/** `@media screen and (min-width: 640px) and (max-width: 79.996875em)` */"smToLg": string
-	/** `@media screen and (min-width: 640px) and (max-width: 95.996875em)` */"smToXl": string
-	/** `@media screen and (min-width: 640px)` */"smTo2xl": string
-	/** `@media screen and (min-width: 768px) and (max-width: 79.996875em)` */"mdToLg": string
-	/** `@media screen and (min-width: 768px) and (max-width: 95.996875em)` */"mdToXl": string
-	/** `@media screen and (min-width: 768px)` */"mdTo2xl": string
-	/** `@media screen and (min-width: 1024px) and (max-width: 95.996875em)` */"lgToXl": string
-	/** `@media screen and (min-width: 1024px)` */"lgTo2xl": string
-	/** `@media screen and (min-width: 1280px)` */"xlTo2xl": 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
 }