@pandacss/studio 0.12.2 → 0.13.1

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

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

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

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

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

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

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

package/styled-system/patterns/stack.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 stackConfig = {
-  transform(props) {
-    const { align, justify, direction = 'column', gap = '10px', ...rest } = props
-    return {
-      display: 'flex',
-      flexDirection: direction,
-      alignItems: align,
-      justifyContent: justify,
-      gap,
-      ...rest,
-    }
-  },
-}
+transform(props) {
+  const { align, justify, direction = "column", gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    ...rest
+  };
+}}
 
 export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
 
 export const stack = (styles) => css(getStackStyle(styles))
-stack.raw = getStackStyle
+stack.raw = getStackStyle

package/styled-system/patterns/styled-link.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 StyledLinkProperties = {
    

package/styled-system/patterns/styled-link.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 styledLinkConfig = {
-  transform: (props) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    opacity: '0.5',
-    borderBottom: '1px solid transparent',
-    cursor: 'pointer',
-    _hover: { opacity: 1, borderBottomColor: 'black' },
-    ...props,
-  }),
-}
+transform:(props) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  opacity: "0.5",
+  borderBottom: "1px solid transparent",
+  cursor: "pointer",
+  _hover: { opacity: 1, borderBottomColor: "black" },
+  ...props
+})}
 
 export const getStyledLinkStyle = (styles = {}) => styledLinkConfig.transform(styles, { map: mapObject })
 
 export const styledLink = (styles) => css(getStyledLinkStyle(styles))
-styledLink.raw = getStyledLinkStyle
+styledLink.raw = getStyledLinkStyle

package/styled-system/patterns/visually-hidden.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 VisuallyHiddenProperties = {
    

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

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

package/styled-system/patterns/vstack.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 VstackProperties = {
    justify?: PropertyValue<'justifyContent'>