@pandacss/studio 0.13.0 → 0.14.0

package/styled-system/jsx/vstack.mjs

@@ -1,9 +1,9 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs'
-import { getVstackStyle } from '../patterns/vstack.mjs'
+import { panda } from './factory.mjs';
+import { getVstackStyle } from '../patterns/vstack.mjs';
 
 export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) {
   const { justify, gap, ...restProps } = props
-  const styleProps = getVstackStyle({ justify, gap })
-  return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+const styleProps = getVstackStyle({justify, gap})
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import type { FunctionComponent } from 'react'
-import type { WrapProperties } from '../patterns/wrap'
-import type { HTMLPandaProps } from '../types/jsx'
-import type { DistributiveOmit } from '../types/system-types'
+import type { WrapProperties } from '../patterns/wrap';
+import type { HTMLPandaProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
 
 export type WrapProps = WrapProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof WrapProperties >
 

package/styled-system/jsx/wrap.mjs

@@ -1,9 +1,9 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs'
-import { getWrapStyle } from '../patterns/wrap.mjs'
+import { panda } from './factory.mjs';
+import { getWrapStyle } from '../patterns/wrap.mjs';
 
 export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) {
   const { gap, rowGap, columnGap, align, justify, ...restProps } = props
-  const styleProps = getWrapStyle({ gap, rowGap, columnGap, align, justify })
-  return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+const styleProps = getWrapStyle({gap, rowGap, columnGap, align, justify})
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type AspectRatioProperties = {
    ratio?: ConditionalValue<number>
@@ -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/aspect-ratio.mjs

@@ -1,36 +1,35 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
-  transform(props, { map }) {
-    const { ratio = 4 / 3, ...rest } = props
-    return {
-      position: 'relative',
-      _before: {
-        content: `""`,
-        display: 'block',
-        height: '0',
-        paddingBottom: map(ratio, (r) => `${(1 / r) * 100}%`),
-      },
-      '&>*': {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        overflow: 'hidden',
-        position: 'absolute',
-        inset: '0',
-        width: '100%',
-        height: '100%',
-      },
-      '&>img, &>video': {
-        objectFit: 'cover',
-      },
-      ...rest,
-    }
-  },
-}
+transform(props, { map }) {
+  const { ratio = 4 / 3, ...rest } = props;
+  return {
+    position: "relative",
+    _before: {
+      content: `""`,
+      display: "block",
+      height: "0",
+      paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+    },
+    "&>*": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "hidden",
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%"
+    },
+    "&>img, &>video": {
+      objectFit: "cover"
+    },
+    ...rest
+  };
+}}
 
 export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
 
 export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
-aspectRatio.raw = getAspectRatioStyle
+aspectRatio.raw = getAspectRatioStyle

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

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type BleedProperties = {
    inline?: PropertyValue<'marginInline'>
@@ -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/bleed.mjs

@@ -1,20 +1,19 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+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,
-    }
-  },
-}
+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 = getBleedStyle
+bleed.raw = getBleedStyle

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

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type BoxProperties = {
    
@@ -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/box.mjs

@@ -1,13 +1,12 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const boxConfig = {
-  transform(props) {
-    return props
-  },
-}
+transform(props) {
+  return props;
+}}
 
 export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
 
 export const box = (styles) => css(getBoxStyle(styles))
-box.raw = getBoxStyle
+box.raw = getBoxStyle

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

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type CenterProperties = {
    inline?: ConditionalValue<boolean>
@@ -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/center.mjs

@@ -1,19 +1,18 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const centerConfig = {
-  transform(props) {
-    const { inline, ...rest } = props
-    return {
-      display: inline ? 'inline-flex' : 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      ...rest,
-    }
-  },
-}
+transform(props) {
+  const { inline, ...rest } = props;
+  return {
+    display: inline ? "inline-flex" : "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...rest
+  };
+}}
 
 export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject })
 
 export const center = (styles) => css(getCenterStyle(styles))
-center.raw = getCenterStyle
+center.raw = getCenterStyle

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

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type CircleProperties = {
    size?: PropertyValue<'width'>
@@ -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/circle.mjs

@@ -1,23 +1,22 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const circleConfig = {
-  transform(props) {
-    const { size, ...rest } = props
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flex: '0 0 auto',
-      width: size,
-      height: size,
-      borderRadius: '9999px',
-      ...rest,
-    }
-  },
-}
+transform(props) {
+  const { size, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "0 0 auto",
+    width: size,
+    height: size,
+    borderRadius: "9999px",
+    ...rest
+  };
+}}
 
 export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject })
 
 export const circle = (styles) => css(getCircleStyle(styles))
-circle.raw = getCircleStyle
+circle.raw = getCircleStyle

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

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type ContainerProperties = {
    
@@ -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/container.mjs

@@ -1,19 +1,18 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const containerConfig = {
-  transform(props) {
-    return {
-      position: 'relative',
-      maxWidth: '8xl',
-      mx: 'auto',
-      px: { base: '4', md: '6', lg: '8' },
-      ...props,
-    }
-  },
-}
+transform(props) {
+  return {
+    position: "relative",
+    maxWidth: "8xl",
+    mx: "auto",
+    px: { base: "4", md: "6", lg: "8" },
+    ...props
+  };
+}}
 
 export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
 
 export const container = (styles) => css(getContainerStyle(styles))
-container.raw = getContainerStyle
+container.raw = getContainerStyle

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

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type DividerProperties = {
    orientation?: ConditionalValue<"horizontal" | "vertical">
@@ -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/divider.mjs

@@ -1,22 +1,21 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const dividerConfig = {
-  transform(props, { map }) {
-    const { orientation = 'horizontal', thickness = '1px', color, ...rest } = props
-    return {
-      '--thickness': thickness,
-      width: map(orientation, (v) => (v === 'vertical' ? void 0 : '100%')),
-      height: map(orientation, (v) => (v === 'horizontal' ? void 0 : '100%')),
-      borderBlockEndWidth: map(orientation, (v) => (v === 'horizontal' ? 'var(--thickness)' : void 0)),
-      borderInlineEndWidth: map(orientation, (v) => (v === 'vertical' ? 'var(--thickness)' : void 0)),
-      borderColor: color,
-      ...rest,
-    }
-  },
-}
+transform(props, { map }) {
+  const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
+  return {
+    "--thickness": thickness,
+    width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
+    height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
+    borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+    borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
+    borderColor: color,
+    ...rest
+  };
+}}
 
 export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
 
 export const divider = (styles) => css(getDividerStyle(styles))
-divider.raw = getDividerStyle
+divider.raw = getDividerStyle

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

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type FlexProperties = {
    align?: PropertyValue<'alignItems'>
@@ -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/flex.mjs

@@ -1,24 +1,23 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const flexConfig = {
-  transform(props) {
-    const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props
-    return {
-      display: 'flex',
-      flexDirection: direction,
-      alignItems: align,
-      justifyContent: justify,
-      flexWrap: wrap2,
-      flexBasis: basis,
-      flexGrow: grow,
-      flexShrink: shrink,
-      ...rest,
-    }
-  },
-}
+transform(props) {
+  const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap2,
+    flexBasis: basis,
+    flexGrow: grow,
+    flexShrink: shrink,
+    ...rest
+  };
+}}
 
 export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject })
 
 export const flex = (styles) => css(getFlexStyle(styles))
-flex.raw = getFlexStyle
+flex.raw = getFlexStyle

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

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type FloatProperties = {
    offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
@@ -17,7 +17,7 @@ type FloatStyles = FloatProperties & DistributiveOmit<SystemStyleObject, keyof F
 
 interface FloatPatternFn {
   (styles?: FloatStyles): string
-  raw: (styles: FloatStyles) => SystemStyleObject
+  raw: (styles?: FloatStyles) => SystemStyleObject
 }