@pandacss/studio 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.10.0",
+  "version": "0.11.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.8",
-    "@pandacss/types": "0.10.0",
-    "@pandacss/config": "0.10.0",
-    "@pandacss/shared": "0.10.0",
-    "@pandacss/token-dictionary": "0.10.0",
-    "@pandacss/logger": "0.10.0",
-    "@pandacss/node": "0.10.0"
+    "@pandacss/types": "0.11.0",
+    "@pandacss/config": "0.11.0",
+    "@pandacss/shared": "0.11.0",
+    "@pandacss/token-dictionary": "0.11.0",
+    "@pandacss/logger": "0.11.0",
+    "@pandacss/node": "0.11.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.10.0"
+    "@pandacss/dev": "0.11.0"
   },
   "scripts": {
     "codegen": "panda",

package/styled-system/css/css.mjs

@@ -2,18 +2,22 @@ import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../he
 import { sortConditions, finalizeConditions } from './conditions.mjs'
 
 const utilities =
-  'aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:object,objectFit:object,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x,insetBlock:inset-y,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/1,insetInlineStart:start/1,right:right,bottom:bottom,insetX:inset-x,insetY:inset-y,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/1,paddingInlineEnd:pe/paddingEnd,paddingInlineStart:ps/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/marginX,marginInlineEnd:me/marginEnd,marginInlineStart:ms/marginStart,outlineWidth:ring/ringWidth,outlineColor:ring/ringColor,outline:ring/1,outlineOffset:ring/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide,divideStyle:divide,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:font,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text,textDecoration:text-decor,textDecorationColor:text-decor,textEmphasisColor:text-emphasis,textDecorationStyle:decoration,textDecorationThickness:decoration,textUnderlineOffset:underline-offset,textTransform:text,textIndent:indent,textShadow:text-shadow,textOverflow:text,verticalAlign:align,wordBreak:break,textWrap:text,truncate:truncate,lineClamp:clamp,listStyleType:list,listStylePosition:list,listStyleImage:list-img,backgroundPosition:bg/bgPosition,backgroundPositionX:bg-x/bgPositionX,backgroundPositionY:bg-y/bgPositionY,backgroundAttachment:bg/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFrom:from,gradientTo:to,gradientVia:via,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationDelay:animation-delay,transformOrigin:origin,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginX:scroll-mx,scrollMarginY:scroll-my,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingX:scroll-px,scrollPaddingY:scroll-py,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap,scrollSnapStop:snap,scrollSnapType:snap,scrollSnapStrictness:strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-size-adjust,textStyle:textStyle'
+  'aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:object,objectFit:object,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x,insetBlock:inset-y,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,insetX:inset-x,insetY:inset-y,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,outlineWidth:ring/ringWidth,outlineColor:ring/ringColor,outline:ring/1,outlineOffset:ring/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide,divideStyle:divide,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:font,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text,textDecoration:text-decor,textDecorationColor:text-decor,textEmphasisColor:text-emphasis,textDecorationStyle:decoration,textDecorationThickness:decoration,textUnderlineOffset:underline-offset,textTransform:text,textIndent:indent,textShadow:text-shadow,textOverflow:text,verticalAlign:align,wordBreak:break,textWrap:text,truncate:truncate,lineClamp:clamp,listStyleType:list,listStylePosition:list,listStyleImage:list-img,backgroundPosition:bg/bgPosition,backgroundPositionX:bg-x/bgPositionX,backgroundPositionY:bg-y/bgPositionY,backgroundAttachment:bg/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFrom:from,gradientTo:to,gradientVia:via,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationDelay:animation-delay,transformOrigin:origin,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginX:scroll-mx,scrollMarginY:scroll-my,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingX:scroll-px,scrollPaddingY:scroll-py,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap,scrollSnapStop:snap,scrollSnapType:snap,scrollSnapStrictness:strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-size-adjust,textStyle:textStyle'
 
-const classMap = {}
-const shorthands = {}
+const classNames = new Map()
+const shorthands = new Map()
 utilities.split(',').forEach((utility) => {
   const [prop, meta] = utility.split(':')
-  const [className, shorthand] = meta.split('/')
-  classMap[prop] = className
-  if (shorthand) shorthands[shorthand === '1' ? className : shorthand] = prop
+  const [className, ...shorthandList] = meta.split('/')
+  classNames.set(prop, className)
+  if (shorthandList.length) {
+    shorthandList.forEach((shorthand) => {
+      shorthands.set(shorthand === '1' ? className : shorthand, prop)
+    })
+  }
 })
 
-const resolveShorthand = (prop) => shorthands[prop] || prop
+const resolveShorthand = (prop) => shorthands.get(prop) || prop
 
 const context = {
   conditions: {
@@ -24,7 +28,7 @@ const context = {
   utility: {
     transform: (prop, value) => {
       const key = resolveShorthand(prop)
-      const propKey = classMap[key] || hypenateProperty(key)
+      const propKey = classNames.get(key) || hypenateProperty(key)
       return { className: `${propKey}_${withoutSpace(value)}` }
     },
     hasShorthand: true,

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

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { BleedProperties } from '../patterns/bleed'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type BleedProps = BleedProperties & Omit<HTMLPandaProps<'div'>, keyof BleedProperties >
+
+
+export declare const Bleed: FunctionComponent<BleedProps>

package/styled-system/jsx/bleed.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getBleedStyle } from '../patterns/bleed.mjs'
+
+export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
+  const { inline, block, ...restProps } = props
+  const styleProps = getBleedStyle({ inline, block })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -19,5 +19,7 @@ export * from './wrap'
 export * from './container'
 export * from './divider'
 export * from './float'
+export * from './bleed'
+export * from './visually-hidden'
 export * from './styled-link'
 export type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/index.mjs

@@ -18,4 +18,6 @@ export * from './wrap.mjs'
 export * from './container.mjs'
 export * from './divider.mjs'
 export * from './float.mjs'
+export * from './bleed.mjs'
+export * from './visually-hidden.mjs'
 export * from './styled-link.mjs'

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

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { VisuallyHiddenProperties } from '../patterns/visually-hidden'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type VisuallyHiddenProps = VisuallyHiddenProperties & Omit<HTMLPandaProps<'div'>, keyof VisuallyHiddenProperties >
+
+
+export declare const VisuallyHidden: FunctionComponent<VisuallyHiddenProps>

package/styled-system/jsx/visually-hidden.mjs

@@ -0,0 +1,8 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs'
+
+export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) {
+  const styleProps = getVisuallyHiddenStyle()
+  return createElement(panda.div, { ref, ...styleProps, ...props })
+})

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

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type BleedProperties = {
+   inline?: PropertyValue<'marginInline'>
+	block?: PropertyValue<'marginBlock'>
+}
+
+
+type BleedOptions = BleedProperties & Omit<SystemStyleObject, keyof BleedProperties >
+
+interface BleedPatternFn {
+  (options?: BleedOptions): string
+  raw: (options: BleedOptions) => BleedOptions
+}
+
+
+export declare const bleed: BleedPatternFn;

package/styled-system/patterns/bleed.mjs

@@ -0,0 +1,20 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const bleedConfig = {
+  transform(props) {
+    const { inline = '0', block = '0', ...rest } = props
+    return {
+      '--bleed-x': `spacing.${inline}`,
+      '--bleed-y': `spacing.${block}`,
+      marginInline: 'calc(var(--bleed-x, 0) * -1)',
+      marginBlock: 'calc(var(--bleed-y, 0) * -1)',
+      ...rest,
+    }
+  },
+}
+
+export const getBleedStyle = (styles = {}) => bleedConfig.transform(styles, { map: mapObject })
+
+export const bleed = (styles) => css(getBleedStyle(styles))
+bleed.raw = (styles) => styles

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

@@ -17,4 +17,6 @@ export * from './wrap'
 export * from './container'
 export * from './divider'
 export * from './float'
+export * from './bleed'
+export * from './visually-hidden'
 export * from './styled-link'

package/styled-system/patterns/index.mjs

@@ -16,4 +16,6 @@ export * from './wrap.mjs'
 export * from './container.mjs'
 export * from './divider.mjs'
 export * from './float.mjs'
+export * from './bleed.mjs'
+export * from './visually-hidden.mjs'
 export * from './styled-link.mjs'

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

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type VisuallyHiddenProperties = {
+   
+}
+
+
+type VisuallyHiddenOptions = VisuallyHiddenProperties & Omit<SystemStyleObject, keyof VisuallyHiddenProperties >
+
+interface VisuallyHiddenPatternFn {
+  (options?: VisuallyHiddenOptions): string
+  raw: (options: VisuallyHiddenOptions) => VisuallyHiddenOptions
+}
+
+
+export declare const visuallyHidden: VisuallyHiddenPatternFn;

package/styled-system/patterns/visually-hidden.mjs

@@ -0,0 +1,16 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const visuallyHiddenConfig = {
+  transform(props) {
+    return {
+      srOnly: true,
+      ...props,
+    }
+  },
+}
+
+export const getVisuallyHiddenStyle = (styles = {}) => visuallyHiddenConfig.transform(styles, { map: mapObject })
+
+export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
+visuallyHidden.raw = (styles) => styles

package/styled-system/types/prop-type.d.ts

@@ -302,7 +302,7 @@ type PropertyValueTypes  = {
 }
 
 export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-  ? ConditionalValue<PropertyTypes[T] | CssValue<T>>
+  ? ConditionalValue<PropertyTypes[T] | CssValue<T> | (string & {})>
   : T extends keyof CssProperties
-  ? ConditionalValue<CssProperties[T]>
+  ? ConditionalValue<CssProperties[T] | (string & {})>
   : ConditionalValue<string | number>