@pandacss/studio 0.13.0 → 0.14.0

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

package/styled-system/patterns/grid-item.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 gridItemConfig = {
-  transform(props, { map }) {
-    const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props
-    const spanFn = (v) => (v === 'auto' ? v : `span ${v}`)
-    return {
-      gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
-      gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
-      gridColumnStart: colStart,
-      gridColumnEnd: colEnd,
-      gridRowStart: rowStart,
-      gridRowEnd: rowEnd,
-      ...rest,
-    }
-  },
-}
+transform(props, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+  const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+  return {
+    gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+    gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+    gridColumnStart: colStart,
+    gridColumnEnd: colEnd,
+    gridRowStart: rowStart,
+    gridRowEnd: rowEnd,
+    ...rest
+  };
+}}
 
 export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject })
 
 export const gridItem = (styles) => css(getGridItemStyle(styles))
-gridItem.raw = getGridItemStyle
+gridItem.raw = getGridItemStyle

package/styled-system/patterns/grid.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 GridProperties = {
    gap?: PropertyValue<'gap'>
@@ -18,7 +18,7 @@ type GridStyles = GridProperties & DistributiveOmit<SystemStyleObject, keyof Gri
 
 interface GridPatternFn {
   (styles?: GridStyles): string
-  raw: (styles: GridStyles) => SystemStyleObject
+  raw: (styles?: GridStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/grid.mjs

@@ -1,26 +1,20 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const gridConfig = {
-  transform(props, { map }) {
-    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : '10px', columns, minChildWidth, ...rest } = props
-    return {
-      display: 'grid',
-      gridTemplateColumns:
-        columns != null
-          ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`)
-          : minChildWidth != null
-          ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`)
-          : void 0,
-      gap,
-      columnGap,
-      rowGap,
-      ...rest,
-    }
-  },
-}
+transform(props, { map }) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
+  return {
+    display: "grid",
+    gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`) : void 0,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+}}
 
 export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
 
 export const grid = (styles) => css(getGridStyle(styles))
-grid.raw = getGridStyle
+grid.raw = getGridStyle

package/styled-system/patterns/hstack.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 HstackProperties = {
    justify?: PropertyValue<'justifyContent'>
@@ -15,7 +15,7 @@ type HstackStyles = HstackProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface HstackPatternFn {
   (styles?: HstackStyles): string
-  raw: (styles: HstackStyles) => SystemStyleObject
+  raw: (styles?: HstackStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/hstack.mjs

@@ -1,21 +1,20 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const hstackConfig = {
-  transform(props) {
-    const { justify, gap = '10px', ...rest } = props
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: justify,
-      gap,
-      flexDirection: 'row',
-      ...rest,
-    }
-  },
-}
+transform(props) {
+  const { justify, gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "row",
+    ...rest
+  };
+}}
 
 export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
 
 export const hstack = (styles) => css(getHstackStyle(styles))
-hstack.raw = getHstackStyle
+hstack.raw = getHstackStyle

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

@@ -1,22 +1,22 @@
 /* eslint-disable */
-export * from './box'
-export * from './flex'
-export * from './stack'
-export * from './vstack'
-export * from './hstack'
-export * from './spacer'
-export * from './square'
-export * from './circle'
-export * from './center'
-export * from './link-box'
-export * from './link-overlay'
-export * from './aspect-ratio'
-export * from './grid'
-export * from './grid-item'
-export * from './wrap'
-export * from './container'
-export * from './divider'
-export * from './float'
-export * from './bleed'
-export * from './visually-hidden'
-export * from './styled-link'
+export * from './box';
+export * from './flex';
+export * from './stack';
+export * from './vstack';
+export * from './hstack';
+export * from './spacer';
+export * from './square';
+export * from './circle';
+export * from './center';
+export * from './link-box';
+export * from './link-overlay';
+export * from './aspect-ratio';
+export * from './grid';
+export * from './grid-item';
+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

@@ -1,21 +1,21 @@
-export * from './box.mjs'
-export * from './flex.mjs'
-export * from './stack.mjs'
-export * from './vstack.mjs'
-export * from './hstack.mjs'
-export * from './spacer.mjs'
-export * from './square.mjs'
-export * from './circle.mjs'
-export * from './center.mjs'
-export * from './link-box.mjs'
-export * from './link-overlay.mjs'
-export * from './aspect-ratio.mjs'
-export * from './grid.mjs'
-export * from './grid-item.mjs'
-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'
+export * from './box.mjs';
+export * from './flex.mjs';
+export * from './stack.mjs';
+export * from './vstack.mjs';
+export * from './hstack.mjs';
+export * from './spacer.mjs';
+export * from './square.mjs';
+export * from './circle.mjs';
+export * from './center.mjs';
+export * from './link-box.mjs';
+export * from './link-overlay.mjs';
+export * from './aspect-ratio.mjs';
+export * from './grid.mjs';
+export * from './grid-item.mjs';
+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/link-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 LinkBoxProperties = {
    
@@ -14,7 +14,7 @@ type LinkBoxStyles = LinkBoxProperties & DistributiveOmit<SystemStyleObject, key
 
 interface LinkBoxPatternFn {
   (styles?: LinkBoxStyles): string
-  raw: (styles: LinkBoxStyles) => SystemStyleObject
+  raw: (styles?: LinkBoxStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/link-box.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 linkBoxConfig = {
-  transform(props) {
-    return {
-      position: 'relative',
-      '& :where(a, abbr)': {
-        position: 'relative',
-        zIndex: '1',
-      },
-      ...props,
-    }
-  },
-}
+transform(props) {
+  return {
+    position: "relative",
+    "& :where(a, abbr)": {
+      position: "relative",
+      zIndex: "1"
+    },
+    ...props
+  };
+}}
 
 export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject })
 
 export const linkBox = (styles) => css(getLinkBoxStyle(styles))
-linkBox.raw = getLinkBoxStyle
+linkBox.raw = getLinkBoxStyle

package/styled-system/patterns/link-overlay.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 LinkOverlayProperties = {
    
@@ -14,7 +14,7 @@ type LinkOverlayStyles = LinkOverlayProperties & DistributiveOmit<SystemStyleObj
 
 interface LinkOverlayPatternFn {
   (styles?: LinkOverlayStyles): string
-  raw: (styles: LinkOverlayStyles) => SystemStyleObject
+  raw: (styles?: LinkOverlayStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/link-overlay.mjs

@@ -1,25 +1,24 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const linkOverlayConfig = {
-  transform(props) {
-    return {
-      position: 'static',
-      _before: {
-        content: '""',
-        display: 'block',
-        position: 'absolute',
-        cursor: 'inherit',
-        inset: '0',
-        zIndex: '0',
-        ...props['_before'],
-      },
-      ...props,
-    }
-  },
-}
+transform(props) {
+  return {
+    position: "static",
+    _before: {
+      content: '""',
+      display: "block",
+      position: "absolute",
+      cursor: "inherit",
+      inset: "0",
+      zIndex: "0",
+      ...props["_before"]
+    },
+    ...props
+  };
+}}
 
 export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject })
 
 export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
-linkOverlay.raw = getLinkOverlayStyle
+linkOverlay.raw = getLinkOverlayStyle

package/styled-system/patterns/spacer.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 SpacerProperties = {
    size?: ConditionalValue<Tokens["spacing"]>
@@ -14,7 +14,7 @@ type SpacerStyles = SpacerProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface SpacerPatternFn {
   (styles?: SpacerStyles): string
-  raw: (styles: SpacerStyles) => SystemStyleObject
+  raw: (styles?: SpacerStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/spacer.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 spacerConfig = {
-  transform(props, { map }) {
-    const { size, ...rest } = props
-    return {
-      alignSelf: 'stretch',
-      justifySelf: 'stretch',
-      flex: map(size, (v) => (v == null ? '1' : `0 0 ${v}`)),
-      ...rest,
-    }
-  },
-}
+transform(props, { map }) {
+  const { size, ...rest } = props;
+  return {
+    alignSelf: "stretch",
+    justifySelf: "stretch",
+    flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
+    ...rest
+  };
+}}
 
 export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject })
 
 export const spacer = (styles) => css(getSpacerStyle(styles))
-spacer.raw = getSpacerStyle
+spacer.raw = getSpacerStyle

package/styled-system/patterns/square.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 SquareProperties = {
    size?: PropertyValue<'width'>
@@ -14,7 +14,7 @@ type SquareStyles = SquareProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface SquarePatternFn {
   (styles?: SquareStyles): string
-  raw: (styles: SquareStyles) => SystemStyleObject
+  raw: (styles?: SquareStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/square.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 squareConfig = {
-  transform(props) {
-    const { size, ...rest } = props
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flex: '0 0 auto',
-      width: size,
-      height: size,
-      ...rest,
-    }
-  },
-}
+transform(props) {
+  const { size, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "0 0 auto",
+    width: size,
+    height: size,
+    ...rest
+  };
+}}
 
 export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject })
 
 export const square = (styles) => css(getSquareStyle(styles))
-square.raw = getSquareStyle
+square.raw = getSquareStyle

package/styled-system/patterns/stack.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 StackProperties = {
    align?: PropertyValue<'alignItems'>
@@ -17,7 +17,7 @@ type StackStyles = StackProperties & DistributiveOmit<SystemStyleObject, keyof S
 
 interface StackPatternFn {
   (styles?: StackStyles): string
-  raw: (styles: StackStyles) => SystemStyleObject
+  raw: (styles?: StackStyles) => SystemStyleObject
 }