@pandacss/studio 0.12.2 → 0.13.1

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>

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'>

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 = {
    

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>

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'>

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 = {
    

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">

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'>

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"]>

package/styled-system/patterns/float.mjs

@@ -1,46 +1,45 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const floatConfig = {
-  transform(props, { map }) {
-    const { offset = '0', offsetX = offset, offsetY = offset, placement = 'top-end', ...rest } = props
-    return {
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      position: 'absolute',
-      insetBlockStart: map(placement, (v) => {
-        const [side] = v.split('-')
-        const map2 = { top: offsetY, middle: '50%', bottom: 'auto' }
-        return map2[side]
-      }),
-      insetBlockEnd: map(placement, (v) => {
-        const [side] = v.split('-')
-        const map2 = { top: 'auto', middle: '50%', bottom: offsetY }
-        return map2[side]
-      }),
-      insetInlineStart: map(placement, (v) => {
-        const [, align] = v.split('-')
-        const map2 = { start: offsetX, center: '50%', end: 'auto' }
-        return map2[align]
-      }),
-      insetInlineEnd: map(placement, (v) => {
-        const [, align] = v.split('-')
-        const map2 = { start: 'auto', center: '50%', end: offsetX }
-        return map2[align]
-      }),
-      translate: map(placement, (v) => {
-        const [side, align] = v.split('-')
-        const mapX = { start: '-50%', center: '-50%', end: '50%' }
-        const mapY = { top: '-50%', middle: '-50%', bottom: '50%' }
-        return `${mapX[align]} ${mapY[side]}`
-      }),
-      ...rest,
-    }
-  },
-}
+transform(props, { map }) {
+  const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props;
+  return {
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    insetBlockStart: map(placement, (v) => {
+      const [side] = v.split("-");
+      const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
+      return map2[side];
+    }),
+    insetBlockEnd: map(placement, (v) => {
+      const [side] = v.split("-");
+      const map2 = { top: "auto", middle: "50%", bottom: offsetY };
+      return map2[side];
+    }),
+    insetInlineStart: map(placement, (v) => {
+      const [, align] = v.split("-");
+      const map2 = { start: offsetX, center: "50%", end: "auto" };
+      return map2[align];
+    }),
+    insetInlineEnd: map(placement, (v) => {
+      const [, align] = v.split("-");
+      const map2 = { start: "auto", center: "50%", end: offsetX };
+      return map2[align];
+    }),
+    translate: map(placement, (v) => {
+      const [side, align] = v.split("-");
+      const mapX = { start: "-50%", center: "-50%", end: "50%" };
+      const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+      return `${mapX[align]} ${mapY[side]}`;
+    }),
+    ...rest
+  };
+}}
 
 export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject })
 
 export const float = (styles) => css(getFloatStyle(styles))
-float.raw = getFloatStyle
+float.raw = getFloatStyle

package/styled-system/patterns/grid-item.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 GridItemProperties = {
    colSpan?: ConditionalValue<number>